use isolated env

gallery/src/pages/automation/editor-action.ts

@@ -18,6 +18,7 @@ import { HaDeviceAction } from "../../../../src/panels/config/automation/action/
 import { HaEventAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-event";
 import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
 import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
+import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";
 import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
 import { HaSequenceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-sequence";
 import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service";
@@ -31,6 +32,7 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Service", actions: [HaServiceAction.defaultConfig] },
   { name: "Condition", actions: [HaConditionAction.defaultConfig] },
   { name: "Delay", actions: [HaDelayAction.defaultConfig] },
+  { name: "Play media", actions: [HaPlayMediaAction.defaultConfig] },
   { name: "Wait", actions: [HaWaitAction.defaultConfig] },
   { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
   { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },

gallery/src/pages/misc/ha-template.markdown

@@ -0,0 +1,3 @@
+---
+title: Template
+---

gallery/src/pages/misc/ha-template.ts

@@ -0,0 +1,65 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-template";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../../src/types";
+import { getEntity } from "../../../../src/fake_data/entity";
+
+interface TemplateContent {
+  content: string;
+}
+
+const templates: TemplateContent[] = [
+  { content: "{{ states('sensor.temperature') }}" },
+  {
+    content: "{{ 'Day' if is_state('sun.sun', 'above_horizon') else 'Night' }}",
+  },
+];
+
+const ENTITIES = [
+  getEntity("sensor", "temperature", "25", {
+    friendly_name: "Temperature",
+  }),
+  getEntity("sun", "sun", "above_horizon", {
+    friendly_name: "Controller 2",
+  }),
+];
+
+@customElement("demo-misc-ha-template")
+export class DemoMiscTemplate extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  protected firstUpdated() {
+    const hass = provideHass(this);
+    hass.addEntities(ENTITIES);
+  }
+
+  protected render() {
+    return html`
+      <div class="container">
+        ${templates.map(
+          (t) =>
+            html`<ha-card>
+              <pre>Template: ${t.content}</pre>
+              <pre>Result: <ha-template
+                .hass=${this.hass} .content=${t.content}></ha-template></pre>
+            </ha-card>`
+        )}
+      </div>
+    `;
+  }
+
+  static styles = css`
+    ha-card {
+      margin: 12px;
+      padding: 12px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-misc-ha-template": DemoMiscTemplate;
+  }
+}

package.json

@@ -126,6 +126,7 @@
     "marked": "16.2.0",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
+    "nunjucks": "3.2.4",
     "object-hash": "3.0.0",
     "punycode": "2.3.1",
     "qr-scanner": "1.4.2",
@@ -153,7 +154,7 @@
     "@babel/helper-define-polyfill-provider": "0.6.5",
     "@babel/plugin-transform-runtime": "7.28.3",
     "@babel/preset-env": "7.28.3",
-    "@bundle-stats/plugin-webpack-filter": "4.21.3",
+    "@bundle-stats/plugin-webpack-filter": "4.21.2",
     "@lokalise/node-api": "15.2.1",
     "@octokit/auth-oauth-device": "8.0.1",
     "@octokit/plugin-retry": "8.0.1",
@@ -174,6 +175,7 @@
     "@types/lodash.merge": "4.6.9",
     "@types/luxon": "3.7.1",
     "@types/mocha": "10.0.10",
+    "@types/nunjucks": "^3",
     "@types/qrcode": "1.5.5",
     "@types/sortablejs": "1.15.8",
     "@types/tar": "6.1.13",

public/static/images/dashboard-options/dark/icon-dashboard-home.svg

@@ -1,76 +0,0 @@
-<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>

public/static/images/dashboard-options/light/icon-dashboard-home.svg

@@ -1,76 +0,0 @@
-<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>

pyproject.toml

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

src/common/template.ts

@@ -0,0 +1,137 @@
+import nunjucks, { Environment, Template as NunjucksTemplate } from "nunjucks";
+import type { HomeAssistant } from "../types";
+
+nunjucks.installJinjaCompat();
+
+function createEnv() {
+  const env = new Environment();
+  // Add filters and globals that don't use hass
+  env.addFilter("min", (numbers: number[]) => Math.min(...numbers));
+  env.addFilter("max", (numbers: number[]) => Math.max(...numbers));
+
+  env.addGlobal(
+    "states",
+    (
+      hass: HomeAssistant,
+      id: string,
+      round = false,
+      withUnit = false
+    ): string => {
+      if (!hass?.states[id]) {
+        return "unknown";
+      }
+      const state = hass?.states[id]?.state;
+      if (state == null) {
+        return "unavailable";
+      }
+      if (round) {
+        return String(Math.round(Number(state)));
+      }
+      if (withUnit) {
+        return `${state} ${hass?.states[id]?.attributes.unit_of_measurement}`;
+      }
+      return state;
+    }
+  );
+  env.addGlobal(
+    "state_attr",
+    (hass: HomeAssistant, id: string, attr: string) =>
+      hass?.states[id]?.attributes[attr]
+  );
+  env.addGlobal(
+    "is_state",
+    (hass: HomeAssistant, id: string, value: string) =>
+      hass?.states[id]?.state === value
+  );
+  env.addGlobal(
+    "is_state_attr",
+    (hass: HomeAssistant, id: string, attr: string, value: string) =>
+      hass?.states[id]?.attributes[attr] === value
+  );
+  env.addGlobal(
+    "has_value",
+    (hass: HomeAssistant, id: string) => hass?.states[id]?.state != null
+  );
+  env.addGlobal("state_translated", (hass: HomeAssistant, id: string) => {
+    try {
+      return hass?.formatEntityState(hass?.states[id], hass?.states[id]?.state);
+    } catch {
+      return hass?.states[id]?.state ?? undefined;
+    }
+  });
+  return env;
+}
+
+export class HaTemplate {
+  private _njTemplate?: NunjucksTemplate;
+
+  private _hass?: HomeAssistant;
+
+  private _content?: string;
+
+  private _context?: Record<string, any>;
+
+  private _value = "";
+
+  public entityIds = new Set<string>();
+
+  public shouldUpdate = false;
+
+  private _env = createEnv();
+
+  constructor() {
+    // functions that access the hass state have to be dynamic
+    // in order to track which entities are used in the template
+    [
+      "states",
+      "state_attr",
+      "is_state",
+      "is_state_attr",
+      "has_value",
+      "state_translated",
+    ].forEach((func) => {
+      const original = this._env.getGlobal(func);
+      this._env.addGlobal(func, (id: string, ...args: any[]): string => {
+        this.entityIds.add(id);
+        return original(this._hass, id, ...args);
+      });
+    });
+  }
+
+  public render(): string {
+    if (this.shouldUpdate) {
+      this.shouldUpdate = false;
+      this.entityIds.clear();
+      this._value = this._njTemplate!.render(this._context);
+    }
+    return this._value;
+  }
+
+  public set content(content: string) {
+    if (this._content !== content) {
+      this._content = content;
+      this._njTemplate = new NunjucksTemplate(content, this._env);
+      this.shouldUpdate = true;
+    }
+  }
+
+  public set context(context: Record<string, any>) {
+    if (this._context !== context) {
+      this._context = context;
+      this.shouldUpdate = true;
+    }
+  }
+
+  public set hass(hass: HomeAssistant) {
+    if (this._hass !== hass) {
+      if (!this.shouldUpdate) {
+        this.shouldUpdate =
+          !this._hass !== !hass ||
+          Array.from(this.entityIds).some(
+            (id) => this._hass?.states[id]?.state !== hass.states[id]?.state
+          );
+      }
+      this._hass = hass;
+    }
+  }
+}

src/components/ha-alert.ts

@@ -119,11 +119,10 @@ 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: 8px;
+      margin-inline-end: 0;
     }
     .title {
       margin-top: 2px;

src/components/ha-attributes.ts

@@ -3,15 +3,11 @@ 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,
-  STATE_ATTRIBUTES_DOMAIN_CLASS,
-} from "../data/entity_attributes";
+import { STATE_ATTRIBUTES } 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 {
@@ -26,12 +22,7 @@ class HaAttributes extends LitElement {
   private get _filteredAttributes() {
     return this._computeDisplayAttributes(
       STATE_ATTRIBUTES.concat(
-        this.extraFilters ? this.extraFilters.split(",") : [],
-        (this.stateObj &&
-          STATE_ATTRIBUTES_DOMAIN_CLASS[computeStateDomain(this.stateObj)]?.[
-            this.stateObj.attributes?.device_class
-          ]) ||
-          []
+        this.extraFilters ? this.extraFilters.split(",") : []
       )
     );
   }

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, query } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-icon-button";
 
@@ -16,18 +16,12 @@ 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;
 
-  @query(".row")
-  private _rowElement?: HTMLDivElement;
-
   protected render(): TemplateResult {
     return html`
       <div
@@ -72,40 +66,15 @@ export class HaAutomationRow extends LitElement {
     if (ev.defaultPrevented) {
       return;
     }
-
-    if (
-      ev.key !== "Enter" &&
-      ev.key !== " " &&
-      !(
-        (this.sortSelected || ev.altKey) &&
-        (ev.key === "ArrowUp" || ev.key === "ArrowDown")
-      )
-    ) {
+    if (ev.key !== "Enter" && ev.key !== " ") {
       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;
@@ -165,11 +134,6 @@ export class HaAutomationRow extends LitElement {
       overflow-wrap: anywhere;
       margin: 0 12px;
     }
-    :host([sort-selected]) .row {
-      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);
-    }
   `;
 }
 
@@ -180,6 +144,5 @@ declare global {
 
   interface HASSDomEvents {
     "toggle-collapsed": undefined;
-    "stop-sort-selection": undefined;
   }
 }

src/components/ha-bottom-sheet.ts

@@ -197,7 +197,6 @@ export class HaBottomSheet extends LitElement {
       justify-content: center;
       align-items: center;
       z-index: 7;
-      padding-bottom: 76px;
     }
     .handle-wrapper .handle::after {
       content: "";

src/components/ha-dialog.ts

@@ -148,10 +148,6 @@ export class HaDialog extends DialogBase {
         white-space: nowrap;
         display: block;
         padding-left: 4px;
-        padding-right: 4px;
-        margin-right: 12px;
-        margin-inline-end: 12px;
-        margin-inline-start: initial;
       }
       .header_button {
         text-decoration: none;

src/components/ha-filter-integrations.ts

@@ -6,9 +6,8 @@ import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
-import type { LocalizeFunc } from "../common/translations/localize";
 import type { IntegrationManifest } from "../data/integration";
-import { fetchIntegrationManifests, domainToName } from "../data/integration";
+import { fetchIntegrationManifests } from "../data/integration";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
@@ -64,12 +63,7 @@ export class HaFilterIntegrations extends LitElement {
                 multi
               >
                 ${repeat(
-                  this._integrations(
-                    this.hass.localize,
-                    this._manifests,
-                    this._filter,
-                    this.value
-                  ),
+                  this._integrations(this._manifests, this._filter, this.value),
                   (i) => i.domain,
                   (integration) =>
                     html`<ha-check-list-item
@@ -85,7 +79,7 @@ export class HaFilterIntegrations extends LitElement {
                         .domain=${integration.domain}
                         brand-fallback
                       ></ha-domain-icon>
-                      ${integration.name}
+                      ${integration.name || integration.domain}
                     </ha-check-list-item>`
                 )}
               </ha-list> `
@@ -114,21 +108,11 @@ export class HaFilterIntegrations extends LitElement {
 
   protected async firstUpdated() {
     this._manifests = await fetchIntegrationManifests(this.hass);
-    this.hass.loadBackendTranslation("title");
   }
 
   private _integrations = memoizeOne(
-    (
-      localize: LocalizeFunc,
-      manifest: IntegrationManifest[],
-      filter: string | undefined,
-      _value
-    ) =>
+    (manifest: IntegrationManifest[], filter: string | undefined, _value) =>
       manifest
-        .map((mnfst) => ({
-          ...mnfst,
-          name: domainToName(localize, mnfst.domain, mnfst),
-        }))
         .filter(
           (mnfst) =>
             (!mnfst.integration_type ||
@@ -140,7 +124,11 @@ export class HaFilterIntegrations extends LitElement {
               mnfst.domain.toLowerCase().includes(filter))
         )
         .sort((a, b) =>
-          stringCompare(a.name, b.name, this.hass.locale.language)
+          stringCompare(
+            a.name || a.domain,
+            b.name || b.domain,
+            this.hass.locale.language
+          )
         )
   );
 

src/components/ha-md-button-menu.ts

@@ -16,23 +16,9 @@ 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() {
@@ -53,11 +39,8 @@ 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}
       >

src/components/ha-network.ts

@@ -1,4 +1,4 @@
-import { mdiInformationOutline, mdiStar } from "@mdi/js";
+import { 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,17 +71,6 @@ 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
@@ -182,21 +171,6 @@ 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;
-        }
       `,
     ];
   }

src/components/ha-segmented-bar.ts

@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import "./ha-tooltip";
@@ -7,7 +7,7 @@ import "./ha-tooltip";
 export interface Segment {
   value: number;
   color: string;
-  label?: TemplateResult | string;
+  label: TemplateResult | string;
 }
 
 @customElement("ha-segmented-bar")
@@ -18,12 +18,6 @@ class HaSegmentedBar extends LitElement {
 
   @property({ type: String }) public description?: string;
 
-  @property({ type: Boolean, attribute: "hide-legend" })
-  public hideLegend = false;
-
-  @property({ type: Boolean, attribute: "hide-tooltip" })
-  public hideTooltip = false;
-
   protected render(): TemplateResult {
     const totalValue = this.segments.reduce(
       (acc, segment) => acc + segment.value,
@@ -32,51 +26,39 @@ class HaSegmentedBar extends LitElement {
     return html`
       <div class="container">
         <div class="heading">
-          <div class="title">
-            <span>${this.heading}</span>
-            <span>${this.description}</span>
-          </div>
-          <slot name="extra"></slot>
+          <span>${this.heading}</span>
+          <span>${this.description}</span>
         </div>
         <div class="bar">
-          ${this.segments.map((segment) => {
-            const bar = html`<div
-              style=${styleMap({
-                width: `${(segment.value / totalValue) * 100}%`,
-                backgroundColor: segment.color,
-              })}
-            ></div>`;
-            return this.hideTooltip && !segment.label
-              ? bar
-              : html`
-                  <ha-tooltip>
-                    <span slot="content">${segment.label}</span>
-                    ${bar}
-                  </ha-tooltip>
-                `;
-          })}
+          ${this.segments.map(
+            (segment) => html`
+              <ha-tooltip>
+                <span slot="content">${segment.label}</span>
+                <div
+                  style=${styleMap({
+                    width: `${(segment.value / totalValue) * 100}%`,
+                    backgroundColor: segment.color,
+                  })}
+                ></div>
+              </ha-tooltip>
+            `
+          )}
         </div>
-        ${this.hideLegend
-          ? nothing
-          : html`
-              <ul class="legend">
-                ${this.segments.map((segment) =>
-                  segment.label
-                    ? html`
-                        <li>
-                          <div
-                            class="bullet"
-                            style=${styleMap({
-                              backgroundColor: segment.color,
-                            })}
-                          ></div>
-                          <span class="label">${segment.label}</span>
-                        </li>
-                      `
-                    : nothing
-                )}
-              </ul>
-            `}
+        <ul class="legend">
+          ${this.segments.map(
+            (segment) => html`
+              <li>
+                <div
+                  class="bullet"
+                  style=${styleMap({
+                    backgroundColor: segment.color,
+                  })}
+                ></div>
+                <span class="label">${segment.label}</span>
+              </li>
+            `
+          )}
+        </ul>
       </div>
     `;
   }
@@ -85,20 +67,12 @@ class HaSegmentedBar extends LitElement {
     .container {
       width: 100%;
     }
-    .heading {
-      display: flex;
-      flex-direction: row;
-      gap: 8px;
-    }
-    .heading .title {
-      flex: 1;
-    }
-    .heading .title span {
+    .heading span {
       color: var(--secondary-text-color);
       line-height: var(--ha-line-height-expanded);
       margin-right: 8px;
     }
-    .heading .title span:first-child {
+    .heading span:first-child {
       color: var(--primary-text-color);
     }
     .bar {
@@ -139,9 +113,6 @@ class HaSegmentedBar extends LitElement {
       height: 12px;
       border-radius: 50%;
     }
-    .spacer {
-      flex: 1;
-    }
   `;
 }
 

src/components/ha-selector/ha-selector-action.ts

@@ -1,7 +1,7 @@
 import { consume, ContextProvider } from "@lit/context";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fullEntitiesContext } from "../../data/context";
 import {
@@ -13,7 +13,6 @@ import { migrateAutomationAction } from "../../data/script";
 import type { ActionSelector } from "../../data/selector";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import "../../panels/config/automation/action/ha-automation-action";
-import type HaAutomationAction from "../../panels/config/automation/action/ha-automation-action";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-selector-action")
@@ -36,9 +35,6 @@ export class HaActionSelector extends SubscribeMixin(LitElement) {
 
   @state() private _entitiesContext;
 
-  @query("ha-automation-action")
-  private _actionElement?: HaAutomationAction;
-
   protected hassSubscribeRequiredHostProps = ["_entitiesContext"];
 
   private _actions = memoizeOne((action: Action | undefined) => {
@@ -65,14 +61,6 @@ export class HaActionSelector extends SubscribeMixin(LitElement) {
     ];
   }
 
-  public expandAll() {
-    this._actionElement?.expandAll();
-  }
-
-  public collapseAll() {
-    this._actionElement?.collapseAll();
-  }
-
   protected render() {
     return html`
       ${this.label ? html`<label>${this.label}</label>` : nothing}
@@ -89,12 +77,12 @@ export class HaActionSelector extends SubscribeMixin(LitElement) {
   static styles = css`
     ha-automation-action {
       display: block;
+      margin-bottom: 16px;
     }
     label {
       display: block;
       margin-bottom: 4px;
       font-weight: var(--ha-font-weight-medium);
-      color: var(--secondary-text-color);
     }
   `;
 }

src/components/ha-selector/ha-selector-condition.ts

@@ -1,9 +1,8 @@
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import type { Condition } from "../../data/automation";
 import type { ConditionSelector } from "../../data/selector";
 import "../../panels/config/automation/condition/ha-automation-condition";
-import type HaAutomationCondition from "../../panels/config/automation/condition/ha-automation-condition";
 import type { HomeAssistant } from "../../types";
 
 @customElement("ha-selector-condition")
@@ -20,9 +19,6 @@ export class HaConditionSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  @query("ha-automation-condition")
-  private _conditionElement?: HaAutomationCondition;
-
   protected render() {
     return html`
       ${this.label ? html`<label>${this.label}</label>` : nothing}
@@ -36,14 +32,6 @@ export class HaConditionSelector extends LitElement {
     `;
   }
 
-  public expandAll() {
-    this._conditionElement?.expandAll();
-  }
-
-  public collapseAll() {
-    this._conditionElement?.collapseAll();
-  }
-
   static styles = css`
     ha-automation-condition {
       display: block;
@@ -53,7 +41,6 @@ export class HaConditionSelector extends LitElement {
       display: block;
       margin-bottom: 4px;
       font-weight: var(--ha-font-weight-medium);
-      color: var(--secondary-text-color);
     }
   `;
 }

src/components/ha-selector/ha-selector-media.ts

@@ -18,7 +18,6 @@ import "../ha-alert";
 import "../ha-form/ha-form";
 import type { SchemaUnion } from "../ha-form/types";
 import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
-import { ensureArray } from "../../common/array/ensure-array";
 
 const MANUAL_SCHEMA = [
   { name: "media_content_id", required: false, selector: { text: {} } },
@@ -45,19 +44,9 @@ export class HaMediaSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public required = true;
 
-  @property({ attribute: false }) public context?: {
-    filter_entity?: string | string[];
-  };
-
   @state() private _thumbnailUrl?: string | null;
 
-  private _contextEntities: string[] | undefined;
-
   willUpdate(changedProps: PropertyValues<this>) {
-    if (changedProps.has("context")) {
-      this._contextEntities = ensureArray(this.context?.filter_entity);
-    }
-
     if (changedProps.has("value")) {
       const thumbnail = this.value?.metadata?.thumbnail;
       const oldThumbnail = (changedProps.get("value") as this["value"])
@@ -90,25 +79,24 @@ export class HaMediaSelector extends LitElement {
   }
 
   protected render() {
-    const entityId = this._getActiveEntityId();
-
-    const stateObj = entityId ? this.hass.states[entityId] : undefined;
+    const stateObj = this.value?.entity_id
+      ? this.hass.states[this.value.entity_id]
+      : undefined;
 
     const supportsBrowse =
-      !entityId ||
+      !this.value?.entity_id ||
       (stateObj &&
         supportsFeature(stateObj, MediaPlayerEntityFeature.BROWSE_MEDIA));
 
     const hasAccept = this.selector?.media?.accept?.length;
 
     return html`
-      ${hasAccept ||
-      (this._contextEntities && this._contextEntities.length <= 1)
+      ${hasAccept
         ? nothing
         : html`
             <ha-entity-picker
               .hass=${this.hass}
-              .value=${entityId}
+              .value=${this.value?.entity_id}
               .label=${this.label ||
               this.hass.localize(
                 "ui.components.selectors.media.pick_media_player"
@@ -116,10 +104,8 @@ export class HaMediaSelector extends LitElement {
               .disabled=${this.disabled}
               .helper=${this.helper}
               .required=${this.required}
-              .hideClearIcon=${!!this._contextEntities}
               .includeDomains=${INCLUDE_DOMAINS}
-              .includeEntities=${this._contextEntities}
-              .allowCustomEntity=${!this._contextEntities}
+              allow-custom-entity
               @value-changed=${this._entityChanged}
             ></ha-entity-picker>
           `}
@@ -135,7 +121,6 @@ export class HaMediaSelector extends LitElement {
               .data=${this.value || EMPTY_FORM}
               .schema=${MANUAL_SCHEMA}
               .computeLabel=${this._computeLabelCallback}
-              .computeHelper=${this._computeHelperCallback}
             ></ha-form>
           `
         : html`
@@ -148,7 +133,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 || (!this.value?.entity_id && !hasAccept)
                 ? "disabled"
                 : ""}
             >
@@ -208,38 +193,21 @@ export class HaMediaSelector extends LitElement {
   ): string =>
     this.hass.localize(`ui.components.selectors.media.${schema.name}`);
 
-  private _computeHelperCallback = (
-    schema: SchemaUnion<typeof MANUAL_SCHEMA>
-  ): string =>
-    this.hass.localize(`ui.components.selectors.media.${schema.name}_detail`);
-
   private _entityChanged(ev: CustomEvent) {
     ev.stopPropagation();
-    if (this.context?.filter_entity) {
-      fireEvent(this, "value-changed", {
-        value: {
-          media_content_id: "",
-          media_content_type: "",
-          metadata: {
-            browse_entity_id: ev.detail.value,
-          },
-        },
-      });
-    } else {
-      fireEvent(this, "value-changed", {
-        value: {
-          entity_id: ev.detail.value,
-          media_content_id: "",
-          media_content_type: "",
-        },
-      });
-    }
+    fireEvent(this, "value-changed", {
+      value: {
+        entity_id: ev.detail.value,
+        media_content_id: "",
+        media_content_type: "",
+      },
+    });
   }
 
   private _pickMedia() {
     showMediaBrowserDialog(this, {
       action: "pick",
-      entityId: this._getActiveEntityId(),
+      entityId: this.value?.entity_id,
       navigateIds: this.value?.metadata?.navigateIds,
       accept: this.selector.media?.accept,
       mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
@@ -257,9 +225,6 @@ export class HaMediaSelector extends LitElement {
                 media_content_type: id.media_content_type,
                 media_content_id: id.media_content_id,
               })),
-              ...(this.context?.filter_entity
-                ? { browse_entity_id: this._getActiveEntityId() }
-                : {}),
             },
           },
         });
@@ -267,15 +232,6 @@ export class HaMediaSelector extends LitElement {
     });
   }
 
-  private _getActiveEntityId(): string | undefined {
-    const metaId = this.value?.metadata?.browse_entity_id;
-    return (
-      this.value?.entity_id ||
-      (metaId && this._contextEntities?.includes(metaId) && metaId) ||
-      this._contextEntities?.[0]
-    );
-  }
-
   private _handleKeyDown(ev: KeyboardEvent) {
     if (ev.key === "Enter" || ev.key === " ") {
       ev.preventDefault();

src/components/ha-sortable.ts

@@ -21,15 +21,9 @@ 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"
@@ -154,7 +148,6 @@ export class HaSortable extends LitElement {
       onUpdate: this._handleUpdate,
       onAdd: this._handleAdd,
       onRemove: this._handleRemove,
-      onClone: this._handleClone,
     };
 
     if (this.draggableSelector) {
@@ -194,10 +187,6 @@ export class HaSortable extends LitElement {
     fireEvent(this, "item-removed", { index: evt.oldIndex });
   };
 
-  private _handleClone = (evt) => {
-    fireEvent(this, "item-cloned", evt);
-  };
-
   private _handleEnd = async (evt) => {
     fireEvent(this, "drag-end");
     // put back in original location

src/components/ha-template.ts

@@ -0,0 +1,40 @@
+import { LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { HomeAssistant } from "../types";
+import { HaTemplate } from "../common/template";
+
+@customElement("ha-template")
+export class HaTemplateElement extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public content!: string;
+
+  @property({ attribute: false }) public context: Record<string, any> = {};
+
+  private _template = new HaTemplate();
+
+  protected shouldUpdate(): boolean {
+    if (this.hass) {
+      this._template.hass = this.hass;
+      this._template.content = this.content;
+      this._template.context = this.context;
+    }
+    return this._template.shouldUpdate;
+  }
+
+  public render() {
+    try {
+      return this._template.render();
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.debug(`Error rendering template: ${error}`);
+      return this.content;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-template": HaTemplateElement;
+  }
+}

src/data/action.ts

@@ -91,15 +91,6 @@ export const isService = (key: string | undefined): boolean | undefined =>
 export const getService = (key: string): string =>
   key.substring(SERVICE_PREFIX.length);
 
-export const COLLAPSIBLE_ACTION_ELEMENTS = [
-  "ha-automation-action-choose",
-  "ha-automation-action-condition",
-  "ha-automation-action-if",
-  "ha-automation-action-parallel",
-  "ha-automation-action-repeat",
-  "ha-automation-action-sequence",
-];
-
 export const ACTION_BUILDING_BLOCKS = [
   "choose",
   "if",

src/data/automation.ts

@@ -565,9 +565,6 @@ export interface TriggerSidebarConfig extends BaseSidebarConfig {
   close: () => void;
   rename: () => void;
   disable: () => void;
-  duplicate: () => void;
-  cut: () => void;
-  copy: () => void;
   config: Trigger;
   yamlMode: boolean;
   uiSupported: boolean;
@@ -578,10 +575,6 @@ export interface ConditionSidebarConfig extends BaseSidebarConfig {
   close: () => void;
   rename: () => void;
   disable: () => void;
-  test: () => void;
-  duplicate: () => void;
-  cut: () => void;
-  copy: () => void;
   config: Condition;
   yamlMode: boolean;
   uiSupported: boolean;
@@ -592,13 +585,7 @@ export interface ActionSidebarConfig extends BaseSidebarConfig {
   close: () => void;
   rename: () => void;
   disable: () => void;
-  duplicate: () => void;
-  cut: () => void;
-  copy: () => void;
-  run: () => void;
-  config: {
-    action: Action;
-  };
+  config: Action;
   yamlMode: boolean;
   uiSupported: boolean;
 }
@@ -606,8 +593,6 @@ export interface ActionSidebarConfig extends BaseSidebarConfig {
 export interface OptionSidebarConfig extends BaseSidebarConfig {
   close: () => void;
   rename: () => void;
-  duplicate: () => void;
-  defaultOption?: boolean;
 }
 
 export interface ScriptFieldSidebarConfig extends BaseSidebarConfig {

src/data/automation_i18n.ts

@@ -378,17 +378,7 @@ const tryDescribeTrigger = (
 
   // Tag Trigger
   if (trigger.trigger === "tag") {
-    const entity = Object.values(hass.states).find(
-      (state) =>
-        state.entity_id.startsWith("tag.") &&
-        state.attributes.tag_id === trigger.tag_id
-    );
-    return entity
-      ? hass.localize(
-          `${triggerTranslationBaseKey}.tag.description.known_tag`,
-          { tag_name: computeStateName(entity) }
-        )
-      : hass.localize(`${triggerTranslationBaseKey}.tag.description.full`);
+    return hass.localize(`${triggerTranslationBaseKey}.tag.description.full`);
   }
 
   // Time Trigger

src/data/condition.ts

@@ -52,9 +52,3 @@ export const CONDITION_GROUPS: AutomationElementGroup = {
 } as const;
 
 export const CONDITION_BUILDING_BLOCKS = ["and", "or", "not"];
-
-export const COLLAPSIBLE_CONDITION_ELEMENTS = [
-  "ha-automation-condition-and",
-  "ha-automation-condition-not",
-  "ha-automation-condition-or",
-];

src/data/config_entries.ts

@@ -42,19 +42,6 @@ export const getSubEntries = (hass: HomeAssistant, entry_id: string) =>
     entry_id,
   });
 
-export const updateSubEntry = (
-  hass: HomeAssistant,
-  entry_id: string,
-  subentry_id: string,
-  updatedValues: SubEntryMutableParams
-) =>
-  hass.callWS({
-    type: "config_entries/subentries/update",
-    entry_id,
-    subentry_id,
-    ...updatedValues,
-  });
-
 export const deleteSubEntry = (
   hass: HomeAssistant,
   entry_id: string,
@@ -73,8 +60,6 @@ export type ConfigEntryMutableParams = Partial<
   >
 >;
 
-export type SubEntryMutableParams = Partial<Pick<SubEntry, "title">>;
-
 // https://github.com/home-assistant/core/blob/2286dea636fda001f03433ba14d7adbda43979e5/homeassistant/config_entries.py#L81
 export const ERROR_STATES: ConfigEntry["state"][] = [
   "migration_error",

src/data/entity_attributes.ts

@@ -1,7 +1,6 @@
 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",
@@ -27,14 +26,6 @@ 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",

src/data/hassio/host.ts

@@ -195,7 +195,6 @@ export const fetchHostDisksUsage = async (hass: HomeAssistant) => {
       type: "supervisor/api",
       endpoint: "/host/disks/default/usage",
       method: "get",
-      timeout: 3600, // seconds. This can take a while
     });
   }
 

src/data/lovelace/config/section.ts

@@ -2,10 +2,16 @@ import type { Condition } from "../../../panels/lovelace/common/validate-conditi
 import type { LovelaceCardConfig } from "./card";
 import type { LovelaceStrategyConfig } from "./strategy";
 
+export interface LovelaceSectionStyleConfig {
+  background_color?: string;
+  background_opacity?: number;
+}
+
 export interface LovelaceBaseSectionConfig {
   visibility?: Condition[];
   column_span?: number;
   row_span?: number;
+  style?: LovelaceSectionStyleConfig;
   /**
    * @deprecated Use heading card instead.
    */

src/data/script.ts

@@ -11,6 +11,8 @@ import {
   union,
   array,
   assign,
+  literal,
+  is,
   boolean,
   refine,
 } from "superstruct";
@@ -66,6 +68,17 @@ export const serviceActionStruct: Describe<ServiceActionWithTemplate> = assign(
   })
 );
 
+const playMediaActionStruct: Describe<PlayMediaAction> = assign(
+  baseActionStruct,
+  object({
+    action: literal("media_player.play_media"),
+    target: optional(object({ entity_id: optional(string()) })),
+    entity_id: optional(string()),
+    data: object({ media_content_id: string(), media_content_type: string() }),
+    metadata: object(),
+  })
+);
+
 export interface ScriptEntity extends HassEntityBase {
   attributes: HassEntityAttributeBase & {
     last_triggered: string;
@@ -169,6 +182,14 @@ export interface WaitForTriggerAction extends BaseAction {
   continue_on_timeout?: boolean;
 }
 
+export interface PlayMediaAction extends BaseAction {
+  action: "media_player.play_media";
+  target?: { entity_id?: string };
+  entity_id?: string;
+  data: { media_content_id: string; media_content_type: string };
+  metadata: Record<string, unknown>;
+}
+
 export interface RepeatAction extends BaseAction {
   repeat: CountRepeat | WhileRepeat | UntilRepeat | ForEachRepeat;
 }
@@ -245,6 +266,7 @@ export type NonConditionAction =
   | ChooseAction
   | IfAction
   | VariablesAction
+  | PlayMediaAction
   | StopAction
   | SequenceAction
   | ParallelAction
@@ -269,6 +291,7 @@ export interface ActionTypes {
   wait_for_trigger: WaitForTriggerAction;
   variables: VariablesAction;
   service: ServiceAction;
+  play_media: PlayMediaAction;
   stop: StopAction;
   sequence: SequenceAction;
   parallel: ParallelAction;
@@ -375,6 +398,11 @@ export const getActionType = (action: Action): ActionType => {
     return "set_conversation_response";
   }
   if ("action" in action || "service" in action) {
+    if ("metadata" in action) {
+      if (is(action, playMediaActionStruct)) {
+        return "play_media";
+      }
+    }
     return "service";
   }
   return "unknown";
@@ -415,31 +443,6 @@ export const migrateAutomationAction = (
     delete action.scene;
   }
 
-  // legacy play media
-  if (
-    typeof action === "object" &&
-    action !== null &&
-    "action" in action &&
-    action.action === "media_player.play_media" &&
-    "data" in action &&
-    ((action.data as any)?.media_content_id ||
-      (action.data as any)?.media_content_type)
-  ) {
-    const oldData = { ...(action.data as any) };
-    const media = {
-      media_content_id: oldData.media_content_id,
-      media_content_type: oldData.media_content_type,
-      metadata: { ...(action.metadata || {}) },
-    };
-    delete action.metadata;
-    delete oldData.media_content_id;
-    delete oldData.media_content_type;
-    action.data = {
-      ...oldData,
-      media,
-    };
-  }
-
   if (typeof action === "object" && action !== null && "sequence" in action) {
     for (const sequenceAction of (action as SequenceAction).sequence) {
       migrateAutomationAction(sequenceAction);

src/data/script_i18n.ts

@@ -26,6 +26,7 @@ import type {
   EventAction,
   IfAction,
   ParallelAction,
+  PlayMediaAction,
   RepeatAction,
   SequenceAction,
   SetConversationResponseAction,
@@ -302,6 +303,27 @@ const tryDescribeAction = <T extends ActionType>(
     });
   }
 
+  if (actionType === "play_media") {
+    const config = action as PlayMediaAction;
+    const entityId = config.target?.entity_id || config.entity_id;
+    const mediaStateObj = entityId ? hass.states[entityId] : undefined;
+    return hass.localize(
+      `${actionTranslationBaseKey}.play_media.description.full`,
+      {
+        hasMedia:
+          config.metadata.title || config.data.media_content_id
+            ? "true"
+            : "false",
+        media:
+          (config.metadata.title as string | undefined) ||
+          config.data.media_content_id,
+        hasMediaPlayer:
+          mediaStateObj || entityId !== undefined ? "true" : "false",
+        mediaPlayer: mediaStateObj ? computeStateName(mediaStateObj) : entityId,
+      }
+    );
+  }
+
   if (actionType === "wait_for_trigger") {
     const config = action as WaitForTriggerAction;
     const triggers = ensureArray(config.wait_for_trigger);

src/data/selector.ts

@@ -323,7 +323,6 @@ export interface MediaSelectorValue {
     media_class?: string;
     children_media_class?: string | null;
     navigateIds?: { media_content_type: string; media_content_id: string }[];
-    browse_entity_id?: string;
   };
 }
 

src/dialogs/dialog-list-items/dialog-list-items.ts

@@ -1,106 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import { createCloseHeading } from "../../components/ha-dialog";
-import "../../components/ha-icon";
-import "../../components/ha-md-list";
-import "../../components/ha-md-list-item";
-import "../../components/ha-svg-icon";
-import type { HomeAssistant } from "../../types";
-import type { HassDialog } from "../make-dialog-manager";
-import type { ListItemsDialogParams } from "./show-list-items-dialog";
-
-@customElement("dialog-list-items")
-export class ListItemsDialog
-  extends LitElement
-  implements HassDialog<ListItemsDialogParams>
-{
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @state() private _params?: ListItemsDialogParams;
-
-  public async showDialog(params: ListItemsDialogParams): Promise<void> {
-    this._params = params;
-  }
-
-  private _dialogClosed(): void {
-    this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  private _itemClicked(ev: CustomEvent): void {
-    const item = (ev.currentTarget as any).item;
-    if (!item) return;
-    item.action();
-    this._dialogClosed();
-  }
-
-  protected render() {
-    if (!this._params || !this.hass) {
-      return nothing;
-    }
-
-    return html`
-      <ha-dialog
-        open
-        .heading=${createCloseHeading(this.hass, this._params.title ?? " ")}
-        @closed=${this._dialogClosed}
-        hideActions
-      >
-        <div class="container">
-          <ha-md-list>
-            ${this._params.items.map(
-              (item) => html`
-                <ha-md-list-item
-                  type="button"
-                  @click=${this._itemClicked}
-                  .item=${item}
-                >
-                  ${item.iconPath
-                    ? html`
-                        <ha-svg-icon
-                          .path=${item.iconPath}
-                          slot="start"
-                          class="item-icon"
-                        ></ha-svg-icon>
-                      `
-                    : item.icon
-                      ? html`
-                          <ha-icon
-                            icon=${item.icon}
-                            slot="start"
-                            class="item-icon"
-                          ></ha-icon>
-                        `
-                      : nothing}
-                  <span class="headline">${item.label}</span>
-                  ${item.description
-                    ? html`
-                        <span class="supporting-text">${item.description}</span>
-                      `
-                    : nothing}
-                </ha-md-list-item>
-              `
-            )}
-          </ha-md-list>
-        </div>
-      </ha-dialog>
-    `;
-  }
-
-  static styles = css`
-    ha-dialog {
-      /* Place above other dialogs */
-      --dialog-z-index: 104;
-      --dialog-content-padding: 0;
-      --md-list-item-leading-space: 24px;
-      --md-list-item-trailing-space: 24px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-list-items": ListItemsDialog;
-  }
-}

src/dialogs/dialog-list-items/show-list-items-dialog.ts

@@ -1,24 +0,0 @@
-import { fireEvent } from "../../common/dom/fire_event";
-
-interface ListItem {
-  icon?: string;
-  iconPath?: string;
-  label: string;
-  description?: string;
-  action: () => any;
-}
-
-export interface ListItemsDialogParams {
-  title?: string;
-  items: ListItem[];
-}
-
-export const showListItemsDialog = (
-  element: HTMLElement,
-  params: ListItemsDialogParams
-) =>
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-list-items",
-    dialogImport: () => import("./dialog-list-items"),
-    dialogParams: params,
-  });

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

@@ -5,15 +5,11 @@ import { dynamicElement } from "../../../../common/dom/dynamic-element-directive
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
-import { COLLAPSIBLE_ACTION_ELEMENTS } from "../../../../data/action";
 import { migrateAutomationAction, type Action } from "../../../../data/script";
 import type { HomeAssistant } from "../../../../types";
 import "../ha-automation-editor-warning";
-import { editorStyles, indentStyle } from "../styles";
-import {
-  getAutomationActionType,
-  type ActionElement,
-} from "./ha-automation-action-row";
+import { editorStyles } from "../styles";
+import { getAutomationActionType } from "./ha-automation-action-row";
 
 @customElement("ha-automation-action-editor")
 export default class HaAutomationActionEditor extends LitElement {
@@ -38,9 +34,6 @@ export default class HaAutomationActionEditor extends LitElement {
 
   @query("ha-yaml-editor") public yamlEditor?: HaYamlEditor;
 
-  @query(COLLAPSIBLE_ACTION_ELEMENTS.join(", "))
-  private _collapsibleElement?: ActionElement;
-
   protected render() {
     const yamlMode = this.yamlMode || !this.uiSupported;
     const type = getAutomationActionType(this.action);
@@ -53,7 +46,6 @@ export default class HaAutomationActionEditor extends LitElement {
             this.disabled || (this.action.enabled === false && !this.yamlMode),
           yaml: yamlMode,
           indent: this.indent,
-          card: !this.inSidebar,
         })}
       >
         ${yamlMode
@@ -111,15 +103,7 @@ export default class HaAutomationActionEditor extends LitElement {
     fireEvent(this, "value-changed", { value });
   }
 
-  public expandAll() {
-    this._collapsibleElement?.expandAll?.();
-  }
-
-  public collapseAll() {
-    this._collapsibleElement?.collapseAll?.();
-  }
-
-  static styles = [editorStyles, indentStyle];
+  static styles = editorStyles;
 }
 
 declare global {

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

@@ -26,7 +26,6 @@ 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";
@@ -82,6 +81,7 @@ import "./types/ha-automation-action-device_id";
 import "./types/ha-automation-action-event";
 import "./types/ha-automation-action-if";
 import "./types/ha-automation-action-parallel";
+import "./types/ha-automation-action-play_media";
 import { getRepeatType } from "./types/ha-automation-action-repeat";
 import "./types/ha-automation-action-sequence";
 import "./types/ha-automation-action-service";
@@ -96,7 +96,7 @@ export const getAutomationActionType = memoizeOne(
       return undefined;
     }
     if ("action" in action) {
-      return getActionType(action) as "action";
+      return getActionType(action) as "action" | "play_media";
     }
     if (CONDITION_BUILDING_BLOCKS.some((key) => key in action)) {
       return "condition" as const;
@@ -109,8 +109,6 @@ export const getAutomationActionType = memoizeOne(
 
 export interface ActionElement extends LitElement {
   action: Action;
-  expandAll?: () => void;
-  collapseAll?: () => void;
 }
 
 export const handleChangeEvent = (element: ActionElement, ev: CustomEvent) => {
@@ -145,8 +143,6 @@ export default class HaAutomationActionRow extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public root = false;
-
   @property({ type: Boolean }) public first?: boolean;
 
   @property({ type: Boolean }) public last?: boolean;
@@ -154,9 +150,6 @@ export default class HaAutomationActionRow extends LitElement {
   @property({ type: Boolean, attribute: "sidebar" })
   public optionsInSidebar = false;
 
-  @property({ type: Boolean, attribute: "sort-selected" })
-  public sortSelected = false;
-
   @storage({
     key: "automationClipboard",
     state: false,
@@ -183,23 +176,12 @@ export default class HaAutomationActionRow extends LitElement {
 
   @state() private _selected = false;
 
-  @state() private _collapsed = true;
+  @state() private _collapsed = false;
 
   @state() private _warnings?: string[];
 
   @query("ha-automation-action-editor")
-  private _actionEditor?: HaAutomationActionEditor;
-
-  @query("ha-automation-row")
-  private _automationRowElement?: HaAutomationRow;
-
-  protected firstUpdated(changedProperties: PropertyValues): void {
-    super.firstUpdated(changedProperties);
-
-    if (this.root) {
-      this._collapsed = false;
-    }
-  }
+  private actionEditor?: HaAutomationActionEditor;
 
   protected willUpdate(changedProperties: PropertyValues) {
     if (changedProperties.has("yamlMode")) {
@@ -261,30 +243,26 @@ 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-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
+      <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>
+
+        ${!this.optionsInSidebar
+          ? html` <ha-md-menu-item
               .clickAction=${this._renameAction}
               .disabled=${this.disabled}
             >
@@ -292,60 +270,59 @@ export default class HaAutomationActionRow extends LitElement {
                 "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>`
+          : nothing}
 
-            <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-divider role="separator" tabindex="-1"></ha-md-divider>
 
-            <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._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._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._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._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._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
+        <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>
+
+        ${!this.optionsInSidebar
+          ? html`<ha-md-menu-item
               .clickAction=${this._toggleYamlMode}
               .disabled=${!this._uiModeAvailable || !!this._warnings}
             >
@@ -353,44 +330,45 @@ export default class HaAutomationActionRow extends LitElement {
                 `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>`
+          : nothing}
 
-            <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
-              class="warning"
-              .clickAction=${this._onDelete}
-              .disabled=${this.disabled}
-            >
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.delete"
+        <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
-                class="warning"
-                slot="start"
-                .path=${mdiDelete}
-              ></ha-svg-icon>
-            </ha-md-menu-item>
-          </ha-md-button-menu>`
-        : nothing}
+          <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"
+            slot="start"
+            .path=${mdiDelete}
+          ></ha-svg-icon>
+        </ha-md-menu-item>
+      </ha-md-button-menu>
+
       ${!this.optionsInSidebar
         ? html`${this._warnings
               ? html`<ha-automation-editor-warning
@@ -440,11 +418,7 @@ export default class HaAutomationActionRow extends LitElement {
               .leftChevron=${[
                 ...ACTION_BUILDING_BLOCKS,
                 ...ACTION_COMBINED_BLOCKS,
-              ].includes(blockType!) ||
-              (blockType === "condition" &&
-                CONDITION_BUILDING_BLOCKS.includes(
-                  (this.action as Condition).condition
-                ))}
+              ].includes(blockType!)}
               .collapsed=${this._collapsed}
               .selected=${this._selected}
               @toggle-collapsed=${this._toggleCollapse}
@@ -452,7 +426,6 @@ export default class HaAutomationActionRow extends LitElement {
                 ...ACTION_BUILDING_BLOCKS,
                 ...ACTION_COMBINED_BLOCKS,
               ].includes(blockType!)}
-              .sortSelected=${this.sortSelected}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -506,7 +479,7 @@ export default class HaAutomationActionRow extends LitElement {
     this.openSidebar(value); // refresh sidebar
 
     if (this._yamlMode && !this.optionsInSidebar) {
-      this._actionEditor?.yamlEditor?.setValue(value);
+      this.actionEditor?.yamlEditor?.setValue(value);
     }
   };
 
@@ -609,7 +582,7 @@ export default class HaAutomationActionRow extends LitElement {
       if (this._selected && this.optionsInSidebar) {
         this.openSidebar(value); // refresh sidebar
       } else if (this._yamlMode) {
-        this._actionEditor?.yamlEditor?.setValue(value);
+        this.actionEditor?.yamlEditor?.setValue(value);
       }
     }
   };
@@ -689,63 +662,26 @@ export default class HaAutomationActionRow extends LitElement {
       },
       disable: this._onDisable,
       delete: this._onDelete,
-      copy: this._copyAction,
-      cut: this._cutAction,
-      duplicate: this._duplicateAction,
-      run: this._runAction,
-      config: {
-        action: sidebarAction,
-      },
+      config: sidebarAction,
       uiSupported: actionType ? this._uiSupported(actionType) : false,
       yamlMode: this._yamlMode,
     } satisfies ActionSidebarConfig);
     this._selected = true;
-    this._collapsed = false;
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
-        this.scrollIntoView({
-          block: "start",
-          behavior: "smooth",
-        });
+      this.scrollIntoView({
+        block: "start",
+        behavior: "smooth",
       });
     }
   }
 
   public expand() {
-    if (this.optionsInSidebar) {
-      this._collapsed = false;
-      return;
-    }
-
     this.updateComplete.then(() => {
       this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = true;
     });
   }
 
-  public collapse() {
-    if (this.optionsInSidebar) {
-      this._collapsed = true;
-      return;
-    }
-
-    this.updateComplete.then(() => {
-      this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = false;
-    });
-  }
-
-  public expandAll() {
-    this.expand();
-
-    this._actionEditor?.expandAll();
-  }
-
-  public collapseAll() {
-    this.collapse();
-
-    this._actionEditor?.collapseAll();
-  }
-
   private _uiSupported = memoizeOne(
     (type: string) =>
       customElements.get(`ha-automation-action-${type}`) !== undefined
@@ -755,14 +691,6 @@ export default class HaAutomationActionRow extends LitElement {
     this._collapsed = !this._collapsed;
   }
 
-  public isSelected() {
-    return this._selected;
-  }
-
-  public focus() {
-    this._automationRowElement?.focus();
-  }
-
   static styles = rowStyles;
 }
 

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

@@ -2,7 +2,7 @@ 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 { customElement, property, queryAll, state } from "lit/decorators";
+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";
@@ -10,7 +10,6 @@ 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,
@@ -25,7 +24,6 @@ import {
   VIRTUAL_ACTIONS,
   showAddAutomationElementDialog,
 } from "../show-add-automation-element-dialog";
-import { automationRowsStyles } from "../styles";
 import type HaAutomationActionRow from "./ha-automation-action-row";
 import { getAutomationActionType } from "./ha-automation-action-row";
 
@@ -48,8 +46,6 @@ export default class HaAutomationAction extends LitElement {
 
   @state() private _showReorder = false;
 
-  @state() private _rowSortSelected?: number;
-
   @state()
   @storage({
     key: "automationClipboard",
@@ -59,13 +55,8 @@ export default class HaAutomationAction extends LitElement {
   })
   public _clipboard?: AutomationClipboard;
 
-  @queryAll("ha-automation-action-row")
-  private _actionRowElements?: HaAutomationActionRow[];
-
   private _focusLastActionOnChange = false;
 
-  private _focusActionIndexOnChange?: number;
-
   private _actionKeys = new WeakMap<Action, string>();
 
   private _unsubMql?: () => void;
@@ -94,15 +85,13 @@ export default class HaAutomationAction extends LitElement {
         @item-moved=${this._actionMoved}
         @item-added=${this._actionAdded}
         @item-removed=${this._actionRemoved}
-        @item-cloned=${this._actionCloned}
       >
-        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
+        <div class="actions">
           ${repeat(
             this.actions,
             (action) => this._getKey(action),
             (action, idx) => html`
               <ha-automation-action-row
-                .root=${this.root}
                 .sortableData=${action}
                 .index=${idx}
                 .first=${idx === 0}
@@ -117,20 +106,10 @@ export default class HaAutomationAction extends LitElement {
                 .hass=${this.hass}
                 ?highlight=${this.highlightedActions?.includes(action)}
                 .optionsInSidebar=${this.optionsInSidebar}
-                .sortSelected=${this._rowSortSelected === idx}
-                @stop-sort-selection=${this._stopSortSelection}
               >
                 ${this._showReorder && !this.disabled
                   ? html`
-                      <div
-                        tabindex="0"
-                        class="handle ${this._rowSortSelected === idx
-                          ? "active"
-                          : ""}"
-                        slot="icons"
-                        @keydown=${this._handleDragKeydown}
-                        .index=${idx}
-                      >
+                      <div class="handle" slot="icons">
                         <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                       </div>
                     `
@@ -170,27 +149,19 @@ export default class HaAutomationAction extends LitElement {
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
 
-    if (
-      changedProps.has("actions") &&
-      (this._focusLastActionOnChange ||
-        this._focusActionIndexOnChange !== undefined)
-    ) {
-      const mode = this._focusLastActionOnChange ? "new" : "moved";
+    if (changedProps.has("actions") && this._focusLastActionOnChange) {
+      this._focusLastActionOnChange = false;
 
       const row = this.shadowRoot!.querySelector<HaAutomationActionRow>(
-        `ha-automation-action-row:${mode === "new" ? "last-of-type" : `nth-of-type(${this._focusActionIndexOnChange! + 1})`}`
+        "ha-automation-action-row:last-of-type"
       )!;
-
-      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) || mode === "moved")
+          !ACTION_BUILDING_BLOCKS.includes(type)
         ) {
           row.openSidebar();
           if (this.narrow) {
@@ -199,34 +170,26 @@ export default class HaAutomationAction extends LitElement {
               behavior: "smooth",
             });
           }
-        }
-
-        if (mode === "new") {
+        } else if (!this.optionsInSidebar) {
           row.expand();
         }
-
-        if (!this.optionsInSidebar) {
-          row.focus();
-        }
+        row.focus();
       });
     }
   }
 
   public expandAll() {
-    this._actionRowElements?.forEach((row) => {
-      row.expandAll();
-    });
-  }
-
-  public collapseAll() {
-    this._actionRowElements?.forEach((row) => {
-      row.collapseAll();
+    const rows = this.shadowRoot!.querySelectorAll<HaAutomationActionRow>(
+      "ha-automation-action-row"
+    )!;
+    rows.forEach((row) => {
+      row.expand();
     });
   }
 
   private _addActionDialog() {
     if (this.narrow) {
-      fireEvent(this, "request-close-sidebar");
+      fireEvent(this, "close-sidebar");
     }
 
     showAddAutomationElementDialog(this, {
@@ -276,30 +239,18 @@ export default class HaAutomationAction extends LitElement {
     return this._actionKeys.get(action)!;
   }
 
-  private async _moveUp(ev) {
+  private _moveUp(ev) {
     ev.stopPropagation();
     const index = (ev.target as any).index;
-    if (!(ev.target as HaAutomationActionRow).first) {
-      const newIndex = index - 1;
-      this._move(index, newIndex);
-      if (this._rowSortSelected === index) {
-        this._rowSortSelected = newIndex;
-      }
-      ev.target.focus();
-    }
+    const newIndex = index - 1;
+    this._move(index, newIndex);
   }
 
-  private async _moveDown(ev) {
+  private _moveDown(ev) {
     ev.stopPropagation();
     const index = (ev.target as any).index;
-    if (!(ev.target as HaAutomationActionRow).last) {
-      const newIndex = index + 1;
-      this._move(index, newIndex);
-      if (this._rowSortSelected === index) {
-        this._rowSortSelected = newIndex;
-      }
-      ev.target.focus();
-    }
+    const newIndex = index + 1;
+    this._move(index, newIndex);
   }
 
   private _move(oldIndex: number, newIndex: number) {
@@ -319,12 +270,6 @@ 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,
@@ -332,9 +277,6 @@ 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
@@ -343,9 +285,6 @@ 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 });
   }
@@ -360,6 +299,7 @@ export default class HaAutomationAction extends LitElement {
     // Ensure action is removed even after update
     const actions = this.actions.filter((a) => a !== action);
     fireEvent(this, "value-changed", { value: actions });
+    fireEvent(this, "close-sidebar");
   }
 
   private _actionChanged(ev: CustomEvent) {
@@ -381,12 +321,6 @@ export default class HaAutomationAction extends LitElement {
     fireEvent(this, "value-changed", { value: actions });
   }
 
-  private _actionCloned(ev: CustomEvent<HaSortableClonedEventData>) {
-    if (ev.detail.item.action && ev.detail.item.isSelected()) {
-      ev.detail.item.action["ha-automation-row-selected"] = true;
-    }
-  }
-
   private _duplicateAction(ev: CustomEvent) {
     ev.stopPropagation();
     const index = (ev.target as any).index;
@@ -395,28 +329,44 @@ export default class HaAutomationAction extends LitElement {
     });
   }
 
-  private _handleDragKeydown(ev: KeyboardEvent) {
-    if (ev.key === "Enter" || ev.key === " ") {
-      ev.stopPropagation();
-      this._rowSortSelected =
-        this._rowSortSelected === undefined
-          ? (ev.target as any).index
-          : undefined;
+  static styles = css`
+    .actions {
+      padding: 16px 0 16px 16px;
+      margin: -16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
     }
-  }
-
-  private _stopSortSelection() {
-    this._rowSortSelected = undefined;
-  }
-
-  static styles = [
-    automationRowsStyles,
-    css`
-      :host([root]) .rows {
-        padding-right: 8px;
-      }
-    `,
-  ];
+    :host([root]) .actions {
+      padding-right: 8px;
+    }
+    .sortable-ghost {
+      background: none;
+      border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
+    }
+    .sortable-drag {
+      background: none;
+    }
+    ha-automation-action-row {
+      display: block;
+      scroll-margin-top: 48px;
+    }
+    .handle {
+      padding: 12px;
+      cursor: move; /* fallback if grab cursor is unsupported */
+      cursor: grab;
+    }
+    .handle ha-svg-icon {
+      pointer-events: none;
+      height: 24px;
+    }
+    .buttons {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      order: 1;
+    }
+  `;
 }
 
 declare global {

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

@@ -1,15 +1,12 @@
-import { type CSSResultGroup, LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { type CSSResultGroup, LitElement, css, html } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { ensureArray } from "../../../../../common/array/ensure-array";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-button";
 import type { Action, ChooseAction, Option } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import "../../option/ha-automation-option";
-import type HaAutomationOption from "../../option/ha-automation-option";
-import "../../option/ha-automation-option-row";
-import type HaAutomationOptionRow from "../../option/ha-automation-option-row";
-import { indentStyle } from "../../styles";
 import "../ha-automation-action";
 import type { ActionElement } from "../ha-automation-action-row";
 
@@ -27,11 +24,6 @@ export class HaChooseAction extends LitElement implements ActionElement {
 
   @state() private _showDefault = false;
 
-  @query("ha-automation-option") private _optionElement?: HaAutomationOption;
-
-  @query("ha-automation-option-row")
-  private _defaultOptionRowElement?: HaAutomationOptionRow;
-
   public static get defaultConfig(): ChooseAction {
     return { choose: [{ conditions: [], sequence: [] }] };
   }
@@ -49,29 +41,42 @@ export class HaChooseAction extends LitElement implements ActionElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .optionsInSidebar=${this.indent}
-        .showDefaultActions=${this._showDefault || !!action.default}
-        @show-default-actions=${this._addDefault}
       ></ha-automation-option>
 
       ${this._showDefault || action.default
         ? html`
-            <ha-automation-option-row
-              .defaultActions=${(ensureArray(action.default) || []) as Action[]}
-              .narrow=${this.narrow}
+            <h2>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.choose.default"
+              )}:
+            </h2>
+            <ha-automation-action
+              .actions=${ensureArray(action.default) || []}
               .disabled=${this.disabled}
-              .hass=${this.hass}
-              .optionsInSidebar=${this.indent}
               @value-changed=${this._defaultChanged}
-            ></ha-automation-option-row>
+              .hass=${this.hass}
+              .narrow=${this.narrow}
+              .optionsInSidebar=${this.indent}
+            ></ha-automation-action>
           `
-        : nothing}
+        : html`
+            <div class="link-button-row">
+              <button
+                class="link"
+                @click=${this._addDefault}
+                .disabled=${this.disabled}
+              >
+                ${this.hass.localize(
+                  "ui.panel.config.automation.editor.actions.type.choose.add_default"
+                )}
+              </button>
+            </div>
+          `}
     `;
   }
 
-  private async _addDefault() {
+  private _addDefault() {
     this._showDefault = true;
-    await this._defaultOptionRowElement?.updateComplete;
-    this._defaultOptionRowElement?.expand();
   }
 
   private _optionsChanged(ev: CustomEvent) {
@@ -99,28 +104,12 @@ export class HaChooseAction extends LitElement implements ActionElement {
     fireEvent(this, "value-changed", { value: newValue });
   }
 
-  public expandAll() {
-    this._optionElement?.expandAll();
-    this._defaultOptionRowElement?.expandAll();
-  }
-
-  public collapseAll() {
-    this._optionElement?.collapseAll();
-    this._defaultOptionRowElement?.collapseAll();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
-      indentStyle,
       css`
-        ha-automation-option-row {
-          display: block;
-          margin-top: 24px;
-        }
-        h3 {
-          font-size: inherit;
-          font-weight: inherit;
+        .link-button-row {
+          padding: 14px 14px 0 14px;
         }
       `,
     ];

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

@@ -1,5 +1,5 @@
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../../common/string/compare";
@@ -14,7 +14,7 @@ import {
 } from "../../../../../data/condition";
 import type { Entries, HomeAssistant } from "../../../../../types";
 import "../../condition/ha-automation-condition-editor";
-import type HaAutomationConditionEditor from "../../condition/ha-automation-condition-editor";
+import type { ActionElement } from "../ha-automation-action-row";
 import "../../condition/types/ha-automation-condition-and";
 import "../../condition/types/ha-automation-condition-device";
 import "../../condition/types/ha-automation-condition-not";
@@ -26,7 +26,6 @@ import "../../condition/types/ha-automation-condition-template";
 import "../../condition/types/ha-automation-condition-time";
 import "../../condition/types/ha-automation-condition-trigger";
 import "../../condition/types/ha-automation-condition-zone";
-import type { ActionElement } from "../ha-automation-action-row";
 
 @customElement("ha-automation-action-condition")
 export class HaConditionAction extends LitElement implements ActionElement {
@@ -42,9 +41,6 @@ export class HaConditionAction extends LitElement implements ActionElement {
 
   @property({ type: Boolean, attribute: "indent" }) public indent = false;
 
-  @query("ha-automation-condition-editor")
-  private _conditionEditor?: HaAutomationConditionEditor;
-
   public static get defaultConfig(): Omit<Condition, "state" | "entity_id"> {
     return { condition: "state" };
   }
@@ -150,14 +146,6 @@ export class HaConditionAction extends LitElement implements ActionElement {
       customElements.get(`ha-automation-condition-${type}`) !== undefined
   );
 
-  public expandAll() {
-    this._conditionEditor?.expandAll();
-  }
-
-  public collapseAll() {
-    this._conditionEditor?.collapseAll();
-  }
-
   static styles = css`
     ha-select {
       margin-bottom: 24px;

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

@@ -1,15 +1,13 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, query, queryAll } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-textfield";
 import type { Action, IfAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import type { Condition } from "../../../../lovelace/common/validate-condition";
-import type HaAutomationCondition from "../../condition/ha-automation-condition";
 import "../ha-automation-action";
-import type HaAutomationAction from "../ha-automation-action";
 import type { ActionElement } from "../ha-automation-action-row";
 
 @customElement("ha-automation-action-if")
@@ -24,11 +22,7 @@ export class HaIfAction extends LitElement implements ActionElement {
 
   @property({ type: Boolean }) public indent = false;
 
-  @query("ha-automation-condition")
-  private _conditionElement?: HaAutomationCondition;
-
-  @queryAll("ha-automation-action")
-  private _actionElements?: HaAutomationAction[];
+  @state() private _showElse = false;
 
   public static get defaultConfig(): IfAction {
     return {
@@ -41,11 +35,11 @@ export class HaIfAction extends LitElement implements ActionElement {
     const action = this.action;
 
     return html`
-      <h4>
+      <h3>
         ${this.hass.localize(
           "ui.panel.config.automation.editor.actions.type.if.if"
-        )}:
-      </h4>
+        )}*:
+      </h3>
       <ha-automation-condition
         .conditions=${action.if ?? []}
         .disabled=${this.disabled}
@@ -55,11 +49,11 @@ export class HaIfAction extends LitElement implements ActionElement {
         .optionsInSidebar=${this.indent}
       ></ha-automation-condition>
 
-      <h4>
+      <h3>
         ${this.hass.localize(
           "ui.panel.config.automation.editor.actions.type.if.then"
-        )}:
-      </h4>
+        )}*:
+      </h3>
       <ha-automation-action
         .actions=${action.then ?? []}
         .disabled=${this.disabled}
@@ -68,22 +62,40 @@ export class HaIfAction extends LitElement implements ActionElement {
         .narrow=${this.narrow}
         .optionsInSidebar=${this.indent}
       ></ha-automation-action>
-      <h4>
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.type.if.else"
-        )}:
-      </h4>
-      <ha-automation-action
-        .actions=${action.else || []}
-        .disabled=${this.disabled}
-        @value-changed=${this._elseChanged}
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .optionsInSidebar=${this.indent}
-      ></ha-automation-action>
+      ${this._showElse || action.else
+        ? html`
+            <h3>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.if.else"
+              )}:
+            </h3>
+            <ha-automation-action
+              .actions=${action.else || []}
+              .disabled=${this.disabled}
+              @value-changed=${this._elseChanged}
+              .hass=${this.hass}
+              .narrow=${this.narrow}
+              .optionsInSidebar=${this.indent}
+            ></ha-automation-action>
+          `
+        : html`<div class="link-button-row">
+            <button
+              class="link"
+              @click=${this._addElse}
+              .disabled=${this.disabled}
+            >
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.if.add_else"
+              )}
+            </button>
+          </div>`}
     `;
   }
 
+  private _addElse() {
+    this._showElse = true;
+  }
+
   private _ifChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const value = ev.detail.value as Condition[];
@@ -108,6 +120,7 @@ export class HaIfAction extends LitElement implements ActionElement {
 
   private _elseChanged(ev: CustomEvent) {
     ev.stopPropagation();
+    this._showElse = true;
     const elseAction = ev.detail.value as Action[];
     const newValue: IfAction = {
       ...this.action,
@@ -119,26 +132,12 @@ export class HaIfAction extends LitElement implements ActionElement {
     fireEvent(this, "value-changed", { value: newValue });
   }
 
-  public expandAll() {
-    this._conditionElement?.expandAll();
-    this._actionElements?.forEach((element) => element.expandAll?.());
-  }
-
-  public collapseAll() {
-    this._conditionElement?.collapseAll();
-    this._actionElements?.forEach((element) => element.collapseAll?.());
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
-        h4 {
-          color: var(--secondary-text-color);
-          margin-bottom: 8px;
-        }
-        h4:first-child {
-          margin-top: 0;
+        .link-button-row {
+          padding: 14px;
         }
       `,
     ];

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

@@ -1,13 +1,12 @@
 import type { CSSResultGroup } from "lit";
 import { html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-textfield";
 import type { Action, ParallelAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import "../ha-automation-action";
-import type HaAutomationAction from "../ha-automation-action";
 import type { ActionElement } from "../ha-automation-action-row";
 
 @customElement("ha-automation-action-parallel")
@@ -22,9 +21,6 @@ export class HaParallelAction extends LitElement implements ActionElement {
 
   @property({ type: Boolean }) public indent = false;
 
-  @query("ha-automation-action")
-  private _actionElement?: HaAutomationAction;
-
   public static get defaultConfig(): ParallelAction {
     return {
       parallel: [],
@@ -57,14 +53,6 @@ export class HaParallelAction extends LitElement implements ActionElement {
     });
   }
 
-  public expandAll() {
-    this._actionElement?.expandAll();
-  }
-
-  public collapseAll() {
-    this._actionElement?.collapseAll();
-  }
-
   static get styles(): CSSResultGroup {
     return haStyle;
   }

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

@@ -0,0 +1,79 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../../common/dom/fire_event";
+import "../../../../../components/ha-selector/ha-selector";
+import type { PlayMediaAction } from "../../../../../data/script";
+import type {
+  MediaSelectorValue,
+  Selector,
+} from "../../../../../data/selector";
+import type { HomeAssistant } from "../../../../../types";
+import type { ActionElement } from "../ha-automation-action-row";
+
+const MEDIA_SELECTOR_SCHEMA: Selector = {
+  media: {},
+};
+
+@customElement("ha-automation-action-play_media")
+export class HaPlayMediaAction extends LitElement implements ActionElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ attribute: false }) public action!: PlayMediaAction;
+
+  @property({ type: Boolean }) public narrow = false;
+
+  public static get defaultConfig(): PlayMediaAction {
+    return {
+      action: "media_player.play_media",
+      target: { entity_id: "" },
+      data: { media_content_id: "", media_content_type: "" },
+      metadata: {},
+    };
+  }
+
+  private _getSelectorValue = memoizeOne(
+    (action: PlayMediaAction): MediaSelectorValue => ({
+      entity_id: action.target?.entity_id || action.entity_id,
+      media_content_id: action.data?.media_content_id,
+      media_content_type: action.data?.media_content_type,
+      metadata: action.metadata,
+    })
+  );
+
+  protected render() {
+    return html`
+      <ha-selector
+        .selector=${MEDIA_SELECTOR_SCHEMA}
+        .hass=${this.hass}
+        .disabled=${this.disabled}
+        .value=${this._getSelectorValue(this.action)}
+        @value-changed=${this._valueChanged}
+      ></ha-selector>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent<{ value: MediaSelectorValue }>) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this.action,
+        action: "media_player.play_media",
+        target: { entity_id: ev.detail.value.entity_id },
+        data: {
+          media_content_id: ev.detail.value.media_content_id,
+          media_content_type: ev.detail.value.media_content_type,
+        },
+        metadata: ev.detail.value.metadata || {},
+      } as PlayMediaAction,
+    });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-action-play_media": HaPlayMediaAction;
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-textfield";
@@ -12,14 +12,10 @@ import type { ActionElement } from "../ha-automation-action-row";
 
 import { isTemplate } from "../../../../../common/string/has-template";
 import "../../../../../components/ha-form/ha-form";
-import type { HaForm } from "../../../../../components/ha-form/ha-form";
 import type {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../../components/ha-form/types";
-import type { HaSelector } from "../../../../../components/ha-selector/ha-selector";
-import type { HaActionSelector } from "../../../../../components/ha-selector/ha-selector-action";
-import type { HaConditionSelector } from "../../../../../components/ha-selector/ha-selector-condition";
 
 const OPTIONS = ["count", "while", "until", "for_each"] as const;
 type RepeatType = (typeof OPTIONS)[number];
@@ -41,9 +37,6 @@ export class HaRepeatAction extends LitElement implements ActionElement {
 
   @property({ type: Boolean, attribute: "indent" }) public indent = false;
 
-  @query("ha-form")
-  private _formElement?: HaForm;
-
   public static get defaultConfig(): RepeatAction {
     return { repeat: { count: 2, sequence: [] } };
   }
@@ -182,41 +175,6 @@ export class HaRepeatAction extends LitElement implements ActionElement {
     ];
   }
 
-  private _getSelectorElements() {
-    if (this._formElement) {
-      const selectors =
-        this._formElement.shadowRoot?.querySelectorAll<HaSelector>(
-          "ha-selector"
-        );
-
-      const selectorElements: (HaConditionSelector | HaActionSelector)[] = [];
-
-      selectors?.forEach((selector) => {
-        selectorElements.push(
-          ...Array.from(
-            selector.shadowRoot?.querySelectorAll<
-              HaConditionSelector | HaActionSelector
-            >("ha-selector-condition, ha-selector-action") || []
-          )
-        );
-      });
-      return selectorElements;
-    }
-    return [];
-  }
-
-  public expandAll() {
-    this._getSelectorElements().forEach((element) => {
-      element.expandAll?.();
-    });
-  }
-
-  public collapseAll() {
-    this._getSelectorElements().forEach((element) => {
-      element.collapseAll?.();
-    });
-  }
-
   private _computeLabelCallback = (
     schema: SchemaUnion<ReturnType<typeof this._schema>>
   ): string => {

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

@@ -1,6 +1,6 @@
 import type { CSSResultGroup } from "lit";
 import { html, LitElement } from "lit";
-import { query, customElement, property } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-textfield";
 import type { Action, SequenceAction } from "../../../../../data/script";
@@ -8,7 +8,6 @@ import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant } from "../../../../../types";
 import "../ha-automation-action";
 import type { ActionElement } from "../ha-automation-action-row";
-import type HaAutomationAction from "../ha-automation-action";
 
 @customElement("ha-automation-action-sequence")
 export class HaSequenceAction extends LitElement implements ActionElement {
@@ -22,9 +21,6 @@ export class HaSequenceAction extends LitElement implements ActionElement {
 
   @property({ type: Boolean }) public indent = false;
 
-  @query("ha-automation-action")
-  private _actionElement?: HaAutomationAction;
-
   public static get defaultConfig(): SequenceAction {
     return {
       sequence: [],
@@ -57,14 +53,6 @@ export class HaSequenceAction extends LitElement implements ActionElement {
     });
   }
 
-  public expandAll() {
-    this._actionElement?.expandAll();
-  }
-
-  public collapseAll() {
-    this._actionElement?.collapseAll();
-  }
-
   static get styles(): CSSResultGroup {
     return haStyle;
   }

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

@@ -244,7 +244,14 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
       manifests?: DomainManifestLookup
     ): ListItem[] => {
       if (type === "action" && isService(group)) {
-        return this._services(localize, services, manifests, group);
+        let result = this._services(localize, services, manifests, group);
+        if (group === `${SERVICE_PREFIX}media_player`) {
+          result = [
+            this._convertToItem("play_media", {}, type, localize),
+            ...result,
+          ];
+        }
+        return result;
       }
 
       const groups = this._getGroups(type, group);

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

@@ -8,11 +8,9 @@ import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import type { Condition } from "../../../../data/automation";
 import { expandConditionWithShorthand } from "../../../../data/automation";
-import { COLLAPSIBLE_CONDITION_ELEMENTS } from "../../../../data/condition";
 import type { HomeAssistant } from "../../../../types";
 import "../ha-automation-editor-warning";
-import { editorStyles, indentStyle } from "../styles";
-import type { ConditionElement } from "./ha-automation-condition-row";
+import { editorStyles } from "../styles";
 
 @customElement("ha-automation-condition-editor")
 export default class HaAutomationConditionEditor extends LitElement {
@@ -28,8 +26,6 @@ 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 =
@@ -37,9 +33,6 @@ export default class HaAutomationConditionEditor extends LitElement {
 
   @query("ha-yaml-editor") public yamlEditor?: HaYamlEditor;
 
-  @query(COLLAPSIBLE_CONDITION_ELEMENTS.join(", "))
-  private _collapsibleElement?: ConditionElement;
-
   private _processedCondition = memoizeOne((condition) =>
     expandConditionWithShorthand(condition)
   );
@@ -57,7 +50,6 @@ export default class HaAutomationConditionEditor extends LitElement {
             (this.condition.enabled === false && !this.yamlMode),
           yaml: yamlMode,
           indent: this.indent,
-          card: !this.inSidebar,
         })}
       >
         ${yamlMode
@@ -116,17 +108,8 @@ export default class HaAutomationConditionEditor extends LitElement {
     fireEvent(this, "value-changed", { value });
   }
 
-  public expandAll() {
-    this._collapsibleElement?.expandAll?.();
-  }
-
-  public collapseAll() {
-    this._collapsibleElement?.collapseAll?.();
-  }
-
   static styles = [
     editorStyles,
-    indentStyle,
     css`
       :host([action]) .card-content {
         padding: 0;
@@ -136,7 +119,6 @@ export default class HaAutomationConditionEditor extends LitElement {
         margin-right: 0;
         padding: 0;
         border-left: none;
-        border-bottom: none;
       }
     `,
   ];

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

@@ -14,7 +14,7 @@ import {
   mdiStopCircleOutline,
 } from "@mdi/js";
 import deepClone from "deep-clone-simple";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -26,7 +26,6 @@ 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";
@@ -71,8 +70,6 @@ import "./types/ha-automation-condition-zone";
 
 export interface ConditionElement extends LitElement {
   condition: Condition;
-  expandAll?: () => void;
-  collapseAll?: () => void;
 }
 
 export const handleChangeEvent = (
@@ -108,18 +105,13 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public root = false;
-
   @property({ type: Boolean }) public first?: boolean;
 
   @property({ type: Boolean }) public last?: boolean;
 
   @property({ type: Boolean }) public narrow = false;
 
-  @property({ type: Boolean, attribute: "sort-selected" })
-  public sortSelected = false;
-
-  @state() private _collapsed = true;
+  @state() private _collapsed = false;
 
   @state() private _warnings?: string[];
 
@@ -149,9 +141,6 @@ 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
@@ -167,94 +156,90 @@ export default class HaAutomationConditionRow extends LitElement {
 
       <slot name="icons" slot="icons"></slot>
 
-      ${!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._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>
+        ${!this.optionsInSidebar
+          ? html`
+              <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>
+            `
+          : nothing}
 
-            <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>
+        <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>
 
-            <ha-md-menu-item
+        ${!this.optionsInSidebar
+          ? html`<ha-md-menu-item
               .clickAction=${this._toggleYamlMode}
               .disabled=${this._uiSupported(this.condition.condition) ||
               !!this._warnings}
@@ -263,44 +248,45 @@ export default class HaAutomationConditionRow extends LitElement {
                 `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>`
+          : nothing}
 
-            <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
-              class="warning"
-              .clickAction=${this._onDelete}
-              .disabled=${this.disabled}
-            >
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.delete"
+        <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
-                class="warning"
-                slot="start"
-                .path=${mdiDelete}
-              ></ha-svg-icon>
-            </ha-md-menu-item>
-          </ha-md-button-menu>`
-        : nothing}
+          <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"
+            slot="start"
+            .path=${mdiDelete}
+          ></ha-svg-icon>
+        </ha-md-menu-item>
+      </ha-md-button-menu>
+
       ${!this.optionsInSidebar
         ? html`${this._warnings
               ? html`<ha-automation-editor-warning
@@ -360,7 +346,6 @@ export default class HaAutomationConditionRow extends LitElement {
               .buildingBlock=${CONDITION_BUILDING_BLOCKS.includes(
                 this.condition.condition
               )}
-              .sortSelected=${this.sortSelected}
               >${this._renderRow()}</ha-automation-row
             >`
           : html`
@@ -402,14 +387,6 @@ export default class HaAutomationConditionRow extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProperties: PropertyValues): void {
-    super.firstUpdated(changedProperties);
-
-    if (this.root) {
-      this._collapsed = false;
-    }
-  }
-
   protected willUpdate(changedProperties) {
     // on yaml toggle --> clear warnings
     if (changedProperties.has("yamlMode")) {
@@ -598,32 +575,11 @@ export default class HaAutomationConditionRow extends LitElement {
   };
 
   public expand() {
-    if (this.optionsInSidebar) {
-      this._collapsed = false;
-      return;
-    }
-
     this.updateComplete.then(() => {
       this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = true;
     });
   }
 
-  public collapse() {
-    this._collapsed = true;
-  }
-
-  public expandAll() {
-    this.expand();
-
-    this.conditionEditor?.expandAll();
-  }
-
-  public collapseAll() {
-    this.collapse();
-
-    this.conditionEditor?.collapseAll();
-  }
-
   private _handleUiModeNotAvailable(ev: CustomEvent) {
     this._warnings = handleStructError(this.hass, ev.detail).warnings;
     if (!this._yamlMode) {
@@ -661,23 +617,16 @@ export default class HaAutomationConditionRow extends LitElement {
       },
       disable: this._onDisable,
       delete: this._onDelete,
-      duplicate: this._duplicateCondition,
-      copy: this._copyCondition,
-      cut: this._cutCondition,
-      test: this._testCondition,
       config: sidebarCondition,
       uiSupported: this._uiSupported(sidebarCondition.condition),
       yamlMode: this._yamlMode,
     } satisfies ConditionSidebarConfig);
     this._selected = true;
-    this._collapsed = false;
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
-        this.scrollIntoView({
-          block: "start",
-          behavior: "smooth",
-        });
+      this.scrollIntoView({
+        block: "start",
+        behavior: "smooth",
       });
     }
   }
@@ -691,14 +640,6 @@ 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,

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

@@ -1,8 +1,8 @@
 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 { customElement, property, queryAll, state } from "lit/decorators";
+import { LitElement, css, html, 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";
@@ -11,7 +11,6 @@ import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-sortable";
-import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import type {
   AutomationClipboard,
@@ -23,7 +22,6 @@ import {
   PASTE_VALUE,
   showAddAutomationElementDialog,
 } from "../show-add-automation-element-dialog";
-import { automationRowsStyles } from "../styles";
 import "./ha-automation-condition-row";
 import type HaAutomationConditionRow from "./ha-automation-condition-row";
 
@@ -46,8 +44,6 @@ export default class HaAutomationCondition extends LitElement {
 
   @state() private _showReorder = false;
 
-  @state() private _rowSortSelected?: number;
-
   @state()
   @storage({
     key: "automationClipboard",
@@ -57,13 +53,8 @@ export default class HaAutomationCondition extends LitElement {
   })
   public _clipboard?: AutomationClipboard;
 
-  @queryAll("ha-automation-condition-row")
-  private _conditionRowElements?: HaAutomationConditionRow[];
-
   private _focusLastConditionOnChange = false;
 
-  private _focusConditionIndexOnChange?: number;
-
   private _conditionKeys = new WeakMap<Condition, string>();
 
   private _unsubMql?: () => void;
@@ -105,25 +96,16 @@ export default class HaAutomationCondition extends LitElement {
       fireEvent(this, "value-changed", {
         value: updatedConditions,
       });
-    } else if (
-      this._focusLastConditionOnChange ||
-      this._focusConditionIndexOnChange !== undefined
-    ) {
-      const mode = this._focusLastConditionOnChange ? "new" : "moved";
-
-      const row = this.shadowRoot!.querySelector<HaAutomationConditionRow>(
-        `ha-automation-condition-row:${mode === "new" ? "last-of-type" : `nth-of-type(${this._focusConditionIndexOnChange! + 1})`}`
-      )!;
-
+    } else if (this._focusLastConditionOnChange) {
       this._focusLastConditionOnChange = false;
-      this._focusConditionIndexOnChange = undefined;
-
+      const row = this.shadowRoot!.querySelector<HaAutomationConditionRow>(
+        "ha-automation-condition-row:last-of-type"
+      )!;
       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) ||
-            mode === "moved")
+          !CONDITION_BUILDING_BLOCKS.includes(row.condition.condition)
         ) {
           row.openSidebar();
           if (this.narrow) {
@@ -132,28 +114,20 @@ export default class HaAutomationCondition extends LitElement {
               behavior: "smooth",
             });
           }
-        }
-
-        if (mode === "new") {
+        } else if (!this.optionsInSidebar) {
           row.expand();
         }
-
-        if (!this.optionsInSidebar) {
-          row.focus();
-        }
+        row.focus();
       });
     }
   }
 
   public expandAll() {
-    this._conditionRowElements?.forEach((row) => {
-      row.expandAll();
-    });
-  }
-
-  public collapseAll() {
-    this._conditionRowElements?.forEach((row) => {
-      row.collapseAll();
+    const rows = this.shadowRoot!.querySelectorAll<HaAutomationConditionRow>(
+      "ha-automation-condition-row"
+    )!;
+    rows.forEach((row) => {
+      row.expand();
     });
   }
 
@@ -171,15 +145,13 @@ export default class HaAutomationCondition extends LitElement {
         @item-moved=${this._conditionMoved}
         @item-added=${this._conditionAdded}
         @item-removed=${this._conditionRemoved}
-        @item-cloned=${this._conditionCloned}
       >
-        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
+        <div class="conditions">
           ${repeat(
             this.conditions.filter((c) => typeof c === "object"),
             (condition) => this._getKey(condition),
             (cond, idx) => html`
               <ha-automation-condition-row
-                .root=${this.root}
                 .sortableData=${cond}
                 .index=${idx}
                 .first=${idx === 0}
@@ -195,20 +167,10 @@ export default class HaAutomationCondition extends LitElement {
                 .hass=${this.hass}
                 ?highlight=${this.highlightedConditions?.includes(cond)}
                 .optionsInSidebar=${this.optionsInSidebar}
-                .sortSelected=${this._rowSortSelected === idx}
-                @stop-sort-selection=${this._stopSortSelection}
               >
                 ${this._showReorder && !this.disabled
                   ? html`
-                      <div
-                        tabindex="0"
-                        class="handle ${this._rowSortSelected === idx
-                          ? "active"
-                          : ""}"
-                        slot="icons"
-                        @keydown=${this._handleDragKeydown}
-                        .index=${idx}
-                      >
+                      <div class="handle" slot="icons">
                         <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                       </div>
                     `
@@ -247,7 +209,7 @@ export default class HaAutomationCondition extends LitElement {
 
   private _addConditionDialog() {
     if (this.narrow) {
-      fireEvent(this, "request-close-sidebar");
+      fireEvent(this, "close-sidebar");
     }
     showAddAutomationElementDialog(this, {
       type: "condition",
@@ -297,27 +259,15 @@ export default class HaAutomationCondition extends LitElement {
   private _moveUp(ev) {
     ev.stopPropagation();
     const index = (ev.target as any).index;
-    if (!(ev.target as HaAutomationConditionRow).first) {
-      const newIndex = index - 1;
-      this._move(index, newIndex);
-      if (this._rowSortSelected === index) {
-        this._rowSortSelected = newIndex;
-      }
-      ev.target.focus();
-    }
+    const newIndex = index - 1;
+    this._move(index, newIndex);
   }
 
   private _moveDown(ev) {
     ev.stopPropagation();
     const index = (ev.target as any).index;
-    if (!(ev.target as HaAutomationConditionRow).last) {
-      const newIndex = index + 1;
-      this._move(index, newIndex);
-      if (this._rowSortSelected === index) {
-        this._rowSortSelected = newIndex;
-      }
-      ev.target.focus();
-    }
+    const newIndex = index + 1;
+    this._move(index, newIndex);
   }
 
   private _move(oldIndex: number, newIndex: number) {
@@ -337,11 +287,6 @@ 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,
@@ -349,9 +294,6 @@ 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
@@ -360,9 +302,6 @@ 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 });
   }
@@ -377,12 +316,7 @@ export default class HaAutomationCondition extends LitElement {
     // Ensure condition is removed even after update
     const conditions = this.conditions.filter((c) => c !== condition);
     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;
-    }
+    fireEvent(this, "close-sidebar");
   }
 
   private _conditionChanged(ev: CustomEvent) {
@@ -414,28 +348,44 @@ export default class HaAutomationCondition extends LitElement {
     });
   }
 
-  private _handleDragKeydown(ev: KeyboardEvent) {
-    if (ev.key === "Enter" || ev.key === " ") {
-      ev.stopPropagation();
-      this._rowSortSelected =
-        this._rowSortSelected === undefined
-          ? (ev.target as any).index
-          : undefined;
+  static styles = css`
+    .conditions {
+      padding: 16px 0 16px 16px;
+      margin: -16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
     }
-  }
-
-  private _stopSortSelection() {
-    this._rowSortSelected = undefined;
-  }
-
-  static styles = [
-    automationRowsStyles,
-    css`
-      :host([root]) .rows {
-        padding-right: 8px;
-      }
-    `,
-  ];
+    :host([root]) .conditions {
+      padding-right: 8px;
+    }
+    .sortable-ghost {
+      background: none;
+      border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
+    }
+    .sortable-drag {
+      background: none;
+    }
+    ha-automation-condition-row {
+      display: block;
+      scroll-margin-top: 48px;
+    }
+    .handle {
+      padding: 12px;
+      cursor: move; /* fallback if grab cursor is unsupported */
+      cursor: grab;
+    }
+    .handle ha-svg-icon {
+      pointer-events: none;
+      height: 24px;
+    }
+    .buttons {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      order: 1;
+    }
+  `;
 }
 
 declare global {

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

@@ -1,10 +1,9 @@
 import { html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { LogicalCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import "../ha-automation-condition";
-import type HaAutomationCondition from "../ha-automation-condition";
 import type { ConditionElement } from "../ha-automation-condition-row";
 
 @customElement("ha-automation-condition-logical")
@@ -23,9 +22,6 @@ export abstract class HaLogicalCondition
   @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar =
     false;
 
-  @query("ha-automation-condition")
-  private _conditionElement?: HaAutomationCondition;
-
   protected render() {
     return html`
       <ha-automation-condition
@@ -39,14 +35,6 @@ export abstract class HaLogicalCondition
     `;
   }
 
-  public expandAll() {
-    this._conditionElement?.expandAll?.();
-  }
-
-  public collapseAll() {
-    this._conditionElement?.collapseAll?.();
-  }
-
   private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     fireEvent(this, "value-changed", {

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

@@ -16,8 +16,6 @@ import {
   mdiStopCircleOutline,
   mdiTag,
   mdiTransitConnection,
-  mdiUnfoldLessHorizontal,
-  mdiUnfoldMoreHorizontal,
 } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
@@ -27,6 +25,7 @@ import { classMap } from "lit/directives/class-map";
 import { transform } from "../../../common/decorators/transform";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
+import { computeRTL } from "../../../common/util/compute_rtl";
 import { promiseTimeout } from "../../../common/util/promise-timeout";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
@@ -371,30 +370,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
             <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
           </ha-list-item>
 
-          ${!useBlueprint
-            ? html`
-                <ha-list-item graphic="icon" @click=${this._collapseAll}>
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiUnfoldLessHorizontal}
-                  ></ha-svg-icon>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.collapse_all"
-                  )}
-                </ha-list-item>
-
-                <ha-list-item graphic="icon" @click=${this._expandAll}>
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiUnfoldMoreHorizontal}
-                  ></ha-svg-icon>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.expand_all"
-                  )}
-                </ha-list-item>
-              `
-            : nothing}
-
           <li divider role="separator"></li>
 
           <ha-list-item
@@ -432,9 +407,69 @@ 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>
+                <div
+                  class=${classMap({
+                    rtl: computeRTL(this.hass),
+                  })}
+                >
                   ${useBlueprint
                     ? html`
                         <blueprint-automation-editor
@@ -443,7 +478,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                           .isWide=${this.isWide}
                           .stateObj=${stateObj}
                           .config=${this._config}
-                          .disabled=${this._readOnly}
+                          .disabled=${Boolean(this._readOnly)}
                           .saving=${this._saving}
                           .dirty=${this._dirty}
                           @value-changed=${this._valueChanged}
@@ -457,94 +492,13 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                           .isWide=${this.isWide}
                           .stateObj=${stateObj}
                           .config=${this._config}
-                          .disabled=${this._readOnly}
+                          .disabled=${Boolean(this._readOnly)}
                           .dirty=${this._dirty}
                           .saving=${this._saving}
                           @value-changed=${this._valueChanged}
                           @save-automation=${this._handleSaveAutomation}
                           @editor-save=${this._handleSaveAutomation}
-                        >
-                          <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>
+                        ></manual-automation-editor>
                       `}
                 </div>
               `
@@ -567,7 +521,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
                           </ha-button>
                         </ha-alert>
                       `
-                    : nothing}
+                    : ""}
                   <ha-yaml-editor
                     copy-clipboard
                     .hass=${this.hass}
@@ -1149,14 +1103,6 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     return this._confirmUnsavedChanged();
   }
 
-  private _collapseAll() {
-    this._manualEditor?.collapseAll();
-  }
-
-  private _expandAll() {
-    this._manualEditor?.expandAll();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -1181,23 +1127,20 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
           display: block;
         }
 
-        :not(.yaml-mode) > .alert-wrapper {
-          position: sticky;
-          top: -24px;
-          margin-top: -24px;
-          z-index: 100;
+        :not(.yaml-mode) > .error-wrapper {
+          position: absolute;
+          top: 4px;
+          z-index: 3;
           width: 100%;
           display: flex;
           flex-direction: column;
           align-items: center;
-          gap: 8px;
         }
 
-        :not(.yaml-mode) > .alert-wrapper ha-alert {
+        :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);
-          margin-bottom: 0;
         }
 
         manual-automation-editor {

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

@@ -175,7 +175,7 @@ export default class HaAutomationSidebar extends LitElement {
       return "option";
     }
 
-    if ((this.config as ActionSidebarConfig)?.config.action) {
+    if ((this.config as ActionSidebarConfig)?.config) {
       return "action";
     }
 
@@ -208,7 +208,6 @@ export default class HaAutomationSidebar extends LitElement {
 
   static styles = css`
     :host {
-      outline: none;
       height: 100%;
       --ha-card-border-radius: var(
         --ha-dialog-border-radius,

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

@@ -1,7 +1,7 @@
 import { mdiContentSave, mdiHelpCircle } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { load } from "js-yaml";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -18,12 +18,6 @@ import {
 import { ensureArray } from "../../../common/array/ensure-array";
 import { canOverrideAlphanumericInput } from "../../../common/dom/can-override-input";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { constructUrlCurrentPath } from "../../../common/url/construct-url";
-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";
@@ -45,13 +39,10 @@ import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import "./action/ha-automation-action";
-import type HaAutomationAction from "./action/ha-automation-action";
 import "./condition/ha-automation-condition";
-import type HaAutomationCondition from "./condition/ha-automation-condition";
 import "./ha-automation-sidebar";
-import type HaAutomationSidebar from "./ha-automation-sidebar";
 import { showPasteReplaceDialog } from "./paste-replace-dialog/show-dialog-paste-replace";
-import { manualEditorStyles, saveFabStyles } from "./styles";
+import { saveFabStyles } from "./styles";
 import "./trigger/ha-automation-trigger";
 
 const baseConfigStruct = object({
@@ -96,8 +87,6 @@ export class HaManualAutomationEditor extends LitElement {
   @query(".content")
   private _contentElement?: HTMLDivElement;
 
-  @query("ha-automation-sidebar") private _sidebarElement?: HaAutomationSidebar;
-
   private _previousConfig?: ManualAutomationConfig;
 
   public connectedCallback() {
@@ -112,6 +101,20 @@ 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"
@@ -156,7 +159,6 @@ export class HaManualAutomationEditor extends LitElement {
         .disabled=${this.disabled || this.saving}
         .narrow=${this.narrow}
         @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._closeSidebar}
         @close-sidebar=${this._handleCloseSidebar}
         root
         sidebar
@@ -203,7 +205,6 @@ export class HaManualAutomationEditor extends LitElement {
         .disabled=${this.disabled || this.saving}
         .narrow=${this.narrow}
         @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._closeSidebar}
         @close-sidebar=${this._handleCloseSidebar}
         root
         sidebar
@@ -245,7 +246,6 @@ export class HaManualAutomationEditor extends LitElement {
         .highlightedActions=${this._pastedConfig?.actions || []}
         @value-changed=${this._actionChanged}
         @open-sidebar=${this._openSidebar}
-        @request-close-sidebar=${this._closeSidebar}
         @close-sidebar=${this._handleCloseSidebar}
         .hass=${this.hass}
         .narrow=${this.narrow}
@@ -258,17 +258,9 @@ export class HaManualAutomationEditor extends LitElement {
 
   protected render() {
     return html`
-      <div
-        class=${classMap({
-          "split-view": true,
-          "sidebar-hidden": !this._sidebarConfig,
-        })}
-      >
+      <div class="split-view">
         <div class="content-wrapper">
-          <div class="content">
-            <slot name="alerts"></slot>
-            ${this._renderContent()}
-          </div>
+          <div class="content">${this._renderContent()}</div>
           <ha-fab
             slot="fab"
             class=${this.dirty ? "dirty" : ""}
@@ -281,11 +273,10 @@ export class HaManualAutomationEditor extends LitElement {
           </ha-fab>
         </div>
         <ha-automation-sidebar
-          tabindex="-1"
           class=${classMap({
             sidebar: true,
+            hidden: !this._sidebarConfig,
             overlay: !this.isWide && !this.narrow,
-            rtl: computeRTL(this.hass),
           })}
           .isWide=${this.isWide}
           .hass=${this.hass}
@@ -298,30 +289,10 @@ export class HaManualAutomationEditor extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues): void {
-    super.firstUpdated(changedProps);
-    const expanded = extractSearchParam("expanded");
-    if (expanded === "1") {
-      this._clearParam("expanded");
-      this.expandAll();
-    }
-  }
-
-  private _clearParam(param: string) {
-    window.history.replaceState(
-      null,
-      "",
-      constructUrlCurrentPath(removeSearchParam(param))
-    );
-  }
-
-  private async _openSidebar(ev: CustomEvent<SidebarConfig>) {
+  private _openSidebar(ev: CustomEvent<SidebarConfig>) {
     // deselect previous selected row
     this._sidebarConfig?.close?.();
     this._sidebarConfig = ev.detail;
-
-    await this._sidebarElement?.updateComplete;
-    this._sidebarElement?.focus();
   }
 
   private _sidebarConfigChanged(ev: CustomEvent<{ value: SidebarConfig }>) {
@@ -338,7 +309,9 @@ export class HaManualAutomationEditor extends LitElement {
 
   private _closeSidebar() {
     if (this._sidebarConfig) {
-      this._sidebarConfig?.close();
+      const closeRow = this._sidebarConfig?.close;
+      this._sidebarConfig = undefined;
+      closeRow?.();
     }
   }
 
@@ -375,6 +348,15 @@ 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");
@@ -590,29 +572,79 @@ export class HaManualAutomationEditor extends LitElement {
     });
   }
 
-  private _getCollapsableElements() {
-    return this.shadowRoot!.querySelectorAll<
-      HaAutomationAction | HaAutomationCondition
-    >("ha-automation-action, ha-automation-condition");
-  }
-
-  public expandAll() {
-    this._getCollapsableElements().forEach((element) => {
-      element.expandAll();
-    });
-  }
-
-  public collapseAll() {
-    this._getCollapsableElements().forEach((element) => {
-      element.collapseAll();
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       saveFabStyles,
-      manualEditorStyles,
       css`
+        :host {
+          display: block;
+        }
+
+        .split-view {
+          display: flex;
+          flex-direction: row;
+          height: 100%;
+          position: relative;
+          gap: 16px;
+        }
+
+        .content-wrapper {
+          position: relative;
+          flex: 6;
+        }
+
+        .content {
+          padding: 32px 16px 64px 0;
+          height: calc(100vh - 153px);
+          height: calc(100dvh - 153px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+
+        .sidebar {
+          padding: 12px 0;
+          flex: 4;
+          height: calc(100vh - 81px);
+          height: calc(100dvh - 81px);
+          width: 40%;
+        }
+        .sidebar.hidden {
+          border-color: transparent;
+          border-width: 0;
+          overflow: hidden;
+          flex: 0;
+          visibility: hidden;
+        }
+
+        .sidebar.overlay {
+          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);
+        }
+
+        @media all and (max-width: 870px) {
+          .split-view {
+            gap: 0;
+            margin-right: -8px;
+          }
+          .sidebar {
+            height: 0;
+            width: 0;
+            flex: 0;
+          }
+        }
+
+        .sidebar.overlay.hidden {
+          width: 0;
+        }
+
+        .description {
+          margin: 0;
+        }
         p {
           margin-top: 0;
         }
@@ -628,7 +660,10 @@ export class HaManualAutomationEditor extends LitElement {
         .header .name {
           font-weight: var(--ha-font-weight-normal);
           flex: 1;
-          margin-bottom: 8px;
+          margin-bottom: 16px;
+        }
+        .header a {
+          color: var(--secondary-text-color);
         }
         .header .small {
           font-size: small;
@@ -636,8 +671,9 @@ export class HaManualAutomationEditor extends LitElement {
           line-height: 0;
         }
 
-        .description {
-          margin-top: 16px;
+        ha-alert {
+          display: block;
+          margin-bottom: 16px;
         }
       `,
     ];
@@ -651,7 +687,6 @@ declare global {
 
   interface HASSDomEvents {
     "open-sidebar": SidebarConfig;
-    "request-close-sidebar": undefined;
     "close-sidebar": undefined;
   }
 }

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

@@ -9,7 +9,7 @@ import {
 } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ensureArray } from "../../../../common/array/ensure-array";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -17,7 +17,6 @@ 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";
@@ -38,18 +37,14 @@ import {
 } from "../../../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../../../types";
 import "../action/ha-automation-action";
-import type HaAutomationAction from "../action/ha-automation-action";
 import "../condition/ha-automation-condition";
-import type HaAutomationCondition from "../condition/ha-automation-condition";
-import { editorStyles, indentStyle, rowStyles } from "../styles";
+import { editorStyles, rowStyles } from "../styles";
 
 @customElement("ha-automation-option-row")
 export default class HaAutomationOptionRow extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public option?: Option;
-
-  @property({ attribute: false }) public defaultActions?: Action[];
+  @property({ attribute: false }) public option!: Option;
 
   @property({ type: Boolean }) public narrow = false;
 
@@ -64,28 +59,16 @@ 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;
 
-  @state() private _collapsed = true;
+  @state() private _collapsed = false;
 
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
-  @query("ha-automation-condition")
-  private _conditionElement?: HaAutomationCondition;
-
-  @query("ha-automation-action")
-  private _actionElement?: HaAutomationAction;
-
-  @query("ha-automation-row")
-  private _automationRowElement?: HaAutomationRow;
-
   private _expandedChanged(ev) {
     if (ev.currentTarget.id !== "option") {
       return;
@@ -94,7 +77,7 @@ export default class HaAutomationOptionRow extends LitElement {
   }
 
   private _getDescription() {
-    const conditions = ensureArray<Condition | string>(this.option!.conditions);
+    const conditions = ensureArray<Condition | string>(this.option.conditions);
     if (!conditions || conditions.length === 0) {
       return this.hass.localize(
         "ui.panel.config.automation.editor.actions.type.choose.no_conditions"
@@ -118,36 +101,30 @@ export default class HaAutomationOptionRow extends LitElement {
   private _renderRow() {
     return html`
       <h3 slot="header">
-        ${this.option
-          ? `${this.hass.localize(
-              "ui.panel.config.automation.editor.actions.type.choose.option",
-              { number: this.index + 1 }
-            )}: ${this.option.alias || (this._expanded ? "" : this._getDescription())}`
-          : this.hass.localize(
-              "ui.panel.config.automation.editor.actions.type.choose.default"
-            )}
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.type.choose.option",
+          { number: this.index + 1 }
+        )}:
+        ${this.option.alias || (this._expanded ? "" : this._getDescription())}
       </h3>
 
       <slot name="icons" slot="icons"></slot>
 
-      ${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"
-                .label=${this.hass.localize("ui.common.menu")}
-                .path=${mdiDotsVertical}
-              ></ha-icon-button>
+      <ha-md-button-menu
+        slot="icons"
+        @click=${preventDefaultStopPropagation}
+        @closed=${stopPropagation}
+        @keydown=${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-menu-item
                 @click=${this._renameOption}
                 .disabled=${this.disabled}
@@ -155,59 +132,56 @@ export default class HaAutomationOptionRow extends LitElement {
                 ${this.hass.localize(
                   "ui.panel.config.automation.editor.actions.rename"
                 )}
-                <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+                <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></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._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>
 
-              <ha-md-menu-item
-                @click=${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
+          @click=${this._moveUp}
+          .disabled=${this.disabled || this.first}
+        >
+          ${this.hass.localize("ui.panel.config.automation.editor.move_up")}
+          <ha-svg-icon slot="graphic" .path=${mdiArrowUp}></ha-svg-icon>
+        </ha-md-menu-item>
 
-              <ha-md-menu-item
-                @click=${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
+          @click=${this._moveDown}
+          .disabled=${this.disabled || this.last}
+        >
+          ${this.hass.localize("ui.panel.config.automation.editor.move_down")}
+          <ha-svg-icon slot="graphic" .path=${mdiArrowDown}></ha-svg-icon>
+        </ha-md-menu-item>
+
+        <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>
+      </ha-md-button-menu>
 
-              <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}
       ${!this.optionsInSidebar ? this._renderContent() : nothing}
     `;
   }
@@ -216,42 +190,31 @@ 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,
+        hidden: this._collapsed,
       })}
     >
-      ${this.option
-        ? html`
-            <h4 class="top">
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.type.choose.conditions"
-              )}:
-            </h4>
-            <ha-automation-condition
-              .conditions=${ensureArray<string | Condition>(
-                this.option.conditions
-              )}
-              .disabled=${this.disabled}
-              .hass=${this.hass}
-              .narrow=${this.narrow}
-              @value-changed=${this._conditionChanged}
-              .optionsInSidebar=${this.optionsInSidebar}
-            ></ha-automation-condition>
-          `
-        : nothing}
-      <h4 class=${this.option ? "" : "top"}>
+      <h4>
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.type.choose.conditions"
+        )}:
+      </h4>
+      <ha-automation-condition
+        .conditions=${ensureArray<string | Condition>(this.option.conditions)}
+        .disabled=${this.disabled}
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        @value-changed=${this._conditionChanged}
+        .optionsInSidebar=${this.optionsInSidebar}
+      ></ha-automation-condition>
+      <h4>
         ${this.hass.localize(
           "ui.panel.config.automation.editor.actions.type.choose.sequence"
         )}:
       </h4>
       <ha-automation-action
-        .actions=${(this.option
-          ? ensureArray(this.option.sequence) || []
-          : this.defaultActions
-            ? ensureArray(this.defaultActions) || []
-            : []) as Action[]}
+        .actions=${ensureArray(this.option.sequence) || []}
         .disabled=${this.disabled}
         .hass=${this.hass}
         .narrow=${this.narrow}
@@ -262,7 +225,7 @@ export default class HaAutomationOptionRow extends LitElement {
   }
 
   protected render() {
-    if (!this.option && !this.defaultActions) return nothing;
+    if (!this.option) return nothing;
 
     return html`
       <ha-card outlined class=${this._selected ? "selected" : ""}>
@@ -273,7 +236,6 @@ 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`
@@ -291,9 +253,9 @@ export default class HaAutomationOptionRow extends LitElement {
     `;
   }
 
-  private _duplicateOption = () => {
+  private _duplicateOption() {
     fireEvent(this, "duplicate");
-  };
+  }
 
   private _moveUp() {
     fireEvent(this, "move-up");
@@ -335,7 +297,7 @@ export default class HaAutomationOptionRow extends LitElement {
       ),
       inputType: "string",
       placeholder: capitalizeFirstLetter(this._getDescription()),
-      defaultValue: this.option!.alias,
+      defaultValue: this.option.alias,
       confirmText: this.hass.localize("ui.common.submit"),
     });
     if (alias !== null) {
@@ -361,9 +323,6 @@ export default class HaAutomationOptionRow extends LitElement {
   }
 
   private _actionChanged(ev: CustomEvent) {
-    if (this.defaultActions) {
-      return;
-    }
     ev.stopPropagation();
     const actions = ev.detail.value as Action[];
     const value = { ...this.option, sequence: actions };
@@ -394,81 +353,35 @@ export default class HaAutomationOptionRow extends LitElement {
       },
       toggleYamlMode: () => false, // no yaml mode for options
       delete: this._removeOption,
-      duplicate: this._duplicateOption,
-      defaultOption: !!this.defaultActions,
     } satisfies OptionSidebarConfig);
     this._selected = true;
-    this._collapsed = false;
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
-        this.scrollIntoView({
-          block: "start",
-          behavior: "smooth",
-        });
+      this.scrollIntoView({
+        block: "start",
+        behavior: "smooth",
       });
     }
   }
 
   public expand() {
-    if (this.optionsInSidebar) {
-      this._collapsed = false;
-      return;
-    }
-
     this.updateComplete.then(() => {
       this.shadowRoot!.querySelector("ha-expansion-panel")!.expanded = true;
     });
   }
 
-  public collapse() {
-    this._collapsed = true;
-  }
-
-  public expandAll() {
-    this.expand();
-
-    this._conditionElement?.expandAll();
-    this._actionElement?.expandAll();
-  }
-
-  public collapseAll() {
-    this.collapse();
-
-    this._conditionElement?.collapseAll();
-    this._actionElement?.collapseAll();
-  }
-
   private _toggleCollapse() {
     this._collapsed = !this._collapsed;
   }
 
-  public isSelected() {
-    return this._selected;
-  }
-
-  public focus() {
-    this._automationRowElement?.focus();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       rowStyles,
       editorStyles,
-      indentStyle,
       css`
         li[role="separator"] {
           border-bottom-color: var(--divider-color);
         }
-        h4 {
-          color: var(--ha-color-text-secondary);
-        }
-        h4 {
-          margin-bottom: 8px;
-        }
-        h4.top {
-          margin-top: 0;
-        }
       `,
     ];
   }

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

@@ -2,7 +2,7 @@ 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 { customElement, property, queryAll, state } from "lit/decorators";
+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";
@@ -10,12 +10,10 @@ 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";
 import type { HomeAssistant } from "../../../../types";
-import { automationRowsStyles } from "../styles";
 import "./ha-automation-option-row";
 import type HaAutomationOptionRow from "./ha-automation-option-row";
 
@@ -32,13 +30,8 @@ export default class HaAutomationOption extends LitElement {
   @property({ type: Boolean, attribute: "sidebar" }) public optionsInSidebar =
     false;
 
-  @property({ type: Boolean, attribute: "show-default" })
-  public showDefaultActions = false;
-
   @state() private _showReorder = false;
 
-  @state() private _rowSortSelected?: number;
-
   @state()
   @storage({
     key: "automationClipboard",
@@ -48,13 +41,8 @@ export default class HaAutomationOption extends LitElement {
   })
   public _clipboard?: AutomationClipboard;
 
-  @queryAll("ha-automation-option-row")
-  private _optionRowElements?: HaAutomationOptionRow[];
-
   private _focusLastOptionOnChange = false;
 
-  private _focusOptionIndexOnChange?: number;
-
   private _optionsKeys = new WeakMap<Option, string>();
 
   private _unsubMql?: () => void;
@@ -83,9 +71,8 @@ export default class HaAutomationOption extends LitElement {
         @item-moved=${this._optionMoved}
         @item-added=${this._optionAdded}
         @item-removed=${this._optionRemoved}
-        @item-cloned=${this._optionCloned}
       >
-        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
+        <div class="options">
           ${repeat(
             this.options,
             (option) => this._getKey(option),
@@ -104,20 +91,10 @@ 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
                   ? html`
-                      <div
-                        tabindex="0"
-                        class="handle ${this._rowSortSelected === idx
-                          ? "active"
-                          : ""}"
-                        slot="icons"
-                        @keydown=${this._handleDragKeydown}
-                        .index=${idx}
-                      >
+                      <div class="handle" slot="icons">
                         <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                       </div>
                     `
@@ -137,19 +114,6 @@ export default class HaAutomationOption extends LitElement {
                 "ui.panel.config.automation.editor.actions.type.choose.add_option"
               )}
             </ha-button>
-            ${!this.showDefaultActions
-              ? html`<ha-button
-                  appearance="plain"
-                  size="small"
-                  .disabled=${this.disabled}
-                  @click=${this._showDefaultActions}
-                >
-                  <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.actions.type.choose.add_default"
-                  )}
-                </ha-button>`
-              : nothing}
           </div>
         </div>
       </ha-sortable>
@@ -159,47 +123,33 @@ export default class HaAutomationOption extends LitElement {
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
 
-    if (
-      changedProps.has("options") &&
-      (this._focusLastOptionOnChange ||
-        this._focusOptionIndexOnChange !== undefined)
-    ) {
-      const mode = this._focusLastOptionOnChange ? "new" : "moved";
+    if (changedProps.has("options") && this._focusLastOptionOnChange) {
+      this._focusLastOptionOnChange = false;
 
       const row = this.shadowRoot!.querySelector<HaAutomationOptionRow>(
-        `ha-automation-option-row:${mode === "new" ? "last-of-type" : `nth-of-type(${this._focusOptionIndexOnChange! + 1})`}`
+        "ha-automation-option-row:last-of-type"
       )!;
-
-      this._focusLastOptionOnChange = false;
-      this._focusOptionIndexOnChange = undefined;
-
       row.updateComplete.then(() => {
-        if (this.narrow) {
+        if (!this.optionsInSidebar) {
+          row.expand();
+        } else if (this.narrow) {
           row.scrollIntoView({
             block: "start",
             behavior: "smooth",
           });
         }
-
-        if (mode === "new") {
-          row.expand();
-        }
-
-        if (this.optionsInSidebar) {
-          row.openSidebar();
-        } else {
-          row.focus();
-        }
+        row.focus();
       });
     }
   }
 
   public expandAll() {
-    this._optionRowElements?.forEach((row) => row.expandAll());
-  }
-
-  public collapseAll() {
-    this._optionRowElements?.forEach((row) => row.collapseAll());
+    const rows = this.shadowRoot!.querySelectorAll<HaAutomationOptionRow>(
+      "ha-automation-option-row"
+    )!;
+    rows.forEach((row) => {
+      row.expand();
+    });
   }
 
   private _addOption = () => {
@@ -219,27 +169,15 @@ export default class HaAutomationOption extends LitElement {
   private _moveUp(ev) {
     ev.stopPropagation();
     const index = (ev.target as any).index;
-    if (!(ev.target as HaAutomationOptionRow).first) {
-      const newIndex = index - 1;
-      this._move(index, newIndex);
-      if (this._rowSortSelected === index) {
-        this._rowSortSelected = newIndex;
-      }
-      ev.target.focus();
-    }
+    const newIndex = index - 1;
+    this._move(index, newIndex);
   }
 
   private _moveDown(ev) {
     ev.stopPropagation();
     const index = (ev.target as any).index;
-    if (!(ev.target as HaAutomationOptionRow).last) {
-      const newIndex = index + 1;
-      this._move(index, newIndex);
-      if (this._rowSortSelected === index) {
-        this._rowSortSelected = newIndex;
-      }
-      ev.target.focus();
-    }
+    const newIndex = index + 1;
+    this._move(index, newIndex);
   }
 
   private _move(oldIndex: number, newIndex: number) {
@@ -259,12 +197,6 @@ 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,
@@ -272,9 +204,6 @@ 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 });
   }
@@ -291,12 +220,6 @@ export default class HaAutomationOption extends LitElement {
     fireEvent(this, "value-changed", { value: options });
   }
 
-  private _optionCloned(ev: CustomEvent<HaSortableClonedEventData>) {
-    if (ev.detail.item.isSelected()) {
-      ev.detail.item.option["ha-automation-row-selected"] = true;
-    }
-  }
-
   private _optionChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const options = [...this.options];
@@ -324,40 +247,45 @@ export default class HaAutomationOption extends LitElement {
     });
   }
 
-  private _showDefaultActions = () => {
-    fireEvent(this, "show-default-actions");
-  };
-
-  private _handleDragKeydown(ev: KeyboardEvent) {
-    if (ev.key === "Enter" || ev.key === " ") {
-      ev.stopPropagation();
-      this._rowSortSelected =
-        this._rowSortSelected === undefined
-          ? (ev.target as any).index
-          : undefined;
+  static styles = css`
+    .options {
+      padding: 16px 0 16px 16px;
+      margin: -16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
     }
-  }
-
-  private _stopSortSelection() {
-    this._rowSortSelected = undefined;
-  }
-
-  static styles = [
-    automationRowsStyles,
-    css`
-      :host([root]) .rows {
-        padding-right: 8px;
-      }
-    `,
-  ];
+    .sortable-ghost {
+      background: none;
+      border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
+    }
+    .sortable-drag {
+      background: none;
+    }
+    ha-automation-option-row {
+      display: block;
+      scroll-margin-top: 48px;
+    }
+    .handle {
+      padding: 12px;
+      cursor: move; /* fallback if grab cursor is unsupported */
+      cursor: grab;
+    }
+    .handle ha-svg-icon {
+      pointer-events: none;
+      height: 24px;
+    }
+    .buttons {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      order: 1;
+    }
+  `;
 }
 
 declare global {
   interface HTMLElementTagNameMap {
     "ha-automation-option": HaAutomationOption;
   }
-
-  interface HASSDomEvents {
-    "show-default-actions": undefined;
-  }
 }

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

@@ -1,15 +1,11 @@
 import {
-  mdiContentCopy,
-  mdiContentCut,
-  mdiContentDuplicate,
   mdiDelete,
-  mdiPlay,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
@@ -23,7 +19,6 @@ import type { HomeAssistant } from "../../../../types";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { getAutomationActionType } from "../action/ha-automation-action-row";
 import { getRepeatType } from "../action/types/ha-automation-action-repeat";
-import { sidebarEditorStyles } from "../styles";
 import "../trigger/ha-automation-trigger-editor";
 import "./ha-automation-sidebar-card";
 
@@ -52,25 +47,23 @@ export default class HaAutomationSidebarAction extends LitElement {
       if (this.config) {
         this.yamlMode = this.config.yamlMode;
         if (this.yamlMode) {
-          this.editor?.yamlEditor?.setValue(this.config.config.action);
+          this.editor?.yamlEditor?.setValue(this.config.config);
         }
       }
     }
   }
 
   protected render() {
-    const actionConfig = this.config.config.action;
-
     const disabled =
       this.disabled ||
-      ("enabled" in actionConfig && actionConfig.enabled === false);
+      ("enabled" in this.config.config && this.config.config.enabled === false);
 
-    const actionType = getAutomationActionType(actionConfig);
+    const actionType = getAutomationActionType(this.config.config);
 
     const type =
       actionType !== "repeat"
         ? actionType
-        : `repeat_${getRepeatType((actionConfig as RepeatAction).repeat)}`;
+        : `repeat_${getRepeatType((this.config.config as RepeatAction).repeat)}`;
 
     const isBuildingBlock = ACTION_BUILDING_BLOCKS.includes(type || "");
 
@@ -98,11 +91,6 @@ export default class HaAutomationSidebarAction extends LitElement {
     >
       <span slot="title">${title}</span>
       <span slot="subtitle">${subtitle}</span>
-
-      <ha-md-menu-item slot="menu-items" .clickAction=${this.config.run}>
-        ${this.hass.localize("ui.panel.config.automation.editor.actions.run")}
-        <ha-svg-icon slot="start" .path=${mdiPlay}></ha-svg-icon>
-      </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.rename}
@@ -113,37 +101,6 @@ export default class HaAutomationSidebarAction extends LitElement {
         )}
         <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
       </ha-md-menu-item>
-      <ha-md-divider
-        slot="menu-items"
-        role="separator"
-        tabindex="-1"
-      ></ha-md-divider>
-      <ha-md-menu-item
-        slot="menu-items"
-        .clickAction=${this.config.duplicate}
-        .disabled=${this.disabled}
-      >
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.duplicate"
-        )}
-        <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
-      </ha-md-menu-item>
-      <ha-md-menu-item
-        slot="menu-items"
-        .clickAction=${this.config.copy}
-        .disabled=${this.disabled}
-      >
-        ${this.hass.localize("ui.panel.config.automation.editor.triggers.copy")}
-        <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-      </ha-md-menu-item>
-      <ha-md-menu-item
-        slot="menu-items"
-        .clickAction=${this.config.cut}
-        .disabled=${this.disabled}
-      >
-        ${this.hass.localize("ui.panel.config.automation.editor.triggers.cut")}
-        <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
-      </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this._toggleYamlMode}
@@ -184,7 +141,7 @@ export default class HaAutomationSidebarAction extends LitElement {
         : html`<ha-automation-action-editor
             class="sidebar-editor"
             .hass=${this.hass}
-            .action=${actionConfig}
+            .action=${this.config.config}
             .yamlMode=${this.yamlMode}
             .uiSupported=${this.config.uiSupported}
             @value-changed=${this._valueChangedSidebar}
@@ -212,9 +169,7 @@ export default class HaAutomationSidebarAction extends LitElement {
       fireEvent(this, "value-changed", {
         value: {
           ...this.config,
-          config: {
-            action: ev.detail.value,
-          },
+          config: ev.detail.value,
         },
       });
     }
@@ -224,7 +179,14 @@ export default class HaAutomationSidebarAction extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  static styles = sidebarEditorStyles;
+  static styles = css`
+    .sidebar-editor {
+      padding-top: 64px;
+    }
+    .description {
+      padding-top: 16px;
+    }
+  `;
 }
 
 declare global {

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

@@ -67,13 +67,10 @@ 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"

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

@@ -1,15 +1,11 @@
 import {
-  mdiContentCopy,
-  mdiContentCut,
-  mdiContentDuplicate,
   mdiDelete,
-  mdiFlask,
   mdiPlayCircleOutline,
   mdiPlaylistEdit,
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
@@ -18,7 +14,6 @@ import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
 import type { HomeAssistant } from "../../../../types";
 import "../condition/ha-automation-condition-editor";
 import type HaAutomationConditionEditor from "../condition/ha-automation-condition-editor";
-import { sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
 
 @customElement("ha-automation-sidebar-condition")
@@ -85,12 +80,6 @@ export default class HaAutomationSidebarCondition extends LitElement {
     >
       <span slot="title">${title}</span>
       <span slot="subtitle">${subtitle}</span>
-      <ha-md-menu-item slot="menu-items" .clickAction=${this.config.test}>
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.conditions.test"
-        )}
-        <ha-svg-icon slot="start" .path=${mdiFlask}></ha-svg-icon>
-      </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this.config.rename}
@@ -101,41 +90,6 @@ export default class HaAutomationSidebarCondition extends LitElement {
         )}
         <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
       </ha-md-menu-item>
-
-      <ha-md-divider
-        slot="menu-items"
-        role="separator"
-        tabindex="-1"
-      ></ha-md-divider>
-
-      <ha-md-menu-item
-        slot="menu-items"
-        .clickAction=${this.config.duplicate}
-        .disabled=${this.disabled}
-      >
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.duplicate"
-        )}
-        <ha-svg-icon slot="start" .path=${mdiContentDuplicate}></ha-svg-icon>
-      </ha-md-menu-item>
-
-      <ha-md-menu-item
-        slot="menu-items"
-        .clickAction=${this.config.copy}
-        .disabled=${this.disabled}
-      >
-        ${this.hass.localize("ui.panel.config.automation.editor.triggers.copy")}
-        <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-      </ha-md-menu-item>
-
-      <ha-md-menu-item
-        slot="menu-items"
-        .clickAction=${this.config.cut}
-        .disabled=${this.disabled}
-      >
-        ${this.hass.localize("ui.panel.config.automation.editor.triggers.cut")}
-        <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
-      </ha-md-menu-item>
       <ha-md-menu-item
         slot="menu-items"
         .clickAction=${this._toggleYamlMode}
@@ -182,7 +136,6 @@ export default class HaAutomationSidebarCondition extends LitElement {
             @value-changed=${this._valueChangedSidebar}
             .disabled=${this.disabled}
             @ui-mode-not-available=${this._handleUiModeNotAvailable}
-            sidebar
           ></ha-automation-condition-editor> `}
     </ha-automation-sidebar-card>`;
   }
@@ -213,7 +166,14 @@ export default class HaAutomationSidebarCondition extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  static styles = sidebarEditorStyles;
+  static styles = css`
+    .sidebar-editor {
+      padding-top: 64px;
+    }
+    .description {
+      padding-top: 16px;
+    }
+  `;
 }
 
 declare global {

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

@@ -1,10 +1,9 @@
-import { mdiContentDuplicate, mdiDelete, mdiRenameBox } from "@mdi/js";
-import { html, LitElement } from "lit";
+import { mdiDelete, mdiRenameBox } from "@mdi/js";
+import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import type { OptionSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
-import { sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
 
 @customElement("ha-automation-sidebar-option")
@@ -30,11 +29,11 @@ export default class HaAutomationSidebarOption extends LitElement {
     );
 
     const title = this.hass.localize(
-      `ui.panel.config.automation.editor.actions.type.choose.${this.config.defaultOption ? "default_" : ""}option_label`
+      "ui.panel.config.automation.editor.actions.type.choose.option_label"
     );
 
     const description = this.hass.localize(
-      `ui.panel.config.automation.editor.actions.type.choose.${this.config.defaultOption ? "default_" : ""}option_description`
+      "ui.panel.config.automation.editor.actions.type.choose.option_description"
     );
 
     return html`<ha-automation-sidebar-card
@@ -44,56 +43,44 @@ export default class HaAutomationSidebarOption extends LitElement {
     >
       <span slot="title">${title}</span>
       <span slot="subtitle">${subtitle}</span>
-      ${this.config.defaultOption
-        ? html`<span slot="overflow-menu"></span>`
-        : html`
-            <ha-md-menu-item
-              slot="menu-items"
-              .clickAction=${this.config.rename}
-              .disabled=${!!disabled}
-            >
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.triggers.rename"
-              )}
-              <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-            </ha-md-menu-item>
-
-            <ha-md-menu-item
-              slot="menu-items"
-              @click=${this.config.duplicate}
-              .disabled=${this.disabled}
-            >
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.duplicate"
-              )}
-              <ha-svg-icon
-                slot="start"
-                .path=${mdiContentDuplicate}
-              ></ha-svg-icon>
-            </ha-md-menu-item>
-            <ha-md-divider
-              slot="menu-items"
-              role="separator"
-              tabindex="-1"
-            ></ha-md-divider>
-            <ha-md-menu-item
-              slot="menu-items"
-              .clickAction=${this.config.delete}
-              .disabled=${this.disabled}
-              class="warning"
-            >
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.type.choose.remove_option"
-              )}
-              <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-            </ha-md-menu-item>
-          `}
-
+      <ha-md-menu-item
+        slot="menu-items"
+        .clickAction=${this.config.rename}
+        .disabled=${!!disabled}
+      >
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.rename"
+        )}
+        <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
+      </ha-md-menu-item>
+      <ha-md-divider
+        slot="menu-items"
+        role="separator"
+        tabindex="-1"
+      ></ha-md-divider>
+      <ha-md-menu-item
+        slot="menu-items"
+        .clickAction=${this.config.delete}
+        .disabled=${this.disabled}
+        class="warning"
+      >
+        ${this.hass.localize(
+          "ui.panel.config.automation.editor.actions.type.choose.remove_option"
+        )}
+        <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+      </ha-md-menu-item>
       <div class="description">${description}</div>
     </ha-automation-sidebar-card>`;
   }
 
-  static styles = sidebarEditorStyles;
+  static styles = css`
+    .sidebar-editor {
+      padding-top: 64px;
+    }
+    .description {
+      padding-top: 16px;
+    }
+  `;
 }
 
 declare global {

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

@@ -1,5 +1,5 @@
 import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { LocalizeKeys } from "../../../../common/translations/localize";
@@ -7,7 +7,6 @@ import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
 import "../../script/ha-script-field-selector-editor";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
-import { sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
 
 @customElement("ha-automation-sidebar-script-field-selector")
@@ -120,7 +119,11 @@ export default class HaAutomationSidebarScriptFieldSelector extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  static styles = sidebarEditorStyles;
+  static styles = css`
+    .sidebar-editor {
+      padding-top: 64px;
+    }
+  `;
 }
 
 declare global {

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

@@ -1,12 +1,11 @@
 import { mdiDelete, mdiPlaylistEdit } from "@mdi/js";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type { ScriptFieldSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
 import "../../script/ha-script-field-editor";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
-import { sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
 
 @customElement("ha-automation-sidebar-script-field")
@@ -114,7 +113,11 @@ export default class HaAutomationSidebarScriptField extends LitElement {
     fireEvent(this, "toggle-yaml-mode");
   };
 
-  static styles = sidebarEditorStyles;
+  static styles = css`
+    .sidebar-editor {
+      padding-top: 64px;
+    }
+  `;
 }
 
 declare global {

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

@@ -1,7 +1,4 @@
 import {
-  mdiContentCopy,
-  mdiContentCut,
-  mdiContentDuplicate,
   mdiDelete,
   mdiIdentifier,
   mdiPlayCircleOutline,
@@ -9,14 +6,13 @@ import {
   mdiRenameBox,
   mdiStopCircleOutline,
 } from "@mdi/js";
-import { html, LitElement, nothing } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import type { TriggerSidebarConfig } from "../../../../data/automation";
 import { isTriggerList } from "../../../../data/trigger";
 import type { HomeAssistant } from "../../../../types";
-import { sidebarEditorStyles } from "../styles";
 import "../trigger/ha-automation-trigger-editor";
 import type HaAutomationTriggerEditor from "../trigger/ha-automation-trigger-editor";
 import "./ha-automation-sidebar-card";
@@ -105,45 +101,6 @@ export default class HaAutomationSidebarTrigger extends LitElement {
               <ha-svg-icon slot="start" .path=${mdiIdentifier}></ha-svg-icon>
             </ha-md-menu-item>`
           : nothing}
-
-        <ha-md-divider
-          slot="menu-items"
-          role="separator"
-          tabindex="-1"
-        ></ha-md-divider>
-
-        <ha-md-menu-item
-          slot="menu-items"
-          .clickAction=${this.config.duplicate}
-          .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
-          slot="menu-items"
-          .clickAction=${this.config.copy}
-          .disabled=${this.disabled}
-        >
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.copy"
-          )}
-          <ha-svg-icon slot="start" .path=${mdiContentCopy}></ha-svg-icon>
-        </ha-md-menu-item>
-
-        <ha-md-menu-item
-          slot="menu-items"
-          .clickAction=${this.config.cut}
-          .disabled=${this.disabled}
-        >
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.triggers.cut"
-          )}
-          <ha-svg-icon slot="start" .path=${mdiContentCut}></ha-svg-icon>
-        </ha-md-menu-item>
         <ha-md-menu-item
           slot="menu-items"
           .clickAction=${this._toggleYamlMode}
@@ -193,7 +150,6 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           .yamlMode=${this.yamlMode}
           .disabled=${this.disabled}
           @ui-mode-not-available=${this._handleUiModeNotAvailable}
-          sidebar
         ></ha-automation-trigger-editor>
       </ha-automation-sidebar-card>
     `;
@@ -229,7 +185,11 @@ export default class HaAutomationSidebarTrigger extends LitElement {
     this._requestShowId = true;
   };
 
-  static styles = sidebarEditorStyles;
+  static styles = css`
+    .sidebar-editor {
+      padding-top: 64px;
+    }
+  `;
 }
 
 declare global {

src/panels/config/automation/styles.ts

@@ -54,7 +54,7 @@ export const editorStyles = css`
     pointer-events: none;
   }
 
-  .card-content.card {
+  .card-content {
     padding: 16px;
   }
   .card-content.yaml {
@@ -62,31 +62,18 @@ export const editorStyles = css`
     border-top: 1px solid var(--divider-color);
     border-bottom: 1px solid var(--divider-color);
   }
-`;
-
-export const indentStyle = css`
-  .card-content.indent,
-  .selector-row,
-  :host([indent]) ha-form {
+  .card-content.indent {
     margin-left: 12px;
-    padding: 12px 20px 16px 16px;
+    margin-right: -4px;
+    padding: 12px 24px 16px 16px;
     border-left: 2px solid var(--ha-color-border-neutral-quiet);
-    border-bottom: 2px solid var(--ha-color-border-neutral-quiet);
-    border-radius: 0;
-    border-bottom-left-radius: var(--ha-border-radius-lg);
   }
   .card-content.indent.selected,
-  :host([selected]) .card-content.indent,
-  .selector-row.parent-selected,
-  :host([selected]) ha-form {
+  :host([selected]) .card-content.indent {
     border-color: var(--primary-color);
-    background: var(--ha-color-fill-primary-quiet-resting);
-    background: linear-gradient(
-      to right,
-      var(--ha-color-fill-primary-quiet-resting) 0%,
-      var(--ha-color-fill-primary-quiet-resting) 80%,
-      rgba(var(--rgb-primary-color), 0) 100%
-    );
+    background-color: var(--ha-color-fill-primary-quiet-resting);
+    border-top-right-radius: var(--ha-border-radius-xl);
+    border-bottom-right-radius: var(--ha-border-radius-xl);
   }
 `;
 
@@ -104,145 +91,3 @@ export const saveFabStyles = css`
     bottom: 16px;
   }
 `;
-
-export const manualEditorStyles = css`
-  :host {
-    display: block;
-  }
-
-  .split-view {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    position: relative;
-    gap: 16px;
-  }
-
-  .split-view.sidebar-hidden {
-    gap: 0;
-  }
-
-  .content-wrapper {
-    position: relative;
-    flex: 6;
-  }
-
-  .content {
-    padding: 32px 16px 64px 0;
-    height: calc(100vh - 153px);
-    height: calc(100dvh - 153px);
-    overflow-y: auto;
-    overflow-x: hidden;
-  }
-
-  .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 {
-    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);
-  }
-
-  .sidebar.overlay.rtl {
-    right: unset;
-    left: 8px;
-  }
-
-  @media all and (max-width: 870px) {
-    .split-view {
-      gap: 0;
-    }
-    .sidebar {
-      height: 0;
-      width: 0;
-      flex: 0;
-    }
-  }
-
-  .split-view.sidebar-hidden .sidebar.overlay {
-    width: 0;
-  }
-  .description {
-    margin: 0;
-  }
-  .header a {
-    color: var(--secondary-text-color);
-  }
-`;
-
-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));
-  }
-  .sortable-drag {
-    background: none;
-  }
-  ha-automation-action-row {
-    display: block;
-    scroll-margin-top: 48px;
-  }
-  .handle {
-    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;
-    height: 24px;
-  }
-  .buttons {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    order: 1;
-  }
-`;
-
-export const sidebarEditorStyles = css`
-  .sidebar-editor {
-    display: block;
-    padding-top: 16px;
-  }
-  .description {
-    padding-top: 16px;
-  }
-`;

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

@@ -29,8 +29,6 @@ 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() {
@@ -49,7 +47,6 @@ export default class HaAutomationTriggerEditor extends LitElement {
               this.trigger.enabled === false &&
               !this.yamlMode),
           yaml: yamlMode,
-          card: !this.inSidebar,
         })}
       >
         ${yamlMode

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

@@ -28,7 +28,6 @@ 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";
@@ -116,9 +115,6 @@ export default class HaAutomationTriggerRow extends LitElement {
   @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>;
@@ -136,9 +132,6 @@ 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,
@@ -172,142 +165,141 @@ export default class HaAutomationTriggerRow extends LitElement {
 
       <slot name="icons" slot="icons"></slot>
 
-      ${!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-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-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-divider role="separator" tabindex="-1"></ha-md-divider>`
+          : nothing}
+
+        <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._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._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>
+
+        ${!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>
+            `
+          : nothing}
+
+        <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=${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-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._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._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._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-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"
-                slot="start"
-                .path=${mdiDelete}
-              ></ha-svg-icon>
-            </ha-md-menu-item>
-          </ha-md-button-menu>`
-        : nothing}
+          <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"
+            slot="start"
+            .path=${mdiDelete}
+          ></ha-svg-icon>
+        </ha-md-menu-item>
+      </ha-md-button-menu>
       ${!this.optionsInSidebar
         ? html`${this._warnings
               ? html`<ha-automation-editor-warning
@@ -349,7 +341,6 @@ export default class HaAutomationTriggerRow extends LitElement {
               this.trigger.enabled === false}
               @click=${this._toggleSidebar}
               .selected=${this._selected}
-              .sortSelected=${this.sortSelected}
               >${this._selected
                 ? "selected"
                 : nothing}${this._renderRow()}</ha-automation-row
@@ -495,9 +486,6 @@ export default class HaAutomationTriggerRow extends LitElement {
       },
       disable: this._onDisable,
       delete: this._onDelete,
-      copy: this._copyTrigger,
-      duplicate: this._duplicateTrigger,
-      cut: this._cutTrigger,
       config: trigger || this.trigger,
       uiSupported: this._uiSupported(this._getType(trigger || this.trigger)),
       yamlMode: this._yamlMode,
@@ -505,11 +493,9 @@ export default class HaAutomationTriggerRow extends LitElement {
     this._selected = true;
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
-        this.scrollIntoView({
-          block: "start",
-          behavior: "smooth",
-        });
+      this.scrollIntoView({
+        block: "start",
+        behavior: "smooth",
       });
     }
   }
@@ -673,14 +659,6 @@ 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,

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

@@ -1,7 +1,7 @@
 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 { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { storage } from "../../../../common/decorators/storage";
@@ -11,7 +11,6 @@ import { nextRender } from "../../../../common/util/render-status";
 import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-sortable";
-import type { HaSortableClonedEventData } from "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import type {
   AutomationClipboard,
@@ -24,7 +23,6 @@ import {
   PASTE_VALUE,
   showAddAutomationElementDialog,
 } from "../show-add-automation-element-dialog";
-import { automationRowsStyles } from "../styles";
 import "./ha-automation-trigger-row";
 import type HaAutomationTriggerRow from "./ha-automation-trigger-row";
 
@@ -47,8 +45,6 @@ export default class HaAutomationTrigger extends LitElement {
 
   @state() private _showReorder = false;
 
-  @state() private _rowSortSelected?: number;
-
   @state()
   @storage({
     key: "automationClipboard",
@@ -60,8 +56,6 @@ export default class HaAutomationTrigger extends LitElement {
 
   private _focusLastTriggerOnChange = false;
 
-  private _focusTriggerIndexOnChange?: number;
-
   private _triggerKeys = new WeakMap<Trigger, string>();
 
   private _unsubMql?: () => void;
@@ -90,9 +84,8 @@ export default class HaAutomationTrigger extends LitElement {
         @item-moved=${this._triggerMoved}
         @item-added=${this._triggerAdded}
         @item-removed=${this._triggerRemoved}
-        @item-cloned=${this._triggerCloned}
       >
-        <div class="rows ${!this.optionsInSidebar ? "no-sidebar" : ""}">
+        <div class="triggers">
           ${repeat(
             this.triggers,
             (trigger) => this._getKey(trigger),
@@ -112,20 +105,10 @@ export default class HaAutomationTrigger extends LitElement {
                 .narrow=${this.narrow}
                 ?highlight=${this.highlightedTriggers?.includes(trg)}
                 .optionsInSidebar=${this.optionsInSidebar}
-                .sortSelected=${this._rowSortSelected === idx}
-                @stop-sort-selection=${this._stopSortSelection}
               >
                 ${this._showReorder && !this.disabled
                   ? html`
-                      <div
-                        tabindex="0"
-                        class="handle ${this._rowSortSelected === idx
-                          ? "active"
-                          : ""}"
-                        slot="icons"
-                        @keydown=${this._handleDragKeydown}
-                        .index=${idx}
-                      >
+                      <div class="handle" slot="icons">
                         <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
                       </div>
                     `
@@ -153,7 +136,7 @@ export default class HaAutomationTrigger extends LitElement {
 
   private _addTriggerDialog() {
     if (this.narrow) {
-      fireEvent(this, "request-close-sidebar");
+      fireEvent(this, "close-sidebar");
     }
     showAddAutomationElementDialog(this, {
       type: "trigger",
@@ -188,18 +171,12 @@ export default class HaAutomationTrigger extends LitElement {
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
 
-    if (
-      changedProps.has("triggers") &&
-      (this._focusLastTriggerOnChange ||
-        this._focusTriggerIndexOnChange !== undefined)
-    ) {
-      const row = this.shadowRoot!.querySelector<HaAutomationTriggerRow>(
-        `ha-automation-trigger-row:${this._focusLastTriggerOnChange ? "last-of-type" : `nth-of-type(${this._focusTriggerIndexOnChange! + 1})`}`
-      )!;
-
+    if (changedProps.has("triggers") && this._focusLastTriggerOnChange) {
       this._focusLastTriggerOnChange = false;
-      this._focusTriggerIndexOnChange = undefined;
 
+      const row = this.shadowRoot!.querySelector<HaAutomationTriggerRow>(
+        "ha-automation-trigger-row:last-of-type"
+      )!;
       row.updateComplete.then(() => {
         if (this.optionsInSidebar) {
           row.openSidebar();
@@ -211,18 +188,17 @@ export default class HaAutomationTrigger extends LitElement {
           }
         } else {
           row.expand();
-          row.focus();
         }
+        row.focus();
       });
     }
   }
 
   public expandAll() {
-    const triggerRows =
-      this.shadowRoot!.querySelectorAll<HaAutomationTriggerRow>(
-        "ha-automation-trigger-row"
-      )!;
-    triggerRows.forEach((row) => {
+    const rows = this.shadowRoot!.querySelectorAll<HaAutomationTriggerRow>(
+      "ha-automation-trigger-row"
+    )!;
+    rows.forEach((row) => {
       row.expand();
     });
   }
@@ -238,27 +214,15 @@ export default class HaAutomationTrigger extends LitElement {
   private _moveUp(ev) {
     ev.stopPropagation();
     const index = (ev.target as any).index;
-    if (!(ev.target as HaAutomationTriggerRow).first) {
-      const newIndex = index - 1;
-      this._move(index, newIndex);
-      if (this._rowSortSelected === index) {
-        this._rowSortSelected = newIndex;
-      }
-      ev.target.focus();
-    }
+    const newIndex = index - 1;
+    this._move(index, newIndex);
   }
 
   private _moveDown(ev) {
     ev.stopPropagation();
     const index = (ev.target as any).index;
-    if (!(ev.target as HaAutomationTriggerRow).last) {
-      const newIndex = index + 1;
-      this._move(index, newIndex);
-      if (this._rowSortSelected === index) {
-        this._rowSortSelected = newIndex;
-      }
-      ev.target.focus();
-    }
+    const newIndex = index + 1;
+    this._move(index, newIndex);
   }
 
   private _move(oldIndex: number, newIndex: number) {
@@ -278,12 +242,6 @@ 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,
@@ -291,9 +249,6 @@ 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
@@ -302,9 +257,6 @@ 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 });
   }
@@ -321,12 +273,6 @@ export default class HaAutomationTrigger extends LitElement {
     fireEvent(this, "value-changed", { value: triggers });
   }
 
-  private _triggerCloned(ev: CustomEvent<HaSortableClonedEventData>) {
-    if (ev.detail.item.isSelected()) {
-      ev.detail.item.trigger["ha-automation-row-selected"] = true;
-    }
-  }
-
   private _triggerChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const triggers = [...this.triggers];
@@ -354,28 +300,44 @@ export default class HaAutomationTrigger extends LitElement {
     });
   }
 
-  private _handleDragKeydown(ev: KeyboardEvent) {
-    if (ev.key === "Enter" || ev.key === " ") {
-      ev.stopPropagation();
-      this._rowSortSelected =
-        this._rowSortSelected === undefined
-          ? (ev.target as any).index
-          : undefined;
+  static styles = css`
+    .triggers {
+      padding: 16px 0 16px 16px;
+      margin: -16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
     }
-  }
-
-  private _stopSortSelection() {
-    this._rowSortSelected = undefined;
-  }
-
-  static styles = [
-    automationRowsStyles,
-    css`
-      :host([root]) .rows {
-        padding-right: 8px;
-      }
-    `,
-  ];
+    :host([root]) .triggers {
+      padding-right: 8px;
+    }
+    .sortable-ghost {
+      background: none;
+      border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
+    }
+    .sortable-drag {
+      background: none;
+    }
+    ha-automation-trigger-row {
+      display: block;
+      scroll-margin-top: 48px;
+    }
+    .handle {
+      padding: 12px;
+      cursor: move; /* fallback if grab cursor is unsupported */
+      cursor: grab;
+    }
+    .handle ha-svg-icon {
+      pointer-events: none;
+      height: 24px;
+    }
+    .buttons {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      order: 1;
+    }
+  `;
 }
 
 declare global {

src/panels/config/dashboard/dialog-new-dashboard.ts

@@ -26,15 +26,15 @@ interface Strategy {
 
 const STRATEGIES = [
   {
-    type: "overview",
+    type: "default",
     images: {
       light:
-        "/static/images/dashboard-options/light/icon-dashboard-overview.svg",
-      dark: "/static/images/dashboard-options/dark/icon-dashboard-overview.svg",
+        "/static/images/dashboard-options/light/icon-dashboard-default.svg",
+      dark: "/static/images/dashboard-options/dark/icon-dashboard-default.svg",
     },
-    name: "ui.panel.config.lovelace.dashboards.dialog_new.strategy.overview.title",
+    name: "ui.panel.config.lovelace.dashboards.dialog_new.strategy.default.title",
     description:
-      "ui.panel.config.lovelace.dashboards.dialog_new.strategy.overview.description",
+      "ui.panel.config.lovelace.dashboards.dialog_new.strategy.default.description",
   },
   {
     type: "areas",
@@ -47,14 +47,14 @@ const STRATEGIES = [
       "ui.panel.config.lovelace.dashboards.dialog_new.strategy.areas.description",
   },
   {
-    type: "home",
+    type: "overview",
     images: {
-      light: "/static/images/dashboard-options/light/icon-dashboard-home.svg",
-      dark: "/static/images/dashboard-options/dark/icon-dashboard-home.svg",
+      light: "/static/images/dashboard-options/light/icon-dashboard-areas.svg",
+      dark: "/static/images/dashboard-options/dark/icon-dashboard-areas.svg",
     },
-    name: "ui.panel.config.lovelace.dashboards.dialog_new.strategy.home.title",
+    name: "ui.panel.config.lovelace.dashboards.dialog_new.strategy.overview.title",
     description:
-      "ui.panel.config.lovelace.dashboards.dialog_new.strategy.home.description",
+      "ui.panel.config.lovelace.dashboards.dialog_new.strategy.overview.description",
   },
   {
     type: "map",
@@ -254,7 +254,7 @@ class DialogNewDashboard extends LitElement implements HassDialog {
     if (target.config) {
       config = target.config;
     } else if (target.strategy) {
-      if (target.strategy === "overview") {
+      if (target.strategy === "default") {
         config = null;
       } else {
         config = this._generateStrategyConfig(target.strategy);

src/panels/config/integrations/ha-config-sub-entry-row.ts

@@ -5,24 +5,20 @@ import {
   mdiDevices,
   mdiDotsVertical,
   mdiHandExtendedOutline,
-  mdiRenameBox,
   mdiShapeOutline,
 } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import type { ConfigEntry, SubEntry } from "../../../data/config_entries";
-import { deleteSubEntry, updateSubEntry } from "../../../data/config_entries";
+import { deleteSubEntry } from "../../../data/config_entries";
 import type { DeviceRegistryEntry } from "../../../data/device_registry";
 import type { DiagnosticInfo } from "../../../data/diagnostics";
 import type { EntityRegistryEntry } from "../../../data/entity_registry";
 import type { IntegrationManifest } from "../../../data/integration";
 import { showSubConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-sub-config-flow";
 import type { HomeAssistant } from "../../../types";
-import {
-  showConfirmationDialog,
-  showPromptDialog,
-} from "../../lovelace/custom-card-helpers";
+import { showConfirmationDialog } from "../../lovelace/custom-card-helpers";
 import "./ha-config-entry-device-row";
 
 @customElement("ha-config-sub-entry-row")
@@ -145,12 +141,6 @@ class HaConfigSubEntryRow extends LitElement {
                 </ha-md-menu-item>
               `
             : nothing}
-          <ha-md-menu-item @click=${this._handleRenameSub}>
-            <ha-svg-icon slot="start" .path=${mdiRenameBox}></ha-svg-icon>
-            ${this.hass.localize(
-              "ui.panel.config.integrations.config_entry.rename"
-            )}
-          </ha-md-menu-item>
           <ha-md-menu-item class="warning" @click=${this._handleDeleteSub}>
             <ha-svg-icon
               slot="start"
@@ -222,25 +212,6 @@ class HaConfigSubEntryRow extends LitElement {
     });
   }
 
-  private async _handleRenameSub(): Promise<void> {
-    const newName = await showPromptDialog(this, {
-      title: this.hass.localize("ui.common.rename"),
-      defaultValue: this.subEntry.title,
-      inputLabel: this.hass.localize(
-        "ui.panel.config.integrations.rename_input_label"
-      ),
-    });
-    if (newName === null) {
-      return;
-    }
-    await updateSubEntry(
-      this.hass,
-      this.entry.entry_id,
-      this.subEntry.subentry_id,
-      { title: newName }
-    );
-  }
-
   private async _handleDeleteSub(): Promise<void> {
     const confirmed = await showConfirmationDialog(this, {
       title: this.hass.localize(

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

@@ -23,7 +23,10 @@ class ConfigNetwork extends LitElement {
   @state() private _error?: { code: string; message: string };
 
   protected render() {
-    if (!isComponentLoaded(this.hass, "network")) {
+    if (
+      !this.hass.userData?.showAdvanced ||
+      !isComponentLoaded(this.hass, "network")
+    ) {
       return nothing;
     }
 

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

@@ -15,8 +15,6 @@ import {
   mdiRobotConfused,
   mdiTag,
   mdiTransitConnection,
-  mdiUnfoldLessHorizontal,
-  mdiUnfoldMoreHorizontal,
 } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
@@ -25,6 +23,7 @@ import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import { slugify } from "../../../common/string/slugify";
+import { computeRTL } from "../../../common/util/compute_rtl";
 import { promiseTimeout } from "../../../common/util/promise-timeout";
 import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-button";
@@ -342,30 +341,6 @@ export class HaScriptEditor extends SubscribeMixin(
             <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
           </ha-list-item>
 
-          ${!useBlueprint
-            ? html`
-                <ha-list-item graphic="icon" @click=${this._collapseAll}>
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiUnfoldLessHorizontal}
-                  ></ha-svg-icon>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.collapse_all"
-                  )}
-                </ha-list-item>
-
-                <ha-list-item graphic="icon" @click=${this._expandAll}>
-                  <ha-svg-icon
-                    slot="graphic"
-                    .path=${mdiUnfoldMoreHorizontal}
-                  ></ha-svg-icon>
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.editor.expand_all"
-                  )}
-                </ha-list-item>
-              `
-            : nothing}
-
           <li divider role="separator"></li>
 
           <ha-list-item
@@ -384,9 +359,67 @@ 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>
+                <div
+                  class=${classMap({
+                    rtl: computeRTL(this.hass),
+                  })}
+                >
                   ${useBlueprint
                     ? html`
                         <blueprint-script-editor
@@ -413,68 +446,7 @@ export class HaScriptEditor extends SubscribeMixin(
                           @value-changed=${this._valueChanged}
                           @editor-save=${this._handleSaveScript}
                           @save-script=${this._handleSaveScript}
-                        >
-                          <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>
+                        ></manual-script-editor>
                       `}
                 </div>
               `
@@ -1058,14 +1030,6 @@ export class HaScriptEditor extends SubscribeMixin(
     return this._confirmUnsavedChanged();
   }
 
-  private _collapseAll() {
-    this._manualEditor?.collapseAll();
-  }
-
-  private _expandAll() {
-    this._manualEditor?.expandAll();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
@@ -1099,26 +1063,6 @@ 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: 100;
-          width: 100%;
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          gap: 8px;
-        }
-
-        .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;
-        }
-
         manual-script-editor {
           max-width: 1540px;
           padding: 0 12px;

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

@@ -1,7 +1,7 @@
-import { mdiDelete } from "@mdi/js";
+import { mdiDelete, mdiDotsVertical } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { preventDefaultStopPropagation } from "../../../common/dom/prevent_default_stop_propagation";
@@ -18,9 +18,7 @@ import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/select
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import { indentStyle } from "../automation/styles";
 import "./ha-script-field-selector-editor";
-import type HaScriptFieldSelectorEditor from "./ha-script-field-selector-editor";
 
 @customElement("ha-script-field-row")
 export default class HaScriptFieldRow extends LitElement {
@@ -47,9 +45,6 @@ export default class HaScriptFieldRow extends LitElement {
 
   @state() private _selectorRowCollapsed = false;
 
-  @query("ha-script-field-selector-editor")
-  private _selectorEditor?: HaScriptFieldSelectorEditor;
-
   protected render() {
     return html`
       <ha-card outlined>
@@ -64,27 +59,32 @@ export default class HaScriptFieldRow extends LitElement {
           <h3 slot="header">${this.key}</h3>
 
           <slot name="icons" slot="icons"></slot>
-
           <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
-              slot="menu-items"
+              class="warning"
               .clickAction=${this._onDelete}
               .disabled=${this.disabled}
-              class="warning"
             >
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.actions.delete"
               )}
-              <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+              <ha-svg-icon
+                class="warning"
+                slot="graphic"
+                .path=${mdiDelete}
+              ></ha-svg-icon>
             </ha-md-menu-item>
           </ha-md-button-menu>
         </ha-automation-row>
@@ -141,40 +141,10 @@ export default class HaScriptFieldRow extends LitElement {
     this._collapsed = !this._collapsed;
   }
 
-  public expand() {
-    this._collapsed = false;
-  }
-
-  public collapse() {
-    this._collapsed = true;
-  }
-
-  public expandSelectorRow() {
-    this._selectorRowCollapsed = false;
-  }
-
-  public collapseSelectorRow() {
-    this._selectorRowCollapsed = true;
-  }
-
   private _toggleSelectorRowCollapse() {
     this._selectorRowCollapsed = !this._selectorRowCollapsed;
   }
 
-  public expandAll() {
-    this.expand();
-    this.expandSelectorRow();
-
-    this._selectorEditor?.expandAll();
-  }
-
-  public collapseAll() {
-    this.collapse();
-    this.collapseSelectorRow();
-
-    this._selectorEditor?.collapseAll();
-  }
-
   private _toggleSidebar(ev: Event) {
     ev?.stopPropagation();
 
@@ -185,7 +155,6 @@ export default class HaScriptFieldRow extends LitElement {
     }
 
     this._selected = true;
-    this._collapsed = false;
     this.openSidebar();
   }
 
@@ -199,7 +168,6 @@ export default class HaScriptFieldRow extends LitElement {
     }
 
     this._selectorRowSelected = true;
-    this._selectorRowCollapsed = false;
     this.openSidebar(true);
   }
 
@@ -247,11 +215,9 @@ export default class HaScriptFieldRow extends LitElement {
     } satisfies ScriptFieldSidebarConfig);
 
     if (this.narrow) {
-      requestAnimationFrame(() => {
-        this.scrollIntoView({
-          block: "start",
-          behavior: "smooth",
-        });
+      this.scrollIntoView({
+        block: "start",
+        behavior: "smooth",
       });
     }
   }
@@ -283,7 +249,6 @@ export default class HaScriptFieldRow extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
-      indentStyle,
       css`
         ha-button-menu,
         ha-icon-button {
@@ -352,6 +317,18 @@ export default class HaScriptFieldRow extends LitElement {
           border-color: var(--state-inactive-color);
           box-shadow: var(--shadow-default), var(--shadow-focus);
         }
+        .selector-row {
+          margin-left: 12px;
+          padding: 12px 4px 16px 16px;
+          margin-right: -4px;
+          border-left: 2px solid var(--ha-color-border-neutral-quiet);
+        }
+        .selector-row.parent-selected {
+          border-color: var(--primary-color);
+          background-color: var(--ha-color-fill-primary-quiet-resting);
+          border-top-right-radius: var(--ha-border-radius-xl);
+          border-bottom-right-radius: var(--ha-border-radius-xl);
+        }
       `,
     ];
   }

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

@@ -1,22 +1,17 @@
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import type { LocalizeKeys } from "../../../common/translations/localize";
 import "../../../components/ha-alert";
 import "../../../components/ha-form/ha-form";
-import type { HaForm } from "../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../components/ha-form/types";
-import type { HaSelector } from "../../../components/ha-selector/ha-selector";
-import type { HaActionSelector } from "../../../components/ha-selector/ha-selector-action";
-import type { HaConditionSelector } from "../../../components/ha-selector/ha-selector-condition";
 import "../../../components/ha-yaml-editor";
 import type { Field } from "../../../data/script";
 import { SELECTOR_SELECTOR_BUILDING_BLOCKS } from "../../../data/selector/selector_selector";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import { indentStyle } from "../automation/styles";
 
 @customElement("ha-script-field-selector-editor")
 export default class HaScriptFieldSelectorEditor extends LitElement {
@@ -38,9 +33,6 @@ export default class HaScriptFieldSelectorEditor extends LitElement {
 
   @state() private _yamlError?: undefined | "yaml_error" | "key_not_unique";
 
-  @query("ha-form")
-  private _formElement?: HaForm;
-
   private _schema = memoizeOne(
     (selector: any) =>
       [
@@ -146,51 +138,22 @@ export default class HaScriptFieldSelectorEditor extends LitElement {
     this.hass.localize(`ui.panel.config.script.editor.field.${error}` as any) ||
     error;
 
-  private _getSelectorElements() {
-    if (this._formElement) {
-      const selectors =
-        this._formElement.shadowRoot?.querySelectorAll<HaSelector>(
-          "ha-selector"
-        );
-
-      const selectorElements: (HaConditionSelector | HaActionSelector)[] = [];
-
-      selectors?.forEach((selector) => {
-        selectorElements.push(
-          ...Array.from(
-            selector.shadowRoot?.querySelectorAll<
-              HaConditionSelector | HaActionSelector
-            >("ha-selector-condition, ha-selector-action") || []
-          )
-        );
-      });
-      return selectorElements;
-    }
-    return [];
-  }
-
-  public expandAll() {
-    this._getSelectorElements().forEach((element) => {
-      element.expandAll?.();
-    });
-  }
-
-  public collapseAll() {
-    this._getSelectorElements().forEach((element) => {
-      element.collapseAll?.();
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyle,
-      indentStyle,
       css`
         :host([indent]) ha-form {
           display: block;
           margin-left: 12px;
           padding: 12px 20px 16px 16px;
           margin-right: -4px;
+          border-left: 2px solid var(--ha-color-border-neutral-quiet);
+        }
+        :host([selected]) ha-form {
+          border-color: var(--primary-color);
+          background-color: var(--ha-color-fill-primary-quiet-resting);
+          border-top-right-radius: var(--ha-border-radius-xl);
+          border-bottom-right-radius: var(--ha-border-radius-xl);
         }
       `,
     ];

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

@@ -1,7 +1,7 @@
 import { mdiPlus } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, queryAll } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button";
 import "../../../components/ha-button-menu";
@@ -23,9 +23,6 @@ export default class HaScriptFields extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @queryAll("ha-script-field-row")
-  private _fieldRowElements?: HaScriptFieldRow[];
-
   private _focusLastActionOnChange = false;
 
   protected render() {
@@ -51,7 +48,12 @@ export default class HaScriptFields extends LitElement {
             )}
           </div> `
         : nothing}
-      <ha-button @click=${this._addField} .disabled=${this.disabled}>
+      <ha-button
+        appearance="filled"
+        size="small"
+        @click=${this._addField}
+        .disabled=${this.disabled}
+      >
         <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
         ${this.hass.localize("ui.panel.config.script.editor.field.add_field")}
       </ha-button>
@@ -142,18 +144,6 @@ export default class HaScriptFields extends LitElement {
     return key;
   }
 
-  public expandAll() {
-    this._fieldRowElements?.forEach((row) => {
-      row.expandAll();
-    });
-  }
-
-  public collapseAll() {
-    this._fieldRowElements?.forEach((row) => {
-      row.collapseAll();
-    });
-  }
-
   static styles = css`
     ha-script-field-row {
       display: block;

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

@@ -1,6 +1,6 @@
 import { mdiContentSave, mdiHelpCircle } from "@mdi/js";
 import { load } from "js-yaml";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -17,12 +17,6 @@ import {
 import { ensureArray } from "../../../common/array/ensure-array";
 import { canOverrideAlphanumericInput } from "../../../common/dom/can-override-input";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { constructUrlCurrentPath } from "../../../common/url/construct-url";
-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";
@@ -36,10 +30,9 @@ import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 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 { showPasteReplaceDialog } from "../automation/paste-replace-dialog/show-dialog-paste-replace";
-import { manualEditorStyles, saveFabStyles } from "../automation/styles";
+import { saveFabStyles } from "../automation/styles";
 import "./ha-script-fields";
 import type HaScriptFields from "./ha-script-fields";
 
@@ -194,17 +187,9 @@ export class HaManualScriptEditor extends LitElement {
 
   protected render() {
     return html`
-      <div
-        class=${classMap({
-          "split-view": true,
-          "sidebar-hidden": !this._sidebarConfig,
-        })}
-      >
+      <div class="split-view">
         <div class="content-wrapper">
-          <div class="content">
-            <slot name="alerts"></slot>
-            ${this._renderContent()}
-          </div>
+          <div class="content">${this._renderContent()}</div>
           <ha-fab
             slot="fab"
             class=${this.dirty ? "dirty" : ""}
@@ -219,8 +204,8 @@ export class HaManualScriptEditor extends LitElement {
         <ha-automation-sidebar
           class=${classMap({
             sidebar: true,
+            hidden: !this._sidebarConfig,
             overlay: !this.isWide,
-            rtl: computeRTL(this.hass),
           })}
           .narrow=${this.narrow}
           .isWide=${this.isWide}
@@ -233,23 +218,6 @@ export class HaManualScriptEditor extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues): void {
-    super.firstUpdated(changedProps);
-    const expanded = extractSearchParam("expanded");
-    if (expanded === "1") {
-      this._clearParam("expanded");
-      this.expandAll();
-    }
-  }
-
-  private _clearParam(param: string) {
-    window.history.replaceState(
-      null,
-      "",
-      constructUrlCurrentPath(removeSearchParam(param))
-    );
-  }
-
   private _fieldsChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     this.resetPastedConfig();
@@ -490,29 +458,77 @@ export class HaManualScriptEditor extends LitElement {
     fireEvent(this, "save-script");
   }
 
-  private _getCollapsableElements() {
-    return this.shadowRoot!.querySelectorAll<
-      HaAutomationAction | HaScriptFields
-    >("ha-automation-action, ha-script-fields");
-  }
-
-  public expandAll() {
-    this._getCollapsableElements().forEach((element) => {
-      element.expandAll();
-    });
-  }
-
-  public collapseAll() {
-    this._getCollapsableElements().forEach((element) => {
-      element.collapseAll();
-    });
-  }
-
   static get styles(): CSSResultGroup {
     return [
       saveFabStyles,
-      manualEditorStyles,
       css`
+        :host {
+          display: block;
+        }
+
+        .split-view {
+          display: flex;
+          flex-direction: row;
+          height: 100%;
+          position: relative;
+          gap: 16px;
+        }
+
+        .content-wrapper {
+          position: relative;
+          flex: 6;
+        }
+
+        .content {
+          padding: 32px 16px 64px 0;
+          height: calc(100vh - 153px);
+          height: calc(100dvh - 153px);
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+
+        .sidebar {
+          padding: 12px 0;
+          flex: 4;
+          height: calc(100vh - 81px);
+          height: calc(100dvh - 81px);
+          width: 40%;
+        }
+        .sidebar.hidden {
+          border-color: transparent;
+          border-width: 0;
+          overflow: hidden;
+          flex: 0;
+          visibility: hidden;
+        }
+
+        .sidebar.overlay {
+          position: fixed;
+          bottom: 0;
+          right: 0;
+          height: calc(100% - 64px);
+          padding: 0;
+          z-index: 5;
+        }
+
+        @media all and (max-width: 870px) {
+          .split-view {
+            gap: 0;
+            margin-right: -8px;
+          }
+          .sidebar {
+            height: 0;
+            width: 0;
+            flex: 0;
+          }
+        }
+
+        .sidebar.overlay.hidden {
+          width: 0;
+        }
+        .description {
+          margin: 0;
+        }
         .header {
           display: flex;
           align-items: center;
@@ -525,9 +541,8 @@ export class HaManualScriptEditor extends LitElement {
           font-weight: var(--ha-font-weight-normal);
           flex: 1;
         }
-
-        .description {
-          margin-top: 16px;
+        .header a {
+          color: var(--secondary-text-color);
         }
       `,
     ];

src/panels/config/storage/ha-config-section-storage.ts

@@ -1,7 +1,6 @@
 import {
   mdiBackupRestore,
   mdiFolder,
-  mdiInformation,
   mdiNas,
   mdiPlayBox,
   mdiReload,
@@ -19,6 +18,7 @@ import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-next";
 import "../../../components/ha-list";
 import "../../../components/ha-list-item";
+import "../../../components/ha-metric";
 import "../../../components/ha-segmented-bar";
 import "../../../components/ha-svg-icon";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
@@ -47,7 +47,6 @@ import { showMoveDatadiskDialog } from "./show-dialog-move-datadisk";
 import { showMountViewDialog } from "./show-dialog-view-mount";
 import type { Segment } from "../../../components/ha-segmented-bar";
 import { getGraphColorByIndex } from "../../../common/color/colors";
-import { blankBeforePercent } from "../../../common/translations/blank_before_percent";
 
 @customElement("ha-config-section-storage")
 class HaConfigSectionStorage extends LitElement {
@@ -108,7 +107,21 @@ class HaConfigSectionStorage extends LitElement {
                       this._hostInfo,
                       this._storageInfo
                     )}
-                    ${this._renderDiskLifeTime(this._hostInfo.disk_life_time)}
+                    ${this._hostInfo.disk_life_time !== null
+                      ? // prettier-ignore
+                        html`
+                          <ha-metric
+                            .heading=${this.hass.localize(
+                              "ui.panel.config.storage.lifetime_used"
+                            )}
+                            .value=${this._hostInfo.disk_life_time}
+                            .tooltip=${this.hass.localize(
+                              "ui.panel.config.storage.lifetime_used_description"
+                            )}
+                            class="emmc"
+                          ></ha-metric>
+                        `
+                      : ""}
                   </div>
                   ${this._hostInfo
                     ? html`<div class="card-actions">
@@ -224,51 +237,6 @@ class HaConfigSectionStorage extends LitElement {
     `;
   }
 
-  private _renderDiskLifeTime(diskLifeTime: number | null) {
-    if (diskLifeTime === null) {
-      return nothing;
-    }
-
-    const segments: Segment[] = [
-      {
-        color: "var(--primary-color)",
-        value: diskLifeTime,
-      },
-      {
-        color:
-          "var(--ha-bar-background-color, var(--secondary-background-color))",
-        value: 100 - diskLifeTime,
-      },
-    ];
-
-    return html`
-      <ha-segmented-bar
-        .heading=${this.hass.localize("ui.panel.config.storage.lifetime")}
-        .description=${this.hass.localize(
-          "ui.panel.config.storage.lifetime_description",
-          {
-            lifetime: `${diskLifeTime}${blankBeforePercent(this.hass.locale)}%`,
-          }
-        )}
-        .segments=${segments}
-        hide-legend
-        hide-tooltip
-      >
-        <ha-tooltip slot="extra">
-          <ha-icon-button
-            .path=${mdiInformation}
-            class="help-button"
-          ></ha-icon-button>
-          <p class="metric-description" slot="content">
-            ${this.hass.localize(
-              "ui.panel.config.storage.lifetime_used_description"
-            )}
-          </p>
-        </ha-tooltip>
-      </ha-segmented-bar>
-    `;
-  }
-
   private _renderStorageMetrics = memoizeOne(
     (hostInfo?: HassioHostInfo, storageInfo?: HostDisksUsage | null) => {
       if (!hostInfo) {
@@ -327,7 +295,8 @@ class HaConfigSectionStorage extends LitElement {
             >${roundWithOneDecimal(freeSpaceGB)} GB</span
           >`,
       });
-      return html`<ha-segmented-bar
+      const chart = html`
+        <ha-segmented-bar
           .heading=${this.hass.localize("ui.panel.config.storage.used_space")}
           .description=${this.hass.localize(
             "ui.panel.config.storage.detailed_description",
@@ -338,15 +307,17 @@ class HaConfigSectionStorage extends LitElement {
           )}
           .segments=${segments}
         ></ha-segmented-bar>
-
-        ${!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}`;
+      `;
+      return storageInfo || storageInfo === null
+        ? chart
+        : html`
+            <div class="loading-container">
+              ${chart}
+              <div class="loading-overlay">
+                <ha-spinner></ha-spinner>
+              </div>
+            </div>
+          `;
     }
   );
 
@@ -491,12 +462,6 @@ class HaConfigSectionStorage extends LitElement {
       inset-inline-start: initial;
     }
 
-    .help-button {
-      --mdc-icon-button-size: 20px;
-      --mdc-icon-size: 20px;
-      color: var(--secondary-text-color);
-    }
-
     .no-mounts {
       display: flex;
       flex-direction: column;
@@ -519,10 +484,6 @@ class HaConfigSectionStorage extends LitElement {
     ha-icon-next {
       width: 24px;
     }
-
-    ha-alert ha-spinner {
-      --ha-spinner-size: 24px;
-    }
   `;
 }
 

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

@@ -239,7 +239,6 @@ export type LovelaceCardFeatureConfig =
   | FanOscillateCardFeatureConfig
   | FanPresetModesCardFeatureConfig
   | FanSpeedCardFeatureConfig
-  | HistoryChartCardFeatureConfig
   | HumidifierToggleCardFeatureConfig
   | HumidifierModesCardFeatureConfig
   | LawnMowerCommandsCardFeatureConfig

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

@@ -1,303 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import type { PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import type { ClockCardConfig } from "../types";
-import type { HomeAssistant } from "../../../../types";
-import { INTERVAL } from "../hui-clock-card";
-import { resolveTimeZone } from "../../../../common/datetime/resolve-time-zone";
-
-@customElement("hui-clock-card-analog")
-export class HuiClockCardAnalog extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @property({ attribute: false }) public config?: ClockCardConfig;
-
-  @state() private _dateTimeFormat?: Intl.DateTimeFormat;
-
-  @state() private _hourDeg?: number;
-
-  @state() private _minuteDeg?: number;
-
-  @state() private _secondDeg?: number;
-
-  private _tickInterval?: undefined | number;
-
-  private _initDate() {
-    if (!this.config || !this.hass) {
-      return;
-    }
-
-    let locale = this.hass.locale;
-    if (this.config.time_format) {
-      locale = { ...locale, time_format: this.config.time_format };
-    }
-
-    this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-      hourCycle: "h12",
-      timeZone:
-        this.config.time_zone ||
-        resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
-    });
-
-    this._tick();
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    if (changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.locale !== this.hass?.locale) {
-        this._initDate();
-      }
-    }
-  }
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this._startTick();
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._stopTick();
-  }
-
-  private _startTick() {
-    this._tickInterval = window.setInterval(() => this._tick(), INTERVAL);
-    this._tick();
-  }
-
-  private _stopTick() {
-    if (this._tickInterval) {
-      clearInterval(this._tickInterval);
-      this._tickInterval = undefined;
-    }
-  }
-
-  private _tick() {
-    if (!this._dateTimeFormat) return;
-
-    const parts = this._dateTimeFormat.formatToParts();
-    const hourStr = parts.find((p) => p.type === "hour")?.value;
-    const minuteStr = parts.find((p) => p.type === "minute")?.value;
-    const secondStr = parts.find((p) => p.type === "second")?.value;
-
-    const hour = hourStr ? parseInt(hourStr, 10) : 0;
-    const minute = minuteStr ? parseInt(minuteStr, 10) : 0;
-    const second = secondStr ? parseInt(secondStr, 10) : 0;
-
-    this._hourDeg = hour * 30 + minute * 0.5; // 30deg per hour + 0.5deg per minute
-    this._minuteDeg = minute * 6 + second * 0.1; // 6deg per minute + 0.1deg per second
-    this._secondDeg = this.config?.show_seconds ? second * 6 : undefined; // 6deg per second
-  }
-
-  render() {
-    if (!this.config) return nothing;
-
-    const sizeClass = this.config.clock_size
-      ? `size-${this.config.clock_size}`
-      : "";
-
-    return html`
-      <div
-        class="analog-clock ${sizeClass}"
-        role="img"
-        aria-label="Analog clock"
-      >
-        <div
-          class=${classMap({
-            dial: true,
-            "dial-border": this.config.border ?? false,
-          })}
-        >
-          ${this.config.ticks === "quarter"
-            ? Array.from({ length: 4 }, (_, i) => i).map(
-                (i) =>
-                  // 4 ticks
-                  html`
-                    <div
-                      aria-hidden
-                      class="tick hour"
-                      style=${`--tick-rotation: ${i * 90}deg;`}
-                    >
-                      <div class="line"></div>
-                    </div>
-                  `
-              )
-            : !this.config.ticks || // Default to hour ticks
-                this.config.ticks === "hour"
-              ? Array.from({ length: 12 }, (_, i) => i).map(
-                  (i) =>
-                    // 12 ticks
-                    html`
-                      <div
-                        aria-hidden
-                        class="tick hour"
-                        style=${`--tick-rotation: ${i * 30}deg;`}
-                      >
-                        <div class="line"></div>
-                      </div>
-                    `
-                )
-              : this.config.ticks === "minute"
-                ? Array.from({ length: 60 }, (_, i) => i).map(
-                    (i) =>
-                      // 60 ticks
-                      html`
-                        <div
-                          aria-hidden
-                          class="tick ${i % 5 === 0 ? "hour" : "minute"}"
-                          style=${`--tick-rotation: ${i * 6}deg;`}
-                        >
-                          <div class="line"></div>
-                        </div>
-                      `
-                  )
-                : nothing}
-          <div class="center-dot"></div>
-          <div
-            class="hand hour"
-            style=${`--hand-rotation: ${this._hourDeg ?? 0}deg;`}
-          ></div>
-          <div
-            class="hand minute"
-            style=${`--hand-rotation: ${this._minuteDeg ?? 0}deg;`}
-          ></div>
-          ${this.config.show_seconds
-            ? html`<div
-                class="hand second"
-                style=${`--hand-rotation: ${this._secondDeg ?? 0}deg;`}
-              ></div>`
-            : nothing}
-        </div>
-      </div>
-    `;
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .analog-clock {
-      --clock-size: 100px;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--clock-size);
-      height: var(--clock-size);
-      background: var(--ha-clock-card-analog-face-background, none);
-      border-radius: var(--ha-clock-card-analog-face-border-radius, none);
-      padding: var(--ha-clock-card-analog-face-padding, none);
-    }
-
-    .analog-clock.size-medium {
-      --clock-size: 160px;
-    }
-
-    .analog-clock.size-large {
-      --clock-size: 220px;
-    }
-
-    .dial {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      box-sizing: border-box;
-    }
-
-    .dial-border {
-      border: 2px solid var(--divider-color);
-      border-radius: 50%;
-    }
-
-    .tick {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      transform: rotate(var(--tick-rotation));
-      pointer-events: none;
-      z-index: 0;
-    }
-
-    .tick .line {
-      position: absolute;
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 1px;
-      height: calc(var(--clock-size) * 0.04);
-      background: var(--primary-text-color);
-      opacity: 0.5;
-      border-radius: 1px;
-    }
-
-    .tick.hour .line {
-      width: 2px;
-      height: calc(var(--clock-size) * 0.07);
-      opacity: 0.8;
-    }
-
-    .center-dot {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: 8px;
-      height: 8px;
-      border-radius: 50%;
-      background: var(--primary-text-color);
-      transform: translate(-50%, -50%);
-      z-index: 3;
-    }
-
-    .hand {
-      position: absolute;
-      left: 50%;
-      bottom: 50%;
-      transform-origin: 50% 100%;
-      transform: translate(-50%, 0) rotate(var(--hand-rotation, 0deg));
-      background: var(--primary-text-color);
-      border-radius: 2px;
-      will-change: transform;
-    }
-
-    .hand.hour {
-      width: 4px;
-      height: calc(var(--clock-size) * 0.25); /* 25% of the clock size */
-      background: var(--primary-text-color);
-      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
-      z-index: 1;
-    }
-
-    .hand.minute {
-      width: 3px;
-      height: calc(var(--clock-size) * 0.35); /* 35% of the clock size */
-      background: var(--primary-text-color);
-      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.2);
-      opacity: 0.9;
-      z-index: 3;
-    }
-
-    .hand.second {
-      width: 2px;
-      height: calc(var(--clock-size) * 0.42); /* 42% of the clock size */
-      background: var(--ha-color-border-danger-normal);
-      box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
-      opacity: 0.8;
-      z-index: 2;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-clock-card-analog": HuiClockCardAnalog;
-  }
-}

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

@@ -1,196 +0,0 @@
-import { css, html, LitElement, nothing } from "lit";
-import type { PropertyValues } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import type { ClockCardConfig } from "../types";
-import type { HomeAssistant } from "../../../../types";
-import { INTERVAL } from "../hui-clock-card";
-import { useAmPm } from "../../../../common/datetime/use_am_pm";
-import { resolveTimeZone } from "../../../../common/datetime/resolve-time-zone";
-
-@customElement("hui-clock-card-digital")
-export class HuiClockCardDigital extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @property({ attribute: false }) public config?: ClockCardConfig;
-
-  @state() private _dateTimeFormat?: Intl.DateTimeFormat;
-
-  @state() private _timeHour?: string;
-
-  @state() private _timeMinute?: string;
-
-  @state() private _timeSecond?: string;
-
-  @state() private _timeAmPm?: string;
-
-  private _tickInterval?: undefined | number;
-
-  private _initDate() {
-    if (!this.config || !this.hass) {
-      return;
-    }
-
-    let locale = this.hass?.locale;
-
-    if (this.config?.time_format) {
-      locale = { ...locale, time_format: this.config.time_format };
-    }
-
-    this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-      hourCycle: useAmPm(locale) ? "h12" : "h23",
-      timeZone:
-        this.config?.time_zone ||
-        resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
-    });
-
-    this._tick();
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    if (changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass");
-      if (!oldHass || oldHass.locale !== this.hass?.locale) {
-        this._initDate();
-      }
-    }
-  }
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this._startTick();
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._stopTick();
-  }
-
-  private _startTick() {
-    this._tickInterval = window.setInterval(() => this._tick(), INTERVAL);
-    this._tick();
-  }
-
-  private _stopTick() {
-    if (this._tickInterval) {
-      clearInterval(this._tickInterval);
-      this._tickInterval = undefined;
-    }
-  }
-
-  private _tick() {
-    if (!this._dateTimeFormat) return;
-
-    const parts = this._dateTimeFormat.formatToParts();
-
-    this._timeHour = parts.find((part) => part.type === "hour")?.value;
-    this._timeMinute = parts.find((part) => part.type === "minute")?.value;
-    this._timeSecond = this.config?.show_seconds
-      ? parts.find((part) => part.type === "second")?.value
-      : undefined;
-    this._timeAmPm = parts.find((part) => part.type === "dayPeriod")?.value;
-  }
-
-  render() {
-    if (!this.config) return nothing;
-
-    const sizeClass = this.config.clock_size
-      ? `size-${this.config.clock_size}`
-      : "";
-
-    return html`
-      <div class="time-parts ${sizeClass}">
-        <div class="time-part hour">${this._timeHour}</div>
-        <div class="time-part minute">${this._timeMinute}</div>
-        ${this._timeSecond !== undefined
-          ? html`<div class="time-part second">${this._timeSecond}</div>`
-          : nothing}
-        ${this._timeAmPm !== undefined
-          ? html`<div class="time-part am-pm">${this._timeAmPm}</div>`
-          : nothing}
-      </div>
-    `;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-    }
-
-    .time-parts {
-      align-items: center;
-      display: grid;
-      grid-template-areas:
-        "hour minute second"
-        "hour minute am-pm";
-
-      font-size: 1.5rem;
-      font-weight: var(--ha-font-weight-medium);
-      line-height: 0.8;
-      direction: ltr;
-    }
-
-    .time-title + .time-parts {
-      font-size: 1.5rem;
-    }
-
-    .time-parts.size-medium {
-      font-size: 3rem;
-    }
-
-    .time-parts.size-large {
-      font-size: 4rem;
-    }
-
-    .time-parts.size-medium .time-part.second,
-    .time-parts.size-medium .time-part.am-pm {
-      font-size: var(--ha-font-size-l);
-      margin-left: 6px;
-    }
-
-    .time-parts.size-large .time-part.second,
-    .time-parts.size-large .time-part.am-pm {
-      font-size: var(--ha-font-size-2xl);
-      margin-left: 8px;
-    }
-
-    .time-parts .time-part.hour {
-      grid-area: hour;
-    }
-
-    .time-parts .time-part.minute {
-      grid-area: minute;
-    }
-
-    .time-parts .time-part.second {
-      grid-area: second;
-      line-height: 0.9;
-      opacity: 0.4;
-    }
-
-    .time-parts .time-part.am-pm {
-      grid-area: am-pm;
-      line-height: 0.9;
-      opacity: 0.6;
-    }
-
-    .time-parts .time-part.second,
-    .time-parts .time-part.am-pm {
-      font-size: var(--ha-font-size-xs);
-      margin-left: 4px;
-    }
-
-    .time-parts .time-part.hour:after {
-      content: ":";
-      margin: 0 2px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hui-clock-card-digital": HuiClockCardDigital;
-  }
-}

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

@@ -54,7 +54,7 @@ export const DEVICE_CLASSES = {
   binary_sensor: ["motion", "moisture"],
 };
 
-export const SUM_DEVICE_CLASSES = [
+const SUM_DEVICE_CLASSES = [
   "power",
   "apparent_power",
   "reactive_power",

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

@@ -1,3 +1,4 @@
+import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -10,8 +11,10 @@ import type {
   LovelaceGridOptions,
 } from "../types";
 import type { ClockCardConfig } from "./types";
+import { useAmPm } from "../../../common/datetime/use_am_pm";
+import { resolveTimeZone } from "../../../common/datetime/resolve-time-zone";
 
-export const INTERVAL = 1000;
+const INTERVAL = 1000;
 
 @customElement("hui-clock-card")
 export class HuiClockCard extends LitElement implements LovelaceCard {
@@ -30,14 +33,45 @@ export class HuiClockCard extends LitElement implements LovelaceCard {
 
   @state() private _config?: ClockCardConfig;
 
+  @state() private _dateTimeFormat?: Intl.DateTimeFormat;
+
+  @state() private _timeHour?: string;
+
+  @state() private _timeMinute?: string;
+
+  @state() private _timeSecond?: string;
+
+  @state() private _timeAmPm?: string;
+
+  private _tickInterval?: undefined | number;
+
   public setConfig(config: ClockCardConfig): void {
     this._config = config;
-    // Dynamically import the clock type based on the configuration
-    if (config.clock_style === "analog") {
-      import("./clock/hui-clock-card-analog");
-    } else {
-      import("./clock/hui-clock-card-digital");
+    this._initDate();
+  }
+
+  private _initDate() {
+    if (!this._config || !this.hass) {
+      return;
     }
+
+    let locale = this.hass?.locale;
+
+    if (this._config?.time_format) {
+      locale = { ...locale, time_format: this._config.time_format };
+    }
+
+    this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hourCycle: useAmPm(locale) ? "h12" : "h23",
+      timeZone:
+        this._config?.time_zone ||
+        resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
+    });
+
+    this._tick();
   }
 
   public getCardSize(): number {
@@ -46,59 +80,77 @@ export class HuiClockCard extends LitElement implements LovelaceCard {
   }
 
   public getGridOptions(): LovelaceGridOptions {
-    switch (this._config?.clock_style) {
-      case "analog":
-        switch (this._config?.clock_size) {
-          case "medium":
-            return {
-              min_rows: this._config?.title ? 4 : 3,
-              rows: 3,
-              min_columns: 5,
-              columns: 6,
-            };
-          case "large":
-            return {
-              min_rows: this._config?.title ? 5 : 4,
-              rows: 4,
-              min_columns: 6,
-              columns: 6,
-            };
-          default:
-            return {
-              min_rows: this._config?.title ? 3 : 2,
-              rows: 2,
-              min_columns: 2,
-              columns: 6,
-            };
-        }
-      default:
-        switch (this._config?.clock_size) {
-          case "medium":
-            return {
-              min_rows: this._config?.title ? 2 : 1,
-              rows: 2,
-              max_rows: 4,
-              min_columns: 4,
-              columns: 6,
-            };
-          case "large":
-            return {
-              min_rows: 2,
-              rows: 2,
-              max_rows: 4,
-              min_columns: 6,
-              columns: 6,
-            };
-          default:
-            return {
-              min_rows: 1,
-              rows: 1,
-              max_rows: 4,
-              min_columns: 3,
-              columns: 6,
-            };
-        }
+    if (this._config?.clock_size === "medium") {
+      return {
+        min_rows: this._config?.title ? 2 : 1,
+        rows: 2,
+        max_rows: 4,
+        min_columns: 4,
+        columns: 6,
+      };
     }
+
+    if (this._config?.clock_size === "large") {
+      return {
+        min_rows: 2,
+        rows: 2,
+        max_rows: 4,
+        min_columns: 6,
+        columns: 6,
+      };
+    }
+
+    return {
+      min_rows: 1,
+      rows: 1,
+      max_rows: 4,
+      min_columns: 3,
+      columns: 6,
+    };
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    if (changedProps.has("hass")) {
+      const oldHass = changedProps.get("hass");
+      if (!oldHass || oldHass.locale !== this.hass?.locale) {
+        this._initDate();
+      }
+    }
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this._startTick();
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._stopTick();
+  }
+
+  private _startTick() {
+    this._tickInterval = window.setInterval(() => this._tick(), INTERVAL);
+    this._tick();
+  }
+
+  private _stopTick() {
+    if (this._tickInterval) {
+      clearInterval(this._tickInterval);
+      this._tickInterval = undefined;
+    }
+  }
+
+  private _tick() {
+    if (!this._dateTimeFormat) return;
+
+    const parts = this._dateTimeFormat.formatToParts();
+
+    this._timeHour = parts.find((part) => part.type === "hour")?.value;
+    this._timeMinute = parts.find((part) => part.type === "minute")?.value;
+    this._timeSecond = this._config?.show_seconds
+      ? parts.find((part) => part.type === "second")?.value
+      : undefined;
+    this._timeAmPm = parts.find((part) => part.type === "dayPeriod")?.value;
   }
 
   protected render() {
@@ -118,19 +170,16 @@ export class HuiClockCard extends LitElement implements LovelaceCard {
           ${this._config.title !== undefined
             ? html`<div class="time-title">${this._config.title}</div>`
             : nothing}
-          ${this._config.clock_style === "analog"
-            ? html`
-                <hui-clock-card-analog
-                  .hass=${this.hass}
-                  .config=${this._config}
-                ></hui-clock-card-analog>
-              `
-            : html`
-                <hui-clock-card-digital
-                  .hass=${this.hass}
-                  .config=${this._config}
-                ></hui-clock-card-digital>
-              `}
+          <div class="time-parts">
+            <div class="time-part hour">${this._timeHour}</div>
+            <div class="time-part minute">${this._timeMinute}</div>
+            ${this._timeSecond !== undefined
+              ? html`<div class="time-part second">${this._timeSecond}</div>`
+              : nothing}
+            ${this._timeAmPm !== undefined
+              ? html`<div class="time-part am-pm">${this._timeAmPm}</div>`
+              : nothing}
+          </div>
         </div>
       </ha-card>
     `;
@@ -185,6 +234,74 @@ export class HuiClockCard extends LitElement implements LovelaceCard {
       font-size: var(--ha-font-size-2xl);
       line-height: var(--ha-line-height-condensed);
     }
+
+    .time-parts {
+      align-items: center;
+      display: grid;
+      grid-template-areas:
+        "hour minute second"
+        "hour minute am-pm";
+
+      font-size: 2rem;
+      font-weight: var(--ha-font-weight-medium);
+      line-height: 0.8;
+      direction: ltr;
+    }
+
+    .time-title + .time-parts {
+      font-size: 1.5rem;
+    }
+
+    .time-wrapper.size-medium .time-parts {
+      font-size: 3rem;
+    }
+
+    .time-wrapper.size-large .time-parts {
+      font-size: 4rem;
+    }
+
+    .time-wrapper.size-medium .time-parts .time-part.second,
+    .time-wrapper.size-medium .time-parts .time-part.am-pm {
+      font-size: var(--ha-font-size-l);
+      margin-left: 6px;
+    }
+
+    .time-wrapper.size-large .time-parts .time-part.second,
+    .time-wrapper.size-large .time-parts .time-part.am-pm {
+      font-size: var(--ha-font-size-2xl);
+      margin-left: 8px;
+    }
+
+    .time-parts .time-part.hour {
+      grid-area: hour;
+    }
+
+    .time-parts .time-part.minute {
+      grid-area: minute;
+    }
+
+    .time-parts .time-part.second {
+      grid-area: second;
+      line-height: 0.9;
+      opacity: 0.4;
+    }
+
+    .time-parts .time-part.am-pm {
+      grid-area: am-pm;
+      line-height: 0.9;
+      opacity: 0.6;
+    }
+
+    .time-parts .time-part.second,
+    .time-parts .time-part.am-pm {
+      font-size: var(--ha-font-size-xs);
+      margin-left: 4px;
+    }
+
+    .time-parts .time-part.hour:after {
+      content: ":";
+      margin: 0 2px;
+    }
   `;
 }
 

src/panels/lovelace/cards/types.ts

@@ -371,15 +371,11 @@ export interface MarkdownCardConfig extends LovelaceCardConfig {
 export interface ClockCardConfig extends LovelaceCardConfig {
   type: "clock";
   title?: string;
-  clock_style?: "digital" | "analog";
   clock_size?: "small" | "medium" | "large";
   show_seconds?: boolean | undefined;
   time_format?: TimeFormat;
   time_zone?: string;
   no_background?: boolean;
-  // Analog clock options
-  border?: boolean;
-  ticks?: "none" | "quarter" | "hour" | "minute";
 }
 
 export interface MediaControlCardConfig extends LovelaceCardConfig {

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

@@ -34,7 +34,6 @@ import type {
 } from "../../card-features/types";
 import {
   DEVICE_CLASSES,
-  SUM_DEVICE_CLASSES,
   type AreaCardFeatureContext,
 } from "../../cards/hui-area-card";
 import type { AreaCardConfig, AreaCardDisplayType } from "../../cards/types";
@@ -264,28 +263,13 @@ export class HuiAreaCardEditor
     currentClasses: string[]
   ): SelectOption[] {
     const options = [...new Set([...possibleClasses, ...currentClasses])].map(
-      (deviceClass) => {
-        const labelSuffix =
-          domain === "sensor"
-            ? ` (${
-                SUM_DEVICE_CLASSES.includes(deviceClass)
-                  ? this.hass!.localize(
-                      "ui.panel.lovelace.editor.card.area.sum"
-                    )
-                  : this.hass!.localize(
-                      "ui.panel.lovelace.editor.card.area.median"
-                    )
-              })`
-            : "";
-        return {
-          value: deviceClass,
-          label: `${
-            this.hass!.localize(
-              `component.${domain}.entity_component.${deviceClass}.name`
-            ) || deviceClass
-          }${labelSuffix}`,
-        };
-      }
+      (deviceClass) => ({
+        value: deviceClass,
+        label:
+          this.hass!.localize(
+            `component.${domain}.entity_component.${deviceClass}.name`
+          ) || deviceClass,
+      })
     );
     options.sort((a, b) =>
       caseInsensitiveStringCompare(a.label, b.label, this.hass!.locale.language)

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

@@ -6,7 +6,6 @@ import {
   assert,
   assign,
   boolean,
-  defaulted,
   enums,
   literal,
   object,
@@ -31,7 +30,6 @@ const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     title: optional(string()),
-    clock_style: optional(union([literal("digital"), literal("analog")])),
     clock_size: optional(
       union([literal("small"), literal("medium"), literal("large")])
     ),
@@ -39,19 +37,6 @@ const cardConfigStruct = assign(
     time_zone: optional(enums(Object.keys(timezones))),
     show_seconds: optional(boolean()),
     no_background: optional(boolean()),
-    // Analog clock options
-    border: optional(defaulted(boolean(), false)),
-    ticks: optional(
-      defaulted(
-        union([
-          literal("none"),
-          literal("quarter"),
-          literal("hour"),
-          literal("minute"),
-        ]),
-        literal("hour")
-      )
-    ),
   })
 );
 
@@ -65,23 +50,9 @@ export class HuiClockCardEditor
   @state() private _config?: ClockCardConfig;
 
   private _schema = memoizeOne(
-    (localize: LocalizeFunc, clockStyle: "digital" | "analog") =>
+    (localize: LocalizeFunc) =>
       [
         { name: "title", selector: { text: {} } },
-        {
-          name: "clock_style",
-          selector: {
-            select: {
-              mode: "dropdown",
-              options: ["digital", "analog"].map((value) => ({
-                value,
-                label: localize(
-                  `ui.panel.lovelace.editor.card.clock.clock_styles.${value}`
-                ),
-              })),
-            },
-          },
-        },
         {
           name: "clock_size",
           selector: {
@@ -98,66 +69,20 @@ export class HuiClockCardEditor
         },
         { name: "show_seconds", selector: { boolean: {} } },
         { name: "no_background", selector: { boolean: {} } },
-        ...(clockStyle === "digital"
-          ? ([
-              {
-                name: "time_format",
-                selector: {
-                  select: {
-                    mode: "dropdown",
-                    options: ["auto", ...Object.values(TimeFormat)].map(
-                      (value) => ({
-                        value,
-                        label: localize(
-                          `ui.panel.lovelace.editor.card.clock.time_formats.${value}`
-                        ),
-                      })
-                    ),
-                  },
-                },
-              },
-            ] as const satisfies readonly HaFormSchema[])
-          : clockStyle === "analog"
-            ? ([
-                {
-                  name: "border",
-                  description: {
-                    suffix: localize(
-                      `ui.panel.lovelace.editor.card.clock.border.description`
-                    ),
-                  },
-                  default: false,
-                  selector: {
-                    boolean: {},
-                  },
-                },
-                {
-                  name: "ticks",
-                  description: {
-                    suffix: localize(
-                      `ui.panel.lovelace.editor.card.clock.ticks.description`
-                    ),
-                  },
-                  default: "hour",
-                  selector: {
-                    select: {
-                      mode: "dropdown",
-                      options: ["none", "quarter", "hour", "minute"].map(
-                        (value) => ({
-                          value,
-                          label: localize(
-                            `ui.panel.lovelace.editor.card.clock.ticks.${value}.label`
-                          ),
-                          description: localize(
-                            `ui.panel.lovelace.editor.card.clock.ticks.${value}.description`
-                          ),
-                        })
-                      ),
-                    },
-                  },
-                },
-              ] as const satisfies readonly HaFormSchema[])
-            : []),
+        {
+          name: "time_format",
+          selector: {
+            select: {
+              mode: "dropdown",
+              options: ["auto", ...Object.values(TimeFormat)].map((value) => ({
+                value,
+                label: localize(
+                  `ui.panel.lovelace.editor.card.clock.time_formats.${value}`
+                ),
+              })),
+            },
+          },
+        },
         {
           name: "time_zone",
           selector: {
@@ -182,15 +107,10 @@ export class HuiClockCardEditor
   );
 
   private _data = memoizeOne((config) => ({
-    clock_style: "digital",
     clock_size: "small",
     time_zone: "auto",
     time_format: "auto",
     show_seconds: false,
-    no_background: false,
-    // Analog clock options
-    border: false,
-    ticks: "hour",
     ...config,
   }));
 
@@ -208,13 +128,8 @@ export class HuiClockCardEditor
       <ha-form
         .hass=${this.hass}
         .data=${this._data(this._config)}
-        .schema=${this._schema(
-          this.hass.localize,
-          (this._data(this._config).clock_style as "digital" | "analog") ??
-            "digital"
-        )}
+        .schema=${this._schema(this.hass.localize)}
         .computeLabel=${this._computeLabelCallback}
-        .computeHelper=${this._computeHelperCallback}
         @value-changed=${this._valueChanged}
       ></ha-form>
     `;
@@ -228,14 +143,6 @@ export class HuiClockCardEditor
       delete ev.detail.value.time_format;
     }
 
-    if (ev.detail.value.clock_style === "analog") {
-      ev.detail.value.border = ev.detail.value.border ?? false;
-      ev.detail.value.ticks = ev.detail.value.ticks ?? "hour";
-    } else {
-      delete ev.detail.value.border;
-      delete ev.detail.value.ticks;
-    }
-
     fireEvent(this, "config-changed", { config: ev.detail.value });
   }
 
@@ -247,10 +154,6 @@ export class HuiClockCardEditor
         return this.hass!.localize(
           "ui.panel.lovelace.editor.card.generic.title"
         );
-      case "clock_style":
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.clock.clock_style`
-        );
       case "clock_size":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.clock_size`
@@ -271,31 +174,6 @@ export class HuiClockCardEditor
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.no_background`
         );
-      case "border":
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.clock.border.label`
-        );
-      case "ticks":
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.clock.ticks.label`
-        );
-      default:
-        return undefined;
-    }
-  };
-
-  private _computeHelperCallback = (
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ) => {
-    switch (schema.name) {
-      case "border":
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.clock.border.description`
-        );
-      case "ticks":
-        return this.hass!.localize(
-          `ui.panel.lovelace.editor.card.clock.ticks.description`
-        );
       default:
         return undefined;
     }

src/panels/lovelace/editor/section-editor/hui-section-settings-editor.ts

@@ -1,6 +1,8 @@
+import type { PropertyValues } from "lit";
 import { LitElement, html } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { mdiFormatColorFill } from "@mdi/js";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import type {
   HaFormSchema,
@@ -10,9 +12,13 @@ import "../../../../components/ha-form/ha-form";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
+import { hex2rgb, rgb2hex } from "../../../../common/color/convert-color";
 
 interface SettingsData {
   column_span?: number;
+  background_type: "none" | "color";
+  background_color?: number[];
+  background_opacity?: number;
 }
 
 @customElement("hui-section-settings-editor")
@@ -23,8 +29,10 @@ export class HuiDialogEditSection extends LitElement {
 
   @property({ attribute: false }) public viewConfig!: LovelaceViewConfig;
 
+  @state() private _selectorBackgroundType: "none" | "color" = "none";
+
   private _schema = memoizeOne(
-    (maxColumns: number) =>
+    (maxColumns: number, enableBackground: boolean) =>
       [
         {
           name: "column_span",
@@ -36,15 +44,91 @@ export class HuiDialogEditSection extends LitElement {
             },
           },
         },
+        {
+          name: "styling",
+          type: "expandable",
+          flatten: true,
+          iconPath: mdiFormatColorFill,
+          schema: [
+            {
+              name: "background_settings",
+              flatten: true,
+              type: "grid",
+              schema: [
+                {
+                  name: "background_type",
+                  required: true,
+                  selector: {
+                    select: {
+                      mode: "dropdown",
+                      options: [
+                        {
+                          value: "none",
+                          label: this.hass.localize(
+                            "ui.panel.lovelace.editor.edit_section.settings.background_type_none_option"
+                          ),
+                        },
+                        {
+                          value: "color",
+                          label: this.hass.localize(
+                            "ui.panel.lovelace.editor.edit_section.settings.background_type_color_option"
+                          ),
+                        },
+                      ],
+                    },
+                  },
+                },
+                {
+                  name: "background_color",
+                  selector: {
+                    color_rgb: {},
+                  },
+                  disabled: !enableBackground,
+                },
+                {
+                  name: "background_opacity",
+                  selector: {
+                    number: {
+                      min: 0,
+                      max: 100,
+                      step: 1,
+                      mode: "slider",
+                      unit_of_measurement: "%",
+                    },
+                  },
+                  disabled: !enableBackground,
+                },
+              ],
+            },
+          ],
+        },
       ] as const satisfies HaFormSchema[]
   );
 
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+
+    if (this.config.style?.background_color) {
+      this._selectorBackgroundType = "color";
+    } else {
+      this._selectorBackgroundType = "none";
+    }
+  }
+
   render() {
     const data: SettingsData = {
       column_span: this.config.column_span || 1,
+      background_type: this._selectorBackgroundType,
+      background_color: this.config.style?.background_color
+        ? hex2rgb(this.config.style?.background_color as any)
+        : [],
+      background_opacity: this.config.style?.background_opacity || 100,
     };
 
-    const schema = this._schema(this.viewConfig.max_columns || 4);
+    const schema = this._schema(
+      this.viewConfig.max_columns || 4,
+      this._selectorBackgroundType === "color"
+    );
 
     return html`
       <ha-form
@@ -76,11 +160,27 @@ export class HuiDialogEditSection extends LitElement {
     ev.stopPropagation();
     const newData = ev.detail.value as SettingsData;
 
+    this._selectorBackgroundType = newData.background_type;
+
     const newConfig: LovelaceSectionRawConfig = {
       ...this.config,
       column_span: newData.column_span,
     };
 
+    if (newData.background_type === "color") {
+      newConfig.style = {
+        ...newConfig.style,
+        background_color: rgb2hex(newData.background_color as any),
+        background_opacity: newData.background_opacity,
+      };
+    } else {
+      newConfig.style = {
+        ...newConfig.style,
+        background_color: undefined,
+        background_opacity: undefined,
+      };
+    }
+
     fireEvent(this, "value-changed", { value: newConfig });
   }
 }

src/panels/lovelace/hui-root.ts

@@ -46,7 +46,6 @@ import "../../components/ha-list-item";
 import "../../components/ha-menu-button";
 import "../../components/ha-svg-icon";
 import "../../components/sl-tab-group";
-import { createAreaRegistryEntry } from "../../data/area_registry";
 import type { LovelacePanelConfig } from "../../data/lovelace";
 import type { LovelaceConfig } from "../../data/lovelace/config/types";
 import { isStrategyDashboard } from "../../data/lovelace/config/types";
@@ -58,7 +57,6 @@ import {
 } from "../../data/lovelace/dashboard";
 import { getPanelTitle } from "../../data/panel";
 import { createPerson } from "../../data/person";
-import { showListItemsDialog } from "../../dialogs/dialog-list-items/show-list-items-dialog";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -73,8 +71,6 @@ import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant, PanelInfo } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
-import { showToast } from "../../util/toast";
-import { showAreaRegistryDetailDialog } from "../config/areas/show-dialog-area-registry-detail";
 import { showNewAutomationDialog } from "../config/automation/show-dialog-new-automation";
 import { showAddIntegrationDialog } from "../config/integrations/show-add-integration-dialog";
 import { showDashboardDetailDialog } from "../config/lovelace/dashboards/show-dialog-lovelace-dashboard-detail";
@@ -90,6 +86,9 @@ import "./views/hui-view";
 import type { HUIView } from "./views/hui-view";
 import "./views/hui-view-background";
 import "./views/hui-view-container";
+import { showAreaRegistryDetailDialog } from "../config/areas/show-dialog-area-registry-detail";
+import { createAreaRegistryEntry } from "../../data/area_registry";
+import { showToast } from "../../util/toast";
 
 interface ActionItem {
   icon: string;
@@ -106,7 +105,6 @@ interface ActionItem {
 interface SubActionItem {
   icon: string;
   key: LocalizeKeys;
-  overflowAction?: any;
   action?: any;
   visible: boolean | undefined;
 }
@@ -210,35 +208,31 @@ class HUIRoot extends LitElement {
         icon: mdiPlus,
         key: "ui.panel.lovelace.menu.add",
         visible: !this._editMode && this.hass.user?.is_admin,
-        overflow: this.narrow,
+        overflow: false,
         subItems: [
           {
             icon: mdiDevices,
             key: "ui.panel.lovelace.menu.add_device",
             visible: true,
-            action: this._addDevice,
-            overflowAction: this._handleAddDevice,
+            action: this._handleAddDevice,
           },
           {
             icon: mdiRobot,
             key: "ui.panel.lovelace.menu.create_automation",
             visible: true,
-            action: this._createAutomation,
-            overflowAction: this._handleCreateAutomation,
+            action: this._handleACreateAutomation,
           },
           {
             icon: mdiSofa,
             key: "ui.panel.lovelace.menu.add_area",
             visible: true,
-            action: this._addArea,
-            overflowAction: this._handleAddArea,
+            action: this._handleAddArea,
           },
           {
             icon: mdiAccount,
             key: "ui.panel.lovelace.menu.add_person",
             visible: true,
-            action: this._addPerson,
-            overflowAction: this._handleAddPerson,
+            action: this._handleInvitePerson,
           },
         ],
       },
@@ -248,7 +242,7 @@ class HUIRoot extends LitElement {
         buttonAction: this._showQuickBar,
         overflowAction: this._handleShowQuickBar,
         visible: !this._editMode,
-        overflow: this.narrow,
+        overflow: false,
         suffix: this.hass.enableShortcuts ? "(E)" : undefined,
       },
       {
@@ -258,7 +252,7 @@ class HUIRoot extends LitElement {
         overflowAction: this._handleShowVoiceCommandDialog,
         visible:
           !this._editMode && this._conversation(this.hass.config.components),
-        overflow: this.narrow,
+        overflow: false,
         suffix: this.hass.enableShortcuts ? "(A)" : undefined,
       },
       {
@@ -327,7 +321,7 @@ class HUIRoot extends LitElement {
                     <ha-list-item
                       graphic="icon"
                       .key=${subItem.key}
-                      @request-selected=${subItem.overflowAction}
+                      @request-selected=${subItem.action}
                     >
                       ${this.hass!.localize(subItem.key)}
                       <ha-svg-icon
@@ -353,37 +347,26 @@ class HUIRoot extends LitElement {
     if (overflowItems.length && !overflowCanPromote) {
       const listItems: TemplateResult[] = [];
       overflowItems.forEach((i) => {
-        const title = [this.hass!.localize(i.key), i.suffix].join(" ");
-        const action = i.subItems
-          ? () => {
-              showListItemsDialog(this, {
-                title: title,
-                items: i.subItems!.map((si) => ({
-                  iconPath: si.icon,
-                  label: this.hass!.localize(si.key),
-                  action: si.action,
-                })),
-              });
-            }
-          : i.overflowAction;
-
         listItems.push(
-          html`<ha-list-item graphic="icon" @request-selected=${action}>
-            ${title}
+          html`<ha-list-item
+            graphic="icon"
+            @request-selected=${i.overflowAction}
+          >
+            ${[this.hass!.localize(i.key), i.suffix].join(" ")}
             <ha-svg-icon slot="graphic" .path=${i.icon}></ha-svg-icon>
           </ha-list-item>`
         );
       });
-      result.push(html`
-        <ha-button-menu slot="actionItems">
+      result.push(
+        html`<ha-button-menu slot="actionItems">
           <ha-icon-button
             slot="trigger"
             .label=${this.hass!.localize("ui.panel.lovelace.editor.menu.open")}
             .path=${mdiDotsVertical}
           ></ha-icon-button>
           ${listItems}
-        </ha-button-menu>
-      `);
+        </ha-button-menu>`
+      );
     }
     return html`${result}`;
   }
@@ -475,6 +458,8 @@ class HUIRoot extends LitElement {
 
     const isSubview = curViewConfig?.subview;
     const hasTabViews = views.filter((view) => !view.subview).length > 1;
+    const showTabBar =
+      this._editMode || (!isSubview && hasTabViews && this.narrow);
 
     return html`
       <div
@@ -519,35 +504,35 @@ class HUIRoot extends LitElement {
                       `}
                   ${isSubview
                     ? html`<div class="main-title">${curViewConfig.title}</div>`
-                    : hasTabViews
+                    : hasTabViews && !showTabBar
                       ? tabs
                       : html`
                           <div class="main-title">
-                            ${views[0]?.title ?? dashboardTitle}
+                            ${curViewConfig?.title ?? dashboardTitle}
                           </div>
                         `}
                   <div class="action-items">${this._renderActionItems()}</div>
                 `}
           </div>
-          ${this._editMode
-            ? html`
-                <div class="tab-bar">
-                  ${tabs}
-                  <ha-icon-button
-                    slot="nav"
-                    id="add-view"
-                    @click=${this._addView}
-                    .label=${this.hass!.localize(
-                      "ui.panel.lovelace.editor.edit_view.add"
-                    )}
-                    .path=${mdiPlus}
-                  ></ha-icon-button>
-                </div>
-              `
+          ${showTabBar
+            ? html`<div class="tab-bar">
+                ${tabs}
+                ${this._editMode
+                  ? html`<ha-icon-button
+                      slot="nav"
+                      id="add-view"
+                      @click=${this._addView}
+                      .label=${this.hass!.localize(
+                        "ui.panel.lovelace.editor.edit_view.add"
+                      )}
+                      .path=${mdiPlus}
+                    ></ha-icon-button>`
+                  : nothing}
+              </div>`
             : nothing}
         </div>
         <hui-view-container
-          class=${this._editMode ? "has-tab-bar" : ""}
+          class=${showTabBar ? "has-tab-bar" : ""}
           .hass=${this.hass}
           .theme=${curViewConfig?.theme}
           id="view"
@@ -803,47 +788,36 @@ class HUIRoot extends LitElement {
     }
   }
 
-  private _handleAddDevice(ev: CustomEvent<RequestSelectedDetail>): void {
+  private async _handleAddDevice(
+    ev: CustomEvent<RequestSelectedDetail>
+  ): Promise<void> {
     if (!shouldHandleRequestSelectedEvent(ev)) {
       return;
     }
-    this._addDevice();
-  }
-
-  private _addDevice = async () => {
     await this.hass.loadFragmentTranslation("config");
     showAddIntegrationDialog(this);
-  };
+  }
 
-  private _handleCreateAutomation(
+  private async _handleACreateAutomation(
     ev: CustomEvent<RequestSelectedDetail>
-  ): void {
+  ): Promise<void> {
     if (!shouldHandleRequestSelectedEvent(ev)) {
       return;
     }
-    this._createAutomation();
-  }
-
-  private _createAutomation = async () => {
     await this.hass.loadFragmentTranslation("config");
     showNewAutomationDialog(this, { mode: "automation" });
-  };
+  }
 
-  private _handleAddArea(ev: CustomEvent<RequestSelectedDetail>): void {
+  private async _handleAddArea(
+    ev: CustomEvent<RequestSelectedDetail>
+  ): Promise<void> {
     if (!shouldHandleRequestSelectedEvent(ev)) {
       return;
     }
-    this._addArea();
-  }
-
-  private _addArea = async () => {
     await this.hass.loadFragmentTranslation("config");
     showAreaRegistryDetailDialog(this, {
       createEntry: async (values) => {
         const area = await createAreaRegistryEntry(this.hass, values);
-        if (isStrategyDashboard(this.lovelace!.rawConfig)) {
-          fireEvent(this, "config-refresh");
-        }
         showToast(this, {
           message: this.hass.localize(
             "ui.panel.lovelace.menu.add_area_success"
@@ -857,16 +831,14 @@ class HUIRoot extends LitElement {
         });
       },
     });
-  };
+  }
 
-  private _handleAddPerson(ev: CustomEvent<RequestSelectedDetail>): void {
+  private async _handleInvitePerson(
+    ev: CustomEvent<RequestSelectedDetail>
+  ): Promise<void> {
     if (!shouldHandleRequestSelectedEvent(ev)) {
       return;
     }
-    this._addPerson();
-  }
-
-  private _addPerson = async () => {
     await this.hass.loadFragmentTranslation("config");
     showPersonDetailDialog(this, {
       users: [],
@@ -887,7 +859,7 @@ class HUIRoot extends LitElement {
         });
       },
     });
-  };
+  }
 
   private _handleRawEditor(ev: CustomEvent<RequestSelectedDetail>): void {
     if (!shouldHandleRequestSelectedEvent(ev)) {

src/panels/lovelace/sections/hui-grid-section.ts

@@ -20,6 +20,7 @@ import "../components/hui-card-edit-mode";
 import { moveCard } from "../editor/config-util";
 import type { LovelaceCardPath } from "../editor/lovelace-path";
 import type { Lovelace } from "../types";
+import { hex2rgb } from "../../../common/color/convert-color";
 
 const CARD_SORTABLE_OPTIONS: HaSortableOptions = {
   delay: 100,
@@ -86,6 +87,12 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
       ? IMPORT_MODE_CARD_SORTABLE_OPTIONS
       : CARD_SORTABLE_OPTIONS;
 
+    const backgroundOpacity =
+      (this._config.style?.background_opacity || 100) / 100;
+    const background = this._config.style?.background_color
+      ? `rgba(${hex2rgb(this._config.style.background_color)}, ${backgroundOpacity})`
+      : undefined;
+
     return html`
       <ha-sortable
         .disabled=${!editMode}
@@ -103,7 +110,11 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
           class="container ${classMap({
             "edit-mode": editMode,
             "import-only": this.importOnly,
+            "has-background": Boolean(background),
           })}"
+          style=${styleMap({
+            background: background,
+          })}
         >
           ${repeat(
             cardsConfig,
@@ -250,6 +261,10 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
           border: none;
           padding: 0 !important;
         }
+        .container.has-background {
+          padding: 8px;
+          border-radius: var(--ha-card-border-radius, 12px);
+        }
 
         .card {
           border-radius: var(--ha-card-border-radius, 12px);

src/panels/lovelace/strategies/areas/helpers/areas-strategy-helper.ts

@@ -14,8 +14,6 @@ import type { LovelaceCardConfig } from "../../../../../data/lovelace/config/car
 import type { HomeAssistant } from "../../../../../types";
 import { supportsAlarmModesCardFeature } from "../../../card-features/hui-alarm-modes-card-feature";
 import { supportsCoverOpenCloseCardFeature } from "../../../card-features/hui-cover-open-close-card-feature";
-import { supportsFanSpeedCardFeature } from "../../../card-features/hui-fan-speed-card-feature";
-import { supportsHistoryChartCardFeature } from "../../../card-features/hui-history-chart-card-feature";
 import { supportsLightBrightnessCardFeature } from "../../../card-features/hui-light-brightness-card-feature";
 import { supportsLockCommandsCardFeature } from "../../../card-features/hui-lock-commands-card-feature";
 import { supportsTargetTemperatureCardFeature } from "../../../card-features/hui-target-temperature-card-feature";
@@ -238,12 +236,7 @@ export const computeAreaTileCardConfig =
 
     let feature: LovelaceCardFeatureConfig | undefined;
     if (includeFeature) {
-      if (supportsHistoryChartCardFeature(hass, context)) {
-        feature = {
-          type: "history-chart",
-          hours_to_show: 24,
-        };
-      } else if (supportsLightBrightnessCardFeature(hass, context)) {
+      if (supportsLightBrightnessCardFeature(hass, context)) {
         feature = {
           type: "light-brightness",
         };
@@ -255,10 +248,6 @@ export const computeAreaTileCardConfig =
         feature = {
           type: "target-temperature",
         };
-      } else if (supportsFanSpeedCardFeature(hass, context)) {
-        feature = {
-          type: "fan-speed",
-        };
       } else if (supportsAlarmModesCardFeature(hass, context)) {
         feature = {
           type: "alarm-modes",

src/panels/lovelace/strategies/get-strategy.ts

@@ -33,7 +33,7 @@ const STRATEGIES: Record<LovelaceStrategyConfigType, Record<string, any>> = {
     map: () => import("./map/map-dashboard-strategy"),
     iframe: () => import("./iframe/iframe-dashboard-strategy"),
     areas: () => import("./areas/areas-dashboard-strategy"),
-    home: () => import("./home/home-dashboard-strategy"),
+    overview: () => import("./overview/overview-dashboard-strategy"),
   },
   view: {
     "original-states": () =>
@@ -43,13 +43,15 @@ const STRATEGIES: Record<LovelaceStrategyConfigType, Record<string, any>> = {
     iframe: () => import("./iframe/iframe-view-strategy"),
     area: () => import("./areas/area-view-strategy"),
     "areas-overview": () => import("./areas/areas-overview-view-strategy"),
-    "home-main": () => import("./home/home-main-view-strategy"),
-    "home-lights": () => import("./home/home-lights-view-strategy"),
-    "home-climate": () => import("./home/home-climate-view-strategy"),
-    "home-security": () => import("./home/home-security-view-strategy"),
-    "home-media-players": () =>
-      import("./home/home-media-players-view-strategy"),
-    "home-area": () => import("./home/home-area-view-strategy"),
+    "overview-home": () => import("./overview/overview-home-view-strategy"),
+    "overview-lights": () => import("./overview/overview-lights-view-strategy"),
+    "overview-climate": () =>
+      import("./overview/overview-climate-view-strategy"),
+    "overview-security": () =>
+      import("./overview/overview-security-view-strategy"),
+    "overview-media-players": () =>
+      import("./overview/overview-media-players-view-strategy"),
+    "overview-area": () => import("./overview/overview-area-view-strategy"),
   },
   section: {},
 };

src/panels/lovelace/strategies/overview/editor/hui-overview-dashboard-strategy-editor.ts

@@ -4,19 +4,19 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/entity/ha-entities-picker";
 import type { HomeAssistant } from "../../../../../types";
 import type { LovelaceStrategyEditor } from "../../types";
-import type { HomeDashboardStrategyConfig } from "../home-dashboard-strategy";
+import type { OverviewDashboardStrategyConfig } from "../overview-dashboard-strategy";
 
-@customElement("hui-home-dashboard-strategy-editor")
-export class HuiHomeDashboardStrategyEditor
+@customElement("hui-overview-dashboard-strategy-editor")
+export class HuiOverviewDashboardStrategyEditor
   extends LitElement
   implements LovelaceStrategyEditor
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @state()
-  private _config?: HomeDashboardStrategyConfig;
+  private _config?: OverviewDashboardStrategyConfig;
 
-  public setConfig(config: HomeDashboardStrategyConfig): void {
+  public setConfig(config: OverviewDashboardStrategyConfig): void {
     this._config = config;
   }
 
@@ -47,7 +47,7 @@ export class HuiHomeDashboardStrategyEditor
 
     const favoriteEntities = ev.detail.value as string[];
 
-    const config: HomeDashboardStrategyConfig = {
+    const config: OverviewDashboardStrategyConfig = {
       ...this._config,
       favorite_entities: favoriteEntities,
     };
@@ -62,6 +62,6 @@ export class HuiHomeDashboardStrategyEditor
 
 declare global {
   interface HTMLElementTagNameMap {
-    "hui-home-dashboard-strategy-editor": HuiHomeDashboardStrategyEditor;
+    "hui-overview-dashboard-strategy-editor": HuiOverviewDashboardStrategyEditor;
   }
 }

src/panels/lovelace/strategies/overview/helpers/overview-summaries.ts

@@ -3,23 +3,26 @@ import type {
   EntityFilterFunc,
 } from "../../../../../common/entity/entity_filter";
 
-export const HOME_SUMMARIES = [
+export const OVERVIEW_SUMMARIES = [
   "lights",
   "climate",
   "security",
   "media_players",
 ] as const;
 
-export type HomeSummaries = (typeof HOME_SUMMARIES)[number];
+export type OverviewSummaries = (typeof OVERVIEW_SUMMARIES)[number];
 
-export const HOME_SUMMARIES_ICONS: Record<HomeSummaries, string> = {
+export const OVERVIEW_SUMMARIES_ICONS: Record<OverviewSummaries, 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 OVERVIEW_SUMMARIES_FILTERS: Record<
+  OverviewSummaries,
+  EntityFilter[]
+> = {
   lights: [{ domain: "light", entity_category: "none" }],
   climate: [
     { domain: "climate", entity_category: "none" },
@@ -46,10 +49,6 @@ export const HOME_SUMMARIES_FILTERS: Record<HomeSummaries, EntityFilter[]> = {
     },
   ],
   security: [
-    {
-      domain: "camera",
-      entity_category: "none",
-    },
     {
       domain: "alarm_control_panel",
       entity_category: "none",
@@ -58,6 +57,10 @@ export const HOME_SUMMARIES_FILTERS: Record<HomeSummaries, EntityFilter[]> = {
       domain: "lock",
       entity_category: "none",
     },
+    {
+      domain: "camera",
+      entity_category: "none",
+    },
     {
       domain: "cover",
       device_class: ["door", "garage", "gate"],
@@ -65,7 +68,7 @@ export const HOME_SUMMARIES_FILTERS: Record<HomeSummaries, EntityFilter[]> = {
     },
     {
       domain: "binary_sensor",
-      device_class: ["door", "garage_door", "motion"],
+      device_class: ["door", "garage_door"],
       entity_category: "none",
     },
   ],

src/panels/lovelace/strategies/overview/overview-area-view-strategy.ts

@@ -14,14 +14,14 @@ import type { HeadingCardConfig } from "../../cards/types";
 import { computeAreaTileCardConfig } from "../areas/helpers/areas-strategy-helper";
 import {
   findEntities,
-  HOME_SUMMARIES,
-  HOME_SUMMARIES_FILTERS,
-  HOME_SUMMARIES_ICONS,
-  type HomeSummaries,
-} from "./helpers/home-summaries";
+  OVERVIEW_SUMMARIES,
+  OVERVIEW_SUMMARIES_FILTERS,
+  OVERVIEW_SUMMARIES_ICONS,
+  type OverviewSummaries,
+} from "./helpers/overview-summaries";
 
-export interface HomeAreaViewStrategyConfig {
-  type: "home-area";
+export interface OverviewAreaViewStrategyConfig {
+  type: "overview-area";
   area?: string;
 }
 
@@ -42,10 +42,10 @@ const computeHeadingCard = (
       : undefined,
   }) satisfies HeadingCardConfig;
 
-@customElement("home-area-view-strategy")
-export class HomeAreaViewStrategy extends ReactiveElement {
+@customElement("overview-area-view-strategy")
+export class OverviewAreaViewStrategy extends ReactiveElement {
   static async generate(
-    config: HomeAreaViewStrategyConfig,
+    config: OverviewAreaViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     if (!config.area) {
@@ -87,16 +87,16 @@ export class HomeAreaViewStrategy extends ReactiveElement {
     const allEntities = Object.keys(hass.states);
     const areaEntities = allEntities.filter(areaFilter);
 
-    const entitiesBySummary = HOME_SUMMARIES.reduce(
+    const entitiesBySummary = OVERVIEW_SUMMARIES.reduce(
       (acc, summary) => {
-        const summariesFilters = HOME_SUMMARIES_FILTERS[summary];
+        const summariesFilters = OVERVIEW_SUMMARIES_FILTERS[summary];
         const filterFunctions = summariesFilters.map((filter) =>
           generateEntityFilter(hass, filter)
         );
         acc[summary] = findEntities(areaEntities, filterFunctions);
         return acc;
       },
-      {} as Record<HomeSummaries, string[]>
+      {} as Record<OverviewSummaries, string[]>
     );
 
     const {
@@ -110,7 +110,11 @@ export class HomeAreaViewStrategy extends ReactiveElement {
       sections.push({
         type: "grid",
         cards: [
-          computeHeadingCard("Lights", HOME_SUMMARIES_ICONS.lights, "lights"),
+          computeHeadingCard(
+            "Lights",
+            OVERVIEW_SUMMARIES_ICONS.lights,
+            "lights"
+          ),
           ...lights.map(computeTileCard),
         ],
       });
@@ -122,7 +126,7 @@ export class HomeAreaViewStrategy extends ReactiveElement {
         cards: [
           computeHeadingCard(
             "Climate",
-            HOME_SUMMARIES_ICONS.climate,
+            OVERVIEW_SUMMARIES_ICONS.climate,
             "climate"
           ),
           ...climate.map(computeTileCard),
@@ -136,7 +140,7 @@ export class HomeAreaViewStrategy extends ReactiveElement {
         cards: [
           computeHeadingCard(
             "Security",
-            HOME_SUMMARIES_ICONS.security,
+            OVERVIEW_SUMMARIES_ICONS.security,
             "security"
           ),
           ...security.map(computeTileCard),
@@ -150,7 +154,7 @@ export class HomeAreaViewStrategy extends ReactiveElement {
         cards: [
           computeHeadingCard(
             "Media players",
-            HOME_SUMMARIES_ICONS.media_players,
+            OVERVIEW_SUMMARIES_ICONS.media_players,
             "media-players"
           ),
           ...mediaPlayers.map(computeTileCard),
@@ -306,6 +310,6 @@ export class HomeAreaViewStrategy extends ReactiveElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "home-area-view-strategy": HomeAreaViewStrategy;
+    "overview-area-view-strategy": OverviewAreaViewStrategy;
   }
 }

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

@@ -1,6 +1,8 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import { generateEntityFilter } from "../../../../common/entity/entity_filter";
+import { clamp } from "../../../../common/number/clamp";
+import { floorDefaultIcon } from "../../../../components/ha-floor-icon";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@@ -10,11 +12,14 @@ import {
   getAreas,
   getFloors,
 } from "../areas/helpers/areas-strategy-helper";
-import { getHomeStructure } from "./helpers/home-structure";
-import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
+import { getHomeStructure } from "./helpers/overview-home-structure";
+import {
+  findEntities,
+  OVERVIEW_SUMMARIES_FILTERS,
+} from "./helpers/overview-summaries";
 
-export interface HomeClimateViewStrategyConfig {
-  type: "home-climate";
+export interface OverviewClimateViewStrategyConfig {
+  type: "overview-climate";
 }
 
 const processAreasForClimate = (
@@ -23,7 +28,6 @@ const processAreasForClimate = (
   entities: string[]
 ): LovelaceCardConfig[] => {
   const cards: LovelaceCardConfig[] = [];
-  const computeTileCard = computeAreaTileCardConfig(hass, "", true);
 
   for (const areaId of areaIds) {
     const area = hass.areas[areaId];
@@ -34,24 +38,20 @@ const processAreasForClimate = (
     });
     const areaEntities = entities.filter(areaFilter);
 
+    const computeTileCard = computeAreaTileCardConfig(hass, "", true);
+
     if (areaEntities.length > 0) {
       cards.push({
         heading_style: "subtitle",
         type: "heading",
         heading: area.name,
+        icon: area.icon || "mdi:home",
         tap_action: {
           action: "navigate",
           navigation_path: `areas-${area.area_id}`,
         },
       });
 
-      if (hass.areas[areaId].temperature_entity_id) {
-        cards.push(computeTileCard(hass.areas[areaId].temperature_entity_id));
-      }
-      if (hass.areas[areaId].humidity_entity_id) {
-        cards.push(computeTileCard(hass.areas[areaId].humidity_entity_id));
-      }
-
       for (const entityId of areaEntities) {
         cards.push(computeTileCard(entityId));
       }
@@ -61,10 +61,10 @@ const processAreasForClimate = (
   return cards;
 };
 
-@customElement("home-climate-view-strategy")
-export class HomeClimateViewStrategy extends ReactiveElement {
+@customElement("overview-climate-view-strategy")
+export class OverviewClimateViewStrategy extends ReactiveElement {
   static async generate(
-    _config: HomeClimateViewStrategyConfig,
+    _config: OverviewClimateViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const areas = getAreas(hass.areas);
@@ -75,7 +75,7 @@ export class HomeClimateViewStrategy extends ReactiveElement {
 
     const allEntities = Object.keys(hass.states);
 
-    const filterFunctions = HOME_SUMMARIES_FILTERS.climate.map((filter) =>
+    const filterFunctions = OVERVIEW_SUMMARIES_FILTERS.climate.map((filter) =>
       generateEntityFilter(hass, filter)
     );
 
@@ -91,11 +91,11 @@ export class HomeClimateViewStrategy extends ReactiveElement {
 
       const section: LovelaceSectionRawConfig = {
         type: "grid",
-        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? floor.name : "Areas",
+            icon: floor.icon || floorDefaultIcon(floor) || "mdi:home-floor",
           },
         ],
       };
@@ -112,11 +112,11 @@ export class HomeClimateViewStrategy extends ReactiveElement {
     if (home.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
-        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? "Other areas" : "Areas",
+            icon: "mdi:home",
           },
         ],
       };
@@ -129,9 +129,17 @@ export class HomeClimateViewStrategy extends ReactiveElement {
       }
     }
 
+    // Allow between 2 and 3 columns (the max should be set to define the width of the header)
+    const maxColumns = clamp(sections.length, 2, 3);
+
+    // Take the full width if there is only one section to avoid narrow header on desktop
+    if (sections.length === 1) {
+      sections[0].column_span = 2;
+    }
+
     return {
       type: "sections",
-      max_columns: 2,
+      max_columns: maxColumns,
       sections: sections || [],
     };
   }
@@ -139,6 +147,6 @@ export class HomeClimateViewStrategy extends ReactiveElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "home-climate-view-strategy": HomeClimateViewStrategy;
+    "overview-climate-view-strategy": OverviewClimateViewStrategy;
   }
 }

src/panels/lovelace/strategies/overview/overview-dashboard-strategy.ts

@@ -6,19 +6,19 @@ 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 type { HomeAreaViewStrategyConfig } from "./home-area-view-strategy";
-import type { HomeMainViewStrategyConfig } from "./home-main-view-strategy";
+import { OVERVIEW_SUMMARIES_ICONS } from "./helpers/overview-summaries";
+import type { OverviewAreaViewStrategyConfig } from "./overview-area-view-strategy";
+import type { OverviewHomeViewStrategyConfig } from "./overview-home-view-strategy";
 
-export interface HomeDashboardStrategyConfig {
-  type: "home";
+export interface OverviewDashboardStrategyConfig {
+  type: "overview";
   favorite_entities?: string[];
 }
 
-@customElement("home-dashboard-strategy")
-export class HomeDashboardStrategy extends ReactiveElement {
+@customElement("overview-dashboard-strategy")
+export class OverviewDashboardStrategy extends ReactiveElement {
   static async generate(
-    config: HomeDashboardStrategyConfig,
+    config: OverviewDashboardStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceConfig> {
     if (hass.config.state === STATE_NOT_RUNNING) {
@@ -53,9 +53,9 @@ export class HomeDashboardStrategy extends ReactiveElement {
         path: path,
         subview: true,
         strategy: {
-          type: "home-area",
+          type: "overview-area",
           area: area.area_id,
-        } satisfies HomeAreaViewStrategyConfig,
+        } satisfies OverviewAreaViewStrategyConfig,
       };
     });
 
@@ -64,9 +64,9 @@ export class HomeDashboardStrategy extends ReactiveElement {
       path: "lights",
       subview: true,
       strategy: {
-        type: "home-lights",
+        type: "overview-lights",
       },
-      icon: HOME_SUMMARIES_ICONS.lights,
+      icon: OVERVIEW_SUMMARIES_ICONS.lights,
     } satisfies LovelaceViewRawConfig;
 
     const climateView = {
@@ -74,9 +74,9 @@ export class HomeDashboardStrategy extends ReactiveElement {
       path: "climate",
       subview: true,
       strategy: {
-        type: "home-climate",
+        type: "overview-climate",
       },
-      icon: HOME_SUMMARIES_ICONS.climate,
+      icon: OVERVIEW_SUMMARIES_ICONS.climate,
     } satisfies LovelaceViewRawConfig;
 
     const securityView = {
@@ -84,9 +84,9 @@ export class HomeDashboardStrategy extends ReactiveElement {
       path: "security",
       subview: true,
       strategy: {
-        type: "home-security",
+        type: "overview-security",
       },
-      icon: HOME_SUMMARIES_ICONS.security,
+      icon: OVERVIEW_SUMMARIES_ICONS.security,
     } satisfies LovelaceViewRawConfig;
 
     const mediaPlayersView = {
@@ -94,9 +94,9 @@ export class HomeDashboardStrategy extends ReactiveElement {
       path: "media-players",
       subview: true,
       strategy: {
-        type: "home-media-players",
+        type: "overview-media-players",
       },
-      icon: HOME_SUMMARIES_ICONS.media_players,
+      icon: OVERVIEW_SUMMARIES_ICONS.media_players,
     } satisfies LovelaceViewRawConfig;
 
     return {
@@ -105,9 +105,9 @@ export class HomeDashboardStrategy extends ReactiveElement {
           icon: "mdi:home",
           path: "home",
           strategy: {
-            type: "home-main",
+            type: "overview-home",
             favorite_entities: config.favorite_entities,
-          } satisfies HomeMainViewStrategyConfig,
+          } satisfies OverviewHomeViewStrategyConfig,
         },
         ...areaViews,
         lightView,
@@ -119,13 +119,13 @@ export class HomeDashboardStrategy extends ReactiveElement {
   }
 
   public static async getConfigElement(): Promise<LovelaceStrategyEditor> {
-    await import("./editor/hui-home-dashboard-strategy-editor");
-    return document.createElement("hui-home-dashboard-strategy-editor");
+    await import("./editor/hui-overview-dashboard-strategy-editor");
+    return document.createElement("hui-overview-dashboard-strategy-editor");
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "home-dashboard-strategy": HomeDashboardStrategy;
+    "overview-dashboard-strategy": OverviewDashboardStrategy;
   }
 }

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

@@ -1,9 +1,6 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
-import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
-import { generateEntityFilter } from "../../../../common/entity/entity_filter";
 import type { AreaRegistryEntry } from "../../../../data/area_registry";
-import { getEnergyPreferences } from "../../../../data/energy";
 import type { LovelaceSectionConfig } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
@@ -12,13 +9,12 @@ import type {
   ButtonCardConfig,
   MarkdownCardConfig,
   TileCardConfig,
-  WeatherForecastCardConfig,
 } from "../../cards/types";
 import { getAreas } from "../areas/helpers/areas-strategy-helper";
-import { HOME_SUMMARIES_ICONS } from "./helpers/home-summaries";
+import { OVERVIEW_SUMMARIES_ICONS } from "./helpers/overview-summaries";
 
-export interface HomeMainViewStrategyConfig {
-  type: "home-main";
+export interface OverviewHomeViewStrategyConfig {
+  type: "overview-home";
   favorite_entities?: string[];
 }
 
@@ -48,10 +44,10 @@ const computeAreaCard = (
   };
 };
 
-@customElement("home-main-view-strategy")
-export class HomeMainViewStrategy extends ReactiveElement {
+@customElement("overview-home-view-strategy")
+export class OverviewHomeViewStrategy extends ReactiveElement {
   static async generate(
-    config: HomeMainViewStrategyConfig,
+    config: OverviewHomeViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const areas = getAreas(hass.areas);
@@ -96,7 +92,6 @@ export class HomeMainViewStrategy extends ReactiveElement {
             ({
               type: "tile",
               entity: entityId,
-              show_entity_picture: true,
             }) as TileCardConfig
         )
       );
@@ -112,7 +107,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
         },
         {
           type: "button",
-          icon: HOME_SUMMARIES_ICONS.lights,
+          icon: OVERVIEW_SUMMARIES_ICONS.lights,
           name: "Lights",
           icon_height: "24px",
           grid_options: {
@@ -126,7 +121,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
         } satisfies ButtonCardConfig,
         {
           type: "button",
-          icon: HOME_SUMMARIES_ICONS.climate,
+          icon: OVERVIEW_SUMMARIES_ICONS.climate,
           name: "Climate",
           icon_height: "30px",
           grid_options: {
@@ -140,7 +135,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
         } satisfies ButtonCardConfig,
         {
           type: "button",
-          icon: HOME_SUMMARIES_ICONS.security,
+          icon: OVERVIEW_SUMMARIES_ICONS.security,
           name: "Security",
           icon_height: "30px",
           grid_options: {
@@ -154,7 +149,7 @@ export class HomeMainViewStrategy extends ReactiveElement {
         } satisfies ButtonCardConfig,
         {
           type: "button",
-          icon: HOME_SUMMARIES_ICONS.media_players,
+          icon: OVERVIEW_SUMMARIES_ICONS.media_players,
           name: "Media Players",
           icon_height: "30px",
           grid_options: {
@@ -166,62 +161,27 @@ export class HomeMainViewStrategy extends ReactiveElement {
             navigation_path: "media-players",
           },
         } satisfies ButtonCardConfig,
+        {
+          type: "button",
+          icon: "mdi:lightning-bolt",
+          name: "Energy",
+          icon_height: "30px",
+          grid_options: {
+            rows: 2,
+            columns: 4,
+          },
+          tap_action: {
+            action: "navigate",
+            navigation_path: "/energy?historyBack=1",
+          },
+        } satisfies ButtonCardConfig,
       ],
     };
 
-    const weatherFilter = generateEntityFilter(hass, {
-      domain: "weather",
-      entity_category: "none",
-    });
-
-    const widgetSection: LovelaceSectionConfig = {
-      type: "grid",
-      column_span: maxColumns,
-      cards: [],
-    };
-    const weatherEntity = Object.keys(hass.states).find(weatherFilter);
-
-    if (weatherEntity) {
-      widgetSection.cards!.push(
-        {
-          type: "heading",
-          heading: "",
-          heading_style: "subtitle",
-        },
-        {
-          type: "weather-forecast",
-          entity: weatherEntity,
-          forecast_type: "daily",
-        } as WeatherForecastCardConfig
-      );
-    }
-
-    const energyPrefs = isComponentLoaded(hass, "energy")
-      ? // It raises if not configured, just swallow that.
-        await getEnergyPreferences(hass).catch(() => undefined)
-      : undefined;
-
-    if (energyPrefs) {
-      const grid = energyPrefs.energy_sources.find(
-        (source) => source.type === "grid"
-      );
-
-      if (grid && grid.flow_from.length > 0) {
-        widgetSection.cards!.push({
-          title: hass.localize(
-            "ui.panel.lovelace.cards.energy.energy_distribution.title_today"
-          ),
-          type: "energy-distribution",
-          link_dashboard: true,
-        });
-      }
-    }
-
     const sections = [
       ...(favoriteSection.cards ? [favoriteSection] : []),
       summarySection,
       areasSection,
-      ...(widgetSection.cards ? [widgetSection] : []),
     ];
     return {
       type: "sections",
@@ -241,6 +201,6 @@ export class HomeMainViewStrategy extends ReactiveElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "home-main-view-strategy": HomeMainViewStrategy;
+    "overview-home-view-strategy": OverviewHomeViewStrategy;
   }
 }

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

@@ -1,6 +1,8 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import { generateEntityFilter } from "../../../../common/entity/entity_filter";
+import { clamp } from "../../../../common/number/clamp";
+import { floorDefaultIcon } from "../../../../components/ha-floor-icon";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
@@ -10,11 +12,14 @@ import {
   getAreas,
   getFloors,
 } from "../areas/helpers/areas-strategy-helper";
-import { getHomeStructure } from "./helpers/home-structure";
-import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
+import { getHomeStructure } from "./helpers/overview-home-structure";
+import {
+  findEntities,
+  OVERVIEW_SUMMARIES_FILTERS,
+} from "./helpers/overview-summaries";
 
-export interface HomeLightsViewStrategyConfig {
-  type: "home-lights";
+export interface OverviewLightsViewStrategyConfig {
+  type: "overview-lights";
 }
 
 const processAreasForLights = (
@@ -40,6 +45,7 @@ const processAreasForLights = (
         heading_style: "subtitle",
         type: "heading",
         heading: area.name,
+        icon: area.icon || "mdi:home",
         tap_action: {
           action: "navigate",
           navigation_path: `areas-${area.area_id}`,
@@ -55,10 +61,10 @@ const processAreasForLights = (
   return cards;
 };
 
-@customElement("home-lights-view-strategy")
-export class HomeLightsViewStrategy extends ReactiveElement {
+@customElement("overview-lights-view-strategy")
+export class OverviewLightsViewStrategy extends ReactiveElement {
   static async generate(
-    _config: HomeLightsViewStrategyConfig,
+    _config: OverviewLightsViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const areas = getAreas(hass.areas);
@@ -69,7 +75,7 @@ export class HomeLightsViewStrategy extends ReactiveElement {
 
     const allEntities = Object.keys(hass.states);
 
-    const lightsFilters = HOME_SUMMARIES_FILTERS.lights.map((filter) =>
+    const lightsFilters = OVERVIEW_SUMMARIES_FILTERS.lights.map((filter) =>
       generateEntityFilter(hass, filter)
     );
 
@@ -85,11 +91,11 @@ export class HomeLightsViewStrategy extends ReactiveElement {
 
       const section: LovelaceSectionRawConfig = {
         type: "grid",
-        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? floor.name : "Areas",
+            icon: floor.icon || floorDefaultIcon(floor) || "mdi:home-floor",
           },
         ],
       };
@@ -106,11 +112,11 @@ export class HomeLightsViewStrategy extends ReactiveElement {
     if (home.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
-        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? "Other areas" : "Areas",
+            icon: "mdi:home",
           },
         ],
       };
@@ -123,9 +129,17 @@ export class HomeLightsViewStrategy extends ReactiveElement {
       }
     }
 
+    // Allow between 2 and 3 columns (the max should be set to define the width of the header)
+    const maxColumns = clamp(sections.length, 2, 3);
+
+    // Take the full width if there is only one section to avoid narrow header on desktop
+    if (sections.length === 1) {
+      sections[0].column_span = 2;
+    }
+
     return {
       type: "sections",
-      max_columns: 2,
+      max_columns: maxColumns,
       sections: sections || [],
     };
   }
@@ -133,6 +147,6 @@ export class HomeLightsViewStrategy extends ReactiveElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "home-lights-view-strategy": HomeLightsViewStrategy;
+    "overview-lights-view-strategy": OverviewLightsViewStrategy;
   }
 }

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

@@ -1,17 +1,22 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import { generateEntityFilter } from "../../../../common/entity/entity_filter";
+import { clamp } from "../../../../common/number/clamp";
+import { floorDefaultIcon } from "../../../../components/ha-floor-icon";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
 import type { MediaControlCardConfig } from "../../cards/types";
 import { getAreas, getFloors } from "../areas/helpers/areas-strategy-helper";
-import { getHomeStructure } from "./helpers/home-structure";
-import { findEntities, HOME_SUMMARIES_FILTERS } from "./helpers/home-summaries";
+import { getHomeStructure } from "./helpers/overview-home-structure";
+import {
+  findEntities,
+  OVERVIEW_SUMMARIES_FILTERS,
+} from "./helpers/overview-summaries";
 
-export interface HomeMediaPlayersViewStrategyConfig {
-  type: "home-media-players";
+export interface OvervieMediaPlayersViewStrategyConfig {
+  type: "overview-media-players";
 }
 
 const processAreasForMediaPlayers = (
@@ -35,6 +40,7 @@ const processAreasForMediaPlayers = (
         heading_style: "subtitle",
         type: "heading",
         heading: area.name,
+        icon: area.icon || "mdi:home",
         tap_action: {
           action: "navigate",
           navigation_path: `areas-${area.area_id}`,
@@ -53,10 +59,10 @@ const processAreasForMediaPlayers = (
   return cards;
 };
 
-@customElement("home-media-players-view-strategy")
-export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
+@customElement("overview-media-players-view-strategy")
+export class OverviewMediaPlayersViewStrategy extends ReactiveElement {
   static async generate(
-    _config: HomeMediaPlayersViewStrategyConfig,
+    _config: OvervieMediaPlayersViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const areas = getAreas(hass.areas);
@@ -67,11 +73,11 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
 
     const allEntities = Object.keys(hass.states);
 
-    const mediaPlayersFilters = HOME_SUMMARIES_FILTERS.media_players.map(
+    const filterFunctions = OVERVIEW_SUMMARIES_FILTERS.media_players.map(
       (filter) => generateEntityFilter(hass, filter)
     );
 
-    const entities = findEntities(allEntities, mediaPlayersFilters);
+    const entities = findEntities(allEntities, filterFunctions);
 
     const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
 
@@ -83,11 +89,11 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
 
       const section: LovelaceSectionRawConfig = {
         type: "grid",
-        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? floor.name : "Areas",
+            icon: floor.icon || floorDefaultIcon(floor) || "mdi:home-floor",
           },
         ],
       };
@@ -104,11 +110,11 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
     if (home.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
-        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? "Other areas" : "Areas",
+            icon: "mdi:home",
           },
         ],
       };
@@ -121,9 +127,17 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
       }
     }
 
+    // Allow between 2 and 3 columns (the max should be set to define the width of the header)
+    const maxColumns = clamp(sections.length, 2, 3);
+
+    // Take the full width if there is only one section to avoid narrow header on desktop
+    if (sections.length === 1) {
+      sections[0].column_span = 2;
+    }
+
     return {
       type: "sections",
-      max_columns: 2,
+      max_columns: maxColumns,
       sections: sections || [],
     };
   }
@@ -131,6 +145,6 @@ export class HomeMMediaPlayersViewStrategy extends ReactiveElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "home-media-players-view-strategy": HomeMMediaPlayersViewStrategy;
+    "overview-media-players-view-strategy": OverviewMediaPlayersViewStrategy;
   }
 }

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

@@ -1,7 +1,8 @@
 import { ReactiveElement } from "lit";
 import { customElement } from "lit/decorators";
 import { generateEntityFilter } from "../../../../common/entity/entity_filter";
-import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
+import { clamp } from "../../../../common/number/clamp";
+import { floorDefaultIcon } from "../../../../components/ha-floor-icon";
 import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/section";
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
@@ -10,12 +11,15 @@ import {
   getAreas,
   getFloors,
 } 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 {
+  findEntities,
+  OVERVIEW_SUMMARIES_FILTERS,
+} from "./helpers/overview-summaries";
+import { getHomeStructure } from "./helpers/overview-home-structure";
+import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 
-export interface HomeSecurityViewStrategyConfig {
-  type: "home-security";
+export interface OverviewSecurityViewStrategyConfig {
+  type: "overview-security";
 }
 
 const processAreasForSecurity = (
@@ -24,8 +28,6 @@ const processAreasForSecurity = (
   entities: string[]
 ): LovelaceCardConfig[] => {
   const cards: LovelaceCardConfig[] = [];
-  const computeTileCard = computeAreaTileCardConfig(hass, "", false);
-  const computeTileCardWithFeature = computeAreaTileCardConfig(hass, "", true);
 
   for (const areaId of areaIds) {
     const area = hass.areas[areaId];
@@ -36,11 +38,14 @@ const processAreasForSecurity = (
     });
     const areaEntities = entities.filter(areaFilter);
 
+    const computeTileCard = computeAreaTileCardConfig(hass, "", true);
+
     if (areaEntities.length > 0) {
       cards.push({
         heading_style: "subtitle",
         type: "heading",
         heading: area.name,
+        icon: area.icon || "mdi:home",
         tap_action: {
           action: "navigate",
           navigation_path: `areas-${area.area_id}`,
@@ -48,12 +53,7 @@ const processAreasForSecurity = (
       });
 
       for (const entityId of areaEntities) {
-        cards.push(
-          computeDomain(entityId) === "binary_sensor" &&
-            hass.states[entityId]?.attributes.device_class === "motion"
-            ? computeTileCardWithFeature(entityId)
-            : computeTileCard(entityId)
-        );
+        cards.push(computeTileCard(entityId));
       }
     }
   }
@@ -61,10 +61,10 @@ const processAreasForSecurity = (
   return cards;
 };
 
-@customElement("home-security-view-strategy")
-export class HomeSecurityViewStrategy extends ReactiveElement {
+@customElement("overview-security-view-strategy")
+export class OverviewSecurityViewStrategy extends ReactiveElement {
   static async generate(
-    _config: HomeSecurityViewStrategyConfig,
+    _config: OverviewSecurityViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const areas = getAreas(hass.areas);
@@ -75,11 +75,11 @@ export class HomeSecurityViewStrategy extends ReactiveElement {
 
     const allEntities = Object.keys(hass.states);
 
-    const securityFilters = HOME_SUMMARIES_FILTERS.security.map((filter) =>
+    const filterFunctions = OVERVIEW_SUMMARIES_FILTERS.security.map((filter) =>
       generateEntityFilter(hass, filter)
     );
 
-    const entities = findEntities(allEntities, securityFilters);
+    const entities = findEntities(allEntities, filterFunctions);
 
     const floorCount = home.floors.length + (home.areas.length ? 1 : 0);
 
@@ -91,11 +91,11 @@ export class HomeSecurityViewStrategy extends ReactiveElement {
 
       const section: LovelaceSectionRawConfig = {
         type: "grid",
-        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? floor.name : "Areas",
+            icon: floor.icon || floorDefaultIcon(floor) || "mdi:home-floor",
           },
         ],
       };
@@ -112,11 +112,11 @@ export class HomeSecurityViewStrategy extends ReactiveElement {
     if (home.areas.length > 0) {
       const section: LovelaceSectionRawConfig = {
         type: "grid",
-        column_span: 2,
         cards: [
           {
             type: "heading",
             heading: floorCount > 1 ? "Other areas" : "Areas",
+            icon: "mdi:home",
           },
         ],
       };
@@ -129,9 +129,17 @@ export class HomeSecurityViewStrategy extends ReactiveElement {
       }
     }
 
+    // Allow between 2 and 3 columns (the max should be set to define the width of the header)
+    const maxColumns = clamp(sections.length, 2, 3);
+
+    // Take the full width if there is only one section to avoid narrow header on desktop
+    if (sections.length === 1) {
+      sections[0].column_span = 2;
+    }
+
     return {
       type: "sections",
-      max_columns: 2,
+      max_columns: maxColumns,
       sections: sections || [],
     };
   }
@@ -139,6 +147,6 @@ export class HomeSecurityViewStrategy extends ReactiveElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "home-security-view-strategy": HomeSecurityViewStrategy;
+    "overview-security-view-strategy": OverviewSecurityViewStrategy;
   }
 }