Simplify automation conditions

2025-09-09 04:59:37 +00:00 · 2025-08-31 13:02:03 -03:00
133 changed files with 2678 additions and 4286 deletions
--- a/.github/workflows/cast_deployment.yaml
+++ b/.github/workflows/cast_deployment.yaml
@@ -26,7 +26,7 @@ jobs:
          ref: dev

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

      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/ci.yaml
+++ b/.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@v5.0.0
+        uses: actions/setup-node@v4.4.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@v5.0.0
+        uses: actions/setup-node@v4.4.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@v5.0.0
+        uses: actions/setup-node@v4.4.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@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/demo_deployment.yaml
+++ b/.github/workflows/demo_deployment.yaml
@@ -27,7 +27,7 @@ jobs:
          ref: dev

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

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

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

      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/labeler.yaml
+++ b/.github/workflows/labeler.yaml
@@ -10,6 +10,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Apply labels
-        uses: actions/labeler@v6.0.1
+        uses: actions/labeler@v5.0.0
        with:
          sync-labels: true
--- a/.github/workflows/nightly.yaml
+++ b/.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@v6
+        uses: actions/setup-python@v5
        with:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/setup-node@v5.0.0
+        uses: actions/setup-node@v4.4.0
        with:
          node-version-file: ".nvmrc"
          cache: yarn
--- a/.github/workflows/release.yaml
+++ b/.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@v6
+        uses: actions/setup-python@v5
        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@v5.0.0
+        uses: actions/setup-node@v4.4.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.3
+        uses: softprops/action-gh-release@v2.3.2
        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@v5.0.0
+        uses: actions/setup-node@v4.4.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.3
+        uses: softprops/action-gh-release@v2.3.2
        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@v5.0.0
+        uses: actions/setup-node@v4.4.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.3
+        uses: softprops/action-gh-release@v2.3.2
        with:
          files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz
--- a/.github/workflows/restrict-task-creation.yml
+++ b/.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@v8
+        uses: actions/github-script@v7
        with:
          script: |
            const issueAuthor = context.payload.issue.user.login;
--- a/.github/workflows/stale.yml
+++ b/.github/workflows/stale.yml
@@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@v10.0.0
+        uses: actions/stale@v9.1.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
--- a/cast/src/media/entrypoint.ts
+++ b/cast/src/media/entrypoint.ts
@@ -5,17 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();

 playerManager.setMessageInterceptor(
-  "LOAD" as framework.messages.MessageType.LOAD,
+  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 = "LIVE" as framework.messages.StreamType.LIVE;
+      media.streamType = framework.messages.StreamType.LIVE;
      media.contentType = "application/vnd.apple.mpegurl";
      // @ts-ignore
      media.hlsVideoSegmentFormat =
-        "fmp4" as framework.messages.HlsVideoSegmentFormat.FMP4;
+        framework.messages.HlsVideoSegmentFormat.FMP4;
    }
    return loadRequestData;
  }
--- a/cast/src/receiver/entrypoint.ts
+++ b/cast/src/receiver/entrypoint.ts
@@ -40,8 +40,7 @@ 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 =
-    "NONE" as framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
  const metadata = new framework.messages.GenericMediaMetadata();
  metadata.title = viewTitle;
  loadRequestData.media.metadata = metadata;
@@ -90,7 +89,7 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  [CAST_NS]: "json" as framework.system.MessageType.JSON,
+  [CAST_NS]: framework.system.MessageType.JSON,
 };

 castContext.addCustomMessageListener(
@@ -98,7 +97,9 @@ 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() !== "IDLE") {
+    if (
+      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
+    ) {
      playerManager.stop();
    } else {
      showLovelaceController();
@@ -112,7 +113,7 @@ castContext.addCustomMessageListener(
 const playerManager = castContext.getPlayerManager();

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

 playerManager.addEventListener(
-  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
+  framework.events.EventType.MEDIA_STATUS,
  (event) => {
    if (
-      event.mediaStatus?.playerState === "IDLE" &&
+      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
      event.mediaStatus?.idleReason &&
-      event.mediaStatus?.idleReason !== "INTERRUPTED"
+      event.mediaStatus?.idleReason !==
+        framework.messages.IdleReason.INTERRUPTED
    ) {
      // media finished or stopped, return to default Lovelace
      showLovelaceController();
--- a/demo/src/html/index.html.template
+++ b/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-top, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
        padding-top: 48px;
      }
      #ha-launch-screen .ha-launch-screen-spacer-bottom {
--- a/gallery/src/components/demo-more-info.ts
+++ b/gallery/src/components/demo-more-info.ts
@@ -1,11 +1,10 @@
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html } 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 {
@@ -22,13 +21,11 @@ class DemoMoreInfo extends LitElement {
      <div class="root">
        <div id="card">
          <ha-card>
-            ${!computeShowNewMoreInfo(state)
-              ? html`<state-card-content
-                  .stateObj=${state}
-                  .hass=${this.hass}
-                  in-dialog
-                ></state-card-content>`
-              : nothing}
+            <state-card-content
+              .stateObj=${state}
+              .hass=${this.hass}
+              in-dialog
+            ></state-card-content>

            <more-info-content
              .hass=${this.hass}
--- a/gallery/src/data/demo_states.js
+++ b/gallery/src/data/demo_states.js
@@ -1106,7 +1106,7 @@ export default {
      friendly_name: "Philips Hue",
      entity_picture: null,
      description:
-        "Press the button on the bridge to register Philips Hue with Home Assistant.",
+        "Press the button on the bridge to register Philips Hue with Home Assistant.\n\n![Description image](/static/images/config_philips_hue.jpg)",
      submit_caption: "I have pressed the button",
    },
    last_changed: "2018-07-19T10:44:46.515160+00:00",
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -781,7 +781,7 @@ class HassioAddonInfo extends LitElement {

      ${this.addon.long_description
        ? html`
-            <ha-card class="long-description" outlined>
+            <ha-card outlined>
              <div class="card-content">
                <ha-markdown
                  .content=${this.addon.long_description}
@@ -1333,9 +1333,6 @@ 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);
--- a/landing-page/src/html/index.html.template
+++ b/landing-page/src/html/index.html.template
@@ -19,9 +19,8 @@
        height: auto;
        padding: 32px 0;
      }
-
      .content {
-        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
+        max-width: 560px;
        margin: 0 auto;
        padding: 0 16px;
        box-sizing: content-box;
--- a/package.json
+++ b/package.json
@@ -26,15 +26,16 @@
  "license": "Apache-2.0",
  "type": "module",
  "dependencies": {
-    "@babel/runtime": "7.28.4",
+    "@awesome.me/webawesome": "3.0.0-beta.4",
+    "@babel/runtime": "7.28.3",
    "@braintree/sanitize-url": "7.1.1",
-    "@codemirror/autocomplete": "6.18.7",
+    "@codemirror/autocomplete": "6.18.6",
    "@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.2",
+    "@codemirror/view": "6.38.1",
    "@egjs/hammerjs": "2.0.17",
    "@formatjs/intl-datetimeformat": "6.18.0",
    "@formatjs/intl-displaynames": "6.8.11",
@@ -51,7 +52,6 @@
    "@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.7",
-    "@vaadin/vaadin-themable-mixin": "24.8.7",
+    "@vaadin/combo-box": "24.8.6",
+    "@vaadin/vaadin-themable-mixin": "24.8.6",
    "@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.2",
+    "luxon": "3.7.1",
    "marked": "16.2.1",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.3",
@@ -149,7 +149,7 @@
    "xss": "1.0.15"
  },
  "devDependencies": {
-    "@babel/core": "7.28.4",
+    "@babel/core": "7.28.3",
    "@babel/helper-define-polyfill-provider": "0.6.5",
    "@babel/plugin-transform-runtime": "7.28.3",
    "@babel/preset-env": "7.28.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.2",
+    "@rspack/core": "1.5.1",
    "@rspack/dev-server": "1.1.4",
    "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.24",
+    "@types/chromecast-caf-receiver": "6.0.22",
    "@types/chromecast-caf-sender": "1.0.11",
    "@types/color-name": "2.0.0",
-    "@types/culori": "4.0.1",
+    "@types/culori": "4.0.0",
    "@types/html-minifier-terser": "7.0.2",
    "@types/js-yaml": "4.0.9",
    "@types/leaflet": "1.9.20",
-    "@types/leaflet-draw": "1.0.13",
-    "@types/leaflet.markercluster": "1.5.6",
+    "@types/leaflet-draw": "1.0.12",
+    "@types/leaflet.markercluster": "1.5.5",
    "@types/lodash.merge": "4.6.9",
    "@types/luxon": "3.7.1",
    "@types/mocha": "10.0.10",
@@ -184,7 +184,7 @@
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.3",
    "del": "8.0.0",
-    "eslint": "9.35.0",
+    "eslint": "9.34.0",
    "eslint-config-airbnb-base": "15.0.0",
    "eslint-config-prettier": "10.1.8",
    "eslint-import-resolver-webpack": "0.13.10",
@@ -204,7 +204,7 @@
    "husky": "9.1.7",
    "jsdom": "26.1.0",
    "jszip": "3.10.1",
-    "lint-staged": "16.1.6",
+    "lint-staged": "16.1.5",
    "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.5",
+    "serve": "14.2.4",
    "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.42.0",
+    "typescript-eslint": "8.41.0",
    "vite-tsconfig-paths": "5.1.4",
    "vitest": "3.2.4",
    "webpack-stats-plugin": "1.1.3",
@@ -234,7 +234,8 @@
    "@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"
+    "@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"
  },
  "packageManager": "yarn@4.9.4"
 }
--- a/public/static/images/config_philips_hue.jpg
+++ b/public/static/images/config_philips_hue.jpg
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20250903.0"
+version      = "20250827.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
--- a/src/common/entity/entity_filter.ts
+++ b/src/common/entity/entity_filter.ts
@@ -67,7 +67,10 @@ export const generateEntityFilter = (
    }

    if (floors) {
-      if (!floor || !floors.has(floor.floor_id)) {
+      if (!floor) {
+        return false;
+      }
+      if (!floors) {
        return false;
      }
    }
--- a/src/components/ha-automation-row.ts
+++ b/src/components/ha-automation-row.ts
@@ -25,8 +25,6 @@ export class HaAutomationRow extends LitElement {
  @property({ type: Boolean, reflect: true, attribute: "building-block" })
  public buildingBlock = false;

-  @property({ type: Boolean, reflect: true }) public highlight?: boolean;
-
  @query(".row")
  private _rowElement?: HTMLDivElement;

@@ -80,18 +78,7 @@ 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;
@@ -112,22 +99,6 @@ 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();
  }

@@ -159,7 +130,6 @@ 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);
@@ -198,20 +168,9 @@ export class HaAutomationRow extends LitElement {
      margin: 0 12px;
    }
    :host([sort-selected]) .row {
-      outline: solid;
-      outline-color: rgba(var(--rgb-accent-color), 0.6);
-      outline-offset: -2px;
-      outline-width: 2px;
-      background-color: rgba(var(--rgb-accent-color), 0.08);
-    }
-    .row:hover {
-      background-color: rgba(var(--rgb-primary-text-color), 0.04);
-    }
-    :host([highlight]) .row {
-      background-color: rgba(var(--rgb-primary-color), 0.08);
-    }
-    :host([highlight]) .row:hover {
-      background-color: rgba(var(--rgb-primary-color), 0.16);
+      box-shadow:
+        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
+        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
    }
  `;
 }
@@ -224,8 +183,5 @@ declare global {
  interface HASSDomEvents {
    "toggle-collapsed": undefined;
    "stop-sort-selection": undefined;
-    "copy-row": undefined;
-    "cut-row": undefined;
-    "delete-row": undefined;
  }
 }
--- a/src/components/ha-bottom-sheet.ts
+++ b/src/components/ha-bottom-sheet.ts
@@ -30,8 +30,6 @@ export class HaBottomSheet extends LitElement {

  @state() private _dialogMaxViewpointHeight = 70;

-  @state() private _dialogMinViewpointHeight = 55;
-
  @state() private _dialogViewportHeight?: number;

  render() {
@@ -43,7 +41,6 @@ export class HaBottomSheet extends LitElement {
          ? `${this._dialogViewportHeight}vh`
          : "auto",
        maxHeight: `${this._dialogMaxViewpointHeight}vh`,
-        minHeight: `${this._dialogMinViewpointHeight}vh`,
      })}
    >
      <div class="handle-wrapper">
@@ -83,7 +80,6 @@ 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();
@@ -232,6 +228,7 @@ export class HaBottomSheet extends LitElement {
      box-shadow: var(--wa-shadow-l);
      padding: 0;
      margin: 0;
+
      top: auto;
      inset-inline-end: auto;
      bottom: 0;
--- a/src/components/ha-button-group.ts
+++ b/src/components/ha-button-group.ts
@@ -0,0 +1,82 @@
+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;
+  }
+}
--- a/src/components/ha-button-toggle-group.ts
+++ b/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-button";
 import "./ha-svg-icon";
+import "./ha-button";
+import "./ha-button-group";

 /**
 * @element ha-button-toggle-group
@@ -37,14 +37,11 @@ export class HaButtonToggleGroup extends LitElement {

  protected render(): TemplateResult {
    return html`
-      <wa-button-group childSelector="ha-button">
+      <ha-button-group .variant=${this.variant} .size=${this.size}>
        ${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}
@@ -58,7 +55,7 @@ export class HaButtonToggleGroup extends LitElement {
                : button.label}
            </ha-button>`
        )}
-      </wa-button-group>
+      </ha-button-group>
    `;
  }

--- a/src/components/ha-button.ts
+++ b/src/components/ha-button.ts
@@ -1,7 +1,9 @@
-import Button from "@home-assistant/webawesome/dist/components/button/button";
+import Button from "@awesome.me/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";

 /**
@@ -33,10 +35,54 @@ 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")
+@customElement("ha-button") // @ts-expect-error Intentionally overriding private methods
 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,
@@ -216,10 +262,10 @@ export class HaButton extends Button {
        }

        .button.has-start {
-          padding-inline-start: 8px;
+          padding-left: 8px;
        }
        .button.has-end {
-          padding-inline-end: 8px;
+          padding-right: 8px;
        }
      `,
    ];
--- a/src/components/ha-dialog.ts
+++ b/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 16px 16px;
+        padding: 12px 16px max(var(--safe-area-inset-bottom), 16px) 16px;
      }
      .mdc-dialog__actions span:nth-child(1) {
        flex: var(--secondary-action-button-flex, unset);
@@ -100,8 +100,6 @@ 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;
@@ -117,17 +115,15 @@ export class HaDialog extends DialogBase {
        padding: var(--dialog-content-padding, 24px);
      }
      :host([hideactions]) .mdc-dialog .mdc-dialog__content {
-        padding-bottom: var(--dialog-content-padding, 24px);
+        padding-bottom: max(
+          var(--dialog-content-padding, 24px),
+          var(--safe-area-inset-bottom)
+        );
      }
      .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);
@@ -141,24 +137,6 @@ 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;
--- a/src/components/ha-fade-in.ts
+++ b/src/components/ha-fade-in.ts
@@ -1,4 +1,4 @@
-import WaAnimation from "@home-assistant/webawesome/dist/components/animation/animation";
+import WaAnimation from "@awesome.me/webawesome/dist/components/animation/animation";
 import { customElement, property } from "lit/decorators";

@customElement("ha-fade-in")
--- a/src/components/ha-items-display-editor.ts
+++ b/src/components/ha-items-display-editor.ts
@@ -393,13 +393,10 @@ export class HaItemDisplayEditor extends LitElement {
      --md-list-item-one-line-container-height: 48px;
    }
    ha-md-list-item.drag-selected {
-      --md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6);
+      box-shadow:
+        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
+        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
      border-radius: 8px;
-      outline: solid;
-      outline-color: rgba(var(--rgb-accent-color), 0.6);
-      outline-offset: -2px;
-      outline-width: 2px;
-      background-color: rgba(var(--rgb-accent-color), 0.08);
    }
    ha-md-list-item ha-icon-button {
      margin-left: -12px;
--- a/src/components/ha-md-dialog.ts
+++ b/src/components/ha-md-dialog.ts
@@ -159,7 +159,6 @@ 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"]) {
--- a/src/components/ha-progress-ring.ts
+++ b/src/components/ha-progress-ring.ts
@@ -1,12 +1,21 @@
-import ProgressRing from "@home-assistant/webawesome/dist/components/progress-ring/progress-ring";
+import ProgressRing from "@awesome.me/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);

--- a/src/components/ha-related-items.ts
+++ b/src/components/ha-related-items.ts
@@ -3,7 +3,6 @@ import {
  mdiDevices,
  mdiPaletteSwatch,
  mdiTextureBox,
-  mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -267,9 +266,7 @@ export class HaRelatedItems extends LitElement {
                  <a href="/config/devices/device/${relatedDeviceId}">
                    <ha-list-item hasMeta graphic="icon">
                      <ha-svg-icon
-                        .path=${device.entry_type === "service"
-                          ? mdiTransitConnectionVariant
-                          : mdiDevices}
+                        .path=${mdiDevices}
                        slot="graphic"
                      ></ha-svg-icon>
                      ${device.name_by_user || device.name}
--- a/src/components/ha-sortable.ts
+++ b/src/components/ha-sortable.ts
@@ -15,16 +15,21 @@ 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"
@@ -149,6 +154,7 @@ export class HaSortable extends LitElement {
      onUpdate: this._handleUpdate,
      onAdd: this._handleAdd,
      onRemove: this._handleRemove,
+      onClone: this._handleClone,
    };

    if (this.draggableSelector) {
@@ -181,7 +187,6 @@ export class HaSortable extends LitElement {
    fireEvent(this, "item-added", {
      index: evt.newIndex,
      data: evt.item.sortableData,
-      item: evt.item,
    });
  };

@@ -189,6 +194,10 @@ 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
--- a/src/components/ha-spinner.ts
+++ b/src/components/ha-spinner.ts
@@ -1,8 +1,10 @@
-import Spinner from "@home-assistant/webawesome/dist/components/spinner/spinner";
+import Spinner from "@awesome.me/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";
@@ -31,6 +33,14 @@ 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,
--- a/src/data/ai_task.ts
+++ b/src/data/ai_task.ts
@@ -1,14 +1,8 @@
 import type { HomeAssistant } from "../types";
 import type { Selector } from "./selector";

-export const enum AITaskEntityFeature {
-  GENERATE_DATA = 1,
-  SUPPORT_ATTACHMENTS = 2,
-  GENERATE_IMAGE = 4,
-}
 export interface AITaskPreferences {
  gen_data_entity_id: string | null;
-  gen_image_entity_id: string | null;
 }

 export interface GenDataTask {
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -387,6 +387,18 @@ export const normalizeAutomationConfig = <
    }
  }

+  // We move all conditions into the action for display
+  if (config.conditions) {
+    if (config.actions) {
+      (config.actions as Action[]).unshift(
+        ...(config.conditions as Condition[])
+      );
+    } else {
+      config.actions = config.conditions;
+    }
+    delete config.conditions;
+  }
+
  return config;
 };

@@ -556,6 +568,7 @@ export interface AutomationClipboard {
 }

 export interface BaseSidebarConfig {
+  toggleYamlMode: () => boolean;
  delete: () => void;
  close: (focus?: boolean) => void;
 }
@@ -567,7 +580,6 @@ export interface TriggerSidebarConfig extends BaseSidebarConfig {
  duplicate: () => void;
  cut: () => void;
  copy: () => void;
-  toggleYamlMode: () => void;
  config: Trigger;
  yamlMode: boolean;
  uiSupported: boolean;
@@ -581,7 +593,6 @@ export interface ConditionSidebarConfig extends BaseSidebarConfig {
  duplicate: () => void;
  cut: () => void;
  copy: () => void;
-  toggleYamlMode: () => void;
  config: Condition;
  yamlMode: boolean;
  uiSupported: boolean;
@@ -595,7 +606,6 @@ export interface ActionSidebarConfig extends BaseSidebarConfig {
  cut: () => void;
  copy: () => void;
  run: () => void;
-  toggleYamlMode: () => void;
  config: {
    action: Action;
  };
@@ -617,7 +627,6 @@ export interface ScriptFieldSidebarConfig extends BaseSidebarConfig {
    key: string;
    excludeKeys: string[];
  };
-  toggleYamlMode: () => void;
  yamlMode: boolean;
 }

--- a/src/data/bluetooth.ts
+++ b/src/data/bluetooth.ts
@@ -24,14 +24,11 @@ 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>;
@@ -58,13 +55,6 @@ 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>
@@ -180,20 +170,3 @@ 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
-  );
-};
--- a/src/data/data_entry_flow.ts
+++ b/src/data/data_entry_flow.ts
@@ -97,7 +97,6 @@ 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;
 }
--- a/src/data/graph.ts
+++ b/src/data/graph.ts
@@ -1 +1 @@
-export const strokeWidth = 2;
+export const strokeWidth = 5;
--- a/src/data/recorder.ts
+++ b/src/data/recorder.ts
@@ -2,7 +2,6 @@ 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;
@@ -109,7 +108,7 @@ export interface StatisticsValidationResultMeanTypeChanged {
  };
 }

-export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF", "MCF"] as const;
+export const VOLUME_UNITS = ["L", "gal", "ft³", "m³", "CCF"] as const;

 export interface StatisticsUnitConfiguration {
  energy?: "Wh" | "kWh" | "MWh" | "GJ";
@@ -212,14 +211,7 @@ export const fetchStatistic = (
              : period.fixed_period.end,
        }
      : undefined,
-    calendar: period.calendar
-      ? {
-          ...(period.calendar.period === "week"
-            ? { first_weekday: firstWeekday(hass.locale).substring(0, 3) }
-            : {}),
-          ...period.calendar,
-        }
-      : undefined,
+    calendar: period.calendar,
    rolling_window: period.rolling_window,
  });

--- a/src/dialogs/config-flow/show-dialog-config-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-config-flow.ts
@@ -256,13 +256,6 @@ 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 "";
--- a/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
@@ -137,12 +137,6 @@ export interface FlowConfig {
    option: string
  ): string;

-  renderMenuOptionDescription(
-    hass: HomeAssistant,
-    step: DataEntryFlowStepMenu,
-    option: string
-  ): string;
-
  renderLoadingDescription(
    hass: HomeAssistant,
    loadingReason: LoadingReason,
--- a/src/dialogs/config-flow/show-dialog-options-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-options-flow.ts
@@ -225,13 +225,6 @@ 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`) ||
--- a/src/dialogs/config-flow/show-dialog-sub-config-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-sub-config-flow.ts
@@ -252,13 +252,6 @@ 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 "";
--- a/src/dialogs/config-flow/step-flow-menu.ts
+++ b/src/dialogs/config-flow/step-flow-menu.ts
@@ -1,5 +1,5 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+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 "../../components/ha-icon-next";
@@ -8,7 +8,6 @@ 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 {
@@ -18,18 +17,9 @@ 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;
@@ -40,36 +30,10 @@ 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(
@@ -82,18 +46,8 @@ class StepFlowMenu extends LitElement {
      <div class="options">
        ${options.map(
          (option) => html`
-            <ha-list-item
-              hasMeta
-              .step=${option}
-              @click=${this._handleStep}
-              ?twoline=${optionDescriptions[option]}
-            >
+            <ha-list-item hasMeta .step=${option} @click=${this._handleStep}>
              <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>
          `
@@ -119,10 +73,11 @@ class StepFlowMenu extends LitElement {
    css`
      .options {
        margin-top: 20px;
-        margin-bottom: 16px;
+        margin-bottom: 8px;
      }
      .content {
        padding-bottom: 16px;
+        border-bottom: 1px solid var(--divider-color);
      }
      .content + .options {
        margin-top: 8px;
--- a/src/dialogs/generic/dialog-box.ts
+++ b/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}
+        .disableCancelAction=${confirmPrompt || false}
        @closed=${this._dialogClosed}
        type="alert"
        aria-labelledby="dialog-box-title"
@@ -100,22 +100,23 @@ class DialogBox extends LitElement {
            : ""}
        </div>
        <div slot="actions">
-          ${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}
+          ${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>
+          `}
          <ha-button
            @click=${this._confirm}
-            ?autofocus=${!this._params.prompt && !this._params.destructive}
+            ?dialogInitialFocus=${!this._params.prompt &&
+            !this._params.destructive}
            variant=${this._params.destructive ? "danger" : "brand"}
          >
            ${this._params.confirmText
--- a/src/dialogs/more-info/controls/more-info-update.ts
+++ b/src/dialogs/more-info/controls/more-info-update.ts
@@ -475,6 +475,7 @@ 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;
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@@ -6,9 +6,7 @@ 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";
@@ -294,101 +292,106 @@ class MoreInfoWeather extends LitElement {
            </div>
          `
        : nothing}
-
-      <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}
+      ${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}
                >
-                  ${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>
+                  ${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`
                      <div>
-                        ${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
+                        <div>
+                          ${dayNight
                            ? 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 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>
-                    </div>
-                  `
-                : nothing
-            )
-          : html`<ha-spinner size="medium"></ha-spinner>`}
-      </div>
-
+                    `
+                  : nothing
+              )}
+            </div>
+          `
+        : nothing}
      ${this.stateObj.attributes.attribution
        ? html`
            <div class="attribution">
@@ -586,10 +589,6 @@ class MoreInfoWeather extends LitElement {
        .forecast-icon {
          --mdc-icon-size: 40px;
        }
-
-        .forecast ha-spinner {
-          height: 120px;
-        }
      `,
    ];
  }
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -8,7 +8,6 @@ import {
  mdiPencil,
  mdiPencilOff,
  mdiPencilOutline,
-  mdiTransitConnectionVariant,
 } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
@@ -312,8 +311,6 @@ 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 =
@@ -437,18 +434,11 @@ export class MoreInfoDialog extends LitElement {
                                @request-selected=${this._goToDevice}
                              >
                                ${this.hass.localize(
-                                  "ui.dialogs.more_info_control.device_or_service_info",
-                                  {
-                                    type: this.hass.localize(
-                                      `ui.dialogs.more_info_control.device_type.${deviceType}`
-                                    ),
-                                  }
+                                  "ui.dialogs.more_info_control.device_info"
                                )}
                                <ha-svg-icon
                                  slot="graphic"
-                                  .path=${deviceType === "service"
-                                    ? mdiTransitConnectionVariant
-                                    : mdiDevices}
+                                  .path=${mdiDevices}
                                ></ha-svg-icon>
                              </ha-list-item>
                            `
@@ -661,10 +651,7 @@ 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: max(
-            40px,
-            var(--safe-area-inset-top, 0px)
-          );
+          --dialog-surface-margin-top: 40px;
          --dialog-content-padding: 0;
        }

--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/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 - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))"
-                            : `calc(${Math.min(
+                            ? "calc(100vh - 56px)"
+                            : `${Math.min(
                                items.length * (commandMode ? 56 : 72) + 26,
                                500
-                              )}px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))`,
+                              )}px`,
                        })}
                        .items=${items}
                        .renderItem=${this._renderItem}
--- a/src/dialogs/shortcuts/dialog-shortcuts.ts
+++ b/src/dialogs/shortcuts/dialog-shortcuts.ts
@@ -1,148 +1,121 @@
-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 type { LocalizeKeys } from "../../common/translations/localize";
-import "../../components/ha-alert";
+import "../../components/ha-button";
 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";
+import { haStyleDialog } from "../../resources/styles";
+import "../../components/ha-alert";
+import "../../components/chips/ha-assist-chip";
+import type { LocalizeKeys } from "../../common/translations/localize";

 interface Text {
-  textTranslationKey: LocalizeKeys;
+  type: "text";
+  key: LocalizeKeys;
 }

-interface LocalizedShortcut {
-  shortcutTranslationKey: LocalizeKeys;
-}
-
-type ShortcutString = string | LocalizedShortcut;
+type ShortcutString = string | { key: LocalizeKeys };

 interface Shortcut {
+  type: "shortcut";
  shortcut: ShortcutString[];
-  descriptionTranslationKey: LocalizeKeys;
+  key: LocalizeKeys;
 }

 interface Section {
-  titleTranslationKey: LocalizeKeys;
+  key: LocalizeKeys;
  items: (Text | Shortcut)[];
 }

-const CTRL_CMD = "__CTRL_CMD__";
-
 const _SHORTCUTS: Section[] = [
  {
-    titleTranslationKey: "ui.dialogs.shortcuts.searching.title",
+    key: "ui.dialogs.shortcuts.searching.title",
    items: [
+      { type: "text", key: "ui.dialogs.shortcuts.searching.on_any_page" },
      {
-        textTranslationKey: "ui.dialogs.shortcuts.searching.on_any_page",
-      },
-      {
+        type: "shortcut",
        shortcut: ["C"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.searching.search_command",
+        key: "ui.dialogs.shortcuts.searching.search_command",
      },
      {
+        type: "shortcut",
        shortcut: ["E"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.searching.search_entities",
+        key: "ui.dialogs.shortcuts.searching.search_entities",
      },
      {
+        type: "shortcut",
        shortcut: ["D"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.searching.search_devices",
+        key: "ui.dialogs.shortcuts.searching.search_devices",
      },
      {
-        textTranslationKey:
-          "ui.dialogs.shortcuts.searching.on_pages_with_tables",
+        type: "text",
+        key: "ui.dialogs.shortcuts.searching.on_pages_with_tables",
      },
      {
-        shortcut: [CTRL_CMD, "F"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.searching.search_in_table",
+        type: "shortcut",
+        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "F"],
+        key: "ui.dialogs.shortcuts.searching.search_in_table",
      },
    ],
  },
  {
-    titleTranslationKey: "ui.dialogs.shortcuts.assist.title",
+    key: "ui.dialogs.shortcuts.assist.title",
    items: [
      {
+        type: "shortcut",
        shortcut: ["A"],
-        descriptionTranslationKey: "ui.dialogs.shortcuts.assist.open_assist",
+        key: "ui.dialogs.shortcuts.assist.open_assist",
      },
    ],
  },
  {
-    titleTranslationKey: "ui.dialogs.shortcuts.automation_script.title",
+    key: "ui.dialogs.shortcuts.automation_script.title",
    items: [
      {
-        shortcut: [CTRL_CMD, "C"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.automation_script.copy",
+        type: "shortcut",
+        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "V"],
+        key: "ui.dialogs.shortcuts.automation_script.paste",
      },
      {
-        shortcut: [CTRL_CMD, "X"],
-        descriptionTranslationKey: "ui.dialogs.shortcuts.automation_script.cut",
-      },
-      {
-        shortcut: [
-          CTRL_CMD,
-          { shortcutTranslationKey: "ui.dialogs.shortcuts.keys.del" },
-        ],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.automation_script.delete",
-      },
-      {
-        shortcut: [CTRL_CMD, "V"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.automation_script.paste",
-      },
-      {
-        shortcut: [CTRL_CMD, "S"],
-        descriptionTranslationKey:
-          "ui.dialogs.shortcuts.automation_script.save",
+        type: "shortcut",
+        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" }, "S"],
+        key: "ui.dialogs.shortcuts.automation_script.save",
      },
    ],
  },
  {
-    titleTranslationKey: "ui.dialogs.shortcuts.charts.title",
+    key: "ui.dialogs.shortcuts.charts.title",
    items: [
      {
+        type: "shortcut",
        shortcut: [
-          CTRL_CMD,
-          { shortcutTranslationKey: "ui.dialogs.shortcuts.shortcuts.drag" },
+          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
+          { key: "ui.dialogs.shortcuts.shortcuts.drag" },
        ],
-        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.drag_to_zoom",
+        key: "ui.dialogs.shortcuts.charts.drag_to_zoom",
      },
      {
+        type: "shortcut",
        shortcut: [
-          CTRL_CMD,
-          {
-            shortcutTranslationKey:
-              "ui.dialogs.shortcuts.shortcuts.scroll_wheel",
-          },
+          { key: "ui.dialogs.shortcuts.shortcuts.ctrl_cmd" },
+          { key: "ui.dialogs.shortcuts.shortcuts.scroll_wheel" },
        ],
-        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
+        key: "ui.dialogs.shortcuts.charts.scroll_to_zoom",
      },
      {
-        shortcut: [
-          {
-            shortcutTranslationKey:
-              "ui.dialogs.shortcuts.shortcuts.double_click",
-          },
-        ],
-        descriptionTranslationKey: "ui.dialogs.shortcuts.charts.double_click",
+        type: "shortcut",
+        shortcut: [{ key: "ui.dialogs.shortcuts.shortcuts.double_click" }],
+        key: "ui.dialogs.shortcuts.charts.double_click",
      },
    ],
  },
  {
-    titleTranslationKey: "ui.dialogs.shortcuts.other.title",
+    key: "ui.dialogs.shortcuts.other.title",
    items: [
      {
+        type: "shortcut",
        shortcut: ["M"],
-        descriptionTranslationKey: "ui.dialogs.shortcuts.other.my_link",
+        key: "ui.dialogs.shortcuts.other.my_link",
      },
    ],
  },
@@ -164,28 +137,17 @@ class DialogShortcuts extends LitElement {
  }

  private _renderShortcut(
-    shortcutKeys: ShortcutString[],
-    descriptionKey: LocalizeKeys
+    shortcuts: ShortcutString[],
+    translationKey: LocalizeKeys
  ) {
+    const keys = shortcuts.map((shortcut) =>
+      typeof shortcut === "string" ? shortcut : this.hass.localize(shortcut.key)
+    );
+
    return html`
      <div class="shortcut">
-        ${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)}
+        ${keys.map((key) => html` <span>${key.toUpperCase()}</span>`)}
+        ${this.hass.localize(translationKey)}
      </div>
    `;
  }
@@ -209,18 +171,16 @@ class DialogShortcuts extends LitElement {
        <div class="content">
          ${_SHORTCUTS.map(
            (section) => html`
-              <h3>${this.hass.localize(section.titleTranslationKey)}</h3>
+              <h3>${this.hass.localize(section.key)}</h3>
              <div class="items">
                ${section.items.map((item) => {
-                  if ("shortcut" in item) {
-                    return this._renderShortcut(
-                      (item as Shortcut).shortcut,
-                      (item as Shortcut).descriptionTranslationKey
-                    );
+                  if (item.type === "text") {
+                    return html`<p>${this.hass.localize(item.key)}</p>`;
                  }
-                  return html`<p>
-                    ${this.hass.localize((item as Text).textTranslationKey)}
-                  </p>`;
+                  if (item.type === "shortcut") {
+                    return this._renderShortcut(item.shortcut, item.key);
+                  }
+                  return nothing;
                })}
              </div>
            `
@@ -272,10 +232,6 @@ class DialogShortcuts extends LitElement {
      .items p {
        margin-bottom: 8px;
      }
-
-      ha-svg-icon {
-        width: 12px;
-      }
    `,
  ];
 }
--- a/src/html/authorize.html.template
+++ b/src/html/authorize.html.template
@@ -35,7 +35,6 @@
        align-items: center;
        justify-content: center;
        margin-bottom: 32px;
-        padding-top: var(--safe-area-inset-top);
      }

      .header img {
--- a/src/html/index.html.template
+++ b/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-top, 0px), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-bottom, 0px), 48px) + 46px );
        padding-top: 48px;
      }
      #ha-launch-screen .ha-launch-screen-spacer-bottom {
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.html.template
@@ -19,9 +19,8 @@
        height: auto;
        padding: 32px 0;
      }
-
      .content {
-        max-width: min(560px, calc(100vw - var(--safe-area-inset-right, 0px) - var(--safe-area-inset-left, 0px)));
+        max-width: 560px;
        margin: 0 auto;
        padding: 0 16px;
        box-sizing: content-box;
@@ -33,7 +32,6 @@
        justify-content: flex-start;
        margin-bottom: 32px;
        margin-left: 32px;
-        padding-top: var(--safe-area-inset-top);
      }

      .header img {
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -884,13 +884,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
    }

    .filter-dialog-content {
-      height: calc(
-        100vh -
-          70px - var(--header-height, 0px) - var(
-            --safe-area-inset-top,
-            0px
-          ) - var(--safe-area-inset-bottom, 0px)
-      );
+      height: calc(100vh - 1px - 61px - var(--header-height));
      display: flex;
      flex-direction: column;
    }
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -146,8 +146,6 @@ 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));
@@ -155,7 +153,6 @@ 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 {
--- a/src/mixins/keyboard-shortcut-mixin.ts
+++ b/src/mixins/keyboard-shortcut-mixin.ts
@@ -11,54 +11,23 @@ export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
  class extends superClass {
    private _keydownEvent = (event: KeyboardEvent) => {
      const supportedShortcuts = this.supportedShortcuts();
-      if (
-        (event.ctrlKey || event.metaKey) &&
-        !event.shiftKey &&
-        !event.altKey &&
-        event.key in supportedShortcuts
-      ) {
+      if ((event.ctrlKey || event.metaKey) && 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();
-      this.addKeyboardShortcuts();
-    }
-
-    public disconnectedCallback() {
-      this.removeKeyboardShortcuts();
-      super.disconnectedCallback();
-    }
-
-    public addKeyboardShortcuts() {
-      if (this._listenersAdded) {
-        return;
-      }
-      this._listenersAdded = true;
      window.addEventListener("keydown", this._keydownEvent);
    }

-    public removeKeyboardShortcuts() {
-      this._listenersAdded = false;
+    public disconnectedCallback() {
      window.removeEventListener("keydown", this._keydownEvent);
+      super.disconnectedCallback();
    }

    protected supportedShortcuts(): SupportedShortcuts {
      return {};
    }
-
-    protected supportedSingleKeyShortcuts(): SupportedShortcuts {
-      return {};
-    }
  };
--- a/src/panels/config/automation/action/ha-automation-action-editor.ts
+++ b/src/panels/config/automation/action/ha-automation-action-editor.ts
@@ -97,7 +97,7 @@ export default class HaAutomationActionEditor extends LitElement {
    if (!ev.detail.isValid) {
      return;
    }
-    fireEvent(this, "yaml-changed", {
+    fireEvent(this, "value-changed", {
      value: migrateAutomationAction(ev.detail.value),
    });
  }
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -5,12 +5,12 @@ import {
  mdiArrowUp,
  mdiContentCopy,
  mdiContentCut,
+  mdiContentDuplicate,
  mdiDelete,
  mdiDotsVertical,
  mdiPlay,
  mdiPlayCircleOutline,
  mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
  mdiRenameBox,
  mdiStopCircleOutline,
 } from "@mdi/js";
@@ -151,8 +151,6 @@ export default class HaAutomationActionRow extends LitElement {

  @property({ type: Boolean }) public last?: boolean;

-  @property({ type: Boolean }) public highlight?: boolean;
-
  @property({ type: Boolean, attribute: "sidebar" })
  public optionsInSidebar = false;

@@ -195,10 +193,6 @@ 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);

@@ -309,7 +303,7 @@ export default class HaAutomationActionRow extends LitElement {
              )}
              <ha-svg-icon
                slot="start"
-                .path=${mdiPlusCircleMultipleOutline}
+                .path=${mdiContentDuplicate}
              ></ha-svg-icon>
            </ha-md-menu-item>

@@ -442,6 +436,7 @@ 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,
@@ -452,17 +447,12 @@ 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`
@@ -521,15 +511,6 @@ 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,
    });
@@ -639,12 +620,6 @@ 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 = () => {
@@ -653,12 +628,6 @@ 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 = () => {
@@ -692,7 +661,8 @@ export default class HaAutomationActionRow extends LitElement {
    ev?.stopPropagation();

    if (this._selected) {
-      fireEvent(this, "request-close-sidebar");
+      this._selected = false;
+      fireEvent(this, "close-sidebar");
      return;
    }
    this.openSidebar();
@@ -718,7 +688,7 @@ export default class HaAutomationActionRow extends LitElement {
      },
      toggleYamlMode: () => {
        this._toggleYamlMode();
-        this.openSidebar();
+        return this._yamlMode;
      },
      disable: this._onDisable,
      delete: this._onDelete,
@@ -736,12 +706,12 @@ export default class HaAutomationActionRow extends LitElement {
    this._collapsed = false;

    if (this.narrow) {
-      window.setTimeout(() => {
+      requestAnimationFrame(() => {
        this.scrollIntoView({
          block: "start",
          behavior: "smooth",
        });
-      }, 180); // duration of transition of added padding for bottom sheet
+      });
    }
  }

@@ -788,6 +758,10 @@ export default class HaAutomationActionRow extends LitElement {
    this._collapsed = !this._collapsed;
  }

+  public isSelected() {
+    return this._selected;
+  }
+
  public focus() {
    this._automationRowElement?.focus();
  }
--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@@ -6,9 +6,11 @@ import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { listenMediaQuery } from "../../../../common/dom/media_query";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-sortable";
+import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import {
  ACTION_BUILDING_BLOCKS,
@@ -44,6 +46,8 @@ export default class HaAutomationAction extends LitElement {
  @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar =
    false;

+  @state() private _showReorder = false;
+
  @state() private _rowSortSelected?: number;

  @state()
@@ -64,17 +68,33 @@ export default class HaAutomationAction extends LitElement {

  private _actionKeys = new WeakMap<Action, string>();

+  private _unsubMql?: () => void;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
+      this._showReorder = matches;
+    });
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unsubMql?.();
+    this._unsubMql = undefined;
+  }
+
  protected render() {
    return html`
      <ha-sortable
        handle-selector=".handle"
        draggable-selector="ha-automation-action-row"
-        .disabled=${this.disabled}
+        .disabled=${!this._showReorder || this.disabled}
        group="actions"
        invert-swap
        @item-moved=${this._actionMoved}
        @item-added=${this._actionAdded}
        @item-removed=${this._actionRemoved}
+        @item-cloned=${this._actionCloned}
      >
        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
          ${repeat(
@@ -95,12 +115,12 @@ export default class HaAutomationAction extends LitElement {
                @move-up=${this._moveUp}
                @value-changed=${this._actionChanged}
                .hass=${this.hass}
-                .highlight=${this.highlightedActions?.includes(action)}
+                ?highlight=${this.highlightedActions?.includes(action)}
                .optionsInSidebar=${this.optionsInSidebar}
                .sortSelected=${this._rowSortSelected === idx}
                @stop-sort-selection=${this._stopSortSelection}
              >
-                ${!this.disabled
+                ${this._showReorder && !this.disabled
                  ? html`
                      <div
                        tabindex="0"
@@ -299,8 +319,11 @@ export default class HaAutomationAction extends LitElement {
  private async _actionAdded(ev: CustomEvent): Promise<void> {
    ev.stopPropagation();
    const { index, data } = ev.detail;
-    const item = ev.detail.item as HaAutomationActionRow;
-    const selected = item.selected;
+    let selected = false;
+    if (data?.["ha-automation-row-selected"]) {
+      selected = true;
+      delete data["ha-automation-row-selected"];
+    }

    let actions = [
      ...this.actions.slice(0, index),
@@ -358,6 +381,12 @@ 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;
--- a/src/panels/config/automation/action/types/ha-automation-action-condition.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-condition.ts
@@ -3,7 +3,6 @@ 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";
@@ -67,7 +66,6 @@ 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`
--- a/src/panels/config/automation/add-automation-element-dialog.ts
+++ b/src/panels/config/automation/add-automation-element-dialog.ts
@@ -1,9 +1,4 @@
-import {
-  mdiAppleKeyboardCommand,
-  mdiClose,
-  mdiContentPaste,
-  mdiPlus,
-} from "@mdi/js";
+import { 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";
@@ -46,14 +41,11 @@ 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 },
@@ -93,10 +85,7 @@ const ENTITY_DOMAINS_OTHER = new Set([
 const ENTITY_DOMAINS_MAIN = new Set(["notify"]);

@customElement("add-automation-element-dialog")
-class DialogAddAutomationElement
-  extends KeyboardShortcutMixin(LitElement)
-  implements HassDialog
-{
+class DialogAddAutomationElement extends LitElement implements HassDialog {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _params?: AddAutomationElementDialogParams;
@@ -119,14 +108,9 @@ class DialogAddAutomationElement

  @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();
@@ -136,12 +120,9 @@ class DialogAddAutomationElement
    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 });
    }
@@ -574,37 +555,15 @@ class DialogAddAutomationElement
                  .value=${PASTE_VALUE}
                  @click=${this._selected}
                >
-                  <div class="shortcut-label">
-                    <div class="label">
-                      <div>
-                        ${this.hass.localize(
-                          `ui.panel.config.automation.editor.${this._params.type}s.paste`
-                        )}
-                      </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>
+                  ${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
+                  >
                  <ha-svg-icon
                    slot="start"
                    .path=${mdiContentPaste}
@@ -612,7 +571,7 @@ class DialogAddAutomationElement
                  ><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,
@@ -678,30 +637,6 @@ class DialogAddAutomationElement
    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,
@@ -725,7 +660,6 @@ class DialogAddAutomationElement
          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;
@@ -734,27 +668,6 @@ class DialogAddAutomationElement
          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);
-        }
      `,
    ];
  }
--- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts
@@ -103,7 +103,8 @@ export default class HaAutomationConditionEditor extends LitElement {
    if (!ev.detail.isValid) {
      return;
    }
-    fireEvent(this, "yaml-changed", { value: ev.detail.value });
+    // @ts-ignore
+    fireEvent(this, "value-changed", { value: ev.detail.value, yaml: true });
  }

  private _onUiChanged(ev: CustomEvent) {
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/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,7 +53,6 @@ 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";
@@ -117,8 +116,6 @@ export default class HaAutomationConditionRow extends LitElement {

  @property({ type: Boolean }) public narrow = false;

-  @property({ type: Boolean }) public highlight?: boolean;
-
  @property({ type: Boolean, attribute: "sort-selected" })
  public sortSelected = false;

@@ -155,10 +152,6 @@ 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
@@ -219,7 +212,7 @@ export default class HaAutomationConditionRow extends LitElement {
              )}
              <ha-svg-icon
                slot="start"
-                .path=${mdiPlusCircleMultipleOutline}
+                .path=${mdiContentDuplicate}
              ></ha-svg-icon>
            </ha-md-menu-item>

@@ -362,16 +355,12 @@ 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`
@@ -488,15 +477,6 @@ 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, {
@@ -587,12 +567,6 @@ 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 = () => {
@@ -601,12 +575,6 @@ 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 = () => {
@@ -667,7 +635,8 @@ export default class HaAutomationConditionRow extends LitElement {
    ev?.stopPropagation();

    if (this._selected) {
-      fireEvent(this, "request-close-sidebar");
+      this._selected = false;
+      fireEvent(this, "close-sidebar");
      return;
    }
    this.openSidebar();
@@ -691,7 +660,7 @@ export default class HaAutomationConditionRow extends LitElement {
      },
      toggleYamlMode: () => {
        this._toggleYamlMode();
-        this.openSidebar();
+        return this._yamlMode;
      },
      disable: this._onDisable,
      delete: this._onDelete,
@@ -707,12 +676,12 @@ export default class HaAutomationConditionRow extends LitElement {
    this._collapsed = false;

    if (this.narrow) {
-      window.setTimeout(() => {
+      requestAnimationFrame(() => {
        this.scrollIntoView({
          block: "start",
          behavior: "smooth",
        });
-      }, 180); // duration of transition of added padding for bottom sheet
+      });
    }
  }

@@ -725,6 +694,10 @@ export default class HaAutomationConditionRow extends LitElement {
    this._collapsed = !this._collapsed;
  }

+  public isSelected() {
+    return this._selected;
+  }
+
  public focus() {
    this._automationRowElement?.focus();
  }
--- a/src/panels/config/automation/condition/ha-automation-condition.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -6,10 +6,12 @@ import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { listenMediaQuery } from "../../../../common/dom/media_query";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-sortable";
+import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import type {
  AutomationClipboard,
@@ -42,6 +44,8 @@ export default class HaAutomationCondition extends LitElement {
  @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar =
    false;

+  @state() private _showReorder = false;
+
  @state() private _rowSortSelected?: number;

  @state()
@@ -62,6 +66,21 @@ export default class HaAutomationCondition extends LitElement {

  private _conditionKeys = new WeakMap<Condition, string>();

+  private _unsubMql?: () => void;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
+      this._showReorder = matches;
+    });
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unsubMql?.();
+    this._unsubMql = undefined;
+  }
+
  protected updated(changedProperties: PropertyValues) {
    if (!changedProperties.has("conditions")) {
      return;
@@ -146,12 +165,13 @@ export default class HaAutomationCondition extends LitElement {
      <ha-sortable
        handle-selector=".handle"
        draggable-selector="ha-automation-condition-row"
-        .disabled=${this.disabled}
+        .disabled=${!this._showReorder || this.disabled}
        group="conditions"
        invert-swap
        @item-moved=${this._conditionMoved}
        @item-added=${this._conditionAdded}
        @item-removed=${this._conditionRemoved}
+        @item-cloned=${this._conditionCloned}
      >
        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
          ${repeat(
@@ -173,12 +193,12 @@ export default class HaAutomationCondition extends LitElement {
                @move-up=${this._moveUp}
                @value-changed=${this._conditionChanged}
                .hass=${this.hass}
-                .highlight=${this.highlightedConditions?.includes(cond)}
+                ?highlight=${this.highlightedConditions?.includes(cond)}
                .optionsInSidebar=${this.optionsInSidebar}
                .sortSelected=${this._rowSortSelected === idx}
                @stop-sort-selection=${this._stopSortSelection}
              >
-                ${!this.disabled
+                ${this._showReorder && !this.disabled
                  ? html`
                      <div
                        tabindex="0"
@@ -317,8 +337,11 @@ export default class HaAutomationCondition extends LitElement {
  private async _conditionAdded(ev: CustomEvent): Promise<void> {
    ev.stopPropagation();
    const { index, data } = ev.detail;
-    const item = ev.detail.item as HaAutomationConditionRow;
-    const selected = item.selected;
+    let selected = false;
+    if (data?.["ha-automation-row-selected"]) {
+      selected = true;
+      delete data["ha-automation-row-selected"];
+    }
    let conditions = [
      ...this.conditions.slice(0, index),
      data,
@@ -356,6 +379,12 @@ 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];
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -1,6 +1,7 @@
 import { consume } from "@lit/context";
 import {
  mdiCog,
+  mdiContentDuplicate,
  mdiContentSave,
  mdiDebugStepOver,
  mdiDelete,
@@ -10,18 +11,20 @@ import {
  mdiPlay,
  mdiPlayCircleOutline,
  mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
  mdiRenameBox,
  mdiRobotConfused,
  mdiStopCircleOutline,
  mdiTag,
  mdiTransitConnection,
+  mdiUnfoldLessHorizontal,
+  mdiUnfoldMoreHorizontal,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { isArray } from "@tsparticles/engine";
 import { transform } from "../../../common/decorators/transform";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
@@ -41,6 +44,7 @@ import type {
  AutomationConfig,
  AutomationEntity,
  BlueprintAutomationConfig,
+  Condition,
 } from "../../../data/automation";
 import {
  deleteAutomation,
@@ -335,7 +339,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
            )}
            <ha-svg-icon
              slot="graphic"
-              .path=${mdiPlusCircleMultipleOutline}
+              .path=${mdiContentDuplicate}
            ></ha-svg-icon>
          </ha-list-item>

@@ -369,6 +373,30 @@ 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
@@ -1036,8 +1064,28 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
      });
    }

+    // Move conditions at top of action to automation condition key
+    const configToSave = { ...this._config! };
+    configToSave.conditions = !configToSave.conditions
+      ? []
+      : isArray(configToSave.conditions)
+        ? [...configToSave.conditions]
+        : [configToSave.conditions];
+    configToSave.actions = !configToSave.actions
+      ? []
+      : isArray(configToSave.actions)
+        ? [...configToSave.actions]
+        : [configToSave.actions];
+
+    while (
+      configToSave.actions.length > 0 &&
+      "condition" in configToSave.actions[0]
+    ) {
+      configToSave.conditions.push(configToSave.actions.shift() as Condition);
+    }
+
    try {
-      await saveAutomationConfig(this.hass, id, this._config!);
+      await saveAutomationConfig(this.hass, id, configToSave);

      if (this._entityRegistryUpdate !== undefined) {
        let entityId = this._entityId;
@@ -1112,10 +1160,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
  protected supportedShortcuts(): SupportedShortcuts {
    return {
      s: () => this._handleSaveAutomation(),
-      c: () => this._copySelectedRow(),
-      x: () => this._cutSelectedRow(),
-      Delete: () => this._deleteSelectedRow(),
-      Backspace: () => this._deleteSelectedRow(),
    };
  }

@@ -1127,28 +1171,14 @@ 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,
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/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=${narrow ? undefined : this._labelClicked}
+                  @label-clicked=${this._labelClicked}
                  .labels=${automation.labels}
                ></ha-data-table-labels>`
              : nothing,
--- a/src/panels/config/automation/ha-automation-sidebar.ts
+++ b/src/panels/config/automation/ha-automation-sidebar.ts
@@ -1,5 +1,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-bottom-sheet";
 import type { HaBottomSheet } from "../../../components/ha-bottom-sheet";
 import {
@@ -33,8 +34,6 @@ export default class HaAutomationSidebar extends LitElement {

  @property({ type: Boolean }) public narrow = false;

-  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
-
  @state() private _yamlMode = false;

  @query("ha-bottom-sheet") private _bottomSheetElement?: HaBottomSheet;
@@ -53,9 +52,8 @@ export default class HaAutomationSidebar extends LitElement {
          .narrow=${this.narrow}
          .disabled=${this.disabled}
          .yamlMode=${this._yamlMode}
-          .sidebarKey=${this.sidebarKey}
          @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this.triggerCloseSidebar}
+          @close-sidebar=${this._handleCloseSidebar}
        ></ha-automation-sidebar-trigger>
      `;
    }
@@ -69,9 +67,8 @@ export default class HaAutomationSidebar extends LitElement {
          .narrow=${this.narrow}
          .disabled=${this.disabled}
          .yamlMode=${this._yamlMode}
-          .sidebarKey=${this.sidebarKey}
          @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this.triggerCloseSidebar}
+          @close-sidebar=${this._handleCloseSidebar}
        ></ha-automation-sidebar-condition>
      `;
    }
@@ -85,9 +82,8 @@ export default class HaAutomationSidebar extends LitElement {
          .narrow=${this.narrow}
          .disabled=${this.disabled}
          .yamlMode=${this._yamlMode}
-          .sidebarKey=${this.sidebarKey}
          @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this.triggerCloseSidebar}
+          @close-sidebar=${this._handleCloseSidebar}
        ></ha-automation-sidebar-action>
      `;
    }
@@ -100,7 +96,7 @@ export default class HaAutomationSidebar extends LitElement {
          .isWide=${this.isWide}
          .narrow=${this.narrow}
          .disabled=${this.disabled}
-          @close-sidebar=${this.triggerCloseSidebar}
+          @close-sidebar=${this._handleCloseSidebar}
        ></ha-automation-sidebar-option>
      `;
    }
@@ -114,9 +110,8 @@ export default class HaAutomationSidebar extends LitElement {
          .narrow=${this.narrow}
          .disabled=${this.disabled}
          .yamlMode=${this._yamlMode}
-          .sidebarKey=${this.sidebarKey}
          @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this.triggerCloseSidebar}
+          @close-sidebar=${this._handleCloseSidebar}
        ></ha-automation-sidebar-script-field-selector>
      `;
    }
@@ -130,9 +125,8 @@ export default class HaAutomationSidebar extends LitElement {
          .narrow=${this.narrow}
          .disabled=${this.disabled}
          .yamlMode=${this._yamlMode}
-          .sidebarKey=${this.sidebarKey}
          @toggle-yaml-mode=${this._toggleYamlMode}
-          @close-sidebar=${this.triggerCloseSidebar}
+          @close-sidebar=${this._handleCloseSidebar}
        ></ha-automation-sidebar-script-field>
      `;
    }
@@ -188,8 +182,8 @@ export default class HaAutomationSidebar extends LitElement {
    return undefined;
  }

-  public triggerCloseSidebar(ev?: CustomEvent) {
-    ev?.stopPropagation();
+  private _handleCloseSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
    if (this.narrow) {
      this._bottomSheetElement?.closeSheet();
      return;
@@ -203,12 +197,17 @@ export default class HaAutomationSidebar extends LitElement {
  }

  private _toggleYamlMode = () => {
-    (this.config as ActionSidebarConfig)?.toggleYamlMode();
+    this._yamlMode = this.config!.toggleYamlMode();
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.config,
+        yamlMode: this._yamlMode,
+      },
+    });
  };

  static styles = css`
    :host {
-      z-index: 6;
      outline: none;
      height: 100%;
      --ha-card-border-radius: var(
@@ -236,8 +235,5 @@ declare global {

  interface HASSDomEvents {
    "toggle-yaml-mode": undefined;
-    "yaml-changed": {
-      value: unknown;
-    };
  }
 }
--- a/src/panels/config/automation/manual-automation-editor.ts
+++ b/src/panels/config/automation/manual-automation-editor.ts
@@ -3,13 +3,7 @@ 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,
-  queryAll,
-  state,
-} from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import {
  any,
@@ -34,7 +28,6 @@ import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-markdown";
 import type {
-  ActionSidebarConfig,
  AutomationConfig,
  Condition,
  ManualAutomationConfig,
@@ -52,8 +45,6 @@ import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import "./action/ha-automation-action";
 import type HaAutomationAction from "./action/ha-automation-action";
-import "./condition/ha-automation-condition";
-import type HaAutomationCondition from "./condition/ha-automation-condition";
 import "./ha-automation-sidebar";
 import type HaAutomationSidebar from "./ha-automation-sidebar";
 import { showPasteReplaceDialog } from "./paste-replace-dialog/show-dialog-paste-replace";
@@ -99,15 +90,8 @@ export class HaManualAutomationEditor extends LitElement {

  @state() private _sidebarConfig?: SidebarConfig;

-  @state() private _sidebarKey?: string;
-
  @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;

-  @queryAll("ha-automation-action, ha-automation-condition")
-  private _collapsableElements?: NodeListOf<
-    HaAutomationAction | HaAutomationCondition
-  >;
-
  private _previousConfig?: ManualAutomationConfig;

  public connectedCallback() {
@@ -166,59 +150,12 @@ export class HaManualAutomationEditor extends LitElement {
        .disabled=${this.disabled || this.saving}
        .narrow=${this.narrow}
        @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._triggerCloseSidebar}
+        @request-close-sidebar=${this._closeSidebar}
        @close-sidebar=${this._handleCloseSidebar}
        root
        sidebar
      ></ha-automation-trigger>

-      <div class="header">
-        <h2 id="conditions-heading" class="name">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.conditions.header"
-          )}
-          <span class="small"
-            >(${this.hass.localize("ui.common.optional")})</span
-          >
-        </h2>
-        <a
-          href=${documentationUrl(this.hass, "/docs/automation/condition/")}
-          target="_blank"
-          rel="noreferrer"
-        >
-          <ha-icon-button
-            .path=${mdiHelpCircle}
-            .label=${this.hass.localize(
-              "ui.panel.config.automation.editor.conditions.learn_more"
-            )}
-          ></ha-icon-button>
-        </a>
-      </div>
-      ${!ensureArray(this.config.conditions)?.length
-        ? html`<p>
-            ${this.hass.localize(
-              "ui.panel.config.automation.editor.conditions.description",
-              { user: this.hass.user?.name || "Alice" }
-            )}
-          </p>`
-        : nothing}
-
-      <ha-automation-condition
-        role="region"
-        aria-labelledby="conditions-heading"
-        .conditions=${this.config.conditions || []}
-        .highlightedConditions=${this._pastedConfig?.conditions || []}
-        @value-changed=${this._conditionChanged}
-        .hass=${this.hass}
-        .disabled=${this.disabled || this.saving}
-        .narrow=${this.narrow}
-        @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._triggerCloseSidebar}
-        @close-sidebar=${this._handleCloseSidebar}
-        root
-        sidebar
-      ></ha-automation-condition>
-
      <div class="header">
        <h2 id="actions-heading" class="name">
          ${this.hass.localize(
@@ -255,7 +192,7 @@ export class HaManualAutomationEditor extends LitElement {
        .highlightedActions=${this._pastedConfig?.actions || []}
        @value-changed=${this._actionChanged}
        @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._triggerCloseSidebar}
+        @request-close-sidebar=${this._closeSidebar}
        @close-sidebar=${this._handleCloseSidebar}
        .hass=${this.hass}
        .narrow=${this.narrow}
@@ -274,11 +211,7 @@ export class HaManualAutomationEditor extends LitElement {
        })}
      >
        <div class="content-wrapper">
-          <div
-            class="content ${this._sidebarConfig && this.narrow
-              ? "has-bottom-sheet"
-              : ""}"
-          >
+          <div class="content">
            <slot name="alerts"></slot>
            ${this._renderContent()}
          </div>
@@ -305,7 +238,6 @@ export class HaManualAutomationEditor extends LitElement {
            .config=${this._sidebarConfig}
            @value-changed=${this._sidebarConfigChanged}
            .disabled=${this.disabled}
-            .sidebarKey=${this._sidebarKey}
          ></ha-automation-sidebar>
        </div>
      </div>
@@ -333,7 +265,6 @@ export class HaManualAutomationEditor extends LitElement {
    // deselect previous selected row
    this._sidebarConfig?.close?.();
    this._sidebarConfig = ev.detail;
-    this._sidebarKey = JSON.stringify(this._sidebarConfig);

    await this._sidebarElement?.updateComplete;
    this._sidebarElement?.focus();
@@ -351,12 +282,8 @@ export class HaManualAutomationEditor extends LitElement {
    };
  }

-  private _triggerCloseSidebar() {
+  private _closeSidebar() {
    if (this._sidebarConfig) {
-      if (this._sidebarElement) {
-        this._sidebarElement.triggerCloseSidebar();
-        return;
-      }
      this._sidebarConfig?.close();
    }
  }
@@ -393,7 +320,7 @@ export class HaManualAutomationEditor extends LitElement {
  }

  private _saveAutomation() {
-    this._triggerCloseSidebar();
+    this._closeSidebar();
    fireEvent(this, "save-automation");
  }

@@ -498,12 +425,7 @@ export class HaManualAutomationEditor extends LitElement {
    if (normalized) {
      ev.preventDefault();

-      if (
-        this.dirty ||
-        ensureArray(this.config.triggers)?.length ||
-        ensureArray(this.config.conditions)?.length ||
-        ensureArray(this.config.actions)?.length
-      ) {
+      if (this.dirty) {
        const result = await new Promise<boolean>((resolve) => {
          showPasteReplaceDialog(this, {
            domain: "automation",
@@ -612,36 +534,24 @@ export class HaManualAutomationEditor extends LitElement {
    });
  }

+  private _getCollapsableElements() {
+    return this.shadowRoot!.querySelectorAll<HaAutomationAction>(
+      "ha-automation-action"
+    );
+  }
+
  public expandAll() {
-    this._collapsableElements?.forEach((element) => {
+    this._getCollapsableElements().forEach((element) => {
      element.expandAll();
    });
  }

  public collapseAll() {
-    this._collapsableElements?.forEach((element) => {
+    this._getCollapsableElements().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,
--- a/src/panels/config/automation/option/ha-automation-option-row.ts
+++ b/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,10 +86,6 @@ 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;
@@ -171,7 +167,7 @@ export default class HaAutomationOptionRow extends LitElement {
                )}
                <ha-svg-icon
                  slot="start"
-                  .path=${mdiPlusCircleMultipleOutline}
+                  .path=${mdiContentDuplicate}
                ></ha-svg-icon>
              </ha-md-menu-item>

@@ -275,10 +271,9 @@ export default class HaAutomationOptionRow extends LitElement {
              left-chevron
              .collapsed=${this._collapsed}
              .selected=${this._selected}
-              .sortSelected=${this.sortSelected}
              @click=${this._toggleSidebar}
              @toggle-collapsed=${this._toggleCollapse}
-              @delete-row=${this._removeOption}
+              .sortSelected=${this.sortSelected}
              >${this._renderRow()}</ha-automation-row
            >`
          : html`
@@ -381,7 +376,8 @@ export default class HaAutomationOptionRow extends LitElement {
    ev?.stopPropagation();

    if (this._selected) {
-      fireEvent(this, "request-close-sidebar");
+      this._selected = false;
+      fireEvent(this, "close-sidebar");
      return;
    }
    this.openSidebar();
@@ -399,6 +395,7 @@ export default class HaAutomationOptionRow extends LitElement {
      rename: () => {
        this._renameOption();
      },
+      toggleYamlMode: () => false, // no yaml mode for options
      delete: this._removeOption,
      duplicate: this._duplicateOption,
      defaultOption: !!this.defaultActions,
@@ -407,12 +404,12 @@ export default class HaAutomationOptionRow extends LitElement {
    this._collapsed = false;

    if (this.narrow) {
-      window.setTimeout(() => {
+      requestAnimationFrame(() => {
        this.scrollIntoView({
          block: "start",
          behavior: "smooth",
        });
-      }, 180); // duration of transition of added padding for bottom sheet
+      });
    }
  }

@@ -449,6 +446,10 @@ export default class HaAutomationOptionRow extends LitElement {
    this._collapsed = !this._collapsed;
  }

+  public isSelected() {
+    return this._selected;
+  }
+
  public focus() {
    this._automationRowElement?.focus();
  }
--- a/src/panels/config/automation/option/ha-automation-option.ts
+++ b/src/panels/config/automation/option/ha-automation-option.ts
@@ -6,9 +6,11 @@ import { customElement, property, queryAll, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { listenMediaQuery } from "../../../../common/dom/media_query";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-sortable";
+import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import type { AutomationClipboard } from "../../../../data/automation";
 import type { Option } from "../../../../data/script";
@@ -33,6 +35,8 @@ export default class HaAutomationOption extends LitElement {
  @property({ type: Boolean, attribute: "show-default" })
  public showDefaultActions = false;

+  @state() private _showReorder = false;
+
  @state() private _rowSortSelected?: number;

  @state()
@@ -53,17 +57,33 @@ export default class HaAutomationOption extends LitElement {

  private _optionsKeys = new WeakMap<Option, string>();

+  private _unsubMql?: () => void;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
+      this._showReorder = matches;
+    });
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unsubMql?.();
+    this._unsubMql = undefined;
+  }
+
  protected render() {
    return html`
      <ha-sortable
        handle-selector=".handle"
        draggable-selector="ha-automation-option-row"
-        .disabled=${this.disabled}
+        .disabled=${!this._showReorder || this.disabled}
        group="options"
        invert-swap
        @item-moved=${this._optionMoved}
        @item-added=${this._optionAdded}
        @item-removed=${this._optionRemoved}
+        @item-cloned=${this._optionCloned}
      >
        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
          ${repeat(
@@ -87,7 +107,7 @@ export default class HaAutomationOption extends LitElement {
                .sortSelected=${this._rowSortSelected === idx}
                @stop-sort-selection=${this._stopSortSelection}
              >
-                ${!this.disabled
+                ${this._showReorder && !this.disabled
                  ? html`
                      <div
                        tabindex="0"
@@ -239,8 +259,11 @@ export default class HaAutomationOption extends LitElement {
  private async _optionAdded(ev: CustomEvent): Promise<void> {
    ev.stopPropagation();
    const { index, data } = ev.detail;
-    const item = ev.detail.item as HaAutomationOptionRow;
-    const selected = item.selected;
+    let selected = false;
+    if (data?.["ha-automation-row-selected"]) {
+      selected = true;
+      delete data["ha-automation-row-selected"];
+    }

    const options = [
      ...this.options.slice(0, index),
@@ -268,6 +291,12 @@ 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];
@@ -317,7 +346,7 @@ export default class HaAutomationOption extends LitElement {
    automationRowsStyles,
    css`
      :host([root]) .rows {
-        padding-inline-end: 8px;
+        padding-right: 8px;
      }
    `,
  ];
--- a/src/panels/config/automation/paste-replace-dialog/dialog-paste-replace.ts
+++ b/src/panels/config/automation/paste-replace-dialog/dialog-paste-replace.ts
@@ -1,12 +1,11 @@
-import { css, type CSSResultGroup, 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 "../../../../components/ha-yaml-editor";
+import { css, type CSSResultGroup, html, LitElement, nothing } from "lit";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
-import { haStyle, haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { haStyle, haStyleDialog } from "../../../../resources/styles";
+import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../trigger/ha-automation-trigger-row";
 import type { PasteReplaceDialogParams } from "./show-dialog-paste-replace";

@customElement("ha-dialog-paste-replace")
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts
@@ -1,18 +1,16 @@
 import {
-  mdiAppleKeyboardCommand,
  mdiContentCopy,
  mdiContentCut,
+  mdiContentDuplicate,
  mdiDelete,
  mdiPlay,
  mdiPlayCircleOutline,
  mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
  mdiRenameBox,
  mdiStopCircleOutline,
 } from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
@@ -22,7 +20,6 @@ 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";
@@ -44,8 +41,6 @@ export default class HaAutomationSidebarAction extends LitElement {

  @property({ type: Boolean }) public narrow = false;

-  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
-
  @state() private _warnings?: string[];

  @query(".sidebar-editor")
@@ -105,24 +100,18 @@ 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"
@@ -134,85 +123,36 @@ export default class HaAutomationSidebarAction extends LitElement {
        .clickAction=${this.config.duplicate}
        .disabled=${this.disabled}
      >
-        <ha-svg-icon
-          slot="start"
-          .path=${mdiPlusCircleMultipleOutline}
-        ></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.duplicate"
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.duplicate"
+        )}
+        <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
      </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"
@@ -220,16 +160,13 @@ 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"
@@ -237,51 +174,25 @@ 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>`
-        : keyed(
-            this.sidebarKey,
-            html`<ha-automation-action-editor
-              class="sidebar-editor"
-              .hass=${this.hass}
-              .action=${actionConfig}
-              .yamlMode=${this.yamlMode}
-              .uiSupported=${this.config.uiSupported}
-              @value-changed=${this._valueChangedSidebar}
-              @yaml-changed=${this._yamlChangedSidebar}
-              sidebar
-              narrow
-              .disabled=${this.disabled}
-              @ui-mode-not-available=${this._handleUiModeNotAvailable}
-            ></ha-automation-action-editor>`
-          )}
+        : html`<ha-automation-action-editor
+            class="sidebar-editor"
+            .hass=${this.hass}
+            .action=${actionConfig}
+            .yamlMode=${this.yamlMode}
+            .uiSupported=${this.config.uiSupported}
+            @value-changed=${this._valueChangedSidebar}
+            sidebar
+            narrow
+            .disabled=${this.disabled}
+            @ui-mode-not-available=${this._handleUiModeNotAvailable}
+          ></ha-automation-action-editor>`}
    </ha-automation-sidebar-card>`;
  }

@@ -309,12 +220,6 @@ export default class HaAutomationSidebarAction extends LitElement {
    }
  }

-  private _yamlChangedSidebar(ev: CustomEvent) {
-    ev.stopPropagation();
-
-    this.config?.save?.(ev.detail.value);
-  }
-
  private _toggleYamlMode = () => {
    fireEvent(this, "toggle-yaml-mode");
  };
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts
@@ -1,6 +1,4 @@
-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,
@@ -45,22 +43,7 @@ export default class HaAutomationSidebarCard extends LitElement {

  @state() private _contentScrolled = false;

-  @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);
-  }
+  @query(".card-content") private _contentElement?: HTMLDivElement;

  protected render() {
    return html`
@@ -111,29 +94,14 @@ 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(ev) {
-    const top = ev.target.scrollTop ?? 0;
+  private _onScroll() {
+    const top = this._contentElement?.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() {
@@ -157,7 +125,6 @@ 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);
@@ -171,6 +138,7 @@ 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,
@@ -179,28 +147,12 @@ export default class HaAutomationSidebarCard extends LitElement {
    }

    ha-dialog-header.scrolled {
-      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);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }

    .card-content {
      max-height: calc(100% - 80px);
      overflow: auto;
-      margin-top: 0;
    }

    @media (min-width: 450px) and (min-height: 500px) {
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts
@@ -1,30 +1,21 @@
 import {
-  mdiAppleKeyboardCommand,
  mdiContentCopy,
  mdiContentCut,
+  mdiContentDuplicate,
  mdiDelete,
  mdiFlask,
  mdiPlayCircleOutline,
  mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
  mdiRenameBox,
  mdiStopCircleOutline,
 } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement } 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 {
-  testCondition,
-  type ConditionSidebarConfig,
-} from "../../../../data/automation";
+import 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";
@@ -44,14 +35,8 @@ export default class HaAutomationSidebarCondition extends LitElement {

  @property({ type: Boolean }) public narrow = false;

-  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
-
  @state() private _warnings?: string[];

-  @state() private _testing = false;
-
-  @state() private _testingResult?: boolean;
-
  @query(".sidebar-editor")
  public editor?: HaAutomationConditionEditor;

@@ -65,10 +50,6 @@ export default class HaAutomationSidebarCondition extends LitElement {
        }
      }
    }
-    // Reset testing state when condition changes
-    if (changedProperties.has("sidebarKey")) {
-      this._testing = false;
-    }
  }

  protected render() {
@@ -104,27 +85,21 @@ 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._testCondition}>
+      <ha-md-menu-item slot="menu-items" .clickAction=${this.config.test}>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.conditions.test"
+        )}
        <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
@@ -138,16 +113,10 @@ export default class HaAutomationSidebarCondition extends LitElement {
        .clickAction=${this.config.duplicate}
        .disabled=${this.disabled}
      >
-        <ha-svg-icon
-          slot="start"
-          .path=${mdiPlusCircleMultipleOutline}
-        ></ha-svg-icon>
-        <div class="overflow-label">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.actions.duplicate"
-          )}
-          <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
-        </div>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.duplicate"
+        )}
+        <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
      </ha-md-menu-item>

      <ha-md-menu-item
@@ -155,28 +124,8 @@ 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
@@ -184,41 +133,18 @@ 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"
@@ -226,16 +152,13 @@ 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"
@@ -243,128 +166,27 @@ 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>`
-        : keyed(
-            this.sidebarKey,
-            html`<ha-automation-condition-editor
-              class="sidebar-editor"
-              .hass=${this.hass}
-              .condition=${this.config.config}
-              .yamlMode=${this.yamlMode}
-              .uiSupported=${this.config.uiSupported}
-              @value-changed=${this._valueChangedSidebar}
-              @yaml-changed=${this._yamlChangedSidebar}
-              .disabled=${this.disabled}
-              @ui-mode-not-available=${this._handleUiModeNotAvailable}
-              sidebar
-            ></ha-automation-condition-editor>`
-          )}
-      <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>
+        : html`<ha-automation-condition-editor
+            class="sidebar-editor"
+            .hass=${this.hass}
+            .condition=${this.config.config}
+            .yamlMode=${this.yamlMode}
+            .uiSupported=${this.config.uiSupported}
+            @value-changed=${this._valueChangedSidebar}
+            .disabled=${this.disabled}
+            @ui-mode-not-available=${this._handleUiModeNotAvailable}
+            sidebar
+          ></ha-automation-condition-editor> `}
    </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) {
@@ -387,67 +209,11 @@ export default class HaAutomationSidebarCondition extends LitElement {
    }
  }

-  private _yamlChangedSidebar(ev: CustomEvent) {
-    ev.stopPropagation();
-
-    this.config?.save?.(ev.detail.value);
-  }
-
  private _toggleYamlMode = () => {
    fireEvent(this, "toggle-yaml-mode");
  };

-  static styles = [
-    sidebarEditorStyles,
-    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);
-      }
-    `,
-  ];
+  static styles = sidebarEditorStyles;
 }

 declare global {
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts
@@ -1,14 +1,8 @@
-import {
-  mdiAppleKeyboardCommand,
-  mdiDelete,
-  mdiPlusCircleMultipleOutline,
-  mdiRenameBox,
-} from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { mdiContentDuplicate, mdiDelete, mdiRenameBox } from "@mdi/js";
+import { html, LitElement } 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";
@@ -58,13 +52,10 @@ 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
@@ -72,16 +63,13 @@ 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=${mdiPlusCircleMultipleOutline}
+                .path=${mdiContentDuplicate}
              ></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"
@@ -94,32 +82,10 @@ 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>
          `}

--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field-selector.ts
@@ -1,12 +1,10 @@
-import { mdiAppleKeyboardCommand, mdiDelete, mdiPlaylistEdit } from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
+import { html, LitElement } 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";
@@ -26,8 +24,6 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {

  @property({ type: Boolean }) public narrow = false;

-  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
-
  @state() private _warnings?: string[];

  @query(".sidebar-editor")
@@ -69,13 +65,10 @@ 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"
@@ -83,45 +76,19 @@ 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,
-        html`<ha-script-field-selector-editor
-          class="sidebar-editor"
-          .hass=${this.hass}
-          .field=${this.config.config.field}
-          .disabled=${this.disabled}
-          @value-changed=${this._valueChangedSidebar}
-          @yaml-changed=${this._yamlChangedSidebar}
-          .yamlMode=${this.yamlMode}
-        ></ha-script-field-selector-editor>`
-      )}
+      <ha-script-field-selector-editor
+        class="sidebar-editor"
+        .hass=${this.hass}
+        .field=${this.config.config.field}
+        .disabled=${this.disabled}
+        @value-changed=${this._valueChangedSidebar}
+        .yamlMode=${this.yamlMode}
+      ></ha-script-field-selector-editor>
    </ha-automation-sidebar-card>`;
  }

@@ -149,12 +116,6 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
    }
  }

-  private _yamlChangedSidebar(ev: CustomEvent) {
-    ev.stopPropagation();
-
-    this.config?.save?.(ev.detail.value);
-  }
-
  private _toggleYamlMode = () => {
    fireEvent(this, "toggle-yaml-mode");
  };
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts
@@ -1,11 +1,9 @@
-import { mdiAppleKeyboardCommand, mdiDelete, mdiPlaylistEdit } from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
+import { html, LitElement } 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";
@@ -25,8 +23,6 @@ export default class HaAutomationSidebarScriptField extends LitElement {

  @property({ type: Boolean }) public narrow = false;

-  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
-
  @state() private _warnings?: string[];

  @query(".sidebar-editor")
@@ -62,13 +58,10 @@ 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"
@@ -76,47 +69,21 @@ 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,
-        html`<ha-script-field-editor
-          class="sidebar-editor"
-          .hass=${this.hass}
-          .field=${this.config.config.field}
-          .key=${this.config.config.key}
-          .excludeKeys=${this.config.config.excludeKeys}
-          .disabled=${this.disabled}
-          .yamlMode=${this.yamlMode}
-          @value-changed=${this._valueChangedSidebar}
-          @yaml-changed=${this._yamlChangedSidebar}
-        ></ha-script-field-editor>`
-      )}
+      <ha-script-field-editor
+        class="sidebar-editor"
+        .hass=${this.hass}
+        .field=${this.config.config.field}
+        .key=${this.config.config.key}
+        .excludeKeys=${this.config.config.excludeKeys}
+        .disabled=${this.disabled}
+        .yamlMode=${this.yamlMode}
+        @value-changed=${this._valueChangedSidebar}
+      ></ha-script-field-editor>
    </ha-automation-sidebar-card>`;
  }

@@ -143,12 +110,6 @@ export default class HaAutomationSidebarScriptField extends LitElement {
    }
  }

-  private _yamlChangedSidebar(ev: CustomEvent) {
-    ev.stopPropagation();
-
-    this.config?.save?.(ev.detail.value);
-  }
-
  private _toggleYamlMode = () => {
    fireEvent(this, "toggle-yaml-mode");
  };
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts
@@ -1,24 +1,21 @@
 import {
-  mdiAppleKeyboardCommand,
  mdiContentCopy,
  mdiContentCut,
+  mdiContentDuplicate,
  mdiDelete,
  mdiIdentifier,
  mdiPlayCircleOutline,
  mdiPlaylistEdit,
-  mdiPlusCircleMultipleOutline,
  mdiRenameBox,
  mdiStopCircleOutline,
 } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { keyed } from "lit/directives/keyed";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { TriggerSidebarConfig } from "../../../../data/automation";
 import { isTriggerList } from "../../../../data/trigger";
 import type { HomeAssistant } from "../../../../types";
-import { isMac } from "../../../../util/is_mac";
 import { sidebarEditorStyles } from "../styles";
 import "../trigger/ha-automation-trigger-editor";
 import type HaAutomationTriggerEditor from "../trigger/ha-automation-trigger-editor";
@@ -38,8 +35,6 @@ export default class HaAutomationSidebarTrigger extends LitElement {

  @property({ type: Boolean }) public narrow = false;

-  @property({ attribute: "sidebar-key" }) public sidebarKey?: string;
-
  @state() private _requestShowId = false;

  @state() private _warnings?: string[];
@@ -91,13 +86,10 @@ 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) &&
@@ -107,13 +99,10 @@ 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}

@@ -131,10 +120,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
          ${this.hass.localize(
            "ui.panel.config.automation.editor.triggers.duplicate"
          )}
-          <ha-svg-icon
-            slot="start"
-            .path=${mdiPlusCircleMultipleOutline}
-          ></ha-svg-icon>
+          <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
        </ha-md-menu-item>

        <ha-md-menu-item
@@ -142,28 +128,10 @@ 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
@@ -171,41 +139,20 @@ 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"
@@ -217,16 +164,13 @@ 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"
@@ -234,49 +178,23 @@ 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,
-          html`<ha-automation-trigger-editor
-            class="sidebar-editor"
-            .hass=${this.hass}
-            .trigger=${this.config.config}
-            @value-changed=${this._valueChangedSidebar}
-            @yaml-changed=${this._yamlChangedSidebar}
-            .uiSupported=${this.config.uiSupported}
-            .showId=${this._requestShowId}
-            .yamlMode=${this.yamlMode}
-            .disabled=${this.disabled}
-            @ui-mode-not-available=${this._handleUiModeNotAvailable}
-            sidebar
-          ></ha-automation-trigger-editor>`
-        )}
+        <ha-automation-trigger-editor
+          class="sidebar-editor"
+          .hass=${this.hass}
+          .trigger=${this.config.config}
+          @value-changed=${this._valueChangedSidebar}
+          .uiSupported=${this.config.uiSupported}
+          .showId=${this._requestShowId}
+          .yamlMode=${this.yamlMode}
+          .disabled=${this.disabled}
+          @ui-mode-not-available=${this._handleUiModeNotAvailable}
+          sidebar
+        ></ha-automation-trigger-editor>
      </ha-automation-sidebar-card>
    `;
  }
@@ -303,12 +221,6 @@ export default class HaAutomationSidebarTrigger extends LitElement {
    }
  }

-  private _yamlChangedSidebar(ev: CustomEvent) {
-    ev.stopPropagation();
-
-    this.config?.save?.(ev.detail.value);
-  }
-
  private _toggleYamlMode = () => {
    fireEvent(this, "toggle-yaml-mode");
  };
--- a/src/panels/config/automation/styles.ts
+++ b/src/panels/config/automation/styles.ts
@@ -37,6 +37,12 @@ export const rowStyles = css`
  ha-tooltip {
    cursor: default;
  }
+  :host([highlight]) ha-card {
+    --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
+    --shadow-focus: 0 0 0 1px var(--state-inactive-color);
+    border-color: var(--state-inactive-color);
+    box-shadow: var(--shadow-default), var(--shadow-focus);
+  }
  .hidden {
    display: none;
  }
@@ -62,15 +68,12 @@ export const indentStyle = css`
  .card-content.indent,
  .selector-row,
  :host([indent]) ha-form {
-    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);
+    margin-left: 12px;
+    padding: 12px 0 16px 16px;
+    border-left: 2px solid var(--ha-color-border-neutral-quiet);
    border-bottom: 2px solid var(--ha-color-border-neutral-quiet);
    border-radius: 0;
-    border-end-start-radius: var(--ha-border-radius-lg);
+    border-bottom-left-radius: var(--ha-border-radius-lg);
  }
  .card-content.indent.selected,
  :host([selected]) .card-content.indent,
@@ -139,11 +142,6 @@ 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 {
@@ -178,7 +176,7 @@ export const automationRowsStyles = css`
    gap: 16px;
  }
  .rows.no-sidebar {
-    margin-inline-end: 0;
+    margin-right: 0;
  }
  .sortable-ghost {
    background: none;
@@ -192,7 +190,8 @@ export const automationRowsStyles = css`
    scroll-margin-top: 48px;
  }
  .handle {
-    padding: 4px;
+    margin: 4px;
+    padding: 8px;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    border-radius: var(--ha-border-radius-pill);
@@ -220,39 +219,9 @@ export const automationRowsStyles = css`
 export const sidebarEditorStyles = css`
  .sidebar-editor {
    display: block;
-    padding-top: 8px;
+    padding-top: 16px;
  }
  .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;
-    }
-  }
 `;
--- a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts
@@ -121,7 +121,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
    if (!ev.detail.isValid) {
      return;
    }
-    fireEvent(this, "yaml-changed", {
+    fireEvent(this, "value-changed", {
      value: migrateAutomationTrigger(ev.detail.value),
    });
  }
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/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,7 +52,6 @@ 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";
@@ -114,8 +113,6 @@ export default class HaAutomationTriggerRow extends LitElement {

  @property({ type: Boolean }) public last?: boolean;

-  @property({ type: Boolean }) public highlight?: boolean;
-
  @property({ type: Boolean, attribute: "sidebar" })
  public optionsInSidebar = false;

@@ -154,10 +151,6 @@ export default class HaAutomationTriggerRow extends LitElement {
  @consume({ context: fullEntitiesContext, subscribe: true })
  _entityReg!: EntityRegistryEntry[];

-  get selected() {
-    return this._selected;
-  }
-
  private _triggerUnsub?: Promise<UnsubscribeFunc>;

  private _renderRow() {
@@ -226,7 +219,7 @@ export default class HaAutomationTriggerRow extends LitElement {
              )}
              <ha-svg-icon
                slot="start"
-                .path=${mdiPlusCircleMultipleOutline}
+                .path=${mdiContentDuplicate}
              ></ha-svg-icon>
            </ha-md-menu-item>

@@ -354,13 +347,9 @@ export default class HaAutomationTriggerRow extends LitElement {
          ? html`<ha-automation-row
              .disabled=${"enabled" in this.trigger &&
              this.trigger.enabled === false}
-              .selected=${this._selected}
-              .highlight=${this.highlight}
-              .sortSelected=${this.sortSelected}
              @click=${this._toggleSidebar}
-              @copy-row=${this._copyTrigger}
-              @cut-row=${this._cutTrigger}
-              @delete-row=${this._onDelete}
+              .selected=${this._selected}
+              .sortSelected=${this.sortSelected}
              >${this._selected
                ? "selected"
                : nothing}${this._renderRow()}</ha-automation-row
@@ -481,7 +470,8 @@ export default class HaAutomationTriggerRow extends LitElement {
    ev?.stopPropagation();

    if (this._selected) {
-      fireEvent(this, "request-close-sidebar");
+      this._selected = false;
+      fireEvent(this, "close-sidebar");
      return;
    }
    this.openSidebar();
@@ -504,7 +494,7 @@ export default class HaAutomationTriggerRow extends LitElement {
      },
      toggleYamlMode: () => {
        this._toggleYamlMode();
-        this.openSidebar();
+        return this._yamlMode;
      },
      disable: this._onDisable,
      delete: this._onDelete,
@@ -518,12 +508,12 @@ export default class HaAutomationTriggerRow extends LitElement {
    this._selected = true;

    if (this.narrow) {
-      window.setTimeout(() => {
+      requestAnimationFrame(() => {
        this.scrollIntoView({
          block: "start",
          behavior: "smooth",
        });
-      }, 180);
+      });
    }
  }

@@ -641,12 +631,6 @@ 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 = () => {
@@ -655,12 +639,6 @@ 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 = () => {
@@ -698,6 +676,10 @@ export default class HaAutomationTriggerRow extends LitElement {
      customElements.get(`ha-automation-trigger-${type}`) !== undefined
  );

+  public isSelected() {
+    return this._selected;
+  }
+
  public focus() {
    this._automationRowElement?.focus();
  }
--- a/src/panels/config/automation/trigger/ha-automation-trigger.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts
@@ -6,10 +6,12 @@ import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { listenMediaQuery } from "../../../../common/dom/media_query";
 import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-sortable";
+import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import type {
  AutomationClipboard,
@@ -43,6 +45,8 @@ export default class HaAutomationTrigger extends LitElement {

  @property({ type: Boolean }) public root = false;

+  @state() private _showReorder = false;
+
  @state() private _rowSortSelected?: number;

  @state()
@@ -60,17 +64,33 @@ export default class HaAutomationTrigger extends LitElement {

  private _triggerKeys = new WeakMap<Trigger, string>();

+  private _unsubMql?: () => void;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
+      this._showReorder = matches;
+    });
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unsubMql?.();
+    this._unsubMql = undefined;
+  }
+
  protected render() {
    return html`
      <ha-sortable
        handle-selector=".handle"
        draggable-selector="ha-automation-trigger-row"
-        .disabled=${this.disabled}
+        .disabled=${!this._showReorder || this.disabled}
        group="triggers"
        invert-swap
        @item-moved=${this._triggerMoved}
        @item-added=${this._triggerAdded}
        @item-removed=${this._triggerRemoved}
+        @item-cloned=${this._triggerCloned}
      >
        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
          ${repeat(
@@ -90,12 +110,12 @@ export default class HaAutomationTrigger extends LitElement {
                .hass=${this.hass}
                .disabled=${this.disabled}
                .narrow=${this.narrow}
-                .highlight=${this.highlightedTriggers?.includes(trg)}
+                ?highlight=${this.highlightedTriggers?.includes(trg)}
                .optionsInSidebar=${this.optionsInSidebar}
                .sortSelected=${this._rowSortSelected === idx}
                @stop-sort-selection=${this._stopSortSelection}
              >
-                ${!this.disabled
+                ${this._showReorder && !this.disabled
                  ? html`
                      <div
                        tabindex="0"
@@ -258,8 +278,11 @@ export default class HaAutomationTrigger extends LitElement {
  private async _triggerAdded(ev: CustomEvent): Promise<void> {
    ev.stopPropagation();
    const { index, data } = ev.detail;
-    const item = ev.detail.item as HaAutomationTriggerRow;
-    const selected = item.selected;
+    let selected = false;
+    if (data?.["ha-automation-row-selected"]) {
+      selected = true;
+      delete data["ha-automation-row-selected"];
+    }

    let triggers = [
      ...this.triggers.slice(0, index),
@@ -298,6 +321,12 @@ 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];
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts
@@ -42,8 +42,6 @@ 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`
--- a/src/panels/config/core/ai-task-pref.ts
+++ b/src/panels/config/core/ai-task-pref.ts
@@ -1,6 +1,5 @@
 import { mdiHelpCircle, mdiStarFourPoints } from "@mdi/js";
 import { css, html, LitElement } from "lit";
-import type { HassEntity } from "home-assistant-js-websocket";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import type { HaProgressButton } from "../../../components/buttons/ha-progress-button";
@@ -9,7 +8,6 @@ import type { HaEntityPicker } from "../../../components/entity/ha-entity-picker
 import "../../../components/ha-card";
 import "../../../components/ha-settings-row";
 import {
-  AITaskEntityFeature,
  fetchAITaskPreferences,
  saveAITaskPreferences,
  type AITaskPreferences,
@@ -17,15 +15,6 @@ import {
 import type { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
 import { documentationUrl } from "../../../util/documentation-url";
-import { computeDomain } from "../../../common/entity/compute_domain";
-import { supportsFeature } from "../../../common/entity/supports-feature";
-
-const filterGenData = (entity: HassEntity) =>
-  computeDomain(entity.entity_id) === "ai_task" &&
-  supportsFeature(entity, AITaskEntityFeature.GENERATE_DATA);
-const filterGenImage = (entity: HassEntity) =>
-  computeDomain(entity.entity_id) === "ai_task" &&
-  supportsFeature(entity, AITaskEntityFeature.GENERATE_IMAGE);

@customElement("ai-task-pref")
 export class AITaskPref extends LitElement {
@@ -37,8 +26,6 @@ export class AITaskPref extends LitElement {

  private _gen_data_entity_id?: string | null;

-  private _gen_image_entity_id?: string | null;
-
  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    if (!this.hass || !isComponentLoaded(this.hass, "ai_task")) {
@@ -103,27 +90,7 @@ export class AITaskPref extends LitElement {
              isComponentLoaded(this.hass, "ai_task")}
              .value=${this._gen_data_entity_id ||
              this._prefs?.gen_data_entity_id}
-              .entityFilter=${filterGenData}
-              @value-changed=${this._handlePrefChange}
-            ></ha-entity-picker>
-          </ha-settings-row>
-          <ha-settings-row .narrow=${this.narrow}>
-            <span slot="heading">
-              ${this.hass!.localize("ui.panel.config.ai_task.gen_image_header")}
-            </span>
-            <span slot="description">
-              ${this.hass!.localize(
-                "ui.panel.config.ai_task.gen_image_description"
-              )}
-            </span>
-            <ha-entity-picker
-              data-name="gen_image_entity_id"
-              .hass=${this.hass}
-              .disabled=${this._prefs === undefined &&
-              isComponentLoaded(this.hass, "ai_task")}
-              .value=${this._gen_image_entity_id ||
-              this._prefs?.gen_image_entity_id}
-              .entityFilter=${filterGenImage}
+              .includeDomains=${["ai_task"]}
              @value-changed=${this._handlePrefChange}
            ></ha-entity-picker>
          </ha-settings-row>
@@ -154,7 +121,6 @@ export class AITaskPref extends LitElement {
    const oldPrefs = this._prefs;
    const update: Partial<AITaskPreferences> = {
      gen_data_entity_id: this._gen_data_entity_id,
-      gen_image_entity_id: this._gen_image_entity_id,
    };
    this._prefs = { ...this._prefs!, ...update };
    try {
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
@@ -239,8 +239,12 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
        }
        @media all and (max-width: 450px), all and (max-height: 500px) {
          ha-dialog {
-            --mdc-dialog-min-width: 100vw;
-            --mdc-dialog-max-width: 100vw;
+            --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)
+            );
          }
        }
        ha-switch {
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -773,11 +773,6 @@ 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}
                      >
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/src/panels/config/devices/ha-config-devices-dashboard.ts
@@ -6,14 +6,13 @@ import {
  mdiPlus,
  mdiTextureBox,
  mdiCancel,
-  mdiDelete,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";

 import { ResizeController } from "@lit-labs/observers/resize-controller";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeCssColor } from "../../../common/color/compute-color";
 import { formatShortDateTime } from "../../../common/datetime/format_date_time";
@@ -38,7 +37,6 @@ import type {
  SelectionChangedEvent,
  SortingChangedEvent,
 } from "../../../components/data-table/ha-data-table";
-
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-alert";
@@ -67,10 +65,7 @@ import type {
  DeviceEntityLookup,
  DeviceRegistryEntry,
 } from "../../../data/device_registry";
-import {
-  updateDeviceRegistryEntry,
-  removeConfigEntryFromDevice,
-} from "../../../data/device_registry";
+import { updateDeviceRegistryEntry } from "../../../data/device_registry";
 import type { EntityRegistryEntry } from "../../../data/entity_registry";
 import {
  findBatteryChargingEntity,
@@ -82,11 +77,7 @@ import {
  createLabelRegistryEntry,
  subscribeLabelRegistry,
 } from "../../../data/label_registry";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../dialogs/generic/show-dialog-box";
-import type { HaTabsSubpageDataTable } from "../../../layouts/hass-tabs-subpage-data-table";
+import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
@@ -130,11 +121,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {

  @state() private _selected: string[] = [];

-  private _selectedCanDelete: string[] = [];
-
-  @query("hass-tabs-subpage-data-table", true)
-  private _dataTable!: HaTabsSubpageDataTable;
-
  @state()
  @storage({
    storage: "sessionStorage",
@@ -231,17 +217,6 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
    if (!this.hasUpdated) {
      this._setFiltersFromUrl();
    }
-    if (changedProps.has("_selected")) {
-      this._selectedCanDelete = this._selected.filter((d) => {
-        const device = this.hass.devices[d];
-        const entries = device.config_entries;
-        return entries.some(
-          (entryId) =>
-            this.entries.find((e) => e.entry_id === entryId)
-              ?.supports_remove_device
-        );
-      });
-    }
  }

  private _setFiltersFromUrl() {
@@ -934,32 +909,48 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                    ${areaItems}
                  </ha-md-button-menu>`}`
          : nothing}
-        <ha-md-button-menu has-overflow slot="selection-bar">
-          ${this.narrow
-            ? html`<ha-assist-chip
-                .label=${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_action"
-                )}
-                slot="trigger"
-              >
-                <ha-svg-icon
-                  slot="trailing-icon"
-                  .path=${mdiMenuDown}
-                ></ha-svg-icon>
-              </ha-assist-chip>`
-            : html`<ha-icon-button
-                .path=${mdiDotsVertical}
-                .label=${this.hass.localize(
-                  "ui.panel.config.automation.picker.bulk_action"
-                )}
-                slot="trigger"
-              ></ha-icon-button>`}
-          ${this.narrow
-            ? html` <ha-sub-menu>
+        ${this.narrow || areasInOverflow
+          ? html`<ha-md-button-menu has-overflow slot="selection-bar">
+              ${this.narrow
+                ? html`<ha-assist-chip
+                    .label=${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_action"
+                    )}
+                    slot="trigger"
+                  >
+                    <ha-svg-icon
+                      slot="trailing-icon"
+                      .path=${mdiMenuDown}
+                    ></ha-svg-icon>
+                  </ha-assist-chip>`
+                : html`<ha-icon-button
+                    .path=${mdiDotsVertical}
+                    .label=${this.hass.localize(
+                      "ui.panel.config.automation.picker.bulk_action"
+                    )}
+                    slot="trigger"
+                  ></ha-icon-button>`}
+              ${this.narrow
+                ? html` <ha-sub-menu>
+                    <ha-md-menu-item slot="item">
+                      <div slot="headline">
+                        ${this.hass.localize(
+                          "ui.panel.config.automation.picker.bulk_actions.add_label"
+                        )}
+                      </div>
+                      <ha-svg-icon
+                        slot="end"
+                        .path=${mdiChevronRight}
+                      ></ha-svg-icon>
+                    </ha-md-menu-item>
+                    <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
+                  </ha-sub-menu>`
+                : nothing}
+              <ha-sub-menu>
                <ha-md-menu-item slot="item">
                  <div slot="headline">
                    ${this.hass.localize(
-                      "ui.panel.config.automation.picker.bulk_actions.add_label"
+                      "ui.panel.config.devices.picker.bulk_actions.move_area"
                    )}
                  </div>
                  <ha-svg-icon
@@ -967,39 +958,10 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
                    .path=${mdiChevronRight}
                  ></ha-svg-icon>
                </ha-md-menu-item>
-                <ha-md-menu slot="menu">${labelItems}</ha-md-menu>
-              </ha-sub-menu>`
-            : nothing}
-          ${areasInOverflow
-            ? html`<ha-sub-menu>
-                  <ha-md-menu-item slot="item">
-                    <div slot="headline">
-                      ${this.hass.localize(
-                        "ui.panel.config.devices.picker.bulk_actions.move_area"
-                      )}
-                    </div>
-                    <ha-svg-icon
-                      slot="end"
-                      .path=${mdiChevronRight}
-                    ></ha-svg-icon>
-                  </ha-md-menu-item>
-                  <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
-                </ha-sub-menu>
-                <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
-            : nothing}
-          <ha-md-menu-item
-            .clickAction=${this._deleteSelected}
-            .disabled=${!this._selectedCanDelete.length}
-            class="warning"
-          >
-            <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-            <div slot="headline">
-              ${this.hass.localize(
-                "ui.panel.config.devices.picker.bulk_actions.delete_selected.button"
-              )}
-            </div>
-          </ha-md-menu-item>
-        </ha-md-button-menu>
+                <ha-md-menu slot="menu">${areaItems}</ha-md-menu>
+              </ha-sub-menu>
+            </ha-md-button-menu>`
+          : nothing}
      </hass-tabs-subpage-data-table>
    `;
  }
@@ -1174,61 +1136,6 @@ ${rejected
    });
  };

-  private _deleteSelected = () => {
-    showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.panel.config.devices.picker.bulk_actions.delete_selected.confirm_title"
-      ),
-      text:
-        this._selectedCanDelete.length === this._selected.length
-          ? this.hass.localize(
-              "ui.panel.config.devices.picker.bulk_actions.delete_selected.confirm_text"
-            )
-          : this.hass.localize(
-              "ui.panel.config.devices.picker.bulk_actions.delete_selected.confirm_partly_text",
-              {
-                deletable: this._selectedCanDelete.length,
-                selected: this._selected.length,
-              }
-            ),
-      confirmText: this.hass.localize("ui.common.delete"),
-      dismissText: this.hass.localize("ui.common.cancel"),
-      destructive: true,
-      confirm: async () => {
-        const proms: Promise<DeviceRegistryEntry>[] = [];
-        this._selectedCanDelete.forEach((deviceId) => {
-          const entries = this.hass!.devices[deviceId]?.config_entries;
-          entries.forEach((entryId) => {
-            if (
-              this.entries.find((entry) => entry.entry_id === entryId)
-                ?.supports_remove_device
-            ) {
-              proms.push(
-                removeConfigEntryFromDevice(this.hass!, deviceId, entryId)
-              );
-            }
-          });
-        });
-        const results = await Promise.allSettled(proms);
-        if (hasRejectedItems(results)) {
-          showAlertDialog(this, {
-            text: this.hass.localize(
-              "ui.panel.config.devices.picker.bulk_actions.delete_selected.partial_failure"
-            ),
-            title: this.hass.localize(
-              "ui.panel.config.devices.picker.bulk_actions.delete_selected.partial_failure_title"
-            ),
-          });
-        }
-        this._clearSelection();
-      },
-    });
-  };
-
-  private _clearSelection() {
-    this._dataTable.clearSelection();
-  }
-
  private _handleSortingChanged(ev: CustomEvent) {
    this._activeSorting = ev.detail;
  }
--- a/src/panels/config/helpers/dialog-helper-detail.ts
+++ b/src/panels/config/helpers/dialog-helper-detail.ts
@@ -430,13 +430,7 @@ export class DialogHelperDetail extends LitElement {
        }
        @media all and (max-width: 450px), all and (max-height: 500px) {
          ha-list {
-            height: calc(
-              100vh -
-                184px - var(--safe-area-inset-top, 0px) - var(
-                  --safe-area-inset-bottom,
-                  0px
-                )
-            );
+            height: calc(100vh - 184px);
          }
        }
      `,
--- a/src/panels/config/integrations/dialog-add-integration.ts
+++ b/src/panels/config/integrations/dialog-add-integration.ts
@@ -461,9 +461,7 @@ class AddIntegrationDialog extends LitElement {
              class="ha-scrollbar"
              style=${styleMap({
                width: `${this._width}px`,
-                height: this._narrow
-                  ? "calc(100vh - 184px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))"
-                  : "500px",
+                height: this._narrow ? "calc(100vh - 184px)" : "500px",
              })}
              @click=${this._integrationPicked}
              @keypress=${this._handleKeyPress}
--- a/src/panels/config/integrations/integration-panels/bluetooth/bluetooth-config-dashboard.ts
+++ b/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, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-code-editor";
@@ -11,22 +11,13 @@ import { showOptionsFlowDialog } from "../../../../../dialogs/config-flow/show-d
 import "../../../../../layouts/hass-subpage";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
-import {
-  subscribeBluetoothConnectionAllocations,
-  subscribeBluetoothScannerState,
-  subscribeBluetoothScannersDetails,
-} from "../../../../../data/bluetooth";
-import type {
-  BluetoothAllocationsData,
-  BluetoothScannerState,
-  BluetoothScannersDetails,
-  HaScannerType,
-} from "../../../../../data/bluetooth";
+import { subscribeBluetoothConnectionAllocations } 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 {
@@ -38,26 +29,16 @@ 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();
    }
  }

@@ -80,45 +61,12 @@ 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 {
@@ -130,7 +78,6 @@ 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(
@@ -195,118 +142,6 @@ 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"
@@ -385,18 +220,6 @@ 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;
-        }
      `,
    ];
  }
--- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-added-insecure.ts
+++ b/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 { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import "@awesome.me/webawesome/dist/components/animation/animation";
+import { css, html, LitElement } from "lit";
 import type { HomeAssistant } from "../../../../../../types";

-import "../../../../../../components/ha-alert";
 import "../../../../../../components/ha-svg-icon";
+import "../../../../../../components/ha-alert";

@customElement("zwave-js-add-node-added-insecure")
 export class ZWaveJsAddNodeFinished extends LitElement {
--- a/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/add-node/zwave-js-add-node-searching-devices.ts
@@ -1,15 +1,15 @@
-import "@home-assistant/webawesome/dist/components/animation/animation";
+import "@awesome.me/webawesome/dist/components/animation/animation";
 import { mdiRestart } from "@mdi/js";

-import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { css, html, LitElement, nothing } from "lit";
+import type { HomeAssistant } from "../../../../../../types";
 import { fireEvent } from "../../../../../../common/dom/fire_event";
 import { InclusionStrategy } from "../../../../../../data/zwave_js";
-import type { HomeAssistant } from "../../../../../../types";

-import "../../../../../../components/ha-alert";
-import "../../../../../../components/ha-button";
 import "../../../../../../components/ha-spinner";
+import "../../../../../../components/ha-button";
+import "../../../../../../components/ha-alert";
 import { WakeLockMixin } from "../../../../../../mixins/wakelock-mixin";

@customElement("zwave-js-add-node-searching-devices")
--- a/src/panels/config/logs/error-log-card.ts
+++ b/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._handleRefresh}
+                    @click=${this._loadLogs}
                    .label=${localize("ui.common.refresh")}
                  ></ha-icon-button>`
                : nothing}
@@ -715,10 +715,6 @@ 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") {
--- a/src/panels/config/repairs/show-dialog-repair-flow.ts
+++ b/src/panels/config/repairs/show-dialog-repair-flow.ts
@@ -289,15 +289,6 @@ 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(
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -1,6 +1,7 @@
 import { consume } from "@lit/context";
 import {
  mdiCog,
+  mdiContentDuplicate,
  mdiContentSave,
  mdiDebugStepOver,
  mdiDelete,
@@ -10,11 +11,12 @@ 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";
@@ -306,7 +308,7 @@ export class HaScriptEditor extends SubscribeMixin(
            )}
            <ha-svg-icon
              slot="graphic"
-              .path=${mdiPlusCircleMultipleOutline}
+              .path=${mdiContentDuplicate}
            ></ha-svg-icon>
          </ha-list-item>

@@ -340,6 +342,30 @@ 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
@@ -1021,9 +1047,6 @@ export class HaScriptEditor extends SubscribeMixin(
  protected supportedShortcuts(): SupportedShortcuts {
    return {
      s: () => this._handleSaveScript(),
-      c: () => this._copySelectedRow(),
-      x: () => this._cutSelectedRow(),
-      Delete: () => this._deleteSelectedRow(),
    };
  }

@@ -1035,28 +1058,14 @@ 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,
--- a/src/panels/config/script/ha-script-field-editor.ts
+++ b/src/panels/config/script/ha-script-field-editor.ts
@@ -152,12 +152,7 @@ export default class HaScriptFieldEditor extends LitElement {
    ev.stopPropagation();
    const value = { ...ev.detail.value };

-    if (
-      typeof value !== "object" ||
-      Object.keys(value).length !== 1 ||
-      !value[Object.keys(value)[0]] ||
-      !value[Object.keys(value)[0]].selector
-    ) {
+    if (typeof value !== "object" || Object.keys(value).length !== 1) {
      this._yamlError = "yaml_error";
      return;
    }
@@ -170,7 +165,7 @@ export default class HaScriptFieldEditor extends LitElement {

    const newValue = { ...value[key], key };

-    fireEvent(this, "yaml-changed", { value: newValue });
+    fireEvent(this, "value-changed", { value: newValue });
  }

  private _computeLabelCallback = (
--- a/src/panels/config/script/ha-script-field-row.ts
+++ b/src/panels/config/script/ha-script-field-row.ts
@@ -32,8 +32,6 @@ export default class HaScriptFieldRow extends LitElement {

  @property({ type: Boolean }) public narrow = false;

-  @property({ type: Boolean }) public highlight?: boolean;
-
  @state() private _yamlMode = false;

  @state() private _selected = false;
@@ -63,8 +61,6 @@ export default class HaScriptFieldRow extends LitElement {
          left-chevron
          @toggle-collapsed=${this._toggleCollapse}
          .collapsed=${this._collapsed}
-          .highlight=${this.highlight}
-          @delete-row=${this._onDelete}
        >
          <h3 slot="header">${this.key}</h3>

@@ -87,7 +83,6 @@ export default class HaScriptFieldRow extends LitElement {
            .leftChevron=${SELECTOR_SELECTOR_BUILDING_BLOCKS.includes(
              Object.keys(this.field.selector)[0]
            )}
-            .highlight=${this.highlight}
          >
            <h3 slot="header">
              ${this.hass.localize(
@@ -162,7 +157,8 @@ export default class HaScriptFieldRow extends LitElement {
    ev?.stopPropagation();

    if (this._selected) {
-      fireEvent(this, "request-close-sidebar");
+      this._selected = false;
+      fireEvent(this, "close-sidebar");
      return;
    }

@@ -175,7 +171,8 @@ export default class HaScriptFieldRow extends LitElement {
    ev?.stopPropagation();

    if (this._selectorRowSelected) {
-      fireEvent(this, "request-close-sidebar");
+      this._selectorRowSelected = false;
+      fireEvent(this, "close-sidebar");
      return;
    }

@@ -221,7 +218,7 @@ export default class HaScriptFieldRow extends LitElement {
      },
      toggleYamlMode: () => {
        this._toggleYamlMode();
-        this.openSidebar();
+        return this._yamlMode;
      },
      delete: this._onDelete,
      config: {
@@ -234,12 +231,12 @@ export default class HaScriptFieldRow extends LitElement {
    } satisfies ScriptFieldSidebarConfig);

    if (this.narrow) {
-      window.setTimeout(() => {
+      requestAnimationFrame(() => {
        this.scrollIntoView({
          block: "start",
          behavior: "smooth",
        });
-      }, 180); // duration of transition of added padding for bottom sheet
+      });
    }
  }

@@ -334,11 +331,15 @@ export default class HaScriptFieldRow extends LitElement {
        li[role="separator"] {
          border-bottom-color: var(--divider-color);
        }
+        :host([highlight]) ha-card {
+          --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
+          --shadow-focus: 0 0 0 1px var(--state-inactive-color);
+          border-color: var(--state-inactive-color);
+          box-shadow: var(--shadow-default), var(--shadow-focus);
+        }
+
        .selector-row {
-          padding-top: 12px;
-          padding-bottom: 16px;
-          padding-inline-start: 16px;
-          padding-inline-end: 0px;
+          padding: 12px 0 16px 16px;
        }
      `,
    ];
--- a/src/panels/config/script/ha-script-field-selector-editor.ts
+++ b/src/panels/config/script/ha-script-field-selector-editor.ts
@@ -132,7 +132,7 @@ export default class HaScriptFieldSelectorEditor extends LitElement {
      return;
    }

-    fireEvent(this, "yaml-changed", { value });
+    fireEvent(this, "value-changed", { value });
  }

  private _computeLabelCallback = (
--- a/src/panels/config/script/ha-script-fields.ts
+++ b/src/panels/config/script/ha-script-fields.ts
@@ -43,7 +43,7 @@ export default class HaScriptFields extends LitElement {
                  .disabled=${this.disabled}
                  @value-changed=${this._fieldChanged}
                  .hass=${this.hass}
-                  .highlight=${this.highlightedFields?.[key] !== undefined}
+                  ?highlight=${this.highlightedFields?.[key] !== undefined}
                  .narrow=${this.narrow}
                >
                </ha-script-field-row>
@@ -76,12 +76,10 @@ export default class HaScriptFields extends LitElement {
      row.focus();

      if (this.narrow) {
-        window.setTimeout(() => {
-          row.scrollIntoView({
-            block: "start",
-            behavior: "smooth",
-          });
-        }, 180); // duration of transition of added padding for bottom sheet
+        row.scrollIntoView({
+          block: "start",
+          behavior: "smooth",
+        });
      }
    });
  }
--- a/Show More
+++ b/Show More