Change drag selected styling

Update hover and hightlight states for automation rows
Use summary card in home dashboard (#26775 )
2025-10-28 13:09:46 +00:00 · 2025-09-01 17:56:03 +02:00 · 2025-09-01 17:28:20 +02:00 · 2025-09-01 15:13:53 +02:00 · 2025-09-01 15:39:52 +03:00 · 2025-09-01 15:39:03 +03:00
74 changed files with 2783 additions and 1563 deletions
--- a/.yarn/releases/yarn-4.9.4.cjs
+++ b/.yarn/releases/yarn-4.9.4.cjs
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -6,4 +6,4 @@ enableGlobalCache: false

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.9.3.cjs
+yarnPath: .yarn/releases/yarn-4.9.4.cjs
--- 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.\n\n![Description image](/static/images/config_philips_hue.jpg)",
+        "Press the button on the bridge to register Philips Hue with Home Assistant.",
      submit_caption: "I have pressed the button",
    },
    last_changed: "2018-07-19T10:44:46.515160+00:00",
--- a/package.json
+++ b/package.json
@@ -89,8 +89,8 @@
    "@thomasloven/round-slider": "0.6.0",
    "@tsparticles/engine": "3.9.1",
    "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.8.5",
-    "@vaadin/vaadin-themable-mixin": "24.8.5",
+    "@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",
@@ -112,7 +112,7 @@
    "fuse.js": "7.1.0",
    "google-timezones-json": "1.2.0",
    "gulp-zopfli-green": "6.0.2",
-    "hls.js": "1.6.10",
+    "hls.js": "1.6.11",
    "home-assistant-js-websocket": "9.5.0",
    "idb-keyval": "6.2.2",
    "intl-messageformat": "10.7.16",
@@ -123,7 +123,7 @@
    "lit": "3.3.1",
    "lit-html": "3.3.1",
    "luxon": "3.7.1",
-    "marked": "16.2.0",
+    "marked": "16.2.1",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.3",
    "object-hash": "3.0.0",
@@ -159,7 +159,7 @@
    "@octokit/plugin-retry": "8.0.1",
    "@octokit/rest": "22.0.0",
    "@rsdoctor/rspack-plugin": "1.2.3",
-    "@rspack/core": "1.4.11",
+    "@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.22",
@@ -218,7 +218,7 @@
    "terser-webpack-plugin": "5.3.14",
    "ts-lit-plugin": "2.0.2",
    "typescript": "5.9.2",
-    "typescript-eslint": "8.40.0",
+    "typescript-eslint": "8.41.0",
    "vite-tsconfig-paths": "5.1.4",
    "vitest": "3.2.4",
    "webpack-stats-plugin": "1.1.3",
@@ -235,7 +235,7 @@
    "globals": "16.3.0",
    "tslib": "2.8.1",
    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
-    "@vaadin/vaadin-themable-mixin": "24.8.5"
+    "@vaadin/vaadin-themable-mixin": "24.8.6"
  },
-  "packageManager": "yarn@4.9.3"
+  "packageManager": "yarn@4.9.4"
 }
--- a/public/static/images/config_philips_hue.jpg
+++ b/public/static/images/config_philips_hue.jpg
--- a/public/static/images/dashboard-options/dark/icon-dashboard-home.svg
+++ b/public/static/images/dashboard-options/dark/icon-dashboard-home.svg
@@ -0,0 +1,76 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4744_40067)">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H28C31.3137 0 34 2.68629 34 6C34 9.31371 31.3137 12 28 12H6C2.68629 12 0 9.31371 0 6Z" fill="white" fill-opacity="0.48"/>
+<path d="M0 28C0 23.5817 3.58172 20 8 20H42.6667C47.0849 20 50.6667 23.5817 50.6667 28V36C50.6667 40.4183 47.0849 44 42.6667 44H8.00001C3.58173 44 0 40.4183 0 36V28Z" fill="#1C1C1C"/>
+<path d="M8 20.5H42.667C46.809 20.5002 50.167 23.858 50.167 28V36C50.167 40.142 46.809 43.4998 42.667 43.5H8C3.85787 43.5 0.5 40.1421 0.5 36V28C0.5 23.8579 3.85786 20.5 8 20.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M6 32C6 28.6863 8.68629 26 12 26C15.3137 26 18 28.6863 18 32C18 35.3137 15.3137 38 12 38C8.68629 38 6 35.3137 6 32Z" fill="white" fill-opacity="0.24"/>
+<path d="M24 31C24 29.3431 25.3431 28 27 28H39.6667C41.3235 28 42.6667 29.3431 42.6667 31V33C42.6667 34.6569 41.3235 36 39.6667 36H27C25.3431 36 24 34.6569 24 33V31Z" fill="white" fill-opacity="0.24"/>
+<path d="M54.6666 28C54.6666 23.5817 58.2483 20 62.6666 20H97.3333C101.752 20 105.333 23.5817 105.333 28V36C105.333 40.4183 101.752 44 97.3333 44H62.6666C58.2484 44 54.6666 40.4183 54.6666 36V28Z" fill="#1C1C1C"/>
+<path d="M62.6666 20.5H97.3336C101.476 20.5002 104.834 23.858 104.834 28V36C104.834 40.142 101.476 43.4998 97.3336 43.5H62.6666C58.5245 43.5 55.1666 40.1421 55.1666 36V28C55.1666 23.8579 58.5245 20.5 62.6666 20.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M60.6666 32C60.6666 28.6863 63.3529 26 66.6666 26C69.9803 26 72.6666 28.6863 72.6666 32C72.6666 35.3137 69.9803 38 66.6666 38C63.3529 38 60.6666 35.3137 60.6666 32Z" fill="white" fill-opacity="0.24"/>
+<path d="M78.6666 31C78.6666 29.3431 80.0098 28 81.6666 28H94.3333C95.9901 28 97.3333 29.3431 97.3333 31V33C97.3333 34.6569 95.9901 36 94.3333 36H81.6666C80.0098 36 78.6666 34.6569 78.6666 33V31Z" fill="white" fill-opacity="0.24"/>
+<path d="M109.333 28C109.333 23.5817 112.915 20 117.333 20H152C156.418 20 160 23.5817 160 28V36C160 40.4183 156.418 44 152 44H117.333C112.915 44 109.333 40.4183 109.333 36V28Z" fill="#1C1C1C"/>
+<path d="M117.333 20.5H152C156.142 20.5002 159.5 23.858 159.5 28V36C159.5 40.142 156.142 43.4998 152 43.5H117.333C113.191 43.5 109.833 40.1421 109.833 36V28C109.833 23.8579 113.191 20.5 117.333 20.5Z" stroke="white" stroke-opacity="0.24"/>
+<path d="M115.333 32C115.333 28.6863 118.02 26 121.333 26C124.647 26 127.333 28.6863 127.333 32C127.333 35.3137 124.647 38 121.333 38C118.02 38 115.333 35.3137 115.333 32Z" fill="white" fill-opacity="0.24"/>
+<path d="M133.333 31C133.333 29.3431 134.677 28 136.333 28H149C150.657 28 152 29.3431 152 31V33C152 34.6569 150.657 36 149 36H136.333C134.677 36 133.333 34.6569 133.333 33V31Z" fill="white" fill-opacity="0.24"/>
+<path d="M0 56C0 53.7909 1.79086 52 4 52H29C31.2091 52 33 53.7909 33 56C33 58.2091 31.2091 60 29 60H4C1.79086 60 0 58.2091 0 56Z" fill="white" fill-opacity="0.48"/>
+<path d="M0 72C0 67.5817 3.58172 64 8 64H29C33.4183 64 37 67.5817 37 72V96C37 100.418 33.4183 104 29 104H8C3.58172 104 0 100.418 0 96V72Z" fill="#1C1C1C"/>
+<path d="M8 64.5H29C33.1421 64.5 36.5 67.8579 36.5 72V96C36.5 100.142 33.1421 103.5 29 103.5H8C3.85786 103.5 0.5 100.142 0.5 96V72C0.5 67.8579 3.85786 64.5 8 64.5Z" stroke="white" stroke-opacity="0.24"/>
+<mask id="mask0_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="72" width="25" height="24">
+<path d="M18.5 74C16.6435 74 14.863 74.7375 13.5503 76.0503C12.2375 77.363 11.5 79.1435 11.5 81C11.5 83.38 12.69 85.47 14.5 86.74V89C14.5 89.2652 14.6054 89.5196 14.7929 89.7071C14.9804 89.8946 15.2348 90 15.5 90H21.5C21.7652 90 22.0196 89.8946 22.2071 89.7071C22.3946 89.5196 22.5 89.2652 22.5 89V86.74C24.31 85.47 25.5 83.38 25.5 81C25.5 79.1435 24.7625 77.363 23.4497 76.0503C22.137 74.7375 20.3565 74 18.5 74ZM15.5 93C15.5 93.2652 15.6054 93.5196 15.7929 93.7071C15.9804 93.8946 16.2348 94 16.5 94H20.5C20.7652 94 21.0196 93.8946 21.2071 93.7071C21.3946 93.5196 21.5 93.2652 21.5 93V92H15.5V93Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_4744_40067)">
+<rect x="6.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M41 72C41 67.5817 44.5817 64 49 64H70C74.4183 64 78 67.5817 78 72V96C78 100.418 74.4183 104 70 104H49C44.5817 104 41 100.418 41 96V72Z" fill="#1C1C1C"/>
+<path d="M49 64.5H70C74.1421 64.5 77.5 67.8579 77.5 72V96C77.5 100.142 74.1421 103.5 70 103.5H49C44.8579 103.5 41.5 100.142 41.5 96V72C41.5 67.8579 44.8579 64.5 49 64.5Z" stroke="white" stroke-opacity="0.24"/>
+<mask id="mask1_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="72" width="25" height="24">
+<path d="M66.5 80C67.61 80 68.5 80.9 68.5 82V88.76C69.11 89.31 69.5 90.11 69.5 91C69.5 92.66 68.16 94 66.5 94C64.84 94 63.5 92.66 63.5 91C63.5 90.11 63.89 89.31 64.5 88.76V82C64.5 80.9 65.4 80 66.5 80ZM66.5 81C65.95 81 65.5 81.45 65.5 82V83H67.5V82C67.5 81.45 67.05 81 66.5 81ZM52.5 92V84H49.5L59.5 75L63.9 78.96C63.04 79.69 62.5 80.78 62.5 82V88C61.87 88.83 61.5 89.87 61.5 91L61.6 92H52.5Z" fill="black"/>
+</mask>
+<g mask="url(#mask1_4744_40067)">
+<rect x="47.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M82 72C82 67.5817 85.5817 64 90 64H111C115.418 64 119 67.5817 119 72V96C119 100.418 115.418 104 111 104H90C85.5817 104 82 100.418 82 96V72Z" fill="#1C1C1C"/>
+<path d="M90 64.5H111C115.142 64.5 118.5 67.8579 118.5 72V96C118.5 100.142 115.142 103.5 111 103.5H90C85.8579 103.5 82.5 100.142 82.5 96V72C82.5 67.8579 85.8579 64.5 90 64.5Z" stroke="white" stroke-opacity="0.24"/>
+<mask id="mask2_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="88" y="72" width="25" height="24">
+<path d="M100.5 84H107.5C106.97 88.11 104.22 91.78 100.5 92.92V84H93.5V78.3L100.5 75.19M100.5 73L91.5 77V83C91.5 88.55 95.34 93.73 100.5 95C105.66 93.73 109.5 88.55 109.5 83V77L100.5 73Z" fill="black"/>
+</mask>
+<g mask="url(#mask2_4744_40067)">
+<rect x="88.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M123 72C123 67.5817 126.582 64 131 64H152C156.418 64 160 67.5817 160 72V96C160 100.418 156.418 104 152 104H131C126.582 104 123 100.418 123 96V72Z" fill="#1C1C1C"/>
+<path d="M131 64.5H152C156.142 64.5 159.5 67.8579 159.5 72V96C159.5 100.142 156.142 103.5 152 103.5H131C126.858 103.5 123.5 100.142 123.5 96V72C123.5 67.8579 126.858 64.5 131 64.5Z" stroke="white" stroke-opacity="0.24"/>
+<mask id="mask3_4744_40067" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="129" y="72" width="25" height="24">
+<path d="M145.5 84C145.5 83.4696 145.711 82.9609 146.086 82.5858C146.461 82.2107 146.97 82 147.5 82C148.03 82 148.539 82.2107 148.914 82.5858C149.289 82.9609 149.5 83.4696 149.5 84C149.5 84.5304 149.289 85.0391 148.914 85.4142C148.539 85.7893 148.03 86 147.5 86C146.97 86 146.461 85.7893 146.086 85.4142C145.711 85.0391 145.5 84.5304 145.5 84ZM139.5 84C139.5 83.4696 139.711 82.9609 140.086 82.5858C140.461 82.2107 140.97 82 141.5 82C142.03 82 142.539 82.2107 142.914 82.5858C143.289 82.9609 143.5 83.4696 143.5 84C143.5 84.5304 143.289 85.0391 142.914 85.4142C142.539 85.7893 142.03 86 141.5 86C140.97 86 140.461 85.7893 140.086 85.4142C139.711 85.0391 139.5 84.5304 139.5 84ZM133.5 84C133.5 83.4696 133.711 82.9609 134.086 82.5858C134.461 82.2107 134.97 82 135.5 82C136.03 82 136.539 82.2107 136.914 82.5858C137.289 82.9609 137.5 83.4696 137.5 84C137.5 84.5304 137.289 85.0391 136.914 85.4142C136.539 85.7893 136.03 86 135.5 86C134.97 86 134.461 85.7893 134.086 85.4142C133.711 85.0391 133.5 84.5304 133.5 84Z" fill="black"/>
+</mask>
+<g mask="url(#mask3_4744_40067)">
+<rect x="129.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M0 116C0 113.791 1.79086 112 4 112H29C31.2091 112 33 113.791 33 116C33 118.209 31.2091 120 29 120H4C1.79086 120 0 118.209 0 116Z" fill="white" fill-opacity="0.48"/>
+<path d="M0 132C0 127.582 3.58172 124 8 124H70C74.4183 124 78 127.582 78 132V160H0V132Z" fill="url(#paint0_linear_4744_40067)"/>
+<path d="M8 124.5H70C74.1421 124.5 77.5 127.858 77.5 132V159.5H0.5V132C0.5 127.858 3.85786 124.5 8 124.5Z" stroke="url(#paint1_linear_4744_40067)" stroke-opacity="0.12"/>
+<path d="M82 132C82 127.582 85.5817 124 90 124H152C156.418 124 160 127.582 160 132V160H82V132Z" fill="url(#paint2_linear_4744_40067)"/>
+<path d="M90 124.5H152C156.142 124.5 159.5 127.858 159.5 132V159.5H82.5V132C82.5 127.858 85.8579 124.5 90 124.5Z" stroke="url(#paint3_linear_4744_40067)" stroke-opacity="0.12"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4744_40067" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="#1C1C1C"/>
+<stop offset="1" stop-color="#1C1C1C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4744_40067" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="white" stop-opacity="0.24"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_4744_40067" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="#1C1C1C"/>
+<stop offset="1" stop-color="#1C1C1C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_4744_40067" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="white" stop-opacity="0.24"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_4744_40067">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/public/static/images/dashboard-options/light/icon-dashboard-home.svg
+++ b/public/static/images/dashboard-options/light/icon-dashboard-home.svg
@@ -0,0 +1,76 @@
+<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4744_39984)">
+<path d="M0 6C0 2.68629 2.68629 0 6 0H28C31.3137 0 34 2.68629 34 6C34 9.31371 31.3137 12 28 12H6C2.68629 12 0 9.31371 0 6Z" fill="black" fill-opacity="0.32"/>
+<path d="M0 28C0 23.5817 3.58172 20 8 20H42.6667C47.0849 20 50.6667 23.5817 50.6667 28V36C50.6667 40.4183 47.0849 44 42.6667 44H8.00001C3.58173 44 0 40.4183 0 36V28Z" fill="white"/>
+<path d="M8 20.5H42.667C46.809 20.5002 50.167 23.858 50.167 28V36C50.167 40.142 46.809 43.4998 42.667 43.5H8C3.85787 43.5 0.5 40.1421 0.5 36V28C0.5 23.8579 3.85786 20.5 8 20.5Z" stroke="black" stroke-opacity="0.12"/>
+<rect x="6" y="26" width="12" height="12" rx="6" fill="black" fill-opacity="0.12"/>
+<path d="M24 31C24 29.3431 25.3431 28 27 28H39.6667C41.3235 28 42.6667 29.3431 42.6667 31V33C42.6667 34.6569 41.3235 36 39.6667 36H27C25.3431 36 24 34.6569 24 33V31Z" fill="black" fill-opacity="0.12"/>
+<path d="M54.6667 28C54.6667 23.5817 58.2484 20 62.6667 20H97.3333C101.752 20 105.333 23.5817 105.333 28V36C105.333 40.4183 101.752 44 97.3334 44H62.6667C58.2484 44 54.6667 40.4183 54.6667 36V28Z" fill="white"/>
+<path d="M62.6667 20.5H97.3337C101.476 20.5002 104.834 23.858 104.834 28V36C104.834 40.142 101.476 43.4998 97.3337 43.5H62.6667C58.5246 43.5 55.1667 40.1421 55.1667 36V28C55.1667 23.8579 58.5246 20.5 62.6667 20.5Z" stroke="black" stroke-opacity="0.12"/>
+<rect x="60.6667" y="26" width="12" height="12" rx="6" fill="black" fill-opacity="0.12"/>
+<path d="M78.6667 31C78.6667 29.3431 80.0098 28 81.6667 28H94.3334C95.9902 28 97.3334 29.3431 97.3334 31V33C97.3334 34.6569 95.9902 36 94.3334 36H81.6667C80.0098 36 78.6667 34.6569 78.6667 33V31Z" fill="black" fill-opacity="0.12"/>
+<path d="M109.333 28C109.333 23.5817 112.915 20 117.333 20H152C156.418 20 160 23.5817 160 28V36C160 40.4183 156.418 44 152 44H117.333C112.915 44 109.333 40.4183 109.333 36V28Z" fill="white"/>
+<path d="M117.333 20.5H152C156.142 20.5002 159.5 23.858 159.5 28V36C159.5 40.142 156.142 43.4998 152 43.5H117.333C113.191 43.5 109.833 40.1421 109.833 36V28C109.833 23.8579 113.191 20.5 117.333 20.5Z" stroke="black" stroke-opacity="0.12"/>
+<rect x="115.333" y="26" width="12" height="12" rx="6" fill="black" fill-opacity="0.12"/>
+<path d="M133.333 31C133.333 29.3431 134.676 28 136.333 28H149C150.657 28 152 29.3431 152 31V33C152 34.6569 150.657 36 149 36H136.333C134.676 36 133.333 34.6569 133.333 33V31Z" fill="black" fill-opacity="0.12"/>
+<path d="M0 56C0 53.7909 1.79086 52 4 52H29C31.2091 52 33 53.7909 33 56C33 58.2091 31.2091 60 29 60H4C1.79086 60 0 58.2091 0 56Z" fill="black" fill-opacity="0.32"/>
+<path d="M0 72C0 67.5817 3.58172 64 8 64H29C33.4183 64 37 67.5817 37 72V96C37 100.418 33.4183 104 29 104H8C3.58172 104 0 100.418 0 96V72Z" fill="white"/>
+<path d="M8 64.5H29C33.1421 64.5 36.5 67.8579 36.5 72V96C36.5 100.142 33.1421 103.5 29 103.5H8C3.85786 103.5 0.5 100.142 0.5 96V72C0.5 67.8579 3.85786 64.5 8 64.5Z" stroke="black" stroke-opacity="0.12"/>
+<mask id="mask0_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="72" width="25" height="24">
+<path d="M18.5 74C16.6435 74 14.863 74.7375 13.5503 76.0503C12.2375 77.363 11.5 79.1435 11.5 81C11.5 83.38 12.69 85.47 14.5 86.74V89C14.5 89.2652 14.6054 89.5196 14.7929 89.7071C14.9804 89.8946 15.2348 90 15.5 90H21.5C21.7652 90 22.0196 89.8946 22.2071 89.7071C22.3946 89.5196 22.5 89.2652 22.5 89V86.74C24.31 85.47 25.5 83.38 25.5 81C25.5 79.1435 24.7625 77.363 23.4497 76.0503C22.137 74.7375 20.3565 74 18.5 74ZM15.5 93C15.5 93.2652 15.6054 93.5196 15.7929 93.7071C15.9804 93.8946 16.2348 94 16.5 94H20.5C20.7652 94 21.0196 93.8946 21.2071 93.7071C21.3946 93.5196 21.5 93.2652 21.5 93V92H15.5V93Z" fill="black"/>
+</mask>
+<g mask="url(#mask0_4744_39984)">
+<rect x="6.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M41 72C41 67.5817 44.5817 64 49 64H70C74.4183 64 78 67.5817 78 72V96C78 100.418 74.4183 104 70 104H49C44.5817 104 41 100.418 41 96V72Z" fill="white"/>
+<path d="M49 64.5H70C74.1421 64.5 77.5 67.8579 77.5 72V96C77.5 100.142 74.1421 103.5 70 103.5H49C44.8579 103.5 41.5 100.142 41.5 96V72C41.5 67.8579 44.8579 64.5 49 64.5Z" stroke="black" stroke-opacity="0.12"/>
+<mask id="mask1_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="47" y="72" width="25" height="24">
+<path d="M66.5 80C67.61 80 68.5 80.9 68.5 82V88.76C69.11 89.31 69.5 90.11 69.5 91C69.5 92.66 68.16 94 66.5 94C64.84 94 63.5 92.66 63.5 91C63.5 90.11 63.89 89.31 64.5 88.76V82C64.5 80.9 65.4 80 66.5 80ZM66.5 81C65.95 81 65.5 81.45 65.5 82V83H67.5V82C67.5 81.45 67.05 81 66.5 81ZM52.5 92V84H49.5L59.5 75L63.9 78.96C63.04 79.69 62.5 80.78 62.5 82V88C61.87 88.83 61.5 89.87 61.5 91L61.6 92H52.5Z" fill="black"/>
+</mask>
+<g mask="url(#mask1_4744_39984)">
+<rect x="47.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M82 72C82 67.5817 85.5817 64 90 64H111C115.418 64 119 67.5817 119 72V96C119 100.418 115.418 104 111 104H90C85.5817 104 82 100.418 82 96V72Z" fill="white"/>
+<path d="M90 64.5H111C115.142 64.5 118.5 67.8579 118.5 72V96C118.5 100.142 115.142 103.5 111 103.5H90C85.8579 103.5 82.5 100.142 82.5 96V72C82.5 67.8579 85.8579 64.5 90 64.5Z" stroke="black" stroke-opacity="0.12"/>
+<mask id="mask2_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="88" y="72" width="25" height="24">
+<path d="M100.5 84H107.5C106.97 88.11 104.22 91.78 100.5 92.92V84H93.5V78.3L100.5 75.19M100.5 73L91.5 77V83C91.5 88.55 95.34 93.73 100.5 95C105.66 93.73 109.5 88.55 109.5 83V77L100.5 73Z" fill="black"/>
+</mask>
+<g mask="url(#mask2_4744_39984)">
+<rect x="88.5" y="72" width="24" height="24" fill="#03A9F4"/>
+</g>
+<path d="M123 72C123 67.5817 126.582 64 131 64H152C156.418 64 160 67.5817 160 72V96C160 100.418 156.418 104 152 104H131C126.582 104 123 100.418 123 96V72Z" fill="white"/>
+<path d="M131 64.5H152C156.142 64.5 159.5 67.8579 159.5 72V96C159.5 100.142 156.142 103.5 152 103.5H131C126.858 103.5 123.5 100.142 123.5 96V72C123.5 67.8579 126.858 64.5 131 64.5Z" stroke="black" stroke-opacity="0.12"/>
+<mask id="mask3_4744_39984" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="129" y="72" width="25" height="24">
+<path d="M145.5 84C145.5 83.4696 145.711 82.9609 146.086 82.5858C146.461 82.2107 146.97 82 147.5 82C148.03 82 148.539 82.2107 148.914 82.5858C149.289 82.9609 149.5 83.4696 149.5 84C149.5 84.5304 149.289 85.0391 148.914 85.4142C148.539 85.7893 148.03 86 147.5 86C146.97 86 146.461 85.7893 146.086 85.4142C145.711 85.0391 145.5 84.5304 145.5 84ZM139.5 84C139.5 83.4696 139.711 82.9609 140.086 82.5858C140.461 82.2107 140.97 82 141.5 82C142.03 82 142.539 82.2107 142.914 82.5858C143.289 82.9609 143.5 83.4696 143.5 84C143.5 84.5304 143.289 85.0391 142.914 85.4142C142.539 85.7893 142.03 86 141.5 86C140.97 86 140.461 85.7893 140.086 85.4142C139.711 85.0391 139.5 84.5304 139.5 84ZM133.5 84C133.5 83.4696 133.711 82.9609 134.086 82.5858C134.461 82.2107 134.97 82 135.5 82C136.03 82 136.539 82.2107 136.914 82.5858C137.289 82.9609 137.5 83.4696 137.5 84C137.5 84.5304 137.289 85.0391 136.914 85.4142C136.539 85.7893 136.03 86 135.5 86C134.97 86 134.461 85.7893 134.086 85.4142C133.711 85.0391 133.5 84.5304 133.5 84Z" fill="black"/>
+</mask>
+<g mask="url(#mask3_4744_39984)">
+<rect x="129.5" y="72" width="24" height="24" fill="#18BCF2"/>
+</g>
+<path d="M0 116C0 113.791 1.79086 112 4 112H29C31.2091 112 33 113.791 33 116C33 118.209 31.2091 120 29 120H4C1.79086 120 0 118.209 0 116Z" fill="black" fill-opacity="0.32"/>
+<path d="M0 132C0 127.582 3.58172 124 8 124H70C74.4183 124 78 127.582 78 132V160H0V132Z" fill="url(#paint0_linear_4744_39984)"/>
+<path d="M8 124.5H70C74.1421 124.5 77.5 127.858 77.5 132V159.5H0.5V132C0.5 127.858 3.85786 124.5 8 124.5Z" stroke="url(#paint1_linear_4744_39984)" stroke-opacity="0.12"/>
+<path d="M82 132C82 127.582 85.5817 124 90 124H152C156.418 124 160 127.582 160 132V160H82V132Z" fill="url(#paint2_linear_4744_39984)"/>
+<path d="M90 124.5H152C156.142 124.5 159.5 127.858 159.5 132V159.5H82.5V132C82.5 127.858 85.8579 124.5 90 124.5Z" stroke="url(#paint3_linear_4744_39984)" stroke-opacity="0.12"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_4744_39984" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4744_39984" x1="39" y1="124" x2="39" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-opacity="0.12"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_4744_39984" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_4744_39984" x1="121" y1="124" x2="121" y2="160" gradientUnits="userSpaceOnUse">
+<stop offset="0.5" stop-opacity="0.12"/>
+<stop offset="1" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_4744_39984">
+<rect width="160" height="160" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/components/ha-alert.ts
+++ b/src/components/ha-alert.ts
@@ -119,10 +119,11 @@ class HaAlert extends LitElement {
    .main-content {
      overflow-wrap: anywhere;
      word-break: break-word;
+      line-height: normal;
      margin-left: 8px;
      margin-right: 0;
      margin-inline-start: 8px;
-      margin-inline-end: 0;
+      margin-inline-end: 8px;
    }
    .title {
      margin-top: 2px;
--- a/src/components/ha-attributes.ts
+++ b/src/components/ha-attributes.ts
@@ -3,11 +3,15 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeAttributeNameDisplay } from "../common/entity/compute_attribute_display";
-import { STATE_ATTRIBUTES } from "../data/entity_attributes";
+import {
+  STATE_ATTRIBUTES,
+  STATE_ATTRIBUTES_DOMAIN_CLASS,
+} from "../data/entity_attributes";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-attribute-value";
 import "./ha-expansion-panel";
+import { computeStateDomain } from "../common/entity/compute_state_domain";

@customElement("ha-attributes")
 class HaAttributes extends LitElement {
@@ -22,7 +26,12 @@ class HaAttributes extends LitElement {
  private get _filteredAttributes() {
    return this._computeDisplayAttributes(
      STATE_ATTRIBUTES.concat(
-        this.extraFilters ? this.extraFilters.split(",") : []
+        this.extraFilters ? this.extraFilters.split(",") : [],
+        (this.stateObj &&
+          STATE_ATTRIBUTES_DOMAIN_CLASS[computeStateDomain(this.stateObj)]?.[
+            this.stateObj.attributes?.device_class
+          ]) ||
+          []
      )
    );
  }
--- a/src/components/ha-automation-row.ts
+++ b/src/components/ha-automation-row.ts
@@ -1,7 +1,7 @@
 import { mdiChevronUp } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-icon-button";

@@ -16,12 +16,20 @@ export class HaAutomationRow extends LitElement {
  @property({ type: Boolean, reflect: true })
  public selected = false;

+  @property({ type: Boolean, reflect: true, attribute: "sort-selected" })
+  public sortSelected = false;
+
  @property({ type: Boolean, reflect: true })
  public disabled = false;

  @property({ type: Boolean, reflect: true, attribute: "building-block" })
  public buildingBlock = false;

+  @property({ type: Boolean, reflect: true }) public highlight?: boolean;
+
+  @query(".row")
+  private _rowElement?: HTMLDivElement;
+
  protected render(): TemplateResult {
    return html`
      <div
@@ -66,15 +74,42 @@ export class HaAutomationRow extends LitElement {
    if (ev.defaultPrevented) {
      return;
    }
-    if (ev.key !== "Enter" && ev.key !== " ") {
+
+    if (
+      ev.key !== "Enter" &&
+      ev.key !== " " &&
+      !(
+        (this.sortSelected || ev.altKey) &&
+        (ev.key === "ArrowUp" || ev.key === "ArrowDown")
+      )
+    ) {
      return;
    }
    ev.preventDefault();
    ev.stopPropagation();

+    if (ev.key === "ArrowUp" || ev.key === "ArrowDown") {
+      if (ev.key === "ArrowUp") {
+        fireEvent(this, "move-up");
+        return;
+      }
+      fireEvent(this, "move-down");
+      return;
+    }
+    if (this.sortSelected && (ev.key === "Enter" || ev.key === " ")) {
+      fireEvent(this, "stop-sort-selection");
+      return;
+    }
+
    this.click();
  }

+  public focus() {
+    requestAnimationFrame(() => {
+      this._rowElement?.focus();
+    });
+  }
+
  static styles = css`
    :host {
      display: block;
@@ -134,6 +169,22 @@ export class HaAutomationRow extends LitElement {
      overflow-wrap: anywhere;
      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);
+    }
  `;
 }

@@ -144,5 +195,6 @@ declare global {

  interface HASSDomEvents {
    "toggle-collapsed": undefined;
+    "stop-sort-selection": undefined;
  }
 }
--- a/src/components/ha-bottom-sheet.ts
+++ b/src/components/ha-bottom-sheet.ts
@@ -197,6 +197,7 @@ export class HaBottomSheet extends LitElement {
      justify-content: center;
      align-items: center;
      z-index: 7;
+      padding-bottom: 76px;
    }
    .handle-wrapper .handle::after {
      content: "";
--- a/src/components/ha-items-display-editor.ts
+++ b/src/components/ha-items-display-editor.ts
@@ -393,10 +393,13 @@ export class HaItemDisplayEditor extends LitElement {
      --md-list-item-one-line-container-height: 48px;
    }
    ha-md-list-item.drag-selected {
-      box-shadow:
-        0px 0px 8px 4px rgba(var(--rgb-accent-color), 0.8),
-        inset 0px 2px 8px 4px rgba(var(--rgb-accent-color), 0.4);
+      --md-focus-ring-color: rgba(var(--rgb-accent-color), 0.6);
      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-button-menu.ts
+++ b/src/components/ha-md-button-menu.ts
@@ -16,9 +16,23 @@ export class HaMdButtonMenu extends LitElement {

  @property() public positioning?: "fixed" | "absolute" | "popover";

+  @property({ attribute: "anchor-corner" }) public anchorCorner:
+    | "start-start"
+    | "start-end"
+    | "end-start"
+    | "end-end" = "end-start";
+
+  @property({ attribute: "menu-corner" }) public menuCorner:
+    | "start-start"
+    | "start-end"
+    | "end-start"
+    | "end-end" = "start-start";
+
  @property({ type: Boolean, attribute: "has-overflow" }) public hasOverflow =
    false;

+  @property({ type: Boolean }) public quick = false;
+
  @query("ha-md-menu", true) private _menu!: HaMdMenu;

  public get items() {
@@ -39,8 +53,11 @@ export class HaMdButtonMenu extends LitElement {
        <slot name="trigger" @slotchange=${this._setTriggerAria}></slot>
      </div>
      <ha-md-menu
+        .quick=${this.quick}
        .positioning=${this.positioning}
        .hasOverflow=${this.hasOverflow}
+        .anchorCorner=${this.anchorCorner}
+        .menuCorner=${this.menuCorner}
        @opening=${this._handleOpening}
        @closing=${this._handleClosing}
      >
--- a/src/components/ha-network.ts
+++ b/src/components/ha-network.ts
@@ -1,4 +1,4 @@
-import { mdiStar } from "@mdi/js";
+import { mdiInformationOutline, mdiStar } from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -71,6 +71,17 @@ export class HaNetwork extends LitElement {
        <span slot="description" data-for="auto_configure">
          ${this.hass.localize("ui.panel.config.network.adapter.detected")}:
          ${format_auto_detected_interfaces(this.networkConfig.adapters)}
+          ${!configured_adapters.length
+            ? html`<div class="info-text">
+                <ha-svg-icon
+                  .path=${mdiInformationOutline}
+                  class="info-icon"
+                ></ha-svg-icon>
+                ${this.hass.localize(
+                  "ui.panel.config.network.adapter.auto_configure_manual_hint"
+                )}
+              </div>`
+            : nothing}
        </span>
      </ha-settings-row>
      ${configured_adapters.length || this._expanded
@@ -171,6 +182,21 @@ export class HaNetwork extends LitElement {
        span[slot="description"] {
          cursor: pointer;
        }
+
+        .info-text {
+          display: flex;
+          align-items: center;
+          margin-top: 8px;
+          color: var(--secondary-text-color);
+        }
+
+        .info-icon {
+          width: 18px;
+          height: 18px;
+          color: var(--info-color, var(--primary-color));
+          margin-right: 8px;
+          flex-shrink: 0;
+        }
      `,
    ];
  }
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@@ -53,9 +53,15 @@ export class HaMediaSelector extends LitElement {

  private _contextEntities: string[] | undefined;

+  private get _hasAccept(): boolean {
+    return !!this.selector?.media?.accept?.length;
+  }
+
  willUpdate(changedProps: PropertyValues<this>) {
    if (changedProps.has("context")) {
-      this._contextEntities = ensureArray(this.context?.filter_entity);
+      if (!this._hasAccept) {
+        this._contextEntities = ensureArray(this.context?.filter_entity);
+      }
    }

    if (changedProps.has("value")) {
@@ -99,10 +105,8 @@ export class HaMediaSelector extends LitElement {
      (stateObj &&
        supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));

-    const hasAccept = this.selector?.media?.accept?.length;
-
    return html`
-      ${hasAccept ||
+      ${this._hasAccept ||
      (this._contextEntities && this._contextEntities.length <= 1)
        ? nothing
        : html`
@@ -148,7 +152,7 @@ export class HaMediaSelector extends LitElement {
                : this.value.metadata?.title || this.value.media_content_id}
              @click=${this._pickMedia}
              @keydown=${this._handleKeyDown}
-              class=${this.disabled || (!entityId && !hasAccept)
+              class=${this.disabled || (!entityId && !this._hasAccept)
                ? "disabled"
                : ""}
            >
@@ -215,7 +219,7 @@ export class HaMediaSelector extends LitElement {

  private _entityChanged(ev: CustomEvent) {
    ev.stopPropagation();
-    if (this.context?.filter_entity) {
+    if (!this._hasAccept && this.context?.filter_entity) {
      fireEvent(this, "value-changed", {
        value: {
          media_content_id: "",
@@ -257,7 +261,7 @@ export class HaMediaSelector extends LitElement {
                media_content_type: id.media_content_type,
                media_content_id: id.media_content_id,
              })),
-              ...(this.context?.filter_entity
+              ...(!this._hasAccept && this.context?.filter_entity
                ? { browse_entity_id: this._getActiveEntityId() }
                : {}),
            },
--- a/src/components/ha-sortable.ts
+++ b/src/components/ha-sortable.ts
@@ -21,9 +21,15 @@ declare global {
    };
    "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"
@@ -148,6 +154,7 @@ export class HaSortable extends LitElement {
      onUpdate: this._handleUpdate,
      onAdd: this._handleAdd,
      onRemove: this._handleRemove,
+      onClone: this._handleClone,
    };

    if (this.draggableSelector) {
@@ -187,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/data/automation.ts
+++ b/src/data/automation.ts
@@ -556,18 +556,18 @@ export interface AutomationClipboard {
 }

 export interface BaseSidebarConfig {
-  toggleYamlMode: () => boolean;
  delete: () => void;
+  close: (focus?: boolean) => void;
 }

 export interface TriggerSidebarConfig extends BaseSidebarConfig {
  save: (value: Trigger) => void;
-  close: () => void;
  rename: () => void;
  disable: () => void;
  duplicate: () => void;
  cut: () => void;
  copy: () => void;
+  toggleYamlMode: () => void;
  config: Trigger;
  yamlMode: boolean;
  uiSupported: boolean;
@@ -575,13 +575,13 @@ export interface TriggerSidebarConfig extends BaseSidebarConfig {

 export interface ConditionSidebarConfig extends BaseSidebarConfig {
  save: (value: Condition) => void;
-  close: () => void;
  rename: () => void;
  disable: () => void;
  test: () => void;
  duplicate: () => void;
  cut: () => void;
  copy: () => void;
+  toggleYamlMode: () => void;
  config: Condition;
  yamlMode: boolean;
  uiSupported: boolean;
@@ -589,13 +589,13 @@ export interface ConditionSidebarConfig extends BaseSidebarConfig {

 export interface ActionSidebarConfig extends BaseSidebarConfig {
  save: (value: Action) => void;
-  close: () => void;
  rename: () => void;
  disable: () => void;
  duplicate: () => void;
  cut: () => void;
  copy: () => void;
  run: () => void;
+  toggleYamlMode: () => void;
  config: {
    action: Action;
  };
@@ -604,7 +604,6 @@ export interface ActionSidebarConfig extends BaseSidebarConfig {
 }

 export interface OptionSidebarConfig extends BaseSidebarConfig {
-  close: () => void;
  rename: () => void;
  duplicate: () => void;
  defaultOption?: boolean;
@@ -612,13 +611,13 @@ export interface OptionSidebarConfig extends BaseSidebarConfig {

 export interface ScriptFieldSidebarConfig extends BaseSidebarConfig {
  save: (value: Field) => void;
-  close: () => void;
  config: {
    field: Field;
    selector: boolean;
    key: string;
    excludeKeys: string[];
  };
+  toggleYamlMode: () => void;
  yamlMode: boolean;
 }

--- a/src/data/entity_attributes.ts
+++ b/src/data/entity_attributes.ts
@@ -1,6 +1,7 @@
 import { formatDurationDigital } from "../common/datetime/format_duration";
 import type { FrontendLocaleData } from "./translation";

+// These attributes are hidden from the more-info window for all entities.
 export const STATE_ATTRIBUTES = [
  "entity_id",
  "assumed_state",
@@ -26,6 +27,14 @@ export const STATE_ATTRIBUTES = [
  "available_tones",
 ];

+// These attributes are hidden from the more-info window for entities of the
+// matching domain and device_class.
+export const STATE_ATTRIBUTES_DOMAIN_CLASS = {
+  sensor: {
+    enum: ["options"],
+  },
+};
+
 export const TEMPERATURE_ATTRIBUTES = new Set([
  "temperature",
  "current_temperature",
--- a/src/data/hassio/host.ts
+++ b/src/data/hassio/host.ts
@@ -195,6 +195,7 @@ export const fetchHostDisksUsage = async (hass: HomeAssistant) => {
      type: "supervisor/api",
      endpoint: "/host/disks/default/usage",
      method: "get",
+      timeout: 3600, // seconds. This can take a while
    });
  }

--- a/src/panels/config/automation/action/ha-automation-action-editor.ts
+++ b/src/panels/config/automation/action/ha-automation-action-editor.ts
@@ -53,6 +53,7 @@ export default class HaAutomationActionEditor extends LitElement {
            this.disabled || (this.action.enabled === false && !this.yamlMode),
          yaml: yamlMode,
          indent: this.indent,
+          card: !this.inSidebar,
        })}
      >
        ${yamlMode
@@ -96,7 +97,7 @@ export default class HaAutomationActionEditor extends LitElement {
    if (!ev.detail.isValid) {
      return;
    }
-    fireEvent(this, "value-changed", {
+    fireEvent(this, "yaml-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
@@ -26,6 +26,7 @@ import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-automation-row";
+import type { HaAutomationRow } from "../../../../components/ha-automation-row";
 import "../../../../components/ha-card";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
@@ -150,9 +151,14 @@ 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;

+  @property({ type: Boolean, attribute: "sort-selected" })
+  public sortSelected = false;
+
  @storage({
    key: "automationClipboard",
    state: false,
@@ -186,6 +192,9 @@ export default class HaAutomationActionRow extends LitElement {
  @query("ha-automation-action-editor")
  private _actionEditor?: HaAutomationActionEditor;

+  @query("ha-automation-row")
+  private _automationRowElement?: HaAutomationRow;
+
  protected firstUpdated(changedProperties: PropertyValues): void {
    super.firstUpdated(changedProperties);

@@ -254,138 +263,136 @@ export default class HaAutomationActionRow extends LitElement {
            <ha-svg-icon .path=${mdiAlertCircleCheck}></ha-svg-icon>
          </ha-tooltip>`
        : nothing}
+      ${!this.optionsInSidebar
+        ? html`<ha-md-button-menu
+            quick
+            slot="icons"
+            @click=${preventDefaultStopPropagation}
+            @keydown=${stopPropagation}
+            @closed=${stopPropagation}
+            positioning="fixed"
+            anchor-corner="end-end"
+            menu-corner="start-end"
+          >
+            <ha-icon-button
+              slot="trigger"
+              .label=${this.hass.localize("ui.common.menu")}
+              .path=${mdiDotsVertical}
+            ></ha-icon-button>

-      <ha-md-button-menu
-        slot="icons"
-        @click=${preventDefaultStopPropagation}
-        @keydown=${stopPropagation}
-        @closed=${stopPropagation}
-        positioning="fixed"
-      >
-        <ha-icon-button
-          slot="trigger"
-          .label=${this.hass.localize("ui.common.menu")}
-          .path=${mdiDotsVertical}
-        ></ha-icon-button>
+            <ha-md-menu-item .clickAction=${this._runAction}>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.run"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
+            </ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._renameAction}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.rename"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+            </ha-md-menu-item>
+            <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+            <ha-md-menu-item
+              .clickAction=${this._duplicateAction}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.duplicate"
+              )}
+              <ha-svg-icon
+                slot="start"
+                .path=${mdiContentDuplicate}
+              ></ha-svg-icon>
+            </ha-md-menu-item>

-        ${!this.optionsInSidebar
-          ? html`<ha-md-menu-item .clickAction=${this._runAction}>
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.actions.run"
-                )}
-                <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
-              </ha-md-menu-item>
-              <ha-md-menu-item
-                .clickAction=${this._renameAction}
-                .disabled=${this.disabled}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.actions.rename"
-                )}
-                <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-              </ha-md-menu-item>
-              <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-              <ha-md-menu-item
-                .clickAction=${this._duplicateAction}
-                .disabled=${this.disabled}
-              >
-                ${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
+              .clickAction=${this._copyAction}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.copy"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
+            </ha-md-menu-item>

-              <ha-md-menu-item
-                .clickAction=${this._copyAction}
-                .disabled=${this.disabled}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.triggers.copy"
-                )}
-                <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-              </ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._cutAction}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.cut"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
+            </ha-md-menu-item>

-              <ha-md-menu-item
-                .clickAction=${this._cutAction}
-                .disabled=${this.disabled}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.triggers.cut"
-                )}
-                <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
-              </ha-md-menu-item>`
-          : nothing}
+            <ha-md-menu-item
+              .clickAction=${this._moveUp}
+              .disabled=${this.disabled || !!this.first}
+            >
+              ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
+              <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
+            ></ha-md-menu-item>

-        <ha-md-menu-item
-          .clickAction=${this._moveUp}
-          .disabled=${this.disabled || !!this.first}
-        >
-          ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
-          <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
-        ></ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._moveDown}
+              .disabled=${this.disabled || !!this.last}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.move_down"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
+            ></ha-md-menu-item>

-        <ha-md-menu-item
-          .clickAction=${this._moveDown}
-          .disabled=${this.disabled || !!this.last}
-        >
-          ${this.hass.localize("ui.panel.config.automation.editor.move_down")}
-          <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
-        ></ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._toggleYamlMode}
+              .disabled=${!this._uiModeAvailable || !!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>
+            </ha-md-menu-item>

-        ${!this.optionsInSidebar
-          ? html`<ha-md-menu-item
-                .clickAction=${this._toggleYamlMode}
-                .disabled=${!this._uiModeAvailable || !!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>
-              </ha-md-menu-item>
+            <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>

-              <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-
-              <ha-md-menu-item
-                .clickAction=${this._onDisable}
-                .disabled=${this.disabled}
-              >
-                ${this.action.enabled === false
-                  ? this.hass.localize(
-                      "ui.panel.config.automation.editor.actions.enable"
-                    )
-                  : this.hass.localize(
-                      "ui.panel.config.automation.editor.actions.disable"
-                    )}
-                <ha-svg-icon
-                  slot="start"
-                  .path=${this.action.enabled === false
-                    ? mdiPlayCircleOutline
-                    : mdiStopCircleOutline}
-                ></ha-svg-icon>
-              </ha-md-menu-item>
-              <ha-md-menu-item
+            <ha-md-menu-item
+              .clickAction=${this._onDisable}
+              .disabled=${this.disabled}
+            >
+              ${this.action.enabled === false
+                ? this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.enable"
+                  )
+                : this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.disable"
+                  )}
+              <ha-svg-icon
+                slot="start"
+                .path=${this.action.enabled === false
+                  ? mdiPlayCircleOutline
+                  : mdiStopCircleOutline}
+              ></ha-svg-icon>
+            </ha-md-menu-item>
+            <ha-md-menu-item
+              class="warning"
+              .clickAction=${this._onDelete}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.delete"
+              )}
+              <ha-svg-icon
                class="warning"
-                .clickAction=${this._onDelete}
-                .disabled=${this.disabled}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.actions.delete"
-                )}
-                <ha-svg-icon
-                  class="warning"
-                  slot="start"
-                  .path=${mdiDelete}
-                ></ha-svg-icon>
-              </ha-md-menu-item>`
-          : nothing}
-      </ha-md-button-menu>
-
+                slot="start"
+                .path=${mdiDelete}
+              ></ha-svg-icon>
+            </ha-md-menu-item>
+          </ha-md-button-menu>`
+        : nothing}
      ${!this.optionsInSidebar
        ? html`${this._warnings
              ? html`<ha-automation-editor-warning
@@ -442,11 +449,13 @@ 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}
              >${this._renderRow()}</ha-automation-row
            >`
          : html`
@@ -670,16 +679,19 @@ export default class HaAutomationActionRow extends LitElement {
      save: (value) => {
        fireEvent(this, "value-changed", { value });
      },
-      close: () => {
+      close: (focus?: boolean) => {
        this._selected = false;
        fireEvent(this, "close-sidebar");
+        if (focus) {
+          this.focus();
+        }
      },
      rename: () => {
        this._renameAction();
      },
      toggleYamlMode: () => {
        this._toggleYamlMode();
-        return this._yamlMode;
+        this.openSidebar();
      },
      disable: this._onDisable,
      delete: this._onDelete,
@@ -697,9 +709,11 @@ export default class HaAutomationActionRow extends LitElement {
    this._collapsed = false;

    if (this.narrow) {
-      this.scrollIntoView({
-        block: "start",
-        behavior: "smooth",
+      requestAnimationFrame(() => {
+        this.scrollIntoView({
+          block: "start",
+          behavior: "smooth",
+        });
      });
    }
  }
@@ -747,6 +761,14 @@ export default class HaAutomationActionRow extends LitElement {
    this._collapsed = !this._collapsed;
  }

+  public isSelected() {
+    return this._selected;
+  }
+
+  public focus() {
+    this._automationRowElement?.focus();
+  }
+
  static styles = rowStyles;
 }

--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@@ -1,15 +1,15 @@
 import { mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 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,
@@ -45,7 +45,7 @@ export default class HaAutomationAction extends LitElement {
  @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar =
    false;

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

  @state()
  @storage({
@@ -61,36 +61,24 @@ export default class HaAutomationAction extends LitElement {

  private _focusLastActionOnChange = false;

+  private _focusActionIndexOnChange?: number;
+
  private _actionKeys = new WeakMap<Action, string>();

-  private _unsubMql?: () => void;
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
-      this._showReorder = matches;
-    });
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._unsubMql?.();
-    this._unsubMql = undefined;
-  }
-
  protected render() {
    return html`
      <ha-sortable
        handle-selector=".handle"
        draggable-selector="ha-automation-action-row"
-        .disabled=${!this._showReorder || this.disabled}
+        .disabled=${this.disabled}
        group="actions"
        invert-swap
        @item-moved=${this._actionMoved}
        @item-added=${this._actionAdded}
        @item-removed=${this._actionRemoved}
+        @item-cloned=${this._actionCloned}
      >
-        <div class="rows">
+        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
          ${repeat(
            this.actions,
            (action) => this._getKey(action),
@@ -109,12 +97,22 @@ export default class HaAutomationAction extends LitElement {
                @move-up=${this._moveUp}
                @value-changed=${this._actionChanged}
                .hass=${this.hass}
-                ?highlight=${this.highlightedActions?.includes(action)}
+                .highlight=${this.highlightedActions?.includes(action)}
                .optionsInSidebar=${this.optionsInSidebar}
+                .sortSelected=${this._rowSortSelected === idx}
+                @stop-sort-selection=${this._stopSortSelection}
              >
-                ${this._showReorder && !this.disabled
+                ${!this.disabled
                  ? html`
-                      <div class="handle" slot="icons">
+                      <div
+                        tabindex="0"
+                        class="handle ${this._rowSortSelected === idx
+                          ? "active"
+                          : ""}"
+                        slot="icons"
+                        @keydown=${this._handleDragKeydown}
+                        .index=${idx}
+                      >
                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                      </div>
                    `
@@ -154,19 +152,27 @@ export default class HaAutomationAction extends LitElement {
  protected updated(changedProps: PropertyValues) {
    super.updated(changedProps);

-    if (changedProps.has("actions") && this._focusLastActionOnChange) {
-      this._focusLastActionOnChange = false;
+    if (
+      changedProps.has("actions") &&
+      (this._focusLastActionOnChange ||
+        this._focusActionIndexOnChange !== undefined)
+    ) {
+      const mode = this._focusLastActionOnChange ? "new" : "moved";

      const row = this.shadowRoot!.querySelector<HaAutomationActionRow>(
-        "ha-automation-action-row:last-of-type"
+        `ha-automation-action-row:${mode === "new" ? "last-of-type" : `nth-of-type(${this._focusActionIndexOnChange! + 1})`}`
      )!;
+
+      this._focusLastActionOnChange = false;
+      this._focusActionIndexOnChange = undefined;
+
      row.updateComplete.then(() => {
        // on new condition open the settings in the sidebar, except for building blocks
        const type = getAutomationActionType(row.action);
        if (
          type &&
          this.optionsInSidebar &&
-          !ACTION_BUILDING_BLOCKS.includes(type)
+          (!ACTION_BUILDING_BLOCKS.includes(type) || mode === "moved")
        ) {
          row.openSidebar();
          if (this.narrow) {
@@ -176,8 +182,14 @@ export default class HaAutomationAction extends LitElement {
            });
          }
        }
-        row.expand();
-        row.focus();
+
+        if (mode === "new") {
+          row.expand();
+        }
+
+        if (!this.optionsInSidebar) {
+          row.focus();
+        }
      });
    }
  }
@@ -246,18 +258,30 @@ export default class HaAutomationAction extends LitElement {
    return this._actionKeys.get(action)!;
  }

-  private _moveUp(ev) {
+  private async _moveUp(ev) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
-    const newIndex = index - 1;
-    this._move(index, newIndex);
+    if (!(ev.target as HaAutomationActionRow).first) {
+      const newIndex = index - 1;
+      this._move(index, newIndex);
+      if (this._rowSortSelected === index) {
+        this._rowSortSelected = newIndex;
+      }
+      ev.target.focus();
+    }
  }

-  private _moveDown(ev) {
+  private async _moveDown(ev) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
-    const newIndex = index + 1;
-    this._move(index, newIndex);
+    if (!(ev.target as HaAutomationActionRow).last) {
+      const newIndex = index + 1;
+      this._move(index, newIndex);
+      if (this._rowSortSelected === index) {
+        this._rowSortSelected = newIndex;
+      }
+      ev.target.focus();
+    }
  }

  private _move(oldIndex: number, newIndex: number) {
@@ -277,6 +301,12 @@ export default class HaAutomationAction extends LitElement {
  private async _actionAdded(ev: CustomEvent): Promise<void> {
    ev.stopPropagation();
    const { index, data } = ev.detail;
+    let selected = false;
+    if (data?.["ha-automation-row-selected"]) {
+      selected = true;
+      delete data["ha-automation-row-selected"];
+    }
+
    let actions = [
      ...this.actions.slice(0, index),
      data,
@@ -284,6 +314,9 @@ export default class HaAutomationAction extends LitElement {
    ];
    // Add action locally to avoid UI jump
    this.actions = actions;
+    if (selected) {
+      this._focusActionIndexOnChange = actions.length === 1 ? 0 : index;
+    }
    await nextRender();
    if (this.actions !== actions) {
      // Ensure action is added even after update
@@ -292,6 +325,9 @@ export default class HaAutomationAction extends LitElement {
        data,
        ...this.actions.slice(index),
      ];
+      if (selected) {
+        this._focusActionIndexOnChange = actions.length === 1 ? 0 : index;
+      }
    }
    fireEvent(this, "value-changed", { value: actions });
  }
@@ -327,6 +363,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;
@@ -335,14 +377,21 @@ export default class HaAutomationAction extends LitElement {
    });
  }

-  static styles = [
-    automationRowsStyles,
-    css`
-      :host([root]) .rows {
-        padding-right: 8px;
-      }
-    `,
-  ];
+  private _handleDragKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.stopPropagation();
+      this._rowSortSelected =
+        this._rowSortSelected === undefined
+          ? (ev.target as any).index
+          : undefined;
+    }
+  }
+
+  private _stopSortSelection() {
+    this._rowSortSelected = undefined;
+  }
+
+  static styles = automationRowsStyles;
 }

 declare global {
--- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts
@@ -28,6 +28,8 @@ export default class HaAutomationConditionEditor extends LitElement {

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

+  @property({ type: Boolean, attribute: "sidebar" }) public inSidebar = false;
+
  @property({ type: Boolean, reflect: true }) public selected = false;

  @property({ type: Boolean, attribute: "supported" }) public uiSupported =
@@ -55,6 +57,7 @@ export default class HaAutomationConditionEditor extends LitElement {
            (this.condition.enabled === false && !this.yamlMode),
          yaml: yamlMode,
          indent: this.indent,
+          card: !this.inSidebar,
        })}
      >
        ${yamlMode
@@ -100,8 +103,7 @@ export default class HaAutomationConditionEditor extends LitElement {
    if (!ev.detail.isValid) {
      return;
    }
-    // @ts-ignore
-    fireEvent(this, "value-changed", { value: ev.detail.value, yaml: true });
+    fireEvent(this, "yaml-changed", { value: ev.detail.value });
  }

  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
@@ -26,6 +26,7 @@ import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-automation-row";
+import type { HaAutomationRow } from "../../../../components/ha-automation-row";
 import "../../../../components/ha-card";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
@@ -115,6 +116,11 @@ 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;
+
  @state() private _collapsed = true;

  @state() private _warnings?: string[];
@@ -145,6 +151,9 @@ export default class HaAutomationConditionRow extends LitElement {
  @query("ha-automation-condition-editor")
  public conditionEditor?: HaAutomationConditionEditor;

+  @query("ha-automation-row")
+  private _automationRowElement?: HaAutomationRow;
+
  private _renderRow() {
    return html`
      <ha-svg-icon
@@ -160,143 +169,140 @@ export default class HaAutomationConditionRow extends LitElement {

      <slot name="icons" slot="icons"></slot>

-      <ha-md-button-menu
-        slot="icons"
-        @click=${preventDefaultStopPropagation}
-        @keydown=${stopPropagation}
-        @closed=${stopPropagation}
-        positioning="fixed"
-      >
-        <ha-icon-button
-          slot="trigger"
-          .label=${this.hass.localize("ui.common.menu")}
-          .path=${mdiDotsVertical}
-        >
-        </ha-icon-button>
+      ${!this.optionsInSidebar
+        ? html`<ha-md-button-menu
+            quick
+            slot="icons"
+            @click=${preventDefaultStopPropagation}
+            @keydown=${stopPropagation}
+            @closed=${stopPropagation}
+            positioning="fixed"
+            anchor-corner="end-end"
+            menu-corner="start-end"
+          >
+            <ha-icon-button
+              slot="trigger"
+              .label=${this.hass.localize("ui.common.menu")}
+              .path=${mdiDotsVertical}
+            >
+            </ha-icon-button>

-        ${!this.optionsInSidebar
-          ? html`
-              <ha-md-menu-item .clickAction=${this._testCondition}>
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.conditions.test"
-                )}
-                <ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon>
-              </ha-md-menu-item>
-              <ha-md-menu-item
-                .clickAction=${this._renameCondition}
-                .disabled=${this.disabled}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.conditions.rename"
-                )}
-                <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-              </ha-md-menu-item>
+            <ha-md-menu-item .clickAction=${this._testCondition}>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.test"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon>
+            </ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._renameCondition}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.conditions.rename"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+            </ha-md-menu-item>

-              <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+            <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>

-              <ha-md-menu-item
-                .clickAction=${this._duplicateCondition}
-                .disabled=${this.disabled}
-              >
-                ${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
+              .clickAction=${this._duplicateCondition}
+              .disabled=${this.disabled}
+            >
+              ${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
-                .clickAction=${this._copyCondition}
-                .disabled=${this.disabled}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.triggers.copy"
-                )}
-                <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-              </ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._copyCondition}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.copy"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
+            </ha-md-menu-item>

-              <ha-md-menu-item
-                .clickAction=${this._cutCondition}
-                .disabled=${this.disabled}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.triggers.cut"
-                )}
-                <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
-              </ha-md-menu-item>
-            `
-          : nothing}
+            <ha-md-menu-item
+              .clickAction=${this._cutCondition}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.cut"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
+            </ha-md-menu-item>

-        <ha-md-menu-item
-          .clickAction=${this._moveUp}
-          .disabled=${this.disabled || this.first}
-        >
-          ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
-          <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
-        ></ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._moveUp}
+              .disabled=${this.disabled || this.first}
+            >
+              ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
+              <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
+            ></ha-md-menu-item>

-        <ha-md-menu-item
-          .clickAction=${this._moveDown}
-          .disabled=${this.disabled || this.last}
-        >
-          ${this.hass.localize("ui.panel.config.automation.editor.move_down")}
-          <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
-        ></ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._moveDown}
+              .disabled=${this.disabled || this.last}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.move_down"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
+            ></ha-md-menu-item>

-        ${!this.optionsInSidebar
-          ? html`<ha-md-menu-item
-                .clickAction=${this._toggleYamlMode}
-                .disabled=${this._uiSupported(this.condition.condition) ||
-                !!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>
-              </ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._toggleYamlMode}
+              .disabled=${this._uiSupported(this.condition.condition) ||
+              !!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>
+            </ha-md-menu-item>

-              <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+            <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>

-              <ha-md-menu-item
-                .clickAction=${this._onDisable}
-                .disabled=${this.disabled}
-              >
-                ${this.condition.enabled === false
-                  ? this.hass.localize(
-                      "ui.panel.config.automation.editor.actions.enable"
-                    )
-                  : this.hass.localize(
-                      "ui.panel.config.automation.editor.actions.disable"
-                    )}
-                <ha-svg-icon
-                  slot="start"
-                  .path=${this.condition.enabled === false
-                    ? mdiPlayCircleOutline
-                    : mdiStopCircleOutline}
-                ></ha-svg-icon>
-              </ha-md-menu-item>
-              <ha-md-menu-item
+            <ha-md-menu-item
+              .clickAction=${this._onDisable}
+              .disabled=${this.disabled}
+            >
+              ${this.condition.enabled === false
+                ? this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.enable"
+                  )
+                : this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.disable"
+                  )}
+              <ha-svg-icon
+                slot="start"
+                .path=${this.condition.enabled === false
+                  ? mdiPlayCircleOutline
+                  : mdiStopCircleOutline}
+              ></ha-svg-icon>
+            </ha-md-menu-item>
+            <ha-md-menu-item
+              class="warning"
+              .clickAction=${this._onDelete}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.delete"
+              )}
+              <ha-svg-icon
                class="warning"
-                .clickAction=${this._onDelete}
-                .disabled=${this.disabled}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.actions.delete"
-                )}
-                <ha-svg-icon
-                  class="warning"
-                  slot="start"
-                  .path=${mdiDelete}
-                ></ha-svg-icon>
-              </ha-md-menu-item>`
-          : nothing}
-      </ha-md-button-menu>
-
+                slot="start"
+                .path=${mdiDelete}
+              ></ha-svg-icon>
+            </ha-md-menu-item>
+          </ha-md-button-menu>`
+        : nothing}
      ${!this.optionsInSidebar
        ? html`${this._warnings
              ? html`<ha-automation-editor-warning
@@ -351,11 +357,13 @@ 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}
              >${this._renderRow()}</ha-automation-row
            >`
          : html`
@@ -643,16 +651,19 @@ export default class HaAutomationConditionRow extends LitElement {
      save: (value) => {
        fireEvent(this, "value-changed", { value });
      },
-      close: () => {
+      close: (focus?: boolean) => {
        this._selected = false;
        fireEvent(this, "close-sidebar");
+        if (focus) {
+          this.focus();
+        }
      },
      rename: () => {
        this._renameCondition();
      },
      toggleYamlMode: () => {
        this._toggleYamlMode();
-        return this._yamlMode;
+        this.openSidebar();
      },
      disable: this._onDisable,
      delete: this._onDelete,
@@ -668,9 +679,11 @@ export default class HaAutomationConditionRow extends LitElement {
    this._collapsed = false;

    if (this.narrow) {
-      this.scrollIntoView({
-        block: "start",
-        behavior: "smooth",
+      requestAnimationFrame(() => {
+        this.scrollIntoView({
+          block: "start",
+          behavior: "smooth",
+        });
      });
    }
  }
@@ -684,6 +697,14 @@ export default class HaAutomationConditionRow extends LitElement {
    this._collapsed = !this._collapsed;
  }

+  public isSelected() {
+    return this._selected;
+  }
+
+  public focus() {
+    this._automationRowElement?.focus();
+  }
+
  static get styles(): CSSResultGroup {
    return [
      rowStyles,
--- a/src/panels/config/automation/condition/ha-automation-condition.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -1,16 +1,16 @@
 import { mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 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,
@@ -43,7 +43,7 @@ export default class HaAutomationCondition extends LitElement {
  @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar =
    false;

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

  @state()
  @storage({
@@ -59,23 +59,10 @@ export default class HaAutomationCondition extends LitElement {

  private _focusLastConditionOnChange = false;

+  private _focusConditionIndexOnChange?: number;
+
  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;
@@ -100,16 +87,25 @@ export default class HaAutomationCondition extends LitElement {
      fireEvent(this, "value-changed", {
        value: updatedConditions,
      });
-    } else if (this._focusLastConditionOnChange) {
-      this._focusLastConditionOnChange = false;
+    } else if (
+      this._focusLastConditionOnChange ||
+      this._focusConditionIndexOnChange !== undefined
+    ) {
+      const mode = this._focusLastConditionOnChange ? "new" : "moved";
+
      const row = this.shadowRoot!.querySelector<HaAutomationConditionRow>(
-        "ha-automation-condition-row:last-of-type"
+        `ha-automation-condition-row:${mode === "new" ? "last-of-type" : `nth-of-type(${this._focusConditionIndexOnChange! + 1})`}`
      )!;
+
+      this._focusLastConditionOnChange = false;
+      this._focusConditionIndexOnChange = undefined;
+
      row.updateComplete.then(() => {
        // on new condition open the settings in the sidebar, except for building blocks
        if (
          this.optionsInSidebar &&
-          !CONDITION_BUILDING_BLOCKS.includes(row.condition.condition)
+          (!CONDITION_BUILDING_BLOCKS.includes(row.condition.condition) ||
+            mode === "moved")
        ) {
          row.openSidebar();
          if (this.narrow) {
@@ -119,8 +115,14 @@ export default class HaAutomationCondition extends LitElement {
            });
          }
        }
-        row.expand();
-        row.focus();
+
+        if (mode === "new") {
+          row.expand();
+        }
+
+        if (!this.optionsInSidebar) {
+          row.focus();
+        }
      });
    }
  }
@@ -145,14 +147,15 @@ export default class HaAutomationCondition extends LitElement {
      <ha-sortable
        handle-selector=".handle"
        draggable-selector="ha-automation-condition-row"
-        .disabled=${!this._showReorder || this.disabled}
+        .disabled=${this.disabled}
        group="conditions"
        invert-swap
        @item-moved=${this._conditionMoved}
        @item-added=${this._conditionAdded}
        @item-removed=${this._conditionRemoved}
+        @item-cloned=${this._conditionCloned}
      >
-        <div class="rows">
+        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
          ${repeat(
            this.conditions.filter((c) => typeof c === "object"),
            (condition) => this._getKey(condition),
@@ -172,12 +175,22 @@ export default class HaAutomationCondition extends LitElement {
                @move-up=${this._moveUp}
                @value-changed=${this._conditionChanged}
                .hass=${this.hass}
-                ?highlight=${this.highlightedConditions?.includes(cond)}
+                .highlight=${this.highlightedConditions?.includes(cond)}
                .optionsInSidebar=${this.optionsInSidebar}
+                .sortSelected=${this._rowSortSelected === idx}
+                @stop-sort-selection=${this._stopSortSelection}
              >
-                ${this._showReorder && !this.disabled
+                ${!this.disabled
                  ? html`
-                      <div class="handle" slot="icons">
+                      <div
+                        tabindex="0"
+                        class="handle ${this._rowSortSelected === idx
+                          ? "active"
+                          : ""}"
+                        slot="icons"
+                        @keydown=${this._handleDragKeydown}
+                        .index=${idx}
+                      >
                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                      </div>
                    `
@@ -266,15 +279,27 @@ export default class HaAutomationCondition extends LitElement {
  private _moveUp(ev) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
-    const newIndex = index - 1;
-    this._move(index, newIndex);
+    if (!(ev.target as HaAutomationConditionRow).first) {
+      const newIndex = index - 1;
+      this._move(index, newIndex);
+      if (this._rowSortSelected === index) {
+        this._rowSortSelected = newIndex;
+      }
+      ev.target.focus();
+    }
  }

  private _moveDown(ev) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
-    const newIndex = index + 1;
-    this._move(index, newIndex);
+    if (!(ev.target as HaAutomationConditionRow).last) {
+      const newIndex = index + 1;
+      this._move(index, newIndex);
+      if (this._rowSortSelected === index) {
+        this._rowSortSelected = newIndex;
+      }
+      ev.target.focus();
+    }
  }

  private _move(oldIndex: number, newIndex: number) {
@@ -294,6 +319,11 @@ export default class HaAutomationCondition extends LitElement {
  private async _conditionAdded(ev: CustomEvent): Promise<void> {
    ev.stopPropagation();
    const { index, data } = ev.detail;
+    let selected = false;
+    if (data?.["ha-automation-row-selected"]) {
+      selected = true;
+      delete data["ha-automation-row-selected"];
+    }
    let conditions = [
      ...this.conditions.slice(0, index),
      data,
@@ -301,6 +331,9 @@ export default class HaAutomationCondition extends LitElement {
    ];
    // Add condition locally to avoid UI jump
    this.conditions = conditions;
+    if (selected) {
+      this._focusConditionIndexOnChange = conditions.length === 1 ? 0 : index;
+    }
    await nextRender();
    if (this.conditions !== conditions) {
      // Ensure condition is added even after update
@@ -309,6 +342,9 @@ export default class HaAutomationCondition extends LitElement {
        data,
        ...this.conditions.slice(index),
      ];
+      if (selected) {
+        this._focusConditionIndexOnChange = conditions.length === 1 ? 0 : index;
+      }
    }
    fireEvent(this, "value-changed", { value: conditions });
  }
@@ -325,6 +361,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];
@@ -354,14 +396,21 @@ export default class HaAutomationCondition extends LitElement {
    });
  }

-  static styles = [
-    automationRowsStyles,
-    css`
-      :host([root]) .rows {
-        padding-right: 8px;
-      }
-    `,
-  ];
+  private _handleDragKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.stopPropagation();
+      this._rowSortSelected =
+        this._rowSortSelected === undefined
+          ? (ev.target as any).index
+          : undefined;
+    }
+  }
+
+  private _stopSortSelection() {
+    this._rowSortSelected = undefined;
+  }
+
+  static styles = automationRowsStyles;
 }

 declare global {
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -432,62 +432,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
          class=${this._mode === "yaml" ? "yaml-mode" : ""}
          @subscribe-automation-config=${this._subscribeAutomationConfig}
        >
-          <div class="error-wrapper">
-            ${this._errors || stateObj?.state === UNAVAILABLE
-              ? html`<ha-alert
-                  alert-type="error"
-                  .title=${stateObj?.state === UNAVAILABLE
-                    ? this.hass.localize(
-                        "ui.panel.config.automation.editor.unavailable"
-                      )
-                    : undefined}
-                >
-                  ${this._errors || this._validationErrors}
-                  ${stateObj?.state === UNAVAILABLE
-                    ? html`<ha-svg-icon
-                        slot="icon"
-                        .path=${mdiRobotConfused}
-                      ></ha-svg-icon>`
-                    : nothing}
-                </ha-alert>`
-              : ""}
-            ${this._blueprintConfig
-              ? html`<ha-alert alert-type="info">
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.confirm_take_control"
-                  )}
-                  <div slot="action" style="display: flex;">
-                    <ha-button
-                      appearance="plain"
-                      @click=${this._takeControlSave}
-                      >${this.hass.localize("ui.common.yes")}</ha-button
-                    >
-                    <ha-button
-                      appearance="plain"
-                      @click=${this._revertBlueprint}
-                      >${this.hass.localize("ui.common.no")}</ha-button
-                    >
-                  </div>
-                </ha-alert>`
-              : this._readOnly
-                ? html`<ha-alert alert-type="warning" dismissable
-                    >${this.hass.localize(
-                      "ui.panel.config.automation.editor.read_only"
-                    )}
-                    <ha-button
-                      appearance="filled"
-                      size="small"
-                      variant="warning"
-                      slot="action"
-                      @click=${this._duplicate}
-                    >
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.editor.migrate"
-                      )}
-                    </ha-button>
-                  </ha-alert>`
-                : nothing}
-          </div>
          ${this._mode === "gui"
            ? html`
                <div>
@@ -499,7 +443,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                          .isWide=${this.isWide}
                          .stateObj=${stateObj}
                          .config=${this._config}
-                          .disabled=${Boolean(this._readOnly)}
+                          .disabled=${this._readOnly}
                          .saving=${this._saving}
                          .dirty=${this._dirty}
                          @value-changed=${this._valueChanged}
@@ -513,13 +457,94 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                          .isWide=${this.isWide}
                          .stateObj=${stateObj}
                          .config=${this._config}
-                          .disabled=${Boolean(this._readOnly)}
+                          .disabled=${this._readOnly}
                          .dirty=${this._dirty}
                          .saving=${this._saving}
                          @value-changed=${this._valueChanged}
                          @save-automation=${this._handleSaveAutomation}
                          @editor-save=${this._handleSaveAutomation}
-                        ></manual-automation-editor>
+                        >
+                          <div class="alert-wrapper" slot="alerts">
+                            ${this._errors || stateObj?.state === UNAVAILABLE
+                              ? html`<ha-alert
+                                  alert-type="error"
+                                  .title=${stateObj?.state === UNAVAILABLE
+                                    ? this.hass.localize(
+                                        "ui.panel.config.automation.editor.unavailable"
+                                      )
+                                    : undefined}
+                                >
+                                  ${this._errors || this._validationErrors}
+                                  ${stateObj?.state === UNAVAILABLE
+                                    ? html`<ha-svg-icon
+                                        slot="icon"
+                                        .path=${mdiRobotConfused}
+                                      ></ha-svg-icon>`
+                                    : nothing}
+                                </ha-alert>`
+                              : nothing}
+                            ${this._blueprintConfig
+                              ? html`<ha-alert alert-type="info">
+                                  ${this.hass.localize(
+                                    "ui.panel.config.automation.editor.confirm_take_control"
+                                  )}
+                                  <div slot="action" style="display: flex;">
+                                    <ha-button
+                                      appearance="plain"
+                                      @click=${this._takeControlSave}
+                                      >${this.hass.localize(
+                                        "ui.common.yes"
+                                      )}</ha-button
+                                    >
+                                    <ha-button
+                                      appearance="plain"
+                                      @click=${this._revertBlueprint}
+                                      >${this.hass.localize(
+                                        "ui.common.no"
+                                      )}</ha-button
+                                    >
+                                  </div>
+                                </ha-alert>`
+                              : this._readOnly
+                                ? html`<ha-alert
+                                    alert-type="warning"
+                                    dismissable
+                                    >${this.hass.localize(
+                                      "ui.panel.config.automation.editor.read_only"
+                                    )}
+                                    <ha-button
+                                      appearance="filled"
+                                      size="small"
+                                      variant="warning"
+                                      slot="action"
+                                      @click=${this._duplicate}
+                                    >
+                                      ${this.hass.localize(
+                                        "ui.panel.config.automation.editor.migrate"
+                                      )}
+                                    </ha-button>
+                                  </ha-alert>`
+                                : nothing}
+                            ${stateObj?.state === "off"
+                              ? html`
+                                  <ha-alert alert-type="info">
+                                    ${this.hass.localize(
+                                      "ui.panel.config.automation.editor.disabled"
+                                    )}
+                                    <ha-button
+                                      size="small"
+                                      slot="action"
+                                      @click=${this._toggle}
+                                    >
+                                      ${this.hass.localize(
+                                        "ui.panel.config.automation.editor.enable"
+                                      )}
+                                    </ha-button>
+                                  </ha-alert>
+                                `
+                              : nothing}
+                          </div>
+                        </manual-automation-editor>
                      `}
                </div>
              `
@@ -542,7 +567,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                          </ha-button>
                        </ha-alert>
                      `
-                    : ""}
+                    : nothing}
                  <ha-yaml-editor
                    copy-clipboard
                    .hass=${this.hass}
@@ -1156,22 +1181,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
          display: block;
        }

-        :not(.yaml-mode) > .error-wrapper {
-          position: absolute;
-          top: 4px;
-          z-index: 3;
-          width: 100%;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-        }
-
-        :not(.yaml-mode) > .error-wrapper ha-alert {
-          background-color: var(--card-background-color);
-          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-          border-radius: var(--ha-border-radius-sm);
-        }
-
        manual-automation-editor {
          max-width: 1540px;
          padding: 0 12px;
--- a/src/panels/config/automation/ha-automation-sidebar.ts
+++ b/src/panels/config/automation/ha-automation-sidebar.ts
@@ -1,6 +1,5 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-bottom-sheet";
 import type { HaBottomSheet } from "../../../components/ha-bottom-sheet";
 import {
@@ -34,6 +33,8 @@ export default class HaAutomationSidebar extends LitElement {

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

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

  @query("ha-bottom-sheet") private _bottomSheetElement?: HaBottomSheet;
@@ -52,6 +53,7 @@ export default class HaAutomationSidebar extends LitElement {
          .narrow=${this.narrow}
          .disabled=${this.disabled}
          .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
          @toggle-yaml-mode=${this._toggleYamlMode}
          @close-sidebar=${this._handleCloseSidebar}
        ></ha-automation-sidebar-trigger>
@@ -67,6 +69,7 @@ export default class HaAutomationSidebar extends LitElement {
          .narrow=${this.narrow}
          .disabled=${this.disabled}
          .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
          @toggle-yaml-mode=${this._toggleYamlMode}
          @close-sidebar=${this._handleCloseSidebar}
        ></ha-automation-sidebar-condition>
@@ -82,6 +85,7 @@ export default class HaAutomationSidebar extends LitElement {
          .narrow=${this.narrow}
          .disabled=${this.disabled}
          .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
          @toggle-yaml-mode=${this._toggleYamlMode}
          @close-sidebar=${this._handleCloseSidebar}
        ></ha-automation-sidebar-action>
@@ -110,6 +114,7 @@ export default class HaAutomationSidebar extends LitElement {
          .narrow=${this.narrow}
          .disabled=${this.disabled}
          .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
          @toggle-yaml-mode=${this._toggleYamlMode}
          @close-sidebar=${this._handleCloseSidebar}
        ></ha-automation-sidebar-script-field-selector>
@@ -125,6 +130,7 @@ export default class HaAutomationSidebar extends LitElement {
          .narrow=${this.narrow}
          .disabled=${this.disabled}
          .yamlMode=${this._yamlMode}
+          .sidebarKey=${this.sidebarKey}
          @toggle-yaml-mode=${this._toggleYamlMode}
          @close-sidebar=${this._handleCloseSidebar}
        ></ha-automation-sidebar-script-field>
@@ -193,17 +199,11 @@ export default class HaAutomationSidebar extends LitElement {
  }

  private _closeSidebar() {
-    this.config?.close();
+    this.config?.close(true);
  }

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

  static styles = css`
@@ -235,5 +235,8 @@ 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
@@ -23,7 +23,6 @@ import {
  extractSearchParam,
  removeSearchParam,
 } from "../../../common/url/search-params";
-import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-button";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon-button";
@@ -93,8 +92,7 @@ export class HaManualAutomationEditor extends LitElement {

  @state() private _sidebarConfig?: SidebarConfig;

-  @query(".content")
-  private _contentElement?: HTMLDivElement;
+  @state() private _sidebarKey?: string;

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

@@ -112,20 +110,6 @@ export class HaManualAutomationEditor extends LitElement {

  private _renderContent() {
    return html`
-      ${this.stateObj?.state === "off"
-        ? html`
-            <ha-alert alert-type="info">
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.disabled"
-              )}
-              <ha-button size="small" slot="action" @click=${this._enable}>
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.enable"
-                )}
-              </ha-button>
-            </ha-alert>
-          `
-        : nothing}
      ${this.config.description
        ? html`<ha-markdown
            class="description"
@@ -274,37 +258,40 @@ export class HaManualAutomationEditor extends LitElement {
    return html`
      <div
        class=${classMap({
-          "split-view": true,
-          "sidebar-hidden": !this._sidebarConfig,
+          "has-sidebar": this._sidebarConfig && !this.narrow,
        })}
      >
        <div class="content-wrapper">
-          <div class="content">${this._renderContent()}</div>
-          <ha-fab
-            slot="fab"
-            class=${this.dirty ? "dirty" : ""}
-            .label=${this.hass.localize("ui.common.save")}
-            .disabled=${this.saving}
-            extended
-            @click=${this._saveAutomation}
-          >
-            <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
-          </ha-fab>
+          <div class="content">
+            <slot name="alerts"></slot>
+            ${this._renderContent()}
+          </div>
+          <div class="fab-positioner">
+            <ha-fab
+              slot="fab"
+              class=${this.dirty ? "dirty" : ""}
+              .label=${this.hass.localize("ui.common.save")}
+              .disabled=${this.saving}
+              extended
+              @click=${this._saveAutomation}
+            >
+              <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
+            </ha-fab>
+          </div>
+        </div>
+        <div class="sidebar-positioner">
+          <ha-automation-sidebar
+            tabindex="-1"
+            class=${classMap({ hidden: !this._sidebarConfig })}
+            .isWide=${this.isWide}
+            .hass=${this.hass}
+            .narrow=${this.narrow}
+            .config=${this._sidebarConfig}
+            @value-changed=${this._sidebarConfigChanged}
+            .disabled=${this.disabled}
+            .sidebarKey=${this._sidebarKey}
+          ></ha-automation-sidebar>
        </div>
-        <ha-automation-sidebar
-          tabindex="-1"
-          class=${classMap({
-            sidebar: true,
-            overlay: !this.isWide && !this.narrow,
-            rtl: computeRTL(this.hass),
-          })}
-          .isWide=${this.isWide}
-          .hass=${this.hass}
-          .narrow=${this.narrow}
-          .config=${this._sidebarConfig}
-          @value-changed=${this._sidebarConfigChanged}
-          .disabled=${this.disabled}
-        ></ha-automation-sidebar>
      </div>
    `;
  }
@@ -330,6 +317,7 @@ export class HaManualAutomationEditor extends LitElement {
    // deselect previous selected row
    this._sidebarConfig?.close?.();
    this._sidebarConfig = ev.detail;
+    this._sidebarKey = JSON.stringify(this._sidebarConfig);

    await this._sidebarElement?.updateComplete;
    this._sidebarElement?.focus();
@@ -355,8 +343,6 @@ export class HaManualAutomationEditor extends LitElement {

  private _handleCloseSidebar() {
    this._sidebarConfig = undefined;
-    // fix content shift when bottom rows are scrolled into view
-    this._contentElement?.scrollIntoView();
  }

  private _triggerChanged(ev: CustomEvent): void {
@@ -386,15 +372,6 @@ export class HaManualAutomationEditor extends LitElement {
    });
  }

-  private async _enable(): Promise<void> {
-    if (!this.hass || !this.stateObj) {
-      return;
-    }
-    await this.hass.callService("automation", "turn_on", {
-      entity_id: this.stateObj.entity_id,
-    });
-  }
-
  private _saveAutomation() {
    this._closeSidebar();
    fireEvent(this, "save-automation");
@@ -656,9 +633,8 @@ export class HaManualAutomationEditor extends LitElement {
          line-height: 0;
        }

-        ha-alert {
-          display: block;
-          margin-bottom: 16px;
+        .description {
+          margin-top: 16px;
        }
      `,
    ];
--- a/src/panels/config/automation/option/ha-automation-option-row.ts
+++ b/src/panels/config/automation/option/ha-automation-option-row.ts
@@ -17,6 +17,7 @@ import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_de
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 import "../../../../components/ha-automation-row";
+import type { HaAutomationRow } from "../../../../components/ha-automation-row";
 import "../../../../components/ha-card";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
@@ -63,6 +64,9 @@ export default class HaAutomationOptionRow extends LitElement {
  @property({ type: Boolean, attribute: "sidebar" })
  public optionsInSidebar = false;

+  @property({ type: Boolean, attribute: "sort-selected" })
+  public sortSelected = false;
+
  @state() private _expanded = false;

  @state() private _selected = false;
@@ -79,6 +83,9 @@ export default class HaAutomationOptionRow extends LitElement {
  @query("ha-automation-action")
  private _actionElement?: HaAutomationAction;

+  @query("ha-automation-row")
+  private _automationRowElement?: HaAutomationRow;
+
  private _expandedChanged(ev) {
    if (ev.currentTarget.id !== "option") {
      return;
@@ -123,14 +130,17 @@ export default class HaAutomationOptionRow extends LitElement {

      <slot name="icons" slot="icons"></slot>

-      ${this.option
+      ${this.option && !this.optionsInSidebar
        ? html`
            <ha-md-button-menu
+              quick
              slot="icons"
              @click=${preventDefaultStopPropagation}
              @closed=${stopPropagation}
              @keydown=${stopPropagation}
              positioning="fixed"
+              anchor-corner="end-end"
+              menu-corner="start-end"
            >
              <ha-icon-button
                slot="trigger"
@@ -138,35 +148,28 @@ export default class HaAutomationOptionRow extends LitElement {
                .path=${mdiDotsVertical}
              ></ha-icon-button>

-              ${!this.optionsInSidebar
-                ? html`
-                    <ha-md-menu-item
-                      @click=${this._renameOption}
-                      .disabled=${this.disabled}
-                    >
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.editor.actions.rename"
-                      )}
-                      <ha-svg-icon
-                        slot="graphic"
-                        .path=${mdiRenameBox}
-                      ></ha-svg-icon>
-                    </ha-md-menu-item>
+              <ha-md-menu-item
+                @click=${this._renameOption}
+                .disabled=${this.disabled}
+              >
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.actions.rename"
+                )}
+                <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+              </ha-md-menu-item>

-                    <ha-md-menu-item
-                      @click=${this._duplicateOption}
-                      .disabled=${this.disabled}
-                    >
-                      ${this.hass.localize(
-                        "ui.panel.config.automation.editor.actions.duplicate"
-                      )}
-                      <ha-svg-icon
-                        slot="graphic"
-                        .path=${mdiContentDuplicate}
-                      ></ha-svg-icon>
-                    </ha-md-menu-item>
-                  `
-                : nothing}
+              <ha-md-menu-item
+                @click=${this._duplicateOption}
+                .disabled=${this.disabled}
+              >
+                ${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
                @click=${this._moveUp}
@@ -175,7 +178,7 @@ export default class HaAutomationOptionRow extends LitElement {
                ${this.hass.localize(
                  "ui.panel.config.automation.editor.move_up"
                )}
-                <ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon>
+                <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon>
              </ha-md-menu-item>

              <ha-md-menu-item
@@ -185,25 +188,23 @@ export default class HaAutomationOptionRow extends LitElement {
                ${this.hass.localize(
                  "ui.panel.config.automation.editor.move_down"
                )}
-                <ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon>
+                <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon>
              </ha-md-menu-item>

-              ${!this.optionsInSidebar
-                ? html`<ha-md-menu-item
-                    @click=${this._removeOption}
-                    class="warning"
-                    .disabled=${this.disabled}
-                  >
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.actions.type.choose.remove_option"
-                    )}
-                    <ha-svg-icon
-                      class="warning"
-                      slot="graphic"
-                      .path=${mdiDelete}
-                    ></ha-svg-icon>
-                  </ha-md-menu-item>`
-                : nothing}
+              <ha-md-menu-item
+                @click=${this._removeOption}
+                class="warning"
+                .disabled=${this.disabled}
+              >
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.actions.type.choose.remove_option"
+                )}
+                <ha-svg-icon
+                  class="warning"
+                  slot="start"
+                  .path=${mdiDelete}
+                ></ha-svg-icon>
+              </ha-md-menu-item>
            </ha-md-button-menu>
          `
        : nothing}
@@ -215,6 +216,7 @@ export default class HaAutomationOptionRow extends LitElement {
    return html`<div
      class=${classMap({
        "card-content": true,
+        card: !this.optionsInSidebar,
        indent: this.optionsInSidebar,
        selected: this._selected,
        hidden: this.optionsInSidebar && this._collapsed,
@@ -271,6 +273,7 @@ export default class HaAutomationOptionRow extends LitElement {
              .selected=${this._selected}
              @click=${this._toggleSidebar}
              @toggle-collapsed=${this._toggleCollapse}
+              .sortSelected=${this.sortSelected}
              >${this._renderRow()}</ha-automation-row
            >`
          : html`
@@ -382,14 +385,16 @@ export default class HaAutomationOptionRow extends LitElement {

  public openSidebar(): void {
    fireEvent(this, "open-sidebar", {
-      close: () => {
+      close: (focus?: boolean) => {
        this._selected = false;
        fireEvent(this, "close-sidebar");
+        if (focus) {
+          this.focus();
+        }
      },
      rename: () => {
        this._renameOption();
      },
-      toggleYamlMode: () => false, // no yaml mode for options
      delete: this._removeOption,
      duplicate: this._duplicateOption,
      defaultOption: !!this.defaultActions,
@@ -398,9 +403,11 @@ export default class HaAutomationOptionRow extends LitElement {
    this._collapsed = false;

    if (this.narrow) {
-      this.scrollIntoView({
-        block: "start",
-        behavior: "smooth",
+      requestAnimationFrame(() => {
+        this.scrollIntoView({
+          block: "start",
+          behavior: "smooth",
+        });
      });
    }
  }
@@ -438,6 +445,14 @@ export default class HaAutomationOptionRow extends LitElement {
    this._collapsed = !this._collapsed;
  }

+  public isSelected() {
+    return this._selected;
+  }
+
+  public focus() {
+    this._automationRowElement?.focus();
+  }
+
  static get styles(): CSSResultGroup {
    return [
      rowStyles,
--- a/src/panels/config/automation/option/ha-automation-option.ts
+++ b/src/panels/config/automation/option/ha-automation-option.ts
@@ -1,15 +1,15 @@
 import { mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
-import { LitElement, html, nothing } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 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";
@@ -34,7 +34,7 @@ export default class HaAutomationOption extends LitElement {
  @property({ type: Boolean, attribute: "show-default" })
  public showDefaultActions = false;

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

  @state()
  @storage({
@@ -50,36 +50,24 @@ export default class HaAutomationOption extends LitElement {

  private _focusLastOptionOnChange = false;

+  private _focusOptionIndexOnChange?: number;
+
  private _optionsKeys = new WeakMap<Option, string>();

-  private _unsubMql?: () => void;
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
-      this._showReorder = matches;
-    });
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._unsubMql?.();
-    this._unsubMql = undefined;
-  }
-
  protected render() {
    return html`
      <ha-sortable
        handle-selector=".handle"
        draggable-selector="ha-automation-option-row"
-        .disabled=${!this._showReorder || this.disabled}
+        .disabled=${this.disabled}
        group="options"
        invert-swap
        @item-moved=${this._optionMoved}
        @item-added=${this._optionAdded}
        @item-removed=${this._optionRemoved}
+        @item-cloned=${this._optionCloned}
      >
-        <div class="rows">
+        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
          ${repeat(
            this.options,
            (option) => this._getKey(option),
@@ -98,10 +86,20 @@ export default class HaAutomationOption extends LitElement {
                @value-changed=${this._optionChanged}
                .hass=${this.hass}
                .optionsInSidebar=${this.optionsInSidebar}
+                .sortSelected=${this._rowSortSelected === idx}
+                @stop-sort-selection=${this._stopSortSelection}
              >
-                ${this._showReorder && !this.disabled
+                ${!this.disabled
                  ? html`
-                      <div class="handle" slot="icons">
+                      <div
+                        tabindex="0"
+                        class="handle ${this._rowSortSelected === idx
+                          ? "active"
+                          : ""}"
+                        slot="icons"
+                        @keydown=${this._handleDragKeydown}
+                        .index=${idx}
+                      >
                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                      </div>
                    `
@@ -143,12 +141,20 @@ export default class HaAutomationOption extends LitElement {
  protected updated(changedProps: PropertyValues) {
    super.updated(changedProps);

-    if (changedProps.has("options") && this._focusLastOptionOnChange) {
-      this._focusLastOptionOnChange = false;
+    if (
+      changedProps.has("options") &&
+      (this._focusLastOptionOnChange ||
+        this._focusOptionIndexOnChange !== undefined)
+    ) {
+      const mode = this._focusLastOptionOnChange ? "new" : "moved";

      const row = this.shadowRoot!.querySelector<HaAutomationOptionRow>(
-        "ha-automation-option-row:last-of-type"
+        `ha-automation-option-row:${mode === "new" ? "last-of-type" : `nth-of-type(${this._focusOptionIndexOnChange! + 1})`}`
      )!;
+
+      this._focusLastOptionOnChange = false;
+      this._focusOptionIndexOnChange = undefined;
+
      row.updateComplete.then(() => {
        if (this.narrow) {
          row.scrollIntoView({
@@ -156,8 +162,16 @@ export default class HaAutomationOption extends LitElement {
            behavior: "smooth",
          });
        }
-        row.expand();
-        row.focus();
+
+        if (mode === "new") {
+          row.expand();
+        }
+
+        if (this.optionsInSidebar) {
+          row.openSidebar();
+        } else {
+          row.focus();
+        }
      });
    }
  }
@@ -187,15 +201,27 @@ export default class HaAutomationOption extends LitElement {
  private _moveUp(ev) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
-    const newIndex = index - 1;
-    this._move(index, newIndex);
+    if (!(ev.target as HaAutomationOptionRow).first) {
+      const newIndex = index - 1;
+      this._move(index, newIndex);
+      if (this._rowSortSelected === index) {
+        this._rowSortSelected = newIndex;
+      }
+      ev.target.focus();
+    }
  }

  private _moveDown(ev) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
-    const newIndex = index + 1;
-    this._move(index, newIndex);
+    if (!(ev.target as HaAutomationOptionRow).last) {
+      const newIndex = index + 1;
+      this._move(index, newIndex);
+      if (this._rowSortSelected === index) {
+        this._rowSortSelected = newIndex;
+      }
+      ev.target.focus();
+    }
  }

  private _move(oldIndex: number, newIndex: number) {
@@ -215,6 +241,12 @@ export default class HaAutomationOption extends LitElement {
  private async _optionAdded(ev: CustomEvent): Promise<void> {
    ev.stopPropagation();
    const { index, data } = ev.detail;
+    let selected = false;
+    if (data?.["ha-automation-row-selected"]) {
+      selected = true;
+      delete data["ha-automation-row-selected"];
+    }
+
    const options = [
      ...this.options.slice(0, index),
      data,
@@ -222,6 +254,9 @@ export default class HaAutomationOption extends LitElement {
    ];
    // Add option locally to avoid UI jump
    this.options = options;
+    if (selected) {
+      this._focusOptionIndexOnChange = options.length === 1 ? 0 : index;
+    }
    await nextRender();
    fireEvent(this, "value-changed", { value: this.options });
  }
@@ -238,6 +273,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];
@@ -269,7 +310,28 @@ export default class HaAutomationOption extends LitElement {
    fireEvent(this, "show-default-actions");
  };

-  static styles = automationRowsStyles;
+  private _handleDragKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.stopPropagation();
+      this._rowSortSelected =
+        this._rowSortSelected === undefined
+          ? (ev.target as any).index
+          : undefined;
+    }
+  }
+
+  private _stopSortSelection() {
+    this._rowSortSelected = undefined;
+  }
+
+  static styles = [
+    automationRowsStyles,
+    css`
+      :host([root]) .rows {
+        padding-right: 8px;
+      }
+    `,
+  ];
 }

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

@customElement("ha-dialog-paste-replace")
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-action.ts
@@ -11,6 +11,7 @@ import {
 } 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 { handleStructError } from "../../../../common/structs/handle-errors";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
@@ -41,6 +42,8 @@ export default class HaAutomationSidebarAction extends LitElement {

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

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

  @query(".sidebar-editor")
@@ -181,18 +184,22 @@ export default class HaAutomationSidebarAction extends LitElement {
      </ha-md-menu-item>
      ${description && !this.yamlMode
        ? html`<div class="description">${description}</div>`
-        : 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>`}
+        : keyed(
+            this.sidebarKey,
+            html`<ha-automation-action-editor
+              class="sidebar-editor"
+              .hass=${this.hass}
+              .action=${actionConfig}
+              .yamlMode=${this.yamlMode}
+              .uiSupported=${this.config.uiSupported}
+              @value-changed=${this._valueChangedSidebar}
+              @yaml-changed=${this._yamlChangedSidebar}
+              sidebar
+              narrow
+              .disabled=${this.disabled}
+              @ui-mode-not-available=${this._handleUiModeNotAvailable}
+            ></ha-automation-action-editor>`
+          )}
    </ha-automation-sidebar-card>`;
  }

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

+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
  private _toggleYamlMode = () => {
    fireEvent(this, "toggle-yaml-mode");
  };
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-card.ts
@@ -67,10 +67,13 @@ export default class HaAutomationSidebarCard extends LitElement {
          <slot slot="subtitle" name="subtitle"></slot>
          <slot name="overflow-menu" slot="actionItems">
            <ha-md-button-menu
+              quick
              @click=${this._openOverflowMenu}
              @keydown=${stopPropagation}
              @closed=${stopPropagation}
              .positioning=${this.narrow ? "absolute" : "fixed"}
+              anchor-corner="end-end"
+              menu-corner="start-end"
            >
              <ha-icon-button
                slot="trigger"
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-condition.ts
@@ -11,6 +11,7 @@ import {
 } 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 { handleStructError } from "../../../../common/structs/handle-errors";
 import type { ConditionSidebarConfig } from "../../../../data/automation";
@@ -35,6 +36,8 @@ export default class HaAutomationSidebarCondition extends LitElement {

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

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

  @query(".sidebar-editor")
@@ -173,16 +176,21 @@ export default class HaAutomationSidebarCondition extends LitElement {
      </ha-md-menu-item>
      ${description && !this.yamlMode
        ? html`<div class="description">${description}</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}
-          ></ha-automation-condition-editor> `}
+        : keyed(
+            this.sidebarKey,
+            html`<ha-automation-condition-editor
+              class="sidebar-editor"
+              .hass=${this.hass}
+              .condition=${this.config.config}
+              .yamlMode=${this.yamlMode}
+              .uiSupported=${this.config.uiSupported}
+              @value-changed=${this._valueChangedSidebar}
+              @yaml-changed=${this._yamlChangedSidebar}
+              .disabled=${this.disabled}
+              @ui-mode-not-available=${this._handleUiModeNotAvailable}
+              sidebar
+            ></ha-automation-condition-editor>`
+          )}
    </ha-automation-sidebar-card>`;
  }

@@ -208,6 +216,12 @@ 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");
  };
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts
@@ -67,7 +67,7 @@ export default class HaAutomationSidebarOption extends LitElement {
                "ui.panel.config.automation.editor.actions.duplicate"
              )}
              <ha-svg-icon
-                slot="graphic"
+                slot="start"
                .path=${mdiContentDuplicate}
              ></ha-svg-icon>
            </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,6 +1,7 @@
 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";
@@ -24,6 +25,8 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {

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

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

  @query(".sidebar-editor")
@@ -81,14 +84,18 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
        )}
        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
      </ha-md-menu-item>
-      <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>
+      ${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-automation-sidebar-card>`;
  }

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

+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
  private _toggleYamlMode = () => {
    fireEvent(this, "toggle-yaml-mode");
  };
--- 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,6 +1,7 @@
 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";
@@ -23,6 +24,8 @@ export default class HaAutomationSidebarScriptField extends LitElement {

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

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

  @query(".sidebar-editor")
@@ -74,16 +77,20 @@ export default class HaAutomationSidebarScriptField extends LitElement {
        )}
        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
      </ha-md-menu-item>
-      <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>
+      ${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-automation-sidebar-card>`;
  }

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

+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
  private _toggleYamlMode = () => {
    fireEvent(this, "toggle-yaml-mode");
  };
--- a/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts
+++ b/src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts
@@ -11,6 +11,7 @@ import {
 } 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";
@@ -35,6 +36,8 @@ export default class HaAutomationSidebarTrigger extends LitElement {

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

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

  @state() private _warnings?: string[];
@@ -183,17 +186,22 @@ export default class HaAutomationSidebarTrigger extends LitElement {
          )}
          <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
        </ha-md-menu-item>
-        <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}
-        ></ha-automation-trigger-editor>
+        ${keyed(
+          this.sidebarKey,
+          html`<ha-automation-trigger-editor
+            class="sidebar-editor"
+            .hass=${this.hass}
+            .trigger=${this.config.config}
+            @value-changed=${this._valueChangedSidebar}
+            @yaml-changed=${this._yamlChangedSidebar}
+            .uiSupported=${this.config.uiSupported}
+            .showId=${this._requestShowId}
+            .yamlMode=${this.yamlMode}
+            .disabled=${this.disabled}
+            @ui-mode-not-available=${this._handleUiModeNotAvailable}
+            sidebar
+          ></ha-automation-trigger-editor>`
+        )}
      </ha-automation-sidebar-card>
    `;
  }
@@ -220,6 +228,12 @@ export default class HaAutomationSidebarTrigger extends LitElement {
    }
  }

+  private _yamlChangedSidebar(ev: CustomEvent) {
+    ev.stopPropagation();
+
+    this.config?.save?.(ev.detail.value);
+  }
+
  private _toggleYamlMode = () => {
    fireEvent(this, "toggle-yaml-mode");
  };
--- a/src/panels/config/automation/styles.ts
+++ b/src/panels/config/automation/styles.ts
@@ -37,12 +37,6 @@ export const rowStyles = css`
  ha-tooltip {
    cursor: default;
  }
-  :host([highlight]) ha-card {
-    --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
-    --shadow-focus: 0 0 0 1px var(--state-inactive-color);
-    border-color: var(--state-inactive-color);
-    box-shadow: var(--shadow-default), var(--shadow-focus);
-  }
  .hidden {
    display: none;
  }
@@ -54,7 +48,7 @@ export const editorStyles = css`
    pointer-events: none;
  }

-  .card-content {
+  .card-content.card {
    padding: 16px;
  }
  .card-content.yaml {
@@ -69,7 +63,7 @@ export const indentStyle = css`
  .selector-row,
  :host([indent]) ha-form {
    margin-left: 12px;
-    padding: 12px 24px 16px 16px;
+    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;
@@ -108,78 +102,59 @@ export const saveFabStyles = css`
 export const manualEditorStyles = css`
  :host {
    display: block;
+    --sidebar-width: 0;
+    --sidebar-gap: 0;
  }

-  .split-view {
+  .has-sidebar {
+    --sidebar-width: min(35vw, 500px);
+    --sidebar-gap: 16px;
+  }
+
+  .fab-positioner {
    display: flex;
-    flex-direction: row;
-    height: 100%;
-    position: relative;
-    gap: 16px;
+    justify-content: flex-end;
  }

-  .split-view.sidebar-hidden {
-    gap: 0;
+  .fab-positioner ha-fab {
+    position: fixed;
+    right: unset;
+    left: unset;
+    bottom: calc(-80px - var(--safe-area-inset-bottom));
+    transition: bottom 0.3s;
+  }
+  .fab-positioner ha-fab.dirty {
+    bottom: 16px;
  }

  .content-wrapper {
-    position: relative;
-    flex: 6;
+    padding-right: calc(var(--sidebar-width) + var(--sidebar-gap));
+    padding-inline-end: calc(var(--sidebar-width) + var(--sidebar-gap));
+    padding-inline-start: 0;
  }

  .content {
-    padding: 32px 16px 64px 0;
-    height: calc(100vh - 153px);
-    height: calc(100dvh - 153px);
-    overflow-y: auto;
-    overflow-x: hidden;
+    padding-top: 24px;
+    padding-bottom: 72px;
  }

-  .sidebar {
-    padding: 12px 0;
-    flex: 4;
-    height: calc(100vh - 81px);
-    height: calc(100dvh - 81px);
-    width: 40%;
-  }
-  .split-view.sidebar-hidden .sidebar {
-    border-color: transparent;
-    border-width: 0;
-    overflow: hidden;
-    flex: 0;
-    visibility: hidden;
-  }
-
-  .sidebar.overlay {
+  ha-automation-sidebar {
    position: fixed;
-    bottom: 8px;
-    right: 8px;
-    height: calc(100% - 70px);
-    padding: 0;
-    z-index: 5;
-    box-shadow: -8px 0 16px rgba(0, 0, 0, 0.2);
+    top: calc(var(--header-height) + 16px);
+    height: calc(-81px + 100dvh);
+    width: var(--sidebar-width);
+    display: block;
  }

-  .sidebar.overlay.rtl {
-    right: unset;
-    left: 8px;
+  ha-automation-sidebar.hidden {
+    display: none;
  }

-  @media all and (max-width: 870px) {
-    .split-view {
-      gap: 0;
-      margin-right: -8px;
-    }
-    .sidebar {
-      height: 0;
-      width: 0;
-      flex: 0;
-    }
+  .sidebar-positioner {
+    display: flex;
+    justify-content: flex-end;
  }

-  .split-view.sidebar-hidden .sidebar.overlay {
-    width: 0;
-  }
  .description {
    margin: 0;
  }
@@ -190,13 +165,13 @@ export const manualEditorStyles = css`

 export const automationRowsStyles = css`
  .rows {
-    padding: 16px 0 16px 16px;
-    margin: -16px;
-    margin-right: -20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
+  .rows.no-sidebar {
+    margin-right: 0;
+  }
  .sortable-ghost {
    background: none;
    border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
@@ -209,9 +184,19 @@ export const automationRowsStyles = css`
    scroll-margin-top: 48px;
  }
  .handle {
-    padding: 12px;
+    margin: 4px;
+    padding: 8px;
    cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
+    border-radius: var(--ha-border-radius-pill);
+  }
+  .handle:focus {
+    outline: var(--wa-focus-ring);
+    background: var(--ha-color-fill-neutral-quiet-resting);
+  }
+  .handle.active {
+    outline: var(--wa-focus-ring);
+    background: var(--ha-color-fill-neutral-normal-active);
  }
  .handle ha-svg-icon {
    pointer-events: none;
--- a/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-editor.ts
@@ -29,6 +29,8 @@ export default class HaAutomationTriggerEditor extends LitElement {

  @property({ type: Boolean, attribute: "show-id" }) public showId = false;

+  @property({ type: Boolean, attribute: "sidebar" }) public inSidebar = false;
+
  @query("ha-yaml-editor") public yamlEditor?: HaYamlEditor;

  protected render() {
@@ -47,6 +49,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
              this.trigger.enabled === false &&
              !this.yamlMode),
          yaml: yamlMode,
+          card: !this.inSidebar,
        })}
      >
        ${yamlMode
@@ -118,7 +121,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
    if (!ev.detail.isValid) {
      return;
    }
-    fireEvent(this, "value-changed", {
+    fireEvent(this, "yaml-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
@@ -28,6 +28,7 @@ import { handleStructError } from "../../../../common/structs/handle-errors";
 import { debounce } from "../../../../common/util/debounce";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-automation-row";
+import type { HaAutomationRow } from "../../../../components/ha-automation-row";
 import "../../../../components/ha-card";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
@@ -112,9 +113,14 @@ 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;

+  @property({ type: Boolean, attribute: "sort-selected" })
+  public sortSelected = false;
+
  @state() private _yamlMode = false;

  @state() private _triggered?: Record<string, unknown>;
@@ -132,6 +138,9 @@ export default class HaAutomationTriggerRow extends LitElement {
  @query("ha-automation-trigger-editor")
  public triggerEditor?: HaAutomationTriggerEditor;

+  @query("ha-automation-row")
+  private _automationRowElement?: HaAutomationRow;
+
  @storage({
    key: "automationClipboard",
    state: false,
@@ -165,145 +174,142 @@ export default class HaAutomationTriggerRow extends LitElement {

      <slot name="icons" slot="icons"></slot>

-      <ha-md-button-menu
-        slot="icons"
-        @click=${preventDefaultStopPropagation}
-        @keydown=${stopPropagation}
-        @closed=${stopPropagation}
-        positioning="fixed"
-      >
-        <ha-icon-button
-          slot="trigger"
-          .label=${this.hass.localize("ui.common.menu")}
-          .path=${mdiDotsVertical}
-        ></ha-icon-button>
+      ${!this.optionsInSidebar
+        ? html`<ha-md-button-menu
+            quick
+            slot="icons"
+            @click=${preventDefaultStopPropagation}
+            @keydown=${stopPropagation}
+            @closed=${stopPropagation}
+            positioning="fixed"
+            anchor-corner="end-end"
+            menu-corner="start-end"
+          >
+            <ha-icon-button
+              slot="trigger"
+              .label=${this.hass.localize("ui.common.menu")}
+              .path=${mdiDotsVertical}
+            ></ha-icon-button>
+            <ha-md-menu-item
+              .clickAction=${this._renameTrigger}
+              .disabled=${this.disabled || type === "list"}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.rename"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+            </ha-md-menu-item>

-        ${!this.optionsInSidebar
-          ? html`<ha-md-menu-item
-                .clickAction=${this._renameTrigger}
-                .disabled=${this.disabled || type === "list"}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.triggers.rename"
-                )}
-                <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-              </ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._showTriggerId}
+              .disabled=${this.disabled || type === "list"}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.edit_id"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
+            </ha-md-menu-item>

-              <ha-md-menu-item
-                .clickAction=${this._showTriggerId}
-                .disabled=${this.disabled || type === "list"}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.triggers.edit_id"
-                )}
-                <ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
-              </ha-md-menu-item>
+            <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>

-              <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+            <ha-md-menu-item
+              .clickAction=${this._duplicateTrigger}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.duplicate"
+              )}
+              <ha-svg-icon
+                slot="start"
+                .path=${mdiContentDuplicate}
+              ></ha-svg-icon>
+            </ha-md-menu-item>

-              <ha-md-menu-item
-                .clickAction=${this._duplicateTrigger}
-                .disabled=${this.disabled}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.triggers.duplicate"
-                )}
-                <ha-svg-icon
-                  slot="start"
-                  .path=${mdiContentDuplicate}
-                ></ha-svg-icon>
-              </ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._copyTrigger}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.copy"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
+            </ha-md-menu-item>

-              <ha-md-menu-item
-                .clickAction=${this._copyTrigger}
-                .disabled=${this.disabled}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.triggers.copy"
-                )}
-                <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-              </ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._cutTrigger}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.triggers.cut"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
+            </ha-md-menu-item>

-              <ha-md-menu-item
-                .clickAction=${this._cutTrigger}
-                .disabled=${this.disabled}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.triggers.cut"
-                )}
-                <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
-              </ha-md-menu-item>`
-          : nothing}
+            <ha-md-menu-item
+              .clickAction=${this._moveUp}
+              .disabled=${this.disabled || this.first}
+            >
+              ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
+              <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
+            ></ha-md-menu-item>

-        <ha-md-menu-item
-          .clickAction=${this._moveUp}
-          .disabled=${this.disabled || this.first}
-        >
-          ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
-          <ha-svg-icon slot="start" .path=${mdiArrowUp}></ha-svg-icon
-        ></ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._moveDown}
+              .disabled=${this.disabled || this.last}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.move_down"
+              )}
+              <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
+            ></ha-md-menu-item>

-        <ha-md-menu-item
-          .clickAction=${this._moveDown}
-          .disabled=${this.disabled || this.last}
-        >
-          ${this.hass.localize("ui.panel.config.automation.editor.move_down")}
-          <ha-svg-icon slot="start" .path=${mdiArrowDown}></ha-svg-icon
-        ></ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._toggleYamlMode}
+              .disabled=${!supported || !!this._warnings}
+            >
+              ${this.hass.localize(
+                `ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
+              )}
+              <ha-svg-icon slot="start" .path=${mdiPlaylistEdit}></ha-svg-icon>
+            </ha-md-menu-item>

-        ${!this.optionsInSidebar
-          ? html`
-              <ha-md-menu-item
-                .clickAction=${this._toggleYamlMode}
-                .disabled=${!supported || !!this._warnings}
-              >
-                ${this.hass.localize(
-                  `ui.panel.config.automation.editor.edit_${!yamlMode ? "yaml" : "ui"}`
-                )}
-                <ha-svg-icon
-                  slot="start"
-                  .path=${mdiPlaylistEdit}
-                ></ha-svg-icon>
-              </ha-md-menu-item>
+            <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>

-              <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
-
-              <ha-md-menu-item
-                .clickAction=${this._onDisable}
-                .disabled=${this.disabled || type === "list"}
-              >
-                ${"enabled" in this.trigger && this.trigger.enabled === false
-                  ? this.hass.localize(
-                      "ui.panel.config.automation.editor.actions.enable"
-                    )
-                  : this.hass.localize(
-                      "ui.panel.config.automation.editor.actions.disable"
-                    )}
-                <ha-svg-icon
-                  slot="start"
-                  .path=${"enabled" in this.trigger &&
-                  this.trigger.enabled === false
-                    ? mdiPlayCircleOutline
-                    : mdiStopCircleOutline}
-                ></ha-svg-icon>
-              </ha-md-menu-item>
-              <ha-md-menu-item
-                .clickAction=${this._onDelete}
+            <ha-md-menu-item
+              .clickAction=${this._onDisable}
+              .disabled=${this.disabled || type === "list"}
+            >
+              ${"enabled" in this.trigger && this.trigger.enabled === false
+                ? this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.enable"
+                  )
+                : this.hass.localize(
+                    "ui.panel.config.automation.editor.actions.disable"
+                  )}
+              <ha-svg-icon
+                slot="start"
+                .path=${"enabled" in this.trigger &&
+                this.trigger.enabled === false
+                  ? mdiPlayCircleOutline
+                  : mdiStopCircleOutline}
+              ></ha-svg-icon>
+            </ha-md-menu-item>
+            <ha-md-menu-item
+              .clickAction=${this._onDelete}
+              class="warning"
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.delete"
+              )}
+              <ha-svg-icon
                class="warning"
-                .disabled=${this.disabled}
-              >
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.actions.delete"
-                )}
-                <ha-svg-icon
-                  class="warning"
-                  slot="start"
-                  .path=${mdiDelete}
-                ></ha-svg-icon>
-              </ha-md-menu-item>
-            `
-          : nothing}
-      </ha-md-button-menu>
+                slot="start"
+                .path=${mdiDelete}
+              ></ha-svg-icon>
+            </ha-md-menu-item>
+          </ha-md-button-menu>`
+        : nothing}
      ${!this.optionsInSidebar
        ? html`${this._warnings
              ? html`<ha-automation-editor-warning
@@ -345,6 +351,8 @@ export default class HaAutomationTriggerRow extends LitElement {
              this.trigger.enabled === false}
              @click=${this._toggleSidebar}
              .selected=${this._selected}
+              .highlight=${this.highlight}
+              .sortSelected=${this.sortSelected}
              >${this._selected
                ? "selected"
                : nothing}${this._renderRow()}</ha-automation-row
@@ -477,16 +485,19 @@ export default class HaAutomationTriggerRow extends LitElement {
      save: (value) => {
        fireEvent(this, "value-changed", { value });
      },
-      close: () => {
+      close: (focus?: boolean) => {
        this._selected = false;
        fireEvent(this, "close-sidebar");
+        if (focus) {
+          this.focus();
+        }
      },
      rename: () => {
        this._renameTrigger();
      },
      toggleYamlMode: () => {
        this._toggleYamlMode();
-        return this._yamlMode;
+        this.openSidebar();
      },
      disable: this._onDisable,
      delete: this._onDelete,
@@ -500,9 +511,11 @@ export default class HaAutomationTriggerRow extends LitElement {
    this._selected = true;

    if (this.narrow) {
-      this.scrollIntoView({
-        block: "start",
-        behavior: "smooth",
+      requestAnimationFrame(() => {
+        this.scrollIntoView({
+          block: "start",
+          behavior: "smooth",
+        });
      });
    }
  }
@@ -666,6 +679,14 @@ export default class HaAutomationTriggerRow extends LitElement {
      customElements.get(`ha-automation-trigger-${type}`) !== undefined
  );

+  public isSelected() {
+    return this._selected;
+  }
+
+  public focus() {
+    this._automationRowElement?.focus();
+  }
+
  static get styles(): CSSResultGroup {
    return [
      rowStyles,
--- a/src/panels/config/automation/trigger/ha-automation-trigger.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts
@@ -1,16 +1,16 @@
 import { mdiDrag, mdiPlus } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 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,
@@ -44,7 +44,7 @@ export default class HaAutomationTrigger extends LitElement {

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

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

  @state()
  @storage({
@@ -57,36 +57,24 @@ export default class HaAutomationTrigger extends LitElement {

  private _focusLastTriggerOnChange = false;

+  private _focusTriggerIndexOnChange?: number;
+
  private _triggerKeys = new WeakMap<Trigger, string>();

-  private _unsubMql?: () => void;
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this._unsubMql = listenMediaQuery("(min-width: 600px)", (matches) => {
-      this._showReorder = matches;
-    });
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._unsubMql?.();
-    this._unsubMql = undefined;
-  }
-
  protected render() {
    return html`
      <ha-sortable
        handle-selector=".handle"
        draggable-selector="ha-automation-trigger-row"
-        .disabled=${!this._showReorder || this.disabled}
+        .disabled=${this.disabled}
        group="triggers"
        invert-swap
        @item-moved=${this._triggerMoved}
        @item-added=${this._triggerAdded}
        @item-removed=${this._triggerRemoved}
+        @item-cloned=${this._triggerCloned}
      >
-        <div class="rows">
+        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
          ${repeat(
            this.triggers,
            (trigger) => this._getKey(trigger),
@@ -104,12 +92,22 @@ export default class HaAutomationTrigger extends LitElement {
                .hass=${this.hass}
                .disabled=${this.disabled}
                .narrow=${this.narrow}
-                ?highlight=${this.highlightedTriggers?.includes(trg)}
+                .highlight=${this.highlightedTriggers?.includes(trg)}
                .optionsInSidebar=${this.optionsInSidebar}
+                .sortSelected=${this._rowSortSelected === idx}
+                @stop-sort-selection=${this._stopSortSelection}
              >
-                ${this._showReorder && !this.disabled
+                ${!this.disabled
                  ? html`
-                      <div class="handle" slot="icons">
+                      <div
+                        tabindex="0"
+                        class="handle ${this._rowSortSelected === idx
+                          ? "active"
+                          : ""}"
+                        slot="icons"
+                        @keydown=${this._handleDragKeydown}
+                        .index=${idx}
+                      >
                        <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                      </div>
                    `
@@ -172,12 +170,18 @@ export default class HaAutomationTrigger extends LitElement {
  protected updated(changedProps: PropertyValues) {
    super.updated(changedProps);

-    if (changedProps.has("triggers") && this._focusLastTriggerOnChange) {
-      this._focusLastTriggerOnChange = false;
-
+    if (
+      changedProps.has("triggers") &&
+      (this._focusLastTriggerOnChange ||
+        this._focusTriggerIndexOnChange !== undefined)
+    ) {
      const row = this.shadowRoot!.querySelector<HaAutomationTriggerRow>(
-        "ha-automation-trigger-row:last-of-type"
+        `ha-automation-trigger-row:${this._focusLastTriggerOnChange ? "last-of-type" : `nth-of-type(${this._focusTriggerIndexOnChange! + 1})`}`
      )!;
+
+      this._focusLastTriggerOnChange = false;
+      this._focusTriggerIndexOnChange = undefined;
+
      row.updateComplete.then(() => {
        if (this.optionsInSidebar) {
          row.openSidebar();
@@ -189,8 +193,8 @@ export default class HaAutomationTrigger extends LitElement {
          }
        } else {
          row.expand();
+          row.focus();
        }
-        row.focus();
      });
    }
  }
@@ -216,15 +220,27 @@ export default class HaAutomationTrigger extends LitElement {
  private _moveUp(ev) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
-    const newIndex = index - 1;
-    this._move(index, newIndex);
+    if (!(ev.target as HaAutomationTriggerRow).first) {
+      const newIndex = index - 1;
+      this._move(index, newIndex);
+      if (this._rowSortSelected === index) {
+        this._rowSortSelected = newIndex;
+      }
+      ev.target.focus();
+    }
  }

  private _moveDown(ev) {
    ev.stopPropagation();
    const index = (ev.target as any).index;
-    const newIndex = index + 1;
-    this._move(index, newIndex);
+    if (!(ev.target as HaAutomationTriggerRow).last) {
+      const newIndex = index + 1;
+      this._move(index, newIndex);
+      if (this._rowSortSelected === index) {
+        this._rowSortSelected = newIndex;
+      }
+      ev.target.focus();
+    }
  }

  private _move(oldIndex: number, newIndex: number) {
@@ -244,6 +260,12 @@ export default class HaAutomationTrigger extends LitElement {
  private async _triggerAdded(ev: CustomEvent): Promise<void> {
    ev.stopPropagation();
    const { index, data } = ev.detail;
+    let selected = false;
+    if (data?.["ha-automation-row-selected"]) {
+      selected = true;
+      delete data["ha-automation-row-selected"];
+    }
+
    let triggers = [
      ...this.triggers.slice(0, index),
      data,
@@ -251,6 +273,9 @@ export default class HaAutomationTrigger extends LitElement {
    ];
    // Add trigger locally to avoid UI jump
    this.triggers = triggers;
+    if (selected) {
+      this._focusTriggerIndexOnChange = triggers.length === 1 ? 0 : index;
+    }
    await nextRender();
    if (this.triggers !== triggers) {
      // Ensure trigger is added even after update
@@ -259,6 +284,9 @@ export default class HaAutomationTrigger extends LitElement {
        data,
        ...this.triggers.slice(index),
      ];
+      if (selected) {
+        this._focusTriggerIndexOnChange = triggers.length === 1 ? 0 : index;
+      }
    }
    fireEvent(this, "value-changed", { value: triggers });
  }
@@ -275,6 +303,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];
@@ -302,14 +336,21 @@ export default class HaAutomationTrigger extends LitElement {
    });
  }

-  static styles = [
-    automationRowsStyles,
-    css`
-      :host([root]) .rows {
-        padding-right: 8px;
-      }
-    `,
-  ];
+  private _handleDragKeydown(ev: KeyboardEvent) {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.stopPropagation();
+      this._rowSortSelected =
+        this._rowSortSelected === undefined
+          ? (ev.target as any).index
+          : undefined;
+    }
+  }
+
+  private _stopSortSelection() {
+    this._rowSortSelected = undefined;
+  }
+
+  static styles = automationRowsStyles;
 }

 declare global {
--- a/src/panels/config/dashboard/dialog-new-dashboard.ts
+++ b/src/panels/config/dashboard/dialog-new-dashboard.ts
@@ -49,8 +49,8 @@ const STRATEGIES = [
  {
    type: "home",
    images: {
-      light: "/static/images/dashboard-options/light/icon-dashboard-areas.svg",
-      dark: "/static/images/dashboard-options/dark/icon-dashboard-areas.svg",
+      light: "/static/images/dashboard-options/light/icon-dashboard-home.svg",
+      dark: "/static/images/dashboard-options/dark/icon-dashboard-home.svg",
    },
    name: "ui.panel.config.lovelace.dashboards.dialog_new.strategy.home.title",
    description:
--- a/src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts
+++ b/src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts
@@ -34,6 +34,16 @@ const UPDATE_THROTTLE_TIME = 10000;
 const CORE_SOURCE_ID = "ha";
 const CORE_SOURCE_LABEL = "Home Assistant";

+const RSSI_COLOR_THRESHOLDS: [number, string][] = [
+  [-70, "--green-color"], // Excellent: > -70 dBm
+  [-75, "--lime-color"], // Good: -70 to -75 dBm
+  [-80, "--yellow-color"], // Okay: -75 to -80 dBm
+  [-85, "--amber-color"], // Marginal: -80 to -85 dBm
+  [-90, "--orange-color"], // Weak: -85 to -90 dBm
+  [-95, "--deep-orange-color"], // Poor: -90 to -95 dBm
+  [-Infinity, "--red-color"], // Very poor: < -95 dBm
+];
+
@customElement("bluetooth-network-visualization")
 export class BluetoothNetworkVisualization extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -125,6 +135,16 @@ export class BluetoothNetworkVisualization extends LitElement {
    `;
  }

+  private _getRssiColorVar = memoizeOne((rssi: number): string => {
+    for (const [threshold, colorVar] of RSSI_COLOR_THRESHOLDS) {
+      if (rssi > threshold) {
+        return colorVar;
+      }
+    }
+    // Fallback (should never reach here)
+    return "--red-color";
+  });
+
  private _formatNetworkData = memoizeOne(
    (
      data: BluetoothDeviceData[],
@@ -206,7 +226,7 @@ export class BluetoothNetworkVisualization extends LitElement {
            symbol: "none",
            lineStyle: {
              width: this._getLineWidth(node.rssi),
-              color: style.getPropertyValue("--primary-color"),
+              color: style.getPropertyValue(this._getRssiColorVar(node.rssi)),
            },
          });
          return;
@@ -227,7 +247,7 @@ export class BluetoothNetworkVisualization extends LitElement {
          lineStyle: {
            width: this._getLineWidth(node.rssi),
            color: device
-              ? style.getPropertyValue("--primary-color")
+              ? style.getPropertyValue(this._getRssiColorVar(node.rssi))
              : style.getPropertyValue("--disabled-color"),
          },
        });
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
@@ -199,8 +199,10 @@ export class HaConfigLovelaceDashboards extends LitElement {
          "ui.panel.config.lovelace.dashboards.picker.headers.require_admin"
        ),
        sortable: true,
-        type: "icon",
        hidden: narrow,
+        type: "icon",
+        minWidth: "120px",
+        maxWidth: "120px",
        template: (dashboard) =>
          dashboard.require_admin
            ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
@@ -210,8 +212,10 @@ export class HaConfigLovelaceDashboards extends LitElement {
        title: localize(
          "ui.panel.config.lovelace.dashboards.picker.headers.sidebar"
        ),
-        type: "icon",
        hidden: narrow,
+        type: "icon",
+        minWidth: "120px",
+        maxWidth: "120px",
        template: (dashboard) =>
          dashboard.show_in_sidebar
            ? html`<ha-svg-icon .path=${mdiCheck}></ha-svg-icon>`
--- a/src/panels/config/network/ha-config-network.ts
+++ b/src/panels/config/network/ha-config-network.ts
@@ -23,10 +23,7 @@ class ConfigNetwork extends LitElement {
  @state() private _error?: { code: string; message: string };

  protected render() {
-    if (
-      !this.hass.userData?.showAdvanced ||
-      !isComponentLoaded(this.hass, "network")
-    ) {
+    if (!isComponentLoaded(this.hass, "network")) {
      return nothing;
    }

--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -384,60 +384,6 @@ export class HaScriptEditor extends SubscribeMixin(
          </ha-list-item>
        </ha-button-menu>
        <div class=${this._mode === "yaml" ? "yaml-mode" : ""}>
-          <div class="error-wrapper">
-            ${this._errors || stateObj?.state === UNAVAILABLE
-              ? html`<ha-alert
-                  alert-type="error"
-                  .title=${stateObj?.state === UNAVAILABLE
-                    ? this.hass.localize(
-                        "ui.panel.config.script.editor.unavailable"
-                      )
-                    : undefined}
-                >
-                  ${this._errors || this._validationErrors}
-                  ${stateObj?.state === UNAVAILABLE
-                    ? html`<ha-svg-icon
-                        slot="icon"
-                        .path=${mdiRobotConfused}
-                      ></ha-svg-icon>`
-                    : nothing}
-                </ha-alert>`
-              : nothing}
-            ${this._blueprintConfig
-              ? html`<ha-alert alert-type="info">
-                  ${this.hass.localize(
-                    "ui.panel.config.script.editor.confirm_take_control"
-                  )}
-                  <div slot="action" style="display: flex;">
-                    <ha-button
-                      appearance="plain"
-                      @click=${this._takeControlSave}
-                      >${this.hass.localize("ui.common.yes")}</ha-button
-                    >
-                    <ha-button
-                      appearance="plain"
-                      @click=${this._revertBlueprint}
-                      >${this.hass.localize("ui.common.no")}</ha-button
-                    >
-                  </div>
-                </ha-alert>`
-              : this._readOnly
-                ? html`<ha-alert alert-type="warning" dismissable
-                    >${this.hass.localize(
-                      "ui.panel.config.script.editor.read_only"
-                    )}
-                    <ha-button
-                      appearance="plain"
-                      slot="action"
-                      @click=${this._duplicate}
-                    >
-                      ${this.hass.localize(
-                        "ui.panel.config.script.editor.migrate"
-                      )}
-                    </ha-button>
-                  </ha-alert>`
-                : nothing}
-          </div>
          ${this._mode === "gui"
            ? html`
                <div>
@@ -467,7 +413,68 @@ export class HaScriptEditor extends SubscribeMixin(
                          @value-changed=${this._valueChanged}
                          @editor-save=${this._handleSaveScript}
                          @save-script=${this._handleSaveScript}
-                        ></manual-script-editor>
+                        >
+                          <div class="alert-wrapper" slot="alerts">
+                            ${this._errors || stateObj?.state === UNAVAILABLE
+                              ? html`<ha-alert
+                                  alert-type="error"
+                                  .title=${stateObj?.state === UNAVAILABLE
+                                    ? this.hass.localize(
+                                        "ui.panel.config.script.editor.unavailable"
+                                      )
+                                    : undefined}
+                                >
+                                  ${this._errors || this._validationErrors}
+                                  ${stateObj?.state === UNAVAILABLE
+                                    ? html`<ha-svg-icon
+                                        slot="icon"
+                                        .path=${mdiRobotConfused}
+                                      ></ha-svg-icon>`
+                                    : nothing}
+                                </ha-alert>`
+                              : nothing}
+                            ${this._blueprintConfig
+                              ? html`<ha-alert alert-type="info">
+                                  ${this.hass.localize(
+                                    "ui.panel.config.script.editor.confirm_take_control"
+                                  )}
+                                  <div slot="action" style="display: flex;">
+                                    <ha-button
+                                      appearance="plain"
+                                      @click=${this._takeControlSave}
+                                      >${this.hass.localize(
+                                        "ui.common.yes"
+                                      )}</ha-button
+                                    >
+                                    <ha-button
+                                      appearance="plain"
+                                      @click=${this._revertBlueprint}
+                                      >${this.hass.localize(
+                                        "ui.common.no"
+                                      )}</ha-button
+                                    >
+                                  </div>
+                                </ha-alert>`
+                              : this._readOnly
+                                ? html`<ha-alert
+                                    alert-type="warning"
+                                    dismissable
+                                    >${this.hass.localize(
+                                      "ui.panel.config.script.editor.read_only"
+                                    )}
+                                    <ha-button
+                                      appearance="plain"
+                                      slot="action"
+                                      @click=${this._duplicate}
+                                    >
+                                      ${this.hass.localize(
+                                        "ui.panel.config.script.editor.migrate"
+                                      )}
+                                    </ha-button>
+                                  </ha-alert>`
+                                : nothing}
+                          </div>
+                        </manual-script-editor>
                      `}
                </div>
              `
@@ -1092,6 +1099,28 @@ export class HaScriptEditor extends SubscribeMixin(
          border-radius: var(--ha-border-radius-sm);
        }

+        .alert-wrapper {
+          position: sticky;
+          top: -24px;
+          margin-top: -24px;
+          margin-bottom: 8px;
+          z-index: 1;
+          width: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 8px;
+          pointer-events: none;
+        }
+
+        .alert-wrapper ha-alert {
+          background-color: var(--card-background-color);
+          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+          border-radius: var(--ha-border-radius-sm);
+          margin-bottom: 0;
+          pointer-events: auto;
+        }
+
        manual-script-editor {
          max-width: 1540px;
          padding: 0 12px;
--- a/src/panels/config/script/ha-script-field-editor.ts
+++ b/src/panels/config/script/ha-script-field-editor.ts
@@ -152,7 +152,12 @@ export default class HaScriptFieldEditor extends LitElement {
    ev.stopPropagation();
    const value = { ...ev.detail.value };

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

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

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

  private _computeLabelCallback = (
--- a/src/panels/config/script/ha-script-field-row.ts
+++ b/src/panels/config/script/ha-script-field-row.ts
@@ -5,10 +5,8 @@ import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import type { LocalizeKeys } from "../../../common/translations/localize";
 import "../../../components/ha-automation-row";
+import type { HaAutomationRow } from "../../../components/ha-automation-row";
 import "../../../components/ha-card";
-import "../../../components/ha-icon-button";
-import "../../../components/ha-md-button-menu";
-import "../../../components/ha-md-menu-item";
 import type { ScriptFieldSidebarConfig } from "../../../data/automation";
 import type { Field } from "../../../data/script";
 import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector";
@@ -34,6 +32,8 @@ export default class HaScriptFieldRow extends LitElement {

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

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

  @state() private _selected = false;
@@ -47,6 +47,12 @@ export default class HaScriptFieldRow extends LitElement {
  @query("ha-script-field-selector-editor")
  private _selectorEditor?: HaScriptFieldSelectorEditor;

+  @query("ha-automation-row:first-of-type")
+  private _fieldRowElement?: HaAutomationRow;
+
+  @query(".selector-row ha-automation-row")
+  private _selectorRowElement?: HaAutomationRow;
+
  protected render() {
    return html`
      <ha-card outlined>
@@ -57,6 +63,7 @@ export default class HaScriptFieldRow extends LitElement {
          left-chevron
          @toggle-collapsed=${this._toggleCollapse}
          .collapsed=${this._collapsed}
+          .highlight=${this.highlight}
        >
          <h3 slot="header">${this.key}</h3>

@@ -79,6 +86,7 @@ export default class HaScriptFieldRow extends LitElement {
            .leftChevron=${SELECTOR_SELECTOR_BUILDING_BLOCKS.includes(
              Object.keys(this.field.selector)[0]
            )}
+            .highlight=${this.highlight}
          >
            <h3 slot="header">
              ${this.hass.localize(
@@ -198,17 +206,23 @@ export default class HaScriptFieldRow extends LitElement {
      save: (value) => {
        fireEvent(this, "value-changed", { value });
      },
-      close: () => {
+      close: (focus?: boolean) => {
        if (selectorEditor) {
          this._selectorRowSelected = false;
+          if (focus) {
+            this.focusSelector();
+          }
        } else {
          this._selected = false;
+          if (focus) {
+            this.focus();
+          }
        }
        fireEvent(this, "close-sidebar");
      },
      toggleYamlMode: () => {
        this._toggleYamlMode();
-        return this._yamlMode;
+        this.openSidebar();
      },
      delete: this._onDelete,
      config: {
@@ -221,9 +235,11 @@ export default class HaScriptFieldRow extends LitElement {
    } satisfies ScriptFieldSidebarConfig);

    if (this.narrow) {
-      this.scrollIntoView({
-        block: "start",
-        behavior: "smooth",
+      requestAnimationFrame(() => {
+        this.scrollIntoView({
+          block: "start",
+          behavior: "smooth",
+        });
      });
    }
  }
@@ -252,15 +268,19 @@ export default class HaScriptFieldRow extends LitElement {
    });
  };

+  public focus() {
+    this._fieldRowElement?.focus();
+  }
+
+  public focusSelector() {
+    this._selectorRowElement?.focus();
+  }
+
  static get styles(): CSSResultGroup {
    return [
      haStyle,
      indentStyle,
      css`
-        ha-button-menu,
-        ha-icon-button {
-          --mdc-theme-text-primary-on-background: var(--primary-text-color);
-        }
        .disabled {
          opacity: 0.5;
          pointer-events: none;
@@ -306,9 +326,6 @@ export default class HaScriptFieldRow extends LitElement {
          );
        }

-        ha-md-menu-item[disabled] {
-          --mdc-theme-text-primary-on-background: var(--disabled-text-color);
-        }
        .warning ul {
          margin: 4px 0;
        }
@@ -318,11 +335,8 @@ export default class HaScriptFieldRow extends LitElement {
        li[role="separator"] {
          border-bottom-color: var(--divider-color);
        }
-        :host([highlight]) ha-card {
-          --shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
-          --shadow-focus: 0 0 0 1px var(--state-inactive-color);
-          border-color: var(--state-inactive-color);
-          box-shadow: var(--shadow-default), var(--shadow-focus);
+        .selector-row {
+          padding: 12px 0 16px 16px;
        }
      `,
    ];
--- 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, "value-changed", { value });
+    fireEvent(this, "yaml-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>
--- a/src/panels/config/script/manual-script-editor.ts
+++ b/src/panels/config/script/manual-script-editor.ts
@@ -22,7 +22,6 @@ import {
  extractSearchParam,
  removeSearchParam,
 } from "../../../common/url/search-params";
-import { computeRTL } from "../../../common/util/compute_rtl";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-markdown";
 import type { SidebarConfig } from "../../../data/automation";
@@ -38,6 +37,7 @@ import { showToast } from "../../../util/toast";
 import "../automation/action/ha-automation-action";
 import type HaAutomationAction from "../automation/action/ha-automation-action";
 import "../automation/ha-automation-sidebar";
+import type HaAutomationSidebar from "../automation/ha-automation-sidebar";
 import { showPasteReplaceDialog } from "../automation/paste-replace-dialog/show-dialog-paste-replace";
 import { manualEditorStyles, saveFabStyles } from "../automation/styles";
 import "./ha-script-fields";
@@ -69,17 +69,21 @@ export class HaManualScriptEditor extends LitElement {

  @property({ attribute: false }) public dirty = false;

-  @query("ha-script-fields")
-  private _scriptFields?: HaScriptFields;
-
-  private _openFields = false;
-
  @state() private _pastedConfig?: ScriptConfig;

  @state() private _sidebarConfig?: SidebarConfig;

+  @state() private _sidebarKey?: string;
+
+  @query("ha-script-fields")
+  private _scriptFields?: HaScriptFields;
+
+  @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
+
  private _previousConfig?: ScriptConfig;

+  private _openFields = false;
+
  public addFields() {
    this._openFields = true;
    fireEvent(this, "value-changed", {
@@ -196,36 +200,42 @@ export class HaManualScriptEditor extends LitElement {
    return html`
      <div
        class=${classMap({
-          "split-view": true,
-          "sidebar-hidden": !this._sidebarConfig,
+          "has-sidebar": this._sidebarConfig && !this.narrow,
        })}
      >
        <div class="content-wrapper">
-          <div class="content">${this._renderContent()}</div>
-          <ha-fab
-            slot="fab"
-            class=${this.dirty ? "dirty" : ""}
-            .label=${this.hass.localize("ui.common.save")}
-            .disabled=${this.saving}
-            extended
-            @click=${this._saveScript}
-          >
-            <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
-          </ha-fab>
+          <div class="content">
+            <slot name="alerts"></slot>
+            ${this._renderContent()}
+          </div>
+          <div class="fab-positioner">
+            <div class="fab-positioner">
+              <ha-fab
+                slot="fab"
+                class=${this.dirty ? "dirty" : ""}
+                .label=${this.hass.localize("ui.common.save")}
+                .disabled=${this.saving}
+                extended
+                @click=${this._saveScript}
+              >
+                <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
+              </ha-fab>
+            </div>
+          </div>
+        </div>
+        <div class="sidebar-positioner">
+          <ha-automation-sidebar
+            .sidebarKey=${this._sidebarKey}
+            tabindex="-1"
+            class=${classMap({ hidden: !this._sidebarConfig })}
+            .narrow=${this.narrow}
+            .isWide=${this.isWide}
+            .hass=${this.hass}
+            .config=${this._sidebarConfig}
+            @value-changed=${this._sidebarConfigChanged}
+            .disabled=${this.disabled}
+          ></ha-automation-sidebar>
        </div>
-        <ha-automation-sidebar
-          class=${classMap({
-            sidebar: true,
-            overlay: !this.isWide,
-            rtl: computeRTL(this.hass),
-          })}
-          .narrow=${this.narrow}
-          .isWide=${this.isWide}
-          .hass=${this.hass}
-          .config=${this._sidebarConfig}
-          @value-changed=${this._sidebarConfigChanged}
-          .disabled=${this.disabled}
-        ></ha-automation-sidebar>
      </div>
    `;
  }
@@ -452,10 +462,14 @@ export class HaManualScriptEditor extends LitElement {
    });
  }

-  private _openSidebar(ev: CustomEvent<SidebarConfig>) {
+  private async _openSidebar(ev: CustomEvent<SidebarConfig>) {
    // deselect previous selected row
    this._sidebarConfig?.close?.();
    this._sidebarConfig = ev.detail;
+    this._sidebarKey = JSON.stringify(this._sidebarConfig);
+
+    await this._sidebarElement?.updateComplete;
+    this._sidebarElement?.focus();
  }

  private _sidebarConfigChanged(ev: CustomEvent<{ value: SidebarConfig }>) {
@@ -522,6 +536,10 @@ export class HaManualScriptEditor extends LitElement {
          font-weight: var(--ha-font-weight-normal);
          flex: 1;
        }
+
+        .description {
+          margin-top: 16px;
+        }
      `,
    ];
  }
--- a/src/panels/config/storage/ha-config-section-storage.ts
+++ b/src/panels/config/storage/ha-config-section-storage.ts
@@ -327,8 +327,7 @@ class HaConfigSectionStorage extends LitElement {
            >${roundWithOneDecimal(freeSpaceGB)} GB</span
          >`,
      });
-      const chart = html`
-        <ha-segmented-bar
+      return html`<ha-segmented-bar
          .heading=${this.hass.localize("ui.panel.config.storage.used_space")}
          .description=${this.hass.localize(
            "ui.panel.config.storage.detailed_description",
@@ -339,17 +338,15 @@ class HaConfigSectionStorage extends LitElement {
          )}
          .segments=${segments}
        ></ha-segmented-bar>
-      `;
-      return storageInfo || storageInfo === null
-        ? chart
-        : html`
-            <div class="loading-container">
-              ${chart}
-              <div class="loading-overlay">
-                <ha-spinner></ha-spinner>
-              </div>
-            </div>
-          `;
+
+        ${!storageInfo || storageInfo === null
+          ? html`<ha-alert alert-type="info">
+              <ha-spinner slot="icon"></ha-spinner>
+              ${this.hass.localize(
+                "ui.panel.config.storage.loading_detailed"
+              )}</ha-alert
+            >`
+          : nothing}`;
    }
  );

@@ -522,6 +519,10 @@ class HaConfigSectionStorage extends LitElement {
    ha-icon-next {
      width: 24px;
    }
+
+    ha-alert ha-spinner {
+      --ha-spinner-size: 24px;
+    }
  `;
 }

--- a/src/panels/developer-tools/state/developer-tools-state.ts
+++ b/src/panels/developer-tools/state/developer-tools-state.ts
@@ -568,6 +568,10 @@ class HaPanelDevState extends LitElement {
          margin: 0 8px 16px;
        }

+        ha-expansion-panel p {
+          padding: 0 8px;
+        }
+
        .inputs {
          width: 100%;
          max-width: 800px;
@@ -579,8 +583,9 @@ class HaPanelDevState extends LitElement {

        .button-row {
          display: flex;
-          margin-top: 8px;
+          margin: 8px 0;
          align-items: center;
+          gap: 8px;
        }

        :host([narrow]) .state-wrapper {
--- a/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts
+++ b/src/panels/lovelace/card-features/hui-history-chart-card-feature.ts
@@ -19,7 +19,6 @@ import type {
 import { getSensorNumericDeviceClasses } from "../../../data/sensor";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import { getGraphColorByIndex } from "../../../common/color/colors";
 import { computeTimelineColor } from "../../../components/chart/timeline-color";
 import { downSampleLineData } from "../../../components/chart/down-sample";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -93,20 +92,19 @@ class HuiHistoryChartCardFeature
    const width = this.clientWidth;
    const height = this.clientHeight;
    if (line) {
-      const points = this._generateLinePoints(line);
-      const { paths, filledPaths } = this._getLinePaths(points);
-      const color = getGraphColorByIndex(0, this.style);
+      const { points, yAxisOrigin } = this._generateLinePoints(line);
+      const { paths, filledPaths } = this._getLinePaths(points, yAxisOrigin);

      return html`
        <div class="line" @click=${this._handleClick}>
          ${svg`<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}">
            ${paths.map(
              (path) =>
-                svg`<path d="${path}" stroke="${color}" stroke-width="1" stroke-linecap="round" fill="none" />`
+                svg`<path d="${path}" stroke="var(--feature-color)" stroke-width="1" stroke-linecap="round" fill="none" />`
            )}
            ${filledPaths.map(
              (path) =>
-                svg`<path d="${path}" stroke="none" stroke-linecap="round" fill="${color}" fill-opacity="0.2" />`
+                svg`<path d="${path}" stroke="none" stroke-linecap="round" fill="var(--feature-color)" fill-opacity="0.2" />`
            )}
              </svg>`}
        </div>
@@ -161,9 +159,13 @@ class HuiHistoryChartCardFeature
    );
  }

-  private _generateLinePoints(line: LineChartUnit): { x: number; y: number }[] {
+  private _generateLinePoints(line: LineChartUnit): {
+    points: { x: number; y: number }[];
+    yAxisOrigin: number;
+  } {
    const width = this.clientWidth;
    const height = this.clientHeight;
+    let yAxisOrigin = height;
    let minY = Number(line.data[0].states[0].state);
    let maxY = Number(line.data[0].states[0].state);
    const minX = line.data[0].states[0].last_changed;
@@ -172,8 +174,7 @@ class HuiHistoryChartCardFeature
      const stateValue = Number(stateData.state);
      if (stateValue < minY) {
        minY = stateValue;
-      }
-      if (stateValue > maxY) {
+      } else if (stateValue > maxY) {
        maxY = stateValue;
      }
    });
@@ -187,9 +188,21 @@ class HuiHistoryChartCardFeature
      minX,
      maxX
    );
-    // add margin to the min and max
-    minY -= rangeY * 0.1;
-    maxY += rangeY * 0.1;
+    if (maxY < 0) {
+      // all values are negative
+      // add margin
+      maxY += rangeY * 0.1;
+      maxY = Math.min(0, maxY);
+      yAxisOrigin = 0;
+    } else if (minY < 0) {
+      // some values are negative
+      yAxisOrigin = (maxY / (maxY - minY || 1)) * height;
+    } else {
+      // all values are positive
+      // add margin
+      minY -= rangeY * 0.1;
+      minY = Math.max(0, minY);
+    }
    const yDenom = maxY - minY || 1;
    const xDenom = maxX - minX || 1;
    const points = sampledData!.map((point) => {
@@ -198,7 +211,7 @@ class HuiHistoryChartCardFeature
      return { x, y };
    });
    points.push({ x: width, y: points[points.length - 1].y });
-    return points;
+    return { points, yAxisOrigin };
  }

  private _generateTimelineRanges(timeline: TimelineEntity) {
@@ -234,7 +247,10 @@ class HuiHistoryChartCardFeature
    return ranges;
  }

-  private _getLinePaths(points: { x: number; y: number }[]) {
+  private _getLinePaths(
+    points: { x: number; y: number }[],
+    yAxisOrigin: number
+  ) {
    const paths: string[] = [];
    const filledPaths: string[] = [];
    if (!points.length) {
@@ -269,7 +285,7 @@ class HuiHistoryChartCardFeature
      paths.push(path);
      filledPaths.push(
        path +
-          ` L ${next!.x},${this.clientHeight} L ${pathPoints[0].x},${this.clientHeight} Z`
+          ` L ${next!.x},${yAxisOrigin} L ${pathPoints[0].x},${yAxisOrigin} Z`
      );
    });

--- a/src/panels/lovelace/card-features/types.ts
+++ b/src/panels/lovelace/card-features/types.ts
@@ -239,6 +239,7 @@ export type LovelaceCardFeatureConfig =
  | FanOscillateCardFeatureConfig
  | FanPresetModesCardFeatureConfig
  | FanSpeedCardFeatureConfig
+  | HistoryChartCardFeatureConfig
  | HumidifierToggleCardFeatureConfig
  | HumidifierModesCardFeatureConfig
  | LawnMowerCommandsCardFeatureConfig
--- a/src/panels/lovelace/cards/clock/hui-clock-card-digital.ts
+++ b/src/panels/lovelace/cards/clock/hui-clock-card-digital.ts
@@ -36,11 +36,12 @@ export class HuiClockCardDigital extends LitElement {
      locale = { ...locale, time_format: this.config.time_format };
    }

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

-const STATES_OFF = new Set([
-  "closed",
-  "locked",
-  "not_home",
-  "off",
-  "unavailable",
-  "unknown",
-]);
-
@customElement("hui-picture-glance-card")
 class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
  public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -303,7 +295,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
          .disabled=${!hasAction(entityConf.tap_action)}
          .config=${entityConf}
          class=${classMap({
-            "state-on": !STATES_OFF.has(stateObj.state),
+            "state-on": stateActive(stateObj),
          })}
          title=${`${computeStateName(
            stateObj
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -26,6 +26,7 @@ import type {
 import type { LovelaceHeaderFooterConfig } from "../header-footer/types";
 import type { LovelaceHeadingBadgeConfig } from "../heading-badges/types";
 import type { TimeFormat } from "../../../data/translation";
+import type { HomeSummary } from "../strategies/home/helpers/home-summaries";

 export type AlarmPanelCardConfigState =
  | "arm_away"
@@ -588,3 +589,11 @@ export interface HeadingCardConfig extends LovelaceCardConfig {
  /** @deprecated Use `badges` instead */
  entities?: LovelaceHeadingBadgeConfig[];
 }
+
+export interface HomeSummaryCard extends LovelaceCardConfig {
+  summary: HomeSummary;
+  vertical?: boolean;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
+  double_tap_action?: ActionConfig;
+}
--- a/src/panels/lovelace/create-element/create-card-element.ts
+++ b/src/panels/lovelace/create-element/create-card-element.ts
@@ -68,6 +68,7 @@ const LAZY_LOAD_TYPES = {
  "energy-sankey": () => import("../cards/energy/hui-energy-sankey-card"),
  "entity-filter": () => import("../cards/hui-entity-filter-card"),
  error: () => import("../cards/hui-error-card"),
+  "home-summary": () => import("../cards/hui-home-summary-card"),
  gauge: () => import("../cards/hui-gauge-card"),
  "history-graph": () => import("../cards/hui-history-graph-card"),
  "horizontal-stack": () => import("../cards/hui-horizontal-stack-card"),
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -355,7 +355,10 @@ class HUIRoot extends LitElement {
      overflowItems.forEach((i) => {
        const title = [this.hass!.localize(i.key), i.suffix].join(" ");
        const action = i.subItems
-          ? () => {
+          ? (e) => {
+              if (!shouldHandleRequestSelectedEvent(e)) {
+                return;
+              }
              showListItemsDialog(this, {
                title: title,
                items: i.subItems!.map((si) => ({
--- a/src/panels/lovelace/strategies/home/editor/hui-home-dashboard-strategy-editor.ts
+++ b/src/panels/lovelace/strategies/home/editor/hui-home-dashboard-strategy-editor.ts
@@ -29,8 +29,12 @@ export class HuiHomeDashboardStrategyEditor
      <ha-entities-picker
        .hass=${this.hass}
        .value=${this._config.favorite_entities || []}
-        label="Favorite entities"
-        placeholder="Add favorite entity"
+        label=${this.hass.localize(
+          "ui.panel.lovelace.editor.strategy.home.favorite_entities"
+        )}
+        placeholder=${this.hass.localize(
+          "ui.panel.lovelace.editor.strategy.home.add_favorite_entity"
+        )}
        reorder
        allow-custom-entity
        @value-changed=${this._valueChanged}
--- a/src/panels/lovelace/strategies/home/helpers/home-summaries.ts
+++ b/src/panels/lovelace/strategies/home/helpers/home-summaries.ts
@@ -2,6 +2,7 @@ import type {
  EntityFilter,
  EntityFilterFunc,
 } from "../../../../../common/entity/entity_filter";
+import type { LocalizeFunc } from "../../../../../common/translations/localize";

 export const HOME_SUMMARIES = [
  "lights",
@@ -10,16 +11,16 @@ export const HOME_SUMMARIES = [
  "media_players",
 ] as const;

-export type HomeSummaries = (typeof HOME_SUMMARIES)[number];
+export type HomeSummary = (typeof HOME_SUMMARIES)[number];

-export const HOME_SUMMARIES_ICONS: Record<HomeSummaries, string> = {
+export const HOME_SUMMARIES_ICONS: Record<HomeSummary, string> = {
  lights: "mdi:lamps",
  climate: "mdi:home-thermometer",
  security: "mdi:security",
  media_players: "mdi:multimedia",
 };

-export const HOME_SUMMARIES_FILTERS: Record<HomeSummaries, EntityFilter[]> = {
+export const HOME_SUMMARIES_FILTERS: Record<HomeSummary, EntityFilter[]> = {
  lights: [{ domain: "light", entity_category: "none" }],
  climate: [
    { domain: "climate", entity_category: "none" },
@@ -65,7 +66,7 @@ export const HOME_SUMMARIES_FILTERS: Record<HomeSummaries, EntityFilter[]> = {
    },
    {
      domain: "binary_sensor",
-      device_class: ["door", "garage_door"],
+      device_class: ["door", "garage_door", "motion"],
      entity_category: "none",
    },
  ],
@@ -90,3 +91,6 @@ export const findEntities = (

  return results;
 };
+
+export const getSummaryLabel = (localize: LocalizeFunc, summary: HomeSummary) =>
+  localize(`ui.panel.lovelace.strategy.home.summary_list.${summary}`);
--- a/src/panels/lovelace/strategies/home/home-area-view-strategy.ts
+++ b/src/panels/lovelace/strategies/home/home-area-view-strategy.ts
@@ -14,10 +14,11 @@ import type { HeadingCardConfig } from "../../cards/types";
 import { computeAreaTileCardConfig } from "../areas/helpers/areas-strategy-helper";
 import {
  findEntities,
+  getSummaryLabel,
  HOME_SUMMARIES,
  HOME_SUMMARIES_FILTERS,
  HOME_SUMMARIES_ICONS,
-  type HomeSummaries,
+  type HomeSummary,
 } from "./helpers/home-summaries";

 export interface HomeAreaViewStrategyConfig {
@@ -96,7 +97,7 @@ export class HomeAreaViewStrategy extends ReactiveElement {
        acc[summary] = findEntities(areaEntities, filterFunctions);
        return acc;
      },
-      {} as Record<HomeSummaries, string[]>
+      {} as Record<HomeSummary, string[]>
    );

    const {
@@ -110,7 +111,11 @@ export class HomeAreaViewStrategy extends ReactiveElement {
      sections.push({
        type: "grid",
        cards: [
-          computeHeadingCard("Lights", HOME_SUMMARIES_ICONS.lights, "lights"),
+          computeHeadingCard(
+            getSummaryLabel(hass.localize, "lights"),
+            HOME_SUMMARIES_ICONS.lights,
+            "lights"
+          ),
          ...lights.map(computeTileCard),
        ],
      });
@@ -121,7 +126,7 @@ export class HomeAreaViewStrategy extends ReactiveElement {
        type: "grid",
        cards: [
          computeHeadingCard(
-            "Climate",
+            getSummaryLabel(hass.localize, "climate"),
            HOME_SUMMARIES_ICONS.climate,
            "climate"
          ),
@@ -135,7 +140,7 @@ export class HomeAreaViewStrategy extends ReactiveElement {
        type: "grid",
        cards: [
          computeHeadingCard(
-            "Security",
+            getSummaryLabel(hass.localize, "security"),
            HOME_SUMMARIES_ICONS.security,
            "security"
          ),
@@ -149,7 +154,7 @@ export class HomeAreaViewStrategy extends ReactiveElement {
        type: "grid",
        cards: [
          computeHeadingCard(
-            "Media players",
+            getSummaryLabel(hass.localize, "media_players"),
            HOME_SUMMARIES_ICONS.media_players,
            "media-players"
          ),
@@ -229,9 +234,11 @@ export class HomeAreaViewStrategy extends ReactiveElement {
      const device = hass.devices[deviceId];
      let heading = "";
      if (device) {
-        heading = computeDeviceName(device) || "Unnamed device";
+        heading =
+          computeDeviceName(device) ||
+          hass.localize("ui.panel.lovelace.strategy.home.unamed_device");
      } else {
-        heading = "Others";
+        heading = hass.localize("ui.panel.lovelace.strategy.home.others");
      }

      deviceSections.push({
--- a/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts
+++ b/src/panels/lovelace/strategies/home/home-climate-view-strategy.ts
@@ -12,17 +12,37 @@ import {
 } from "../areas/helpers/areas-strategy-helper";
 import { getHomeStructure } from "./helpers/home-structure";
 import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
+import { computeStateName } from "../../../../common/entity/compute_state_name";
+import { computeObjectId } from "../../../../common/entity/compute_object_id";

 export interface HomeClimateViewStrategyConfig {
  type: "home-climate";
 }

+const createTempHumidBadge = (hass: HomeAssistant, entityId: string) => {
+  const stateObj = hass.states[entityId];
+  return {
+    type: "tile",
+    entity: entityId,
+    name: stateObj
+      ? computeStateName(stateObj)
+      : computeObjectId(entityId).replace(/_/g, " "),
+    features: [
+      {
+        type: "history-chart",
+        hours_to_show: 3,
+      },
+    ],
+  };
+};
+
 const processAreasForClimate = (
  areaIds: string[],
  hass: HomeAssistant,
  entities: string[]
 ): LovelaceCardConfig[] => {
  const cards: LovelaceCardConfig[] = [];
+  const computeTileCard = computeAreaTileCardConfig(hass, "", true);

  for (const areaId of areaIds) {
    const area = hass.areas[areaId];
@@ -33,8 +53,6 @@ const processAreasForClimate = (
    });
    const areaEntities = entities.filter(areaFilter);

-    const computeTileCard = computeAreaTileCardConfig(hass, "", true);
-
    if (areaEntities.length > 0) {
      cards.push({
        heading_style: "subtitle",
@@ -46,6 +64,17 @@ const processAreasForClimate = (
        },
      });

+      if (hass.areas[areaId].temperature_entity_id) {
+        cards.push(
+          createTempHumidBadge(hass, hass.areas[areaId].temperature_entity_id)
+        );
+      }
+      if (hass.areas[areaId].humidity_entity_id) {
+        cards.push(
+          createTempHumidBadge(hass, hass.areas[areaId].humidity_entity_id)
+        );
+      }
+
      for (const entityId of areaEntities) {
        cards.push(computeTileCard(entityId));
      }
@@ -89,7 +118,10 @@ export class HomeClimateViewStrategy extends ReactiveElement {
        cards: [
          {
            type: "heading",
-            heading: floorCount > 1 ? floor.name : "Areas",
+            heading:
+              floorCount > 1
+                ? floor.name
+                : hass.localize("ui.panel.lovelace.strategy.home.areas"),
          },
        ],
      };
@@ -110,7 +142,10 @@ export class HomeClimateViewStrategy extends ReactiveElement {
        cards: [
          {
            type: "heading",
-            heading: floorCount > 1 ? "Other areas" : "Areas",
+            heading:
+              floorCount > 1
+                ? hass.localize("ui.panel.lovelace.strategy.home.other_areas")
+                : hass.localize("ui.panel.lovelace.strategy.home.areas"),
          },
        ],
      };
--- a/src/panels/lovelace/strategies/home/home-dashboard-strategy.ts
+++ b/src/panels/lovelace/strategies/home/home-dashboard-strategy.ts
@@ -6,7 +6,10 @@ import type { LovelaceViewRawConfig } from "../../../../data/lovelace/config/vie
 import type { HomeAssistant } from "../../../../types";
 import { getAreas } from "../areas/helpers/areas-strategy-helper";
 import type { LovelaceStrategyEditor } from "../types";
-import { HOME_SUMMARIES_ICONS } from "./helpers/home-summaries";
+import {
+  getSummaryLabel,
+  HOME_SUMMARIES_ICONS,
+} from "./helpers/home-summaries";
 import type { HomeAreaViewStrategyConfig } from "./home-area-view-strategy";
 import type { HomeMainViewStrategyConfig } from "./home-main-view-strategy";

@@ -60,7 +63,7 @@ export class HomeDashboardStrategy extends ReactiveElement {
    });

    const lightView = {
-      title: "Lights",
+      title: getSummaryLabel(hass.localize, "lights"),
      path: "lights",
      subview: true,
      strategy: {
@@ -70,7 +73,7 @@ export class HomeDashboardStrategy extends ReactiveElement {
    } satisfies LovelaceViewRawConfig;

    const climateView = {
-      title: "Climate",
+      title: getSummaryLabel(hass.localize, "climate"),
      path: "climate",
      subview: true,
      strategy: {
@@ -80,7 +83,7 @@ export class HomeDashboardStrategy extends ReactiveElement {
    } satisfies LovelaceViewRawConfig;

    const securityView = {
-      title: "Security",
+      title: getSummaryLabel(hass.localize, "security"),
      path: "security",
      subview: true,
      strategy: {
@@ -90,7 +93,7 @@ export class HomeDashboardStrategy extends ReactiveElement {
    } satisfies LovelaceViewRawConfig;

    const mediaPlayersView = {
-      title: "Media players",
+      title: getSummaryLabel(hass.localize, "media_players"),
      path: "media-players",
      subview: true,
      strategy: {
--- a/src/panels/lovelace/strategies/home/home-lights-view-strategy.ts
+++ b/src/panels/lovelace/strategies/home/home-lights-view-strategy.ts
@@ -89,7 +89,10 @@ export class HomeLightsViewStrategy extends ReactiveElement {
        cards: [
          {
            type: "heading",
-            heading: floorCount > 1 ? floor.name : "Areas",
+            heading:
+              floorCount > 1
+                ? floor.name
+                : hass.localize("ui.panel.lovelace.strategy.home.areas"),
          },
        ],
      };
@@ -110,7 +113,10 @@ export class HomeLightsViewStrategy extends ReactiveElement {
        cards: [
          {
            type: "heading",
-            heading: floorCount > 1 ? "Other areas" : "Areas",
+            heading:
+              floorCount > 1
+                ? hass.localize("ui.panel.lovelace.strategy.home.other_areas")
+                : hass.localize("ui.panel.lovelace.strategy.home.areas"),
          },
        ],
      };
--- a/src/panels/lovelace/strategies/home/home-main-view-strategy.ts
+++ b/src/panels/lovelace/strategies/home/home-main-view-strategy.ts
@@ -9,13 +9,12 @@ import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
 import type {
  AreaCardConfig,
-  ButtonCardConfig,
+  HomeSummaryCard,
  MarkdownCardConfig,
  TileCardConfig,
  WeatherForecastCardConfig,
 } from "../../cards/types";
 import { getAreas } from "../areas/helpers/areas-strategy-helper";
-import { HOME_SUMMARIES_ICONS } from "./helpers/home-summaries";

 export interface HomeMainViewStrategyConfig {
  type: "home-main";
@@ -63,7 +62,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
        {
          type: "heading",
          heading_style: "title",
-          heading: "Areas",
+          heading: hass.localize("ui.panel.lovelace.strategy.home.areas"),
        },
        ...areas.map<AreaCardConfig>((area) =>
          computeAreaCard(area.area_id, hass)
@@ -96,6 +95,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
            ({
              type: "tile",
              entity: entityId,
+              show_entity_picture: true,
            }) as TileCardConfig
        )
      );
@@ -107,64 +107,60 @@ export class HomeMainViewStrategy extends ReactiveElement {
      cards: [
        {
          type: "heading",
-          heading: "Summaries",
+          heading: hass.localize("ui.panel.lovelace.strategy.home.summaries"),
        },
        {
-          type: "button",
-          icon: HOME_SUMMARIES_ICONS.lights,
-          name: "Lights",
-          icon_height: "24px",
-          grid_options: {
-            rows: 2,
-            columns: 4,
-          },
+          type: "home-summary",
+          summary: "lights",
+          vertical: true,
          tap_action: {
            action: "navigate",
            navigation_path: "lights",
          },
-        } satisfies ButtonCardConfig,
-        {
-          type: "button",
-          icon: HOME_SUMMARIES_ICONS.climate,
-          name: "Climate",
-          icon_height: "30px",
          grid_options: {
            rows: 2,
            columns: 4,
          },
+        } satisfies HomeSummaryCard,
+        {
+          type: "home-summary",
+          summary: "climate",
+          vertical: true,
          tap_action: {
            action: "navigate",
            navigation_path: "climate",
          },
-        } satisfies ButtonCardConfig,
-        {
-          type: "button",
-          icon: HOME_SUMMARIES_ICONS.security,
-          name: "Security",
-          icon_height: "30px",
          grid_options: {
            rows: 2,
            columns: 4,
          },
+        } satisfies HomeSummaryCard,
+        {
+          type: "home-summary",
+          summary: "security",
+          vertical: true,
          tap_action: {
            action: "navigate",
            navigation_path: "security",
          },
-        } satisfies ButtonCardConfig,
-        {
-          type: "button",
-          icon: HOME_SUMMARIES_ICONS.media_players,
-          name: "Media Players",
-          icon_height: "30px",
          grid_options: {
            rows: 2,
            columns: 4,
          },
+        } satisfies HomeSummaryCard,
+        {
+          type: "home-summary",
+          summary: "media_players",
+          vertical: true,
          tap_action: {
            action: "navigate",
            navigation_path: "media-players",
          },
-        } satisfies ButtonCardConfig,
+          grid_options: {
+            rows: 2,
+            columns: 4,
+          },
+        } satisfies HomeSummaryCard,
      ],
    };

@@ -231,7 +227,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
        card: {
          type: "markdown",
          text_only: true,
-          content: "## Welcome {{user}}",
+          content: `## ${hass.localize("ui.panel.lovelace.strategy.home.welcome_user", { user: "{{ user }}" })}`,
        } satisfies MarkdownCardConfig,
      },
    };
--- a/src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts
+++ b/src/panels/lovelace/strategies/home/home-media-players-view-strategy.ts
@@ -87,7 +87,10 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
        cards: [
          {
            type: "heading",
-            heading: floorCount > 1 ? floor.name : "Areas",
+            heading:
+              floorCount > 1
+                ? floor.name
+                : hass.localize("ui.panel.lovelace.strategy.home.areas"),
          },
        ],
      };
@@ -108,7 +111,10 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
        cards: [
          {
            type: "heading",
-            heading: floorCount > 1 ? "Other areas" : "Areas",
+            heading:
+              floorCount > 1
+                ? hass.localize("ui.panel.lovelace.strategy.home.other_areas")
+                : hass.localize("ui.panel.lovelace.strategy.home.areas"),
          },
        ],
      };
--- a/src/panels/lovelace/strategies/home/home-security-view-strategy.ts
+++ b/src/panels/lovelace/strategies/home/home-security-view-strategy.ts
@@ -12,6 +12,9 @@ import {
 } from "../areas/helpers/areas-strategy-helper";
 import { getHomeStructure } from "./helpers/home-structure";
 import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
+import { computeDomain } from "../../../../common/entity/compute_domain";
+import { computeStateName } from "../../../../common/entity/compute_state_name";
+import { computeObjectId } from "../../../../common/entity/compute_object_id";

 export interface HomeSecurityViewStrategyConfig {
  type: "home-security";
@@ -23,6 +26,7 @@ const processAreasForSecurity = (
  entities: string[]
 ): LovelaceCardConfig[] => {
  const cards: LovelaceCardConfig[] = [];
+  const computeTileCard = computeAreaTileCardConfig(hass, "", false);

  for (const areaId of areaIds) {
    const area = hass.areas[areaId];
@@ -33,8 +37,6 @@ const processAreasForSecurity = (
    });
    const areaEntities = entities.filter(areaFilter);

-    const computeTileCard = computeAreaTileCardConfig(hass, "", false);
-
    if (areaEntities.length > 0) {
      cards.push({
        heading_style: "subtitle",
@@ -47,7 +49,25 @@ const processAreasForSecurity = (
      });

      for (const entityId of areaEntities) {
-        cards.push(computeTileCard(entityId));
+        const stateObj = hass.states[entityId];
+        cards.push(
+          computeDomain(entityId) === "binary_sensor" &&
+            stateObj?.attributes.device_class === "motion"
+            ? {
+                type: "tile",
+                entity: entityId,
+                name: stateObj
+                  ? computeStateName(stateObj)
+                  : computeObjectId(entityId).replace(/_/g, " "),
+                features: [
+                  {
+                    type: "history-chart",
+                    hours_to_show: 6,
+                  },
+                ],
+              }
+            : computeTileCard(entityId)
+        );
      }
    }
  }
@@ -89,7 +109,10 @@ export class HomeSecurityViewStrategy extends ReactiveElement {
        cards: [
          {
            type: "heading",
-            heading: floorCount > 1 ? floor.name : "Areas",
+            heading:
+              floorCount > 1
+                ? floor.name
+                : hass.localize("ui.panel.lovelace.strategy.home.areas"),
          },
        ],
      };
@@ -110,7 +133,10 @@ export class HomeSecurityViewStrategy extends ReactiveElement {
        cards: [
          {
            type: "heading",
-            heading: floorCount > 1 ? "Other areas" : "Areas",
+            heading:
+              floorCount > 1
+                ? hass.localize("ui.panel.lovelace.strategy.home.other_areas")
+                : hass.localize("ui.panel.lovelace.strategy.home.areas"),
          },
        ],
      };
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -201,6 +201,15 @@
        "open_door_confirm": "Really open?",
        "open_door_done": "Done"
      },
+      "home-summary": {
+        "all_lights_off": "All off",
+        "count_lights_on": "{count} {count, plural,\n one {on}\n other {on}\n}",
+        "count_locks_unlocked": "{count} {count, plural,\n one {unlocked}\n other {unlocked}\n}",
+        "count_alarms_disarmed": "{count} {count, plural,\n one {disarmed}\n other {disarmed}\n}",
+        "all_secure": "All secure",
+        "no_media_playing": "No media playing",
+        "count_media_playing": "{count} {count, plural,\n one {playing}\n other {playing}\n}"
+      },
      "media_player": {
        "source": "Source",
        "sound_mode": "Sound mode",
@@ -453,7 +462,7 @@
          "media_content_id": "Media content ID",
          "media_content_type": "Media content type",
          "media_content_id_detail": "The ID of the content to play. Platform dependent.",
-          "media_content_type_detail": "The type of the content to play, such as image, music, tv show, video, episode, channel, or playlist."
+          "media_content_type_detail": "The type of the content to play, such as image, music, TV show, video, episode, channel, or playlist."
        },
        "file": {
          "upload_failed": "Upload failed",
@@ -3850,7 +3859,7 @@
            "triggers": {
              "name": "Triggers",
              "header": "When",
-              "description": "A trigger is a specific event happening in or around your home, for example: ''When the sun sets''. Any trigger listed here will start your automation.",
+              "description": "A trigger is a specific event happening in or around your home, for example: ''When the sun sets''. Any trigger added here will start your automation.",
              "learn_more": "Learn more about triggers",
              "triggered": "Triggered",
              "add": "Add trigger",
@@ -4110,7 +4119,7 @@
            "conditions": {
              "name": "Conditions",
              "header": "And if",
-              "description": "This list of conditions needs to be satisfied for the automation to run. A condition can be satisfied or not at any given time, for example: ''If {user} is home''. You can use building blocks to create more complex conditions.",
+              "description": "All conditions added here need to be satisfied for the automation to run. A condition can be satisfied or not at any given time, for example: ''If {user} is home''. You can use building blocks to create more complex conditions.",
              "learn_more": "Learn more about conditions",
              "add": "Add condition",
              "search": "Search condition",
@@ -4277,7 +4286,7 @@
            "actions": {
              "name": "Actions",
              "header": "Then do",
-              "description": "This list of actions will be performed in sequence when the automation runs. An action usually controls one of your areas, devices, or entities, for example: 'Turn on the lights'. You can use building blocks to create more complex sequences of actions.",
+              "description": "All actions added here will be performed in sequence when the automation runs. An action usually controls one of your areas, devices, or entities, for example: 'Turn on the lights'. You can use building blocks to create more complex sequences of actions.",
              "learn_more": "Learn more about actions",
              "add": "Add action",
              "search": "Search action",
@@ -5118,7 +5127,7 @@
            "integration": "Integration",
            "config_entry": "Config entry"
          },
-          "enabled_description": "Disabled devices will not be shown and entities belonging to the device will be disabled and not added to Home Assistant.",
+          "enabled_description": "Disabled devices and services will not be shown and entities belonging to them will be disabled, too.",
          "open_configuration_url": "Visit",
          "set_up_voice_assistant": "Set up voice assistant",
          "download_diagnostics": "Download diagnostics",
@@ -5447,8 +5456,8 @@
          "config_entry": {
            "application_credentials": {
              "delete_title": "Application credentials",
-              "delete_prompt": "Would you like to also delete Application Credentials for this integration?",
-              "delete_detail": "If you delete them, you will need to enter credentials when setting up the integration again. If you keep them, they will be used automatically when setting up the integration again or may be accessed from the Application Credentials menu.",
+              "delete_prompt": "Would you like to also delete application credentials for this integration?",
+              "delete_detail": "If you delete them, you will need to enter credentials when setting up the integration again. If you keep them, they will be used automatically when setting up the integration again or may be accessed from the Application credentials menu.",
              "delete_error_title": "Deleting application credentials failed",
              "dismiss": "Keep",
              "learn_more": "Learn more about application credentials"
@@ -5647,10 +5656,10 @@
        },
        "application_credentials": {
          "caption": "Application credentials",
-          "description": "Manage the OAuth application credentials used by Integrations",
+          "description": "Manage the OAuth application credentials used by integrations",
          "editor": {
-            "caption": "Add credentials",
-            "description": "OAuth is used to grant Home Assistant access to information on other websites without giving a password. This mechanism is used by companies such as Spotify, Google, Withings, Microsoft, and Twitter.",
+            "caption": "Add application credentials",
+            "description": "OAuth is used to grant Home Assistant secure delegated access to information on other websites without revealing your personal credentials.",
            "missing_credentials": "Setting up {integration} requires configuring application credentials.",
            "missing_credentials_domain_link": "View {integration} documentation",
            "view_documentation": "View application credentials documentation",
@@ -6571,7 +6580,7 @@
            "in_progress": "We're communicating with the device. This may take some time.",
            "failed": "The command failed. Additional information may be available in the logs.",
            "success": "Your device is ready to be added to another Matter platform.",
-            "scan_code": "With their app, scan the QR code or enter the sharing code below to finish set up.",
+            "scan_code": "With their app, scan the QR code or enter the sharing code below to finish setup.",
            "copy_code": "Copy code"
          }
        },
@@ -6664,6 +6673,7 @@
          "ip_information": "IP information",
          "adapter": {
            "auto_configure": "Autoconfigure",
+            "auto_configure_manual_hint": "Uncheck to manually select network adapters",
            "detected": "Detected",
            "adapter": "Adapter"
          }
@@ -6673,6 +6683,7 @@
          "description": "{percent_used} used - {free_space} free",
          "used_space": "Storage",
          "detailed_description": "{used} of {total} used",
+          "loading_detailed": "Loading detailed storage information...",
          "segments": {
            "used": "Used space",
            "free": "Free space",
@@ -6815,6 +6826,20 @@
            },
            "other_areas": "Other areas",
            "areas": "Areas"
+          },
+          "home": {
+            "summary_list": {
+              "climate": "Climate",
+              "lights": "Lights",
+              "security": "Security",
+              "media_players": "Media players"
+            },
+            "welcome_user": "Welcome {user}",
+            "summaries": "Summaries",
+            "areas": "Areas",
+            "other_areas": "Other areas",
+            "unamed_device": "Unnamed device",
+            "others": "Others"
          }
        },
        "cards": {
@@ -8174,6 +8199,10 @@
              "no_entities": "No entities in this group, the section will not be displayed",
              "use_compact_card": "Use compact card",
              "use_large_card": "Use large card"
+            },
+            "home": {
+              "favorite_entities": "Favorite entities",
+              "add_favorite_entity": "Add favorite entity"
            }
          },
          "view": {
--- a/yarn.lock
+++ b/yarn.lock
@@ -3281,58 +3281,58 @@ __metadata:
  languageName: node
  linkType: hard

-"@module-federation/error-codes@npm:0.17.1":
-  version: 0.17.1
-  resolution: "@module-federation/error-codes@npm:0.17.1"
-  checksum: 10/5f5f02a90a423479c84e4ff4398a3a9e31b66bd545e7c978ecb8a417f33162b86e749356baab14c006e741c9cebae549335a4c99e94ce7ef54210269fdf74f7f
+"@module-federation/error-codes@npm:0.18.0":
+  version: 0.18.0
+  resolution: "@module-federation/error-codes@npm:0.18.0"
+  checksum: 10/ccd00f6b2504ec2e685bda6d175ed86df27e21994b36869140a18059595716e9ea7db5d0b516a095891ec9e6c90e702f42a366743df3652bf91ff3bb4f895991
  languageName: node
  linkType: hard

-"@module-federation/runtime-core@npm:0.17.1":
-  version: 0.17.1
-  resolution: "@module-federation/runtime-core@npm:0.17.1"
+"@module-federation/runtime-core@npm:0.18.0":
+  version: 0.18.0
+  resolution: "@module-federation/runtime-core@npm:0.18.0"
  dependencies:
-    "@module-federation/error-codes": "npm:0.17.1"
-    "@module-federation/sdk": "npm:0.17.1"
-  checksum: 10/b0c945379bde13af84ceb833e3bfe3c8cf11fd265af0ad7640a1506017529458f408a4a3f1bd0f4b5983da71438913d5c25ed25e20908eb1f789bd1483616650
+    "@module-federation/error-codes": "npm:0.18.0"
+    "@module-federation/sdk": "npm:0.18.0"
+  checksum: 10/82af795408f2e92bea9c801a2057f1a6ed85eaf131195d5deaa4ef9a6a88db9e2cb851b4416e6e43a841459986b5ebb84e98b4625fb9bbd98cee11929f1ede6b
  languageName: node
  linkType: hard

-"@module-federation/runtime-tools@npm:0.17.1":
-  version: 0.17.1
-  resolution: "@module-federation/runtime-tools@npm:0.17.1"
+"@module-federation/runtime-tools@npm:0.18.0":
+  version: 0.18.0
+  resolution: "@module-federation/runtime-tools@npm:0.18.0"
  dependencies:
-    "@module-federation/runtime": "npm:0.17.1"
-    "@module-federation/webpack-bundler-runtime": "npm:0.17.1"
-  checksum: 10/2e183e357b644dbe015d0e51df3fe601852ca79ffe3a30c582eee7a2050d7600eb3253f5de15e476c60741d0a1dd70add1ade7b5a3537cd2ee12bfee286284ea
+    "@module-federation/runtime": "npm:0.18.0"
+    "@module-federation/webpack-bundler-runtime": "npm:0.18.0"
+  checksum: 10/c6b1483899865e4c73be0ae77e6e1a5f517798f7ab3b8c6df2bb7ed22463e7a471f68d5f9528b2aff5b45e2db67596805028206f3956aafec5a36dcefb94afd2
  languageName: node
  linkType: hard

-"@module-federation/runtime@npm:0.17.1":
-  version: 0.17.1
-  resolution: "@module-federation/runtime@npm:0.17.1"
+"@module-federation/runtime@npm:0.18.0":
+  version: 0.18.0
+  resolution: "@module-federation/runtime@npm:0.18.0"
  dependencies:
-    "@module-federation/error-codes": "npm:0.17.1"
-    "@module-federation/runtime-core": "npm:0.17.1"
-    "@module-federation/sdk": "npm:0.17.1"
-  checksum: 10/f5405968dff4fa2cf510127701ec1722105f44298fd09eafeecead450b7bb95a05450749157fe2fc39caf6241bec9e45caa9a55375b48e7f195db84799a8df0c
+    "@module-federation/error-codes": "npm:0.18.0"
+    "@module-federation/runtime-core": "npm:0.18.0"
+    "@module-federation/sdk": "npm:0.18.0"
+  checksum: 10/6164597782b21840e3b8f159000338d8e20a817a60909015c11402e9e6442d60d9c3b4b6f25d92d7261011ef1fc0e8caafbb91f25c29b372f28764cbea8ef9eb
  languageName: node
  linkType: hard

-"@module-federation/sdk@npm:0.17.1":
-  version: 0.17.1
-  resolution: "@module-federation/sdk@npm:0.17.1"
-  checksum: 10/daaaa49ed900c00a69641130cf673ad5d5b8623d82fb4bd03a67c839a6da760a0a5ae29b836ba66eeb95ee5392e558588ffd987a2c00b05c2b0a7c5039ed042d
+"@module-federation/sdk@npm:0.18.0":
+  version: 0.18.0
+  resolution: "@module-federation/sdk@npm:0.18.0"
+  checksum: 10/f397dc53c705ad1f1e19530a8ff79116bb5aeeef92a79b3acaaa6140ae4e5784b42e81d1445eabf536c007c9383857f6764506ed725a6352464fe1ce581af89a
  languageName: node
  linkType: hard

-"@module-federation/webpack-bundler-runtime@npm:0.17.1":
-  version: 0.17.1
-  resolution: "@module-federation/webpack-bundler-runtime@npm:0.17.1"
+"@module-federation/webpack-bundler-runtime@npm:0.18.0":
+  version: 0.18.0
+  resolution: "@module-federation/webpack-bundler-runtime@npm:0.18.0"
  dependencies:
-    "@module-federation/runtime": "npm:0.17.1"
-    "@module-federation/sdk": "npm:0.17.1"
-  checksum: 10/72e5030529dbc53df6271fa78bdb63976d0601fe9fde5105f8a7325e0fa296bc35277b9b084e52995cd314b89e12d33f8b869c1d63a13231c2948d4c741e72fd
+    "@module-federation/runtime": "npm:0.18.0"
+    "@module-federation/sdk": "npm:0.18.0"
+  checksum: 10/c80f26e02d497948a0864283bedf13118d5c188ac8165e71edce5da72776091db6da2dc5da5d47a53fbb6914bfbff1ddfce16a6b9c18485a9a41a04bc4060e34
  languageName: node
  linkType: hard

@@ -3990,92 +3990,92 @@ __metadata:
  languageName: node
  linkType: hard

-"@rspack/binding-darwin-arm64@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-darwin-arm64@npm:1.4.11"
+"@rspack/binding-darwin-arm64@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@rspack/binding-darwin-arm64@npm:1.5.1"
  conditions: os=darwin & cpu=arm64
  languageName: node
  linkType: hard

-"@rspack/binding-darwin-x64@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-darwin-x64@npm:1.4.11"
+"@rspack/binding-darwin-x64@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@rspack/binding-darwin-x64@npm:1.5.1"
  conditions: os=darwin & cpu=x64
  languageName: node
  linkType: hard

-"@rspack/binding-linux-arm64-gnu@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-linux-arm64-gnu@npm:1.4.11"
+"@rspack/binding-linux-arm64-gnu@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@rspack/binding-linux-arm64-gnu@npm:1.5.1"
  conditions: os=linux & cpu=arm64 & libc=glibc
  languageName: node
  linkType: hard

-"@rspack/binding-linux-arm64-musl@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-linux-arm64-musl@npm:1.4.11"
+"@rspack/binding-linux-arm64-musl@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@rspack/binding-linux-arm64-musl@npm:1.5.1"
  conditions: os=linux & cpu=arm64 & libc=musl
  languageName: node
  linkType: hard

-"@rspack/binding-linux-x64-gnu@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-linux-x64-gnu@npm:1.4.11"
+"@rspack/binding-linux-x64-gnu@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@rspack/binding-linux-x64-gnu@npm:1.5.1"
  conditions: os=linux & cpu=x64 & libc=glibc
  languageName: node
  linkType: hard

-"@rspack/binding-linux-x64-musl@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-linux-x64-musl@npm:1.4.11"
+"@rspack/binding-linux-x64-musl@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@rspack/binding-linux-x64-musl@npm:1.5.1"
  conditions: os=linux & cpu=x64 & libc=musl
  languageName: node
  linkType: hard

-"@rspack/binding-wasm32-wasi@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-wasm32-wasi@npm:1.4.11"
+"@rspack/binding-wasm32-wasi@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@rspack/binding-wasm32-wasi@npm:1.5.1"
  dependencies:
    "@napi-rs/wasm-runtime": "npm:^1.0.1"
  conditions: cpu=wasm32
  languageName: node
  linkType: hard

-"@rspack/binding-win32-arm64-msvc@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-win32-arm64-msvc@npm:1.4.11"
+"@rspack/binding-win32-arm64-msvc@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@rspack/binding-win32-arm64-msvc@npm:1.5.1"
  conditions: os=win32 & cpu=arm64
  languageName: node
  linkType: hard

-"@rspack/binding-win32-ia32-msvc@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-win32-ia32-msvc@npm:1.4.11"
+"@rspack/binding-win32-ia32-msvc@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@rspack/binding-win32-ia32-msvc@npm:1.5.1"
  conditions: os=win32 & cpu=ia32
  languageName: node
  linkType: hard

-"@rspack/binding-win32-x64-msvc@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding-win32-x64-msvc@npm:1.4.11"
+"@rspack/binding-win32-x64-msvc@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@rspack/binding-win32-x64-msvc@npm:1.5.1"
  conditions: os=win32 & cpu=x64
  languageName: node
  linkType: hard

-"@rspack/binding@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/binding@npm:1.4.11"
+"@rspack/binding@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@rspack/binding@npm:1.5.1"
  dependencies:
-    "@rspack/binding-darwin-arm64": "npm:1.4.11"
-    "@rspack/binding-darwin-x64": "npm:1.4.11"
-    "@rspack/binding-linux-arm64-gnu": "npm:1.4.11"
-    "@rspack/binding-linux-arm64-musl": "npm:1.4.11"
-    "@rspack/binding-linux-x64-gnu": "npm:1.4.11"
-    "@rspack/binding-linux-x64-musl": "npm:1.4.11"
-    "@rspack/binding-wasm32-wasi": "npm:1.4.11"
-    "@rspack/binding-win32-arm64-msvc": "npm:1.4.11"
-    "@rspack/binding-win32-ia32-msvc": "npm:1.4.11"
-    "@rspack/binding-win32-x64-msvc": "npm:1.4.11"
+    "@rspack/binding-darwin-arm64": "npm:1.5.1"
+    "@rspack/binding-darwin-x64": "npm:1.5.1"
+    "@rspack/binding-linux-arm64-gnu": "npm:1.5.1"
+    "@rspack/binding-linux-arm64-musl": "npm:1.5.1"
+    "@rspack/binding-linux-x64-gnu": "npm:1.5.1"
+    "@rspack/binding-linux-x64-musl": "npm:1.5.1"
+    "@rspack/binding-wasm32-wasi": "npm:1.5.1"
+    "@rspack/binding-win32-arm64-msvc": "npm:1.5.1"
+    "@rspack/binding-win32-ia32-msvc": "npm:1.5.1"
+    "@rspack/binding-win32-x64-msvc": "npm:1.5.1"
  dependenciesMeta:
    "@rspack/binding-darwin-arm64":
      optional: true
@@ -4097,23 +4097,23 @@ __metadata:
      optional: true
    "@rspack/binding-win32-x64-msvc":
      optional: true
-  checksum: 10/8bb94774204f41888ff442afec06f019d008abba79964b74d566acf64f7216a148a1842f90c44b3bf680e69b697d8e5cd0f1cca6fd0b8a94df5f97c2a3f05510
+  checksum: 10/a6756a35bda55fd9e21b1ce142ca18e228d92832dc213027a19314981f8f12e6510dd862a9724ee96dee61755b3dd30ce73b2bb117d150e9f5ce73ba8fe4b57a
  languageName: node
  linkType: hard

-"@rspack/core@npm:1.4.11":
-  version: 1.4.11
-  resolution: "@rspack/core@npm:1.4.11"
+"@rspack/core@npm:1.5.1":
+  version: 1.5.1
+  resolution: "@rspack/core@npm:1.5.1"
  dependencies:
-    "@module-federation/runtime-tools": "npm:0.17.1"
-    "@rspack/binding": "npm:1.4.11"
+    "@module-federation/runtime-tools": "npm:0.18.0"
+    "@rspack/binding": "npm:1.5.1"
    "@rspack/lite-tapable": "npm:1.0.1"
  peerDependencies:
    "@swc/helpers": ">=0.5.1"
  peerDependenciesMeta:
    "@swc/helpers":
      optional: true
-  checksum: 10/77d463bd90feb2d24f7bc56df198f0b7ad310a9eb676070eac8d78014d151e783943c5b44c64700a51a36708c626a341eeaa9b3287e358616d09dfe25ab04e77
+  checksum: 10/b7a6269d5bdbcad140d172ebe951f4693711573d4f38e4c676c250a9cc6c1bdf602ad5187eeacc07ff12b74d510b746c92e3f112c8ab4dca46846c595d2876b0
  languageName: node
  linkType: hard

@@ -4964,106 +4964,106 @@ __metadata:
  languageName: node
  linkType: hard

-"@typescript-eslint/eslint-plugin@npm:8.40.0":
-  version: 8.40.0
-  resolution: "@typescript-eslint/eslint-plugin@npm:8.40.0"
+"@typescript-eslint/eslint-plugin@npm:8.41.0":
+  version: 8.41.0
+  resolution: "@typescript-eslint/eslint-plugin@npm:8.41.0"
  dependencies:
    "@eslint-community/regexpp": "npm:^4.10.0"
-    "@typescript-eslint/scope-manager": "npm:8.40.0"
-    "@typescript-eslint/type-utils": "npm:8.40.0"
-    "@typescript-eslint/utils": "npm:8.40.0"
-    "@typescript-eslint/visitor-keys": "npm:8.40.0"
+    "@typescript-eslint/scope-manager": "npm:8.41.0"
+    "@typescript-eslint/type-utils": "npm:8.41.0"
+    "@typescript-eslint/utils": "npm:8.41.0"
+    "@typescript-eslint/visitor-keys": "npm:8.41.0"
    graphemer: "npm:^1.4.0"
    ignore: "npm:^7.0.0"
    natural-compare: "npm:^1.4.0"
    ts-api-utils: "npm:^2.1.0"
  peerDependencies:
-    "@typescript-eslint/parser": ^8.40.0
+    "@typescript-eslint/parser": ^8.41.0
    eslint: ^8.57.0 || ^9.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/9df4d4ac58734a34964b791622dcb94ffc6c49c1d0f4fd0480b3fc0e026527df7167ff78a4f8bbd29089d605756c28c1a90b2f0653df34b40ac8b969bc6c92e9
+  checksum: 10/b96e3fd9e8ae2c289aa7f1c0d2fbf89c608d37f54162a893bac5895318b05d21d3fd456cf7a6adf165915a8212f773f1bae9b4d83f732441864f6d92d083ed99
  languageName: node
  linkType: hard

-"@typescript-eslint/parser@npm:8.40.0":
-  version: 8.40.0
-  resolution: "@typescript-eslint/parser@npm:8.40.0"
+"@typescript-eslint/parser@npm:8.41.0":
+  version: 8.41.0
+  resolution: "@typescript-eslint/parser@npm:8.41.0"
  dependencies:
-    "@typescript-eslint/scope-manager": "npm:8.40.0"
-    "@typescript-eslint/types": "npm:8.40.0"
-    "@typescript-eslint/typescript-estree": "npm:8.40.0"
-    "@typescript-eslint/visitor-keys": "npm:8.40.0"
+    "@typescript-eslint/scope-manager": "npm:8.41.0"
+    "@typescript-eslint/types": "npm:8.41.0"
+    "@typescript-eslint/typescript-estree": "npm:8.41.0"
+    "@typescript-eslint/visitor-keys": "npm:8.41.0"
    debug: "npm:^4.3.4"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/1e60f70e9d02f930553db7f4684c27c376fadf345db155414a22d1a32cd21def7d36496bd63c1acbf3afbec9fb8794947e880f88c1143b83e1d3c45146cec41a
+  checksum: 10/d4ba418aa62e08d49a5b953c9debd52674c30b9b2bb7bf2efc173a22ad3942df72cd83072beac06d98dad82741baf502a55fc648925ca407b01abdc908675f67
  languageName: node
  linkType: hard

-"@typescript-eslint/project-service@npm:8.40.0":
-  version: 8.40.0
-  resolution: "@typescript-eslint/project-service@npm:8.40.0"
+"@typescript-eslint/project-service@npm:8.41.0":
+  version: 8.41.0
+  resolution: "@typescript-eslint/project-service@npm:8.41.0"
  dependencies:
-    "@typescript-eslint/tsconfig-utils": "npm:^8.40.0"
-    "@typescript-eslint/types": "npm:^8.40.0"
+    "@typescript-eslint/tsconfig-utils": "npm:^8.41.0"
+    "@typescript-eslint/types": "npm:^8.41.0"
    debug: "npm:^4.3.4"
  peerDependencies:
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/86491aa65c1dd78c9784dddd8467601aef8be652c5fb3a901e8b1995cf07c1dbe11d0ab4610d770e3f4063c0c254a6c6aa5fb7cf724bf12fa4ee56f47f3a2955
+  checksum: 10/ff8315de005ea7072ecd208b50b35fa01db034f110f30f415faa9c9441648494e5322723a0a4267beb28524babd6b04b349c32f2a2821f4ae0e9c4d503e1e8f0
  languageName: node
  linkType: hard

-"@typescript-eslint/scope-manager@npm:8.40.0":
-  version: 8.40.0
-  resolution: "@typescript-eslint/scope-manager@npm:8.40.0"
+"@typescript-eslint/scope-manager@npm:8.41.0":
+  version: 8.41.0
+  resolution: "@typescript-eslint/scope-manager@npm:8.41.0"
  dependencies:
-    "@typescript-eslint/types": "npm:8.40.0"
-    "@typescript-eslint/visitor-keys": "npm:8.40.0"
-  checksum: 10/0c5aa10208bfbb506bf3925a420c3de667298064bde400f03ee52c19cd0785dd05c2c820e05724d005737e2920d925aff0318ec3308156f9b81c84736a1fe46b
+    "@typescript-eslint/types": "npm:8.41.0"
+    "@typescript-eslint/visitor-keys": "npm:8.41.0"
+  checksum: 10/4fc1dd6b3390d3a770c228dac227f35ff1126034fce484ab5e5a4fdbe2dab5dca1c8de3c528708320fee021adec1a1260ee45ed2aef9f7e3fdfbb1faf2191f9f
  languageName: node
  linkType: hard

-"@typescript-eslint/tsconfig-utils@npm:8.40.0, @typescript-eslint/tsconfig-utils@npm:^8.40.0":
-  version: 8.40.0
-  resolution: "@typescript-eslint/tsconfig-utils@npm:8.40.0"
+"@typescript-eslint/tsconfig-utils@npm:8.41.0, @typescript-eslint/tsconfig-utils@npm:^8.41.0":
+  version: 8.41.0
+  resolution: "@typescript-eslint/tsconfig-utils@npm:8.41.0"
  peerDependencies:
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/c5a557cc83d194902140af0ddfa10b2776db3625e2c9bb609d0d720aa78a0735ff71df8bffd5c2a1b90cdada8242543c5421ad4dcd58cf2ff12717b733bcfca9
+  checksum: 10/522d54252f9647d22e46f963df6bafe98aa0572b021e6acf7474c40f1a68afa6753f23a0a125abb1d792a89a1b1cc654d918553a03d08f769139f2f40b0d026c
  languageName: node
  linkType: hard

-"@typescript-eslint/type-utils@npm:8.40.0":
-  version: 8.40.0
-  resolution: "@typescript-eslint/type-utils@npm:8.40.0"
+"@typescript-eslint/type-utils@npm:8.41.0":
+  version: 8.41.0
+  resolution: "@typescript-eslint/type-utils@npm:8.41.0"
  dependencies:
-    "@typescript-eslint/types": "npm:8.40.0"
-    "@typescript-eslint/typescript-estree": "npm:8.40.0"
-    "@typescript-eslint/utils": "npm:8.40.0"
+    "@typescript-eslint/types": "npm:8.41.0"
+    "@typescript-eslint/typescript-estree": "npm:8.41.0"
+    "@typescript-eslint/utils": "npm:8.41.0"
    debug: "npm:^4.3.4"
    ts-api-utils: "npm:^2.1.0"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/296c718330b2ac4408840258c30c01072de01ffe1c009be00c5049be1b19a71cbb2e258363ae349150760bcd2d34799df305b4cfc4d7f3b2fa9760ac8ffb3f75
+  checksum: 10/6c4c693c1ee3d1a1a3635898d59f1a3bcdf224be84284ea95a21fa68a3206bae32ce04d371df366fcad250a3eca3af723ed6ca1b4aefba238d4e553797c2dc9d
  languageName: node
  linkType: hard

-"@typescript-eslint/types@npm:8.40.0, @typescript-eslint/types@npm:^8.40.0":
-  version: 8.40.0
-  resolution: "@typescript-eslint/types@npm:8.40.0"
-  checksum: 10/f3931d0920a42b3bc69e9cdeb67a0c710597271cdd9d7c736302bdc52d21df1c962082df7cd712eeabd2c47658415d0a4b7d72f819cb38f82f4e234b48dbaa57
+"@typescript-eslint/types@npm:8.41.0, @typescript-eslint/types@npm:^8.41.0":
+  version: 8.41.0
+  resolution: "@typescript-eslint/types@npm:8.41.0"
+  checksum: 10/e2fe5d9125264a1b1310fff7ac65e827da9885219d7f910dba090dcf7d4242830cb96695c7257634b22e1947943a2e890f9740536d95612452e5752385ab6a5b
  languageName: node
  linkType: hard

-"@typescript-eslint/typescript-estree@npm:8.40.0":
-  version: 8.40.0
-  resolution: "@typescript-eslint/typescript-estree@npm:8.40.0"
+"@typescript-eslint/typescript-estree@npm:8.41.0":
+  version: 8.41.0
+  resolution: "@typescript-eslint/typescript-estree@npm:8.41.0"
  dependencies:
-    "@typescript-eslint/project-service": "npm:8.40.0"
-    "@typescript-eslint/tsconfig-utils": "npm:8.40.0"
-    "@typescript-eslint/types": "npm:8.40.0"
-    "@typescript-eslint/visitor-keys": "npm:8.40.0"
+    "@typescript-eslint/project-service": "npm:8.41.0"
+    "@typescript-eslint/tsconfig-utils": "npm:8.41.0"
+    "@typescript-eslint/types": "npm:8.41.0"
+    "@typescript-eslint/visitor-keys": "npm:8.41.0"
    debug: "npm:^4.3.4"
    fast-glob: "npm:^3.3.2"
    is-glob: "npm:^4.0.3"
@@ -5072,160 +5072,160 @@ __metadata:
    ts-api-utils: "npm:^2.1.0"
  peerDependencies:
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/2e61ecfecb933f644799a7c11e4c7a730df57290c8d0482082cff7739b2401b0cf3b1ebef7b08a54a90285978957a49850d1a53061e8770164da651172ebee32
+  checksum: 10/e039815d2ee03727fadb32c460e0c7df71a35b6c93a87e019c63836c53e51ce41f1975b32c9e5bcc840f4cd49c7bf7715c95df149f915379ec4c559d02436623
  languageName: node
  linkType: hard

-"@typescript-eslint/utils@npm:8.40.0":
-  version: 8.40.0
-  resolution: "@typescript-eslint/utils@npm:8.40.0"
+"@typescript-eslint/utils@npm:8.41.0":
+  version: 8.41.0
+  resolution: "@typescript-eslint/utils@npm:8.41.0"
  dependencies:
    "@eslint-community/eslint-utils": "npm:^4.7.0"
-    "@typescript-eslint/scope-manager": "npm:8.40.0"
-    "@typescript-eslint/types": "npm:8.40.0"
-    "@typescript-eslint/typescript-estree": "npm:8.40.0"
+    "@typescript-eslint/scope-manager": "npm:8.41.0"
+    "@typescript-eslint/types": "npm:8.41.0"
+    "@typescript-eslint/typescript-estree": "npm:8.41.0"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/b4cd1e6a4f55cc6475189de12e6bd418080a227e794745a2af304ab21655b031c28dae6387d4e9b54dd2f420696cec4f77cca9c66db405ed2281e0e09c95ba1c
+  checksum: 10/863565c0891d89ee27497571092783a7fa90e281a7643f1bda5d9e8b94aea2acbc851e81141ce7a53ddea3638a0527ea165801dd9611f5532940e4d413c955a8
  languageName: node
  linkType: hard

-"@typescript-eslint/visitor-keys@npm:8.40.0":
-  version: 8.40.0
-  resolution: "@typescript-eslint/visitor-keys@npm:8.40.0"
+"@typescript-eslint/visitor-keys@npm:8.41.0":
+  version: 8.41.0
+  resolution: "@typescript-eslint/visitor-keys@npm:8.41.0"
  dependencies:
-    "@typescript-eslint/types": "npm:8.40.0"
+    "@typescript-eslint/types": "npm:8.41.0"
    eslint-visitor-keys: "npm:^4.2.1"
-  checksum: 10/191f47998001a5e9cdde7491b0215d9c6c45c637aedd7d32cafd35ce2a4a0f4b8582edab015e09238f48e025a788b99efd8e70e4e3200e32143f91c95112abcd
+  checksum: 10/3c764be2f0d3b212c2cb7d0cc8a7b0ed378feb58883654471fd8ee943f1e124c0b78df92fe14368ceb46016b0e3ae1c47e2630ec3599aa7b4bd54f7793747657
  languageName: node
  linkType: hard

-"@vaadin/a11y-base@npm:~24.8.5":
-  version: 24.8.5
-  resolution: "@vaadin/a11y-base@npm:24.8.5"
+"@vaadin/a11y-base@npm:~24.8.6":
+  version: 24.8.6
+  resolution: "@vaadin/a11y-base@npm:24.8.6"
  dependencies:
    "@open-wc/dedupe-mixin": "npm:^1.3.0"
    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.5"
+    "@vaadin/component-base": "npm:~24.8.6"
    lit: "npm:^3.0.0"
-  checksum: 10/64c0447b1715f842aa5953a0ffeb78e3ae677aa9dc61fa2389dead20947519d897070fd42a164b09dda9465d7cf48fa413f62a3c9afed8aac43590d920616f24
+  checksum: 10/1127282ee3d2814de85ac7df2e3661db955bec78472ab4991229440ef532c6de6955c48c6353f913a4d911c938ed0205f6cff73928c52866f324237be110a222
  languageName: node
  linkType: hard

-"@vaadin/combo-box@npm:24.8.5":
-  version: 24.8.5
-  resolution: "@vaadin/combo-box@npm:24.8.5"
+"@vaadin/combo-box@npm:24.8.6":
+  version: 24.8.6
+  resolution: "@vaadin/combo-box@npm:24.8.6"
  dependencies:
    "@open-wc/dedupe-mixin": "npm:^1.3.0"
    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.8.5"
-    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/field-base": "npm:~24.8.5"
-    "@vaadin/input-container": "npm:~24.8.5"
-    "@vaadin/item": "npm:~24.8.5"
-    "@vaadin/lit-renderer": "npm:~24.8.5"
-    "@vaadin/overlay": "npm:~24.8.5"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-material-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
+    "@vaadin/a11y-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/field-base": "npm:~24.8.6"
+    "@vaadin/input-container": "npm:~24.8.6"
+    "@vaadin/item": "npm:~24.8.6"
+    "@vaadin/lit-renderer": "npm:~24.8.6"
+    "@vaadin/overlay": "npm:~24.8.6"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-material-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
    lit: "npm:^3.0.0"
-  checksum: 10/430e04ce3c7f977bfde771bf5aafb4dd2e862ecffd93a3296df596b24626c7a93dbe16f4e39b8e88089ce60a5f5d5a95db17fe305df6f30593f39dc1f79ec8af
+  checksum: 10/95031f4fd2adfe584a235d83da30b8bd5a3bcdcc6e342c9b1d4305c9ccf7ef7c2041b5930e7206408b2d01c81fc6555d1f556e31321433cc069905afe5aa1507
  languageName: node
  linkType: hard

-"@vaadin/component-base@npm:~24.8.5":
-  version: 24.8.5
-  resolution: "@vaadin/component-base@npm:24.8.5"
+"@vaadin/component-base@npm:~24.8.6":
+  version: 24.8.6
+  resolution: "@vaadin/component-base@npm:24.8.6"
  dependencies:
    "@open-wc/dedupe-mixin": "npm:^1.3.0"
    "@polymer/polymer": "npm:^3.0.0"
    "@vaadin/vaadin-development-mode-detector": "npm:^2.0.0"
    "@vaadin/vaadin-usage-statistics": "npm:^2.1.0"
    lit: "npm:^3.0.0"
-  checksum: 10/7f9ec08ca2dcedb15990cff87282523505e1df668ecbdbe624e91b75aae8b08062924e9dee7886e97a971054dda025277b368f32f8c57ee4e7ca022d7c23b862
+  checksum: 10/d4bff00004f659d93ec3ae4c6c5f5f645672f093cccf20bb6b0957939b31d9ecd29ecf32d7863c1a212784f0baf84f32ffee7c9158451de7c91bc009d8e42d24
  languageName: node
  linkType: hard

-"@vaadin/field-base@npm:~24.8.5":
-  version: 24.8.5
-  resolution: "@vaadin/field-base@npm:24.8.5"
+"@vaadin/field-base@npm:~24.8.6":
+  version: 24.8.6
+  resolution: "@vaadin/field-base@npm:24.8.6"
  dependencies:
    "@open-wc/dedupe-mixin": "npm:^1.3.0"
    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.8.5"
-    "@vaadin/component-base": "npm:~24.8.5"
+    "@vaadin/a11y-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.6"
    lit: "npm:^3.0.0"
-  checksum: 10/6851c05949c389bd76f201dd876ae0f0725e53146b0026bdfc8ec8a9b3712a2f52b18f23bd73971c8d76f5026c6186a0b54073850fa2a31890c7594dc2d61cb2
+  checksum: 10/a1b1121e5ed690645f2e7b0400e5f1880aac0fdff81fd57fc85c325187587005162f835d322868fc5788f74ebb69ce99f1cea3cde49b23aab67310aac67df996
  languageName: node
  linkType: hard

-"@vaadin/icon@npm:~24.8.5":
-  version: 24.8.5
-  resolution: "@vaadin/icon@npm:24.8.5"
+"@vaadin/icon@npm:~24.8.6":
+  version: 24.8.6
+  resolution: "@vaadin/icon@npm:24.8.6"
  dependencies:
    "@open-wc/dedupe-mixin": "npm:^1.3.0"
    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
+    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
    lit: "npm:^3.0.0"
-  checksum: 10/0ba15d8ea903e6a64bf5bdd3f5e91c74ebbb75bcacdb273faae0b71dec8e83a7c6daccbcbd8700c45e48bf6c5fec4552236b7ee464ebf06b1aba6e74a6eb3565
+  checksum: 10/569e5241bb421f8a30fe34c360f97b6e521f3dcde65dcf2fbeb60d699e230406605b48d301ca4e1cfa2cf64b56ca2b95e9a013a5e6e51f910e60b683aaeca64b
  languageName: node
  linkType: hard

-"@vaadin/input-container@npm:~24.8.5":
-  version: 24.8.5
-  resolution: "@vaadin/input-container@npm:24.8.5"
+"@vaadin/input-container@npm:~24.8.6":
+  version: 24.8.6
+  resolution: "@vaadin/input-container@npm:24.8.6"
  dependencies:
    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-material-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
+    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-material-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
    lit: "npm:^3.0.0"
-  checksum: 10/04ca1f54f101858557a9dba55ef46706091f54a2344fb5322c89fb84abe717d97db60b43010496e9948e5a3d6779ba700e6d6eb986c8e37df96bc9bc9efe676e
+  checksum: 10/b18631fd45f59cc9d728a58da911feb119398c0e76962fa7cdcf62cf8582f722cdfc4bdcf52be5f678a390bf9006339351fcaf08b1cbcfe5905638d13c74f100
  languageName: node
  linkType: hard

-"@vaadin/item@npm:~24.8.5":
-  version: 24.8.5
-  resolution: "@vaadin/item@npm:24.8.5"
+"@vaadin/item@npm:~24.8.6":
+  version: 24.8.6
+  resolution: "@vaadin/item@npm:24.8.6"
  dependencies:
    "@open-wc/dedupe-mixin": "npm:^1.3.0"
    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.8.5"
-    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-material-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
+    "@vaadin/a11y-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-material-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
    lit: "npm:^3.0.0"
-  checksum: 10/da0d69cfde4655a8209cfa67c342bb48c7fe1f5ec48f15065582e6a8d3e48926b8e28e5fb68dcb526421d3f7faeea7292afd8957258cf7658e46ad40bd1328e8
+  checksum: 10/59f9bd95794b30a2f65cba1482a1f496370f92f834bf532255622a76a43066c53ee0c6fc5eb3ca5d777835532f3efaa2415edce91823f91f2462ecb1342a3bce
  languageName: node
  linkType: hard

-"@vaadin/lit-renderer@npm:~24.8.5":
-  version: 24.8.5
-  resolution: "@vaadin/lit-renderer@npm:24.8.5"
+"@vaadin/lit-renderer@npm:~24.8.6":
+  version: 24.8.6
+  resolution: "@vaadin/lit-renderer@npm:24.8.6"
  dependencies:
    lit: "npm:^3.0.0"
-  checksum: 10/a5cdfbd7ff3e7cf979fa826b4151879c0ad8b9068b254c690e8a82d859ffd553ca935bcee5115d1a3b914ff018a393dcb2460a75d8f5caab975654624060172b
+  checksum: 10/eb721a0e09156e67d857ea95ed2285b63f041e82fff60c40822de6050a4ee21e18330b208b14850a72a4ea2e0f7ee43b3d9518d228dc22672e7b69e25da43662
  languageName: node
  linkType: hard

-"@vaadin/overlay@npm:~24.8.5":
-  version: 24.8.5
-  resolution: "@vaadin/overlay@npm:24.8.5"
+"@vaadin/overlay@npm:~24.8.6":
+  version: 24.8.6
+  resolution: "@vaadin/overlay@npm:24.8.6"
  dependencies:
    "@open-wc/dedupe-mixin": "npm:^1.3.0"
    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/a11y-base": "npm:~24.8.5"
-    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/vaadin-lumo-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-material-styles": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
+    "@vaadin/a11y-base": "npm:~24.8.6"
+    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/vaadin-lumo-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-material-styles": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
    lit: "npm:^3.0.0"
-  checksum: 10/e9b414ebc3dc885020edea0ec399556dfdc7ab3256f544dad6410a30683862f91566bae8b691e0dd5f228ffd470c84efb33ee52fef4c85bec509919d3c226720
+  checksum: 10/2a1047f4a8fc11bf51a5095cd66bd6cd9122c5edadb57ab84a559f86d90301bf16d95fd877b9fc2e7cdbcd3bd1856ab73649ec7301251b58feb5a03f42e1ccea
  languageName: node
  linkType: hard

@@ -5236,37 +5236,37 @@ __metadata:
  languageName: node
  linkType: hard

-"@vaadin/vaadin-lumo-styles@npm:~24.8.5":
-  version: 24.8.5
-  resolution: "@vaadin/vaadin-lumo-styles@npm:24.8.5"
+"@vaadin/vaadin-lumo-styles@npm:~24.8.6":
+  version: 24.8.6
+  resolution: "@vaadin/vaadin-lumo-styles@npm:24.8.6"
  dependencies:
    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/icon": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
-  checksum: 10/95279f74f09d7608c312879ce8d375ffe9039f79a8326ad3c994e59704a1ba34e632cac4c9c2b838f590f52de856ff98e3357955054c73e2941bcb873ecb57ce
+    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/icon": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+  checksum: 10/fe01c0a93caa669a3b63573d2294834805d1e393bc5a0d7bcdee030d9f7ef2d73e2fc1a40543f82a4516b8fa155eaf13f6bb84653e26686c6ecb2ee22dfa9500
  languageName: node
  linkType: hard

-"@vaadin/vaadin-material-styles@npm:~24.8.5":
-  version: 24.8.5
-  resolution: "@vaadin/vaadin-material-styles@npm:24.8.5"
+"@vaadin/vaadin-material-styles@npm:~24.8.6":
+  version: 24.8.6
+  resolution: "@vaadin/vaadin-material-styles@npm:24.8.6"
  dependencies:
    "@polymer/polymer": "npm:^3.0.0"
-    "@vaadin/component-base": "npm:~24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:~24.8.5"
-  checksum: 10/e1f531deda484f1e7e8485a1d5f2e5eed5a74b7c30554ede3d7a45643fc9f54e2eb364c1cc32543097f04eda3fcab466508c527be5166df2930695268fc737c8
+    "@vaadin/component-base": "npm:~24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:~24.8.6"
+  checksum: 10/a19f479b567e929b6c375e3a0518b651f99d4ca329ba4323cf4582c13d3b01e73392bb082a3216a3f8d84a7b004df42042ac71e64b66d9f20ae2740f3a57459f
  languageName: node
  linkType: hard

-"@vaadin/vaadin-themable-mixin@npm:24.8.5":
-  version: 24.8.5
-  resolution: "@vaadin/vaadin-themable-mixin@npm:24.8.5"
+"@vaadin/vaadin-themable-mixin@npm:24.8.6":
+  version: 24.8.6
+  resolution: "@vaadin/vaadin-themable-mixin@npm:24.8.6"
  dependencies:
    "@open-wc/dedupe-mixin": "npm:^1.3.0"
    lit: "npm:^3.0.0"
    style-observer: "npm:^0.0.8"
-  checksum: 10/90b883ea34f39b381d3777ac8ea15797d12b899883bdb64ac14e9d170ae113f3f5b29f3492a10d2aeec05cb05ce0b6708d0963110f9ca9858af247210c1e89ce
+  checksum: 10/eb0b356f86d0f19914284219243812dde31d5b54b6f192a3bcb569d0403d100c820080d60878be90b859fd7e2a4342a5e054291a0f3c12888c173ca4122290af
  languageName: node
  linkType: hard

@@ -9298,10 +9298,10 @@ __metadata:
  languageName: node
  linkType: hard

-"hls.js@npm:1.6.10":
-  version: 1.6.10
-  resolution: "hls.js@npm:1.6.10"
-  checksum: 10/28ba90e7915dd178b59907f99320f02bdf81023cd570e40e4aace32c4d744bb8a4404f1d6f040cd00a152334a76d97fee702a88596dd9ecaebe93aa5ac48506f
+"hls.js@npm:1.6.11":
+  version: 1.6.11
+  resolution: "hls.js@npm:1.6.11"
+  checksum: 10/a7fb6407bd9729186fcdff14fb37d98d24ddfdce69e30165179a1af4c66fc83252bd85ee9199df91220ca5573fed7529b861d40fe86d93b4c06dc89ccc33382a
  languageName: node
  linkType: hard

@@ -9377,7 +9377,7 @@ __metadata:
    "@octokit/rest": "npm:22.0.0"
    "@replit/codemirror-indentation-markers": "npm:6.5.3"
    "@rsdoctor/rspack-plugin": "npm:1.2.3"
-    "@rspack/core": "npm:1.4.11"
+    "@rspack/core": "npm:1.5.1"
    "@rspack/dev-server": "npm:1.1.4"
    "@shoelace-style/shoelace": "npm:2.20.1"
    "@swc/helpers": "npm:0.5.17"
@@ -9402,8 +9402,8 @@ __metadata:
    "@types/tar": "npm:6.1.13"
    "@types/ua-parser-js": "npm:0.7.39"
    "@types/webspeechapi": "npm:0.0.29"
-    "@vaadin/combo-box": "npm:24.8.5"
-    "@vaadin/vaadin-themable-mixin": "npm:24.8.5"
+    "@vaadin/combo-box": "npm:24.8.6"
+    "@vaadin/vaadin-themable-mixin": "npm:24.8.6"
    "@vibrant/color": "npm:4.0.0"
    "@vitest/coverage-v8": "npm:3.2.4"
    "@vue/web-component-wrapper": "npm:1.3.0"
@@ -9446,7 +9446,7 @@ __metadata:
    gulp-json-transform: "npm:0.5.0"
    gulp-rename: "npm:2.1.0"
    gulp-zopfli-green: "npm:6.0.2"
-    hls.js: "npm:1.6.10"
+    hls.js: "npm:1.6.11"
    home-assistant-js-websocket: "npm:9.5.0"
    html-minifier-terser: "npm:7.2.0"
    husky: "npm:9.1.7"
@@ -9466,7 +9466,7 @@ __metadata:
    lodash.template: "npm:4.5.0"
    luxon: "npm:3.7.1"
    map-stream: "npm:0.0.7"
-    marked: "npm:16.2.0"
+    marked: "npm:16.2.1"
    memoize-one: "npm:6.0.0"
    node-vibrant: "npm:4.0.3"
    object-hash: "npm:3.0.0"
@@ -9488,7 +9488,7 @@ __metadata:
    tinykeys: "npm:3.0.0"
    ts-lit-plugin: "npm:2.0.2"
    typescript: "npm:5.9.2"
-    typescript-eslint: "npm:8.40.0"
+    typescript-eslint: "npm:8.41.0"
    ua-parser-js: "npm:2.0.4"
    vite-tsconfig-paths: "npm:5.1.4"
    vitest: "npm:3.2.4"
@@ -11137,12 +11137,12 @@ __metadata:
  languageName: node
  linkType: hard

-"marked@npm:16.2.0":
-  version: 16.2.0
-  resolution: "marked@npm:16.2.0"
+"marked@npm:16.2.1":
+  version: 16.2.1
+  resolution: "marked@npm:16.2.1"
  bin:
    marked: bin/marked.js
-  checksum: 10/0a73dcfbe500514d2f1106da99708beed8a31de586e2826e1aa47ca0e0a4850b1e9598569b09d5366d4f4dee2d279a13f32616ed1ee75c832068eb7dd660f66f
+  checksum: 10/67e911a7dd416869649dee18dc4a9683c0ccd8e72ba0fee3b3f578f857416e69780013e9d63762c600e6f9cf997c5af9fa0507a2053f8e65d39c5459c245c0cd
  languageName: node
  linkType: hard

@@ -14527,18 +14527,18 @@ __metadata:
  languageName: node
  linkType: hard

-"typescript-eslint@npm:8.40.0":
-  version: 8.40.0
-  resolution: "typescript-eslint@npm:8.40.0"
+"typescript-eslint@npm:8.41.0":
+  version: 8.41.0
+  resolution: "typescript-eslint@npm:8.41.0"
  dependencies:
-    "@typescript-eslint/eslint-plugin": "npm:8.40.0"
-    "@typescript-eslint/parser": "npm:8.40.0"
-    "@typescript-eslint/typescript-estree": "npm:8.40.0"
-    "@typescript-eslint/utils": "npm:8.40.0"
+    "@typescript-eslint/eslint-plugin": "npm:8.41.0"
+    "@typescript-eslint/parser": "npm:8.41.0"
+    "@typescript-eslint/typescript-estree": "npm:8.41.0"
+    "@typescript-eslint/utils": "npm:8.41.0"
  peerDependencies:
    eslint: ^8.57.0 || ^9.0.0
    typescript: ">=4.8.4 <6.0.0"
-  checksum: 10/b96dc4e70bd551e5399b928e946957cce622cba89f0ff87521f9e93f223acbe406930a1ebee845b158f586959cb7d85f15ea2250b97341aa87f50a3c987d068a
+  checksum: 10/a398a367b3a674bcdb74f060e0b06aacb9e8bd0637079c5079ff66a43a35286098b97d71fca1b81b738c0df840fda4b53aeee03ed0aacef03f9644c61a68960e
  languageName: node
  linkType: hard
Author	SHA1	Message	Date
Bram Kragten	d79d309b96	Change drag selected styling	2025-09-01 17:56:03 +02:00
Bram Kragten	4609d610dc	Update hover and hightlight states for automation rows	2025-09-01 17:28:20 +02:00
Paul Bottein	b4223e9e92	Use summary card in home dashboard (#26775 )	2025-09-01 15:13:53 +02:00
Paul Bottein	99955d7818	Fix add dialog on dashboards on mobile (#26807 )	2025-09-01 15:39:52 +03:00
Paul Bottein	f66768726c	Update heading subtitle height to better fix grid (#26808 )	2025-09-01 15:39:03 +03:00
Michel van de Wetering	0e4be02b2c	Remove Hue bridge v1 image (#26674 )	2025-09-01 15:27:50 +03:00
Bram Kragten	6daea23b3c	Enable drag and drop on mobile for automations (#26805 )	2025-09-01 14:09:13 +02:00
Petar Petrov	e21ddcb1e5	Handle negative values in History chart card feature (#26806 )	2025-09-01 11:45:52 +00:00
Wendelin	ded85d9f27	Automation editor: fix yaml editor and editor switch (#26772 )	2025-09-01 13:26:17 +02:00
Petar Petrov	eea43494da	Use feature-color in History chart feature (#26802 )	2025-09-01 11:34:44 +02:00
Norbert Rittel	9cf9ef927d	Expand description for disabled services (#26782 ) * Expand description for disabled services * Drop "not added to Home Assistant"	2025-09-01 09:51:22 +03:00
Paulus Schoutsen	779ec4f583	Do not add graphs to every sensor tile card (#26793 )	2025-08-31 15:11:41 +00:00
renovate[bot]	c541831cd2	Update dependency marked to v16.2.1 (#26785 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-31 17:07:02 +02:00
renovate[bot]	fd20c2a554	Update dependency @rspack/core to v1.5.1 (#26790 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-31 17:06:55 +02:00
uptimeZERO_	14fd29808c	Bugfix: Fixed column widths in the dashboard config page (#26777 ) Fixed column widths in dashboard config	2025-08-30 11:54:37 +00:00
Aidan Timson	7132ee157f	Adjust states set state layout (#26765 )	2025-08-30 13:11:41 +02:00
J. Nick Koston	1596b313d5	Add RSSI color gradient to Bluetooth visualization to identify connection problems (#26778 )	2025-08-29 14:15:00 -05:00
karwosts	70cd68ded7	Don't use context for media selector with 'accept' (#26773 )	2025-08-29 14:08:11 +00:00
renovate[bot]	cc91a6185e	Update dependency @rspack/core to v1.5.0 (#26768 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-29 17:05:14 +03:00
Paul Bottein	1fd7c84583	Use fixed layout for automation sidebar to have scrollbar on the side (#26751 ) Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>	2025-08-29 14:19:13 +02:00
Paul Bottein	0269540ee9	Add translations for home dashboard (#26763 )	2025-08-29 14:17:55 +02:00
renovate[bot]	98390b3843	Update Yarn to v4.9.4 (#26760 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-29 08:12:28 +00:00
Paul Bottein	269628929c	Fix alert z-index for automation and script (#26759 )	2025-08-29 08:05:05 +00:00
Norbert Rittel	21fcc84afd	Improve OAuth setup explanation (#26758 ) * Improve OAuth setup explanation * Add "your" * Include "application" in headline	2025-08-29 09:59:31 +02:00
Wendelin	b86c1db83d	Automation editor: fix focus handling (#26755 )	2025-08-29 08:39:06 +02:00
renovate[bot]	a376670478	Update dependency typescript-eslint to v8.41.0 (#26757 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-29 08:21:34 +02:00
renovate[bot]	72c62079aa	Update dependency hls.js to v1.6.11 (#26756 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-29 08:21:28 +02:00
Surya Prakash	9baf875585	Fix: Keep buttons active in picture-glance-card regardless of state (#26718 ) * Fix: Keep buttons active in picture-glance-card regardless of state Fixes #26683 Problem: Buttons in the picture-glance-card were incorrectly disabled when their state was 'unknown', making them unclickable. Root Cause: The `disabled` property was being set based on the state value, but buttons should remain clickable regardless of their state since their state only reflects the last time they were pressed. Solution: Set `disabled=${false}` to ensure buttons are always active and clickable. Testing: Verified that buttons remain active and functional even when state is 'unknown'. * Fix: Ensure buttons get state-on class when state is unknown Fixes #26683 The "state-on" class was not being applied when button state was "unknown" because "unknown" was included in the STATES_OFF set. This ensures buttons appear active regardless of their state. * Update hui-picture-glance-card.ts * Update hui-picture-glance-card.ts * Update hui-picture-glance-card.ts * Update hui-picture-glance-card.ts * Update hui-picture-glance-card.ts * Update hui-picture-glance-card.ts * Update hui-picture-glance-card.ts	2025-08-29 08:20:39 +02:00
Jonathan Keslin	175915218f	Hide leading zero in clock card hour when using 12-hour time format (#26669 ) Remove leading zero on hour on Clock card when displayed with 12-hour time format	2025-08-29 08:42:07 +03:00
Wendelin	25f25243bd	Automation editor: overflow changes and style fixes (#26744 ) * Fix for width also for blueprint editor * Fix overflow menus * Fix option icons * Fix iOS bottom sheet flickering and drag handle * Fix mobile padding * Fix padding in sidebar * Fix overflow placement * Add new a11y sort * Remove overflow in rows * Fix a11y select row * Revert "Fix a11y select row" This reverts commit `54260c4a37`. * Fix option padding on blueprint --------- Co-authored-by: Paul Bottein <paul.bottein@gmail.com>	2025-08-28 16:42:45 +00:00
karwosts	cf8d36b1f3	Hide 'options' from enum more info (#26736 ) * Hide 'options' from enum more info * restrict to specific domain and class	2025-08-28 18:08:33 +02:00
Aidan Timson	e3a9d754df	Change loading detailed storage to use `ha-alert` with spinner (#26749 ) * Change spinner overlay to use `ha-alert` with messaging * Use spinner for icon slot	2025-08-28 18:05:53 +02:00
Petar Petrov	7b303a699b	Increase disk usage request timeout (#26748 )	2025-08-28 16:32:52 +03:00
renovate[bot]	ee45eb00f7	Update vaadinWebComponents monorepo to v24.8.6 (#26746 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-08-28 15:38:03 +03:00
Norbert Rittel	24a6aa2669	Different spelling fixes of user-facing strings (#26745 ) * Different spelling fixes of user-facing strings * Fix menu "Application credentials" menu item name	2025-08-28 15:37:06 +03:00
Aidan Timson	66d011cfb9	Move automation and script `ha-alert`s to main flow (#26735 ) Co-authored-by: Wendelin <12148533+wendevlin@users.noreply.github.com>	2025-08-28 13:53:15 +02:00
Wendelin	35895735cc	Fix automation editor drag selected row in/out nested (#26740 ) Fix nested sort	2025-08-28 13:30:14 +02:00
Norbert Rittel	e71df0b71a	Improve section descriptions in Automation editor (#26741 ) Replace "listed here" or "list of" with "added here"	2025-08-28 11:05:31 +02:00
Paulus Schoutsen	2a9846c598	Show configured area sensors on climate domain dashboard (#26737 )	2025-08-28 08:34:45 +03:00
Paulus Schoutsen	b243d56bee	Show binary sensors with graphs on the security dashboard (#26738 )	2025-08-28 08:26:44 +03:00
J. Nick Koston	6a372a165e	Improve network adapter configuration discoverability (#26734 )	2025-08-27 09:59:23 -05:00
Paul Bottein	a5dad9bc22	Use entity picture for home favorite and update home dashboard icon (#26732 ) * Add strategy icon * Use entity picture for favorite	2025-08-27 16:33:48 +02:00