Include non-primary entities targeted directly by label

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

.github/workflows/cast_deployment.yaml

@@ -26,7 +26,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -61,7 +61,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -60,7 +60,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -78,7 +78,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -102,7 +102,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/demo_deployment.yaml

@@ -27,7 +27,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -62,7 +62,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_deployment.yaml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@v5.0.0
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_preview.yaml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@v5.0.0
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/labeler.yaml

@@ -10,6 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Apply labels
-        uses: actions/labeler@v5.0.0
+        uses: actions/labeler@v6.0.1
         with:
           sync-labels: true

.github/workflows/nightly.yaml

@@ -23,12 +23,12 @@ jobs:
         uses: actions/checkout@v5.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v6
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/release.yaml

@@ -26,7 +26,7 @@ jobs:
         uses: actions/checkout@v5.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@v6
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
@@ -34,7 +34,7 @@ jobs:
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@v2.3.2
+        uses: softprops/action-gh-release@v2.3.3
         with:
           files: |
             dist/*.whl
@@ -92,7 +92,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -107,7 +107,7 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@v2.3.2
+        uses: softprops/action-gh-release@v2.3.3
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -121,7 +121,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@v4.4.0
+        uses: actions/setup-node@v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -136,6 +136,6 @@ jobs:
       - name: Tar folder
         run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
       - name: Upload release asset
-        uses: softprops/action-gh-release@v2.3.2
+        uses: softprops/action-gh-release@v2.3.3
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

.github/workflows/restrict-task-creation.yml

@@ -12,7 +12,7 @@ jobs:
     if: github.event.issue.type.name == 'Task'
     steps:
       - name: Check if user is authorized
-        uses: actions/github-script@v7
+        uses: actions/github-script@v8
         with:
           script: |
             const issueAuthor = context.payload.issue.user.login;

.github/workflows/stale.yml

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

cast/src/media/entrypoint.ts

@@ -5,17 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     const media = loadRequestData.media;
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }

cast/src/receiver/entrypoint.ts

@@ -40,7 +40,8 @@ const playDummyMedia = (viewTitle?: string) => {
   loadRequestData.media.contentId =
     "https://cast.home-assistant.io/images/google-nest-hub.png";
   loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType =
+    "NONE" as framework.messages.StreamType.NONE;
   const metadata = new framework.messages.GenericMediaMetadata();
   metadata.title = viewTitle;
   loadRequestData.media.metadata = metadata;
@@ -89,7 +90,7 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: framework.system.MessageType.JSON,
+  [CAST_NS]: "json" as framework.system.MessageType.JSON,
 };
 
 castContext.addCustomMessageListener(
@@ -97,9 +98,7 @@ castContext.addCustomMessageListener(
   // @ts-ignore
   (ev: ReceivedMessage<HassMessage>) => {
     // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-    if (
-      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
-    ) {
+    if (playerManager.getPlayerState() !== "IDLE") {
       playerManager.stop();
     } else {
       showLovelaceController();
@@ -113,7 +112,7 @@ castContext.addCustomMessageListener(
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  framework.messages.MessageType.LOAD,
+  "LOAD" as framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     if (
       loadRequestData.media.contentId ===
@@ -127,24 +126,23 @@ playerManager.setMessageInterceptor(
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = framework.messages.StreamType.LIVE;
+      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
       media.hlsVideoSegmentFormat =
-        framework.messages.HlsVideoSegmentFormat.FMP4;
+        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }
 );
 
 playerManager.addEventListener(
-  framework.events.EventType.MEDIA_STATUS,
+  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
   (event) => {
     if (
-      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
+      event.mediaStatus?.playerState === "IDLE" &&
       event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !==
-        framework.messages.IdleReason.INTERRUPTED
+      event.mediaStatus?.idleReason !== "INTERRUPTED"
     ) {
       // media finished or stopped, return to default Lovelace
       showLovelaceController();

demo/src/html/index.html.template

@@ -68,7 +68,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-top, 0px), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {

gallery/src/components/demo-more-info.ts

@@ -1,10 +1,11 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/dialogs/more-info/more-info-content";
 import "../../../src/state-summary/state-card-content";
 import "../ha-demo-options";
 import type { HomeAssistant } from "../../../src/types";
+import { computeShowNewMoreInfo } from "../../../src/dialogs/more-info/const";
 
 @customElement("demo-more-info")
 class DemoMoreInfo extends LitElement {
@@ -21,11 +22,13 @@ class DemoMoreInfo extends LitElement {
       <div class="root">
         <div id="card">
           <ha-card>
-            <state-card-content
-              .stateObj=${state}
-              .hass=${this.hass}
-              in-dialog
-            ></state-card-content>
+            ${!computeShowNewMoreInfo(state)
+              ? html`<state-card-content
+                  .stateObj=${state}
+                  .hass=${this.hass}
+                  in-dialog
+                ></state-card-content>`
+              : nothing}
 
             <more-info-content
               .hass=${this.hass}

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -781,7 +781,7 @@ class HassioAddonInfo extends LitElement {
 
       ${this.addon.long_description
         ? html`
-            <ha-card outlined>
+            <ha-card class="long-description" outlined>
               <div class="card-content">
                 <ha-markdown
                   .content=${this.addon.long_description}
@@ -1333,6 +1333,9 @@ class HassioAddonInfo extends LitElement {
         .description a {
           color: var(--primary-color);
         }
+        .long-description {
+          direction: ltr;
+        }
         ha-assist-chip {
           --md-sys-color-primary: var(--text-primary-color);
           --md-sys-color-on-surface: var(--text-primary-color);

landing-page/src/html/index.html.template

@@ -19,8 +19,9 @@
         height: auto;
         padding: 32px 0;
       }
+
       .content {
-        max-width: 560px;
+        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
         margin: 0 auto;
         padding: 0 16px;
         box-sizing: content-box;

package.json

@@ -26,16 +26,15 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@awesome.me/webawesome": "3.0.0-beta.4",
     "@babel/runtime": "7.28.3",
     "@braintree/sanitize-url": "7.1.1",
-    "@codemirror/autocomplete": "6.18.6",
+    "@codemirror/autocomplete": "6.18.7",
     "@codemirror/commands": "6.8.1",
     "@codemirror/language": "6.11.3",
     "@codemirror/legacy-modes": "6.5.1",
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.1",
+    "@codemirror/view": "6.38.2",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.0",
     "@formatjs/intl-displaynames": "6.8.11",
@@ -52,6 +51,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
+    "@home-assistant/webawesome": "3.0.0-beta.4.ha.1",
     "@lezer/highlight": "1.2.1",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",
@@ -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/vaadin-themable-mixin": "24.8.6",
+    "@vaadin/combo-box": "24.8.7",
+    "@vaadin/vaadin-themable-mixin": "24.8.7",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -122,7 +122,7 @@
     "leaflet.markercluster": "1.5.3",
     "lit": "3.3.1",
     "lit-html": "3.3.1",
-    "luxon": "3.7.1",
+    "luxon": "3.7.2",
     "marked": "16.2.1",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
@@ -159,18 +159,18 @@
     "@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.5.2",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.22",
+    "@types/chromecast-caf-receiver": "6.0.24",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
-    "@types/culori": "4.0.0",
+    "@types/culori": "4.0.1",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
     "@types/leaflet": "1.9.20",
-    "@types/leaflet-draw": "1.0.12",
-    "@types/leaflet.markercluster": "1.5.5",
+    "@types/leaflet-draw": "1.0.13",
+    "@types/leaflet.markercluster": "1.5.6",
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.7.1",
     "@types/mocha": "10.0.10",
@@ -204,7 +204,7 @@
     "husky": "9.1.7",
     "jsdom": "26.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.1.5",
+    "lint-staged": "16.1.6",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -212,13 +212,13 @@
     "pinst": "3.0.0",
     "prettier": "3.6.2",
     "rspack-manifest-plugin": "5.0.3",
-    "serve": "14.2.4",
+    "serve": "14.2.5",
     "sinon": "21.0.0",
     "tar": "7.4.3",
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.2",
-    "typescript-eslint": "8.41.0",
+    "typescript-eslint": "8.42.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "3.2.4",
     "webpack-stats-plugin": "1.1.3",
@@ -234,8 +234,7 @@
     "@fullcalendar/daygrid": "6.1.19",
     "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"
+    "@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"
   },
   "packageManager": "yarn@4.9.4"
 }

pyproject.toml

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

src/common/entity/entity_filter.ts

@@ -67,10 +67,7 @@ export const generateEntityFilter = (
     }
 
     if (floors) {
-      if (!floor) {
-        return false;
-      }
-      if (!floors) {
+      if (!floor || !floors.has(floor.floor_id)) {
         return false;
       }
     }

src/components/ha-automation-row.ts

@@ -80,7 +80,18 @@ export class HaAutomationRow extends LitElement {
       ev.key !== " " &&
       !(
         (this.sortSelected || ev.altKey) &&
+        !(ev.ctrlKey || ev.metaKey) &&
+        !ev.shiftKey &&
         (ev.key === "ArrowUp" || ev.key === "ArrowDown")
+      ) &&
+      !(
+        (ev.ctrlKey || ev.metaKey) &&
+        !ev.shiftKey &&
+        !ev.altKey &&
+        (ev.key === "c" ||
+          ev.key === "x" ||
+          ev.key === "Delete" ||
+          ev.key === "Backspace")
       )
     ) {
       return;
@@ -101,6 +112,22 @@ export class HaAutomationRow extends LitElement {
       return;
     }
 
+    if (ev.ctrlKey || ev.metaKey) {
+      if (ev.key === "c") {
+        fireEvent(this, "copy-row");
+        return;
+      }
+      if (ev.key === "x") {
+        fireEvent(this, "cut-row");
+        return;
+      }
+
+      if (ev.key === "Delete" || ev.key === "Backspace") {
+        fireEvent(this, "delete-row");
+        return;
+      }
+    }
+
     this.click();
   }
 
@@ -132,6 +159,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);
@@ -196,5 +224,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-button-group.ts

@@ -1,82 +0,0 @@
-import ButtonGroup from "@awesome.me/webawesome/dist/components/button-group/button-group";
-import { customElement } from "lit/decorators";
-import type { HaButton } from "./ha-button";
-import { StateSet } from "../resources/polyfills/stateset";
-
-export type Appearance = "accent" | "filled" | "outlined" | "plain";
-
-/**
- * Finds an ha-button element either as the current element or within its descendants.
- * @param el - The HTML element to search from
- * @returns The found HaButton element, or null if not found
- */
-function findButton(el: HTMLElement) {
-  const selector = "ha-button";
-  return (el.closest(selector) ?? el.querySelector(selector)) as HaButton;
-}
-
-/**
- * @element ha-button-group
- * @extends {ButtonGroup}
- * @summary
- * Group buttons. Extend Webawesome to be able to work with ha-button tags
- *
- * @documentation https://webawesome.com/components/button-group
- */
-@customElement("ha-button-group") // @ts-expect-error Intentionally overriding private methods
-export class HaButtonGroup extends ButtonGroup {
-  attachInternals() {
-    const internals = super.attachInternals();
-    Object.defineProperty(internals, "states", {
-      value: new StateSet(this, internals.states),
-    });
-    return internals;
-  }
-
-  // @ts-expect-error updateClassNames is used in super class
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  private override updateClassNames() {
-    const slottedElements = [
-      ...this.defaultSlot.assignedElements({ flatten: true }),
-    ] as HTMLElement[];
-    this.hasOutlined = false;
-
-    slottedElements.forEach((el) => {
-      const index = slottedElements.indexOf(el);
-      const button = findButton(el);
-
-      if (button) {
-        if ((button as HaButton).appearance === "outlined")
-          this.hasOutlined = true;
-        if (this.size) button.setAttribute("size", this.size);
-        button.classList.add("wa-button-group__button");
-        button.classList.toggle(
-          "wa-button-group__horizontal",
-          this.orientation === "horizontal"
-        );
-        button.classList.toggle(
-          "wa-button-group__vertical",
-          this.orientation === "vertical"
-        );
-        button.classList.toggle("wa-button-group__button-first", index === 0);
-        button.classList.toggle(
-          "wa-button-group__button-inner",
-          index > 0 && index < slottedElements.length - 1
-        );
-        button.classList.toggle(
-          "wa-button-group__button-last",
-          index === slottedElements.length - 1
-        );
-
-        // use button-group variant
-        button.setAttribute("variant", this.variant);
-      }
-    });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-button-group": HaButtonGroup;
-  }
-}

src/components/ha-button-toggle-group.ts

@@ -1,11 +1,11 @@
+import "@home-assistant/webawesome/dist/components/button-group/button-group";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { ToggleButton } from "../types";
-import "./ha-svg-icon";
 import "./ha-button";
-import "./ha-button-group";
+import "./ha-svg-icon";
 
 /**
  * @element ha-button-toggle-group
@@ -37,11 +37,14 @@ export class HaButtonToggleGroup extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-button-group .variant=${this.variant} .size=${this.size}>
+      <wa-button-group childSelector="ha-button">
         ${this.buttons.map(
           (button) =>
             html`<ha-button
+              iconTag="ha-svg-icon"
               class="icon"
+              .variant=${this.variant}
+              .size=${this.size}
               .value=${button.value}
               @click=${this._handleClick}
               .title=${button.label}
@@ -55,7 +58,7 @@ export class HaButtonToggleGroup extends LitElement {
                 : button.label}
             </ha-button>`
         )}
-      </ha-button-group>
+      </wa-button-group>
     `;
   }
 

src/components/ha-button.ts

@@ -1,9 +1,7 @@
-import Button from "@awesome.me/webawesome/dist/components/button/button";
+import Button from "@home-assistant/webawesome/dist/components/button/button";
 import { css, type CSSResultGroup } from "lit";
 import { customElement } from "lit/decorators";
 
-import { StateSet } from "../resources/polyfills/stateset";
-
 export type Appearance = "accent" | "filled" | "outlined" | "plain";
 
 /**
@@ -35,54 +33,10 @@ export type Appearance = "accent" | "filled" | "outlined" | "plain";
  * @attr {boolean} loading - shows a loading indicator instead of the buttons label and disable buttons click.
  * @attr {boolean} disabled - Disables the button and prevents user interaction.
  */
-@customElement("ha-button") // @ts-expect-error Intentionally overriding private methods
+@customElement("ha-button")
 export class HaButton extends Button {
   variant: "brand" | "neutral" | "success" | "warning" | "danger" = "brand";
 
-  attachInternals() {
-    const internals = super.attachInternals();
-    Object.defineProperty(internals, "states", {
-      value: new StateSet(this, internals.states),
-    });
-    return internals;
-  }
-
-  // @ts-expect-error handleLabelSlotChange is used in super class
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  private override handleLabelSlotChange() {
-    const nodes = this.labelSlot.assignedNodes({ flatten: true });
-    let hasIconLabel = false;
-    let hasIcon = false;
-    let text = "";
-
-    // If there's only an icon and no text, it's an icon button
-    [...nodes].forEach((node) => {
-      if (
-        node.nodeType === Node.ELEMENT_NODE &&
-        (node as HTMLElement).localName === "ha-svg-icon"
-      ) {
-        hasIcon = true;
-        if (!hasIconLabel)
-          hasIconLabel = (node as HTMLElement).hasAttribute("aria-label");
-      }
-
-      // Concatenate text nodes
-      if (node.nodeType === Node.TEXT_NODE) {
-        text += node.textContent;
-      }
-    });
-
-    this.isIconButton = text.trim() === "" && hasIcon;
-
-    if (__DEV__ && this.isIconButton && !hasIconLabel) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'Icon buttons must have a label for screen readers. Add <ha-svg-icon aria-label="..."> to remove this warning.',
-        this
-      );
-    }
-  }
-
   static get styles(): CSSResultGroup {
     return [
       Button.styles,
@@ -262,10 +216,10 @@ export class HaButton extends Button {
         }
 
         .button.has-start {
-          padding-left: 8px;
+          padding-inline-start: 8px;
         }
         .button.has-end {
-          padding-right: 8px;
+          padding-inline-end: 8px;
         }
       `,
     ];

src/components/ha-dialog.ts

@@ -90,7 +90,7 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__actions {
         justify-content: var(--justify-action-buttons, flex-end);
-        padding: 12px 16px max(var(--safe-area-inset-bottom), 16px) 16px;
+        padding: 12px 16px 16px 16px;
       }
       .mdc-dialog__actions span:nth-child(1) {
         flex: var(--secondary-action-button-flex, unset);
@@ -100,6 +100,8 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__container {
         align-items: var(--vertical-align-dialog, center);
+        padding-top: var(--safe-area-inset-top);
+        padding-bottom: var(--safe-area-inset-bottom);
       }
       .mdc-dialog__title {
         padding: 16px 16px 0 16px;
@@ -115,15 +117,17 @@ export class HaDialog extends DialogBase {
         padding: var(--dialog-content-padding, 24px);
       }
       :host([hideactions]) .mdc-dialog .mdc-dialog__content {
-        padding-bottom: max(
-          var(--dialog-content-padding, 24px),
-          var(--safe-area-inset-bottom)
-        );
+        padding-bottom: var(--dialog-content-padding, 24px);
       }
       .mdc-dialog .mdc-dialog__surface {
         position: var(--dialog-surface-position, relative);
         top: var(--dialog-surface-top);
         margin-top: var(--dialog-surface-margin-top);
+        min-width: calc(
+          var(--mdc-dialog-min-width, 100vw) - var(
+              --safe-area-inset-left
+            ) - var(--safe-area-inset-right)
+        );
         min-height: var(--mdc-dialog-min-height, auto);
         border-radius: var(--ha-dialog-border-radius, 24px);
         -webkit-backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
@@ -137,6 +141,24 @@ export class HaDialog extends DialogBase {
         display: flex;
         flex-direction: column;
       }
+
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        .mdc-dialog .mdc-dialog__surface {
+          min-height: calc(
+            100vh - var(--safe-area-inset-top, 0px) - var(
+                --safe-area-inset-bottom,
+                0px
+              )
+          );
+          max-height: calc(
+            100vh - var(--safe-area-inset-top, 0px) - var(
+                --safe-area-inset-bottom,
+                0px
+              )
+          );
+        }
+      }
+
       .header_title {
         display: flex;
         align-items: center;

src/components/ha-fade-in.ts

@@ -1,4 +1,4 @@
-import WaAnimation from "@awesome.me/webawesome/dist/components/animation/animation";
+import WaAnimation from "@home-assistant/webawesome/dist/components/animation/animation";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-fade-in")

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-progress-ring.ts

@@ -1,21 +1,12 @@
-import ProgressRing from "@awesome.me/webawesome/dist/components/progress-ring/progress-ring";
+import ProgressRing from "@home-assistant/webawesome/dist/components/progress-ring/progress-ring";
 import { css } from "lit";
 import type { CSSResultGroup } from "lit";
 import { customElement, property } from "lit/decorators";
-import { StateSet } from "../resources/polyfills/stateset";
 
 @customElement("ha-progress-ring")
 export class HaProgressRing extends ProgressRing {
   @property() public size?: "tiny" | "small" | "medium" | "large";
 
-  attachInternals() {
-    const internals = super.attachInternals();
-    Object.defineProperty(internals, "states", {
-      value: new StateSet(this, internals.states),
-    });
-    return internals;
-  }
-
   public updated(changedProps) {
     super.updated(changedProps);
 

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/components/ha-spinner.ts

@@ -1,10 +1,8 @@
-import Spinner from "@awesome.me/webawesome/dist/components/spinner/spinner";
+import Spinner from "@home-assistant/webawesome/dist/components/spinner/spinner";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css } from "lit";
 import { customElement, property } from "lit/decorators";
 
-import { StateSet } from "../resources/polyfills/stateset";
-
 @customElement("ha-spinner")
 export class HaSpinner extends Spinner {
   @property() public size?: "tiny" | "small" | "medium" | "large";
@@ -33,14 +31,6 @@ export class HaSpinner extends Spinner {
     }
   }
 
-  attachInternals() {
-    const internals = super.attachInternals();
-    Object.defineProperty(internals, "states", {
-      value: new StateSet(this, internals.states),
-    });
-    return internals;
-  }
-
   static get styles(): CSSResultGroup {
     return [
       Spinner.styles,

src/components/ha-target-picker.ts

@@ -592,7 +592,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         if (
           entity.labels.includes(target.id) &&
           !this.value!.entity_id?.includes(entity.entity_id) &&
-          this._entityRegMeetsFilter(entity)
+          this._entityRegMeetsFilter(entity, true)
         ) {
           newEntities.push(entity.entity_id);
         }
@@ -717,8 +717,11 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     return true;
   }
 
-  private _entityRegMeetsFilter(entity: EntityRegistryDisplayEntry): boolean {
-    if (entity.hidden || entity.entity_category) {
+  private _entityRegMeetsFilter(
+    entity: EntityRegistryDisplayEntry,
+    includeSecondary = false
+  ): boolean {
+    if (entity.hidden || (entity.entity_category && !includeSecondary)) {
       return false;
     }
 

src/data/bluetooth.ts

@@ -24,11 +24,14 @@ export interface BluetoothConnectionData extends DataTableRowData {
   source: string;
 }
 
+export type HaScannerType = "usb" | "uart" | "remote" | "unknown";
+
 export interface BluetoothScannerDetails {
   source: string;
   connectable: boolean;
   name: string;
   adapter: string;
+  scanner_type?: HaScannerType;
 }
 
 export type BluetoothScannersDetails = Record<string, BluetoothScannerDetails>;
@@ -55,6 +58,13 @@ export interface BluetoothAllocationsData {
   allocated: string[];
 }
 
+export interface BluetoothScannerState {
+  source: string;
+  adapter: string;
+  current_mode: "active" | "passive" | null;
+  requested_mode: "active" | "passive" | null;
+}
+
 export const subscribeBluetoothScannersDetailsUpdates = (
   conn: Connection,
   store: Store<BluetoothScannersDetails>
@@ -170,3 +180,20 @@ export const subscribeBluetoothConnectionAllocations = (
     params
   );
 };
+
+export const subscribeBluetoothScannerState = (
+  conn: Connection,
+  callbackFunction: (scannerState: BluetoothScannerState) => void,
+  configEntryId?: string
+): Promise<() => Promise<void>> => {
+  const params: { type: string; config_entry_id?: string } = {
+    type: "bluetooth/subscribe_scanner_state",
+  };
+  if (configEntryId) {
+    params.config_entry_id = configEntryId;
+  }
+  return conn.subscribeMessage<BluetoothScannerState>(
+    (scannerState) => callbackFunction(scannerState),
+    params
+  );
+};

src/data/data_entry_flow.ts

@@ -97,6 +97,7 @@ export interface DataEntryFlowStepMenu {
   step_id: string;
   /** If array, use value to lookup translations in strings.json */
   menu_options: string[] | Record<string, string>;
+  sort?: boolean;
   description_placeholders?: Record<string, string>;
   translation_domain?: string;
 }

src/data/graph.ts

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

src/data/recorder.ts

@@ -2,6 +2,7 @@ import type { Connection } from "home-assistant-js-websocket";
 import { computeStateName } from "../common/entity/compute_state_name";
 import type { HaDurationData } from "../components/ha-duration-input";
 import type { HomeAssistant } from "../types";
+import { firstWeekday } from "../common/datetime/first_weekday";
 
 export interface RecorderInfo {
   backlog: number | null;
@@ -108,7 +109,7 @@ export interface StatisticsValidationResultMeanTypeChanged {
   };
 }
 
-export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF"] as const;
+export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF", "MCF"] as const;
 
 export interface StatisticsUnitConfiguration {
   energy?: "Wh" | "kWh" | "MWh" | "GJ";
@@ -211,7 +212,14 @@ export const fetchStatistic = (
               : period.fixed_period.end,
         }
       : undefined,
-    calendar: period.calendar,
+    calendar: period.calendar
+      ? {
+          ...(period.calendar.period === "week"
+            ? { first_weekday: firstWeekday(hass.locale).substring(0, 3) }
+            : {}),
+          ...period.calendar,
+        }
+      : undefined,
     rolling_window: period.rolling_window,
   });
 

src/dialogs/config-flow/show-dialog-config-flow.ts

@@ -256,6 +256,13 @@ export const showConfigFlowDialog = (
       );
     },
 
+    renderMenuOptionDescription(hass, step, option) {
+      return hass.localize(
+        `component.${step.translation_domain || step.handler}.config.step.${step.step_id}.menu_option_descriptions.${option}`,
+        step.description_placeholders
+      );
+    },
+
     renderLoadingDescription(hass, reason, handler, step) {
       if (reason !== "loading_flow" && reason !== "loading_step") {
         return "";

src/dialogs/config-flow/show-dialog-data-entry-flow.ts

@@ -137,6 +137,12 @@ export interface FlowConfig {
     option: string
   ): string;
 
+  renderMenuOptionDescription(
+    hass: HomeAssistant,
+    step: DataEntryFlowStepMenu,
+    option: string
+  ): string;
+
   renderLoadingDescription(
     hass: HomeAssistant,
     loadingReason: LoadingReason,

src/dialogs/config-flow/show-dialog-options-flow.ts

@@ -225,6 +225,13 @@ export const showOptionsFlowDialog = (
         );
       },
 
+      renderMenuOptionDescription(hass, step, option) {
+        return hass.localize(
+          `component.${step.translation_domain || configEntry.domain}.options.step.${step.step_id}.menu_option_descriptions.${option}`,
+          step.description_placeholders
+        );
+      },
+
       renderLoadingDescription(hass, reason) {
         return (
           hass.localize(`component.${configEntry.domain}.options.loading`) ||

src/dialogs/config-flow/show-dialog-sub-config-flow.ts

@@ -252,6 +252,13 @@ export const showSubConfigFlowDialog = (
       );
     },
 
+    renderMenuOptionDescription(hass, step, option) {
+      return hass.localize(
+        `component.${step.translation_domain || configEntry.domain}.config_subentries.${flowType}.step.${step.step_id}.menu_option_descriptions.${option}`,
+        step.description_placeholders
+      );
+    },
+
     renderLoadingDescription(hass, reason, handler, step) {
       if (reason !== "loading_flow" && reason !== "loading_step") {
         return "";

src/dialogs/config-flow/step-flow-menu.ts

@@ -1,5 +1,5 @@
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-icon-next";
@@ -8,6 +8,7 @@ import type { DataEntryFlowStepMenu } from "../../data/data_entry_flow";
 import type { HomeAssistant } from "../../types";
 import type { FlowConfig } from "./show-dialog-data-entry-flow";
 import { configFlowContentStyles } from "./styles";
+import { stringCompare } from "../../common/string/compare";
 
 @customElement("step-flow-menu")
 class StepFlowMenu extends LitElement {
@@ -17,9 +18,18 @@ class StepFlowMenu extends LitElement {
 
   @property({ attribute: false }) public step!: DataEntryFlowStepMenu;
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return (
+      changedProps.size > 1 ||
+      !changedProps.has("hass") ||
+      this.hass.localize !== changedProps.get("hass")?.localize
+    );
+  }
+
   protected render(): TemplateResult {
     let options: string[];
     let translations: Record<string, string>;
+    let optionDescriptions: Record<string, string> = {};
 
     if (Array.isArray(this.step.menu_options)) {
       options = this.step.menu_options;
@@ -30,10 +40,36 @@ class StepFlowMenu extends LitElement {
           this.step,
           option
         );
+        optionDescriptions[option] =
+          this.flowConfig.renderMenuOptionDescription(
+            this.hass,
+            this.step,
+            option
+          );
       }
     } else {
       options = Object.keys(this.step.menu_options);
       translations = this.step.menu_options;
+      optionDescriptions = Object.fromEntries(
+        options.map((key) => [
+          key,
+          this.flowConfig.renderMenuOptionDescription(
+            this.hass,
+            this.step,
+            key
+          ),
+        ])
+      );
+    }
+
+    if (this.step.sort) {
+      options = options.sort((a, b) =>
+        stringCompare(
+          translations[a]!,
+          translations[b]!,
+          this.hass.locale.language
+        )
+      );
     }
 
     const description = this.flowConfig.renderMenuDescription(
@@ -46,8 +82,18 @@ class StepFlowMenu extends LitElement {
       <div class="options">
         ${options.map(
           (option) => html`
-            <ha-list-item hasMeta .step=${option} @click=${this._handleStep}>
+            <ha-list-item
+              hasMeta
+              .step=${option}
+              @click=${this._handleStep}
+              ?twoline=${optionDescriptions[option]}
+            >
               <span>${translations[option]}</span>
+              ${optionDescriptions[option]
+                ? html`<span slot="secondary">
+                    ${optionDescriptions[option]}
+                  </span>`
+                : nothing}
               <ha-icon-next slot="meta"></ha-icon-next>
             </ha-list-item>
           `
@@ -73,11 +119,10 @@ class StepFlowMenu extends LitElement {
     css`
       .options {
         margin-top: 20px;
-        margin-bottom: 8px;
+        margin-bottom: 16px;
       }
       .content {
         padding-bottom: 16px;
-        border-bottom: 1px solid var(--divider-color);
       }
       .content + .options {
         margin-top: 8px;

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 &&
-          html`
-            <ha-button
-              @click=${this._dismiss}
-              ?dialogInitialFocus=${!this._params.prompt &&
-              this._params.destructive}
-              appearance="plain"
-            >
-              ${this._params.dismissText
-                ? this._params.dismissText
-                : this.hass.localize("ui.common.cancel")}
-            </ha-button>
-          `}
+          ${confirmPrompt
+            ? html`
+                <ha-button
+                  @click=${this._dismiss}
+                  ?autofocus=${!this._params.prompt && 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 &&
-            !this._params.destructive}
+            ?autofocus=${!this._params.prompt && !this._params.destructive}
             variant=${this._params.destructive ? "danger" : "brand"}
           >
             ${this._params.confirmText

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

@@ -475,7 +475,6 @@ class MoreInfoUpdate extends LitElement {
       bottom: 0;
       margin: 0 -24px 0 -24px;
       margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px));
-      padding-bottom: var(--safe-area-inset-bottom);
       box-sizing: border-box;
       display: flex;
       flex-direction: column;

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

@@ -6,7 +6,9 @@ import memoizeOne from "memoize-one";
 import { formatDateWeekdayShort } from "../../../common/datetime/format_date";
 import { formatTime } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/number/format_number";
+import "../../../components/ha-alert";
 import "../../../components/ha-relative-time";
+import "../../../components/ha-spinner";
 import "../../../components/ha-state-icon";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";
@@ -292,106 +294,101 @@ class MoreInfoWeather extends LitElement {
             </div>
           `
         : nothing}
-      ${forecast
-        ? html`
-            <div class="section">
-              ${this.hass.localize("ui.card.weather.forecast")}:
-            </div>
-            ${supportedForecasts.length > 1
-              ? html`<sl-tab-group
-                  @sl-tab-show=${this._handleForecastTypeChanged}
+
+      <div class="section">
+        ${this.hass.localize("ui.card.weather.forecast")}:
+      </div>
+      ${supportedForecasts?.length > 1
+        ? html`<sl-tab-group @sl-tab-show=${this._handleForecastTypeChanged}>
+            ${supportedForecasts.map(
+              (forecastType) =>
+                html`<sl-tab
+                  slot="nav"
+                  .panel=${forecastType}
+                  .active=${this._forecastType === forecastType}
                 >
-                  ${supportedForecasts.map(
-                    (forecastType) =>
-                      html`<sl-tab
-                        slot="nav"
-                        .panel=${forecastType}
-                        .active=${this._forecastType === forecastType}
-                      >
-                        ${this.hass!.localize(
-                          `ui.card.weather.${forecastType}`
-                        )}
-                      </sl-tab>`
-                  )}
-                </sl-tab-group>`
-              : nothing}
-            <div class="forecast">
-              ${forecast.map((item) =>
-                this._showValue(item.templow) ||
-                this._showValue(item.temperature)
-                  ? html`
+                  ${this.hass!.localize(`ui.card.weather.${forecastType}`)}
+                </sl-tab>`
+            )}
+          </sl-tab-group>`
+        : nothing}
+      <div class="forecast">
+        ${forecast?.length
+          ? forecast.map((item) =>
+              this._showValue(item.templow) || this._showValue(item.temperature)
+                ? html`
+                    <div>
                       <div>
-                        <div>
-                          ${dayNight
+                        ${dayNight
+                          ? html`
+                              ${formatDateWeekdayShort(
+                                new Date(item.datetime),
+                                this.hass!.locale,
+                                this.hass!.config
+                              )}
+                              <div class="daynight">
+                                ${item.is_daytime !== false
+                                  ? this.hass!.localize("ui.card.weather.day")
+                                  : this.hass!.localize(
+                                      "ui.card.weather.night"
+                                    )}<br />
+                              </div>
+                            `
+                          : hourly
                             ? html`
+                                ${formatTime(
+                                  new Date(item.datetime),
+                                  this.hass!.locale,
+                                  this.hass!.config
+                                )}
+                              `
+                            : html`
                                 ${formatDateWeekdayShort(
                                   new Date(item.datetime),
                                   this.hass!.locale,
                                   this.hass!.config
                                 )}
-                                <div class="daynight">
-                                  ${item.is_daytime !== false
-                                    ? this.hass!.localize("ui.card.weather.day")
-                                    : this.hass!.localize(
-                                        "ui.card.weather.night"
-                                      )}<br />
-                                </div>
-                              `
-                            : hourly
-                              ? html`
-                                  ${formatTime(
-                                    new Date(item.datetime),
-                                    this.hass!.locale,
-                                    this.hass!.config
-                                  )}
-                                `
-                              : html`
-                                  ${formatDateWeekdayShort(
-                                    new Date(item.datetime),
-                                    this.hass!.locale,
-                                    this.hass!.config
-                                  )}
-                                `}
-                        </div>
-                        ${this._showValue(item.condition)
-                          ? html`
-                              <div class="forecast-image-icon">
-                                ${getWeatherStateIcon(
-                                  item.condition!,
-                                  this,
-                                  !(
-                                    item.is_daytime ||
-                                    item.is_daytime === undefined
-                                  )
-                                )}
-                              </div>
-                            `
-                          : nothing}
-                        <div class="temp">
-                          ${this._showValue(item.temperature)
-                            ? html`${formatNumber(
-                                item.temperature,
-                                this.hass!.locale
-                              )}°`
-                            : "—"}
-                        </div>
-                        <div class="templow">
-                          ${this._showValue(item.templow)
-                            ? html`${formatNumber(
-                                item.templow!,
-                                this.hass!.locale
-                              )}°`
-                            : hourly
-                              ? nothing
-                              : "—"}
-                        </div>
+                              `}
                       </div>
-                    `
-                  : nothing
-              )}
-            </div>
-          `
-        : nothing}
+                      ${this._showValue(item.condition)
+                        ? html`
+                            <div class="forecast-image-icon">
+                              ${getWeatherStateIcon(
+                                item.condition!,
+                                this,
+                                !(
+                                  item.is_daytime ||
+                                  item.is_daytime === undefined
+                                )
+                              )}
+                            </div>
+                          `
+                        : nothing}
+                      <div class="temp">
+                        ${this._showValue(item.temperature)
+                          ? html`${formatNumber(
+                              item.temperature,
+                              this.hass!.locale
+                            )}°`
+                          : "—"}
+                      </div>
+                      <div class="templow">
+                        ${this._showValue(item.templow)
+                          ? html`${formatNumber(
+                              item.templow!,
+                              this.hass!.locale
+                            )}°`
+                          : hourly
+                            ? nothing
+                            : "—"}
+                      </div>
+                    </div>
+                  `
+                : nothing
+            )
+          : html`<ha-spinner size="medium"></ha-spinner>`}
+      </div>
+
       ${this.stateObj.attributes.attribution
         ? html`
             <div class="attribution">
@@ -589,6 +586,10 @@ class MoreInfoWeather extends LitElement {
         .forecast-icon {
           --mdc-icon-size: 40px;
         }
+
+        .forecast ha-spinner {
+          height: 120px;
+        }
       `,
     ];
   }

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>
                             `
@@ -651,7 +661,10 @@ export class MoreInfoDialog extends LitElement {
         ha-dialog {
           /* Set the top top of the dialog to a fixed position, so it doesnt jump when the content changes size */
           --vertical-align-dialog: flex-start;
-          --dialog-surface-margin-top: 40px;
+          --dialog-surface-margin-top: max(
+            40px,
+            var(--safe-area-inset-top, 0px)
+          );
           --dialog-content-padding: 0;
         }
 

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -281,11 +281,11 @@ export class QuickBar extends LitElement {
                         class="ha-scrollbar"
                         style=${styleMap({
                           height: this._narrow
-                            ? "calc(100vh - 56px)"
-                            : `${Math.min(
+                            ? "calc(100vh - 56px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))"
+                            : `calc(${Math.min(
                                 items.length * (commandMode ? 56 : 72) + 26,
                                 500
-                              )}px`,
+                              )}px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))`,
                         })}
                         .items=${items}
                         .renderItem=${this._renderItem}

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";
-  key: LocalizeKeys;
+  textTranslationKey: 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",
-        key: "ui.dialogs.shortcuts.searching.on_pages_with_tables",
+        textTranslationKey:
+          "ui.dialogs.shortcuts.searching.on_pages_with_tables",
       },
       {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "F"],
-        key: "ui.dialogs.shortcuts.searching.search_in_table",
+        shortcut: [CTRL_CMD, "F"],
+        descriptionTranslationKey:
+          "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: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "V"],
-        key: "ui.dialogs.shortcuts.automation_script.paste",
+        shortcut: [CTRL_CMD, "C"],
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.automation_script.copy",
       },
       {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "S"],
-        key: "ui.dialogs.shortcuts.automation_script.save",
+        shortcut: [CTRL_CMD, "X"],
+        descriptionTranslationKey: "ui.dialogs.shortcuts.automation_script.cut",
       },
-    ],
-  },
-  {
-    key: "ui.dialogs.shortcuts.charts.title",
-    items: [
       {
-        type: "shortcut",
         shortcut: [
-          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
-          { key: "ui.dialogs.shortcuts.shortcuts.drag" },
+          CTRL_CMD,
+          { shortcutTranslationKey: "ui.dialogs.shortcuts.keys.del" },
         ],
-        key: "ui.dialogs.shortcuts.charts.drag_to_zoom",
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.automation_script.delete",
       },
       {
-        type: "shortcut",
-        shortcut: [
-          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
-          { key: "ui.dialogs.shortcuts.shortcuts.scroll_wheel" },
-        ],
-        key: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
+        shortcut: [CTRL_CMD, "V"],
+        descriptionTranslationKey:
+          "ui.dialogs.shortcuts.automation_script.paste",
       },
       {
-        type: "shortcut",
-        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.double_click" }],
-        key: "ui.dialogs.shortcuts.charts.double_click",
+        shortcut: [CTRL_CMD, "S"],
+        descriptionTranslationKey:
+          "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[],
-    translationKey: LocalizeKeys
+    shortcutKeys: ShortcutString[],
+    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>`)}
-        ${this.hass.localize(translationKey)}
+        ${shortcutKeys.map(
+          (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") {
-                    return html`<p>${this.hass.localize(item.key)}</p>`;
+                  if ("shortcut" in item) {
+                    return this._renderShortcut(
+                      (item as Shortcut).shortcut,
+                      (item as Shortcut).descriptionTranslationKey
+                    );
                   }
-                  if (item.type === "shortcut") {
-                    return this._renderShortcut(item.shortcut, item.key);
-                  }
-                  return nothing;
+                  return html`<p>
+                    ${this.hass.localize((item as Text).textTranslationKey)}
+                  </p>`;
                 })}
               </div>
             `
@@ -232,6 +272,10 @@ class DialogShortcuts extends LitElement {
       .items p {
         margin-bottom: 8px;
       }
+
+      ha-svg-icon {
+        width: 12px;
+      }
     `,
   ];
 }

src/html/authorize.html.template

@@ -35,6 +35,7 @@
         align-items: center;
         justify-content: center;
         margin-bottom: 32px;
+        padding-top: var(--safe-area-inset-top);
       }
 
       .header img {

src/html/index.html.template

@@ -44,7 +44,7 @@
       }
       #ha-launch-screen .ha-launch-screen-spacer-top {
         flex: 1;
-        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-top, 0px), 48px) + 46px );
         padding-top: 48px;
       }
       #ha-launch-screen .ha-launch-screen-spacer-bottom {

src/html/onboarding.html.template

@@ -19,8 +19,9 @@
         height: auto;
         padding: 32px 0;
       }
+
       .content {
-        max-width: 560px;
+        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
         margin: 0 auto;
         padding: 0 16px;
         box-sizing: content-box;
@@ -32,6 +33,7 @@
         justify-content: flex-start;
         margin-bottom: 32px;
         margin-left: 32px;
+        padding-top: var(--safe-area-inset-top);
       }
 
       .header img {

src/layouts/hass-tabs-subpage-data-table.ts

@@ -884,7 +884,13 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
     }
 
     .filter-dialog-content {
-      height: calc(100vh - 1px - 61px - var(--header-height));
+      height: calc(
+        100vh -
+          70px - var(--header-height, 0px) - var(
+            --safe-area-inset-top,
+            0px
+          ) - var(--safe-area-inset-bottom, 0px)
+      );
       display: flex;
       flex-direction: column;
     }

src/layouts/home-assistant-main.ts

@@ -146,6 +146,8 @@ export class HomeAssistantMain extends LitElement {
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       --mdc-drawer-width: 56px;
       --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
+      --safe-area-content-inset-left: 0px;
+      --safe-area-content-inset-right: var(--safe-area-inset-right);
     }
     :host([expanded]) {
       --mdc-drawer-width: calc(256px + var(--safe-area-inset-left));
@@ -153,6 +155,7 @@ export class HomeAssistantMain extends LitElement {
     :host([modal]) {
       --mdc-drawer-width: unset;
       --mdc-top-app-bar-width: unset;
+      --safe-area-content-inset-left: var(--safe-area-inset-left);
     }
     partial-panel-resolver,
     ha-sidebar {

src/mixins/keyboard-shortcut-mixin.ts

@@ -11,23 +11,54 @@ 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
+      ) {
         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-row.ts

@@ -5,12 +5,12 @@ import {
   mdiArrowUp,
   mdiContentCopy,
   mdiContentCut,
-  mdiContentDuplicate,
   mdiDelete,
   mdiDotsVertical,
   mdiPlay,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
+  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -195,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);
 
@@ -305,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>
 
@@ -438,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,
@@ -450,12 +453,16 @@ export default class HaAutomationActionRow extends LitElement {
               .collapsed=${this._collapsed}
               .selected=${this._selected}
               .highlight=${this.highlight}
-              @toggle-collapsed=${this._toggleCollapse}
               .buildingBlock=${[
                 ...ACTION_BUILDING_BLOCKS,
                 ...ACTION_COMBINED_BLOCKS,
               ].includes(blockType!)}
               .sortSelected=${this.sortSelected}
+              @click=${this._toggleSidebar}
+              @toggle-collapsed=${this._toggleCollapse}
+              @copy-row=${this._copyAction}
+              @cut-row=${this._cutAction}
+              @delete-row=${this._onDelete}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -514,6 +521,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,
     });
@@ -623,6 +639,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 = () => {
@@ -631,6 +653,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 = () => {
@@ -664,8 +692,7 @@ export default class HaAutomationActionRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
-      fireEvent(this, "close-sidebar");
+      fireEvent(this, "request-close-sidebar");
       return;
     }
     this.openSidebar();
@@ -709,12 +736,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
     }
   }
 
@@ -761,10 +788,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

@@ -9,7 +9,6 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 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,
@@ -76,7 +75,6 @@ export default class HaAutomationAction extends LitElement {
         @item-moved=${this._actionMoved}
         @item-added=${this._actionAdded}
         @item-removed=${this._actionRemoved}
-        @item-cloned=${this._actionCloned}
       >
         <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
           ${repeat(
@@ -301,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;
-    if (data?.["ha-automation-row-selected"]) {
-      selected = true;
-      delete data["ha-automation-row-selected"];
-    }
+    const item = ev.detail.item as HaAutomationActionRow;
+    const selected = item.selected;
 
     let actions = [
       ...this.actions.slice(0, index),
@@ -363,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}
                 >
-                  ${this.hass.localize(
-                    `ui.panel.config.automation.editor.${this._params.type}s.paste`
-                  )}
-                  <span slot="supporting-text"
-                    >${this.hass.localize(
-                      // @ts-ignore
-                      `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label`
-                    )}</span
-                  >
+                  <div class="shortcut-label">
+                    <div class="label">
+                      <div>
+                        ${this.hass.localize(
+                          `ui.panel.config.automation.editor.${this._params.type}s.paste`
+                        )}
+                      </div>
+                      <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-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";
@@ -154,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
@@ -214,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>
 
@@ -358,12 +363,15 @@ export default class HaAutomationConditionRow extends LitElement {
               .collapsed=${this._collapsed}
               .selected=${this._selected}
               .highlight=${this.highlight}
-              @click=${this._toggleSidebar}
-              @toggle-collapsed=${this._toggleCollapse}
               .buildingBlock=${CONDITION_BUILDING_BLOCKS.includes(
                 this.condition.condition
               )}
               .sortSelected=${this.sortSelected}
+              @click=${this._toggleSidebar}
+              @toggle-collapsed=${this._toggleCollapse}
+              @copy-row=${this._copyCondition}
+              @cut-row=${this._cutCondition}
+              @delete-row=${this._onDelete}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -480,6 +488,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, {
@@ -570,6 +587,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 = () => {
@@ -578,6 +601,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 = () => {
@@ -638,8 +667,7 @@ export default class HaAutomationConditionRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
-      fireEvent(this, "close-sidebar");
+      fireEvent(this, "request-close-sidebar");
       return;
     }
     this.openSidebar();
@@ -679,12 +707,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
     }
   }
 
@@ -697,10 +725,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

@@ -10,7 +10,6 @@ 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,
@@ -153,7 +152,6 @@ export default class HaAutomationCondition extends LitElement {
         @item-moved=${this._conditionMoved}
         @item-added=${this._conditionAdded}
         @item-removed=${this._conditionRemoved}
-        @item-cloned=${this._conditionCloned}
       >
         <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
           ${repeat(
@@ -319,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;
-    if (data?.["ha-automation-row-selected"]) {
-      selected = true;
-      delete data["ha-automation-row-selected"];
-    }
+    const item = ev.detail.item as HaAutomationConditionRow;
+    const selected = item.selected;
     let conditions = [
       ...this.conditions.slice(0, index),
       data,
@@ -361,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,13 +10,12 @@ 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";
@@ -337,7 +335,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
             )}
             <ha-svg-icon
               slot="graphic"
-              .path=${mdiContentDuplicate}
+              .path=${mdiPlusCircleMultipleOutline}
             ></ha-svg-icon>
           </ha-list-item>
 
@@ -371,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
@@ -1138,6 +1112,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(),
     };
   }
 
@@ -1149,14 +1127,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-picker.ts

@@ -292,7 +292,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           extraTemplate: (automation) =>
             automation.labels.length
               ? html`<ha-data-table-labels
-                  @label-clicked=${this._labelClicked}
+                  @label-clicked=${narrow ? undefined : this._labelClicked}
                   .labels=${automation.labels}
                 ></ha-data-table-labels>`
               : nothing,

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

@@ -55,7 +55,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-trigger>
       `;
     }
@@ -71,7 +71,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-condition>
       `;
     }
@@ -87,7 +87,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-action>
       `;
     }
@@ -100,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>
       `;
     }
@@ -116,7 +116,7 @@ export default class HaAutomationSidebar extends LitElement {
           .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>
       `;
     }
@@ -132,7 +132,7 @@ export default class HaAutomationSidebar extends LitElement {
           .yamlMode=${this._yamlMode}
           .sidebarKey=${this.sidebarKey}
           @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this._handleCloseSidebar}
+          @close-sidebar=${this.triggerCloseSidebar}
         ></ha-automation-sidebar-script-field>
       `;
     }
@@ -188,8 +188,8 @@ export default class HaAutomationSidebar extends LitElement {
     return undefined;
   }
 
-  private _handleCloseSidebar(ev: CustomEvent) {
-    ev.stopPropagation();
+  public triggerCloseSidebar(ev?: CustomEvent) {
+    ev?.stopPropagation();
     if (this.narrow) {
       this._bottomSheetElement?.closeSheet();
       return;
@@ -208,6 +208,7 @@ export default class HaAutomationSidebar extends LitElement {
 
   static styles = css`
     :host {
+      z-index: 6;
       outline: none;
       height: 100%;
       --ha-card-border-radius: var(

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,
@@ -96,6 +103,11 @@ export class HaManualAutomationEditor extends LitElement {
 
   @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
 
+  @queryAll("ha-automation-action, ha-automation-condition")
+  private _collapsableElements?: NodeListOf<
+    HaAutomationAction | HaAutomationCondition
+  >;
+
   private _previousConfig?: ManualAutomationConfig;
 
   public connectedCallback() {
@@ -154,7 +166,7 @@ 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
@@ -201,7 +213,7 @@ 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
@@ -243,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}
@@ -262,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>
@@ -335,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();
     }
   }
@@ -373,7 +393,7 @@ export class HaManualAutomationEditor extends LitElement {
   }
 
   private _saveAutomation() {
-    this._closeSidebar();
+    this._triggerCloseSidebar();
     fireEvent(this, "save-automation");
   }
 
@@ -478,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",
@@ -587,24 +612,36 @@ export class HaManualAutomationEditor extends LitElement {
     });
   }
 
-  private _getCollapsableElements() {
-    return this.shadowRoot!.querySelectorAll<
-      HaAutomationAction | HaAutomationCondition
-    >("ha-automation-action, ha-automation-condition");
-  }
-
   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, "close-sidebar");
+      fireEvent(this, "request-close-sidebar");
       return;
     }
     this.openSidebar();
@@ -403,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
     }
   }
 
@@ -445,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

@@ -9,7 +9,6 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 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";
@@ -65,7 +64,6 @@ export default class HaAutomationOption extends LitElement {
         @item-moved=${this._optionMoved}
         @item-added=${this._optionAdded}
         @item-removed=${this._optionRemoved}
-        @item-cloned=${this._optionCloned}
       >
         <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
           ${repeat(
@@ -241,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;
-    if (data?.["ha-automation-row-selected"]) {
-      selected = true;
-      delete data["ha-automation-row-selected"];
-    }
+    const item = ev.detail.item as HaAutomationOptionRow;
+    const selected = item.selected;
 
     const options = [
       ...this.options.slice(0, index),
@@ -273,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];
@@ -328,7 +317,7 @@ export default class HaAutomationOption extends LitElement {
     automationRowsStyles,
     css`
       :host([root]) .rows {
-        padding-right: 8px;
+        padding-inline-end: 8px;
       }
     `,
   ];

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

@@ -1,15 +1,16 @@
 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";
@@ -21,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";
@@ -103,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}
       >
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.rename"
-        )}
         <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.rename"
+          )}
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-divider
         slot="menu-items"
@@ -126,36 +134,85 @@ export default class HaAutomationSidebarAction extends LitElement {
         .clickAction=${this.config.duplicate}
         .disabled=${this.disabled}
       >
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.duplicate"
-        )}
-        <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
+        <ha-svg-icon
+          slot="start"
+          .path=${mdiPlusCircleMultipleOutline}
+        ></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.actions.duplicate"
+          )}
+          <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}
       >
-        ${this.hass.localize(
-          `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
-        )}
         <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"}`
+          )}
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-divider
         slot="menu-items"
@@ -163,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"
@@ -177,10 +237,32 @@ export default class HaAutomationSidebarAction extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.delete"
-        )}
         <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.actions.delete"
+          )}
+          ${!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>`

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() {
-    const top = this._contentElement?.scrollTop ?? 0;
+  private _onScroll(ev) {
+    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,22 +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";
@@ -40,6 +48,10 @@ export default class HaAutomationSidebarCondition extends LitElement {
 
   @state() private _warnings?: string[];
 
+  @state() private _testing = false;
+
+  @state() private _testingResult?: boolean;
+
   @query(".sidebar-editor")
   public editor?: HaAutomationConditionEditor;
 
@@ -53,6 +65,10 @@ export default class HaAutomationSidebarCondition extends LitElement {
         }
       }
     }
+    // Reset testing state when condition changes
+    if (changedProperties.has("sidebarKey")) {
+      this._testing = false;
+    }
   }
 
   protected render() {
@@ -88,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}>
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.conditions.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"
+          )}
+          <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}
       >
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.triggers.rename"
-        )}
         <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.triggers.rename"
+          )}
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
 
       <ha-md-divider
@@ -116,10 +138,16 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .clickAction=${this.config.duplicate}
         .disabled=${this.disabled}
       >
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.duplicate"
-        )}
-        <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
+        <ha-svg-icon
+          slot="start"
+          .path=${mdiPlusCircleMultipleOutline}
+        ></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.actions.duplicate"
+          )}
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
 
       <ha-md-menu-item
@@ -127,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
@@ -136,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}
       >
-        ${this.hass.localize(
-          `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
-        )}
         <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"}`
+          )}
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-divider
         slot="menu-items"
@@ -155,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"
@@ -169,10 +243,32 @@ export default class HaAutomationSidebarCondition extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.delete"
-        )}
         <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.actions.delete"
+          )}
+          ${!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>`
@@ -191,9 +287,84 @@ export default class HaAutomationSidebarCondition extends LitElement {
               sidebar
             ></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
+            ? this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.testing_pass"
+              )
+            : this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.testing_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) {
@@ -226,7 +397,57 @@ export default class HaAutomationSidebarCondition extends LitElement {
     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 { html, LitElement } from "lit";
+import {
+  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}
             >
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.triggers.rename"
-              )}
               <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+              <div class="overflow-label">
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.triggers.rename"
+                )}
+                <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}
             >
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.duplicate"
-              )}
               <ha-svg-icon
                 slot="start"
-                .path=${mdiContentDuplicate}
+                .path=${mdiPlusCircleMultipleOutline}
               ></ha-svg-icon>
+              <div class="overflow-label">
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.actions.duplicate"
+                )}
+                <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+              </div>
             </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"
             >
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.type.choose.remove_option"
-              )}
               <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"
+                )}
+                ${!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,11 +1,12 @@
-import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
-import { html, LitElement } from "lit";
+import { mdiAppleKeyboardCommand, mdiDelete, mdiPlaylistEdit } 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 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";
@@ -68,10 +69,13 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
         .clickAction=${this._toggleYamlMode}
         .disabled=${!!this._warnings}
       >
-        ${this.hass.localize(
-          `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
-        )}
         <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"}`
+          )}
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -79,10 +83,32 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.delete"
-        )}
         <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.actions.delete"
+          )}
+          ${!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>
       ${keyed(
         this.sidebarKey,

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

@@ -1,10 +1,11 @@
-import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
-import { html, LitElement } from "lit";
+import { mdiAppleKeyboardCommand, mdiDelete, mdiPlaylistEdit } 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 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";
@@ -61,10 +62,13 @@ export default class HaAutomationSidebarScriptField extends LitElement {
         .clickAction=${this._toggleYamlMode}
         .disabled=${!!this._warnings}
       >
-        ${this.hass.localize(
-          `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
-        )}
         <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"}`
+          )}
+          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+        </div>
       </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
@@ -72,10 +76,32 @@ export default class HaAutomationSidebarScriptField extends LitElement {
         .disabled=${this.disabled}
         class="warning"
       >
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.delete"
-        )}
         <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+        <div class="overflow-label">
+          ${this.hass.localize(
+            "ui.panel.config.automation.editor.actions.delete"
+          )}
+          ${!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>
       ${keyed(
         this.sidebarKey,

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

@@ -1,11 +1,12 @@
 import {
+  mdiAppleKeyboardCommand,
   mdiContentCopy,
   mdiContentCut,
-  mdiContentDuplicate,
   mdiDelete,
   mdiIdentifier,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
+  mdiPlusCircleMultipleOutline,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
@@ -17,6 +18,7 @@ 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";
@@ -89,10 +91,13 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .clickAction=${this.config.rename}
           .disabled=${disabled || type === "list"}
         >
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.rename"
-          )}
           <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+          <div class="overflow-label">
+            ${this.hass.localize(
+              "ui.panel.config.automation.editor.triggers.rename"
+            )}
+            <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+          </div>
         </ha-md-menu-item>
         ${!this.yamlMode &&
         !("id" in this.config.config) &&
@@ -102,10 +107,13 @@ export default class HaAutomationSidebarTrigger extends LitElement {
               .clickAction=${this._showTriggerId}
               .disabled=${disabled || type === "list"}
             >
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.triggers.edit_id"
-              )}
               <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"
+                )}
+                <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+              </div>
             </ha-md-menu-item>`
           : nothing}
 
@@ -123,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
@@ -131,10 +142,28 @@ export default class HaAutomationSidebarTrigger 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
@@ -142,20 +171,41 @@ export default class HaAutomationSidebarTrigger 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}
         >
-          ${this.hass.localize(
-            `ui.panel.config.automation.editor.edit_${!this.yamlMode ? "yaml" : "ui"}`
-          )}
           <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"}`
+            )}
+            <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
+          </div>
         </ha-md-menu-item>
         <ha-md-divider
           slot="menu-items"
@@ -167,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"
@@ -181,10 +234,32 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .disabled=${this.disabled}
           class="warning"
         >
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.delete"
-          )}
           <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+          <div class="overflow-label">
+            ${this.hass.localize(
+              "ui.panel.config.automation.editor.actions.delete"
+            )}
+            ${!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>
         ${keyed(
           this.sidebarKey,

src/panels/config/automation/styles.ts

@@ -62,12 +62,15 @@ export const indentStyle = css`
   .card-content.indent,
   .selector-row,
   :host([indent]) ha-form {
-    margin-left: 12px;
-    padding: 12px 0 16px 16px;
-    border-left: 2px solid var(--ha-color-border-neutral-quiet);
+    margin-inline-start: 12px;
+    padding-top: 12px;
+    padding-bottom: 16px;
+    padding-inline-start: 16px;
+    padding-inline-end: 0px;
+    border-inline-start: 2px solid var(--ha-color-border-neutral-quiet);
     border-bottom: 2px solid var(--ha-color-border-neutral-quiet);
     border-radius: 0;
-    border-bottom-left-radius: var(--ha-border-radius-lg);
+    border-end-start-radius: var(--ha-border-radius-lg);
   }
   .card-content.indent.selected,
   :host([selected]) .card-content.indent,
@@ -136,6 +139,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 {
@@ -170,7 +178,7 @@ export const automationRowsStyles = css`
     gap: 16px;
   }
   .rows.no-sidebar {
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .sortable-ghost {
     background: none;
@@ -184,8 +192,7 @@ export const automationRowsStyles = css`
     scroll-margin-top: 48px;
   }
   .handle {
-    margin: 4px;
-    padding: 8px;
+    padding: 4px;
     cursor: move; /* fallback if grab cursor is unsupported */
     cursor: grab;
     border-radius: var(--ha-border-radius-pill);
@@ -213,9 +220,39 @@ 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;
+    }
+  }
 `;

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";
@@ -153,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() {
@@ -221,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>
 
@@ -349,10 +354,13 @@ 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}
+              @copy-row=${this._copyTrigger}
+              @cut-row=${this._cutTrigger}
+              @delete-row=${this._onDelete}
               >${this._selected
                 ? "selected"
                 : nothing}${this._renderRow()}</ha-automation-row
@@ -473,8 +481,7 @@ export default class HaAutomationTriggerRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
-      fireEvent(this, "close-sidebar");
+      fireEvent(this, "request-close-sidebar");
       return;
     }
     this.openSidebar();
@@ -511,12 +518,12 @@ export default class HaAutomationTriggerRow extends LitElement {
     this._selected = true;
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
+      window.setTimeout(() => {
         this.scrollIntoView({
           block: "start",
           behavior: "smooth",
         });
-      });
+      }, 180);
     }
   }
 
@@ -634,6 +641,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 = () => {
@@ -642,6 +655,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 = () => {
@@ -679,10 +698,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

@@ -10,7 +10,6 @@ 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,
@@ -72,7 +71,6 @@ export default class HaAutomationTrigger extends LitElement {
         @item-moved=${this._triggerMoved}
         @item-added=${this._triggerAdded}
         @item-removed=${this._triggerRemoved}
-        @item-cloned=${this._triggerCloned}
       >
         <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
           ${repeat(
@@ -260,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;
-    if (data?.["ha-automation-row-selected"]) {
-      selected = true;
-      delete data["ha-automation-row-selected"];
-    }
+    const item = ev.detail.item as HaAutomationTriggerRow;
+    const selected = item.selected;
 
     let triggers = [
       ...this.triggers.slice(0, index),
@@ -303,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/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts

@@ -239,12 +239,8 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-dialog {
-            --mdc-dialog-min-width: calc(
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-            );
-            --mdc-dialog-max-width: calc(
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-            );
+            --mdc-dialog-min-width: 100vw;
+            --mdc-dialog-max-width: 100vw;
           }
         }
         ha-switch {

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/helpers/dialog-helper-detail.ts

@@ -430,7 +430,13 @@ export class DialogHelperDetail extends LitElement {
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-list {
-            height: calc(100vh - 184px);
+            height: calc(
+              100vh -
+                184px - var(--safe-area-inset-top, 0px) - var(
+                  --safe-area-inset-bottom,
+                  0px
+                )
+            );
           }
         }
       `,

src/panels/config/integrations/dialog-add-integration.ts

@@ -461,7 +461,9 @@ class AddIntegrationDialog extends LitElement {
               class="ha-scrollbar"
               style=${styleMap({
                 width: `${this._width}px`,
-                height: this._narrow ? "calc(100vh - 184px)" : "500px",
+                height: this._narrow
+                  ? "calc(100vh - 184px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))"
+                  : "500px",
               })}
               @click=${this._integrationPicked}
               @keypress=${this._handleKeyPress}

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-config-dashboard.ts

@@ -1,5 +1,5 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-code-editor";
@@ -11,13 +11,22 @@ import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-d
 import "../../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
-import { subscribeBluetoothConnectionAllocations } from "../../../../../data/bluetooth";
+import {
+  subscribeBluetoothConnectionAllocations,
+  subscribeBluetoothScannerState,
+  subscribeBluetoothScannersDetails,
+} from "../../../../../data/bluetooth";
+import type {
+  BluetoothAllocationsData,
+  BluetoothScannerState,
+  BluetoothScannersDetails,
+  HaScannerType,
+} from "../../../../../data/bluetooth";
 import {
   getValueInPercentage,
   roundWithOneDecimal,
 } from "../../../../../util/calculate";
 import "../../../../../components/ha-metric";
-import type { BluetoothAllocationsData } from "../../../../../data/bluetooth";
 
 @customElement("bluetooth-config-dashboard")
 export class BluetoothConfigDashboard extends LitElement {
@@ -29,16 +38,26 @@ export class BluetoothConfigDashboard extends LitElement {
 
   @state() private _connectionAllocationsError?: string;
 
+  @state() private _scannerState?: BluetoothScannerState;
+
+  @state() private _scannerDetails?: BluetoothScannersDetails;
+
   private _configEntry = new URLSearchParams(window.location.search).get(
     "config_entry"
   );
 
   private _unsubConnectionAllocations?: (() => Promise<void>) | undefined;
 
+  private _unsubScannerState?: (() => Promise<void>) | undefined;
+
+  private _unsubScannerDetails?: (() => void) | undefined;
+
   public connectedCallback(): void {
     super.connectedCallback();
     if (this.hass) {
       this._subscribeBluetoothConnectionAllocations();
+      this._subscribeBluetoothScannerState();
+      this._subscribeScannerDetails();
     }
   }
 
@@ -61,12 +80,45 @@ export class BluetoothConfigDashboard extends LitElement {
     }
   }
 
+  private async _subscribeBluetoothScannerState(): Promise<void> {
+    if (this._unsubScannerState || !this._configEntry) {
+      return;
+    }
+    this._unsubScannerState = await subscribeBluetoothScannerState(
+      this.hass.connection,
+      (scannerState) => {
+        this._scannerState = scannerState;
+      },
+      this._configEntry
+    );
+  }
+
+  private _subscribeScannerDetails(): void {
+    if (this._unsubScannerDetails) {
+      return;
+    }
+    this._unsubScannerDetails = subscribeBluetoothScannersDetails(
+      this.hass.connection,
+      (details) => {
+        this._scannerDetails = details;
+      }
+    );
+  }
+
   public disconnectedCallback() {
     super.disconnectedCallback();
     if (this._unsubConnectionAllocations) {
       this._unsubConnectionAllocations();
       this._unsubConnectionAllocations = undefined;
     }
+    if (this._unsubScannerState) {
+      this._unsubScannerState();
+      this._unsubScannerState = undefined;
+    }
+    if (this._unsubScannerDetails) {
+      this._unsubScannerDetails();
+      this._unsubScannerDetails = undefined;
+    }
   }
 
   protected render(): TemplateResult {
@@ -78,6 +130,7 @@ export class BluetoothConfigDashboard extends LitElement {
               "ui.panel.config.bluetooth.settings_title"
             )}
           >
+            <div class="card-content">${this._renderScannerState()}</div>
             <div class="card-actions">
               <ha-button @click=${this._openOptionFlow}
                 >${this.hass.localize(
@@ -142,6 +195,118 @@ export class BluetoothConfigDashboard extends LitElement {
   private _getUsedAllocations = (used: number, total: number) =>
     roundWithOneDecimal(getValueInPercentage(used, 0, total));
 
+  private _renderScannerMismatchWarning(
+    scannerState: BluetoothScannerState,
+    scannerType: HaScannerType,
+    formatMode: (mode: string | null) => string
+  ) {
+    const instructions: string[] = [];
+
+    if (scannerType === "remote" || scannerType === "unknown") {
+      instructions.push(
+        this.hass.localize(
+          "ui.panel.config.bluetooth.scanner_mode_mismatch_remote"
+        )
+      );
+    }
+    if (scannerType === "usb" || scannerType === "unknown") {
+      instructions.push(
+        this.hass.localize(
+          "ui.panel.config.bluetooth.scanner_mode_mismatch_usb"
+        )
+      );
+    }
+    if (scannerType === "uart" || scannerType === "unknown") {
+      instructions.push(
+        this.hass.localize(
+          "ui.panel.config.bluetooth.scanner_mode_mismatch_uart"
+        )
+      );
+    }
+
+    return html`<ha-alert alert-type="warning">
+      <div>
+        ${this.hass.localize(
+          "ui.panel.config.bluetooth.scanner_mode_mismatch",
+          {
+            requested: formatMode(scannerState.requested_mode),
+            current: formatMode(scannerState.current_mode),
+          }
+        )}
+      </div>
+      <ul>
+        ${instructions.map((instruction) => html`<li>${instruction}</li>`)}
+      </ul>
+    </ha-alert>`;
+  }
+
+  private _renderScannerState() {
+    if (!this._configEntry || !this._scannerState) {
+      return html`<div>
+        ${this.hass.localize(
+          "ui.panel.config.bluetooth.no_scanner_state_available"
+        )}
+      </div>`;
+    }
+
+    const scannerState = this._scannerState;
+    // Find the scanner details for this source
+    const scannerDetails = this._scannerDetails?.[scannerState.source];
+    const scannerType: HaScannerType =
+      scannerDetails?.scanner_type ?? "unknown";
+
+    const formatMode = (mode: string | null) => {
+      switch (mode) {
+        case null:
+          return this.hass.localize(
+            "ui.panel.config.bluetooth.scanning_mode_none"
+          );
+        case "active":
+          return this.hass.localize(
+            "ui.panel.config.bluetooth.scanning_mode_active"
+          );
+        case "passive":
+          return this.hass.localize(
+            "ui.panel.config.bluetooth.scanning_mode_passive"
+          );
+        default:
+          return mode; // Fallback for unknown modes
+      }
+    };
+
+    return html`
+      <div class="scanner-state">
+        <div class="state-row">
+          <span
+            >${this.hass.localize(
+              "ui.panel.config.bluetooth.current_scanning_mode"
+            )}:</span
+          >
+          <span class="state-value"
+            >${formatMode(scannerState.current_mode)}</span
+          >
+        </div>
+        <div class="state-row">
+          <span
+            >${this.hass.localize(
+              "ui.panel.config.bluetooth.requested_scanning_mode"
+            )}:</span
+          >
+          <span class="state-value"
+            >${formatMode(scannerState.requested_mode)}</span
+          >
+        </div>
+        ${scannerState.current_mode !== scannerState.requested_mode
+          ? this._renderScannerMismatchWarning(
+              scannerState,
+              scannerType,
+              formatMode
+            )
+          : nothing}
+      </div>
+    `;
+  }
+
   private _renderConnectionAllocations() {
     if (this._connectionAllocationsError) {
       return html`<ha-alert alert-type="error"
@@ -220,6 +385,18 @@ export class BluetoothConfigDashboard extends LitElement {
           display: flex;
           justify-content: flex-end;
         }
+        .scanner-state {
+          margin-bottom: 16px;
+        }
+        .state-row {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 4px 0;
+        }
+        .state-value {
+          font-weight: 500;
+        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-added-insecure.ts

@@ -1,11 +1,11 @@
+import "@home-assistant/webawesome/dist/components/animation/animation";
 import { mdiCheckCircleOutline } from "@mdi/js";
-import { customElement, property } from "lit/decorators";
-import "@awesome.me/webawesome/dist/components/animation/animation";
 import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import type { HomeAssistant } from "../../../../../../types";
 
-import "../../../../../../components/ha-svg-icon";
 import "../../../../../../components/ha-alert";
+import "../../../../../../components/ha-svg-icon";
 
 @customElement("zwave-js-add-node-added-insecure")
 export class ZWaveJsAddNodeFinished extends LitElement {

src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts

@@ -1,15 +1,15 @@
-import "@awesome.me/webawesome/dist/components/animation/animation";
+import "@home-assistant/webawesome/dist/components/animation/animation";
 import { mdiRestart } from "@mdi/js";
 
-import { customElement, property } from "lit/decorators";
 import { css, html, LitElement, nothing } from "lit";
-import type { HomeAssistant } from "../../../../../../types";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../../common/dom/fire_event";
 import { InclusionStrategy } from "../../../../../../data/zwave_js";
+import type { HomeAssistant } from "../../../../../../types";
 
-import "../../../../../../components/ha-spinner";
-import "../../../../../../components/ha-button";
 import "../../../../../../components/ha-alert";
+import "../../../../../../components/ha-button";
+import "../../../../../../components/ha-spinner";
 import { WakeLockMixin } from "../../../../../../mixins/wakelock-mixin";
 
 @customElement("zwave-js-add-node-searching-devices")

src/panels/config/logs/error-log-card.ts

@@ -243,7 +243,7 @@ class ErrorLogCard extends LitElement {
               ${!streaming || this._error
                 ? html`<ha-icon-button
                     .path=${mdiRefresh}
-                    @click=${this._loadLogs}
+                    @click=${this._handleRefresh}
                     .label=${localize("ui.common.refresh")}
                   ></ha-icon-button>`
                 : nothing}
@@ -715,6 +715,10 @@ class ErrorLogCard extends LitElement {
     this._wrapLines = !this._wrapLines;
   }
 
+  private _handleRefresh() {
+    this._loadLogs();
+  }
+
   private _handleOverflowAction(ev: CustomEvent<ActionDetail>) {
     let index = ev.detail.index;
     if (this.provider === "core") {

src/panels/config/repairs/show-dialog-repair-flow.ts

@@ -289,6 +289,15 @@ export const showRepairsFlowDialog = (
         );
       },
 
+      renderMenuOptionDescription(hass, step, option) {
+        return hass.localize(
+          `component.${issue.domain}.issues.${
+            issue.translation_key || issue.issue_id
+          }.fix_flow.step.${step.step_id}.menu_option_descriptions.${option}`,
+          mergePlaceholders(issue, step)
+        );
+      },
+
       renderLoadingDescription(hass, reason) {
         return (
           hass.localize(

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,9 @@ export class HaScriptEditor extends SubscribeMixin(
   protected supportedShortcuts(): SupportedShortcuts {
     return {
       s: () => this._handleSaveScript(),
+      c: () => this._copySelectedRow(),
+      x: () => this._cutSelectedRow(),
+      Delete: () => this._deleteSelectedRow(),
     };
   }
 
@@ -1058,14 +1035,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-row.ts

@@ -64,6 +64,7 @@ export default class HaScriptFieldRow extends LitElement {
           @toggle-collapsed=${this._toggleCollapse}
           .collapsed=${this._collapsed}
           .highlight=${this.highlight}
+          @delete-row=${this._onDelete}
         >
           <h3 slot="header">${this.key}</h3>
 
@@ -161,8 +162,7 @@ export default class HaScriptFieldRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selected) {
-      this._selected = false;
-      fireEvent(this, "close-sidebar");
+      fireEvent(this, "request-close-sidebar");
       return;
     }
 
@@ -175,8 +175,7 @@ export default class HaScriptFieldRow extends LitElement {
     ev?.stopPropagation();
 
     if (this._selectorRowSelected) {
-      this._selectorRowSelected = false;
-      fireEvent(this, "close-sidebar");
+      fireEvent(this, "request-close-sidebar");
       return;
     }
 
@@ -235,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
     }
   }
 
@@ -336,7 +335,10 @@ export default class HaScriptFieldRow extends LitElement {
           border-bottom-color: var(--divider-color);
         }
         .selector-row {
-          padding: 12px 0 16px 16px;
+          padding-top: 12px;
+          padding-bottom: 16px;
+          padding-inline-start: 16px;
+          padding-inline-end: 0px;
         }
       `,
     ];

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

@@ -76,10 +76,12 @@ export default class HaScriptFields extends LitElement {
       row.focus();
 
       if (this.narrow) {
-        row.scrollIntoView({
-          block: "start",
-          behavior: "smooth",
-        });
+        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,
@@ -80,6 +89,11 @@ export class HaManualScriptEditor extends LitElement {
 
   @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;
@@ -156,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
@@ -186,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}
@@ -204,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>
@@ -357,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",
@@ -484,11 +508,13 @@ export class HaManualScriptEditor extends LitElement {
     };
   }
 
-  private _closeSidebar() {
+  private _triggerCloseSidebar() {
     if (this._sidebarConfig) {
-      const closeRow = this._sidebarConfig?.close;
-      this._sidebarConfig = undefined;
-      closeRow?.();
+      if (this._sidebarElement) {
+        this._sidebarElement.triggerCloseSidebar();
+        return;
+      }
+      this._sidebarConfig?.close();
     }
   }
 
@@ -497,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/config/voice-assistants/dialog-expose-entity.ts

@@ -242,19 +242,21 @@ class DialogExposeEntity extends LitElement {
         }
         @media all and (max-width: 500px), all and (max-height: 500px) {
           ha-dialog {
-            --mdc-dialog-min-width: calc(
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-            );
-            --mdc-dialog-max-width: calc(
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-            );
+            --mdc-dialog-min-width: 100vw;
+            --mdc-dialog-max-width: 100vw;
             --mdc-dialog-min-height: 100%;
             --mdc-dialog-max-height: 100%;
             --vertical-align-dialog: flex-end;
             --ha-dialog-border-radius: 0px;
           }
           lit-virtualizer {
-            height: calc(100vh - 198px);
+            height: calc(
+              100vh -
+                210px - var(--safe-area-inset-top, 0px) - var(
+                  --safe-area-inset-bottom,
+                  0px
+                )
+            );
           }
           search-input {
             --text-field-suffix-padding-left: unset;

src/panels/config/zone/dialog-home-zone-detail.ts

@@ -137,9 +137,8 @@ class DialogHomeZoneDetail extends LitElement {
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-dialog {
-            --mdc-dialog-min-width: calc(
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-            );
+            --mdc-dialog-min-width: 100vw;
+            --mdc-dialog-max-width: 100vw;
           }
         }
       `,

src/panels/config/zone/dialog-zone-detail.ts

@@ -224,9 +224,8 @@ class DialogZoneDetail extends LitElement {
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-dialog {
-            --mdc-dialog-min-width: calc(
-              100vw - var(--safe-area-inset-right) - var(--safe-area-inset-left)
-            );
+            --mdc-dialog-min-width: 100vw;
+            --mdc-dialog-max-width: 100vw;
           }
         }
         ha-form.passive {

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,317 +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 { 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, yAxisOrigin } = this._generateLinePoints(line);
-      const { paths, filledPaths } = this._getLinePaths(points, yAxisOrigin);
-
-      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="var(--feature-color)" stroke-width="1" stroke-linecap="round" fill="none" />`
-            )}
-            ${filledPaths.map(
-              (path) =>
-                svg`<path d="${path}" stroke="none" stroke-linecap="round" fill="var(--feature-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): {
-    points: { x: number; y: number }[];
-    yAxisOrigin: number;
-  } {
-    const width = this.clientWidth;
-    const height = this.clientHeight;
-    let yAxisOrigin = height;
-    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;
-      } else 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
-    );
-    if (maxY < 0) {
-      // all values are negative
-      // add margin
-      maxY += rangeY * 0.1;
-      maxY = Math.min(0, maxY);
-      yAxisOrigin = 0;
-    } else if (minY < 0) {
-      // some values are negative
-      yAxisOrigin = (maxY / (maxY - minY || 1)) * height;
-    } else {
-      // all values are positive
-      // add margin
-      minY -= rangeY * 0.1;
-      minY = Math.max(0, minY);
-    }
-    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, yAxisOrigin };
-  }
-
-  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 }[],
-    yAxisOrigin: 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},${yAxisOrigin} L ${pathPoints[0].x},${yAxisOrigin} 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 {
-  type: "history-chart";
-  hours_to_show: number;
+export interface TrendGraphCardFeatureConfig {
+  type: "trend-graph";
+  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/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(
-          "--energy-grid-consumption-color"
-        ),
+        color: computedStyle
+          .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,7 +217,9 @@ 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) {
@@ -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-home-summary-card.ts

@@ -31,8 +31,8 @@ import type { HomeSummaryCard } from "./types";
 const COLORS: Record<HomeSummary, string> = {
   lights: "amber",
   climate: "deep-orange",
-  security: "blue",
-  media_players: "purple",
+  security: "blue-grey",
+  media_players: "blue",
 };
 
 @customElement("hui-home-summary-card")
@@ -119,7 +119,7 @@ export class HuiHomeSummaryCard extends LitElement implements LovelaceCard {
 
         const sensorsValues = areaSensors
           .map(
-            (entityId) => parseFloat(this.hass!.states[entityId!].state) || NaN
+            (entityId) => parseFloat(this.hass!.states[entityId!]?.state) || NaN
           )
           .filter((value) => !isNaN(value));
 

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

@@ -14,8 +14,8 @@ const calcPoints = (
   detail: number,
   min: number,
   max: number
-): number[][] => {
-  const coords = [] as number[][];
+): [number, 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;