Add buttons on mobile to move sections

This reverts commit 3abdffda9c.

.devcontainer/devcontainer.json

@@ -2,12 +2,13 @@
   "name": "Home Assistant Frontend",
   "build": {
     "dockerfile": "Dockerfile",
-    "context": "..",
+    "context": ".."
   },
   "appPort": "8124:8123",
+  "postCreateCommand": "sudo apt update && sudo apt upgrade -y && sudo apt install -y libpcap-dev",
   "postStartCommand": "script/bootstrap",
   "containerEnv": {
-    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}",
+    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
   },
   "customizations": {
     "vscode": {
@@ -16,7 +17,7 @@
         "esbenp.prettier-vscode",
         "runem.lit-plugin",
         "github.vscode-pull-request-github",
-        "eamodio.gitlens",
+        "eamodio.gitlens"
       ],
       "settings": {
         "files.eol": "\n",
@@ -27,17 +28,17 @@
         "editor.renderWhitespace": "boundary",
         "editor.rulers": [80],
         "[typescript]": {
-          "editor.defaultFormatter": "esbenp.prettier-vscode",
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
         },
         "[javascript]": {
-          "editor.defaultFormatter": "esbenp.prettier-vscode",
+          "editor.defaultFormatter": "esbenp.prettier-vscode"
         },
         "files.trimTrailingWhitespace": true,
         "terminal.integrated.shell.linux": "/usr/bin/zsh",
         "gitlens.showWelcomeOnInstall": false,
         "gitlens.showWhatsNewAfterUpgrades": false,
-        "workbench.startupEditor": "none",
-      },
-    },
-  },
+        "workbench.startupEditor": "none"
+      }
+    }
+  }
 }

.github/workflows/cast_deployment.yaml

@@ -26,7 +26,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -62,7 +62,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/[email protected]
       - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -60,7 +60,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/[email protected]
       - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -78,7 +78,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/[email protected]
       - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -89,7 +89,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/[email protected].0
+        uses: actions/[email protected].1
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -102,7 +102,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/[email protected]
       - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -113,7 +113,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/[email protected].0
+        uses: actions/[email protected].1
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.github/workflows/demo_deployment.yaml

@@ -27,7 +27,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -63,7 +63,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_deployment.yaml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/[email protected]
 
       - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_preview.yaml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/[email protected]
 
       - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/nightly.yaml

@@ -28,7 +28,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/[email protected].0
+        uses: actions/[email protected].1
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/[email protected].0
+        uses: actions/[email protected].1
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/release.yaml

@@ -34,7 +34,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/[email protected].1
+        uses: actions/[email protected].2
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.yarn/patches/@lrnwebcomponents-simple-tooltip-npm-8.0.0-77591f2e0c.patch

@@ -0,0 +1,13 @@
+diff --git a/simple-tooltip.js b/simple-tooltip.js
+index 78a87f6a223925f0e29fbedb268c85a142ec6985..3d686dd6a3d5a93342b4b01408089fc316b408ca 100644
+--- a/simple-tooltip.js
++++ b/simple-tooltip.js
+@@ -195,6 +195,8 @@ class SimpleTooltip extends LitElement {
+         .hidden {
+           position: absolute;
+           left: -10000px;
++          inset-inline-start: -10000px;
++          inset-inline-end: initial;
+           top: auto;
+           width: 1px;
+           height: 1px;

build-scripts/gulp/webpack.js

@@ -115,7 +115,9 @@ gulp.task("webpack-prod-app", () =>
 
 gulp.task("webpack-dev-server-demo", () =>
   runDevServer({
-    compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
+    compiler: webpack(
+      createDemoConfig({ isProdBuild: false, latestBuild: true })
+    ),
     contentBase: paths.demo_output_root,
     port: 8090,
   })
@@ -131,7 +133,9 @@ gulp.task("webpack-prod-demo", () =>
 
 gulp.task("webpack-dev-server-cast", () =>
   runDevServer({
-    compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
+    compiler: webpack(
+      createCastConfig({ isProdBuild: false, latestBuild: true })
+    ),
     contentBase: paths.cast_output_root,
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
@@ -174,8 +178,9 @@ gulp.task("webpack-prod-hassio", () =>
 
 gulp.task("webpack-dev-server-gallery", () =>
   runDevServer({
-    // We don't use the es5 build, but the dev server will fuck up the publicPath if we don't
-    compiler: webpack(bothBuilds(createGalleryConfig, { isProdBuild: false })),
+    compiler: webpack(
+      createGalleryConfig({ isProdBuild: false, latestBuild: true })
+    ),
     contentBase: paths.gallery_output_root,
     port: 8100,
     listenHost: "0.0.0.0",

cast/src/receiver/layout/hc-launch-screen.ts

@@ -43,11 +43,6 @@ class HcLaunchScreen extends LitElement {
         max-width: 80%;
         object-fit: cover;
       }
-      .status {
-        padding-right: 54px;
-        padding-inline-end: 54px;
-        padding-inline-start: initial;
-      }
     `;
   }
 }

cast/src/receiver/layout/hc-main.ts

@@ -270,7 +270,7 @@ export class HcMain extends HassElement {
     }
 
     this._error = undefined;
-    if (msg.urlPath === "lovelace") {
+    if (msg.urlPath === "lovelace" || msg.urlPath === undefined) {
       msg.urlPath = null;
     }
     this._lovelacePath = msg.viewPath;

gallery/src/components/demo-black-white-row.ts

@@ -1,5 +1,5 @@
 import { Button } from "@material/mwc-button";
-import { html, LitElement, css, TemplateResult } from "lit";
+import { html, LitElement, css, TemplateResult, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
@@ -9,7 +9,7 @@ import "../../../src/components/ha-card";
 class DemoBlackWhiteRow extends LitElement {
   @property() title!: string;
 
-  @property() value!: any;
+  @property() value?: any;
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -45,7 +45,9 @@ class DemoBlackWhiteRow extends LitElement {
               </mwc-button>
             </div>
           </ha-card>
-          <pre>${JSON.stringify(this.value, undefined, 2)}</pre>
+          ${this.value
+            ? html`<pre>${JSON.stringify(this.value, undefined, 2)}</pre>`
+            : nothing}
         </div>
       </div>
     `;

gallery/src/data/traces/basic_trace.ts

@@ -17,6 +17,7 @@ export const basicTrace: DemoTrace = {
         {
           path: "trigger/0",
           timestamp: "2021-03-25T04:36:51.223693+00:00",
+          changed_variables: {},
         },
       ],
       "condition/0": [

gallery/src/data/traces/motion-light-trace.ts

@@ -17,6 +17,7 @@ export const motionLightTrace: DemoTrace = {
         {
           path: "trigger/0",
           timestamp: "2021-03-25T04:36:51.223693+00:00",
+          changed_variables: {},
         },
       ],
       "action/0": [

gallery/src/pages/automation/trace-timeline.ts

@@ -55,6 +55,7 @@ export class DemoAutomationTraceTimeline extends LitElement {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
   }
 
   static get styles() {

gallery/src/pages/automation/trace.ts

@@ -60,6 +60,7 @@ export class DemoAutomationTrace extends LitElement {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
   }
 
   static get styles() {

gallery/src/pages/components/ha-selector.ts

@@ -275,6 +275,14 @@ const SCHEMAS: {
         selector: { color_temp: {} },
       },
       color_rgb: { name: "Color", selector: { color_rgb: {} } },
+      qr_code: {
+        name: "QR Code",
+        selector: { qr_code: { data: "https://home-assistant.io" } },
+      },
+      constant: {
+        name: "Constant",
+        selector: { constant: { value: true, label: "Yes!" } },
+      },
     },
   },
   {
@@ -501,7 +509,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
           this.requestUpdate();
         };
         return html`
-          <demo-black-white-row .title=${info.name} .value=${this.data[idx]}>
+          <demo-black-white-row .title=${info.name}>
             ${["light", "dark"].map((slot) =>
               Object.entries(info.input).map(
                 ([key, value]) => html`
@@ -534,8 +542,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
   }
 
   static styles = css`
-    ha-selector {
-      width: 60;
+    ha-settings-row {
+      --paper-item-body-two-line-min-height: 0;
     }
     .options {
       max-width: 800px;

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

@@ -1263,6 +1263,7 @@ class HassioAddonInfo extends LitElement {
         .card-actions {
           justify-content: space-between;
           display: flex;
+          direction: var(--direction);
         }
         .changelog {
           display: contents;

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -154,12 +154,16 @@ class HassioHardwareDialog extends LitElement {
         ha-icon-button {
           position: absolute;
           right: 16px;
+          inset-inline-end: 16px;
+          inset-inline-start: initial;
           top: 10px;
           text-decoration: none;
           color: var(--primary-text-color);
         }
         h2 {
           margin: 18px 42px 0 18px;
+          margin-inline-start: 18px;
+          margin-inline-end: 42px;
           color: var(--primary-text-color);
         }
 

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -1,7 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import { mdiDelete, mdiDeleteOff } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
 import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -27,6 +25,8 @@ import type { HomeAssistant } from "../../../../src/types";
 import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
 import type { HaTextField } from "../../../../src/components/ha-textfield";
 import "../../../../src/components/ha-textfield";
+import "../../../../src/components/ha-list-new";
+import "../../../../src/components/ha-list-item-new";
 
 @customElement("dialog-hassio-repositories")
 class HassioRepositoriesDialog extends LitElement {
@@ -106,44 +106,46 @@ class HassioRepositoriesDialog extends LitElement {
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
         <div class="form">
-          ${repositories.length
-            ? repositories.map(
-                (repo) => html`
-                  <paper-item class="option">
-                    <paper-item-body three-line>
-                      <div>${repo.name}</div>
-                      <div secondary>${repo.maintainer}</div>
-                      <div secondary>${repo.url}</div>
-                    </paper-item-body>
-                    <div class="delete">
-                      <ha-icon-button
-                        .label=${this._dialogParams!.supervisor.localize(
-                          "dialog.repositories.remove"
-                        )}
-                        .disabled=${usedRepositories.includes(repo.slug)}
-                        .slug=${repo.slug}
-                        .path=${usedRepositories.includes(repo.slug)
-                          ? mdiDeleteOff
-                          : mdiDelete}
-                        @click=${this._removeRepository}
-                      >
-                      </ha-icon-button>
-                      <simple-tooltip
-                        animation-delay="0"
-                        position="bottom"
-                        offset="1"
-                      >
-                        ${this._dialogParams!.supervisor.localize(
-                          usedRepositories.includes(repo.slug)
-                            ? "dialog.repositories.used"
-                            : "dialog.repositories.remove"
-                        )}
-                      </simple-tooltip>
-                    </div>
-                  </paper-item>
-                `
-              )
-            : html`<paper-item> No repositories </paper-item>`}
+          <ha-list-new>
+            ${repositories.length
+              ? repositories.map(
+                  (repo) => html`
+                    <ha-list-item-new class="option">
+                      ${repo.name}
+                      <div slot="supporting-text">
+                        <div>${repo.maintainer}</div>
+                        <div>${repo.url}</div>
+                      </div>
+                      <div class="delete" slot="end">
+                        <ha-icon-button
+                          .label=${this._dialogParams!.supervisor.localize(
+                            "dialog.repositories.remove"
+                          )}
+                          .disabled=${usedRepositories.includes(repo.slug)}
+                          .slug=${repo.slug}
+                          .path=${usedRepositories.includes(repo.slug)
+                            ? mdiDeleteOff
+                            : mdiDelete}
+                          @click=${this._removeRepository}
+                        >
+                        </ha-icon-button>
+                        <simple-tooltip
+                          animation-delay="0"
+                          position="bottom"
+                          offset="1"
+                        >
+                          ${this._dialogParams!.supervisor.localize(
+                            usedRepositories.includes(repo.slug)
+                              ? "dialog.repositories.used"
+                              : "dialog.repositories.remove"
+                          )}
+                        </simple-tooltip>
+                      </div>
+                    </ha-list-item-new>
+                  `
+                )
+              : html`<ha-list-item-new> No repositories </ha-list-item-new>`}
+          </ha-list-new>
           <div class="layout horizontal bottom">
             <ha-textfield
               class="flex-auto"
@@ -206,6 +208,9 @@ class HassioRepositoriesDialog extends LitElement {
         div.delete ha-icon-button {
           color: var(--error-color);
         }
+        ha-list-item-new {
+          position: relative;
+        }
       `,
     ];
   }

package.json

@@ -31,9 +31,9 @@
     "@codemirror/commands": "6.3.3",
     "@codemirror/language": "6.10.1",
     "@codemirror/legacy-modes": "6.3.3",
-    "@codemirror/search": "6.5.5",
-    "@codemirror/state": "6.4.0",
-    "@codemirror/view": "6.23.1",
+    "@codemirror/search": "6.5.6",
+    "@codemirror/state": "6.4.1",
+    "@codemirror/view": "6.24.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.12.2",
     "@formatjs/intl-displaynames": "6.6.6",
@@ -43,18 +43,18 @@
     "@formatjs/intl-numberformat": "8.10.0",
     "@formatjs/intl-pluralrules": "5.2.12",
     "@formatjs/intl-relativetimeformat": "11.2.12",
-    "@fullcalendar/core": "6.1.10",
-    "@fullcalendar/daygrid": "6.1.10",
-    "@fullcalendar/interaction": "6.1.10",
-    "@fullcalendar/list": "6.1.10",
-    "@fullcalendar/luxon3": "6.1.10",
-    "@fullcalendar/timegrid": "6.1.10",
+    "@fullcalendar/core": "6.1.11",
+    "@fullcalendar/daygrid": "6.1.11",
+    "@fullcalendar/interaction": "6.1.11",
+    "@fullcalendar/list": "6.1.11",
+    "@fullcalendar/luxon3": "6.1.11",
+    "@fullcalendar/timegrid": "6.1.11",
     "@lezer/highlight": "1.2.0",
     "@lit-labs/context": "0.4.1",
     "@lit-labs/motion": "1.0.7",
     "@lit-labs/observers": "2.0.2",
     "@lit-labs/virtualizer": "2.0.12",
-    "@lrnwebcomponents/simple-tooltip": "8.0.0",
+    "@lrnwebcomponents/simple-tooltip": "patch:@lrnwebcomponents/simple-tooltip@npm%3A8.0.0#~/.yarn/patches/@lrnwebcomponents-simple-tooltip-npm-8.0.0-77591f2e0c.patch",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
     "@material/mwc-base": "0.27.0",
@@ -72,6 +72,7 @@
     "@material/mwc-radio": "0.27.0",
     "@material/mwc-ripple": "0.27.0",
     "@material/mwc-select": "0.27.0",
+    "@material/mwc-snackbar": "0.27.0",
     "@material/mwc-switch": "0.27.0",
     "@material/mwc-tab": "0.27.0",
     "@material/mwc-tab-bar": "0.27.0",
@@ -80,17 +81,16 @@
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "=1.2.0",
+    "@material/web": "=1.3.0",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@polymer/paper-item": "3.0.1",
     "@polymer/paper-listbox": "3.0.1",
     "@polymer/paper-tabs": "3.1.0",
-    "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.3.5",
-    "@vaadin/vaadin-themable-mixin": "24.3.5",
+    "@vaadin/combo-box": "24.3.7",
+    "@vaadin/vaadin-themable-mixin": "24.3.7",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -99,8 +99,9 @@
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
     "chart.js": "4.4.1",
+    "color-name": "2.0.0",
     "comlink": "4.4.1",
-    "core-js": "3.35.1",
+    "core-js": "3.36.0",
     "cropperjs": "1.6.1",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
@@ -109,7 +110,7 @@
     "element-internals-polyfill": "1.3.10",
     "fuse.js": "7.0.0",
     "google-timezones-json": "1.2.0",
-    "hls.js": "1.5.3",
+    "hls.js": "1.5.7",
     "home-assistant-js-websocket": "9.1.0",
     "idb-keyval": "6.2.1",
     "intl-messageformat": "10.5.11",
@@ -118,7 +119,7 @@
     "leaflet-draw": "1.0.4",
     "lit": "2.8.0",
     "luxon": "3.4.4",
-    "marked": "11.2.0",
+    "marked": "12.0.0",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "0.3.2",
@@ -155,11 +156,11 @@
     "@babel/plugin-transform-runtime": "7.23.9",
     "@babel/preset-env": "7.23.9",
     "@babel/preset-typescript": "7.23.3",
-    "@bundle-stats/plugin-webpack-filter": "4.9.2",
+    "@bundle-stats/plugin-webpack-filter": "4.10.1",
     "@koa/cors": "5.0.0",
     "@lokalise/node-api": "12.1.0",
-    "@octokit/auth-oauth-device": "6.0.1",
-    "@octokit/plugin-retry": "6.0.1",
+    "@octokit/auth-oauth-device": "7.0.0",
+    "@octokit/plugin-retry": "7.0.1",
     "@octokit/rest": "20.0.2",
     "@open-wc/dev-server-hmr": "0.1.4",
     "@rollup/plugin-babel": "6.0.4",
@@ -170,6 +171,7 @@
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.13",
     "@types/chromecast-caf-sender": "1.0.8",
+    "@types/color-name": "1.1.3",
     "@types/glob": "8.1.0",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
@@ -179,19 +181,19 @@
     "@types/mocha": "10.0.6",
     "@types/qrcode": "1.5.5",
     "@types/serve-handler": "6.1.4",
-    "@types/sortablejs": "1.15.7",
+    "@types/sortablejs": "1.15.8",
     "@types/tar": "6.1.11",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "6.20.0",
-    "@typescript-eslint/parser": "6.20.0",
+    "@typescript-eslint/eslint-plugin": "7.1.0",
+    "@typescript-eslint/parser": "7.1.0",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",
     "babel-plugin-template-html-minifier": "4.1.0",
-    "chai": "5.0.3",
+    "chai": "5.1.0",
     "del": "7.1.0",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.1.0",
     "eslint-config-prettier": "9.1.0",
@@ -200,31 +202,31 @@
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-lit": "1.11.0",
     "eslint-plugin-lit-a11y": "4.1.2",
-    "eslint-plugin-unused-imports": "3.0.0",
+    "eslint-plugin-unused-imports": "3.1.0",
     "eslint-plugin-wc": "2.0.4",
     "fancy-log": "2.0.0",
     "fs-extra": "11.2.0",
     "glob": "10.3.10",
     "gulp": "4.0.2",
     "gulp-flatmap": "1.0.2",
-    "gulp-json-transform": "0.4.8",
+    "gulp-json-transform": "0.5.0",
     "gulp-merge-json": "2.1.2",
     "gulp-rename": "2.0.0",
     "gulp-zopfli-green": "6.0.1",
     "html-minifier-terser": "7.2.0",
-    "husky": "9.0.10",
+    "husky": "9.0.11",
     "instant-mocha": "1.5.2",
     "jszip": "3.10.1",
-    "lint-staged": "15.2.1",
+    "lint-staged": "15.2.2",
     "lit-analyzer": "2.0.3",
     "lodash.template": "4.5.0",
-    "magic-string": "0.30.6",
+    "magic-string": "0.30.7",
     "map-stream": "0.0.7",
-    "mocha": "10.2.0",
+    "mocha": "10.3.0",
     "object-hash": "3.0.0",
-    "open": "10.0.3",
+    "open": "10.0.4",
     "pinst": "3.0.0",
-    "prettier": "3.2.4",
+    "prettier": "3.2.5",
     "rollup": "2.79.1",
     "rollup-plugin-string": "3.0.0",
     "rollup-plugin-terser": "7.0.2",
@@ -240,12 +242,12 @@
     "typescript": "5.3.3",
     "vinyl-buffer": "1.0.1",
     "vinyl-source-stream": "2.0.0",
-    "webpack": "5.90.1",
+    "webpack": "5.90.3",
     "webpack-cli": "5.1.4",
-    "webpack-dev-server": "4.15.1",
+    "webpack-dev-server": "5.0.2",
     "webpack-manifest-plugin": "5.0.0",
     "webpack-stats-plugin": "1.1.3",
-    "webpackbar": "6.0.0",
+    "webpackbar": "6.0.1",
     "workbox-build": "7.0.0"
   },
   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20240207.1"
+version      = "20240228.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

script/core

@@ -40,6 +40,7 @@ if [ -n "$ref" ]; then
   echo "Installing Home Assistant core at ${ref}..."
   python3 -m pip install --user --upgrade --src "$HOME/src" \
   --editable "git+${coreURL}@${ref}#egg=homeassistant"
+  (cd ~/src/homeassistant && exec python3 -m script.translations develop --all)
 fi
 
 if [ ! -d "${WD}/config" ]; then

src/common/config/can_show_page.ts

@@ -1,19 +1,25 @@
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../types";
+import { ensureArray } from "../array/ensure-array";
 import { isComponentLoaded } from "./is_component_loaded";
 
 export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
   (isCore(page) || isLoadedIntegration(hass, page)) &&
-  !hideAdvancedPage(hass, page);
+  !hideAdvancedPage(hass, page) &&
+  isNotLoadedIntegration(hass, page);
 
 const isLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
-  page.component
-    ? isComponentLoaded(hass, page.component)
-    : page.components
-      ? page.components.some((integration) =>
-          isComponentLoaded(hass, integration)
-        )
-      : true;
+  !page.component ||
+  ensureArray(page.component).some((integration) =>
+    isComponentLoaded(hass, integration)
+  );
+
+const isNotLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
+  !page.not_component ||
+  !ensureArray(page.not_component).some((integration) =>
+    isComponentLoaded(hass, integration)
+  );
+
 const isCore = (page: PageNavigation) => page.core;
 const isAdvancedPage = (page: PageNavigation) => page.advancedOnly;
 const userWantsAdvanced = (hass: HomeAssistant) => hass.userData?.showAdvanced;

src/common/dom/get_main_window.ts

@@ -1,8 +1,13 @@
 import { MAIN_WINDOW_NAME } from "../../data/main_window";
 
-export const mainWindow =
-  window.name === MAIN_WINDOW_NAME
-    ? window
-    : parent.name === MAIN_WINDOW_NAME
-      ? parent
-      : top!;
+export const mainWindow = (() => {
+  try {
+    return window.name === MAIN_WINDOW_NAME
+      ? window
+      : parent.name === MAIN_WINDOW_NAME
+        ? parent
+        : top!;
+  } catch {
+    return window;
+  }
+})();

src/common/entity/compute_attribute_display.ts

@@ -53,9 +53,7 @@ export const computeAttributeValueDisplay = (
 
     if (domain === "weather") {
       unit = getWeatherUnit(config, stateObj as WeatherEntity, attribute);
-    }
-
-    if (TEMPERATURE_ATTRIBUTES.has(attribute)) {
+    } else if (TEMPERATURE_ATTRIBUTES.has(attribute)) {
       unit = config.unit_system.temperature;
     }
 

src/common/util/array-move.ts

@@ -20,14 +20,14 @@ function findNestedItem(
   }, obj);
 }
 
-export function nestedArrayMove<T>(
-  obj: T | T[],
+export function nestedArrayMove<A>(
+  obj: A,
   oldIndex: number,
   newIndex: number,
   oldPath?: ItemPath,
   newPath?: ItemPath
-): T | T[] {
-  const newObj = Array.isArray(obj) ? [...obj] : { ...obj };
+): A {
+  const newObj = (Array.isArray(obj) ? [...obj] : { ...obj }) as A;
   const from = oldPath ? findNestedItem(newObj, oldPath) : newObj;
   const to = newPath ? findNestedItem(newObj, newPath, true) : newObj;
 

src/components/chart/ha-chart-base.ts

@@ -5,10 +5,18 @@ import type {
   ChartOptions,
   TooltipModel,
 } from "chart.js";
-import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  nothing,
+  LitElement,
+  PropertyValues,
+} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
+import { fireEvent } from "../../common/dom/fire_event";
 import { clamp } from "../../common/number/clamp";
 import { HomeAssistant } from "../../types";
 import { debounce } from "../../common/util/debounce";
@@ -27,6 +35,11 @@ interface Tooltip
   left: string;
 }
 
+export interface ChartDatasetExtra {
+  show_legend?: boolean;
+  legend_label?: string;
+}
+
 @customElement("ha-chart-base")
 export class HaChartBase extends LitElement {
   public chart?: Chart;
@@ -38,6 +51,8 @@ export class HaChartBase extends LitElement {
 
   @property({ attribute: false }) public data: ChartData = { datasets: [] };
 
+  @property({ attribute: false }) public extraData?: ChartDatasetExtra[];
+
   @property({ attribute: false }) public options?: ChartOptions;
 
   @property({ attribute: false }) public plugins?: any[];
@@ -46,6 +61,8 @@ export class HaChartBase extends LitElement {
 
   @property({ type: Number }) public paddingYAxis = 0;
 
+  @property({ type: Boolean }) public externalHidden = false;
+
   @state() private _chartHeight?: number;
 
   @state() private _tooltip?: Tooltip;
@@ -58,6 +75,8 @@ export class HaChartBase extends LitElement {
 
   private _paddingYAxisInternal = 0;
 
+  private _datasetOrder: number[] = [];
+
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._releaseCanvas();
@@ -148,6 +167,29 @@ export class HaChartBase extends LitElement {
       }
     }
 
+    // put the legend labels in sorted order if provided
+    if (changedProps.has("data")) {
+      this._datasetOrder = this.data.datasets.map((_, index) => index);
+      if (this.data?.datasets.some((dataset) => dataset.order)) {
+        this._datasetOrder.sort(
+          (a, b) =>
+            (this.data.datasets[a].order || 0) -
+            (this.data.datasets[b].order || 0)
+        );
+      }
+
+      if (this.externalHidden) {
+        this._hiddenDatasets = new Set();
+        if (this.data?.datasets) {
+          this.data.datasets.forEach((dataset, index) => {
+            if (dataset.hidden) {
+              this._hiddenDatasets.add(index);
+            }
+          });
+        }
+      }
+    }
+
     if (!this.hasUpdated || !this.chart) {
       return;
     }
@@ -157,7 +199,7 @@ export class HaChartBase extends LitElement {
       return;
     }
     if (changedProps.has("data")) {
-      if (this._hiddenDatasets.size) {
+      if (this._hiddenDatasets.size && !this.externalHidden) {
         this.data.datasets.forEach((dataset, index) => {
           dataset.hidden = this._hiddenDatasets.has(index);
         });
@@ -175,26 +217,32 @@ export class HaChartBase extends LitElement {
       ${this.options?.plugins?.legend?.display === true
         ? html`<div class="chartLegend">
             <ul>
-              ${this.data.datasets.map(
-                (dataset, index) =>
-                  html`<li
-                    .datasetIndex=${index}
-                    @click=${this._legendClick}
-                    class=${classMap({
-                      hidden: this._hiddenDatasets.has(index),
-                    })}
-                    .title=${dataset.label}
-                  >
-                    <div
-                      class="bullet"
-                      style=${styleMap({
-                        backgroundColor: dataset.backgroundColor as string,
-                        borderColor: dataset.borderColor as string,
+              ${this._datasetOrder.map((index) => {
+                const dataset = this.data.datasets[index];
+                return this.extraData?.[index]?.show_legend === false
+                  ? nothing
+                  : html`<li
+                      .datasetIndex=${index}
+                      @click=${this._legendClick}
+                      class=${classMap({
+                        hidden: this._hiddenDatasets.has(index),
                       })}
-                    ></div>
-                    <div class="label">${dataset.label}</div>
-                  </li>`
-              )}
+                      .title=${this.extraData?.[index]?.legend_label ??
+                      dataset.label}
+                    >
+                      <div
+                        class="bullet"
+                        style=${styleMap({
+                          backgroundColor: dataset.backgroundColor as string,
+                          borderColor: dataset.borderColor as string,
+                        })}
+                      ></div>
+                      <div class="label">
+                        ${this.extraData?.[index]?.legend_label ??
+                        dataset.label}
+                      </div>
+                    </li>`;
+              })}
             </ul>
           </div>`
         : ""}
@@ -211,9 +259,9 @@ export class HaChartBase extends LitElement {
             height: `${
               this.height ?? this._chartHeight ?? this.clientWidth / 2
             }px`,
-            "padding-left": `${this._paddingYAxisInternal}`,
+            "padding-left": `${this._paddingYAxisInternal}px`,
             "padding-right": 0,
-            "padding-inline-start": `${this._paddingYAxisInternal}`,
+            "padding-inline-start": `${this._paddingYAxisInternal}px`,
             "padding-inline-end": 0,
           })}
         >
@@ -339,9 +387,19 @@ export class HaChartBase extends LitElement {
     if (this.chart.isDatasetVisible(index)) {
       this.chart.setDatasetVisibility(index, false);
       this._hiddenDatasets.add(index);
+      if (this.externalHidden) {
+        fireEvent(this, "dataset-hidden", {
+          index,
+        });
+      }
     } else {
       this.chart.setDatasetVisibility(index, true);
       this._hiddenDatasets.delete(index);
+      if (this.externalHidden) {
+        fireEvent(this, "dataset-unhidden", {
+          index,
+        });
+      }
     }
     this.chart.update("none");
     this.requestUpdate("_hiddenDatasets");
@@ -486,4 +544,8 @@ declare global {
   interface HTMLElementTagNameMap {
     "ha-chart-base": HaChartBase;
   }
+  interface HASSDomEvents {
+    "dataset-hidden": { index: number };
+    "dataset-unhidden": { index: number };
+  }
 }

src/components/chart/state-history-chart-line.ts

@@ -111,7 +111,7 @@ export class StateHistoryChartLine extends LitElement {
                 config: this.hass.config,
               },
             },
-            suggestedMin: this.startTime,
+            min: this.startTime,
             suggestedMax: this.endTime,
             ticks: {
               maxRotation: 0,

src/components/chart/state-history-chart-timeline.ts

@@ -114,7 +114,7 @@ export class StateHistoryChartTimeline extends LitElement {
               config: this.hass.config,
             },
           },
-          suggestedMin: this.startTime,
+          min: this.startTime,
           suggestedMax: this.endTime,
           ticks: {
             autoSkip: true,

src/components/chart/state-history-charts.ts

@@ -233,16 +233,32 @@ export class StateHistoryCharts extends LitElement {
           new Date().getTime() - 60 * 60 * this.hoursToShow * 1000
         );
       } else {
-        this._computedStartTime = new Date(
-          (this.historyData?.timeline ?? []).reduce(
-            (minTime, stateInfo) =>
-              Math.min(
-                minTime,
-                new Date(stateInfo.data[0].last_changed).getTime()
-              ),
-            new Date().getTime()
-          )
+        let minTimeAll = (this.historyData?.timeline ?? []).reduce(
+          (minTime, stateInfo) =>
+            Math.min(
+              minTime,
+              new Date(stateInfo.data[0].last_changed).getTime()
+            ),
+          new Date().getTime()
         );
+
+        minTimeAll = (this.historyData?.line ?? []).reduce(
+          (minTimeLine, line) =>
+            Math.min(
+              minTimeLine,
+              line.data.reduce(
+                (minTimeData, data) =>
+                  Math.min(
+                    minTimeData,
+                    new Date(data.states[0].last_changed).getTime()
+                  ),
+                minTimeLine
+              )
+            ),
+          minTimeAll
+        );
+
+        this._computedStartTime = new Date(minTimeAll);
       }
     }
   }

src/components/chart/statistics-chart.ts

@@ -32,7 +32,11 @@ import {
 } from "../../data/recorder";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
-import type { ChartResizeOptions, HaChartBase } from "./ha-chart-base";
+import type {
+  ChartResizeOptions,
+  ChartDatasetExtra,
+  HaChartBase,
+} from "./ha-chart-base";
 
 export const supportedStatTypeMap: Record<StatisticType, StatisticType> = {
   mean: "mean",
@@ -79,10 +83,14 @@ export class StatisticsChart extends LitElement {
 
   @state() private _chartData: ChartData = { datasets: [] };
 
+  @state() private _chartDatasetExtra: ChartDatasetExtra[] = [];
+
   @state() private _statisticIds: string[] = [];
 
   @state() private _chartOptions?: ChartOptions;
 
+  @state() private _hiddenStats = new Set<string>();
+
   @query("ha-chart-base") private _chart?: HaChartBase;
 
   private _computedStyle?: CSSStyleDeclaration;
@@ -96,6 +104,9 @@ export class StatisticsChart extends LitElement {
   }
 
   public willUpdate(changedProps: PropertyValues) {
+    if (changedProps.has("legendMode")) {
+      this._hiddenStats.clear();
+    }
     if (
       !this.hasUpdated ||
       changedProps.has("unit") ||
@@ -110,7 +121,8 @@ export class StatisticsChart extends LitElement {
       changedProps.has("statisticsData") ||
       changedProps.has("statTypes") ||
       changedProps.has("chartType") ||
-      changedProps.has("hideLegend")
+      changedProps.has("hideLegend") ||
+      changedProps.has("_hiddenStats")
     ) {
       this._generateData();
     }
@@ -145,14 +157,30 @@ export class StatisticsChart extends LitElement {
 
     return html`
       <ha-chart-base
+        externalHidden
         .hass=${this.hass}
         .data=${this._chartData}
+        .extraData=${this._chartDatasetExtra}
         .options=${this._chartOptions}
         .chartType=${this.chartType}
+        @dataset-hidden=${this._datasetHidden}
+        @dataset-unhidden=${this._datasetUnhidden}
       ></ha-chart-base>
     `;
   }
 
+  private _datasetHidden(ev) {
+    ev.stopPropagation();
+    this._hiddenStats.add(this._statisticIds[ev.detail.index]);
+    this.requestUpdate("_hiddenStats");
+  }
+
+  private _datasetUnhidden(ev) {
+    ev.stopPropagation();
+    this._hiddenStats.delete(this._statisticIds[ev.detail.index]);
+    this.requestUpdate("_hiddenStats");
+  }
+
   private _createOptions(unit?: string) {
     this._chartOptions = {
       parsing: false,
@@ -274,6 +302,7 @@ export class StatisticsChart extends LitElement {
     let colorIndex = 0;
     const statisticsData = Object.entries(this.statisticsData);
     const totalDataSets: ChartDataset<"line">[] = [];
+    const totalDatasetExtras: ChartDatasetExtra[] = [];
     const statisticIds: string[] = [];
     let endTime: Date;
 
@@ -324,6 +353,7 @@ export class StatisticsChart extends LitElement {
 
       // The datasets for the current statistic
       const statDataSets: ChartDataset<"line">[] = [];
+      const statDatasetExtras: ChartDatasetExtra[] = [];
 
       const pushData = (
         start: Date,
@@ -384,9 +414,20 @@ export class StatisticsChart extends LitElement {
           })
         : this.statTypes;
 
+      let displayed_legend = false;
       sortedTypes.forEach((type) => {
         if (statisticsHaveType(stats, type)) {
           const band = drawBands && (type === "min" || type === "max");
+          if (!this.hideLegend) {
+            const show_legend = hasMean
+              ? type === "mean"
+              : displayed_legend === false;
+            statDatasetExtras.push({
+              legend_label: name,
+              show_legend,
+            });
+            displayed_legend = displayed_legend || show_legend;
+          }
           statTypes.push(type);
           statDataSets.push({
             label: name
@@ -408,6 +449,9 @@ export class StatisticsChart extends LitElement {
               band && hasMean ? color + (this.hideLegend ? "00" : "7F") : color,
             backgroundColor: band ? color + "3F" : color + "7F",
             pointRadius: 0,
+            hidden: !this.hideLegend
+              ? this._hiddenStats.has(statistic_id)
+              : false,
             data: [],
             // @ts-ignore
             unit: meta?.unit_of_measurement,
@@ -446,6 +490,7 @@ export class StatisticsChart extends LitElement {
 
       // Concat two arrays
       Array.prototype.push.apply(totalDataSets, statDataSets);
+      Array.prototype.push.apply(totalDatasetExtras, statDatasetExtras);
     });
 
     if (unit) {
@@ -455,6 +500,7 @@ export class StatisticsChart extends LitElement {
     this._chartData = {
       datasets: totalDataSets,
     };
+    this._chartDatasetExtra = totalDatasetExtras;
     this._statisticIds = statisticIds;
   }
 

src/components/chart/timeline-chart/timeline-controller.ts

@@ -205,7 +205,9 @@ export class TimelineController extends BarController {
 
       const y = vScale.getPixelForValue(this.index);
 
-      const xStart = iScale.getPixelForValue(data.start.getTime());
+      const xStart = iScale.getPixelForValue(
+        Math.max(iScale.min, data.start.getTime())
+      );
       const xEnd = iScale.getPixelForValue(data.end.getTime());
       const width = xEnd - xStart;
 

src/components/chart/timeline-chart/timeline-scale.ts

@@ -49,7 +49,7 @@ export class TimeLineScale extends TimeScale {
     max = isFinite(max) && !isNaN(max) ? max : +adapter.endOf(Date.now(), unit);
 
     // Make sure that max is strictly higher than min (required by the lookup table)
-    this.min = Math.min(min, max - 1);
-    this.max = Math.max(min + 1, max);
+    this.min = adapter.parse(options.min, this) ?? Math.min(min, max - 1);
+    this.max = adapter.parse(options.max, this) ?? Math.max(min + 1, max);
   }
 }

src/components/data-table/ha-data-table-icon.ts

@@ -44,6 +44,8 @@ class HaDataTableIcon extends LitElement {
       div {
         position: absolute;
         right: 28px;
+        inset-inline-end: 28px;
+        inset-inline-start: initial;
         z-index: 1002;
         outline: none;
         font-size: 10px;

src/components/entity/state-badge.ts

@@ -32,7 +32,9 @@ export class StateBadge extends LitElement {
 
   @property() public overrideImage?: string;
 
-  @property({ type: Boolean }) public stateColor = false;
+  // Cannot be a boolean attribute because undefined is treated different than
+  // false.  When it is undefined, state is still colored for light entities.
+  @property({ attribute: false }) public stateColor?: boolean;
 
   @property() public color?: string;
 
@@ -70,7 +72,7 @@ export class StateBadge extends LitElement {
     const domain = this.stateObj
       ? computeStateDomain(this.stateObj)
       : undefined;
-    return this.stateColor || (domain === "light" && this.stateColor !== false);
+    return this.stateColor ?? domain === "light";
   }
 
   protected render() {

src/components/ha-climate-state.ts

@@ -156,6 +156,7 @@ class HaClimateState extends LitElement {
 
       .current {
         color: var(--secondary-text-color);
+        direction: var(--direction);
       }
 
       .state-label {

src/components/ha-control-button.ts

@@ -127,9 +127,11 @@ export class HaControlButton extends LitElement {
           opacity 180ms ease-in-out;
         opacity: var(--control-button-background-opacity);
       }
-      .button ::slotted(*) {
+      .button {
         transition: color 180ms ease-in-out;
         color: var(--control-button-icon-color);
+      }
+      .button ::slotted(*) {
         pointer-events: none;
       }
       .button:disabled {

src/components/ha-control-number-buttons.ts

@@ -273,9 +273,13 @@ export class HaControlNumberButton extends LitElement {
       }
       .button.minus {
         left: 0;
+        inset-inline-start: 0;
+        inset-inline-end: initial;
       }
       .button.plus {
         right: 0;
+        inset-inline-start: initial;
+        inset-inline-end: 0;
       }
       .unit {
         white-space: pre;

src/components/ha-drawer.ts

@@ -3,7 +3,6 @@ import { styles } from "@material/mwc-drawer/mwc-drawer.css";
 import { css, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { mainWindow } from "../common/dom/get_main_window";
 
 const blockingElements = (document as any).$blockingElements;
 
@@ -34,7 +33,8 @@ export class HaDrawer extends DrawerBase {
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
     if (changedProps.has("direction")) {
-      if (mainWindow.document.dir === "rtl") {
+      this.mdcRoot.dir = this.direction;
+      if (this.direction === "rtl") {
         this._rtlStyle = document.createElement("style");
         this._rtlStyle.innerHTML = `
           .mdc-drawer--animate {

src/components/ha-form/compute-initial-ha-form-data.ts

@@ -54,7 +54,8 @@ export const computeInitialHaFormData = (
         "icon" in selector ||
         "template" in selector ||
         "text" in selector ||
-        "theme" in selector
+        "theme" in selector ||
+        "object" in selector
       ) {
         data[field.name] = "";
       } else if ("number" in selector) {

src/components/ha-formfield.ts

@@ -1,11 +1,13 @@
 import { FormfieldBase } from "@material/mwc-formfield/mwc-formfield-base";
 import { styles } from "@material/mwc-formfield/mwc-formfield.css";
 import { css } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 
 @customElement("ha-formfield")
 export class HaFormfield extends FormfieldBase {
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
   protected _labelClick() {
     const input = this.input as HTMLInputElement | undefined;
     if (!input) return;
@@ -44,6 +46,9 @@ export class HaFormfield extends FormfieldBase {
         padding-inline-start: 4px;
         padding-inline-end: 0;
       }
+      :host([disabled]) label {
+        color: var(--disabled-text-color);
+      }
     `,
   ];
 }

src/components/ha-menu-button.ts

@@ -136,6 +136,8 @@ class HaMenuButton extends LitElement {
         height: 12px;
         top: 9px;
         right: 7px;
+        inset-inline-end: 7px;
+        inset-inline-start: initial;
         border-radius: 50%;
         border: 2px solid var(--app-header-background-color);
       }

src/components/ha-metric.ts

@@ -19,7 +19,9 @@ class HaMetric extends LitElement {
       <ha-settings-row>
         <span slot="heading"> ${this.heading} </span>
         <div slot="description" .title=${this.tooltip ?? ""}>
-          <span class="value"> ${roundedValue} % </span>
+          <span class="value">
+            <div>${roundedValue} %</div>
+          </span>
           <ha-bar
             class=${classMap({
               "target-warning": roundedValue > 50,
@@ -70,6 +72,10 @@ class HaMetric extends LitElement {
         padding-inline-start: initial;
         flex-shrink: 0;
       }
+      .value > div {
+        direction: ltr;
+        text-align: var(--float-start);
+      }
     `;
   }
 }

src/components/ha-qr-scanner.ts

@@ -186,6 +186,8 @@ class HaQrScanner extends LitElement {
       position: absolute;
       bottom: 8px;
       right: 8px;
+      inset-inline-end: 8px;
+      inset-inline-start: initial;
       background: #727272b2;
       color: white;
       border-radius: 50%;

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

@@ -102,7 +102,10 @@ export class HaSelectSelector extends LitElement {
             ${this.label}
             ${options.map(
               (item: SelectOption) => html`
-                <ha-formfield .label=${item.label}>
+                <ha-formfield
+                  .label=${item.label}
+                  .disabled=${item.disabled || this.disabled}
+                >
                   <ha-radio
                     .checked=${item.value === this.value}
                     .value=${item.value}

src/components/ha-service-control.ts

@@ -93,6 +93,8 @@ export class HaServiceControl extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public hidePicker = false;
 
+  @property({ type: Boolean }) public hideDescription = false;
+
   @state() private _value!: this["value"];
 
   @state() private _checkedKeys = new Set();
@@ -373,7 +375,8 @@ export class HaServiceControl extends LitElement {
         )) ||
       serviceData?.description;
 
-    return html`${this.hidePicker
+    return html`
+      ${this.hidePicker
         ? nothing
         : html`<ha-service-picker
             .hass=${this.hass}
@@ -381,29 +384,33 @@ export class HaServiceControl extends LitElement {
             .disabled=${this.disabled}
             @value-changed=${this._serviceChanged}
           ></ha-service-picker>`}
-      <div class="description">
-        ${description ? html`<p>${description}</p>` : ""}
-        ${this._manifest
-          ? html` <a
-              href=${this._manifest.is_built_in
-                ? documentationUrl(
-                    this.hass,
-                    `/integrations/${this._manifest.domain}`
-                  )
-                : this._manifest.documentation}
-              title=${this.hass.localize(
-                "ui.components.service-control.integration_doc"
-              )}
-              target="_blank"
-              rel="noreferrer"
-            >
-              <ha-icon-button
-                .path=${mdiHelpCircle}
-                class="help-icon"
-              ></ha-icon-button>
-            </a>`
-          : ""}
-      </div>
+      ${this.hideDescription
+        ? nothing
+        : html`
+            <div class="description">
+              ${description ? html`<p>${description}</p>` : ""}
+              ${this._manifest
+                ? html` <a
+                    href=${this._manifest.is_built_in
+                      ? documentationUrl(
+                          this.hass,
+                          `/integrations/${this._manifest.domain}`
+                        )
+                      : this._manifest.documentation}
+                    title=${this.hass.localize(
+                      "ui.components.service-control.integration_doc"
+                    )}
+                    target="_blank"
+                    rel="noreferrer"
+                  >
+                    <ha-icon-button
+                      .path=${mdiHelpCircle}
+                      class="help-icon"
+                    ></ha-icon-button>
+                  </a>`
+                : nothing}
+            </div>
+          `}
       ${serviceData && "target" in serviceData
         ? html`<ha-settings-row .narrow=${this.narrow}>
             ${hasOptional
@@ -517,7 +524,8 @@ export class HaServiceControl extends LitElement {
                   ></ha-selector>
                 </ha-settings-row>`
               : "";
-          })}`;
+          })}
+    `;
   }
 
   private _localizeValueCallback = (key: string) => {

src/components/ha-service-picker.ts

@@ -114,11 +114,14 @@ class HaServicePicker extends LitElement {
       if (!filter) {
         return processedServices;
       }
-      return processedServices.filter(
-        (service) =>
-          service.service.toLowerCase().includes(filter) ||
-          service.name?.toLowerCase().includes(filter)
-      );
+      const split_filter = filter.split(" ");
+      return processedServices.filter((service) => {
+        const lower_service_name = service.name.toLowerCase();
+        const lower_service = service.service.toLowerCase();
+        return split_filter.every(
+          (f) => lower_service_name.includes(f) || lower_service.includes(f)
+        );
+      });
     }
   );
 

src/components/ha-sidebar.ts

@@ -1010,8 +1010,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         }
         .profile paper-icon-item {
           padding-left: 4px;
-          margin-inline-start: 4px;
-          margin-inline-end: auto;
+          padding-inline-start: 4px;
+          padding-inline-end: auto;
         }
         .profile .item-text {
           margin-left: 8px;
@@ -1040,6 +1040,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           position: absolute;
           bottom: 14px;
           left: 26px;
+          inset-inline-start: 26px;
+          inset-inline-end: initial;
           font-size: 0.65em;
         }
 

src/components/ha-sortable.ts

@@ -14,9 +14,16 @@ declare global {
       oldPath?: ItemPath;
       newPath?: ItemPath;
     };
+    "drag-start": undefined;
+    "drag-end": undefined;
   }
 }
 
+export type HaSortableOptions = Omit<
+  SortableInstance.SortableOptions,
+  "onStart" | "onChoose" | "onEnd"
+>;
+
 @customElement("ha-sortable")
 export class HaSortable extends LitElement {
   private _sortable?: SortableInstance;
@@ -36,14 +43,17 @@ export class HaSortable extends LitElement {
   @property({ type: String, attribute: "handle-selector" })
   public handleSelector?: string;
 
-  @property({ type: String, attribute: "group" })
-  public group?: string;
-
-  @property({ type: Number, attribute: "swap-threshold" })
-  public swapThreshold?: number;
+  @property({ type: String })
+  public group?: string | SortableInstance.GroupOptions;
 
   @property({ type: Boolean, attribute: "invert-swap" })
-  public invertSwap?: boolean;
+  public invertSwap: boolean = false;
+
+  @property({ attribute: false })
+  public options?: HaSortableOptions;
+
+  @property({ type: Boolean })
+  public rollback: boolean = true;
 
   protected updated(changedProperties: PropertyValues<this>) {
     if (changedProperties.has("disabled")) {
@@ -72,6 +82,9 @@ export class HaSortable extends LitElement {
   public connectedCallback() {
     super.connectedCallback();
     this._shouldBeDestroy = false;
+    if (this.hasUpdated) {
+      this.requestUpdate();
+    }
   }
 
   protected createRenderRoot() {
@@ -114,26 +127,20 @@ export class HaSortable extends LitElement {
 
     const options: SortableInstance.Options = {
       animation: 150,
-      swapThreshold: 1,
+      ...this.options,
       onChoose: this._handleChoose,
+      onStart: this._handleStart,
       onEnd: this._handleEnd,
     };
 
     if (this.draggableSelector) {
       options.draggable = this.draggableSelector;
     }
-
-    if (this.swapThreshold !== undefined) {
-      options.swapThreshold = this.swapThreshold;
-    }
-    if (this.invertSwap !== undefined) {
-      options.invertSwap = this.invertSwap;
-    }
     if (this.handleSelector) {
       options.handle = this.handleSelector;
     }
-    if (this.draggableSelector) {
-      options.draggable = this.draggableSelector;
+    if (this.invertSwap !== undefined) {
+      options.invertSwap = this.invertSwap;
     }
     if (this.group) {
       options.group = this.group;
@@ -143,8 +150,9 @@ export class HaSortable extends LitElement {
   }
 
   private _handleEnd = async (evt: SortableEvent) => {
+    fireEvent(this, "drag-end");
     // put back in original location
-    if ((evt.item as any).placeholder) {
+    if (this.rollback && (evt.item as any).placeholder) {
       (evt.item as any).placeholder.replaceWith(evt.item);
       delete (evt.item as any).placeholder;
     }
@@ -170,7 +178,12 @@ export class HaSortable extends LitElement {
     });
   };
 
+  private _handleStart = () => {
+    fireEvent(this, "drag-start");
+  };
+
   private _handleChoose = (evt: SortableEvent) => {
+    if (!this.rollback) return;
     (evt.item as any).placeholder = document.createComment("sort-placeholder");
     evt.item.after((evt.item as any).placeholder);
   };

src/components/ha-textfield.ts

@@ -90,7 +90,7 @@ export class HaTextField extends TextFieldBase {
         padding-right: var(--text-field-suffix-padding-right, 0px);
         padding-inline-start: var(--text-field-suffix-padding-left, 12px);
         padding-inline-end: var(--text-field-suffix-padding-right, 0px);
-        direction: var(--direction);
+        direction: ltr;
       }
       .mdc-text-field--with-leading-icon {
         padding-inline-start: var(--text-field-suffix-padding-left, 0px);
@@ -199,7 +199,6 @@ export class HaTextField extends TextFieldBase {
     // safari workaround - must be explicit
     mainWindow.document.dir === "rtl"
       ? css`
-          .mdc-text-field__affix--suffix,
           .mdc-text-field--with-leading-icon,
           .mdc-text-field__icon--leading,
           .mdc-floating-label,

src/components/ha-toast.ts

@@ -1,35 +1,8 @@
-import "@polymer/paper-toast/paper-toast";
-import type { PaperToastElement } from "@polymer/paper-toast/paper-toast";
 import { customElement } from "lit/decorators";
-import type { Constructor } from "../types";
-
-const PaperToast = customElements.get(
-  "paper-toast"
-) as Constructor<PaperToastElement>;
+import { Snackbar } from "@material/mwc-snackbar/mwc-snackbar";
 
 @customElement("ha-toast")
-export class HaToast extends PaperToast {
-  private _resizeListener?: (obj: { matches: boolean }) => unknown;
-
-  private _mediaq?: MediaQueryList;
-
-  public connectedCallback() {
-    super.connectedCallback();
-
-    if (!this._resizeListener) {
-      this._resizeListener = (ev) =>
-        this.classList.toggle("fit-bottom", ev.matches);
-      this._mediaq = window.matchMedia("(max-width: 599px");
-    }
-    this._mediaq!.addListener(this._resizeListener);
-    this._resizeListener(this._mediaq!);
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    this._mediaq!.removeListener(this._resizeListener!);
-  }
-}
+export class HaToast extends Snackbar {}
 
 declare global {
   interface HTMLElementTagNameMap {

src/components/media-player/dialog-media-player-browse.ts

@@ -223,7 +223,6 @@ class DialogMediaPlayerBrowse extends LitElement {
 
         ha-media-player-browse {
           --media-browser-max-height: calc(100vh - 65px);
-          direction: ltr;
         }
 
         :host(.opened) ha-media-player-browse {

src/components/media-player/ha-media-player-browse.ts

@@ -879,6 +879,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           display: flex;
           flex-direction: column;
           position: relative;
+          direction: ltr;
         }
 
         ha-circular-progress {

src/components/trace/ha-trace-path-details.ts

@@ -163,21 +163,22 @@ export class HaTracePathDetails extends LitElement {
               }
             )}
             <br />
+            ${error
+              ? html`<div class="error">
+                  ${this.hass!.localize(
+                    "ui.panel.config.automation.trace.path.error",
+                    {
+                      error: error,
+                    }
+                  )}
+                </div>`
+              : nothing}
             ${result
               ? html`${this.hass!.localize(
                     "ui.panel.config.automation.trace.path.result"
                   )}
                   <pre>${dump(result)}</pre>`
-              : error
-                ? html`<div class="error">
-                    ${this.hass!.localize(
-                      "ui.panel.config.automation.trace.path.error",
-                      {
-                        error: error,
-                      }
-                    )}
-                  </div>`
-                : nothing}
+              : nothing}
             ${Object.keys(rest).length === 0
               ? nothing
               : html`<pre>${dump(rest)}</pre>`}

src/components/trace/hat-graph-node.ts

@@ -1,15 +1,16 @@
+import { mdiExclamationThick } from "@mdi/js";
 import {
-  css,
   LitElement,
   PropertyValues,
-  html,
   TemplateResult,
-  svg,
+  css,
+  html,
   nothing,
+  svg,
 } from "lit";
 import { customElement, property } from "lit/decorators";
-import { NODE_SIZE, SPACING } from "./hat-graph-const";
 import { isSafari } from "../../util/is_safari";
+import { NODE_SIZE, SPACING } from "./hat-graph-const";
 
 /**
  * @attribute active
@@ -21,6 +22,8 @@ export class HatGraphNode extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
+  @property({ type: Boolean }) public error = false;
+
   @property({ reflect: true, type: Boolean }) notEnabled = false;
 
   @property({ reflect: true, type: Boolean }) graphStart = false;
@@ -65,16 +68,28 @@ export class HatGraphNode extends LitElement {
           `}
         <g class="node">
           <circle cx="0" cy="0" r=${NODE_SIZE / 2} />
+          ${this.error
+            ? svg`
+        <g class="error">
+          <circle
+            cx="-12"
+            cy=${-NODE_SIZE / 2}
+            r="8"
+          ></circle>
+          <path transform="translate(-18 -21) scale(.5)" class="exclamation" d=${mdiExclamationThick}/>
+        </g>
+      `
+            : nothing}
           ${this.badge
             ? svg`
         <g class="number">
           <circle
-            cx="8"
+            cx="12"
             cy=${-NODE_SIZE / 2}
             r="8"
           ></circle>
           <text
-            x="8"
+            x="12"
             y=${-NODE_SIZE / 2}
             text-anchor="middle"
             alignment-baseline="middle"
@@ -82,7 +97,7 @@ export class HatGraphNode extends LitElement {
         </g>
       `
             : nothing}
-          <g style="pointer-events: none" transform="translate(${-12} ${-12})">
+          <g style="pointer-events: none" transform="translate(-12 -12)">
             ${this.iconPath
               ? svg`<path class="icon" d=${this.iconPath}/>`
               : svg`<foreignObject><span class="icon"><slot name="icon"></slot></span></foreignObject>`}
@@ -143,13 +158,22 @@ export class HatGraphNode extends LitElement {
         fill: var(--background-clr);
         stroke: var(--circle-clr, var(--stroke-clr));
       }
+      .error circle {
+        fill: var(--error-color);
+        stroke: none;
+        stroke-width: 0;
+      }
+      .error .exclamation {
+        fill: var(--text-primary-color);
+      }
       .number circle {
         fill: var(--track-clr);
         stroke: none;
         stroke-width: 0;
       }
       .number text {
-        font-size: smaller;
+        font-size: 10px;
+        fill: var(--text-primary-color);
       }
       path.icon {
         fill: var(--icon-clr);

src/components/trace/hat-script-graph.ts

@@ -93,6 +93,7 @@ export class HatScriptGraph extends LitElement {
         ?active=${this.selected === path}
         .iconPath=${mdiAsterisk}
         .notEnabled=${config.enabled === false}
+        .error=${this.trace.trace[path]?.some((tr) => tr.error)}
         tabindex=${track ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -171,6 +172,7 @@ export class HatScriptGraph extends LitElement {
           ?track=${trace !== undefined}
           ?active=${this.selected === path}
           .notEnabled=${disabled || config.enabled === false}
+          .error=${this.trace.trace[path]?.some((tr) => tr.error)}
           slot="head"
           nofocus
         ></hat-graph-node>
@@ -424,6 +426,7 @@ export class HatScriptGraph extends LitElement {
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
         .notEnabled=${disabled || node.enabled === false}
+        .error=${this.trace.trace[path]?.some((tr) => tr.error)}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       >
         ${node.service
@@ -451,6 +454,7 @@ export class HatScriptGraph extends LitElement {
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
         .notEnabled=${disabled || node.enabled === false}
+        .error=${this.trace.trace[path]?.some((tr) => tr.error)}
         tabindex=${this.trace && path in this.trace.trace ? "0" : "-1"}
       ></hat-graph-node>
     `;
@@ -517,6 +521,7 @@ export class HatScriptGraph extends LitElement {
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
+        .error=${this.trace.trace[path]?.some((tr) => tr.error)}
         .notEnabled=${disabled || node.enabled === false}
       ></hat-graph-node>
     `;

src/components/trace/hat-trace-timeline.ts

@@ -153,7 +153,7 @@ class LogbookRenderer {
 
     const parts: TemplateResult[] = [];
 
-    let i;
+    let i: number;
 
     for (
       i = 0;
@@ -232,7 +232,7 @@ class ActionRenderer {
     const value = this._getItem(index);
 
     if (renderAllIterations) {
-      let i;
+      let i: number = 0;
       value.forEach((item) => {
         i = this._renderIteration(index, item, actionType);
       });
@@ -270,7 +270,12 @@ class ActionRenderer {
     } catch (err: any) {
       this._renderEntry(
         path,
-        `Unable to extract path ${path}. Download trace and report as bug`
+        this.hass.localize(
+          "ui.panel.config.automation.trace.messages.path_error",
+          {
+            path: path,
+          }
+        )
       );
       return index + 1;
     }
@@ -324,20 +329,22 @@ class ActionRenderer {
   private _handleTrigger(index: number, triggerStep: TriggerTraceStep): number {
     this._renderEntry(
       triggerStep.path,
-      `${
-        triggerStep.changed_variables.trigger.alias
-          ? `${triggerStep.changed_variables.trigger.alias} triggered`
-          : "Triggered"
-      } ${
-        triggerStep.path === "trigger"
-          ? "manually"
-          : `by the ${this.trace.trigger}`
-      } at
-    ${formatDateTimeWithSeconds(
-      new Date(triggerStep.timestamp),
-      this.hass.locale,
-      this.hass.config
-    )}`,
+      this.hass.localize(
+        "ui.panel.config.automation.trace.messages.triggered_by",
+        {
+          triggeredBy: triggerStep.changed_variables.trigger?.alias
+            ? "alias"
+            : "other",
+          alias: triggerStep.changed_variables.trigger?.alias,
+          triggeredPath: triggerStep.path === "trigger" ? "manual" : "trigger",
+          trigger: this.trace.trigger,
+          time: formatDateTimeWithSeconds(
+            new Date(triggerStep.timestamp),
+            this.hass.locale,
+            this.hass.config
+          ),
+        }
+      ),
       mdiCircle
     );
     return index + 1;
@@ -367,12 +374,17 @@ class ActionRenderer {
       this.keys[index]
     ) as ChooseAction;
     const disabled = chooseConfig.enabled === false;
-    const name = chooseConfig.alias || "Choose";
+    const name =
+      chooseConfig.alias ||
+      this.hass.localize("ui.panel.config.automation.trace.messages.choose");
 
     if (defaultExecuted) {
       this._renderEntry(
         choosePath,
-        `${name}: Default action executed`,
+        this.hass.localize(
+          "ui.panel.config.automation.trace.messages.default_action_executed",
+          { name: name }
+        ),
         undefined,
         disabled
       );
@@ -385,8 +397,17 @@ class ActionRenderer {
         `${this.keys[index]}/choose/${chooseTrace.result.choice}`
       ) as ChooseActionChoice | undefined;
       const choiceName = choiceConfig
-        ? `${choiceConfig.alias || `Option ${choiceNumeric}`} executed`
-        : `Error: ${chooseTrace.error}`;
+        ? `${
+            choiceConfig.alias ||
+            this.hass.localize(
+              "ui.panel.config.automation.trace.messages.option_executed",
+              { option: choiceNumeric }
+            )
+          }`
+        : this.hass.localize(
+            "ui.panel.config.automation.trace.messages.error",
+            { error: chooseTrace.error }
+          );
       this._renderEntry(
         choosePath,
         `${name}: ${choiceName}`,
@@ -396,13 +417,16 @@ class ActionRenderer {
     } else {
       this._renderEntry(
         choosePath,
-        `${name}: No action taken`,
+        this.hass.localize(
+          "ui.panel.config.automation.trace.messages.no_action_executed",
+          { name: name }
+        ),
         undefined,
         disabled
       );
     }
 
-    let i;
+    let i: number;
 
     // Skip over conditions
     for (i = index + 1; i < this.keys.length; i++) {
@@ -479,26 +503,38 @@ class ActionRenderer {
     const ifTrace = this._getItem(index)[0] as IfActionTraceStep;
     const ifConfig = this._getDataFromPath(this.keys[index]) as IfAction;
     const disabled = ifConfig.enabled === false;
-    const name = ifConfig.alias || "If";
+    const name =
+      ifConfig.alias ||
+      this.hass.localize("ui.panel.config.automation.trace.messages.if");
 
     if (ifTrace.result?.choice) {
       const choiceConfig = this._getDataFromPath(
         `${this.keys[index]}/${ifTrace.result.choice}/`
       ) as any;
       const choiceName = choiceConfig
-        ? `${choiceConfig.alias || `${ifTrace.result.choice} action executed`}`
-        : `Error: ${ifTrace.error}`;
+        ? choiceConfig.alias ||
+          this.hass.localize(
+            "ui.panel.config.automation.trace.messages.action_executed",
+            { action: ifTrace.result.choice }
+          )
+        : this.hass.localize(
+            "ui.panel.config.automation.trace.messages.error",
+            { error: ifTrace.error }
+          );
       this._renderEntry(ifPath, `${name}: ${choiceName}`, undefined, disabled);
     } else {
       this._renderEntry(
         ifPath,
-        `${name}: No action taken`,
+        this.hass.localize(
+          "ui.panel.config.automation.trace.messages.no_action_executed",
+          { name: name }
+        ),
         undefined,
         disabled
       );
     }
 
-    let i;
+    let i: number;
 
     // Skip over conditions
     for (i = index + 1; i < this.keys.length; i++) {
@@ -534,7 +570,11 @@ class ActionRenderer {
 
     const disabled = parallelConfig.enabled === false;
 
-    const name = parallelConfig.alias || "Execute in parallel";
+    const name =
+      parallelConfig.alias ||
+      this.hass.localize(
+        "ui.panel.config.automation.trace.messages.execute_in_parallel"
+      );
 
     this._renderEntry(parallelPath, name, undefined, disabled);
 
@@ -564,7 +604,11 @@ class ActionRenderer {
     this.entries.push(html`
       <ha-timeline .icon=${icon} data-path=${path} .notEnabled=${disabled}>
         ${description}${disabled
-          ? html`<span class="disabled"> (disabled)</span>`
+          ? html`<span class="disabled">
+              ${this.hass.localize(
+                "ui.panel.config.automation.trace.messages.disabled"
+              )}</span
+            >`
           : ""}
       </ha-timeline>
     `);
@@ -636,13 +680,12 @@ export class HaAutomationTracer extends LitElement {
         this.hass.locale,
         this.hass.config
       );
-    const renderRuntime = () => `(runtime:
-      ${(
+    const renderRuntime = () =>
+      (
         (new Date(this.trace!.timestamp.finish!).getTime() -
           new Date(this.trace!.timestamp.start).getTime()) /
         1000
-      ).toFixed(2)}
-      seconds)`;
+      ).toFixed(2);
 
     let entry: {
       description: TemplateResult | string;
@@ -652,57 +695,90 @@ export class HaAutomationTracer extends LitElement {
 
     if (this.trace.state === "running") {
       entry = {
-        description: "Still running",
+        description: this.hass.localize(
+          "ui.panel.config.automation.trace.messages.still_running"
+        ),
         icon: mdiProgressClock,
       };
     } else if (this.trace.state === "debugged") {
       entry = {
-        description: "Debugged",
+        description: this.hass.localize(
+          "ui.panel.config.automation.trace.messages.debugged"
+        ),
         icon: mdiProgressWrench,
       };
     } else if (this.trace.script_execution === "finished") {
       entry = {
-        description: `Finished at ${renderFinishedAt()} ${renderRuntime()}`,
+        description: this.hass.localize(
+          "ui.panel.config.automation.trace.messages.finished",
+          {
+            time: renderFinishedAt(),
+            executiontime: renderRuntime(),
+          }
+        ),
         icon: mdiCircle,
       };
     } else if (this.trace.script_execution === "aborted") {
       entry = {
-        description: `Aborted at ${renderFinishedAt()} ${renderRuntime()}`,
+        description: this.hass.localize(
+          "ui.panel.config.automation.trace.messages.aborted",
+          {
+            time: renderFinishedAt(),
+            executiontime: renderRuntime(),
+          }
+        ),
         icon: mdiAlertCircle,
       };
     } else if (this.trace.script_execution === "cancelled") {
       entry = {
-        description: `Cancelled at ${renderFinishedAt()} ${renderRuntime()}`,
+        description: this.hass.localize(
+          "ui.panel.config.automation.trace.messages.cancelled",
+          {
+            time: renderFinishedAt(),
+            executiontime: renderRuntime(),
+          }
+        ),
         icon: mdiAlertCircle,
       };
     } else {
-      let reason: string;
+      let message:
+        | "stopped_failed_conditions"
+        | "stopped_failed_single"
+        | "stopped_failed_max_runs"
+        | "stopped_error"
+        | "stopped_unknown_reason";
       let isError = false;
       let extra: TemplateResult | undefined;
 
       switch (this.trace.script_execution) {
         case "failed_conditions":
-          reason = "a condition failed";
+          message = "stopped_failed_conditions";
           break;
         case "failed_single":
-          reason = "only a single execution is allowed";
+          message = "stopped_failed_single";
           break;
         case "failed_max_runs":
-          reason = "maximum number of parallel runs reached";
+          message = "stopped_failed_max_runs";
           break;
         case "error":
-          reason = "an error was encountered";
           isError = true;
+          message = "stopped_error";
           extra = html`<br /><br />${this.trace.error!}`;
           break;
         default:
-          reason = `of unknown reason "${this.trace.script_execution}"`;
           isError = true;
+          message = "stopped_unknown_reason";
       }
 
       entry = {
-        description: html`Stopped because ${reason} at ${renderFinishedAt()}
-        ${renderRuntime()}${extra || ""}`,
+        description: html`${this.hass.localize(
+          `ui.panel.config.automation.trace.messages.${message}`,
+          {
+            time: renderFinishedAt(),
+            executiontime: renderRuntime(),
+          }
+        )}
+        ${extra || ""}`,
         icon: mdiAlertCircle,
         className: isError ? "error" : undefined,
       };

src/data/cloud.ts

@@ -18,6 +18,7 @@ export interface CloudPreferences {
   google_enabled: boolean;
   alexa_enabled: boolean;
   remote_enabled: boolean;
+  remote_allow_remote_enable: boolean;
   google_secure_devices_pin: string | undefined;
   cloudhooks: { [webhookId: string]: CloudWebhook };
   alexa_report_state: boolean;
@@ -139,6 +140,7 @@ export const updateCloudPref = (
     google_report_state?: CloudPreferences["google_report_state"];
     google_secure_devices_pin?: CloudPreferences["google_secure_devices_pin"];
     tts_default_voice?: CloudPreferences["tts_default_voice"];
+    remote_allow_remote_enable?: CloudPreferences["remote_allow_remote_enable"];
   }
 ) =>
   hass.callWS({

src/data/data_entry_flow.ts

@@ -33,6 +33,7 @@ export interface DataEntryFlowStepForm {
   description_placeholders?: Record<string, string>;
   last_step: boolean | null;
   preview?: string;
+  translation_domain?: string;
 }
 
 export interface DataEntryFlowStepExternal {
@@ -42,6 +43,7 @@ export interface DataEntryFlowStepExternal {
   step_id: string;
   url: string;
   description_placeholders: Record<string, string>;
+  translation_domain?: string;
 }
 
 export interface DataEntryFlowStepCreateEntry {
@@ -53,6 +55,7 @@ export interface DataEntryFlowStepCreateEntry {
   result?: ConfigEntry;
   description: string;
   description_placeholders?: Record<string, string>;
+  translation_domain?: string;
 }
 
 export interface DataEntryFlowStepAbort {
@@ -61,6 +64,7 @@ export interface DataEntryFlowStepAbort {
   handler: string;
   reason: string;
   description_placeholders?: Record<string, string>;
+  translation_domain?: string;
 }
 
 export interface DataEntryFlowStepProgress {
@@ -70,6 +74,7 @@ export interface DataEntryFlowStepProgress {
   step_id: string;
   progress_action: string;
   description_placeholders?: Record<string, string>;
+  translation_domain?: string;
 }
 
 export interface DataEntryFlowStepMenu {
@@ -80,6 +85,7 @@ export interface DataEntryFlowStepMenu {
   /** If array, use value to lookup translations in strings.json */
   menu_options: string[] | Record<string, string>;
   description_placeholders?: Record<string, string>;
+  translation_domain?: string;
 }
 
 export type DataEntryFlowStep =

src/data/energy.ts

@@ -331,6 +331,9 @@ export const getReferencedStatisticIds = (
       }
     }
   }
+  if (!(includeTypes && !includeTypes.includes("device"))) {
+    statIDs.push(...prefs.device_consumption.map((d) => d.stat_consumption));
+  }
 
   return statIDs;
 };
@@ -383,6 +386,7 @@ const getEnergyData = async (
     "solar",
     "battery",
     "gas",
+    "device",
   ]);
   const waterStatIds = getReferencedStatisticIds(prefs, info, ["water"]);
 
@@ -777,7 +781,7 @@ export const getEnergyGasUnit = (
       : "ft³";
 };
 
-export const getEnergyWaterUnit = (hass: HomeAssistant): string | undefined =>
+export const getEnergyWaterUnit = (hass: HomeAssistant): string =>
   hass.config.unit_system.length === "km" ? "L" : "gal";
 
 export const energyStatisticHelpUrl =

src/data/history.ts

@@ -81,7 +81,7 @@ export interface EntityHistoryState {
   /** attributes */
   a: { [key: string]: any };
   /** last_changed; if set, also applies to lu */
-  lc: number;
+  lc?: number;
   /** last_updated */
   lu: number;
 }
@@ -419,17 +419,37 @@ const BLANK_UNIT = " ";
 export const computeHistory = (
   hass: HomeAssistant,
   stateHistory: HistoryStates,
+  entityIds: string[],
   localize: LocalizeFunc,
   sensorNumericalDeviceClasses: string[],
   splitDeviceClasses = false
 ): HistoryResult => {
   const lineChartDevices: { [unit: string]: HistoryStates } = {};
   const timelineDevices: TimelineEntity[] = [];
-  if (!stateHistory) {
+
+  const localStateHistory: HistoryStates = {};
+
+  // Create a limited history from stateObj if entity has no recorded history.
+  const allEntities = new Set([...entityIds, ...Object.keys(stateHistory)]);
+  allEntities.forEach((entity) => {
+    if (entity in stateHistory) {
+      localStateHistory[entity] = stateHistory[entity];
+    } else if (hass.states[entity]) {
+      localStateHistory[entity] = [
+        {
+          s: hass.states[entity].state,
+          a: hass.states[entity].attributes,
+          lu: new Date(hass.states[entity].last_updated).getTime() / 1000,
+        },
+      ];
+    }
+  });
+
+  if (!localStateHistory) {
     return { line: [], timeline: [] };
   }
-  Object.keys(stateHistory).forEach((entityId) => {
-    const stateInfo = stateHistory[entityId];
+  Object.keys(localStateHistory).forEach((entityId) => {
+    const stateInfo = localStateHistory[entityId];
     if (stateInfo.length === 0) {
       return;
     }

src/data/icons.ts

@@ -198,8 +198,9 @@ export const entryIcon = async (
   if (entry.icon) {
     return entry.icon;
   }
+  const stateObj = hass.states[entry.entity_id] as HassEntity | undefined;
   const domain = computeDomain(entry.entity_id);
-  return getEntityIcon(hass, domain, undefined, undefined, entry);
+  return getEntityIcon(hass, domain, stateObj, undefined, entry);
 };
 
 const getEntityIcon = async (

src/data/lovelace.ts

@@ -10,8 +10,10 @@ import {
   LovelaceCard,
 } from "../panels/lovelace/types";
 import { HomeAssistant } from "../types";
+import { LovelaceSectionConfig } from "./lovelace/config/section";
 import { fetchConfig, LegacyLovelaceConfig } from "./lovelace/config/types";
 import { LovelaceViewConfig } from "./lovelace/config/view";
+import { HuiSection } from "../panels/lovelace/sections/hui-section";
 
 export interface LovelacePanelConfig {
   mode: "yaml" | "storage";
@@ -24,10 +26,21 @@ export interface LovelaceViewElement extends HTMLElement {
   index?: number;
   cards?: Array<LovelaceCard | HuiErrorCard>;
   badges?: LovelaceBadge[];
+  sections?: HuiSection[];
   isStrategy: boolean;
   setConfig(config: LovelaceViewConfig): void;
 }
 
+export interface LovelaceSectionElement extends HTMLElement {
+  hass?: HomeAssistant;
+  lovelace?: Lovelace;
+  viewIndex?: number;
+  index?: number;
+  cards?: Array<LovelaceCard | HuiErrorCard>;
+  isStrategy: boolean;
+  setConfig(config: LovelaceSectionConfig): void;
+}
+
 type LovelaceUpdatedEvent = HassEventBase & {
   event_type: "lovelace_updated";
   data: {

src/data/lovelace/config/section.ts

@@ -0,0 +1,26 @@
+import type { LovelaceCardConfig } from "./card";
+import type { LovelaceStrategyConfig } from "./strategy";
+
+export interface LovelaceBaseSectionConfig {
+  title?: string;
+}
+
+export interface LovelaceSectionConfig extends LovelaceBaseSectionConfig {
+  type?: string;
+  cards?: LovelaceCardConfig[];
+}
+
+export interface LovelaceStrategySectionConfig
+  extends LovelaceBaseSectionConfig {
+  strategy: LovelaceStrategyConfig;
+}
+
+export type LovelaceSectionRawConfig =
+  | LovelaceSectionConfig
+  | LovelaceStrategySectionConfig;
+
+export function isStrategySection(
+  section: LovelaceSectionRawConfig
+): section is LovelaceStrategySectionConfig {
+  return "strategy" in section;
+}

src/data/lovelace/config/view.ts

@@ -1,5 +1,6 @@
 import type { LovelaceBadgeConfig } from "./badge";
 import type { LovelaceCardConfig } from "./card";
+import type { LovelaceSectionRawConfig } from "./section";
 import type { LovelaceStrategyConfig } from "./strategy";
 
 export interface ShowViewConfig {
@@ -23,6 +24,7 @@ export interface LovelaceViewConfig extends LovelaceBaseViewConfig {
   type?: string;
   badges?: Array<string | LovelaceBadgeConfig>;
   cards?: LovelaceCardConfig[];
+  sections?: LovelaceSectionRawConfig[];
 }
 
 export interface LovelaceStrategyViewConfig extends LovelaceBaseViewConfig {

src/data/matter.ts

@@ -35,6 +35,7 @@ export interface MatterNodeDiagnostics {
   mac_address?: string;
   available: boolean;
   active_fabrics: MatterFabricData[];
+  active_fabric_index: number;
 }
 
 export interface MatterPingResult {

src/data/ws-area_registry.ts

@@ -1,12 +1,17 @@
 import { Connection, createCollection } from "home-assistant-js-websocket";
 import { Store } from "home-assistant-js-websocket/dist/store";
+import { stringCompare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
 import { AreaRegistryEntry } from "./area_registry";
 
 const fetchAreaRegistry = (conn: Connection) =>
-  conn.sendMessagePromise<AreaRegistryEntry[]>({
-    type: "config/area_registry/list",
-  });
+  conn
+    .sendMessagePromise<AreaRegistryEntry[]>({
+      type: "config/area_registry/list",
+    })
+    .then((areas) =>
+      areas.sort((ent1, ent2) => stringCompare(ent1.name, ent2.name))
+    );
 
 const subscribeAreaRegistryUpdates = (
   conn: Connection,

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

@@ -44,7 +44,7 @@ export const showConfigFlowDialog = (
 
     renderAbortDescription(hass, step) {
       const description = hass.localize(
-        `component.${step.handler}.config.abort.${step.reason}`,
+        `component.${step.translation_domain || step.handler}.config.abort.${step.reason}`,
         step.description_placeholders
       );
 
@@ -58,7 +58,7 @@ export const showConfigFlowDialog = (
     renderShowFormStepHeader(hass, step) {
       return (
         hass.localize(
-          `component.${step.handler}.config.step.${step.step_id}.title`,
+          `component.${step.translation_domain || step.handler}.config.step.${step.step_id}.title`,
           step.description_placeholders
         ) || hass.localize(`component.${step.handler}.title`)
       );
@@ -66,7 +66,7 @@ export const showConfigFlowDialog = (
 
     renderShowFormStepDescription(hass, step) {
       const description = hass.localize(
-        `component.${step.handler}.config.step.${step.step_id}.description`,
+        `component.${step.translation_domain || step.handler}.config.step.${step.step_id}.description`,
         step.description_placeholders
       );
       return description
@@ -84,7 +84,7 @@ export const showConfigFlowDialog = (
 
     renderShowFormStepFieldHelper(hass, step, field) {
       const description = hass.localize(
-        `component.${step.handler}.config.step.${step.step_id}.data_description.${field.name}`,
+        `component.${step.translation_domain || step.handler}.config.step.${step.step_id}.data_description.${field.name}`,
         step.description_placeholders
       );
       return description
@@ -95,7 +95,7 @@ export const showConfigFlowDialog = (
     renderShowFormStepFieldError(hass, step, error) {
       return (
         hass.localize(
-          `component.${step.handler}.config.error.${error}`,
+          `component.${step.translation_domain || step.translation_domain || step.handler}.config.error.${error}`,
           step.description_placeholders
         ) || error
       );
@@ -131,7 +131,7 @@ export const showConfigFlowDialog = (
 
     renderExternalStepDescription(hass, step) {
       const description = hass.localize(
-        `component.${step.handler}.config.${step.step_id}.description`,
+        `component.${step.translation_domain || step.handler}.config.${step.step_id}.description`,
         step.description_placeholders
       );
 
@@ -155,7 +155,7 @@ export const showConfigFlowDialog = (
 
     renderCreateEntryDescription(hass, step) {
       const description = hass.localize(
-        `component.${step.handler}.config.create_entry.${
+        `component.${step.translation_domain || step.handler}.config.create_entry.${
           step.description || "default"
         }`,
         step.description_placeholders
@@ -190,7 +190,7 @@ export const showConfigFlowDialog = (
 
     renderShowFormProgressDescription(hass, step) {
       const description = hass.localize(
-        `component.${step.handler}.config.progress.${step.progress_action}`,
+        `component.${step.translation_domain || step.handler}.config.progress.${step.progress_action}`,
         step.description_placeholders
       );
       return description
@@ -210,7 +210,7 @@ export const showConfigFlowDialog = (
 
     renderMenuDescription(hass, step) {
       const description = hass.localize(
-        `component.${step.handler}.config.step.${step.step_id}.description`,
+        `component.${step.translation_domain || step.handler}.config.step.${step.step_id}.description`,
         step.description_placeholders
       );
       return description
@@ -222,7 +222,7 @@ export const showConfigFlowDialog = (
 
     renderMenuOption(hass, step, option) {
       return hass.localize(
-        `component.${step.handler}.config.step.${step.step_id}.menu_options.${option}`,
+        `component.${step.translation_domain || step.handler}.config.step.${step.step_id}.menu_options.${option}`,
         step.description_placeholders
       );
     },

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

@@ -53,7 +53,7 @@ export const showOptionsFlowDialog = (
 
       renderAbortDescription(hass, step) {
         const description = hass.localize(
-          `component.${configEntry.domain}.options.abort.${step.reason}`,
+          `component.${step.translation_domain || configEntry.domain}.options.abort.${step.reason}`,
           step.description_placeholders
         );
 
@@ -71,7 +71,7 @@ export const showOptionsFlowDialog = (
       renderShowFormStepHeader(hass, step) {
         return (
           hass.localize(
-            `component.${configEntry.domain}.options.step.${step.step_id}.title`,
+            `component.${step.translation_domain || configEntry.domain}.options.step.${step.step_id}.title`,
             step.description_placeholders
           ) || hass.localize(`ui.dialogs.options_flow.form.header`)
         );
@@ -79,7 +79,7 @@ export const showOptionsFlowDialog = (
 
       renderShowFormStepDescription(hass, step) {
         const description = hass.localize(
-          `component.${configEntry.domain}.options.step.${step.step_id}.description`,
+          `component.${step.translation_domain || configEntry.domain}.options.step.${step.step_id}.description`,
           step.description_placeholders
         );
         return description
@@ -101,7 +101,7 @@ export const showOptionsFlowDialog = (
 
       renderShowFormStepFieldHelper(hass, step, field) {
         const description = hass.localize(
-          `component.${configEntry.domain}.options.step.${step.step_id}.data_description.${field.name}`,
+          `component.${step.translation_domain || configEntry.domain}.options.step.${step.step_id}.data_description.${field.name}`,
           step.description_placeholders
         );
         return description
@@ -112,7 +112,7 @@ export const showOptionsFlowDialog = (
       renderShowFormStepFieldError(hass, step, error) {
         return (
           hass.localize(
-            `component.${configEntry.domain}.options.error.${error}`,
+            `component.${step.translation_domain || configEntry.domain}.options.error.${error}`,
             step.description_placeholders
           ) || error
         );
@@ -159,7 +159,7 @@ export const showOptionsFlowDialog = (
 
       renderShowFormProgressDescription(hass, step) {
         const description = hass.localize(
-          `component.${configEntry.domain}.options.progress.${step.progress_action}`,
+          `component.${step.translation_domain || configEntry.domain}.options.progress.${step.progress_action}`,
           step.description_placeholders
         );
         return description
@@ -183,7 +183,7 @@ export const showOptionsFlowDialog = (
 
       renderMenuDescription(hass, step) {
         const description = hass.localize(
-          `component.${configEntry.domain}.options.step.${step.step_id}.description`,
+          `component.${step.translation_domain || configEntry.domain}.options.step.${step.step_id}.description`,
           step.description_placeholders
         );
         return description
@@ -199,7 +199,7 @@ export const showOptionsFlowDialog = (
 
       renderMenuOption(hass, step, option) {
         return hass.localize(
-          `component.${configEntry.domain}.options.step.${step.step_id}.menu_options.${option}`,
+          `component.${step.translation_domain || configEntry.domain}.options.step.${step.step_id}.menu_options.${option}`,
           step.description_placeholders
         );
       },

src/dialogs/generic/dialog-box.ts

@@ -89,7 +89,12 @@ class DialogBox extends LitElement {
         </div>
         ${confirmPrompt &&
         html`
-          <mwc-button @click=${this._dismiss} slot="secondaryAction">
+          <mwc-button
+            @click=${this._dismiss}
+            slot="secondaryAction"
+            ?dialogInitialFocus=${!this._params.prompt &&
+            this._params.destructive}
+          >
             ${this._params.dismissText
               ? this._params.dismissText
               : this.hass.localize("ui.dialogs.generic.cancel")}
@@ -97,7 +102,8 @@ class DialogBox extends LitElement {
         `}
         <mwc-button
           @click=${this._confirm}
-          ?dialogInitialFocus=${!this._params.prompt}
+          ?dialogInitialFocus=${!this._params.prompt &&
+          !this._params.destructive}
           slot="primaryAction"
           class=${classMap({
             destructive: this._params.destructive || false,

src/dialogs/more-info/components/ha-more-info-state-header.ts

@@ -16,6 +16,8 @@ export class HaMoreInfoStateHeader extends LitElement {
 
   @property({ attribute: false }) public stateOverride?: string;
 
+  @property({ attribute: false }) public changedOverride?: number;
+
   @state() private _absoluteTime = false;
 
   private _localizeState(): TemplateResult | string {
@@ -50,13 +52,13 @@ export class HaMoreInfoStateHeader extends LitElement {
           ? html`
               <ha-absolute-time
                 .hass=${this.hass}
-                .datetime=${this.stateObj.last_changed}
+                .datetime=${this.changedOverride ?? this.stateObj.last_changed}
               ></ha-absolute-time>
             `
           : html`
               <ha-relative-time
                 .hass=${this.hass}
-                .datetime=${this.stateObj.last_changed}
+                .datetime=${this.changedOverride ?? this.stateObj.last_changed}
                 capitalize
               ></ha-relative-time>
             `}

src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts

@@ -322,6 +322,8 @@ export class HaMoreInfoLightFavoriteColors extends LitElement {
         position: absolute;
         top: -6px;
         right: -6px;
+        inset-inline-end: -6px;
+        inset-inline-start: initial;
         width: 20px;
         height: 20px;
         outline: none;

src/dialogs/more-info/components/lights/light-color-rgb-picker.ts

@@ -446,6 +446,8 @@ class LightRgbColorPicker extends LitElement {
           position: absolute;
           top: 0;
           right: 0;
+          inset-inline-end: 0;
+          inset-inline-start: initial;
           z-index: 1;
         }
 

src/dialogs/more-info/const.ts

@@ -26,6 +26,7 @@ export const DOMAINS_WITH_NEW_MORE_INFO = [
   "light",
   "lock",
   "siren",
+  "script",
   "switch",
   "valve",
   "water_heater",

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

@@ -34,7 +34,6 @@ class MoreInfoPerson extends LitElement {
         : ""}
       ${!__DEMO__ &&
       this.hass.user?.is_admin &&
-      this.stateObj.state === "not_home" &&
       this.stateObj.attributes.latitude &&
       this.stateObj.attributes.longitude
         ? html`

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

@@ -1,51 +1,220 @@
+import { mdiPlay, mdiStop } from "@mdi/js";
+import "@material/mwc-button";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  nothing,
+  PropertyValues,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-relative-time";
+import "../../../components/ha-service-control";
+import "../../../components/ha-control-button";
+import "../../../components/ha-control-button-group";
+import "../../../components/entity/state-info";
 import { HomeAssistant } from "../../../types";
+import { canRun, ScriptEntity } from "../../../data/script";
+import { isUnavailableState } from "../../../data/entity";
+import { computeObjectId } from "../../../common/entity/compute_object_id";
+import { listenMediaQuery } from "../../../common/dom/media_query";
+import "../components/ha-more-info-state-header";
 
 @customElement("more-info-script")
 class MoreInfoScript extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public stateObj?: HassEntity;
+  @property({ attribute: false }) public stateObj?: ScriptEntity;
+
+  @state() private _scriptData: Record<string, any> = {};
+
+  @state() private narrow = false;
+
+  private _unsubMediaQuery?: () => void;
+
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this._unsubMediaQuery = listenMediaQuery(
+      "(max-width: 870px)",
+      (matches) => {
+        this.narrow = matches;
+      }
+    );
+  }
+
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
+    if (this._unsubMediaQuery) {
+      this._unsubMediaQuery();
+      this._unsubMediaQuery = undefined;
+    }
+  }
 
   protected render() {
     if (!this.hass || !this.stateObj) {
       return nothing;
     }
+    const stateObj = this.stateObj;
+
+    const fields =
+      this.hass.services.script[computeObjectId(this.stateObj.entity_id)]
+        ?.fields;
+
+    const hasFields = fields && Object.keys(fields).length > 0;
+
+    const current = stateObj.attributes.current || 0;
+    const isQueued = stateObj.attributes.mode === "queued";
+    const isParallel = stateObj.attributes.mode === "parallel";
+    const hasQueue = isQueued && current > 1;
 
     return html`
-      <hr />
-      <div class="flex">
-        <div>
-          ${this.hass.localize(
-            "ui.dialogs.more_info_control.script.last_triggered"
-          )}:
-        </div>
-        ${this.stateObj.attributes.last_triggered
+      <ha-more-info-state-header
+        .stateObj=${stateObj}
+        .hass=${this.hass}
+        .stateOverride=${current > 0
+          ? isParallel && current > 1
+            ? this.hass.localize("ui.card.script.running_parallel", {
+                active: current,
+              })
+            : this.hass.localize("ui.card.script.running_single")
+          : this.hass.localize("ui.card.script.idle")}
+        .changedOverride=${this.stateObj.attributes.last_triggered || 0}
+      ></ha-more-info-state-header>
+
+      <div class=${`queue ${hasQueue ? "has-queue" : ""}`}>
+        ${hasQueue
           ? html`
-              <ha-relative-time
-                .hass=${this.hass}
-                .datetime=${this.stateObj.attributes.last_triggered}
-                capitalize
-              ></ha-relative-time>
+              ${this.hass.localize("ui.card.script.running_queued", {
+                queued: current - 1,
+              })}
             `
-          : this.hass.localize("ui.components.relative_time.never")}
+          : ""}
       </div>
+
+      ${hasFields
+        ? html`
+            <div class="fields">
+              <div class="title">
+                ${this.hass.localize("ui.card.script.run_script")}
+              </div>
+              <ha-service-control
+                hidePicker
+                hideDescription
+                .hass=${this.hass}
+                .value=${this._scriptData}
+                .showAdvanced=${this.hass.userData?.showAdvanced}
+                .narrow=${this.narrow}
+                @value-changed=${this._scriptDataChanged}
+              ></ha-service-control>
+            </div>
+          `
+        : nothing}
+
+      <ha-control-button-group>
+        <ha-control-button
+          @click=${this._cancelScript}
+          .disabled=${!current}
+          class="cancel-button"
+        >
+          <ha-svg-icon .path=${mdiStop}></ha-svg-icon>
+          ${(isQueued || isParallel) && current > 1
+            ? this.hass.localize("ui.card.script.cancel_all")
+            : this.hass.localize("ui.card.script.cancel")}
+        </ha-control-button>
+        <ha-control-button
+          class="run-button"
+          @click=${this._runScript}
+          .disabled=${isUnavailableState(stateObj.state) || !this._canRun()}
+        >
+          <ha-svg-icon .path=${mdiPlay}></ha-svg-icon>
+          ${this.hass!.localize("ui.card.script.run")}
+        </ha-control-button>
+      </ha-control-button-group>
     `;
   }
 
+  protected override willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
+
+    if (!changedProperties.has("stateObj")) {
+      return;
+    }
+
+    const oldState = changedProperties.get("stateObj") as
+      | HassEntity
+      | undefined;
+    const newState = this.stateObj;
+
+    if (newState && (!oldState || oldState.entity_id !== newState.entity_id)) {
+      this._scriptData = { service: newState.entity_id, data: {} };
+    }
+  }
+
+  private _cancelScript(ev: Event) {
+    ev.stopPropagation();
+    this._callService("turn_off");
+  }
+
+  private async _runScript(ev: Event) {
+    ev.stopPropagation();
+    this.hass.callService(
+      "script",
+      computeObjectId(this.stateObj!.entity_id),
+      this._scriptData.data
+    );
+  }
+
+  private _callService(service: string): void {
+    this.hass.callService("script", service, {
+      entity_id: this.stateObj!.entity_id,
+    });
+  }
+
+  private _scriptDataChanged(ev: CustomEvent): void {
+    this._scriptData = { ...this._scriptData, ...ev.detail.value };
+  }
+
+  private _canRun() {
+    if (
+      canRun(this.stateObj!) ||
+      // Restart can also always runs. Just cancels other run.
+      this.stateObj!.attributes.mode === "restart"
+    ) {
+      return true;
+    }
+    return false;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
-      .flex {
-        display: flex;
-        justify-content: space-between;
+      .queue {
+        visibility: hidden;
+        color: var(--secondary-text-color);
+        text-align: center;
+        margin-bottom: 16px;
+        height: 21px;
       }
-      hr {
-        border-color: var(--divider-color);
-        border-bottom: none;
-        margin: 16px 0;
+      .queue.has-queue {
+        visibility: visible;
+      }
+      .fields {
+        padding: 16px;
+        border: 1px solid var(--divider-color);
+        border-radius: 8px;
+        margin-bottom: 16px;
+      }
+      .fields .title {
+        font-weight: bold;
+      }
+      ha-control-button ha-svg-icon {
+        z-index: -1;
+        margin-right: 4px;
+      }
+      ha-service-control {
+        --service-control-padding: 0;
+        --service-control-items-border-top: none;
       }
     `;
   }

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

@@ -228,6 +228,7 @@ export class MoreInfoHistory extends LitElement {
         this._stateHistory = computeHistory(
           this.hass!,
           combinedHistory,
+          [this.entityId],
           this.hass!.localize,
           sensorNumericDeviceClasses
         );

src/dialogs/notifications/notification-drawer.ts

@@ -14,6 +14,7 @@ import "./notification-item";
 import "../../components/ha-header-bar";
 import "../../components/ha-drawer";
 import type { HaDrawer } from "../../components/ha-drawer";
+import { computeRTLDirection } from "../../common/util/compute_rtl";
 
 @customElement("notification-drawer")
 export class HuiNotificationDrawer extends LitElement {
@@ -92,7 +93,12 @@ export class HuiNotificationDrawer extends LitElement {
     });
 
     return html`
-      <ha-drawer type="modal" open @MDCDrawer:closed=${this._dialogClosed}>
+      <ha-drawer
+        type="modal"
+        open
+        @MDCDrawer:closed=${this._dialogClosed}
+        .direction=${computeRTLDirection(this.hass)}
+      >
         <ha-header-bar>
           <div slot="title">
             ${this.hass.localize("ui.notification_drawer.title")}

src/dialogs/restart/dialog-restart.ts

@@ -341,7 +341,7 @@ class DialogRestart extends LitElement {
 
     showToast(this, {
       message: this.hass.localize("ui.dialogs.restart.reboot.rebooting"),
-      duration: 0,
+      duration: -1,
     });
 
     try {
@@ -380,7 +380,7 @@ class DialogRestart extends LitElement {
 
     showToast(this, {
       message: this.hass.localize("ui.dialogs.restart.shutdown.shutting_down"),
-      duration: 0,
+      duration: -1,
     });
 
     try {

src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts

@@ -647,6 +647,8 @@ export class HaVoiceCommandDialog extends LitElement {
           position: absolute;
           --mdc-icon-size: 16px;
           right: 5px;
+          inset-inline-end: 5px;
+          inset-inline-start: initial;
           top: 0px;
         }
 

src/external_app/external_messaging.ts

@@ -35,13 +35,22 @@ interface EMOutgoingMessageConfigGet extends EMMessage {
   type: "config/get";
 }
 
-interface EMOutgoingMessageScanQRCode extends EMMessage {
-  type: "qr_code/scan";
+interface EMOutgoingMessageBarCodeScan extends EMMessage {
+  type: "bar_code/scan";
   title: string;
   description: string;
   alternative_option_label?: string;
 }
 
+interface EMOutgoingMessageBarCodeClose extends EMMessage {
+  type: "bar_code/close";
+}
+
+interface EMOutgoingMessageBarCodeNotify extends EMMessage {
+  type: "bar_code/notify";
+  message: string;
+}
+
 interface EMOutgoingMessageMatterCommission extends EMMessage {
   type: "matter/commission";
 }
@@ -55,13 +64,6 @@ type EMOutgoingMessageWithAnswer = {
     request: EMOutgoingMessageConfigGet;
     response: ExternalConfig;
   };
-  "qr_code/scan": {
-    request: EMOutgoingMessageScanQRCode;
-    response:
-      | EMIncomingMessageQRCodeResponseCanceled
-      | EMIncomingMessageQRCodeResponseAlternativeOptions
-      | EMIncomingMessageQRCodeResponseScanResult;
-  };
 };
 
 interface EMOutgoingMessageExoplayerPlayHLS extends EMMessage {
@@ -124,20 +126,23 @@ interface EMOutgoingMessageAssistShow extends EMMessage {
 }
 
 type EMOutgoingMessageWithoutAnswer =
-  | EMOutgoingMessageHaptic
-  | EMOutgoingMessageConnectionStatus
+  | EMMessageResultError
+  | EMMessageResultSuccess
   | EMOutgoingMessageAppConfiguration
-  | EMOutgoingMessageTagWrite
-  | EMOutgoingMessageSidebarShow
   | EMOutgoingMessageAssistShow
+  | EMOutgoingMessageBarCodeClose
+  | EMOutgoingMessageBarCodeNotify
+  | EMOutgoingMessageBarCodeScan
+  | EMOutgoingMessageConnectionStatus
   | EMOutgoingMessageExoplayerPlayHLS
   | EMOutgoingMessageExoplayerResize
   | EMOutgoingMessageExoplayerStop
-  | EMOutgoingMessageThemeUpdate
-  | EMMessageResultSuccess
-  | EMMessageResultError
+  | EMOutgoingMessageHaptic
+  | EMOutgoingMessageImportThreadCredentials
   | EMOutgoingMessageMatterCommission
-  | EMOutgoingMessageImportThreadCredentials;
+  | EMOutgoingMessageSidebarShow
+  | EMOutgoingMessageTagWrite
+  | EMOutgoingMessageThemeUpdate;
 
 interface EMIncomingMessageRestart {
   id: number;
@@ -172,17 +177,39 @@ interface EMIncomingMessageShowAutomationEditor {
   };
 }
 
-export interface EMIncomingMessageQRCodeResponseCanceled {
-  action: "canceled";
+export interface EMIncomingMessageBarCodeScanResult {
+  id: number;
+  type: "command";
+  command: "bar_code/scan_result";
+  payload: {
+    // A string decoded from the barcode data.
+    rawValue: string;
+    // https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API#supported_barcode_formats
+    format:
+      | "aztec"
+      | "code_128"
+      | "code_39"
+      | "code_93"
+      | "codabar"
+      | "data_matrix"
+      | "ean_13"
+      | "ean_8"
+      | "itf"
+      | "pdf417"
+      | "qr_code"
+      | "upc_a"
+      | "upc_e"
+      | "unknown";
+  };
 }
 
-export interface EMIncomingMessageQRCodeResponseAlternativeOptions {
-  action: "alternative_options";
-}
-
-export interface EMIncomingMessageQRCodeResponseScanResult {
-  action: "scan_result";
-  result: string;
+export interface EMIncomingMessageBarCodeScanAborted {
+  id: number;
+  type: "command";
+  command: "bar_code/aborted";
+  payload: {
+    reason: "canceled" | "alternative_options";
+  };
 }
 
 export type EMIncomingMessageCommands =
@@ -190,7 +217,9 @@ export type EMIncomingMessageCommands =
   | EMIncomingMessageShowNotifications
   | EMIncomingMessageToggleSidebar
   | EMIncomingMessageShowSidebar
-  | EMIncomingMessageShowAutomationEditor;
+  | EMIncomingMessageShowAutomationEditor
+  | EMIncomingMessageBarCodeScanResult
+  | EMIncomingMessageBarCodeScanAborted;
 
 type EMIncomingMessage =
   | EMMessageResultSuccess
@@ -207,7 +236,7 @@ export interface ExternalConfig {
   canCommissionMatter: boolean;
   canImportThreadCredentials: boolean;
   hasAssist: boolean;
-  hasQRScanner: number;
+  hasBarCodeScanner: number;
 }
 
 export class ExternalMessaging {

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

@@ -377,6 +377,8 @@ export class HaTabsSubpageDataTable extends LitElement {
         color: var(--text-primary-color);
         position: absolute;
         right: 0;
+        inset-inline-end: 0;
+        inset-inline-start: initial;
         top: 4px;
         font-size: 0.65em;
       }

src/layouts/hass-tabs-subpage.ts

@@ -10,7 +10,6 @@ import {
 import { customElement, eventOptions, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
-import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-icon-button-arrow-prev";
@@ -19,13 +18,14 @@ import "../components/ha-svg-icon";
 import "../components/ha-tab";
 import { HomeAssistant, Route } from "../types";
 import { haStyleScrollbar } from "../resources/styles";
+import { canShowPage } from "../common/config/can_show_page";
 
 export interface PageNavigation {
   path: string;
   translationKey?: string;
-  component?: string;
-  components?: string[];
+  component?: string | string[];
   name?: string;
+  not_component?: string | string[];
   core?: boolean;
   advancedOnly?: boolean;
   iconPath?: string;
@@ -66,19 +66,12 @@ class HassTabsSubpage extends LitElement {
     (
       tabs: PageNavigation[],
       activeTab: PageNavigation | undefined,
-      showAdvanced: boolean | undefined,
       _components,
       _language,
       _narrow,
       localizeFunc
     ) => {
-      const shownTabs = tabs.filter(
-        (page) =>
-          (!page.component ||
-            page.core ||
-            isComponentLoaded(this.hass, page.component)) &&
-          (!page.advancedOnly || showAdvanced)
-      );
+      const shownTabs = tabs.filter((page) => canShowPage(this.hass, page));
 
       if (shownTabs.length < 2) {
         if (shownTabs.length === 1) {
@@ -127,7 +120,6 @@ class HassTabsSubpage extends LitElement {
     const tabs = this._getTabs(
       this.tabs,
       this._activeTab,
-      this.hass.userData?.showAdvanced,
       this.hass.config.components,
       this.hass.language,
       this.narrow,

src/layouts/home-assistant-main.ts

@@ -15,6 +15,7 @@ import "../components/ha-drawer";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
 import type { HomeAssistant, Route } from "../types";
 import "./partial-panel-resolver";
+import { computeRTLDirection } from "../common/util/compute_rtl";
 
 declare global {
   // for fire event
@@ -61,6 +62,7 @@ export class HomeAssistantMain extends LitElement {
       <ha-drawer
         .type=${sidebarNarrow ? "modal" : ""}
         .open=${sidebarNarrow ? this._drawerOpen : undefined}
+        .direction=${computeRTLDirection(this.hass)}
         @MDCDrawer:closed=${this._drawerClosed}
       >
         <ha-sidebar

src/managers/notification-manager.ts

@@ -1,10 +1,11 @@
-import "@material/mwc-button";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { property, state, query } from "lit/decorators";
+import { mdiClose } from "@mdi/js";
 import { computeRTL } from "../common/util/compute_rtl";
 import "../components/ha-toast";
 import type { HaToast } from "../components/ha-toast";
 import type { HomeAssistant } from "../types";
+import "../components/ha-button";
 
 export interface ShowToastParams {
   message: string;
@@ -21,72 +22,78 @@ export interface ToastActionParams {
 class NotificationManager extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _action?: ToastActionParams;
+  @state() private _parameters?: ShowToastParams;
 
-  @state() private _noCancelOnOutsideClick = false;
+  @query("ha-toast") private _toast!: HaToast | undefined;
 
-  @query("ha-toast") private _toast!: HaToast;
-
-  public async showDialog({
-    message,
-    action,
-    duration,
-    dismissable,
-  }: ShowToastParams) {
-    let toast = this._toast;
-    // Can happen on initial load
-    if (!toast) {
+  public async showDialog(parameters: ShowToastParams) {
+    if (this._parameters) {
+      this._parameters = undefined;
       await this.updateComplete;
-      toast = this._toast;
     }
-    toast.setAttribute("dir", computeRTL(this.hass) ? "rtl" : "ltr");
-    this._action = action || undefined;
-    this._noCancelOnOutsideClick =
-      dismissable === undefined ? false : !dismissable;
-    toast.hide();
-    toast.show({
-      text: message,
-      duration: duration === undefined ? 3000 : duration,
-    });
+
+    if (!parameters || parameters.duration === 0) {
+      return;
+    }
+
+    this._parameters = parameters;
+
+    if (
+      this._parameters.duration === undefined ||
+      (this._parameters.duration > 0 && this._parameters.duration <= 4000)
+    ) {
+      this._parameters.duration = 4000;
+    }
   }
 
-  protected render(): TemplateResult {
+  public shouldUpdate(changedProperties) {
+    return !this._toast || changedProperties.has("_parameters");
+  }
+
+  private _toastClosed() {
+    this._parameters = undefined;
+  }
+
+  protected render() {
+    if (!this._parameters) {
+      return nothing;
+    }
     return html`
-      <ha-toast .noCancelOnOutsideClick=${this._noCancelOnOutsideClick}>
-        ${this._action
+      <ha-toast
+        leading
+        open
+        dir=${computeRTL(this.hass) ? "rtl" : "ltr"}
+        .labelText=${this._parameters.message}
+        .timeoutMs=${this._parameters.duration!}
+        @MDCSnackbar:closed=${this._toastClosed}
+      >
+        ${this._parameters?.action
           ? html`
-              <mwc-button
-                .label=${this._action.text}
+              <ha-button
+                slot="action"
+                .label=${this._parameters?.action.text}
                 @click=${this.buttonClicked}
-              ></mwc-button>
+              ></ha-button>
             `
-          : ""}
+          : nothing}
+        ${this._parameters?.dismissable
+          ? html`<ha-icon-button
+              .label=${this.hass.localize("ui.common.close")}
+              .path=${mdiClose}
+              dialogAction="close"
+              slot="dismiss"
+            ></ha-icon-button>`
+          : nothing}
       </ha-toast>
     `;
   }
 
   private buttonClicked() {
-    this._toast.hide();
-    if (this._action) {
-      this._action.action();
+    this._toast?.close("action");
+    if (this._parameters?.action) {
+      this._parameters?.action.action();
     }
   }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      ha-toast {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: 8px 12px;
-      }
-      mwc-button {
-        color: var(--primary-color);
-        font-weight: bold;
-        margin-left: 8px;
-      }
-    `;
-  }
 }
 
 customElements.define("notification-manager", NotificationManager);

src/onboarding/onboarding-location.ts

@@ -499,6 +499,8 @@ class OnboardingLocation extends LitElement {
           position: absolute;
           top: 10px;
           right: 10px;
+          inset-inline-end: 10px;
+          inset-inline-start: initial;
           --mdc-icon-button-size: 36px;
           --mdc-icon-size: 20px;
           color: var(--secondary-text-color);
@@ -509,6 +511,8 @@ class OnboardingLocation extends LitElement {
         ha-textfield > ha-circular-progress {
           position: relative;
           left: 12px;
+          inset-inline-start: 12px;
+          inset-inline-end: initial;
         }
         ha-locations-editor {
           display: block;

src/panels/calendar/ha-full-calendar.ts

@@ -188,7 +188,7 @@ export class HAFullCalendar extends LitElement {
                         </ha-icon-button-next>
                       </div>
                     </div>
-                    <div class="controls">
+                    <div class="controls buttons">
                       <mwc-button
                         outlined
                         class="today"
@@ -480,6 +480,16 @@ export class HAFullCalendar extends LitElement {
           width: 100%;
         }
 
+        .buttons {
+          display: flex;
+          flex-wrap: wrap;
+        }
+
+        .buttons > * {
+          margin-bottom: 5px;
+          box-sizing: border-box;
+        }
+
         .today {
           margin-right: 20px;
           margin-inline-end: 20px;

src/panels/config/areas/ha-config-area-page.ts

@@ -568,7 +568,7 @@ class HaConfigAreaPage extends LitElement {
       <a
         href=${ifDefined(
           entityState.attributes.id
-            ? `/config/automation/edit/${entityState.attributes.id}`
+            ? `/config/automation/edit/${encodeURIComponent(entityState.attributes.id)}`
             : undefined
         )}
       >
@@ -710,6 +710,8 @@ class HaConfigAreaPage extends LitElement {
           position: absolute;
           top: 4px;
           right: 4px;
+          inset-inline-end: 4px;
+          inset-inline-start: initial;
           display: none;
         }
         .img-container:hover .img-edit-btn {
@@ -736,6 +738,11 @@ class HaConfigAreaPage extends LitElement {
           padding: 16px;
           color: var(--secondary-text-color);
         }
+
+        mwc-button > ha-svg-icon {
+          margin-inline-start: 0;
+          margin-inline-end: 8px;
+        }
       `,
     ];
   }

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

@@ -203,12 +203,14 @@ export default class HaAutomationAction extends LitElement {
   }
 
   private _moveUp(ev) {
+    ev.stopPropagation();
     const index = (ev.target as any).index;
     const newIndex = index - 1;
     this._move(index, newIndex);
   }
 
   private _moveDown(ev) {
+    ev.stopPropagation();
     const index = (ev.target as any).index;
     const newIndex = index + 1;
     this._move(index, newIndex);

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

@@ -536,6 +536,8 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
           (!this._group ||
             items.find((item) => item.key === this._params!.clipboardItem))
             ? html`<ha-list-item-new
+                  interactive
+                  type="button"
                   class="paste"
                   .value=${PASTE_VALUE}
                   @click=${this._selected}
@@ -543,7 +545,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
                   ${this.hass.localize(
                     `ui.panel.config.automation.editor.${this._params.type}s.paste`
                   )}
-                  <span slot="secondary"
+                  <span slot="supporting-text"
                     >${this.hass.localize(
                       // @ts-ignore
                       `ui.panel.config.automation.editor.${this._params.type}s.type.${this._params.clipboardItem}.label`

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

@@ -1,56 +1,23 @@
 import "@material/mwc-button/mwc-button";
 import { HassEntity } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { nestedArrayMove } from "../../../common/util/array-move";
+import { html } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../components/ha-alert";
-import "../../../components/ha-blueprint-picker";
-import "../../../components/ha-card";
-import "../../../components/ha-circular-progress";
-import "../../../components/ha-markdown";
-import "../../../components/ha-selector/ha-selector";
-import "../../../components/ha-settings-row";
 import { BlueprintAutomationConfig } from "../../../data/automation";
-import {
-  BlueprintOrError,
-  Blueprints,
-  fetchBlueprints,
-} from "../../../data/blueprint";
-import { haStyle } from "../../../resources/styles";
-import { HomeAssistant } from "../../../types";
-import "../ha-config-section";
+import { fetchBlueprints } from "../../../data/blueprint";
+import { HaBlueprintGenericEditor } from "../blueprint/blueprint-generic-editor";
 
 @customElement("blueprint-automation-editor")
-export class HaBlueprintAutomationEditor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ type: Boolean }) public isWide = false;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean, reflect: true }) public narrow = false;
-
+export class HaBlueprintAutomationEditor extends HaBlueprintGenericEditor {
   @property({ attribute: false }) public config!: BlueprintAutomationConfig;
 
   @property({ attribute: false }) public stateObj?: HassEntity;
 
-  @state() private _blueprints?: Blueprints;
-
-  protected firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    this._getBlueprints();
-  }
-
-  private get _blueprint(): BlueprintOrError | undefined {
-    if (!this._blueprints) {
-      return undefined;
-    }
-    return this._blueprints[this.config.use_blueprint.path];
+  protected get _config(): BlueprintAutomationConfig {
+    return this.config;
   }
 
   protected render() {
-    const blueprint = this._blueprint;
     return html`
       ${this.disabled
         ? html`<ha-alert alert-type="warning">
@@ -77,167 +44,14 @@ export class HaBlueprintAutomationEditor extends LitElement {
       ${this.config.description
         ? html`<p class="description">${this.config.description}</p>`
         : ""}
-      <ha-card
-        outlined
-        class="blueprint"
-        .header=${this.hass.localize(
-          "ui.panel.config.automation.editor.blueprint.header"
-        )}
-      >
-        <div class="blueprint-picker-container">
-          ${this._blueprints
-            ? Object.keys(this._blueprints).length
-              ? html`
-                  <ha-blueprint-picker
-                    .hass=${this.hass}
-                    .label=${this.hass.localize(
-                      "ui.panel.config.automation.editor.blueprint.blueprint_to_use"
-                    )}
-                    .blueprints=${this._blueprints}
-                    .value=${this.config.use_blueprint.path}
-                    .disabled=${this.disabled}
-                    @value-changed=${this._blueprintChanged}
-                  ></ha-blueprint-picker>
-                `
-              : this.hass.localize(
-                  "ui.panel.config.automation.editor.blueprint.no_blueprints"
-                )
-            : html`<ha-circular-progress indeterminate></ha-circular-progress>`}
-        </div>
-
-        ${this.config.use_blueprint.path
-          ? blueprint && "error" in blueprint
-            ? html`<p class="warning padding">
-                There is an error in this Blueprint: ${blueprint.error}
-              </p>`
-            : html`${blueprint?.metadata.description
-                ? html`<ha-markdown
-                    class="card-content"
-                    breaks
-                    .content=${blueprint.metadata.description}
-                  ></ha-markdown>`
-                : ""}
-              ${blueprint?.metadata?.input &&
-              Object.keys(blueprint.metadata.input).length
-                ? Object.entries(blueprint.metadata.input).map(
-                    ([key, value]) => {
-                      const selector = value?.selector ?? { text: undefined };
-                      const type = Object.keys(selector)[0];
-                      const enhancedSelector = [
-                        "action",
-                        "condition",
-                        "trigger",
-                      ].includes(type)
-                        ? {
-                            [type]: {
-                              ...selector[type],
-                              path: [key],
-                            },
-                          }
-                        : selector;
-
-                      return html`<ha-settings-row .narrow=${this.narrow}>
-                        <span slot="heading">${value?.name || key}</span>
-                        <ha-markdown
-                          slot="description"
-                          class="card-content"
-                          breaks
-                          .content=${value?.description}
-                        ></ha-markdown>
-                        ${html`<ha-selector
-                          .hass=${this.hass}
-                          .selector=${enhancedSelector}
-                          .key=${key}
-                          .disabled=${this.disabled}
-                          .required=${value?.default === undefined}
-                          .placeholder=${value?.default}
-                          .value=${this.config.use_blueprint.input &&
-                          key in this.config.use_blueprint.input
-                            ? this.config.use_blueprint.input[key]
-                            : value?.default}
-                          @value-changed=${this._inputChanged}
-                          @item-moved=${this._itemMoved}
-                        ></ha-selector>`}
-                      </ha-settings-row>`;
-                    }
-                  )
-                : html`<p class="padding">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.blueprint.no_inputs"
-                    )}
-                  </p>`}`
-          : ""}
-      </ha-card>
+      ${this.renderCard()}
     `;
   }
 
-  private async _getBlueprints() {
+  protected async _getBlueprints() {
     this._blueprints = await fetchBlueprints(this.hass, "automation");
   }
 
-  private _blueprintChanged(ev) {
-    ev.stopPropagation();
-    if (this.config.use_blueprint.path === ev.detail.value) {
-      return;
-    }
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.config,
-        use_blueprint: {
-          path: ev.detail.value,
-        },
-      },
-    });
-  }
-
-  private _inputChanged(ev) {
-    ev.stopPropagation();
-    const target = ev.target as any;
-    const key = target.key;
-    const value = ev.detail ? ev.detail.value : target.value;
-    if (
-      (this.config.use_blueprint.input &&
-        this.config.use_blueprint.input[key] === value) ||
-      (!this.config.use_blueprint.input && value === "")
-    ) {
-      return;
-    }
-    const input = { ...this.config.use_blueprint.input, [key]: value };
-
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.config,
-        use_blueprint: {
-          ...this.config.use_blueprint,
-          input,
-        },
-      },
-    });
-  }
-
-  private _itemMoved(ev) {
-    ev.stopPropagation();
-    const { oldIndex, newIndex, oldPath, newPath } = ev.detail;
-
-    const input = nestedArrayMove(
-      this.config.use_blueprint.input,
-      oldIndex,
-      newIndex,
-      oldPath,
-      newPath
-    );
-
-    fireEvent(this, "value-changed", {
-      value: {
-        ...this.config,
-        use_blueprint: {
-          ...this.config.use_blueprint,
-          input,
-        },
-      },
-    });
-  }
-
   private async _enable(): Promise<void> {
     if (!this.hass || !this.stateObj) {
       return;
@@ -246,69 +60,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
       entity_id: this.stateObj.entity_id,
     });
   }
-
-  private _duplicate() {
-    fireEvent(this, "duplicate");
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      css`
-        :host {
-          display: block;
-        }
-        ha-card.blueprint {
-          margin: 0 auto;
-        }
-        .padding {
-          padding: 16px;
-        }
-        .link-button-row {
-          padding: 14px;
-        }
-        .blueprint-picker-container {
-          padding: 0 16px 16px;
-        }
-        ha-textfield,
-        ha-blueprint-picker {
-          display: block;
-        }
-        h3 {
-          margin: 16px;
-        }
-        .introduction {
-          margin-top: 0;
-          margin-bottom: 12px;
-        }
-        .introduction a {
-          color: var(--primary-color);
-        }
-        p {
-          margin-bottom: 0;
-        }
-        .description {
-          margin-bottom: 16px;
-        }
-        ha-settings-row {
-          --paper-time-input-justify-content: flex-end;
-          --settings-row-content-width: 100%;
-          --settings-row-prefix-display: contents;
-          border-top: 1px solid var(--divider-color);
-        }
-        ha-alert {
-          margin-bottom: 16px;
-          display: block;
-        }
-        ha-alert.re-order {
-          border-radius: var(--ha-card-border-radius, 12px);
-          overflow: hidden;
-        }
-      `,
-    ];
-  }
 }
-
 declare global {
   interface HTMLElementTagNameMap {
     "blueprint-automation-editor": HaBlueprintAutomationEditor;

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

@@ -227,12 +227,14 @@ export default class HaAutomationCondition extends LitElement {
   }
 
   private _moveUp(ev) {
+    ev.stopPropagation();
     const index = (ev.target as any).index;
     const newIndex = index - 1;
     this._move(index, newIndex);
   }
 
   private _moveDown(ev) {
+    ev.stopPropagation();
     const index = (ev.target as any).index;
     const newIndex = index + 1;
     this._move(index, newIndex);

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

@@ -172,7 +172,11 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
           </ha-list-item>
 
           ${stateObj && this._config && this.narrow
-            ? html`<a href="/config/automation/trace/${this._config.id}">
+            ? html`<a
+                href="/config/automation/trace/${encodeURIComponent(
+                  this._config.id!
+                )}"
+              >
                 <ha-list-item graphic="icon">
                   ${this.hass.localize(
                     "ui.panel.config.automation.editor.show_trace"
@@ -563,7 +567,9 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     if (this._config?.id) {
       const result = await this.confirmUnsavedChanged();
       if (result) {
-        navigate(`/config/automation/trace/${this._config.id}`);
+        navigate(
+          `/config/automation/trace/${encodeURIComponent(this._config.id)}`
+        );
       }
     }
   }

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

@@ -435,7 +435,9 @@ class HaAutomationPicker extends LitElement {
       });
       return;
     }
-    navigate(`/config/automation/trace/${automation.attributes.id}`);
+    navigate(
+      `/config/automation/trace/${encodeURIComponent(automation.attributes.id)}`
+    );
   }
 
   private async _toggle(automation): Promise<void> {
@@ -530,9 +532,11 @@ class HaAutomationPicker extends LitElement {
     );
 
     if (automation?.attributes.id) {
-      navigate(`/config/automation/edit/${automation.attributes.id}`);
+      navigate(
+        `/config/automation/edit/${encodeURIComponent(automation.attributes.id)}`
+      );
     } else {
-      navigate(`/config/automation/show/${ev.detail.id}`);
+      navigate(`/config/automation/show/${encodeURIComponent(ev.detail.id)}`);
     }
   }
 

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

@@ -93,7 +93,7 @@ export class HaAutomationTrace extends LitElement {
 
     let devButtons: TemplateResult | string = "";
     if (__DEV__) {
-      devButtons = html`<div style="position: absolute; right: 0;">
+      devButtons = html`<div style="position: absolute; right: 0; z-index: 1;">
         <button @click=${this._importTrace}>Import trace</button>
         <button @click=${this._loadLocalStorageTrace}>Load stored trace</button>
       </div>`;
@@ -106,7 +106,9 @@ export class HaAutomationTrace extends LitElement {
           ? html`
               <a
                 class="trace-link"
-                href="/config/automation/edit/${stateObj.attributes.id}"
+                href="/config/automation/edit/${encodeURIComponent(
+                  stateObj.attributes.id
+                )}"
                 slot="toolbar-icon"
               >
                 <mwc-button>
@@ -140,7 +142,9 @@ export class HaAutomationTrace extends LitElement {
             ? html`
                 <a
                   class="trace-link"
-                  href="/config/automation/edit/${stateObj.attributes.id}"
+                  href="/config/automation/edit/${encodeURIComponent(
+                    stateObj.attributes.id
+                  )}"
                 >
                   <mwc-list-item graphic="icon">
                     ${this.hass.localize(

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

@@ -180,12 +180,14 @@ export default class HaAutomationTrigger extends LitElement {
   }
 
   private _moveUp(ev) {
+    ev.stopPropagation();
     const index = (ev.target as any).index;
     const newIndex = index - 1;
     this._move(index, newIndex);
   }
 
   private _moveDown(ev) {
+    ev.stopPropagation();
     const index = (ev.target as any).index;
     const newIndex = index + 1;
     this._move(index, newIndex);

src/panels/config/blueprint/blueprint-generic-editor.ts

@@ -0,0 +1,275 @@
+import "@material/mwc-button/mwc-button";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../common/dom/fire_event";
+import { nestedArrayMove } from "../../../common/util/array-move";
+import "../../../components/ha-alert";
+import "../../../components/ha-blueprint-picker";
+import "../../../components/ha-card";
+import "../../../components/ha-circular-progress";
+import "../../../components/ha-markdown";
+import "../../../components/ha-selector/ha-selector";
+import "../../../components/ha-settings-row";
+import { BlueprintAutomationConfig } from "../../../data/automation";
+import { BlueprintOrError, Blueprints } from "../../../data/blueprint";
+import { BlueprintScriptConfig } from "../../../data/script";
+import { haStyle } from "../../../resources/styles";
+import { HomeAssistant } from "../../../types";
+
+@customElement("blueprint-generic-editor")
+export abstract class HaBlueprintGenericEditor extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean }) public isWide = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean, reflect: true }) public narrow = false;
+
+  @state() protected _blueprints?: Blueprints;
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    this._getBlueprints();
+  }
+
+  protected get _blueprint(): BlueprintOrError | undefined {
+    if (!this._blueprints) {
+      return undefined;
+    }
+    return this._blueprints[this._config.use_blueprint.path];
+  }
+
+  protected abstract get _config():
+    | BlueprintAutomationConfig
+    | BlueprintScriptConfig;
+
+  protected renderCard() {
+    const blueprint = this._blueprint;
+    return html`
+      <ha-card
+        outlined
+        class="blueprint"
+        .header=${this.hass.localize(
+          "ui.panel.config.automation.editor.blueprint.header"
+        )}
+      >
+        <div class="blueprint-picker-container">
+          ${this._blueprints
+            ? Object.keys(this._blueprints).length
+              ? html`
+                  <ha-blueprint-picker
+                    .hass=${this.hass}
+                    .label=${this.hass.localize(
+                      "ui.panel.config.automation.editor.blueprint.blueprint_to_use"
+                    )}
+                    .blueprints=${this._blueprints}
+                    .value=${this._config.use_blueprint.path}
+                    .disabled=${this.disabled}
+                    @value-changed=${this._blueprintChanged}
+                  ></ha-blueprint-picker>
+                `
+              : this.hass.localize(
+                  "ui.panel.config.automation.editor.blueprint.no_blueprints"
+                )
+            : html`<ha-circular-progress indeterminate></ha-circular-progress>`}
+        </div>
+
+        ${this._config.use_blueprint.path
+          ? blueprint && "error" in blueprint
+            ? html`<p class="warning padding">
+                There is an error in this Blueprint: ${blueprint.error}
+              </p>`
+            : html`${blueprint?.metadata.description
+                ? html`<ha-markdown
+                    class="card-content"
+                    breaks
+                    .content=${blueprint.metadata.description}
+                  ></ha-markdown>`
+                : ""}
+              ${blueprint?.metadata?.input &&
+              Object.keys(blueprint.metadata.input).length
+                ? Object.entries(blueprint.metadata.input).map(
+                    ([key, value]) => {
+                      const selector = value?.selector ?? { text: undefined };
+                      const type = Object.keys(selector)[0];
+                      const enhancedSelector = [
+                        "action",
+                        "condition",
+                        "trigger",
+                      ].includes(type)
+                        ? {
+                            [type]: {
+                              ...selector[type],
+                              path: [key],
+                            },
+                          }
+                        : selector;
+
+                      return html`<ha-settings-row .narrow=${this.narrow}>
+                        <span slot="heading">${value?.name || key}</span>
+                        <ha-markdown
+                          slot="description"
+                          class="card-content"
+                          breaks
+                          .content=${value?.description}
+                        ></ha-markdown>
+                        ${html`<ha-selector
+                          .hass=${this.hass}
+                          .selector=${enhancedSelector}
+                          .key=${key}
+                          .disabled=${this.disabled}
+                          .required=${value?.default === undefined}
+                          .placeholder=${value?.default}
+                          .value=${this._config.use_blueprint.input &&
+                          key in this._config.use_blueprint.input
+                            ? this._config.use_blueprint.input[key]
+                            : value?.default}
+                          @value-changed=${this._inputChanged}
+                          @item-moved=${this._itemMoved}
+                        ></ha-selector>`}
+                      </ha-settings-row>`;
+                    }
+                  )
+                : html`<p class="padding">
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.editor.blueprint.no_inputs"
+                    )}
+                  </p>`}`
+          : ""}
+      </ha-card>
+    `;
+  }
+
+  protected abstract _getBlueprints();
+
+  private _blueprintChanged(ev) {
+    ev.stopPropagation();
+    if (this._config.use_blueprint.path === ev.detail.value) {
+      return;
+    }
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this._config,
+        use_blueprint: {
+          path: ev.detail.value,
+        },
+      },
+    });
+  }
+
+  private _inputChanged(ev) {
+    ev.stopPropagation();
+    const target = ev.target as any;
+    const key = target.key;
+    const value = ev.detail ? ev.detail.value : target.value;
+    if (
+      (this._config.use_blueprint.input &&
+        this._config.use_blueprint.input[key] === value) ||
+      (!this._config.use_blueprint.input && value === "")
+    ) {
+      return;
+    }
+    const input = { ...this._config.use_blueprint.input, [key]: value };
+
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this._config,
+        use_blueprint: {
+          ...this._config.use_blueprint,
+          input,
+        },
+      },
+    });
+  }
+
+  private _itemMoved(ev) {
+    ev.stopPropagation();
+    const { oldIndex, newIndex, oldPath, newPath } = ev.detail;
+
+    const input = nestedArrayMove(
+      this._config.use_blueprint.input,
+      oldIndex,
+      newIndex,
+      oldPath,
+      newPath
+    );
+
+    fireEvent(this, "value-changed", {
+      value: {
+        ...this._config,
+        use_blueprint: {
+          ...this._config.use_blueprint,
+          input,
+        },
+      },
+    });
+  }
+
+  protected _duplicate() {
+    fireEvent(this, "duplicate");
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        :host {
+          display: block;
+        }
+        ha-card.blueprint {
+          margin: 0 auto;
+        }
+        .padding {
+          padding: 16px;
+        }
+        .link-button-row {
+          padding: 14px;
+        }
+        .blueprint-picker-container {
+          padding: 0 16px 16px;
+        }
+        ha-textfield,
+        ha-blueprint-picker {
+          display: block;
+        }
+        h3 {
+          margin: 16px;
+        }
+        .introduction {
+          margin-top: 0;
+          margin-bottom: 12px;
+        }
+        .introduction a {
+          color: var(--primary-color);
+        }
+        p {
+          margin-bottom: 0;
+        }
+        .description {
+          margin-bottom: 16px;
+        }
+        ha-settings-row {
+          --paper-time-input-justify-content: flex-end;
+          --settings-row-content-width: 100%;
+          --settings-row-prefix-display: contents;
+          border-top: 1px solid var(--divider-color);
+        }
+        ha-alert {
+          margin-bottom: 16px;
+          display: block;
+        }
+        ha-alert.re-order {
+          border-radius: var(--ha-card-border-radius, 12px);
+          overflow: hidden;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "blueprint-generic-editor": HaBlueprintGenericEditor;
+  }
+}

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -1,18 +1,22 @@
-import "@material/mwc-button";
 import { mdiContentCopy, mdiHelpCircle } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../../common/util/copy-clipboard";
 import "../../../../components/ha-alert";
+import "../../../../components/ha-button";
 import "../../../../components/ha-card";
+import "../../../../components/ha-expansion-panel";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 // eslint-disable-next-line
+import { formatDate } from "../../../../common/datetime/format_date";
 import type { HaSwitch } from "../../../../components/ha-switch";
 import {
   CloudStatusLoggedIn,
   connectCloudRemote,
   disconnectCloudRemote,
+  updateCloudPref,
 } from "../../../../data/cloud";
 import type { HomeAssistant } from "../../../../types";
 import { showToast } from "../../../../util/toast";
@@ -29,7 +33,8 @@ export class CloudRemotePref extends LitElement {
       return nothing;
     }
 
-    const { remote_enabled } = this.cloudStatus.prefs;
+    const { remote_enabled, remote_allow_remote_enable } =
+      this.cloudStatus.prefs;
 
     const {
       remote_connected,
@@ -123,16 +128,60 @@ export class CloudRemotePref extends LitElement {
           >.
           <ha-svg-icon
             .url=${`https://${remote_domain}`}
-            .path=${mdiContentCopy}
             @click=${this._copyURL}
+            .path=${mdiContentCopy}
           ></ha-svg-icon>
-        </div>
-        <div class="card-actions">
-          <mwc-button @click=${this._openCertInfo}>
-            ${this.hass.localize(
-              "ui.panel.config.cloud.account.remote.certificate_info"
+          <ha-expansion-panel
+            outlined
+            .header=${this.hass.localize(
+              "ui.panel.config.cloud.account.remote.advanced_options"
             )}
-          </mwc-button>
+          >
+            <ha-settings-row>
+              <span slot="heading"
+                >${this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.external_activation"
+                )}</span
+              >
+              <span slot="description"
+                >${this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.external_activation_secondary"
+                )}</span
+              >
+              <ha-switch
+                .checked=${remote_allow_remote_enable}
+                @change=${this._toggleAllowRemoteEnabledChanged}
+              ></ha-switch>
+            </ha-settings-row>
+            <ha-settings-row>
+              <span slot="heading"
+                >${this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.certificate_info"
+                )}</span
+              >
+              <span slot="description"
+                >${this.cloudStatus!.remote_certificate
+                  ? this.hass.localize(
+                      "ui.panel.config.cloud.account.remote.certificate_expire",
+                      {
+                        date: formatDate(
+                          new Date(
+                            this.cloudStatus.remote_certificate.expire_date
+                          ),
+                          this.hass.locale,
+                          this.hass.config
+                        ),
+                      }
+                    )
+                  : nothing}</span
+              >
+              <ha-button @click=${this._openCertInfo}>
+                ${this.hass.localize(
+                  "ui.panel.config.cloud.account.remote.more_info"
+                )}
+              </ha-button>
+            </ha-settings-row>
+          </ha-expansion-panel>
         </div>
       </ha-card>
     `;
@@ -160,6 +209,20 @@ export class CloudRemotePref extends LitElement {
     }
   }
 
+  private async _toggleAllowRemoteEnabledChanged(ev) {
+    const toggle = ev.target as HaSwitch;
+
+    try {
+      await updateCloudPref(this.hass, {
+        remote_allow_remote_enable: toggle.checked,
+      });
+      fireEvent(this, "ha-refresh-cloud-status");
+    } catch (err: any) {
+      alert(err.message);
+      toggle.checked = !toggle.checked;
+    }
+  }
+
   private async _copyURL(ev): Promise<void> {
     const url = ev.currentTarget.url;
     await copyToClipboard(url);
@@ -204,6 +267,8 @@ export class CloudRemotePref extends LitElement {
         position: absolute;
         right: 24px;
         top: 24px;
+        inset-inline-end: 24px;
+        inset-inline-start: initial;
       }
       .card-actions {
         display: flex;
@@ -216,6 +281,12 @@ export class CloudRemotePref extends LitElement {
         color: var(--secondary-text-color);
         cursor: pointer;
       }
+      ha-formfield {
+        margin-top: 8px;
+      }
+      ha-expansion-panel {
+        margin-top: 8px;
+      }
     `;
   }
 }