Add buttons on mobile to move sections

This reverts commit 3abdffda9c.

build-scripts/gulp/compress.js

@@ -1,26 +1,19 @@
 // Tasks to compress
 
-import { deleteAsync } from "del";
 import gulp from "gulp";
-import gulpIf from "gulp-if";
-import vinylPaths from "vinyl-paths";
 import zopfli from "gulp-zopfli-green";
 import paths from "../paths.cjs";
 
 const zopfliOptions = { threshold: 150 };
 
-const compressedExt = /\.gz$/;
-const deleteUncompressed = (p) => deleteAsync(p.replace(compressedExt, ""));
-
 const compressDist = (rootDir) =>
   gulp
     .src([
-      `${rootDir}/**/*.{js?(.map),json,css,svg,xml}`,
+      `${rootDir}/**/*.{js,json,css,svg,xml}`,
       `${rootDir}/{authorize,onboarding}.html`,
     ])
     .pipe(zopfli(zopfliOptions))
-    .pipe(gulp.dest(rootDir))
-    .pipe(gulpIf(compressedExt, vinylPaths(deleteUncompressed)));
+    .pipe(gulp.dest(rootDir));
 
 gulp.task("compress-app", () => compressDist(paths.app_output_root));
 gulp.task("compress-hassio", () => compressDist(paths.hassio_output_root));

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/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() {

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

@@ -32,8 +32,8 @@
     "@codemirror/language": "6.10.1",
     "@codemirror/legacy-modes": "6.3.3",
     "@codemirror/search": "6.5.6",
-    "@codemirror/state": "6.4.0",
-    "@codemirror/view": "6.24.0",
+    "@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,12 +43,12 @@
     "@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",
@@ -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.6",
-    "@vaadin/vaadin-themable-mixin": "24.3.6",
+    "@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,6 +99,7 @@
     "@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.36.0",
     "cropperjs": "1.6.1",
@@ -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.5",
+    "hls.js": "1.5.7",
     "home-assistant-js-websocket": "9.1.0",
     "idb-keyval": "6.2.1",
     "intl-messageformat": "10.5.11",
@@ -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.10.0",
+    "@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,8 +171,8 @@
     "@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/gulp-if": "^3",
     "@types/html-minifier-terser": "7.0.2",
     "@types/js-yaml": "4.0.9",
     "@types/leaflet": "1.9.8",
@@ -180,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": "7.0.1",
-    "@typescript-eslint/parser": "7.0.1",
+    "@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.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",
@@ -208,8 +209,7 @@
     "glob": "10.3.10",
     "gulp": "4.0.2",
     "gulp-flatmap": "1.0.2",
-    "gulp-if": "3.0.0",
-    "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",
@@ -224,7 +224,7 @@
     "map-stream": "0.0.7",
     "mocha": "10.3.0",
     "object-hash": "3.0.0",
-    "open": "10.0.3",
+    "open": "10.0.4",
     "pinst": "3.0.0",
     "prettier": "3.2.5",
     "rollup": "2.79.1",
@@ -241,14 +241,13 @@
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.3.3",
     "vinyl-buffer": "1.0.1",
-    "vinyl-paths": "5.0.0",
     "vinyl-source-stream": "2.0.0",
-    "webpack": "5.90.2",
+    "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.0"
+version      = "20240228.0"
 license      = {text = "Apache-2.0"}
 description  = "The Home Assistant frontend"
 readme       = "README.md"

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/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

@@ -75,6 +75,8 @@ export class HaChartBase extends LitElement {
 
   private _paddingYAxisInternal = 0;
 
+  private _datasetOrder: number[] = [];
+
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._releaseCanvas();
@@ -165,7 +167,17 @@ 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) {
@@ -205,8 +217,9 @@ export class HaChartBase extends LitElement {
       ${this.options?.plugins?.legend?.display === true
         ? html`<div class="chartLegend">
             <ul>
-              ${this.data.datasets.map((dataset, index) =>
-                this.extraData?.[index]?.show_legend === false
+              ${this._datasetOrder.map((index) => {
+                const dataset = this.data.datasets[index];
+                return this.extraData?.[index]?.show_legend === false
                   ? nothing
                   : html`<li
                       .datasetIndex=${index}
@@ -228,8 +241,8 @@ export class HaChartBase extends LitElement {
                         ${this.extraData?.[index]?.legend_label ??
                         dataset.label}
                       </div>
-                    </li>`
-              )}
+                    </li>`;
+              })}
             </ul>
           </div>`
         : ""}

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/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-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/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/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/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/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/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/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/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/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,13 +1,16 @@
-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,
@@ -125,22 +128,60 @@ export class CloudRemotePref extends LitElement {
           >.
           <ha-svg-icon
             .url=${`https://${remote_domain}`}
-            .path=${mdiContentCopy}
             @click=${this._copyURL}
+            .path=${mdiContentCopy}
           ></ha-svg-icon>
-          <ha-formfield .label=${"Allow external activation"}>
-            <ha-switch
-              .checked=${remote_allow_remote_enable}
-              @change=${this._toggleAllowRemoteEnabledChanged}
-            ></ha-switch>
-          </ha-formfield>
-        </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>
     `;
@@ -226,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;
@@ -241,6 +284,9 @@ export class CloudRemotePref extends LitElement {
       ha-formfield {
         margin-top: 8px;
       }
+      ha-expansion-panel {
+        margin-top: 8px;
+      }
     `;
   }
 }

src/panels/config/devices/device-detail/ha-device-entities-card.ts

@@ -27,7 +27,10 @@ import { addEntitiesToLovelaceView } from "../../../lovelace/editor/add-entities
 import type { LovelaceRowConfig } from "../../../lovelace/entity-rows/types";
 import { LovelaceRow } from "../../../lovelace/entity-rows/types";
 import { EntityRegistryStateEntry } from "../ha-config-device-page";
-import { computeCards } from "../../../lovelace/common/generate-lovelace-config";
+import {
+  computeCards,
+  computeSection,
+} from "../../../lovelace/common/generate-lovelace-config";
 
 @customElement("ha-device-entities-card")
 export class HaDeviceEntitiesCard extends LitElement {
@@ -235,6 +238,9 @@ export class HaDeviceEntitiesCard extends LitElement {
       computeCards(this.hass.states, entities, {
         title: this.deviceName,
       }),
+      computeSection(entities, {
+        title: this.deviceName,
+      }),
       entities
     );
   }

src/panels/config/devices/ha-config-device-page.ts

@@ -431,19 +431,18 @@ export class HaConfigDevicePage extends LitElement {
                             <a
                               href=${ifDefined(
                                 entityState.attributes.id
-                                  ? `/config/automation/edit/${entityState.attributes.id}`
+                                  ? `/config/automation/edit/${encodeURIComponent(entityState.attributes.id)}`
                                   : undefined
                               )}
                             >
-                              <paper-item
+                              <ha-list-item
+                                hasMeta
                                 .automation=${entityState}
                                 .disabled=${!entityState.attributes.id}
                               >
-                                <paper-item-body>
-                                  ${computeStateName(entityState)}
-                                </paper-item-body>
-                                <ha-icon-next></ha-icon-next>
-                              </paper-item>
+                                ${computeStateName(entityState)}
+                                <ha-icon-next slot="meta"></ha-icon-next>
+                              </ha-list-item>
                             </a>
                             ${!entityState.attributes.id
                               ? html`
@@ -528,15 +527,14 @@ export class HaConfigDevicePage extends LitElement {
                                       : undefined
                                   )}
                                 >
-                                  <paper-item
+                                  <ha-list-item
+                                    hasMeta
                                     .scene=${entityState}
                                     .disabled=${!entityState.attributes.id}
                                   >
-                                    <paper-item-body>
-                                      ${computeStateName(entityState)}
-                                    </paper-item-body>
-                                    <ha-icon-next></ha-icon-next>
-                                  </paper-item>
+                                    ${computeStateName(entityState)}
+                                    <ha-icon-next slot="meta"></ha-icon-next>
+                                  </ha-list-item>
                                 </a>
                                 ${!entityState.attributes.id
                                   ? html`
@@ -623,12 +621,10 @@ export class HaConfigDevicePage extends LitElement {
                       return entityState
                         ? html`
                             <a href=${url}>
-                              <paper-item .script=${script}>
-                                <paper-item-body>
-                                  ${computeStateName(entityState)}
-                                </paper-item-body>
-                                <ha-icon-next></ha-icon-next>
-                              </paper-item>
+                              <ha-list-item hasMeta .script=${script}>
+                                ${computeStateName(entityState)}
+                                <ha-icon-next slot="meta"></ha-icon-next>
+                              </ha-list-item>
                             </a>
                           `
                         : "";
@@ -1518,11 +1514,6 @@ export class HaConfigDevicePage extends LitElement {
           margin-top: 0;
         }
 
-        paper-item {
-          cursor: pointer;
-          font-size: var(--paper-font-body1_-_font-size);
-        }
-
         a {
           text-decoration: none;
           color: var(--primary-color);

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -939,9 +939,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
         >
         <ha-switch
           .checked=${!this._disabledBy && !this._hiddenBy}
-          .disabled=${this.disabled ||
-          this._disabledBy ||
-          (this._hiddenBy && this._hiddenBy !== "user")}
+          .disabled=${this.disabled || this._disabledBy}
           @change=${this._hiddenChanged}
         ></ha-switch>
       </ha-settings-row>

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

@@ -74,7 +74,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       translationKey: "areas",
       iconPath: mdiSofa,
       iconColor: "#E48629",
-      components: ["zone"],
+      component: "zone",
     },
     {
       path: "/hassio",
@@ -108,7 +108,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       translationKey: "people",
       iconPath: mdiAccount,
       iconColor: "#5A87FA",
-      components: ["person", "users"],
+      component: ["person", "users"],
     },
     {
       path: "#external-app-configuration",
@@ -309,6 +309,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       iconPath: mdiBackupRestore,
       iconColor: "#0D47A1",
       component: "backup",
+      not_component: "hassio",
     },
     {
       path: "/hassio/backups",
@@ -341,7 +342,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       translationKey: "hardware",
       iconPath: mdiMemory,
       iconColor: "#301A8E",
-      components: ["hassio", "hardware"],
+      component: ["hassio", "hardware"],
     },
   ],
   about: [

src/panels/config/hardware/dialog-hardware-available.ts

@@ -171,12 +171,18 @@ class DialogHardwareAvailable extends LitElement implements HassDialog {
         ha-icon-button {
           position: absolute;
           right: 16px;
+          inset-inline-end: 16px;
+          inset-inline-start: initial;
           top: 10px;
+          inset-inline-end: 16px;
+          inset-inline-start: initial;
           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);
         }
         ha-expansion-panel {

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -177,8 +177,13 @@ class HaInputSelectForm extends LitElement {
     const index = (ev.target as any).index;
     if (
       !(await showConfirmationDialog(this, {
-        title: "Delete this item?",
-        text: "Are you sure you want to delete this item?",
+        title: this.hass.localize(
+          "ui.dialogs.helper_settings.input_select.confirm_delete.delete"
+        ),
+        text: this.hass.localize(
+          "ui.dialogs.helper_settings.input_select.confirm_delete.prompt"
+        ),
+        destructive: true,
       }))
     ) {
       return;

src/panels/config/integrations/ha-config-integrations-dashboard.ts

@@ -877,6 +877,8 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
           color: var(--text-primary-color);
           position: absolute;
           right: 0px;
+          inset-inline-end: 0px;
+          inset-inline-start: initial;
           top: 4px;
           font-size: 0.65em;
         }
@@ -884,7 +886,10 @@ class HaConfigIntegrationsDashboard extends SubscribeMixin(LitElement) {
           position: relative;
         }
         h1 {
-          margin: 8px 0 0 16px;
+          margin-top: 8px;
+          margin-left: 16px;
+          margin-inline-start: 16px;
+          margin-inline-end: initial;
         }
         ha-button-menu {
           color: var(--primary-text-color);

src/panels/config/integrations/ha-integration-action-card.ts

@@ -90,6 +90,8 @@ export class HaIntegrationActionCard extends LitElement {
         position: absolute;
         top: 8px;
         right: 8px;
+        inset-inline-end: 8px;
+        inset-inline-start: initial;
       }
       .filler {
         flex: 1;

src/panels/config/integrations/integration-panels/matter/dialog-matter-ping-node.ts

@@ -137,6 +137,7 @@ class DialogMatterPingNode extends LitElement {
   public closeDialog(): void {
     this.device_id = undefined;
     this._status = undefined;
+    this._pingResult = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 

src/panels/config/integrations/integration-panels/thread/thread-config-panel.ts

@@ -54,6 +54,7 @@ import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import { brandsUrl } from "../../../../../util/brands-url";
 import { fileDownload } from "../../../../../util/file_download";
+import { documentationUrl } from "../../../../../util/documentation-url";
 
 interface ThreadNetwork {
   name: string;
@@ -123,11 +124,16 @@ export class ThreadConfigPanel extends SubscribeMixin(LitElement) {
                     )}
                   </h3>
                   <ha-svg-icon .path=${mdiDevices}></ha-svg-icon>
-                  <mwc-button @click=${this._addOTBR}
-                    >${this.hass.localize(
-                      "ui.panel.config.thread.add_open_thread_border_router"
-                    )}</mwc-button
+                  <a
+                    href=${documentationUrl(this.hass, `/integrations/thread`)}
+                    target="_blank"
                   >
+                    <mwc-button
+                      >${this.hass.localize(
+                        "ui.panel.config.thread.more_info"
+                      )}</mwc-button
+                    >
+                  </a>
                 </div>
               </ha-card>`}
           ${networks.networks.length

src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts

@@ -269,6 +269,8 @@ class ZHAAddDevicesPage extends LitElement {
           margin-inline-start: initial;
           top: -6px;
           right: 0;
+          inset-inline-end: 0;
+          inset-inline-start: initial;
           color: var(--primary-color);
         }
         .search-button {

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -241,6 +241,8 @@ export class ZHAClusterCommands extends LitElement {
           float: right;
           top: -6px;
           right: 0;
+          inset-inline-end: 0;
+          inset-inline-start: initial;
           padding-right: 0px;
           padding-inline-end: 0px;
           padding-inline-start: initial;

src/panels/config/integrations/integration-panels/zha/zha-group-page.ts

@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import { mdiDelete } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
 import {
   CSSResultGroup,
   LitElement,
@@ -32,6 +31,8 @@ import "../../../ha-config-section";
 import { formatAsPaddedHex } from "./functions";
 import "./zha-device-endpoint-data-table";
 import type { ZHADeviceEndpointDataTable } from "./zha-device-endpoint-data-table";
+import "@material/mwc-list/mwc-list";
+import "../../../../../components/ha-list-item";
 
 @customElement("zha-group-page")
 export class ZHAGroupPage extends LitElement {
@@ -131,20 +132,24 @@ export class ZHAGroupPage extends LitElement {
             ${this.hass.localize("ui.panel.config.zha.groups.members")}
           </div>
           <ha-card>
-            ${this.group.members.length
-              ? this.group.members.map(
-                  (member) =>
-                    html`<a
-                      href="/config/devices/device/${member.device
-                        .device_reg_id}"
-                    >
-                      <paper-item
-                        >${member.device.user_given_name ||
-                        member.device.name}</paper-item
+            <mwc-list>
+              ${this.group.members.length
+                ? this.group.members.map(
+                    (member) =>
+                      html`<a
+                        href="/config/devices/device/${member.device
+                          .device_reg_id}"
                       >
-                    </a>`
-                )
-              : html` <paper-item> This group has no members </paper-item> `}
+                        <ha-list-item
+                          >${member.device.user_given_name ||
+                          member.device.name}</ha-list-item
+                        >
+                      </a>`
+                  )
+                : html`
+                    <ha-list-item> This group has no members </ha-list-item>
+                  `}
+            </mwc-list>
           </ha-card>
           ${this.group.members.length
             ? html`

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

@@ -8,13 +8,20 @@ import { HomeAssistant } from "../../../types";
 
 export const lovelaceTabs = [
   {
-    component: "lovelace",
     path: "/config/lovelace/dashboards",
     translationKey: "ui.panel.config.lovelace.dashboards.caption",
     iconPath: mdiViewDashboard,
   },
 ];
 
+export const lovelaceResourcesTabs = [
+  {
+    path: "/config/lovelace/resources",
+    translationKey: "ui.panel.config.lovelace.resources.caption",
+    iconPath: mdiViewDashboard,
+  },
+];
+
 @customElement("ha-config-lovelace")
 class HaConfigLovelace extends HassRouterPage {
   @property({ attribute: false }) public hass!: HomeAssistant;

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -34,7 +34,7 @@ import "../../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant, Route } from "../../../../types";
 import { loadLovelaceResources } from "../../../lovelace/common/load-resources";
-import { lovelaceTabs } from "../ha-config-lovelace";
+import { lovelaceResourcesTabs } from "../ha-config-lovelace";
 import { showResourceDetailDialog } from "./show-dialog-lovelace-resource-detail";
 
 @customElement("ha-config-lovelace-resources")
@@ -117,7 +117,7 @@ export class HaConfigLovelaceRescources extends LitElement {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
-        .tabs=${lovelaceTabs}
+        .tabs=${lovelaceResourcesTabs}
         .columns=${this._columns(this.hass.language)}
         .data=${this._resources}
         .noDataText=${this.hass.localize(

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

@@ -1,52 +1,19 @@
-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 {
-  BlueprintOrError,
-  Blueprints,
-  fetchBlueprints,
-} from "../../../data/blueprint";
 import { BlueprintScriptConfig } from "../../../data/script";
-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-script-editor")
-export class HaBlueprintScriptEditor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ type: Boolean }) public isWide = false;
-
-  @property({ reflect: true, type: Boolean }) public narrow = false;
-
-  @property({ type: Boolean }) public disabled = false;
-
+export class HaBlueprintScriptEditor extends HaBlueprintGenericEditor {
   @property({ attribute: false }) public config!: BlueprintScriptConfig;
 
-  @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(): BlueprintScriptConfig {
+    return this.config;
   }
 
   protected render() {
-    const blueprint = this._blueprint;
     return html`
       ${this.disabled
         ? html`<ha-alert alert-type="warning">
@@ -56,228 +23,14 @@ export class HaBlueprintScriptEditor extends LitElement {
             </mwc-button>
           </ha-alert>`
         : ""}
-      <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, "script");
   }
-
-  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 _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-script-editor": HaBlueprintScriptEditor;

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

@@ -811,7 +811,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
           "ui.panel.config.script.editor.id_already_exists_save_error"
         ),
         dismissable: false,
-        duration: 0,
+        duration: -1,
         action: {
           action: () => {},
           text: this.hass.localize("ui.dialogs.generic.ok"),

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

@@ -334,6 +334,8 @@ class HaConfigSectionStorage extends LitElement {
       position: relative;
       top: -10px;
       right: 10px;
+      inset-inline-end: 10px;
+      inset-inline-start: initial;
     }
 
     .no-mounts {

src/panels/config/voice-assistants/expose/expose-assistant-icon.ts

@@ -93,6 +93,8 @@ export class VoiceAssistantExposeAssistantIcon extends LitElement {
         --mdc-icon-size: 16px;
         right: 10px;
         top: -7px;
+        inset-inline-end: 10px;
+        inset-inline-start: initial;
       }
     `;
   }

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

@@ -58,6 +58,8 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
 
   @property({ attribute: false }) public route!: Route;
 
+  @state() private _searchParms = new URLSearchParams(window.location.search);
+
   @state() private _storageItems?: Zone[];
 
   @state() private _stateItems?: HassEntity[];
@@ -219,7 +221,9 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
         .hass=${this.hass}
         .narrow=${this.narrow}
         .route=${this.route}
-        back-path="/config"
+        .backPath=${this._searchParms.has("historyBack")
+          ? undefined
+          : "/config"}
         .tabs=${configSections.areas}
       >
         ${this.narrow

src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts

@@ -34,6 +34,11 @@ import { HomeAssistant } from "../../../types";
 import { showToast } from "../../../util/toast";
 import type { DialogStatisticsAdjustSumParams } from "./show-dialog-statistics-adjust-sum";
 
+interface CombinedStat {
+  hour: StatisticValue | null;
+  fiveMin: StatisticValue[];
+}
+
 @customElement("dialog-statistics-adjust-sum")
 export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -196,6 +201,13 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
         @value-changed=${this._dateTimeSelectorChanged}
       ></ha-selector-datetime>
       <div class="stat-list">${stats}</div>
+      <mwc-button
+        slot="secondaryAction"
+        .label=${this.hass.localize(
+          "ui.panel.developer-tools.tabs.statistics.fix_issue.adjust_sum.outliers"
+        )}
+        @click=${this._fetchOutliers}
+      ></mwc-button>
       <mwc-button
         slot="primaryAction"
         dialogAction="cancel"
@@ -349,6 +361,101 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
       statId in stats5MinData ? stats5MinData[statId].slice(0, 5) : [];
   }
 
+  private async _fetchOutliers(): Promise<void> {
+    this._stats5min = undefined;
+    this._statsHour = undefined;
+    const statId = this._params!.statistic.statistic_id;
+
+    // Get all the data
+    const start = new Date(0);
+    const end = new Date();
+
+    const statsHourData = await fetchStatistics(
+      this.hass,
+      start,
+      end,
+      [statId],
+      "hour"
+    );
+
+    const statsHour = statId in statsHourData ? statsHourData[statId] : [];
+    if (statsHour.length === 0) {
+      return;
+    }
+
+    const stats5MinData = await fetchStatistics(
+      this.hass,
+      start,
+      end,
+      [statId],
+      "5minute"
+    );
+
+    const stats5Min = statId in stats5MinData ? stats5MinData[statId] : [];
+    // First datapoint of 5 minute data in the history is always junk since it counts the entire sum
+    // as the change, which we don't want here.
+    stats5Min.shift();
+
+    const combinedStatsData: CombinedStat[] = [];
+    statsHour.forEach((s) => {
+      combinedStatsData.push({ hour: s, fiveMin: [] });
+    });
+
+    const lasthour: CombinedStat = { hour: null, fiveMin: [] };
+
+    let i = 0;
+    stats5Min.forEach((s) => {
+      let matched = false;
+      for (i; i < combinedStatsData.length; i++) {
+        const hour = combinedStatsData[i].hour;
+        if (hour && s.start >= hour.start && s.end <= hour.end) {
+          combinedStatsData[i].fiveMin.push(s);
+          matched = true;
+          break;
+        }
+      }
+      if (!matched) {
+        lasthour.fiveMin.push(s);
+      }
+    });
+
+    combinedStatsData.push(lasthour);
+
+    let statsOutliers: StatisticValue[] = [];
+    let min = 0;
+    const numOutliers = 10;
+
+    // Track the top 10 values.
+    const addOutlier = (s) => {
+      const val = Math.abs(s.change ?? 0);
+      if (statsOutliers.length < numOutliers || val > min) {
+        statsOutliers.push(s);
+        statsOutliers = statsOutliers.sort(
+          (a, b) => Math.abs(b.change ?? 0) - Math.abs(a.change ?? 0)
+        );
+        statsOutliers = statsOutliers.slice(0, numOutliers);
+        min = statsOutliers[statsOutliers.length - 1].change ?? 0;
+      }
+    };
+
+    // If an hour has no five minute data, add the hour value
+    // Otherwise, add the 5 minute values and ignore the hour value
+    combinedStatsData.forEach((c) => {
+      if (c.fiveMin.length === 0 && c.hour) {
+        addOutlier(c.hour);
+      } else {
+        c.fiveMin.forEach((s) => {
+          addOutlier(s);
+        });
+      }
+    });
+
+    // Outliers are a possible mix of hour/5minute data, but the distinction
+    // is not relevant here, as long as only one array is populated.
+    this._statsHour = statsOutliers;
+    this._stats5min = [];
+  }
+
   private async _fixIssue(): Promise<void> {
     const unit = getDisplayUnit(
       this.hass,

src/panels/developer-tools/template/developer-tools-template.ts

@@ -290,6 +290,8 @@ class HaPanelDevTemplate extends LitElement {
           position: absolute;
           top: 8px;
           right: 8px;
+          inset-inline-end: 8px;
+          inset-inline-start: initial;
         }
 
         ha-alert {

src/panels/energy/ha-panel-energy.ts

@@ -7,7 +7,7 @@ import {
   html,
   nothing,
 } from "lit";
-import { mdiPencil } from "@mdi/js";
+import { mdiPencil, mdiDownload } from "@mdi/js";
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-menu-button";
 import "../../components/ha-list-item";
@@ -19,6 +19,18 @@ import "../lovelace/components/hui-energy-period-selector";
 import { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
 import { navigate } from "../../common/navigate";
+import {
+  getEnergyDataCollection,
+  getEnergyGasUnit,
+  getEnergyWaterUnit,
+  GridSourceTypeEnergyPreference,
+  SolarSourceTypeEnergyPreference,
+  BatterySourceTypeEnergyPreference,
+  GasSourceTypeEnergyPreference,
+  WaterSourceTypeEnergyPreference,
+  DeviceConsumptionEnergyPreference,
+} from "../../data/energy";
+import { fileDownload } from "../../util/file_download";
 
 const ENERGY_LOVELACE_CONFIG: LovelaceConfig = {
   views: [
@@ -86,6 +98,15 @@ class PanelEnergy extends LitElement {
                     </ha-svg-icon>
                     ${this.hass!.localize("ui.panel.energy.configure")}
                   </ha-list-item>
+                  <ha-list-item
+                    slot="overflow-menu"
+                    graphic="icon"
+                    @request-selected=${this._dumpCSV}
+                  >
+                    <ha-svg-icon slot="graphic" .path=${mdiDownload}>
+                    </ha-svg-icon>
+                    ${this.hass!.localize("ui.panel.energy.download_data")}
+                  </ha-list-item>
                 `
               : nothing}
           </hui-energy-period-selector>
@@ -122,6 +143,182 @@ class PanelEnergy extends LitElement {
     navigate("/config/energy?historyBack=1");
   }
 
+  private async _dumpCSV(ev) {
+    ev.stopPropagation();
+    const energyData = getEnergyDataCollection(this.hass, {
+      key: "energy_dashboard",
+    });
+
+    if (!energyData.prefs || !energyData.state.stats) {
+      return;
+    }
+
+    const gasUnit =
+      getEnergyGasUnit(
+        this.hass,
+        energyData.prefs,
+        energyData.state.statsMetadata
+      ) || "";
+    const waterUnit = getEnergyWaterUnit(this.hass);
+    const electricUnit = "kWh";
+
+    const energy_sources = energyData.prefs.energy_sources;
+    const device_consumption = energyData.prefs.device_consumption;
+    const stats = energyData.state.stats;
+
+    const timeSet = new Set<number>();
+    Object.values(stats).forEach((stat) => {
+      stat.forEach((datapoint) => {
+        timeSet.add(datapoint.start);
+      });
+    });
+    const times = Array.from(timeSet).sort();
+
+    const headers =
+      "entity_id,type,unit," +
+      times.map((t) => new Date(t).toISOString()).join(",") +
+      "\n";
+    const csv: string[] = [];
+    csv[0] = headers;
+
+    const processStat = function (stat: string, type: string, unit: string) {
+      let n = 0;
+      const row: string[] = [];
+      if (!stats[stat]) {
+        return;
+      }
+      row.push(stat);
+      row.push(type);
+      row.push(unit.normalize("NFKD"));
+      times.forEach((t) => {
+        if (stats[stat][n].start > t) {
+          row.push("");
+        } else if (n < stats[stat].length && stats[stat][n].start === t) {
+          row.push((stats[stat][n].change ?? "").toString());
+          n++;
+        } else {
+          row.push("");
+        }
+      });
+      csv.push(row.join(",") + "\n");
+    };
+
+    const currency = this.hass.config.currency;
+
+    const printCategory = function (
+      type: string,
+      statIds: string[],
+      unit: string,
+      costType?: string
+    ) {
+      if (statIds.length) {
+        statIds.forEach((stat) => processStat(stat, type, unit));
+        if (costType) {
+          statIds.forEach((stat) => {
+            const costStat = energyData.state.info.cost_sensors[stat];
+            if (energyData.state.info.cost_sensors[stat]) {
+              processStat(costStat, costType, currency);
+            }
+          });
+        }
+      }
+    };
+
+    const grid_consumptions: string[] = [];
+    const grid_productions: string[] = [];
+    energy_sources
+      .filter((s) => s.type === "grid")
+      .forEach((source) => {
+        source = source as GridSourceTypeEnergyPreference;
+        source.flow_from.forEach((flowFrom) => {
+          grid_consumptions.push(flowFrom.stat_energy_from);
+        });
+        source.flow_to.forEach((flowTo) => {
+          grid_productions.push(flowTo.stat_energy_to);
+        });
+      });
+
+    printCategory(
+      "grid_consumption",
+      grid_consumptions,
+      electricUnit,
+      "grid_consumption_cost"
+    );
+    printCategory(
+      "grid_return",
+      grid_productions,
+      electricUnit,
+      "grid_return_compensation"
+    );
+
+    const battery_ins: string[] = [];
+    const battery_outs: string[] = [];
+    energy_sources
+      .filter((s) => s.type === "battery")
+      .forEach((source) => {
+        source = source as BatterySourceTypeEnergyPreference;
+        battery_ins.push(source.stat_energy_to);
+        battery_outs.push(source.stat_energy_from);
+      });
+
+    printCategory("battery_in", battery_ins, electricUnit);
+    printCategory("battery_out", battery_outs, electricUnit);
+
+    const solar_productions: string[] = [];
+    energy_sources
+      .filter((s) => s.type === "solar")
+      .forEach((source) => {
+        source = source as SolarSourceTypeEnergyPreference;
+        solar_productions.push(source.stat_energy_from);
+      });
+
+    printCategory("solar_production", solar_productions, electricUnit);
+
+    const gas_consumptions: string[] = [];
+    energy_sources
+      .filter((s) => s.type === "gas")
+      .forEach((source) => {
+        source = source as GasSourceTypeEnergyPreference;
+        gas_consumptions.push(source.stat_energy_from);
+      });
+
+    printCategory(
+      "gas_consumption",
+      gas_consumptions,
+      gasUnit,
+      "gas_consumption_cost"
+    );
+
+    const water_consumptions: string[] = [];
+    energy_sources
+      .filter((s) => s.type === "water")
+      .forEach((source) => {
+        source = source as WaterSourceTypeEnergyPreference;
+        water_consumptions.push(source.stat_energy_from);
+      });
+
+    printCategory(
+      "water_consumption",
+      water_consumptions,
+      waterUnit,
+      "water_consumption_cost"
+    );
+
+    const devices: string[] = [];
+    device_consumption.forEach((source) => {
+      source = source as DeviceConsumptionEnergyPreference;
+      devices.push(source.stat_consumption);
+    });
+
+    printCategory("device_consumption", devices, electricUnit);
+
+    const blob = new Blob(csv, {
+      type: "text/csv",
+    });
+    const url = window.URL.createObjectURL(blob);
+    fileDownload(url, "energy.csv");
+  }
+
   private _reloadView() {
     // Force strategy to be re-run by make a copy of the view
     const config = this._lovelace!.config;

src/panels/energy/strategies/energy-view-strategy.ts

@@ -154,6 +154,13 @@ export class EnergyViewStrategy extends ReactiveElement {
 
     // Only include if we have at least 1 device in the config.
     if (prefs.device_consumption.length) {
+      view.cards!.push({
+        title: hass.localize(
+          "ui.panel.energy.cards.energy_devices_detail_graph_title"
+        ),
+        type: "energy-devices-detail-graph",
+        collection_key: "energy_dashboard",
+      });
       view.cards!.push({
         title: hass.localize(
           "ui.panel.energy.cards.energy_devices_graph_title"

src/panels/history/ha-panel-history.ts

@@ -433,6 +433,7 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
     this._statisticsHistory = computeHistory(
       this.hass,
       statsHistoryStates,
+      [],
       this.hass.localize,
       sensorNumericDeviceClasses,
       true
@@ -472,6 +473,7 @@ class HaPanelHistory extends SubscribeMixin(LitElement) {
         this._stateHistory = computeHistory(
           this.hass,
           history,
+          entityIds,
           this.hass.localize,
           sensorNumericDeviceClasses,
           true