Align entity registry buttons

* Add dialogs guidelines

* Updated the Buttons and X-icon text

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-lint-staged --relative --shell "/bin/bash"
+yarn run lint-staged --relative --shell "/bin/bash"

build-scripts/webpack.js

@@ -76,7 +76,7 @@ const createWebpackConfig = ({
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
     },
     plugins: [
-      new WebpackBar({ fancy: !isProdBuild }),
+      !isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
       new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),

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

@@ -90,6 +90,15 @@ const ACTIONS = [
     then: [{ delay: "00:00:01" }],
     else: [{ delay: "00:00:05" }],
   },
+  {
+    if: [{ condition: "state" }],
+    then: [{ delay: "00:00:01" }],
+  },
+  {
+    if: [{ condition: "state" }, { condition: "state" }],
+    then: [{ delay: "00:00:01" }],
+    else: [{ delay: "00:00:05" }],
+  },
   {
     choose: [
       {

gallery/src/pages/automation/describe-condition.ts

@@ -1,20 +1,41 @@
 import { dump } from "js-yaml";
-import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement, state } from "lit/decorators";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-yaml-editor";
 import { Condition } from "../../../../src/data/automation";
 import { describeCondition } from "../../../../src/data/automation_i18n";
+import { getEntity } from "../../../../src/fake_data/entity";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../../src/types";
+
+const ENTITIES = [
+  getEntity("light", "kitchen", "on", {
+    friendly_name: "Kitchen Light",
+  }),
+  getEntity("device_tracker", "person", "home", {
+    friendly_name: "Person",
+  }),
+  getEntity("zone", "home", "", {
+    friendly_name: "Home",
+  }),
+];
 
 const conditions = [
   { condition: "and" },
   { condition: "not" },
   { condition: "or" },
-  { condition: "state" },
-  { condition: "numeric_state" },
+  { condition: "state", entity_id: "light.kitchen", state: "on" },
+  {
+    condition: "numeric_state",
+    entity_id: "light.kitchen",
+    attribute: "brightness",
+    below: 80,
+    above: 20,
+  },
   { condition: "sun", after: "sunset" },
-  { condition: "sun", after: "sunrise" },
-  { condition: "zone" },
+  { condition: "sun", after: "sunrise", offset: "-01:00" },
+  { condition: "zone", entity_id: "device_tracker.person", zone: "zone.home" },
   { condition: "time" },
   { condition: "template" },
 ];
@@ -27,15 +48,21 @@ const initialCondition: Condition = {
 
 @customElement("demo-automation-describe-condition")
 export class DemoAutomationDescribeCondition extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
   @state() _condition = initialCondition;
 
   protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+
     return html`
       <ha-card header="Conditions">
         <div class="condition">
           <span>
             ${this._condition
-              ? describeCondition(this._condition)
+              ? describeCondition(this._condition, this.hass)
               : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
@@ -48,7 +75,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
         ${conditions.map(
           (conf) => html`
             <div class="condition">
-              <span>${describeCondition(conf as any)}</span>
+              <span>${describeCondition(conf as any, this.hass)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `
@@ -57,6 +84,13 @@ export class DemoAutomationDescribeCondition extends LitElement {
     `;
   }
 
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+
   private _dataChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     this._condition = ev.detail.isValid ? ev.detail.value : undefined;

gallery/src/pages/automation/describe-trigger.ts

@@ -1,25 +1,56 @@
 import { dump } from "js-yaml";
-import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement, state } from "lit/decorators";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-yaml-editor";
 import { Trigger } from "../../../../src/data/automation";
 import { describeTrigger } from "../../../../src/data/automation_i18n";
+import { getEntity } from "../../../../src/fake_data/entity";
+import { provideHass } from "../../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../../src/types";
+
+const ENTITIES = [
+  getEntity("light", "kitchen", "on", {
+    friendly_name: "Kitchen Light",
+  }),
+  getEntity("person", "person", "", {
+    friendly_name: "Person",
+  }),
+  getEntity("zone", "home", "", {
+    friendly_name: "Home",
+  }),
+];
 
 const triggers = [
-  { platform: "state" },
+  { platform: "state", entity_id: "light.kitchen", from: "off", to: "on" },
   { platform: "mqtt" },
-  { platform: "geo_location" },
-  { platform: "homeassistant" },
-  { platform: "numeric_state" },
-  { platform: "sun" },
+  {
+    platform: "geo_location",
+    source: "test_source",
+    zone: "zone.home",
+    event: "enter",
+  },
+  { platform: "homeassistant", event: "start" },
+  {
+    platform: "numeric_state",
+    entity_id: "light.kitchen",
+    attribute: "brightness",
+    below: 80,
+    above: 20,
+  },
+  { platform: "sun", event: "sunset" },
   { platform: "time_pattern" },
   { platform: "webhook" },
-  { platform: "zone" },
+  {
+    platform: "zone",
+    entity_id: "person.person",
+    zone: "zone.home",
+    event: "enter",
+  },
   { platform: "tag" },
-  { platform: "time" },
+  { platform: "time", at: "15:32" },
   { platform: "template" },
-  { platform: "event" },
+  { platform: "event", event_type: "homeassistant_started" },
 ];
 
 const initialTrigger: Trigger = {
@@ -29,14 +60,22 @@ const initialTrigger: Trigger = {
 
 @customElement("demo-automation-describe-trigger")
 export class DemoAutomationDescribeTrigger extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
   @state() _trigger = initialTrigger;
 
   protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+
     return html`
       <ha-card header="Triggers">
         <div class="trigger">
           <span>
-            ${this._trigger ? describeTrigger(this._trigger) : "<invalid YAML>"}
+            ${this._trigger
+              ? describeTrigger(this._trigger, this.hass)
+              : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
             label="Trigger Config"
@@ -47,7 +86,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
         ${triggers.map(
           (conf) => html`
             <div class="trigger">
-              <span>${describeTrigger(conf as any)}</span>
+              <span>${describeTrigger(conf as any, this.hass)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `
@@ -56,6 +95,13 @@ export class DemoAutomationDescribeTrigger extends LitElement {
     `;
   }
 
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+
   private _dataChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     this._trigger = ev.detail.isValid ? ev.detail.value : undefined;

gallery/src/pages/components/dialogs.markdown

@@ -0,0 +1,32 @@
+---
+title: Dialgos
+subtitle: Dialogs provide important prompts in a user flow.
+---
+
+# Material Desing 3
+
+Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on it's [website](https://m3.material.io/components/dialogs/overview). 
+
+# Highlighted guidelines
+
+## Content
+* A best practice is to always use a title, even if it is optional by Material guidelines.
+* People mainly read the title and a button. Put the most important information in those two.
+* Try to avoid user generated content in the title, this could make the title unreadable long.
+* If users become unsure, they read the description. Make sure this explains what will happen.
+* Strive for minimalism.
+
+## Buttons and X-icon
+* Keep the labels short, for example `Save`, `Delete`, `Enable`.
+* Dialog with actions must always have a discard button. On desktop a `Cancel` button and X-icon, on mobile only the X-icon.
+* Destructive actions should be a red warning button.
+* Alert or confirmation dialogs only have buttons and no X-icon.
+* Try to avoid three buttons in one dialog. Especially when you leave the dialog task unfinished.
+
+## Example
+### Confirmation dialog
+> **Delete dashboard?**
+> 
+> Dashboard [dashboard name] will be permanently deleted from Home Assistant.
+> 
+> Cancel / Delete

gallery/src/pages/components/ha-alert.markdown

@@ -3,6 +3,13 @@ title: Alerts
 subtitle: An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.
 ---
 
+<style>
+  ha-alert {
+    display: block;
+    margin: 4px 0;
+  }
+</style>
+
 # Alert `<ha-alert>`
 The alert offers four severity levels that set a distinctive icon and color.
 

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

@@ -3,6 +3,7 @@ import "@material/mwc-button";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
@@ -20,16 +21,22 @@ const ENTITIES = [
   }),
   getEntity("media_player", "livingroom", "playing", {
     friendly_name: "Livingroom",
+    media_content_type: "music",
+    device_class: "tv",
   }),
   getEntity("media_player", "lounge", "idle", {
     friendly_name: "Lounge",
     supported_features: 444983,
+    device_class: "speaker",
   }),
   getEntity("light", "bedroom", "on", {
     friendly_name: "Bedroom",
+    effect: "colorloop",
+    effect_list: ["colorloop", "random"],
   }),
   getEntity("switch", "coffee", "off", {
     friendly_name: "Coffee",
+    device_class: "switch",
   }),
 ];
 
@@ -136,17 +143,18 @@ const SCHEMAS: {
     schema: [
       { name: "addon", selector: { addon: {} } },
       { name: "entity", selector: { entity: {} } },
-      {
-        name: "State",
-        selector: { state: { entity_id: "" } },
-        context: { filter_entity: "entity" },
-      },
       {
         name: "Attribute",
         selector: { attribute: { entity_id: "" } },
         context: { filter_entity: "entity" },
       },
+      {
+        name: "State",
+        selector: { state: { entity_id: "" } },
+        context: { filter_entity: "entity", filter_attribute: "Attribute" },
+      },
       { name: "Device", selector: { device: {} } },
+      { name: "Config entry", selector: { config_entry: {} } },
       { name: "Duration", selector: { duration: {} } },
       { name: "area", selector: { area: {} } },
       { name: "target", selector: { target: {} } },
@@ -428,6 +436,7 @@ class DemoHaForm extends LitElement {
     hass.addEntities(ENTITIES);
     mockEntityRegistry(hass);
     mockDeviceRegistry(hass, DEVICES);
+    mockConfigEntries(hass);
     mockAreaRegistry(hass, AREAS);
     mockHassioSupervisor(hass);
   }

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

@@ -3,6 +3,7 @@ import "@material/mwc-button";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
@@ -124,6 +125,10 @@ const SCHEMAS: {
         selector: { attribute: { entity_id: "" } },
       },
       device: { name: "Device", selector: { device: {} } },
+      config_entry: {
+        name: "Integration",
+        selector: { config_entry: {} },
+      },
       duration: { name: "Duration", selector: { duration: {} } },
       addon: { name: "Addon", selector: { addon: {} } },
       area: { name: "Area", selector: { area: {} } },
@@ -280,6 +285,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     hass.addEntities(ENTITIES);
     mockEntityRegistry(hass);
     mockDeviceRegistry(hass, DEVICES);
+    mockConfigEntries(hass);
     mockAreaRegistry(hass, AREAS);
     mockHassioSupervisor(hass);
     hass.mockWS("auth/sign_path", (params) => params);

gallery/src/pages/lovelace/entities-card.ts

@@ -75,6 +75,10 @@ const ENTITIES = [
     timestamp: 1641801600,
     friendly_name: "Date and Time",
   }),
+  getEntity("sensor", "humidity", "23.2", {
+    friendly_name: "Humidity",
+    unit_of_measurement: "%",
+  }),
   getEntity("input_select", "dropdown", "Soda", {
     friendly_name: "Dropdown",
     options: ["Soda", "Beer", "Wine"],
@@ -142,6 +146,7 @@ const CONFIGS = [
     - light.non_existing
     - climate.ecobee
     - input_number.number
+    - sensor.humidity
     `,
   },
   {

hassio/src/addon-store/hassio-addon-store.ts

@@ -22,8 +22,10 @@ import {
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { StoreAddon } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -59,8 +61,15 @@ class HassioAddonStore extends LitElement {
   @state() private _filter?: string;
 
   public async refreshData() {
-    await reloadHassioAddons(this.hass);
-    await this._loadData();
+    try {
+      await reloadHassioAddons(this.hass);
+    } catch (err) {
+      showAlertDialog(this, {
+        text: extractApiErrorMessage(err),
+      });
+    } finally {
+      await this._loadData();
+    }
   }
 
   protected render(): TemplateResult {

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

@@ -40,6 +40,7 @@ import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
 import {
+  AddonCapability,
   fetchHassioAddonChangelog,
   fetchHassioAddonInfo,
   HassioAddonDetails,
@@ -701,7 +702,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private _showMoreInfo(ev): void {
-    const id = ev.currentTarget.id;
+    const id = ev.currentTarget.id as AddonCapability;
     showHassioMarkdownDialog(this, {
       title: this.supervisor.localize(`addon.dashboard.capability.${id}.title`),
       content:

hassio/src/components/supervisor-backup-content.ts

@@ -17,9 +17,12 @@ import {
 } from "../../../src/data/hassio/backup";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { PolymerChangedEvent } from "../../../src/polymer-types";
-import { HomeAssistant } from "../../../src/types";
+import { HomeAssistant, TranslationDict } from "../../../src/types";
 import "./supervisor-formfield-label";
 
+type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
+  keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];
+
 interface CheckboxItem {
   slug: string;
   checked: boolean;
@@ -108,9 +111,9 @@ export class SupervisorBackupContent extends LitElement {
     this._focusTarget?.focus();
   }
 
-  private _localize = (string: string) =>
-    this.supervisor?.localize(`backup.${string}`) ||
-    this.localize!(`ui.panel.page-onboarding.restore.${string}`);
+  private _localize = (key: BackupOrRestoreKey) =>
+    this.supervisor?.localize(`backup.${key}`) ||
+    this.localize!(`ui.panel.page-onboarding.restore.${key}`);
 
   protected render(): TemplateResult {
     if (!this.onboarding && !this.supervisor) {
@@ -168,7 +171,7 @@ export class SupervisorBackupContent extends LitElement {
         : ""}
       ${this.backupType === "partial"
         ? html`<div class="partial-picker">
-            ${this.backup?.homeassistant
+            ${!this.backup || this.backup.homeassistant
               ? html`<ha-formfield
                   .label=${html`<supervisor-formfield-label
                     label="Home Assistant"

package.json

@@ -111,15 +111,14 @@
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.2.0",
-    "home-assistant-js-websocket": "^7.1.0",
+    "hls.js": "^1.2.1",
+    "home-assistant-js-websocket": "^8.0.0",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
     "lit": "^2.1.2",
-    "lit-vaadin-helpers": "^0.3.0",
     "marked": "^4.0.12",
     "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",

src/auth/ha-auth-flow.ts

@@ -360,11 +360,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
     }
     this._submitting = true;
 
-    const postData = {
-      ...this._stepData,
-      client_id: this.clientId,
-      redirect_uri: this.redirectUri,
-    };
+    const postData = { ...this._stepData, client_id: this.clientId };
 
     try {
       const response = await fetch(`/auth/login_flow/${this._step.flow_id}`, {

src/common/const.ts

@@ -98,6 +98,7 @@ export const FIXED_DOMAIN_ICONS = {
   proximity: mdiAppleSafari,
   remote: mdiRemote,
   scene: mdiPalette,
+  schedule: mdiCalendarClock,
   script: mdiScriptText,
   select: mdiFormatListBulleted,
   sensor: mdiEye,
@@ -166,46 +167,6 @@ export const DOMAINS_WITH_CARD = [
   "water_heater",
 ];
 
-/** Domains with separate more info dialog. */
-export const DOMAINS_WITH_MORE_INFO = [
-  "alarm_control_panel",
-  "automation",
-  "camera",
-  "climate",
-  "configurator",
-  "counter",
-  "cover",
-  "fan",
-  "group",
-  "humidifier",
-  "input_datetime",
-  "light",
-  "lock",
-  "media_player",
-  "person",
-  "remote",
-  "script",
-  "scene",
-  "sun",
-  "timer",
-  "update",
-  "vacuum",
-  "water_heater",
-  "weather",
-];
-
-/** Domains that do not show the default more info dialog content (e.g. the attribute section)
- *  and do not have a separate more info (so not in DOMAINS_WITH_MORE_INFO). */
-export const DOMAINS_HIDE_DEFAULT_MORE_INFO = [
-  "input_number",
-  "input_select",
-  "input_text",
-  "number",
-  "scene",
-  "update",
-  "select",
-];
-
 /** Domains that render an input element instead of a text value when displayed in a row.
  *  Those rows should then not show a cursor pointer when hovered (which would normally
  *  be the default) unless the element itself enforces it (e.g. a button). Also those elements
@@ -237,9 +198,6 @@ export const DOMAINS_INPUT_ROW = [
   "vacuum",
 ];
 
-/** Domains that should have the history hidden in the more info dialog. */
-export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator"];
-
 /** States that we consider "off". */
 export const STATES_OFF = ["closed", "locked", "off"];
 

src/common/datetime/format_date_time.ts

@@ -1,7 +1,7 @@
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
-import { useAmPm } from "./use_am_pm";
 import { polyfillsLoaded } from "../translations/localize";
+import { useAmPm } from "./use_am_pm";
 
 if (__BUILD__ === "latest" && polyfillsLoaded) {
   await polyfillsLoaded;
@@ -28,6 +28,28 @@ const formatDateTimeMem = memoizeOne(
     )
 );
 
+// Aug 9, 8:23 AM
+export const formatShortDateTime = (
+  dateObj: Date,
+  locale: FrontendLocaleData
+) => formatShortDateTimeMem(locale).format(dateObj);
+
+const formatShortDateTimeMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(
+      locale.language === "en" && !useAmPm(locale)
+        ? "en-u-hc-h23"
+        : locale.language,
+      {
+        month: "short",
+        day: "numeric",
+        hour: useAmPm(locale) ? "numeric" : "2-digit",
+        minute: "2-digit",
+        hour12: useAmPm(locale),
+      }
+    )
+);
+
 // August 9, 2021, 8:23:15 AM
 export const formatDateTimeWithSeconds = (
   dateObj: Date,

src/common/datetime/format_time.ts

@@ -71,7 +71,8 @@ export const formatTime24h = (dateObj: Date) =>
 
 const formatTime24hMem = memoizeOne(
   () =>
-    new Intl.DateTimeFormat(undefined, {
+    // en-GB to fix Chrome 24:59 to 0:59 https://stackoverflow.com/a/60898146
+    new Intl.DateTimeFormat("en-GB", {
       hour: "numeric",
       minute: "2-digit",
       hour12: false,

src/common/entity/compute_state_display.ts

@@ -64,9 +64,12 @@ export const computeStateDisplayFromEntityAttributes = (
         // fallback to default
       }
     }
-    return `${formatNumber(state, locale)}${
-      attributes.unit_of_measurement ? " " + attributes.unit_of_measurement : ""
-    }`;
+    const unit = !attributes.unit_of_measurement
+      ? ""
+      : attributes.unit_of_measurement === "%"
+      ? "%"
+      : ` ${attributes.unit_of_measurement}`;
+    return `${formatNumber(state, locale)}${unit}`;
   }
 
   const domain = computeDomain(entityId);

src/common/entity/get_states.ts

@@ -58,32 +58,220 @@ const FIXED_DOMAIN_STATES = {
   ],
 };
 
-export const getStates = (state: HassEntity): string[] => {
+const FIXED_DOMAIN_ATTRIBUTE_STATES = {
+  alarm_control_panel: {
+    code_format: ["number", "text"],
+  },
+  binary_sensor: {
+    device_class: [
+      "battery",
+      "battery_charging",
+      "co",
+      "cold",
+      "connectivity",
+      "door",
+      "garage_door",
+      "gas",
+      "heat",
+      "light",
+      "lock",
+      "moisture",
+      "motion",
+      "moving",
+      "occupancy",
+      "opening",
+      "plug",
+      "power",
+      "presence",
+      "problem",
+      "running",
+      "safety",
+      "smoke",
+      "sound",
+      "tamper",
+      "update",
+      "vibration",
+      "window",
+    ],
+  },
+  button: {
+    device_class: ["restart", "update"],
+  },
+  camera: {
+    frontend_stream_type: ["hls", "web_rtc"],
+  },
+  climate: {
+    hvac_action: ["off", "idle", "heating", "cooling", "drying", "fan"],
+  },
+  cover: {
+    device_class: [
+      "awning",
+      "blind",
+      "curtain",
+      "damper",
+      "door",
+      "garage",
+      "gate",
+      "shade",
+      "shutter",
+      "window",
+    ],
+  },
+  humidifier: {
+    device_class: ["humidifier", "dehumidifier"],
+  },
+  media_player: {
+    device_class: ["tv", "speaker", "receiver"],
+    media_content_type: [
+      "app",
+      "channel",
+      "episode",
+      "game",
+      "image",
+      "movie",
+      "music",
+      "playlist",
+      "tvshow",
+      "url",
+      "video",
+    ],
+  },
+  number: {
+    device_class: ["temperature"],
+  },
+  sensor: {
+    device_class: [
+      "apparent_power",
+      "aqi",
+      "battery",
+      "carbon_dioxide",
+      "carbon_monoxide",
+      "current",
+      "date",
+      "duration",
+      "energy",
+      "frequency",
+      "gas",
+      "humidity",
+      "illuminance",
+      "monetary",
+      "nitrogen_dioxide",
+      "nitrogen_monoxide",
+      "nitrous_oxide",
+      "ozone",
+      "pm1",
+      "pm10",
+      "pm25",
+      "power_factor",
+      "power",
+      "pressure",
+      "reactive_power",
+      "signal_strength",
+      "sulphur_dioxide",
+      "temperature",
+      "timestamp",
+      "volatile_organic_compounds",
+      "voltage",
+    ],
+    state_class: ["measurement", "total", "total_increasing"],
+  },
+  switch: {
+    device_class: ["outlet", "switch"],
+  },
+  update: {
+    device_class: ["firmware"],
+  },
+  water_heater: {
+    away_mode: ["on", "off"],
+  },
+};
+
+export const getStates = (
+  state: HassEntity,
+  attribute: string | undefined = undefined
+): string[] => {
   const domain = computeStateDomain(state);
   const result: string[] = [];
 
-  if (domain in FIXED_DOMAIN_STATES) {
+  if (!attribute && domain in FIXED_DOMAIN_STATES) {
     result.push(...FIXED_DOMAIN_STATES[domain]);
-  } else {
-    // If not fixed, we at least know the current state
-    result.push(state.state);
+  } else if (
+    attribute &&
+    domain in FIXED_DOMAIN_ATTRIBUTE_STATES &&
+    attribute in FIXED_DOMAIN_ATTRIBUTE_STATES[domain]
+  ) {
+    result.push(...FIXED_DOMAIN_ATTRIBUTE_STATES[domain][attribute]);
   }
 
   // Dynamic values based on the entities
   switch (domain) {
     case "climate":
-      result.push(...state.attributes.hvac_modes);
+      if (!attribute) {
+        result.push(...state.attributes.hvac_modes);
+      } else if (attribute === "fan_mode") {
+        result.push(...state.attributes.fan_modes);
+      } else if (attribute === "preset_mode") {
+        result.push(...state.attributes.preset_modes);
+      } else if (attribute === "swing_mode") {
+        result.push(...state.attributes.swing_modes);
+      }
+      break;
+    case "device_tracker":
+    case "person":
+      if (!attribute) {
+        result.push("home", "not_home");
+      }
+      break;
+    case "fan":
+      if (attribute === "preset_mode") {
+        result.push(...state.attributes.preset_modes);
+      }
+      break;
+    case "humidifier":
+      if (attribute === "mode") {
+        result.push(...state.attributes.available_modes);
+      }
       break;
     case "input_select":
     case "select":
-      result.push(...state.attributes.options);
+      if (!attribute) {
+        result.push(...state.attributes.options);
+      }
+      break;
+    case "light":
+      if (attribute === "effect") {
+        result.push(...state.attributes.effect_list);
+      } else if (attribute === "color_mode") {
+        result.push(...state.attributes.color_modes);
+      }
+      break;
+    case "media_player":
+      if (attribute === "sound_mode") {
+        result.push(...state.attributes.sound_mode_list);
+      } else if (attribute === "source") {
+        result.push(...state.attributes.source_list);
+      }
+      break;
+    case "remote":
+      if (attribute === "current_activity") {
+        result.push(...state.attributes.activity_list);
+      }
+      break;
+    case "vacuum":
+      if (attribute === "fan_speed") {
+        result.push(...state.attributes.fan_speed_list);
+      }
       break;
     case "water_heater":
-      result.push(...state.attributes.operation_list);
+      if (!attribute || attribute === "operation_mode") {
+        result.push(...state.attributes.operation_list);
+      }
       break;
   }
 
-  // All entities can have unavailable states
-  result.push(...UNAVAILABLE_STATES);
+  if (!attribute) {
+    // All entities can have unavailable states
+    result.push(...UNAVAILABLE_STATES);
+  }
   return [...new Set(result)];
 };

src/common/translations/localize.ts

@@ -15,7 +15,37 @@ export type LocalizeKeys =
   | `state.${string}`
   | `state_attributes.${string}`
   | `state_badge.${string}`
-  | `ui.${string}`
+  | `ui.card.alarm_control_panel.${string}`
+  | `ui.card.weather.attributes.${string}`
+  | `ui.card.weather.cardinal_direction.${string}`
+  | `ui.components.logbook.${string}`
+  | `ui.components.selectors.file.${string}`
+  | `ui.dialogs.entity_registry.editor.${string}`
+  | `ui.dialogs.more_info_control.vacuum.${string}`
+  | `ui.dialogs.options_flow.loading.${string}`
+  | `ui.dialogs.quick-bar.commands.${string}`
+  | `ui.dialogs.repair_flow.loading.${string}`
+  | `ui.dialogs.unhealthy.reason.${string}`
+  | `ui.dialogs.unsupported.reason.${string}`
+  | `ui.panel.config.${string}.${"caption" | "description"}`
+  | `ui.panel.config.automation.${string}`
+  | `ui.panel.config.dashboard.${string}`
+  | `ui.panel.config.devices.${string}`
+  | `ui.panel.config.energy.${string}`
+  | `ui.panel.config.helpers.${string}`
+  | `ui.panel.config.info.${string}`
+  | `ui.panel.config.integrations.${string}`
+  | `ui.panel.config.logs.${string}`
+  | `ui.panel.config.lovelace.${string}`
+  | `ui.panel.config.network.${string}`
+  | `ui.panel.config.scene.${string}`
+  | `ui.panel.config.url.${string}`
+  | `ui.panel.config.zha.${string}`
+  | `ui.panel.config.zwave_js.${string}`
+  | `ui.panel.developer-tools.tabs.${string}`
+  | `ui.panel.lovelace.card.${string}`
+  | `ui.panel.lovelace.editor.${string}`
+  | `ui.panel.page-authorize.form.${string}`
   | `component.${string}`;
 
 // Tweaked from https://www.raygesualdo.com/posts/flattening-object-keys-with-typescript-types

src/components/chart/statistics-chart.ts

@@ -15,13 +15,13 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
-import { computeStateName } from "../../common/entity/compute_state_name";
 import {
   formatNumber,
   numberFormatToLocale,
 } from "../../common/number/format_number";
 import {
   getStatisticIds,
+  getStatisticLabel,
   Statistics,
   statisticsHaveType,
   StatisticsMetaData,
@@ -233,24 +233,18 @@ class StatisticsChart extends LitElement {
     const names = this.names || {};
     statisticsData.forEach((stats) => {
       const firstStat = stats[0];
-      let name = names[firstStat.statistic_id];
-      if (!name) {
-        const entityState = this.hass.states[firstStat.statistic_id];
-        if (entityState) {
-          name = computeStateName(entityState);
-        } else {
-          name = firstStat.statistic_id;
-        }
-      }
-
       const meta = this.statisticIds!.find(
         (stat) => stat.statistic_id === firstStat.statistic_id
       );
+      let name = names[firstStat.statistic_id];
+      if (!name) {
+        name = getStatisticLabel(this.hass, firstStat.statistic_id, meta);
+      }
 
       if (!this.unit) {
         if (unit === undefined) {
-          unit = meta?.unit_of_measurement;
-        } else if (unit !== meta?.unit_of_measurement) {
+          unit = meta?.display_unit_of_measurement;
+        } else if (unit !== meta?.display_unit_of_measurement) {
           unit = null;
         }
       }

src/components/date-range-picker.ts

@@ -221,6 +221,10 @@ class DateRangePickerElement extends WrappedElement {
           .calendar-table {
             padding: 0 !important;
           }
+          .daterangepicker.ltr {
+            direction: ltr;
+            text-align: left;
+          }
         `;
     const shadowRoot = this.shadowRoot!;
     shadowRoot.appendChild(style);

src/components/device/ha-area-devices-picker.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button/mwc-button";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";

src/components/device/ha-device-picker.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-list/mwc-list-item";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";

src/components/entity/ha-entity-attribute-picker.ts

@@ -15,6 +15,14 @@ class HaEntityAttributePicker extends LitElement {
 
   @property() public entityId?: string;
 
+  /**
+   * List of attributes to be hidden.
+   * @type {Array}
+   * @attr hide-attributes
+   */
+  @property({ type: Array, attribute: "hide-attributes" })
+  public hideAttributes?: string[];
+
   @property({ type: Boolean }) public autofocus = false;
 
   @property({ type: Boolean }) public disabled = false;
@@ -42,10 +50,12 @@ class HaEntityAttributePicker extends LitElement {
     if (changedProps.has("_opened") && this._opened) {
       const state = this.entityId ? this.hass.states[this.entityId] : undefined;
       (this._comboBox as any).items = state
-        ? Object.keys(state.attributes).map((key) => ({
-            value: key,
-            label: formatAttributeName(key),
-          }))
+        ? Object.keys(state.attributes)
+            .filter((key) => !this.hideAttributes?.includes(key))
+            .map((key) => ({
+              value: key,
+              label: formatAttributeName(key),
+            }))
         : [];
     }
   }

src/components/entity/ha-entity-picker.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-list/mwc-list-item";
 import { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";

src/components/entity/ha-entity-state-picker.ts

@@ -16,6 +16,8 @@ class HaEntityStatePicker extends LitElement {
 
   @property() public entityId?: string;
 
+  @property() public attribute?: string;
+
   @property({ type: Boolean }) public autofocus = false;
 
   @property({ type: Boolean }) public disabled = false;
@@ -44,14 +46,16 @@ class HaEntityStatePicker extends LitElement {
       const state = this.entityId ? this.hass.states[this.entityId] : undefined;
       (this._comboBox as any).items =
         this.entityId && state
-          ? getStates(state).map((key) => ({
+          ? getStates(state, this.attribute).map((key) => ({
               value: key,
-              label: computeStateDisplay(
-                this.hass.localize,
-                state,
-                this.hass.locale,
-                key
-              ),
+              label: !this.attribute
+                ? computeStateDisplay(
+                    this.hass.localize,
+                    state,
+                    this.hass.locale,
+                    key
+                  )
+                : key,
             }))
           : [];
     }

src/components/entity/ha-statistic-picker.ts

@@ -1,6 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -31,12 +31,23 @@ export class HaStatisticPicker extends LitElement {
   @property({ type: Boolean }) public disabled?: boolean;
 
   /**
-   * Show only statistics with these unit of measuments.
+   * Show only statistics natively stored with these units of measurements.
    * @type {Array}
-   * @attr include-unit-of-measurement
+   * @attr include-statistics-unit-of-measurement
    */
-  @property({ type: Array, attribute: "include-unit-of-measurement" })
-  public includeUnitOfMeasurement?: string[];
+  @property({
+    type: Array,
+    attribute: "include-statistics-unit-of-measurement",
+  })
+  public includeStatisticsUnitOfMeasurement?: string[];
+
+  /**
+   * Show only statistics displayed with these units of measurements.
+   * @type {Array}
+   * @attr include-display-unit-of-measurement
+   */
+  @property({ type: Array, attribute: "include-display-unit-of-measurement" })
+  public includeDisplayUnitOfMeasurement?: string[];
 
   /**
    * Show only statistics with these device classes.
@@ -86,7 +97,8 @@ export class HaStatisticPicker extends LitElement {
   private _getStatistics = memoizeOne(
     (
       statisticIds: StatisticsMetaData[],
-      includeUnitOfMeasurement?: string[],
+      includeStatisticsUnitOfMeasurement?: string[],
+      includeDisplayUnitOfMeasurement?: string[],
       includeDeviceClasses?: string[],
       entitiesOnly?: boolean
     ): Array<{ id: string; name: string; state?: HassEntity }> => {
@@ -101,9 +113,18 @@ export class HaStatisticPicker extends LitElement {
         ];
       }
 
-      if (includeUnitOfMeasurement) {
+      if (includeStatisticsUnitOfMeasurement) {
         statisticIds = statisticIds.filter((meta) =>
-          includeUnitOfMeasurement.includes(meta.unit_of_measurement)
+          includeStatisticsUnitOfMeasurement.includes(
+            meta.statistics_unit_of_measurement
+          )
+        );
+      }
+      if (includeDisplayUnitOfMeasurement) {
+        statisticIds = statisticIds.filter((meta) =>
+          includeDisplayUnitOfMeasurement.includes(
+            meta.display_unit_of_measurement
+          )
         );
       }
 
@@ -184,7 +205,8 @@ export class HaStatisticPicker extends LitElement {
       if (this.hasUpdated) {
         (this.comboBox as any).items = this._getStatistics(
           this.statisticIds!,
-          this.includeUnitOfMeasurement,
+          this.includeStatisticsUnitOfMeasurement,
+          this.includeDisplayUnitOfMeasurement,
           this.includeDeviceClasses,
           this.entitiesOnly
         );
@@ -192,7 +214,8 @@ export class HaStatisticPicker extends LitElement {
         this.updateComplete.then(() => {
           (this.comboBox as any).items = this._getStatistics(
             this.statisticIds!,
-            this.includeUnitOfMeasurement,
+            this.includeStatisticsUnitOfMeasurement,
+            this.includeDisplayUnitOfMeasurement,
             this.includeDeviceClasses,
             this.entitiesOnly
           );

src/components/ha-addon-picker.ts

@@ -1,5 +1,5 @@
 import { html, LitElement, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";

src/components/ha-alert.ts

@@ -83,7 +83,6 @@ class HaAlert extends LitElement {
       position: relative;
       padding: 8px;
       display: flex;
-      margin: 4px 0;
     }
     .issue-type.rtl {
       flex-direction: row-reverse;

src/components/ha-area-picker.ts

@@ -1,6 +1,6 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";

src/components/ha-base-time-input.ts

@@ -1,10 +1,11 @@
 import "@material/mwc-list/mwc-list-item";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import "./ha-select";
-import "./ha-textfield";
+import { HaTextField } from "./ha-textfield";
 import "./ha-input-helper-text";
 
 export interface TimeChangedEvent {
@@ -36,7 +37,7 @@ export class HaBaseTimeInput extends LitElement {
   /**
    * determines if inputs are required
    */
-  @property({ type: Boolean }) public required?: boolean;
+  @property({ type: Boolean }) public required = false;
 
   /**
    * 12 or 24 hr format
@@ -123,11 +124,6 @@ export class HaBaseTimeInput extends LitElement {
    */
   @property() amPm: "AM" | "PM" = "AM";
 
-  /**
-   * Formatted time string
-   */
-  @property() value?: string;
-
   protected render(): TemplateResult {
     return html`
       ${this.label
@@ -140,11 +136,11 @@ export class HaBaseTimeInput extends LitElement {
                 id="day"
                 type="number"
                 inputmode="numeric"
-                .value=${this.days}
+                .value=${this.days.toFixed()}
                 .label=${this.dayLabel}
                 name="days"
                 @input=${this._valueChanged}
-                @focus=${this._onFocus}
+                @focusin=${this._onFocus}
                 no-spinner
                 .required=${this.required}
                 .autoValidate=${this.autoValidate}
@@ -161,16 +157,16 @@ export class HaBaseTimeInput extends LitElement {
           id="hour"
           type="number"
           inputmode="numeric"
-          .value=${this.hours}
+          .value=${this.hours.toFixed()}
           .label=${this.hourLabel}
           name="hours"
           @input=${this._valueChanged}
-          @focus=${this._onFocus}
+          @focusin=${this._onFocus}
           no-spinner
           .required=${this.required}
           .autoValidate=${this.autoValidate}
           maxlength="2"
-          .max=${this._hourMax}
+          max=${ifDefined(this._hourMax)}
           min="0"
           .disabled=${this.disabled}
           suffix=":"
@@ -184,7 +180,7 @@ export class HaBaseTimeInput extends LitElement {
           .value=${this._formatValue(this.minutes)}
           .label=${this.minLabel}
           @input=${this._valueChanged}
-          @focus=${this._onFocus}
+          @focusin=${this._onFocus}
           name="minutes"
           no-spinner
           .required=${this.required}
@@ -205,7 +201,7 @@ export class HaBaseTimeInput extends LitElement {
               .value=${this._formatValue(this.seconds)}
               .label=${this.secLabel}
               @input=${this._valueChanged}
-              @focus=${this._onFocus}
+              @focusin=${this._onFocus}
               name="seconds"
               no-spinner
               .required=${this.required}
@@ -226,7 +222,7 @@ export class HaBaseTimeInput extends LitElement {
               .value=${this._formatValue(this.milliseconds, 3)}
               .label=${this.millisecLabel}
               @input=${this._valueChanged}
-              @focus=${this._onFocus}
+              @focusin=${this._onFocus}
               name="milliseconds"
               no-spinner
               .required=${this.required}
@@ -260,9 +256,10 @@ export class HaBaseTimeInput extends LitElement {
     `;
   }
 
-  private _valueChanged(ev) {
-    this[ev.target.name] =
-      ev.target.name === "amPm" ? ev.target.value : Number(ev.target.value);
+  private _valueChanged(ev: InputEvent) {
+    const textField = ev.currentTarget as HaTextField;
+    this[textField.name] =
+      textField.name === "amPm" ? textField.value : Number(textField.value);
     const value: TimeChangedEvent = {
       hours: this.hours,
       minutes: this.minutes,
@@ -277,8 +274,8 @@ export class HaBaseTimeInput extends LitElement {
     });
   }
 
-  private _onFocus(ev) {
-    ev.target.select();
+  private _onFocus(ev: FocusEvent) {
+    (ev.currentTarget as HaTextField).select();
   }
 
   /**
@@ -293,7 +290,7 @@ export class HaBaseTimeInput extends LitElement {
    */
   private get _hourMax() {
     if (this.noHoursLimit) {
-      return null;
+      return undefined;
     }
     if (this.format === 12) {
       return 12;

src/components/ha-combo-box.ts

@@ -9,8 +9,9 @@ import type {
 } from "@vaadin/combo-box/vaadin-combo-box-light";
 import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
@@ -72,31 +73,31 @@ export class HaComboBox extends LitElement {
 
   @property({ attribute: "error-message" }) public errorMessage?: string;
 
-  @property({ type: Boolean }) public invalid?: boolean;
+  @property({ type: Boolean }) public invalid = false;
 
-  @property({ type: Boolean }) public icon?: boolean;
+  @property({ type: Boolean }) public icon = false;
 
-  @property() public items?: any[];
+  @property({ attribute: false }) public items?: any[];
 
-  @property() public filteredItems?: any[];
+  @property({ attribute: false }) public filteredItems?: any[];
 
   @property({ attribute: "allow-custom-value", type: Boolean })
-  public allowCustomValue?: boolean;
+  public allowCustomValue = false;
 
-  @property({ attribute: "item-value-path" }) public itemValuePath?: string;
+  @property({ attribute: "item-value-path" }) public itemValuePath = "value";
 
-  @property({ attribute: "item-label-path" }) public itemLabelPath?: string;
+  @property({ attribute: "item-label-path" }) public itemLabelPath = "label";
 
   @property({ attribute: "item-id-path" }) public itemIdPath?: string;
 
   @property() public renderer?: ComboBoxLitRenderer<any>;
 
-  @property({ type: Boolean }) public disabled?: boolean;
+  @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public required?: boolean;
+  @property({ type: Boolean }) public required = false;
 
   @property({ type: Boolean, reflect: true, attribute: "opened" })
-  private _opened?: boolean;
+  public opened?: boolean;
 
   @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
 
@@ -149,37 +150,45 @@ export class HaComboBox extends LitElement {
         attr-for-value="value"
       >
         <ha-textfield
-          .label=${this.label}
-          .placeholder=${this.placeholder}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          .validationMessage=${this.validationMessage}
+          label=${ifDefined(this.label)}
+          placeholder=${ifDefined(this.placeholder)}
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          validationMessage=${ifDefined(this.validationMessage)}
           .errorMessage=${this.errorMessage}
           class="input"
           autocapitalize="none"
           autocomplete="off"
           autocorrect="off"
           spellcheck="false"
-          .suffix=${html`<div style="width: 28px;"></div>`}
+          .suffix=${html`<div
+            style="width: 28px;"
+            role="none presentation"
+          ></div>`}
           .icon=${this.icon}
           .invalid=${this.invalid}
-          .helper=${this.helper}
+          helper=${ifDefined(this.helper)}
           helperPersistent
         >
           <slot name="icon" slot="leadingIcon"></slot>
         </ha-textfield>
         ${this.value
           ? html`<ha-svg-icon
-              aria-label=${this.hass?.localize("ui.components.combo-box.clear")}
+              role="button"
+              tabindex="-1"
+              aria-label=${ifDefined(this.hass?.localize("ui.common.clear"))}
               class="clear-button"
               .path=${mdiClose}
               @click=${this._clearValue}
             ></ha-svg-icon>`
           : ""}
         <ha-svg-icon
-          aria-label=${this.hass?.localize("ui.components.combo-box.show")}
+          role="button"
+          tabindex="-1"
+          aria-label=${ifDefined(this.label)}
+          aria-expanded=${this.opened ? "true" : "false"}
           class="toggle-button"
-          .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+          .path=${this.opened ? mdiMenuUp : mdiMenuDown}
           @click=${this._toggleOpen}
         ></ha-svg-icon>
       </vaadin-combo-box-light>
@@ -199,7 +208,7 @@ export class HaComboBox extends LitElement {
   }
 
   private _toggleOpen(ev: Event) {
-    if (this._opened) {
+    if (this.opened) {
       this._comboBox?.close();
       ev.stopPropagation();
     } else {
@@ -211,7 +220,7 @@ export class HaComboBox extends LitElement {
     const opened = ev.detail.value;
     // delay this so we can handle click event before setting _opened
     setTimeout(() => {
-      this._opened = opened;
+      this.opened = opened;
     }, 0);
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail);

src/components/ha-config-entry-picker.ts

@@ -0,0 +1,156 @@
+import "@material/mwc-list/mwc-list-item";
+import { html, LitElement, TemplateResult } from "lit";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
+import { PolymerChangedEvent } from "../polymer-types";
+import { HomeAssistant } from "../types";
+import type { HaComboBox } from "./ha-combo-box";
+import { ConfigEntry, getConfigEntries } from "../data/config_entries";
+import { domainToName } from "../data/integration";
+import { caseInsensitiveStringCompare } from "../common/string/compare";
+import { brandsUrl } from "../util/brands-url";
+import "./ha-combo-box";
+
+export interface ConfigEntryExtended extends ConfigEntry {
+  localized_domain_name?: string;
+}
+
+@customElement("ha-config-entry-picker")
+class HaConfigEntryPicker extends LitElement {
+  public hass!: HomeAssistant;
+
+  @property() public integration?: string;
+
+  @property() public label?: string;
+
+  @property() public value = "";
+
+  @property() public helper?: string;
+
+  @state() private _configEntries?: ConfigEntryExtended[];
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @query("ha-combo-box") private _comboBox!: HaComboBox;
+
+  public open() {
+    this._comboBox?.open();
+  }
+
+  public focus() {
+    this._comboBox?.focus();
+  }
+
+  protected firstUpdated() {
+    this._getConfigEntries();
+  }
+
+  private _rowRenderer: ComboBoxLitRenderer<ConfigEntryExtended> = (
+    item
+  ) => html`<mwc-list-item twoline graphic="icon">
+    <span
+      >${item.title ||
+      this.hass.localize(
+        "ui.panel.config.integrations.config_entry.unnamed_entry"
+      )}</span
+    >
+    <span slot="secondary">${item.localized_domain_name}</span>
+    <img
+      slot="graphic"
+      src=${brandsUrl({
+        domain: item.domain,
+        type: "icon",
+        darkOptimized: this.hass.themes?.darkMode,
+      })}
+      referrerpolicy="no-referrer"
+      @error=${this._onImageError}
+      @load=${this._onImageLoad}
+    />
+  </mwc-list-item>`;
+
+  protected render(): TemplateResult {
+    if (!this._configEntries) {
+      return html``;
+    }
+    return html`
+      <ha-combo-box
+        .hass=${this.hass}
+        .label=${this.label === undefined && this.hass
+          ? this.hass.localize("ui.components.config-entry-picker.config_entry")
+          : this.label}
+        .value=${this._value}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        .helper=${this.helper}
+        .renderer=${this._rowRenderer}
+        .items=${this._configEntries}
+        item-value-path="entry_id"
+        item-id-path="entry_id"
+        item-label-path="title"
+        @value-changed=${this._valueChanged}
+      ></ha-combo-box>
+    `;
+  }
+
+  private _onImageLoad(ev) {
+    ev.target.style.visibility = "initial";
+  }
+
+  private _onImageError(ev) {
+    ev.target.style.visibility = "hidden";
+  }
+
+  private async _getConfigEntries() {
+    getConfigEntries(this.hass, {
+      type: "integration",
+      domain: this.integration,
+    }).then((configEntries) => {
+      this._configEntries = configEntries
+        .map(
+          (entry: ConfigEntry): ConfigEntryExtended => ({
+            ...entry,
+            localized_domain_name: domainToName(
+              this.hass.localize,
+              entry.domain
+            ),
+          })
+        )
+        .sort((conf1, conf2) =>
+          caseInsensitiveStringCompare(
+            conf1.localized_domain_name + conf1.title,
+            conf2.localized_domain_name + conf2.title
+          )
+        );
+    });
+  }
+
+  private get _value() {
+    return this.value || "";
+  }
+
+  private _valueChanged(ev: PolymerChangedEvent<string>) {
+    ev.stopPropagation();
+    const newValue = ev.detail.value;
+
+    if (newValue !== this._value) {
+      this._setValue(newValue);
+    }
+  }
+
+  private _setValue(value: string) {
+    this.value = value;
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+      fireEvent(this, "change");
+    }, 0);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-entry-picker": HaConfigEntryPicker;
+  }
+}

src/components/ha-dialog.ts

@@ -80,6 +80,7 @@ export class HaDialog extends DialogBase {
       .mdc-dialog .mdc-dialog__surface {
         position: var(--dialog-surface-position, relative);
         top: var(--dialog-surface-top);
+        margin-top: var(--dialog-surface-margin-top);
         min-height: var(--mdc-dialog-min-height, auto);
         border-radius: var(--ha-dialog-border-radius, 28px);
       }

src/components/ha-duration-input.ts

@@ -14,17 +14,17 @@ export interface HaDurationData {
 
 @customElement("ha-duration-input")
 class HaDurationInput extends LitElement {
-  @property({ attribute: false }) public data!: HaDurationData;
+  @property({ attribute: false }) public data?: HaDurationData;
 
   @property() public label?: string;
 
   @property() public helper?: string;
 
-  @property({ type: Boolean }) public required?: boolean;
+  @property({ type: Boolean }) public required = false;
 
-  @property({ type: Boolean }) public enableMillisecond?: boolean;
+  @property({ type: Boolean }) public enableMillisecond = false;
 
-  @property({ type: Boolean }) public enableDay?: boolean;
+  @property({ type: Boolean }) public enableDay = false;
 
   @property({ type: Boolean }) public disabled = false;
 

src/components/ha-expansion-panel.ts

@@ -85,11 +85,18 @@ export class HaExpansionPanel extends LitElement {
     super.willUpdate(changedProps);
     if (changedProps.has("expanded") && this.expanded) {
       this._showContent = this.expanded;
+      setTimeout(() => {
+        // Verify we're still expanded
+        if (this.expanded) {
+          this._container.style.overflow = "initial";
+        }
+      }, 300);
     }
   }
 
   private _handleTransitionEnd() {
     this._container.style.removeProperty("height");
+    this._container.style.overflow = this.expanded ? "initial" : "hidden";
     this._showContent = this.expanded;
   }
 
@@ -103,6 +110,7 @@ export class HaExpansionPanel extends LitElement {
     ev.preventDefault();
     const newExpanded = !this.expanded;
     fireEvent(this, "expanded-will-change", { expanded: newExpanded });
+    this._container.style.overflow = "hidden";
 
     if (newExpanded) {
       this._showContent = true;

src/components/ha-form/ha-form-positive_time_period_dict.ts

@@ -5,9 +5,9 @@ import { HaFormElement, HaFormTimeData, HaFormTimeSchema } from "./types";
 
 @customElement("ha-form-positive_time_period_dict")
 export class HaFormTimePeriod extends LitElement implements HaFormElement {
-  @property() public schema!: HaFormTimeSchema;
+  @property({ attribute: false }) public schema!: HaFormTimeSchema;
 
-  @property() public data!: HaFormTimeData;
+  @property({ attribute: false }) public data!: HaFormTimeData;
 
   @property() public label!: string;
 
@@ -25,7 +25,7 @@ export class HaFormTimePeriod extends LitElement implements HaFormElement {
     return html`
       <ha-duration-input
         .label=${this.label}
-        .required=${this.schema.required}
+        ?required=${this.schema.required}
         .data=${this.data}
         .disabled=${this.disabled}
       ></ha-duration-input>

src/components/ha-gauge.ts

@@ -132,7 +132,9 @@ export class Gauge extends LitElement {
             this._segment_label
               ? this._segment_label
               : this.valueText || formatNumber(this.value, this.locale)
-          } ${this._segment_label ? "" : this.label}
+          }${
+      this._segment_label ? "" : this.label === "%" ? "%" : ` ${this.label}`
+    }
         </text>
       </svg>`;
   }

src/components/ha-icon-picker.ts

@@ -1,5 +1,5 @@
 import { css, html, LitElement, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { customIcons } from "../data/custom_icons";

src/components/ha-navigation-list.ts

@@ -1,11 +1,12 @@
-import "@material/mwc-list/mwc-list";
-import "@material/mwc-list/mwc-list-item";
+import { ActionDetail } from "@material/mwc-list/mwc-list";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { navigate } from "../common/navigate";
 import type { PageNavigation } from "../layouts/hass-tabs-subpage";
 import type { HomeAssistant } from "../types";
-import "./ha-clickable-list-item";
 import "./ha-icon-next";
+import "./ha-list-item";
 import "./ha-svg-icon";
 
 @customElement("ha-navigation-list")
@@ -18,17 +19,22 @@ class HaNavigationList extends LitElement {
 
   @property({ type: Boolean }) public hasSecondary = false;
 
+  @property() public label?: string;
+
   public render(): TemplateResult {
     return html`
-      <mwc-list>
+      <mwc-list
+        innerRole="menu"
+        itemRoles="menuitem"
+        innerAriaLabel=${ifDefined(this.label)}
+        @action=${this._handleListAction}
+      >
         ${this.pages.map(
           (page) => html`
-            <ha-clickable-list-item
+            <ha-list-item
               graphic="avatar"
               .twoline=${this.hasSecondary}
               .hasMeta=${!this.narrow}
-              @click=${this._entryClicked}
-              href=${page.path}
             >
               <div
                 slot="graphic"
@@ -44,15 +50,20 @@ class HaNavigationList extends LitElement {
               ${!this.narrow
                 ? html`<ha-icon-next slot="meta"></ha-icon-next>`
                 : ""}
-            </ha-clickable-list-item>
+            </ha-list-item>
           `
         )}
       </mwc-list>
     `;
   }
 
-  private _entryClicked(ev) {
-    ev.currentTarget.blur();
+  private _handleListAction(ev: CustomEvent<ActionDetail>) {
+    const path = this.pages[ev.detail.index].path;
+    if (path.endsWith("#external-app-configuration")) {
+      this.hass.auth.external!.fireMessage({ type: "config_screen/show" });
+    } else {
+      navigate(path);
+    }
   }
 
   static styles: CSSResultGroup = css`
@@ -75,10 +86,9 @@ class HaNavigationList extends LitElement {
     .icon-background ha-svg-icon {
       color: #fff;
     }
-    ha-clickable-list-item {
+    ha-list-item {
       cursor: pointer;
       font-size: var(--navigation-list-item-title-font-size);
-      padding: var(--navigation-list-item-padding) 0;
     }
   `;
 }

src/components/ha-related-items.ts

@@ -326,6 +326,9 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
         line-height: var(--paper-font-title_-_line-height);
         opacity: var(--dark-primary-opacity);
       }
+      h3:first-child {
+        margin-top: 0;
+      }
     `;
   }
 }

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

@@ -8,9 +8,9 @@ import "../entity/ha-entity-attribute-picker";
 
 @customElement("ha-selector-attribute")
 export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public selector!: AttributeSelector;
+  @property({ attribute: false }) public selector!: AttributeSelector;
 
   @property() public value?: any;
 
@@ -22,7 +22,7 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public required = true;
 
-  @property() public context?: {
+  @property({ attribute: false }) public context?: {
     filter_entity?: string;
   };
 
@@ -32,6 +32,7 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
         .hass=${this.hass}
         .entityId=${this.selector.attribute.entity_id ||
         this.context?.filter_entity}
+        .hideAttributes=${this.selector.attribute.hide_attributes}
         .value=${this.value}
         .label=${this.label}
         .helper=${this.helper}

src/components/ha-selector/ha-selector-color-temp.ts

@@ -47,7 +47,7 @@ export class HaColorTempSelector extends LitElement {
   static styles = css`
     ha-labeled-slider {
       --ha-slider-background: -webkit-linear-gradient(
-        right,
+        var(--float-end),
         rgb(255, 160, 0) 0%,
         white 50%,
         rgb(166, 209, 255) 100%

src/components/ha-selector/ha-selector-config-entry.ts

@@ -0,0 +1,47 @@
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { ConfigEntrySelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
+import "../ha-config-entry-picker";
+
+@customElement("ha-selector-config_entry")
+export class HaConfigEntrySelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: ConfigEntrySelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    return html`<ha-config-entry-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .label=${this.label}
+      .helper=${this.helper}
+      .disabled=${this.disabled}
+      .required=${this.required}
+      .integration=${this.selector.config_entry.integration}
+      allow-custom-entity
+    ></ha-config-entry-picker>`;
+  }
+
+  static styles = css`
+    ha-config-entry-picker {
+      width: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-config_entry": HaConfigEntrySelector;
+  }
+}

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

@@ -11,9 +11,9 @@ import type { HaTimeInput } from "../ha-time-input";
 
 @customElement("ha-selector-datetime")
 export class HaDateTimeSelector extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public selector!: DateTimeSelector;
+  @property({ attribute: false }) public selector!: DateTimeSelector;
 
   @property() public value?: string;
 

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

@@ -2,15 +2,15 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { DurationSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
-import "../ha-duration-input";
+import { HaDurationData } from "../ha-duration-input";
 
 @customElement("ha-selector-duration")
 export class HaTimeDuration extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public selector!: DurationSelector;
+  @property({ attribute: false }) public selector!: DurationSelector;
 
-  @property() public value?: string;
+  @property({ attribute: false }) public value?: HaDurationData;
 
   @property() public label?: string;
 
@@ -28,7 +28,7 @@ export class HaTimeDuration extends LitElement {
         .data=${this.value}
         .disabled=${this.disabled}
         .required=${this.required}
-        .enableDay=${this.selector.duration.enable_day}
+        ?enableDay=${this.selector.duration.enable_day}
       ></ha-duration-input>
     `;
   }

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

@@ -24,6 +24,7 @@ export class HaIconSelector extends LitElement {
   protected render() {
     return html`
       <ha-icon-picker
+        .hass=${this.hass}
         .label=${this.label}
         .value=${this.value}
         .required=${this.required}

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

@@ -22,6 +22,7 @@ export class HaSelectorState extends SubscribeMixin(LitElement) {
   @property({ type: Boolean }) public required = true;
 
   @property() public context?: {
+    filter_attribute?: string;
     filter_entity?: string;
   };
 
@@ -31,6 +32,8 @@ export class HaSelectorState extends SubscribeMixin(LitElement) {
         .hass=${this.hass}
         .entityId=${this.selector.state.entity_id ||
         this.context?.filter_entity}
+        .attribute=${this.selector.state.attribute ||
+        this.context?.filter_attribute}
         .value=${this.value}
         .label=${this.label}
         .helper=${this.helper}

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

@@ -6,9 +6,9 @@ import "../ha-time-input";
 
 @customElement("ha-selector-time")
 export class HaTimeSelector extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public selector!: TimeSelector;
+  @property({ attribute: false }) public selector!: TimeSelector;
 
   @property() public value?: string;
 

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

@@ -9,6 +9,7 @@ import "./ha-selector-area";
 import "./ha-selector-attribute";
 import "./ha-selector-boolean";
 import "./ha-selector-color-rgb";
+import "./ha-selector-config-entry";
 import "./ha-selector-date";
 import "./ha-selector-datetime";
 import "./ha-selector-device";

src/components/ha-service-picker.ts

@@ -1,5 +1,5 @@
 import { html, LitElement } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";

src/components/ha-sidebar.ts

@@ -49,6 +49,7 @@ import { subscribeRepairsIssueRegistry } from "../data/repairs";
 import { updateCanInstall, UpdateEntity } from "../data/update";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
+import { loadSortable, SortableInstance } from "../resources/sortable.ondemand";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo, Route } from "../types";
 import "./ha-icon";
@@ -177,8 +178,6 @@ const computePanels = memoizeOne(
   }
 );
 
-let Sortable;
-
 @customElement("ha-sidebar")
 class HaSidebar extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -205,6 +204,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
   private _recentKeydownActiveUntil = 0;
 
+  private sortableStyleLoaded = false;
+
   // @ts-ignore
   @LocalStorage("sidebarPanelOrder", true, {
     attribute: false,
@@ -217,7 +218,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   })
   private _hiddenPanels: string[] = [];
 
-  private _sortable?;
+  private _sortable?: SortableInstance;
 
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
@@ -658,36 +659,36 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   }
 
   private async _activateEditMode() {
-    if (!Sortable) {
-      const [sortableImport, sortStylesImport] = await Promise.all([
-        import("sortablejs/modular/sortable.core.esm"),
-        import("../resources/ha-sortable-style"),
-      ]);
-
-      const style = document.createElement("style");
-      style.innerHTML = (sortStylesImport.sortableStyles as CSSResult).cssText;
-      this.shadowRoot!.appendChild(style);
-
-      Sortable = sortableImport.Sortable;
-      Sortable.mount(sortableImport.OnSpill);
-      Sortable.mount(sortableImport.AutoScroll());
-    }
-
-    await this.updateComplete;
-
-    this._createSortable();
+    await Promise.all([this._loadSortableStyle(), this._createSortable()]);
   }
 
-  private _createSortable() {
-    this._sortable = new Sortable(this.shadowRoot!.getElementById("sortable"), {
-      animation: 150,
-      fallbackClass: "sortable-fallback",
-      dataIdAttr: "data-panel",
-      handle: "paper-icon-item",
-      onSort: async () => {
-        this._panelOrder = this._sortable.toArray();
-      },
-    });
+  private async _loadSortableStyle() {
+    if (this.sortableStyleLoaded) return;
+
+    const sortStylesImport = await import("../resources/ha-sortable-style");
+
+    const style = document.createElement("style");
+    style.innerHTML = (sortStylesImport.sortableStyles as CSSResult).cssText;
+    this.shadowRoot!.appendChild(style);
+
+    this.sortableStyleLoaded = true;
+    await this.updateComplete;
+  }
+
+  private async _createSortable() {
+    const Sortable = await loadSortable();
+    this._sortable = new Sortable(
+      this.shadowRoot!.getElementById("sortable")!,
+      {
+        animation: 150,
+        fallbackClass: "sortable-fallback",
+        dataIdAttr: "data-panel",
+        handle: "paper-icon-item",
+        onSort: async () => {
+          this._panelOrder = this._sortable!.toArray();
+        },
+      }
+    );
   }
 
   private _deactivateEditMode() {

src/components/ha-time-input.ts

@@ -43,7 +43,7 @@ export class HaTimeInput extends LitElement {
         .minutes=${Number(parts[1])}
         .seconds=${Number(parts[2])}
         .format=${useAMPM ? 12 : 24}
-        .amPm=${useAMPM && (numberHours >= 12 ? "PM" : "AM")}
+        .amPm=${useAMPM && numberHours >= 12 ? "PM" : "AM"}
         .disabled=${this.disabled}
         @value-changed=${this._timeChanged}
         .enableSecond=${this.enableSecond}

src/components/ha-water_heater-control.js

@@ -26,6 +26,7 @@ class HaWaterHeaterControl extends EventsMixin(PolymerElement) {
         #target_temperature {
           @apply --layout-self-center;
           font-size: 200%;
+          direction: ltr;
         }
         .control-buttons {
           font-size: 200%;

src/components/ha-water_heater-state.js

@@ -31,11 +31,16 @@ class HaWaterHeaterState extends LocalizeMixin(PolymerElement) {
           font-weight: bold;
           text-transform: capitalize;
         }
+
+        .label {
+          direction: ltr;
+          display: inline-block;
+        }
       </style>
 
       <div class="target">
-        <span class="state-label"> [[_localizeState(stateObj)]] </span>
-        [[computeTarget(hass, stateObj)]]
+        <span class="state-label label"> [[_localizeState(stateObj)]] </span>
+        <span class="label">[[computeTarget(hass, stateObj)]]</span>
       </div>
 
       <template is="dom-if" if="[[currentStatus]]">

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

@@ -1,6 +1,5 @@
 import {
   mdiAbTesting,
-  mdiAlertOctagon,
   mdiArrowDecision,
   mdiArrowUp,
   mdiAsterisk,
@@ -10,17 +9,18 @@ import {
   mdiCheckboxBlankOutline,
   mdiCheckboxMarkedOutline,
   mdiChevronDown,
-  mdiChevronRight,
   mdiChevronUp,
   mdiClose,
-  mdiCloseOctagon,
+  mdiCodeBraces,
   mdiCodeBrackets,
   mdiDevices,
-  mdiExclamation,
+  mdiGestureDoubleTap,
+  mdiHandBackRight,
+  mdiPalette,
   mdiRefresh,
+  mdiRoomService,
   mdiShuffleDisabled,
   mdiTimerOutline,
-  mdiTrafficLight,
 } from "@mdi/js";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -46,7 +46,6 @@ import {
   ChooseActionTraceStep,
   ConditionTraceStep,
   IfActionTraceStep,
-  StopActionTraceStep,
   TraceExtended,
 } from "../../data/trace";
 import "../ha-icon-button";
@@ -419,7 +418,7 @@ export class HatScriptGraph extends LitElement {
     return html`
       <hat-graph-node
         .graphStart=${graphStart}
-        .iconPath=${mdiExclamation}
+        .iconPath=${mdiGestureDoubleTap}
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
@@ -485,7 +484,7 @@ export class HatScriptGraph extends LitElement {
     return html`
       <hat-graph-node
         .graphStart=${graphStart}
-        .iconPath=${mdiExclamation}
+        .iconPath=${mdiPalette}
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
@@ -504,7 +503,7 @@ export class HatScriptGraph extends LitElement {
     return html`
       <hat-graph-node
         .graphStart=${graphStart}
-        .iconPath=${mdiChevronRight}
+        .iconPath=${mdiRoomService}
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
@@ -523,7 +522,7 @@ export class HatScriptGraph extends LitElement {
     return html`
       <hat-graph-node
         .graphStart=${graphStart}
-        .iconPath=${mdiTrafficLight}
+        .iconPath=${mdiCodeBraces}
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}
@@ -587,13 +586,10 @@ export class HatScriptGraph extends LitElement {
     graphStart = false,
     disabled = false
   ) {
-    const trace = this.trace.trace[path] as StopActionTraceStep[] | undefined;
     return html`
       <hat-graph-node
         .graphStart=${graphStart}
-        .iconPath=${trace?.[0].result?.error
-          ? mdiAlertOctagon
-          : mdiCloseOctagon}
+        .iconPath=${mdiHandBackRight}
         @focus=${this.selectNode(node, path)}
         ?track=${path in this.trace.trace}
         ?active=${this.selected === path}

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

@@ -317,7 +317,11 @@ class ActionRenderer {
   private _handleTrigger(index: number, triggerStep: TriggerTraceStep): number {
     this._renderEntry(
       triggerStep.path,
-      `Triggered ${
+      `${
+        triggerStep.changed_variables.trigger.alias
+          ? `${triggerStep.changed_variables.trigger.alias} triggered`
+          : "Triggered"
+      } ${
         triggerStep.path === "trigger"
           ? "manually"
           : `by the ${this.trace.trigger}`

src/data/action.ts

@@ -1,16 +1,33 @@
-export const ACTION_TYPES = [
-  "condition",
-  "delay",
-  "event",
-  "play_media",
-  "activate_scene",
-  "service",
-  "wait_template",
-  "wait_for_trigger",
-  "repeat",
-  "choose",
-  "if",
-  "device_id",
-  "stop",
-  "parallel",
-];
+import {
+  mdiAbTesting,
+  mdiArrowDecision,
+  mdiCallSplit,
+  mdiCodeBraces,
+  mdiDevices,
+  mdiGestureDoubleTap,
+  mdiHandBackRight,
+  mdiPalette,
+  mdiPlay,
+  mdiRefresh,
+  mdiRoomService,
+  mdiShuffleDisabled,
+  mdiTimerOutline,
+  mdiTrafficLight,
+} from "@mdi/js";
+
+export const ACTION_TYPES = {
+  condition: mdiAbTesting,
+  delay: mdiTimerOutline,
+  event: mdiGestureDoubleTap,
+  play_media: mdiPlay,
+  activate_scene: mdiPalette,
+  service: mdiRoomService,
+  wait_template: mdiCodeBraces,
+  wait_for_trigger: mdiTrafficLight,
+  repeat: mdiRefresh,
+  choose: mdiArrowDecision,
+  if: mdiCallSplit,
+  device_id: mdiDevices,
+  stop: mdiHandBackRight,
+  parallel: mdiShuffleDisabled,
+};

src/data/automation.ts

@@ -62,6 +62,7 @@ export interface ContextConstraint {
 }
 
 export interface BaseTrigger {
+  alias?: string;
   platform: string;
   id?: string;
   variables?: Record<string, unknown>;

src/data/automation_i18n.ts

@@ -1,14 +1,471 @@
+import secondsToDuration from "../common/datetime/seconds_to_duration";
+import { computeStateName } from "../common/entity/compute_state_name";
+import type { HomeAssistant } from "../types";
 import { Condition, Trigger } from "./automation";
+import { formatAttributeName } from "./entity_attributes";
 
-export const describeTrigger = (trigger: Trigger) =>
-  `${trigger.platform || "Unknown"} trigger`;
+export const describeTrigger = (
+  trigger: Trigger,
+  hass: HomeAssistant,
+  ignoreAlias = false
+) => {
+  if (trigger.alias && !ignoreAlias) {
+    return trigger.alias;
+  }
 
-export const describeCondition = (condition: Condition) => {
-  if (condition.alias) {
+  // Event Trigger
+  if (trigger.platform === "event" && trigger.event_type) {
+    let eventTypes = "";
+
+    if (Array.isArray(trigger.event_type)) {
+      for (const [index, state] of trigger.event_type.entries()) {
+        eventTypes += `${index > 0 ? "," : ""} ${
+          trigger.event_type.length > 1 &&
+          index === trigger.event_type.length - 1
+            ? "or"
+            : ""
+        } ${state}`;
+      }
+    } else {
+      eventTypes = trigger.event_type.toString();
+    }
+
+    return `When ${eventTypes} event is fired`;
+  }
+
+  // Home Assistant Trigger
+  if (trigger.platform === "homeassistant" && trigger.event) {
+    return `When Home Assistant is ${
+      trigger.event === "start" ? "started" : "shutdown"
+    }`;
+  }
+
+  // Numeric State Trigger
+  if (trigger.platform === "numeric_state" && trigger.entity_id) {
+    let base = "When";
+    const stateObj = hass.states[trigger.entity_id];
+    const entity = stateObj ? computeStateName(stateObj) : trigger.entity_id;
+
+    if (trigger.attribute) {
+      base += ` ${formatAttributeName(trigger.attribute)} from`;
+    }
+
+    base += ` ${entity} is`;
+
+    if ("above" in trigger) {
+      base += ` above ${trigger.above}`;
+    }
+
+    if ("below" in trigger && "above" in trigger) {
+      base += " and";
+    }
+
+    if ("below" in trigger) {
+      base += ` below ${trigger.below}`;
+    }
+
+    return base;
+  }
+
+  // State Trigger
+  if (trigger.platform === "state" && trigger.entity_id) {
+    let base = "When";
+    let entities = "";
+
+    const states = hass.states;
+
+    if (trigger.attribute) {
+      base += ` ${formatAttributeName(trigger.attribute)} from`;
+    }
+
+    if (Array.isArray(trigger.entity_id)) {
+      for (const [index, entity] of trigger.entity_id.entries()) {
+        if (states[entity]) {
+          entities += `${index > 0 ? "," : ""} ${
+            trigger.entity_id.length > 1 &&
+            index === trigger.entity_id.length - 1
+              ? "or"
+              : ""
+          } ${computeStateName(states[entity]) || entity}`;
+        }
+      }
+    } else {
+      entities = states[trigger.entity_id]
+        ? computeStateName(states[trigger.entity_id])
+        : trigger.entity_id;
+    }
+
+    base += ` ${entities} changes`;
+
+    if (trigger.from) {
+      let from = "";
+      if (Array.isArray(trigger.from)) {
+        for (const [index, state] of trigger.from.entries()) {
+          from += `${index > 0 ? "," : ""} ${
+            trigger.from.length > 1 && index === trigger.from.length - 1
+              ? "or"
+              : ""
+          } ${state}`;
+        }
+      } else {
+        from = trigger.from.toString();
+      }
+      base += ` from ${from}`;
+    }
+
+    if (trigger.to) {
+      let to = "";
+      if (Array.isArray(trigger.to)) {
+        for (const [index, state] of trigger.to.entries()) {
+          to += `${index > 0 ? "," : ""} ${
+            trigger.to.length > 1 && index === trigger.to.length - 1 ? "or" : ""
+          } ${state}`;
+        }
+      } else if (trigger.to) {
+        to = trigger.to.toString();
+      }
+
+      base += ` to ${to}`;
+    }
+
+    if ("for" in trigger) {
+      let duration: string;
+      if (typeof trigger.for === "number") {
+        duration = `for ${secondsToDuration(trigger.for)!}`;
+      } else if (typeof trigger.for === "string") {
+        duration = `for ${trigger.for}`;
+      } else {
+        duration = `for ${JSON.stringify(trigger.for)}`;
+      }
+
+      base += ` for ${duration}`;
+    }
+
+    return base;
+  }
+
+  // Sun Trigger
+  if (trigger.platform === "sun" && trigger.event) {
+    let base = `When the sun ${trigger.event === "sunset" ? "sets" : "rises"}`;
+
+    if (trigger.offset) {
+      let duration = "";
+
+      if (trigger.offset) {
+        if (typeof trigger.offset === "number") {
+          duration = ` offset by ${secondsToDuration(trigger.offset)!}`;
+        } else if (typeof trigger.offset === "string") {
+          duration = ` offset by ${trigger.offset}`;
+        } else {
+          duration = ` offset by ${JSON.stringify(trigger.offset)}`;
+        }
+      }
+      base += duration;
+    }
+
+    return base;
+  }
+
+  // Tag Trigger
+  if (trigger.platform === "tag") {
+    return "When a tag is scanned";
+  }
+
+  // Time Trigger
+  if (trigger.platform === "time" && trigger.at) {
+    const at = trigger.at.includes(".")
+      ? hass.states[trigger.at] || trigger.at
+      : trigger.at;
+
+    return `When the time is equal to ${at}`;
+  }
+
+  // Time Patter Trigger
+  if (trigger.platform === "time_pattern") {
+    return "Time pattern trigger";
+  }
+
+  // Zone Trigger
+  if (trigger.platform === "zone" && trigger.entity_id && trigger.zone) {
+    let entities = "";
+    let zones = "";
+    let zonesPlural = false;
+
+    const states = hass.states;
+
+    if (Array.isArray(trigger.entity_id)) {
+      for (const [index, entity] of trigger.entity_id.entries()) {
+        if (states[entity]) {
+          entities += `${index > 0 ? "," : ""} ${
+            trigger.entity_id.length > 1 &&
+            index === trigger.entity_id.length - 1
+              ? "or"
+              : ""
+          } ${computeStateName(states[entity]) || entity}`;
+        }
+      }
+    } else {
+      entities = states[trigger.entity_id]
+        ? computeStateName(states[trigger.entity_id])
+        : trigger.entity_id;
+    }
+
+    if (Array.isArray(trigger.zone)) {
+      if (trigger.zone.length > 1) {
+        zonesPlural = true;
+      }
+
+      for (const [index, zone] of trigger.zone.entries()) {
+        if (states[zone]) {
+          zones += `${index > 0 ? "," : ""} ${
+            trigger.zone.length > 1 && index === trigger.zone.length - 1
+              ? "or"
+              : ""
+          } ${computeStateName(states[zone]) || zone}`;
+        }
+      }
+    } else {
+      zones = states[trigger.zone]
+        ? computeStateName(states[trigger.zone])
+        : trigger.zone;
+    }
+
+    return `When ${entities} ${trigger.event}s ${zones} ${
+      zonesPlural ? "zones" : "zone"
+    }`;
+  }
+
+  // Geo Location Trigger
+  if (trigger.platform === "geo_location" && trigger.source && trigger.zone) {
+    let sources = "";
+    let zones = "";
+    let zonesPlural = false;
+    const states = hass.states;
+
+    if (Array.isArray(trigger.source)) {
+      for (const [index, source] of trigger.source.entries()) {
+        sources += `${index > 0 ? "," : ""} ${
+          trigger.source.length > 1 && index === trigger.source.length - 1
+            ? "or"
+            : ""
+        } ${source}`;
+      }
+    } else {
+      sources = trigger.source;
+    }
+
+    if (Array.isArray(trigger.zone)) {
+      if (trigger.zone.length > 1) {
+        zonesPlural = true;
+      }
+
+      for (const [index, zone] of trigger.zone.entries()) {
+        if (states[zone]) {
+          zones += `${index > 0 ? "," : ""} ${
+            trigger.zone.length > 1 && index === trigger.zone.length - 1
+              ? "or"
+              : ""
+          } ${computeStateName(states[zone]) || zone}`;
+        }
+      }
+    } else {
+      zones = states[trigger.zone]
+        ? computeStateName(states[trigger.zone])
+        : trigger.zone;
+    }
+
+    return `When ${sources} ${trigger.event}s ${zones} ${
+      zonesPlural ? "zones" : "zone"
+    }`;
+  }
+  // MQTT Trigger
+  if (trigger.platform === "mqtt") {
+    return "When a MQTT payload has been received";
+  }
+
+  // Template Trigger
+  if (trigger.platform === "template") {
+    return "When a template triggers";
+  }
+
+  // Webhook Trigger
+  if (trigger.platform === "webhook") {
+    return "When a Webhook payload has been received";
+  }
+  return `${trigger.platform || "Unknown"} trigger`;
+};
+
+export const describeCondition = (
+  condition: Condition,
+  hass: HomeAssistant,
+  ignoreAlias = false
+) => {
+  if (condition.alias && !ignoreAlias) {
     return condition.alias;
   }
+
   if (["or", "and", "not"].includes(condition.condition)) {
     return `multiple conditions using "${condition.condition}"`;
   }
+
+  // State Condition
+  if (condition.condition === "state" && condition.entity_id) {
+    let base = "Confirm";
+    const stateObj = hass.states[condition.entity_id];
+    const entity = stateObj ? computeStateName(stateObj) : condition.entity_id;
+
+    if ("attribute" in condition) {
+      base += ` ${condition.attribute} from`;
+    }
+
+    let states = "";
+
+    if (Array.isArray(condition.state)) {
+      for (const [index, state] of condition.state.entries()) {
+        states += `${index > 0 ? "," : ""} ${
+          condition.state.length > 1 && index === condition.state.length - 1
+            ? "or"
+            : ""
+        } ${state}`;
+      }
+    } else {
+      states = condition.state.toString();
+    }
+
+    base += ` ${entity} is ${states}`;
+
+    if ("for" in condition) {
+      let duration: string;
+      if (typeof condition.for === "number") {
+        duration = `for ${secondsToDuration(condition.for)!}`;
+      } else if (typeof condition.for === "string") {
+        duration = `for ${condition.for}`;
+      } else {
+        duration = `for ${JSON.stringify(condition.for)}`;
+      }
+      base += ` for ${duration}`;
+    }
+
+    return base;
+  }
+
+  // Numeric State Condition
+  if (condition.condition === "numeric_state" && condition.entity_id) {
+    let base = "Confirm";
+    const stateObj = hass.states[condition.entity_id];
+    const entity = stateObj ? computeStateName(stateObj) : condition.entity_id;
+
+    if ("attribute" in condition) {
+      base += ` ${condition.attribute} from`;
+    }
+
+    base += ` ${entity} is`;
+
+    if ("above" in condition) {
+      base += ` above ${condition.above}`;
+    }
+
+    if ("below" in condition && "above" in condition) {
+      base += " and";
+    }
+
+    if ("below" in condition) {
+      base += ` below ${condition.below}`;
+    }
+
+    return base;
+  }
+
+  // Sun condition
+  if (
+    condition.condition === "sun" &&
+    ("before" in condition || "after" in condition)
+  ) {
+    let base = "Confirm";
+
+    if (!condition.after && !condition.before) {
+      base += " sun";
+      return base;
+    }
+
+    base += " sun";
+
+    if (condition.after) {
+      let duration = "";
+
+      if (condition.after_offset) {
+        if (typeof condition.after_offset === "number") {
+          duration = ` offset by ${secondsToDuration(condition.after_offset)!}`;
+        } else if (typeof condition.after_offset === "string") {
+          duration = ` offset by ${condition.after_offset}`;
+        } else {
+          duration = ` offset by ${JSON.stringify(condition.after_offset)}`;
+        }
+      }
+
+      base += ` after ${condition.after}${duration}`;
+    }
+
+    if (condition.before) {
+      base += ` before ${condition.before}`;
+    }
+
+    return base;
+  }
+
+  // Zone condition
+  if (condition.condition === "zone" && condition.entity_id && condition.zone) {
+    let entities = "";
+    let entitiesPlural = false;
+    let zones = "";
+    let zonesPlural = false;
+
+    const states = hass.states;
+
+    if (Array.isArray(condition.entity_id)) {
+      if (condition.entity_id.length > 1) {
+        entitiesPlural = true;
+      }
+      for (const [index, entity] of condition.entity_id.entries()) {
+        if (states[entity]) {
+          entities += `${index > 0 ? "," : ""} ${
+            condition.entity_id.length > 1 &&
+            index === condition.entity_id.length - 1
+              ? "or"
+              : ""
+          } ${computeStateName(states[entity]) || entity}`;
+        }
+      }
+    } else {
+      entities = states[condition.entity_id]
+        ? computeStateName(states[condition.entity_id])
+        : condition.entity_id;
+    }
+
+    if (Array.isArray(condition.zone)) {
+      if (condition.zone.length > 1) {
+        zonesPlural = true;
+      }
+
+      for (const [index, zone] of condition.zone.entries()) {
+        if (states[zone]) {
+          zones += `${index > 0 ? "," : ""} ${
+            condition.zone.length > 1 && index === condition.zone.length - 1
+              ? "or"
+              : ""
+          } ${computeStateName(states[zone]) || zone}`;
+        }
+      }
+    } else {
+      zones = states[condition.zone]
+        ? computeStateName(states[condition.zone])
+        : condition.zone;
+    }
+
+    return `Confirm ${entities} ${entitiesPlural ? "are" : "is"} in ${zones} ${
+      zonesPlural ? "zones" : "zone"
+    }`;
+  }
+
   return `${condition.condition} condition`;
 };

src/data/condition.ts

@@ -1,15 +1,27 @@
-import type { Condition } from "./automation";
+import {
+  mdiAmpersand,
+  mdiClockOutline,
+  mdiCodeBraces,
+  mdiDevices,
+  mdiGateOr,
+  mdiIdentifier,
+  mdiMapMarkerRadius,
+  mdiNotEqualVariant,
+  mdiNumeric,
+  mdiStateMachine,
+  mdiWeatherSunny,
+} from "@mdi/js";
 
-export const CONDITION_TYPES: Condition["condition"][] = [
-  "device",
-  "and",
-  "or",
-  "not",
-  "state",
-  "numeric_state",
-  "sun",
-  "template",
-  "time",
-  "trigger",
-  "zone",
-];
+export const CONDITION_TYPES = {
+  device: mdiDevices,
+  and: mdiAmpersand,
+  or: mdiGateOr,
+  not: mdiNotEqualVariant,
+  state: mdiStateMachine,
+  numeric_state: mdiNumeric,
+  sun: mdiWeatherSunny,
+  template: mdiCodeBraces,
+  time: mdiClockOutline,
+  trigger: mdiIdentifier,
+  zone: mdiMapMarkerRadius,
+};

src/data/energy.ts

@@ -248,6 +248,62 @@ export interface EnergyData {
   fossilEnergyConsumptionCompare?: FossilEnergyConsumption;
 }
 
+export const getReferencedStatisticIds = (
+  prefs: EnergyPreferences,
+  info: EnergyInfo
+): string[] => {
+  const statIDs: string[] = [];
+
+  for (const source of prefs.energy_sources) {
+    if (source.type === "solar") {
+      statIDs.push(source.stat_energy_from);
+      continue;
+    }
+
+    if (source.type === "gas") {
+      statIDs.push(source.stat_energy_from);
+      if (source.stat_cost) {
+        statIDs.push(source.stat_cost);
+      }
+      const costStatId = info.cost_sensors[source.stat_energy_from];
+      if (costStatId) {
+        statIDs.push(costStatId);
+      }
+      continue;
+    }
+
+    if (source.type === "battery") {
+      statIDs.push(source.stat_energy_from);
+      statIDs.push(source.stat_energy_to);
+      continue;
+    }
+
+    // grid source
+    for (const flowFrom of source.flow_from) {
+      statIDs.push(flowFrom.stat_energy_from);
+      if (flowFrom.stat_cost) {
+        statIDs.push(flowFrom.stat_cost);
+      }
+      const costStatId = info.cost_sensors[flowFrom.stat_energy_from];
+      if (costStatId) {
+        statIDs.push(costStatId);
+      }
+    }
+    for (const flowTo of source.flow_to) {
+      statIDs.push(flowTo.stat_energy_to);
+      if (flowTo.stat_compensation) {
+        statIDs.push(flowTo.stat_compensation);
+      }
+      const costStatId = info.cost_sensors[flowTo.stat_energy_to];
+      if (costStatId) {
+        statIDs.push(costStatId);
+      }
+    }
+  }
+
+  return statIDs;
+};
+
 const getEnergyData = async (
   hass: HomeAssistant,
   prefs: EnergyPreferences,
@@ -285,55 +341,15 @@ const getEnergyData = async (
   }
 
   const consumptionStatIDs: string[] = [];
-  const statIDs: string[] = [];
-
   for (const source of prefs.energy_sources) {
-    if (source.type === "solar") {
-      statIDs.push(source.stat_energy_from);
-      continue;
-    }
-
-    if (source.type === "gas") {
-      statIDs.push(source.stat_energy_from);
-      if (source.stat_cost) {
-        statIDs.push(source.stat_cost);
-      }
-      const costStatId = info.cost_sensors[source.stat_energy_from];
-      if (costStatId) {
-        statIDs.push(costStatId);
-      }
-      continue;
-    }
-
-    if (source.type === "battery") {
-      statIDs.push(source.stat_energy_from);
-      statIDs.push(source.stat_energy_to);
-      continue;
-    }
-
     // grid source
-    for (const flowFrom of source.flow_from) {
-      consumptionStatIDs.push(flowFrom.stat_energy_from);
-      statIDs.push(flowFrom.stat_energy_from);
-      if (flowFrom.stat_cost) {
-        statIDs.push(flowFrom.stat_cost);
-      }
-      const costStatId = info.cost_sensors[flowFrom.stat_energy_from];
-      if (costStatId) {
-        statIDs.push(costStatId);
-      }
-    }
-    for (const flowTo of source.flow_to) {
-      statIDs.push(flowTo.stat_energy_to);
-      if (flowTo.stat_compensation) {
-        statIDs.push(flowTo.stat_compensation);
-      }
-      const costStatId = info.cost_sensors[flowTo.stat_energy_to];
-      if (costStatId) {
-        statIDs.push(costStatId);
+    if (source.type === "grid") {
+      for (const flowFrom of source.flow_from) {
+        consumptionStatIDs.push(flowFrom.stat_energy_from);
       }
     }
   }
+  const statIDs = getReferencedStatisticIds(prefs, info);
 
   const dayDifference = differenceInDays(end || new Date(), start);
   const period =
@@ -581,7 +597,7 @@ export const getEnergySolarForecasts = (hass: HomeAssistant) =>
     type: "energy/solar_forecast",
   });
 
-export const ENERGY_GAS_VOLUME_UNITS = ["m³", "ft³"];
+export const ENERGY_GAS_VOLUME_UNITS = ["m³"];
 export const ENERGY_GAS_ENERGY_UNITS = ["kWh"];
 export const ENERGY_GAS_UNITS = [
   ...ENERGY_GAS_VOLUME_UNITS,
@@ -591,18 +607,21 @@ export const ENERGY_GAS_UNITS = [
 export type EnergyGasUnit = "volume" | "energy";
 
 export const getEnergyGasUnitCategory = (
-  hass: HomeAssistant,
-  prefs: EnergyPreferences
+  prefs: EnergyPreferences,
+  statisticsMetaData: Record<string, StatisticsMetaData> = {},
+  excludeSource?: string
 ): EnergyGasUnit | undefined => {
   for (const source of prefs.energy_sources) {
     if (source.type !== "gas") {
       continue;
     }
-
-    const entity = hass.states[source.stat_energy_from];
-    if (entity) {
+    if (excludeSource && excludeSource === source.stat_energy_from) {
+      continue;
+    }
+    const statisticIdWithMeta = statisticsMetaData[source.stat_energy_from];
+    if (statisticIdWithMeta) {
       return ENERGY_GAS_VOLUME_UNITS.includes(
-        entity.attributes.unit_of_measurement!
+        statisticIdWithMeta.display_unit_of_measurement
       )
         ? "volume"
         : "energy";
@@ -612,7 +631,6 @@ export const getEnergyGasUnitCategory = (
 };
 
 export const getEnergyGasUnit = (
-  hass: HomeAssistant,
   prefs: EnergyPreferences,
   statisticsMetaData: Record<string, StatisticsMetaData> = {}
 ): string | undefined => {
@@ -620,18 +638,9 @@ export const getEnergyGasUnit = (
     if (source.type !== "gas") {
       continue;
     }
-    const entity = hass.states[source.stat_energy_from];
-    if (entity?.attributes.unit_of_measurement) {
-      // Wh is normalized to kWh by stats generation
-      return entity.attributes.unit_of_measurement === "Wh"
-        ? "kWh"
-        : entity.attributes.unit_of_measurement;
-    }
     const statisticIdWithMeta = statisticsMetaData[source.stat_energy_from];
-    if (statisticIdWithMeta?.unit_of_measurement) {
-      return statisticIdWithMeta.unit_of_measurement === "Wh"
-        ? "kWh"
-        : statisticIdWithMeta.unit_of_measurement;
+    if (statisticIdWithMeta?.display_unit_of_measurement) {
+      return statisticIdWithMeta.display_unit_of_measurement;
     }
   }
   return undefined;

src/data/hardware.ts

@@ -37,3 +37,11 @@ export interface HardwareInfoBoardInfo {
   revision?: string;
   hassio_board_id?: string;
 }
+
+export interface SystemStatusStreamMessage {
+  cpu_percent: number;
+  memory_free_mb: number;
+  memory_used_mb: number;
+  memory_used_percent: number;
+  timestamp: string;
+}

src/data/hassio/addon.ts

@@ -1,6 +1,6 @@
 import { atLeastVersion } from "../../common/config/version";
 import type { HaFormSchema } from "../../components/ha-form/types";
-import { HomeAssistant } from "../../types";
+import { HomeAssistant, TranslationDict } from "../../types";
 import { supervisorApiCall } from "../supervisor/common";
 import { StoreAddonDetails } from "../supervisor/store";
 import { Supervisor, SupervisorArch } from "../supervisor/supervisor";
@@ -10,6 +10,10 @@ import {
   HassioResponse,
 } from "./common";
 
+export type AddonCapability = Exclude<
+  keyof TranslationDict["supervisor"]["addon"]["dashboard"]["capability"],
+  "label" | "role" | "stages"
+>;
 export type AddonStage = "stable" | "experimental" | "deprecated";
 export type AddonAppArmour = "disable" | "default" | "profile";
 export type AddonRole = "default" | "homeassistant" | "manager" | "admin";

src/data/hassio/resolution.ts

@@ -1,10 +1,10 @@
 import { atLeastVersion } from "../../common/config/version";
-import { HomeAssistant } from "../../types";
+import { HomeAssistant, TranslationDict } from "../../types";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
 export interface HassioResolution {
-  unsupported: string[];
-  unhealthy: string[];
+  unsupported: (keyof TranslationDict["supervisor"]["system"]["supervisor"]["unsupported_reason"])[];
+  unhealthy: (keyof TranslationDict["supervisor"]["system"]["supervisor"]["unhealthy_reason"])[];
   issues: string[];
   suggestions: string[];
 }

src/data/history.ts

@@ -82,7 +82,8 @@ export interface StatisticValue {
 }
 
 export interface StatisticsMetaData {
-  unit_of_measurement: string;
+  display_unit_of_measurement: string;
+  statistics_unit_of_measurement: string;
   statistic_id: string;
   source: string;
   name?: string | null;
@@ -412,6 +413,7 @@ export const computeHistory = (
       unit = stateWithUnitorStateClass.a.unit_of_measurement || " ";
     } else {
       unit = {
+        zone: localize("ui.dialogs.more_info_control.zone.graph_unit"),
         climate: hass.config.unit_system.temperature,
         counter: "#",
         humidifier: "%",
@@ -568,12 +570,11 @@ export const adjustStatisticsSum = (
 export const getStatisticLabel = (
   hass: HomeAssistant,
   statisticsId: string,
-  statisticsMetaData: Record<string, StatisticsMetaData>
+  statisticsMetaData: StatisticsMetaData | undefined
 ): string => {
   const entity = hass.states[statisticsId];
   if (entity) {
     return computeStateName(entity);
   }
-  const statisticMetaData = statisticsMetaData[statisticsId];
-  return statisticMetaData?.name || statisticsId;
+  return statisticsMetaData?.name || statisticsId;
 };

src/data/logbook.ts

@@ -13,7 +13,7 @@ import { HomeAssistant } from "../types";
 import { UNAVAILABLE_STATES } from "./entity";
 
 const LOGBOOK_LOCALIZE_PATH = "ui.components.logbook.messages";
-export const CONTINUOUS_DOMAINS = ["counter", "proximity", "sensor"];
+export const CONTINUOUS_DOMAINS = ["counter", "proximity", "sensor", "zone"];
 
 export interface LogbookStreamMessage {
   events: LogbookEntry[];

src/data/script.ts

@@ -155,9 +155,17 @@ export interface WaitAction extends BaseAction {
   continue_on_timeout?: boolean;
 }
 
+export interface WaitForTriggerActionParts extends BaseAction {
+  milliseconds?: number;
+  seconds?: number;
+  minutes?: number;
+  hours?: number;
+  days?: number;
+}
+
 export interface WaitForTriggerAction extends BaseAction {
   wait_for_trigger: Trigger | Trigger[];
-  timeout?: number;
+  timeout?: number | Partial<WaitForTriggerActionParts> | string;
   continue_on_timeout?: boolean;
 }
 

src/data/script_i18n.ts

@@ -26,9 +26,10 @@ import {
 export const describeAction = <T extends ActionType>(
   hass: HomeAssistant,
   action: ActionTypes[T],
-  actionType?: T
+  actionType?: T,
+  ignoreAlias = false
 ): string => {
-  if (action.alias) {
+  if (action.alias && !ignoreAlias) {
     return action.alias;
   }
   if (!actionType) {
@@ -118,7 +119,7 @@ export const describeAction = <T extends ActionType>(
       entityId = config.target?.entity_id || config.entity_id;
     }
     const sceneStateObj = entityId ? hass.states[entityId] : undefined;
-    return `Activate scene ${
+    return `Scene ${
       sceneStateObj
         ? computeStateName(sceneStateObj)
         : "scene" in config
@@ -141,7 +142,7 @@ export const describeAction = <T extends ActionType>(
   if (actionType === "wait_for_trigger") {
     const config = action as WaitForTriggerAction;
     return `Wait for ${ensureArray(config.wait_for_trigger)
-      .map((trigger) => describeTrigger(trigger))
+      .map((trigger) => describeTrigger(trigger, hass))
       .join(", ")}`;
   }
 
@@ -163,7 +164,7 @@ export const describeAction = <T extends ActionType>(
   }
 
   if (actionType === "check_condition") {
-    return `Test ${describeCondition(action as Condition)}`;
+    return `Test ${describeCondition(action as Condition, hass)}`;
   }
 
   if (actionType === "stop") {
@@ -173,61 +174,36 @@ export const describeAction = <T extends ActionType>(
 
   if (actionType === "if") {
     const config = action as IfAction;
-    return `If ${
+    return `Perform an action if: ${
       typeof config.if === "string"
         ? config.if
-        : ensureArray(config.if)
-            .map((condition) => describeCondition(condition))
-            .join(", ")
-    } then ${ensureArray(config.then).map((thenAction) =>
-      describeAction(hass, thenAction)
-    )}${
-      config.else
-        ? ` else ${ensureArray(config.else).map((elseAction) =>
-            describeAction(hass, elseAction)
-          )}`
-        : ""
-    }`;
+        : ensureArray(config.if).length > 1
+        ? `${ensureArray(config.if).length} conditions`
+        : describeCondition(ensureArray(config.if)[0], hass)
+    }${config.else ? " (or else!)" : ""}`;
   }
 
   if (actionType === "choose") {
     const config = action as ChooseAction;
     return config.choose
-      ? `If ${ensureArray(config.choose)
-          .map(
-            (chooseAction) =>
-              `${
-                typeof chooseAction.conditions === "string"
-                  ? chooseAction.conditions
-                  : ensureArray(chooseAction.conditions)
-                      .map((condition) => describeCondition(condition))
-                      .join(", ")
-              } then ${ensureArray(chooseAction.sequence)
-                .map((chooseSeq) => describeAction(hass, chooseSeq))
-                .join(", ")}`
-          )
-          .join(", else if ")}${
-          config.default
-            ? `. If none match: ${ensureArray(config.default)
-                .map((dAction) => describeAction(hass, dAction))
-                .join(", ")}`
-            : ""
-        }`
-      : "Choose";
+      ? `Choose between ${
+          ensureArray(config.choose).length + (config.default ? 1 : 0)
+        } actions`
+      : "Choose an action";
   }
 
   if (actionType === "repeat") {
     const config = action as RepeatAction;
-    return `Repeat ${ensureArray(config.repeat.sequence).map((repeatAction) =>
-      describeAction(hass, repeatAction)
-    )} ${"count" in config.repeat ? `${config.repeat.count} times` : ""}${
+    return `Repeat an action ${
+      "count" in config.repeat ? `${config.repeat.count} times` : ""
+    }${
       "while" in config.repeat
         ? `while ${ensureArray(config.repeat.while)
-            .map((condition) => describeCondition(condition))
+            .map((condition) => describeCondition(condition, hass))
             .join(", ")} is true`
         : "until" in config.repeat
         ? `until ${ensureArray(config.repeat.until)
-            .map((condition) => describeCondition(condition))
+            .map((condition) => describeCondition(condition, hass))
             .join(", ")} is true`
         : "for_each" in config.repeat
         ? `for every item: ${ensureArray(config.repeat.for_each)
@@ -238,7 +214,7 @@ export const describeAction = <T extends ActionType>(
   }
 
   if (actionType === "check_condition") {
-    return `Test ${describeCondition(action as Condition)}`;
+    return `Test ${describeCondition(action as Condition, hass)}`;
   }
 
   if (actionType === "device_action") {
@@ -251,9 +227,7 @@ export const describeAction = <T extends ActionType>(
 
   if (actionType === "parallel") {
     const config = action as ParallelAction;
-    return `Run in parallel: ${ensureArray(config.parallel)
-      .map((pAction) => describeAction(hass, pAction))
-      .join(", ")}`;
+    return `Run  ${ensureArray(config.parallel).length} actions in parallel`;
   }
 
   return actionType;

src/data/selector.ts

@@ -11,6 +11,7 @@ export type Selector =
   | BooleanSelector
   | ColorRGBSelector
   | ColorTempSelector
+  | ConfigEntrySelector
   | DateSelector
   | DateTimeSelector
   | DeviceSelector
@@ -65,6 +66,7 @@ export interface AreaSelector {
 export interface AttributeSelector {
   attribute: {
     entity_id?: string;
+    hide_attributes?: readonly string[];
   };
 }
 
@@ -85,6 +87,12 @@ export interface ColorTempSelector {
   };
 }
 
+export interface ConfigEntrySelector {
+  config_entry: {
+    integration?: string;
+  };
+}
+
 export interface DateSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   date: {};
@@ -195,6 +203,7 @@ export interface SelectSelector {
 export interface StateSelector {
   state: {
     entity_id?: string;
+    attribute?: string;
   };
 }
 

src/data/shopping-list.ts

@@ -41,7 +41,7 @@ export const addItem = (
 
 export const reorderItems = (
   hass: HomeAssistant,
-  itemIds: [string]
+  itemIds: string[]
 ): Promise<ShoppingListItem> =>
   hass.callWS({
     type: "shopping_list/items/reorder",

src/data/supervisor/store.ts

@@ -1,5 +1,5 @@
 import { HomeAssistant } from "../../types";
-import { AddonStage } from "../hassio/addon";
+import { AddonRole, AddonStage } from "../hassio/addon";
 import { supervisorApiCall } from "./common";
 import { SupervisorArch } from "./supervisor";
 
@@ -31,7 +31,7 @@ export interface StoreAddonDetails extends StoreAddon {
   documentation: boolean;
   full_access: boolean;
   hassio_api: boolean;
-  hassio_role: string;
+  hassio_role: AddonRole;
   homeassistant_api: boolean;
   host_network: boolean;
   host_pid: boolean;

src/data/supervisor/supervisor.ts

@@ -60,9 +60,7 @@ export interface SupervisorEvent {
   [key: string]: any;
 }
 
-export type SupervisorKeys =
-  | FlattenObjectKeys<TranslationDict["supervisor"]>
-  | `${keyof TranslationDict["supervisor"]}.${string}`;
+export type SupervisorKeys = FlattenObjectKeys<TranslationDict["supervisor"]>;
 
 export interface Supervisor {
   host: HassioHostInfo;

src/data/trace.ts

@@ -16,6 +16,7 @@ interface BaseTraceStep {
 export interface TriggerTraceStep extends BaseTraceStep {
   changed_variables: {
     trigger: {
+      alias?: string;
       description: string;
       [key: string]: unknown;
     };

src/data/trigger.ts

@@ -1,19 +1,35 @@
-import type { Trigger } from "./automation";
+import {
+  mdiAvTimer,
+  mdiCalendar,
+  mdiClockOutline,
+  mdiCodeBraces,
+  mdiDevices,
+  mdiGestureDoubleTap,
+  mdiHomeAssistant,
+  mdiMapMarker,
+  mdiMapMarkerRadius,
+  mdiNfcVariant,
+  mdiNumeric,
+  mdiStateMachine,
+  mdiSwapHorizontal,
+  mdiWeatherSunny,
+  mdiWebhook,
+} from "@mdi/js";
 
-export const TRIGGER_TYPES: Trigger["platform"][] = [
-  "calendar",
-  "device",
-  "event",
-  "state",
-  "geo_location",
-  "homeassistant",
-  "mqtt",
-  "numeric_state",
-  "sun",
-  "tag",
-  "template",
-  "time",
-  "time_pattern",
-  "webhook",
-  "zone",
-];
+export const TRIGGER_TYPES = {
+  calendar: mdiCalendar,
+  device: mdiDevices,
+  event: mdiGestureDoubleTap,
+  state: mdiStateMachine,
+  geo_location: mdiMapMarker,
+  homeassistant: mdiHomeAssistant,
+  mqtt: mdiSwapHorizontal,
+  numeric_state: mdiNumeric,
+  sun: mdiWeatherSunny,
+  tag: mdiNfcVariant,
+  template: mdiCodeBraces,
+  time: mdiClockOutline,
+  time_pattern: mdiAvTimer,
+  webhook: mdiWebhook,
+  zone: mdiMapMarkerRadius,
+};

src/data/zha.ts

@@ -128,6 +128,54 @@ export interface ZHAConfiguration {
   schemas: Record<string, HaFormSchema[]>;
 }
 
+export interface ZHANetworkBackupNodeInfo {
+  nwk: string;
+  ieee: string;
+  logical_type: "coordinator" | "router" | "end_device";
+}
+
+export interface ZHANetworkBackupKey {
+  key: string;
+  tx_counter: number;
+  rx_counter: number;
+  seq: number;
+  partner_ieee: string;
+}
+
+export interface ZHANetworkBackupNetworkInfo {
+  extended_pan_id: string;
+  pan_id: string;
+  nwk_update_id: number;
+  nwk_manager_id: string;
+  channel: number;
+  channel_mask: number[];
+  security_level: number;
+  network_key: ZHANetworkBackupKey;
+  tc_link_key: ZHANetworkBackupKey;
+  key_table: ZHANetworkBackupKey[];
+  children: string[];
+  nwk_addresses: Record<string, string>;
+  stack_specific?: Record<string, any>;
+  metadata: Record<string, any>;
+  source: string;
+}
+
+export interface ZHANetworkBackup {
+  backup_time: string;
+  network_info: ZHANetworkBackupNetworkInfo;
+  node_info: ZHANetworkBackupNodeInfo;
+}
+
+export interface ZHANetworkSettings {
+  settings: ZHANetworkBackup;
+  radio_type: "ezsp" | "znp" | "deconz" | "zigate" | "xbee";
+}
+
+export interface ZHANetworkBackupAndMetadata {
+  backup: ZHANetworkBackup;
+  is_complete: boolean;
+}
+
 export interface ZHAGroupMember {
   ieee: string;
   endpoint_id: string;
@@ -349,6 +397,38 @@ export const updateZHAConfiguration = (
     data: data,
   });
 
+export const fetchZHANetworkSettings = (
+  hass: HomeAssistant
+): Promise<ZHANetworkSettings> =>
+  hass.callWS({
+    type: "zha/network/settings",
+  });
+
+export const createZHANetworkBackup = (
+  hass: HomeAssistant
+): Promise<ZHANetworkBackupAndMetadata> =>
+  hass.callWS({
+    type: "zha/network/backups/create",
+  });
+
+export const restoreZHANetworkBackup = (
+  hass: HomeAssistant,
+  backup: ZHANetworkBackup,
+  ezspForceWriteEUI64 = false
+): Promise<void> =>
+  hass.callWS({
+    type: "zha/network/backups/restore",
+    backup: backup,
+    ezsp_force_write_eui64: ezspForceWriteEUI64,
+  });
+
+export const listZHANetworkBackups = (
+  hass: HomeAssistant
+): Promise<ZHANetworkBackup[]> =>
+  hass.callWS({
+    type: "zha/network/backups/list",
+  });
+
 export const INITIALIZED = "INITIALIZED";
 export const INTERVIEW_COMPLETE = "INTERVIEW_COMPLETE";
 export const CONFIGURED = "CONFIGURED";

src/dialogs/generic/dialog-box.ts

@@ -73,6 +73,7 @@ class DialogBox extends LitElement {
                 <ha-textfield
                   dialogInitialFocus
                   value=${ifDefined(this._params.defaultValue)}
+                  .placeholder=${ifDefined(this._params.placeholder)}
                   .label=${this._params.inputLabel
                     ? this._params.inputLabel
                     : ""}
@@ -158,6 +159,14 @@ class DialogBox extends LitElement {
         /* Place above other dialogs */
         --dialog-z-index: 104;
       }
+      @media all and (min-width: 600px) {
+        ha-dialog {
+          --mdc-dialog-min-width: 400px;
+        }
+      }
+      ha-textfield {
+        width: 100%;
+      }
     `;
   }
 }

src/dialogs/generic/show-dialog-box.ts

@@ -22,6 +22,7 @@ export interface PromptDialogParams extends BaseDialogBoxParams {
   inputLabel?: string;
   inputType?: string;
   defaultValue?: string;
+  placeholder?: string;
   confirm?: (out?: string) => void;
 }
 

src/dialogs/more-info/const.ts

@@ -0,0 +1,89 @@
+import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { CONTINUOUS_DOMAINS } from "../../data/logbook";
+import { HomeAssistant } from "../../types";
+
+export const DOMAINS_NO_INFO = ["camera", "configurator"];
+/**
+ * Entity domains that should be editable *if* they have an id present;
+ * {@see shouldShowEditIcon}.
+ * */
+export const EDITABLE_DOMAINS_WITH_ID = ["scene", "automation"];
+/**
+ * Entity Domains that should always be editable; {@see shouldShowEditIcon}.
+ * */
+export const EDITABLE_DOMAINS = ["script"];
+
+/** Domains with separate more info dialog. */
+export const DOMAINS_WITH_MORE_INFO = [
+  "alarm_control_panel",
+  "automation",
+  "camera",
+  "climate",
+  "configurator",
+  "counter",
+  "cover",
+  "fan",
+  "group",
+  "humidifier",
+  "input_datetime",
+  "light",
+  "lock",
+  "media_player",
+  "person",
+  "remote",
+  "script",
+  "scene",
+  "sun",
+  "timer",
+  "update",
+  "vacuum",
+  "water_heater",
+  "weather",
+];
+
+/** Domains that do not show the default more info dialog content (e.g. the attribute section)
+ *  and do not have a separate more info (so not in DOMAINS_WITH_MORE_INFO). */
+export const DOMAINS_HIDE_DEFAULT_MORE_INFO = [
+  "input_number",
+  "input_select",
+  "input_text",
+  "number",
+  "scene",
+  "update",
+  "select",
+];
+
+/** Domains that should have the history hidden in the more info dialog. */
+export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator"];
+
+export const computeShowHistoryComponent = (
+  hass: HomeAssistant,
+  entityId: string
+) =>
+  isComponentLoaded(hass, "history") &&
+  !DOMAINS_MORE_INFO_NO_HISTORY.includes(computeDomain(entityId));
+
+export const computeShowLogBookComponent = (
+  hass: HomeAssistant,
+  entityId: string
+): boolean => {
+  if (!isComponentLoaded(hass, "logbook")) {
+    return false;
+  }
+
+  const stateObj = hass.states[entityId];
+  if (!stateObj || stateObj.attributes.unit_of_measurement) {
+    return false;
+  }
+
+  const domain = computeDomain(entityId);
+  if (
+    CONTINUOUS_DOMAINS.includes(domain) ||
+    DOMAINS_MORE_INFO_NO_HISTORY.includes(domain)
+  ) {
+    return false;
+  }
+
+  return true;
+};

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

@@ -60,7 +60,7 @@ class MoreInfoInputDatetime extends LitElement {
     ev.stopPropagation();
   }
 
-  private _timeChanged(ev): void {
+  private _timeChanged(ev: CustomEvent<{ value: string }>): void {
     setInputDateTimeValue(
       this.hass!,
       this.stateObj!.entity_id,
@@ -69,10 +69,9 @@ class MoreInfoInputDatetime extends LitElement {
         ? this.stateObj!.state.split(" ")[0]
         : undefined
     );
-    ev.target.blur();
   }
 
-  private _dateChanged(ev): void {
+  private _dateChanged(ev: CustomEvent<{ value: string }>): void {
     setInputDateTimeValue(
       this.hass!,
       this.stateObj!.entity_id,
@@ -81,8 +80,6 @@ class MoreInfoInputDatetime extends LitElement {
         : undefined,
       ev.detail.value
     );
-
-    ev.target.blur();
   }
 
   static get styles(): CSSResultGroup {

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

@@ -579,7 +579,7 @@ class MoreInfoLight extends LitElement {
 
       .color_temp {
         --ha-slider-background: -webkit-linear-gradient(
-          right,
+          var(--float-end),
           rgb(255, 160, 0) 0%,
           white 50%,
           rgb(166, 209, 255) 100%

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

@@ -257,8 +257,8 @@ class MoreInfoUpdate extends LitElement {
         justify-content: center;
       }
       mwc-linear-progress {
-        margin-bottom: -10px;
-        margin-top: -10px;
+        margin-bottom: -8px;
+        margin-top: 4px;
       }
     `;
   }

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

@@ -1,15 +1,11 @@
+import type { HassEntity } from "home-assistant-js-websocket";
 import "@material/mwc-button";
 import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
-import { mdiClose, mdiCog, mdiPencil } from "@mdi/js";
-import { css, html, LitElement } from "lit";
+import { mdiClose, mdiPencil } from "@mdi/js";
+import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
-import { isComponentLoaded } from "../../common/config/is_component_loaded";
-import {
-  DOMAINS_MORE_INFO_NO_HISTORY,
-  DOMAINS_WITH_MORE_INFO,
-} from "../../common/const";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
@@ -17,34 +13,30 @@ import { navigate } from "../../common/navigate";
 import "../../components/ha-dialog";
 import "../../components/ha-header-bar";
 import "../../components/ha-icon-button";
-import { removeEntityRegistryEntry } from "../../data/entity_registry";
-import { CONTINUOUS_DOMAINS } from "../../data/logbook";
-import { showEntityEditorDialog } from "../../panels/config/entities/show-dialog-entity-editor";
+import "../../components/ha-related-items";
 import { haStyleDialog } from "../../resources/styles";
 import "../../state-summary/state-card-content";
 import { HomeAssistant } from "../../types";
-import { showConfirmationDialog } from "../generic/show-dialog-box";
-import { replaceDialog } from "../make-dialog-manager";
+import {
+  EDITABLE_DOMAINS_WITH_ID,
+  EDITABLE_DOMAINS,
+  DOMAINS_WITH_MORE_INFO,
+  computeShowHistoryComponent,
+  computeShowLogBookComponent,
+} from "./const";
 import "./controls/more-info-default";
-import "./ha-more-info-history";
-import "./ha-more-info-logbook";
+import "./ha-more-info-info";
+import "./ha-more-info-settings";
+import "./ha-more-info-history-and-logbook";
 import "./more-info-content";
 
-const DOMAINS_NO_INFO = ["camera", "configurator"];
-/**
- * Entity domains that should be editable *if* they have an id present;
- * {@see shouldShowEditIcon}.
- * */
-const EDITABLE_DOMAINS_WITH_ID = ["scene", "automation"];
-/**
- * Entity Domains that should always be editable; {@see shouldShowEditIcon}.
- * */
-const EDITABLE_DOMAINS = ["script"];
-
 export interface MoreInfoDialogParams {
   entityId: string | null;
+  tab?: Tab;
 }
 
+type Tab = "info" | "history" | "settings" | "related";
+
 @customElement("ha-more-info-dialog")
 export class MoreInfoDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -53,7 +45,7 @@ export class MoreInfoDialog extends LitElement {
 
   @state() private _entityId?: string | null;
 
-  @state() private _currTabIndex = 0;
+  @state() private _currTab: Tab = "info";
 
   public showDialog(params: MoreInfoDialogParams) {
     this._entityId = params.entityId;
@@ -61,17 +53,20 @@ export class MoreInfoDialog extends LitElement {
       this.closeDialog();
       return;
     }
+    this._currTab = params.tab || "info";
     this.large = false;
   }
 
   public closeDialog() {
     this._entityId = undefined;
-    this._currTabIndex = 0;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  protected shouldShowEditIcon(domain, stateObj): boolean {
-    if (__DEMO__) {
+  protected shouldShowEditIcon(
+    domain: string,
+    stateObj: HassEntity | undefined
+  ): boolean {
+    if (__DEMO__ || !stateObj) {
       return false;
     }
     if (EDITABLE_DOMAINS_WITH_ID.includes(domain) && stateObj.attributes.id) {
@@ -94,12 +89,9 @@ export class MoreInfoDialog extends LitElement {
     const entityId = this._entityId;
     const stateObj = this.hass.states[entityId];
 
-    if (!stateObj) {
-      return html``;
-    }
-
     const domain = computeDomain(entityId);
-    const name = computeStateName(stateObj);
+    const name = stateObj ? computeStateName(stateObj) : entityId;
+    const tabs = this._getTabs(entityId, this.hass.user!.is_admin);
 
     return html`
       <ha-dialog
@@ -127,18 +119,6 @@ export class MoreInfoDialog extends LitElement {
             >
               ${name}
             </div>
-            ${this.hass.user!.is_admin
-              ? html`
-                  <ha-icon-button
-                    slot="actionItems"
-                    .label=${this.hass.localize(
-                      "ui.dialogs.more_info_control.settings"
-                    )}
-                    .path=${mdiCog}
-                    @click=${this._gotoSettings}
-                  ></ha-icon-button>
-                `
-              : ""}
             ${this.shouldShowEditIcon(domain, stateObj)
               ? html`
                   <ha-icon-button
@@ -152,92 +132,57 @@ export class MoreInfoDialog extends LitElement {
                 `
               : ""}
           </ha-header-bar>
-          ${DOMAINS_WITH_MORE_INFO.includes(domain) &&
-          (this._computeShowHistoryComponent(entityId) ||
-            this._computeShowLogBookComponent(entityId))
+
+          ${tabs.length > 1
             ? html`
                 <mwc-tab-bar
-                  .activeIndex=${this._currTabIndex}
+                  .activeIndex=${tabs.indexOf(this._currTab)}
                   @MDCTabBar:activated=${this._handleTabChanged}
                 >
-                  <mwc-tab
-                    .label=${this.hass.localize(
-                      "ui.dialogs.more_info_control.details"
-                    )}
-                    dialogInitialFocus
-                  ></mwc-tab>
-                  <mwc-tab
-                    .label=${this.hass.localize(
-                      "ui.dialogs.more_info_control.history"
-                    )}
-                  ></mwc-tab>
+                  ${tabs.map(
+                    (tab) => html`
+                      <mwc-tab
+                        .label=${this.hass.localize(
+                          `ui.dialogs.more_info_control.${tab}`
+                        )}
+                      ></mwc-tab>
+                    `
+                  )}
                 </mwc-tab-bar>
               `
             : ""}
         </div>
+
         <div class="content" tabindex="-1" dialogInitialFocus>
           ${cache(
-            this._currTabIndex === 0
+            this._currTab === "info"
               ? html`
-                  ${DOMAINS_NO_INFO.includes(domain)
-                    ? ""
-                    : html`
-                        <state-card-content
-                          in-dialog
-                          .stateObj=${stateObj}
-                          .hass=${this.hass}
-                        ></state-card-content>
-                      `}
-                  ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
-                  !this._computeShowHistoryComponent(entityId)
-                    ? ""
-                    : html`<ha-more-info-history
-                        .hass=${this.hass}
-                        .entityId=${this._entityId}
-                      ></ha-more-info-history>`}
-                  ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
-                  !this._computeShowLogBookComponent(entityId)
-                    ? ""
-                    : html`<ha-more-info-logbook
-                        .hass=${this.hass}
-                        .entityId=${this._entityId}
-                      ></ha-more-info-logbook>`}
-                  <more-info-content
-                    .stateObj=${stateObj}
+                  <ha-more-info-info
                     .hass=${this.hass}
-                  ></more-info-content>
-                  ${stateObj.attributes.restored
-                    ? html`
-                        <p>
-                          ${this.hass.localize(
-                            "ui.dialogs.more_info_control.restored.not_provided"
-                          )}
-                        </p>
-                        <p>
-                          ${this.hass.localize(
-                            "ui.dialogs.more_info_control.restored.remove_intro"
-                          )}
-                        </p>
-                        <mwc-button
-                          class="warning"
-                          @click=${this._removeEntity}
-                        >
-                          ${this.hass.localize(
-                            "ui.dialogs.more_info_control.restored.remove_action"
-                          )}
-                        </mwc-button>
-                      `
-                    : ""}
+                    .entityId=${this._entityId}
+                  ></ha-more-info-info>
+                `
+              : this._currTab === "history"
+              ? html`
+                  <ha-more-info-history-and-logbook
+                    .hass=${this.hass}
+                    .entityId=${this._entityId}
+                  ></ha-more-info-history-and-logbook>
+                `
+              : this._currTab === "settings"
+              ? html`
+                  <ha-more-info-settings
+                    .hass=${this.hass}
+                    .entityId=${this._entityId}
+                  ></ha-more-info-settings>
                 `
               : html`
-                  <ha-more-info-history
+                  <ha-related-items
+                    class="content"
                     .hass=${this.hass}
-                    .entityId=${this._entityId}
-                  ></ha-more-info-history>
-                  <ha-more-info-logbook
-                    .hass=${this.hass}
-                    .entityId=${this._entityId}
-                  ></ha-more-info-logbook>
+                    .itemId=${entityId}
+                    itemType="entity"
+                  ></ha-related-items>
                 `
           )}
         </div>
@@ -245,63 +190,55 @@ export class MoreInfoDialog extends LitElement {
     `;
   }
 
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this.addEventListener("close-dialog", () => this.closeDialog());
+  }
+
+  protected willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+    if (!this._entityId) {
+      return;
+    }
+    const tabs = this._getTabs(this._entityId, this.hass.user!.is_admin);
+    if (!tabs.includes(this._currTab)) {
+      this._currTab = tabs[0];
+    }
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    super.updated(changedProps);
+    if (changedProps.has("_currTab")) {
+      this.setAttribute("tab", this._currTab);
+    }
+  }
+
+  private _getTabs(entityId: string, isAdmin: boolean): Tab[] {
+    const domain = computeDomain(entityId);
+    const tabs: Tab[] = ["info"];
+
+    // Info and history are combined in info when there are no
+    // dedicated more-info controls. If not combined, add a history tab.
+    if (
+      DOMAINS_WITH_MORE_INFO.includes(domain) &&
+      (computeShowHistoryComponent(this.hass, entityId) ||
+        computeShowLogBookComponent(this.hass, entityId))
+    ) {
+      tabs.push("history");
+    }
+
+    if (isAdmin) {
+      tabs.push("settings");
+      tabs.push("related");
+    }
+
+    return tabs;
+  }
+
   private _enlarge() {
     this.large = !this.large;
   }
 
-  private _computeShowHistoryComponent(entityId) {
-    return (
-      isComponentLoaded(this.hass, "history") &&
-      !DOMAINS_MORE_INFO_NO_HISTORY.includes(computeDomain(entityId))
-    );
-  }
-
-  private _computeShowLogBookComponent(entityId): boolean {
-    if (!isComponentLoaded(this.hass, "logbook")) {
-      return false;
-    }
-
-    const stateObj = this.hass.states[entityId];
-    if (!stateObj || stateObj.attributes.unit_of_measurement) {
-      return false;
-    }
-
-    const domain = computeDomain(entityId);
-    if (
-      CONTINUOUS_DOMAINS.includes(domain) ||
-      DOMAINS_MORE_INFO_NO_HISTORY.includes(domain)
-    ) {
-      return false;
-    }
-
-    return true;
-  }
-
-  private _removeEntity() {
-    const entityId = this._entityId!;
-    showConfirmationDialog(this, {
-      title: this.hass.localize(
-        "ui.dialogs.more_info_control.restored.confirm_remove_title"
-      ),
-      text: this.hass.localize(
-        "ui.dialogs.more_info_control.restored.confirm_remove_text"
-      ),
-      confirmText: this.hass.localize("ui.common.remove"),
-      dismissText: this.hass.localize("ui.common.cancel"),
-      confirm: () => {
-        removeEntityRegistryEntry(this.hass, entityId);
-      },
-    });
-  }
-
-  private _gotoSettings() {
-    replaceDialog(this);
-    showEntityEditorDialog(this, {
-      entity_id: this._entityId!,
-    });
-    this.closeDialog();
-  }
-
   private _gotoEdit() {
     const stateObj = this.hass.states[this._entityId!];
     const domain = computeDomain(this._entityId!);
@@ -315,12 +252,14 @@ export class MoreInfoDialog extends LitElement {
   }
 
   private _handleTabChanged(ev: CustomEvent): void {
-    const newTab = ev.detail.index;
-    if (newTab === this._currTabIndex) {
+    const newTab = this._getTabs(this._entityId!, this.hass.user!.is_admin)[
+      ev.detail.index
+    ];
+    if (newTab === this._currTab) {
       return;
     }
 
-    this._currTabIndex = ev.detail.index;
+    this._currTab = newTab;
   }
 
   static get styles() {
@@ -330,6 +269,7 @@ export class MoreInfoDialog extends LitElement {
         ha-dialog {
           --dialog-surface-position: static;
           --dialog-content-position: static;
+          --vertial-align-dialog: flex-start;
         }
 
         ha-header-bar {
@@ -354,17 +294,16 @@ export class MoreInfoDialog extends LitElement {
             var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
         }
 
-        @media all and (min-width: 451px) and (min-height: 501px) {
+        :host([tab="settings"]) ha-dialog {
+          --dialog-content-padding: 0px;
+        }
+
+        @media all and (min-width: 600px) and (min-height: 501px) {
           ha-dialog {
-            --mdc-dialog-max-width: 90vw;
-          }
-
-          .content {
-            width: 352px;
-          }
-
-          ha-header-bar {
-            width: 400px;
+            --mdc-dialog-min-width: 560px;
+            --mdc-dialog-max-width: 560px;
+            --dialog-surface-margin-top: 40px;
+            --mdc-dialog-max-height: calc(100% - 72px);
           }
 
           .main-title {
@@ -373,31 +312,16 @@ export class MoreInfoDialog extends LitElement {
             cursor: default;
           }
 
-          ha-dialog[data-domain="camera"] .content,
-          ha-dialog[data-domain="camera"] ha-header-bar {
-            width: auto;
-          }
-
-          :host([large]) .content {
-            width: calc(90vw - 48px);
-          }
-
-          :host([large]) ha-dialog[data-domain="camera"] .content,
-          :host([large]) ha-header-bar {
-            width: 90vw;
+          :host([large]) ha-dialog,
+          ha-dialog[data-domain="camera"] {
+            --mdc-dialog-min-width: 90vw;
+            --mdc-dialog-max-width: 90vw;
           }
         }
 
         ha-dialog[data-domain="camera"] {
           --dialog-content-padding: 0;
         }
-
-        state-card-content,
-        ha-more-info-history,
-        ha-more-info-logbook:not(:last-child) {
-          display: block;
-          margin-bottom: 16px;
-        }
       `,
     ];
   }

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

@@ -0,0 +1,43 @@
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators";
+import { HomeAssistant } from "../../types";
+import {
+  computeShowHistoryComponent,
+  computeShowLogBookComponent,
+} from "./const";
+import "./ha-more-info-history";
+import "./ha-more-info-logbook";
+
+@customElement("ha-more-info-history-and-logbook")
+export class MoreInfoHistoryAndLogbook extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public entityId!: string;
+
+  protected render() {
+    return html`
+      ${computeShowHistoryComponent(this.hass, this.entityId)
+        ? html`
+            <ha-more-info-history
+              .hass=${this.hass}
+              .entityId=${this.entityId}
+            ></ha-more-info-history>
+          `
+        : ""}
+      ${computeShowLogBookComponent(this.hass, this.entityId)
+        ? html`
+            <ha-more-info-logbook
+              .hass=${this.hass}
+              .entityId=${this.entityId}
+            ></ha-more-info-logbook>
+          `
+        : ""}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-history-and-logbook": MoreInfoHistoryAndLogbook;
+  }
+}

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

@@ -104,7 +104,7 @@ export class MoreInfoHistory extends LitElement {
   }
 
   private _close(): void {
-    setTimeout(() => fireEvent(this, "closed"), 500);
+    setTimeout(() => fireEvent(this, "close-dialog"), 500);
   }
 
   static get styles() {

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

@@ -0,0 +1,107 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { subscribeOne } from "../../common/util/subscribe-one";
+import {
+  EntityRegistryEntry,
+  subscribeEntityRegistry,
+} from "../../data/entity_registry";
+import type { HomeAssistant } from "../../types";
+import {
+  computeShowHistoryComponent,
+  computeShowLogBookComponent,
+  DOMAINS_NO_INFO,
+  DOMAINS_WITH_MORE_INFO,
+} from "./const";
+import "./ha-more-info-history";
+import "./ha-more-info-logbook";
+
+@customElement("ha-more-info-info")
+export class MoreInfoInfo extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public entityId!: string;
+
+  @state() private _entityEntry?: EntityRegistryEntry;
+
+  protected render() {
+    const entityId = this.entityId;
+    const stateObj = this.hass.states[entityId];
+    const domain = computeDomain(entityId);
+
+    return html`
+      ${stateObj.attributes.restored && this._entityEntry
+        ? html`<ha-alert alert-type="warning">
+            ${this.hass.localize(
+              "ui.dialogs.more_info_control.restored.no_longer_provided",
+              {
+                integration: this._entityEntry.platform,
+              }
+            )}
+          </ha-alert>`
+        : ""}
+      ${DOMAINS_NO_INFO.includes(domain)
+        ? ""
+        : html`
+            <state-card-content
+              in-dialog
+              .stateObj=${stateObj}
+              .hass=${this.hass}
+            ></state-card-content>
+          `}
+      ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
+      !computeShowHistoryComponent(this.hass, entityId)
+        ? ""
+        : html`<ha-more-info-history
+            .hass=${this.hass}
+            .entityId=${this.entityId}
+          ></ha-more-info-history>`}
+      ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
+      !computeShowLogBookComponent(this.hass, entityId)
+        ? ""
+        : html`<ha-more-info-logbook
+            .hass=${this.hass}
+            .entityId=${this.entityId}
+          ></ha-more-info-logbook>`}
+      <more-info-content
+        .stateObj=${stateObj}
+        .hass=${this.hass}
+      ></more-info-content>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    subscribeOne(this.hass.connection, subscribeEntityRegistry).then(
+      (entries) => {
+        this._entityEntry = entries.find(
+          (entry) => entry.entity_id === this.entityId
+        );
+      }
+    );
+  }
+
+  static get styles() {
+    return css`
+      state-card-content,
+      ha-more-info-history,
+      ha-more-info-logbook:not(:last-child) {
+        display: block;
+        margin-bottom: 16px;
+      }
+
+      ha-alert {
+        display: block;
+        margin: calc(-1 * var(--dialog-content-padding, 24px))
+          calc(-1 * var(--dialog-content-padding, 24px)) 16px
+          calc(-1 * var(--dialog-content-padding, 24px));
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-info": MoreInfoInfo;
+  }
+}

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

@@ -61,7 +61,7 @@ export class MoreInfoLogbook extends LitElement {
   }
 
   private _close(): void {
-    setTimeout(() => fireEvent(this, "closed"), 500);
+    setTimeout(() => fireEvent(this, "close-dialog"), 500);
   }
 
   static get styles() {

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

@@ -0,0 +1,117 @@
+import "@material/mwc-tab";
+import "@material/mwc-tab-bar";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { dynamicElement } from "../../common/dom/dynamic-element-directive";
+import {
+  EntityRegistryEntry,
+  ExtEntityRegistryEntry,
+  getExtendedEntityRegistryEntry,
+} from "../../data/entity_registry";
+import { PLATFORMS_WITH_SETTINGS_TAB } from "../../panels/config/entities/const";
+import type { HomeAssistant } from "../../types";
+import { documentationUrl } from "../../util/documentation-url";
+import "../../panels/config/entities/entity-registry-settings";
+
+@customElement("ha-more-info-settings")
+export class HaMoreInfoSettings extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public entityId!: string;
+
+  @state() private _entry?: EntityRegistryEntry | ExtEntityRegistryEntry | null;
+
+  @state() private _settingsElementTag?: string;
+
+  protected render() {
+    // loading.
+    if (this._entry === undefined) {
+      return html``;
+    }
+
+    // No unique ID
+    if (this._entry === null) {
+      return html`
+        <div class="content">
+          ${this.hass.localize(
+            "ui.dialogs.entity_registry.no_unique_id",
+            "entity_id",
+            this.entityId,
+            "faq_link",
+            html`<a
+              href=${documentationUrl(this.hass, "/faq/unique_id")}
+              target="_blank"
+              rel="noreferrer"
+              >${this.hass.localize("ui.dialogs.entity_registry.faq")}</a
+            >`
+          )}
+        </div>
+      `;
+    }
+
+    if (!this._settingsElementTag) {
+      return html``;
+    }
+
+    return html`
+      ${dynamicElement(this._settingsElementTag, {
+        hass: this.hass,
+        entry: this._entry,
+        entityId: this.entityId,
+      })}
+    `;
+  }
+
+  protected willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+    if (changedProps.has("entityId")) {
+      this._entry = undefined;
+      if (this.entityId) {
+        this._getEntityReg();
+      }
+    }
+  }
+
+  private async _getEntityReg() {
+    try {
+      this._entry = await getExtendedEntityRegistryEntry(
+        this.hass,
+        this.entityId
+      );
+      this._loadPlatformSettingTabs();
+    } catch {
+      this._entry = null;
+    }
+  }
+
+  private async _loadPlatformSettingTabs(): Promise<void> {
+    if (!this._entry) {
+      return;
+    }
+    if (
+      !Object.keys(PLATFORMS_WITH_SETTINGS_TAB).includes(this._entry.platform)
+    ) {
+      this._settingsElementTag = "entity-registry-settings";
+      return;
+    }
+    const tag = PLATFORMS_WITH_SETTINGS_TAB[this._entry.platform];
+    await import(`../../panels/config/entities/editor-tabs/settings/${tag}`);
+    this._settingsElementTag = tag;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      css`
+        .content {
+          padding: 24px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-more-info-settings": HaMoreInfoSettings;
+  }
+}

src/dialogs/more-info/show-ha-more-info-dialog.ts

@@ -0,0 +1,10 @@
+import { fireEvent } from "../../common/dom/fire_event";
+import type { MoreInfoDialogParams } from "./ha-more-info-dialog";
+
+export const showMoreInfoDialog = (
+  element: HTMLElement,
+  params: MoreInfoDialogParams
+) => fireEvent(element, "hass-more-info", params);
+
+export const hideMoreInfoDialog = (element: HTMLElement) =>
+  fireEvent(element, "hass-more-info", { entityId: null });

src/dialogs/more-info/state_more_info_control.ts

@@ -1,8 +1,8 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
-  DOMAINS_HIDE_DEFAULT_MORE_INFO,
   DOMAINS_WITH_MORE_INFO,
-} from "../../common/const";
+  DOMAINS_HIDE_DEFAULT_MORE_INFO,
+} from "./const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 
 const LAZY_LOADED_MORE_INFO_CONTROL = {

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -1,6 +1,5 @@
 import "@lit-labs/virtualizer";
 import "@material/mwc-list/mwc-list";
-import "@material/mwc-list/mwc-list-item";
 import type { ListItem } from "@material/mwc-list/mwc-list-item";
 import {
   mdiClose,
@@ -34,6 +33,7 @@ import "../../components/ha-circular-progress";
 import "../../components/ha-header-bar";
 import "../../components/ha-icon-button";
 import "../../components/ha-textfield";
+import "../../components/ha-list-item";
 import { fetchHassioAddonsInfo } from "../../data/hassio/addon";
 import { domainToName } from "../../data/integration";
 import { getPanelNameTranslationKey } from "../../data/panel";
@@ -282,7 +282,7 @@ export class QuickBar extends LitElement {
 
   private _renderEntityItem(item: EntityItem, index?: number) {
     return html`
-      <mwc-list-item
+      <ha-list-item
         .twoline=${Boolean(item.altText)}
         .item=${item}
         index=${ifDefined(index)}
@@ -307,13 +307,13 @@ export class QuickBar extends LitElement {
               >
             `
           : null}
-      </mwc-list-item>
+      </ha-list-item>
     `;
   }
 
   private _renderCommandItem(item: CommandItem, index?: number) {
     return html`
-      <mwc-list-item
+      <ha-list-item
         .item=${item}
         index=${ifDefined(index)}
         class="command-item"
@@ -336,7 +336,7 @@ export class QuickBar extends LitElement {
         </span>
 
         <span class="command-text">${item.primaryText}</span>
-      </mwc-list-item>
+      </ha-list-item>
     `;
   }
 
@@ -363,7 +363,7 @@ export class QuickBar extends LitElement {
   }
 
   private _getItemAtIndex(index: number): ListItem | null {
-    return this.renderRoot.querySelector(`mwc-list-item[index="${index}"]`);
+    return this.renderRoot.querySelector(`ha-list-item[index="${index}"]`);
   }
 
   private _addSpinnerToCommandItem(index: number): void {
@@ -457,7 +457,7 @@ export class QuickBar extends LitElement {
   }
 
   private _handleItemClick(ev) {
-    const listItem = ev.target.closest("mwc-list-item");
+    const listItem = ev.target.closest("ha-list-item");
     this.processItemAndCloseDialog(
       listItem.item,
       Number(listItem.getAttribute("index"))
@@ -771,11 +771,6 @@ export class QuickBar extends LitElement {
           }
         }
 
-        ha-icon.entity,
-        ha-svg-icon.entity {
-          margin-left: 20px;
-        }
-
         ha-svg-icon.prefix {
           color: var(--primary-text-color);
         }
@@ -809,11 +804,12 @@ export class QuickBar extends LitElement {
           direction: var(--direction);
         }
 
-        mwc-list-item {
+        ha-list-item {
           width: 100%;
+          --mdc-list-item-graphic-margin: 20px;
         }
 
-        mwc-list-item.command-item {
+        ha-list-item.command-item {
           text-transform: capitalize;
         }
 

src/panels/config/application_credentials/dialog-add-application-credential.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-combo-box";

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

@@ -42,11 +42,11 @@ import { SceneEntity } from "../../../data/scene";
 import { ScriptEntity } from "../../../data/script";
 import { findRelated, RelatedResult } from "../../../data/search";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
 import "../../logbook/ha-logbook";
-import { showEntityEditorDialog } from "../entities/show-dialog-entity-editor";
 import { configSections } from "../ha-panel-config";
 import {
   loadAreaRegistryDetailDialog,
@@ -620,9 +620,8 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
 
   private _openEntity(ev) {
     const entry: EntityRegistryEntry = (ev.currentTarget as any).entity;
-    showEntityEditorDialog(this, {
-      entity_id: entry.entity_id,
-      entry,
+    showMoreInfoDialog(this, {
+      entityId: entry.entity_id,
     });
   }
 

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

@@ -1,6 +1,17 @@
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
-import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
+import {
+  mdiArrowDown,
+  mdiArrowUp,
+  mdiCheck,
+  mdiContentDuplicate,
+  mdiDelete,
+  mdiDotsVertical,
+  mdiPlay,
+  mdiPlayCircleOutline,
+  mdiRenameBox,
+  mdiStopCircleOutline,
+} from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -20,6 +31,7 @@ import { callExecuteScript } from "../../../../data/service";
 import {
   showAlertDialog,
   showConfirmationDialog,
+  showPromptDialog,
 } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
@@ -39,6 +51,7 @@ import "./types/ha-automation-action-stop";
 import "./types/ha-automation-action-wait_for_trigger";
 import "./types/ha-automation-action-wait_template";
 import { ACTION_TYPES } from "../../../../data/action";
+import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 
 const getType = (action: Action | undefined) => {
   if (!action) {
@@ -50,7 +63,7 @@ const getType = (action: Action | undefined) => {
   if (["and", "or", "not"].some((key) => key in action)) {
     return "condition";
   }
-  return ACTION_TYPES.find((option) => option in action);
+  return Object.keys(ACTION_TYPES).find((option) => option in action);
 };
 
 declare global {
@@ -143,10 +156,15 @@ export default class HaAutomationActionRow extends LitElement {
               )}
             </div>`
           : ""}
-        <ha-expansion-panel
-          leftChevron
-          .header=${describeAction(this.hass, this.action)}
-        >
+        <ha-expansion-panel leftChevron>
+          <div slot="header">
+            <ha-svg-icon
+              class="action-icon"
+              .path=${ACTION_TYPES[type!]}
+            ></ha-svg-icon>
+            ${capitalizeFirstLetter(describeAction(this.hass, this.action))}
+          </div>
+
           ${this.index !== 0
             ? html`
                 <ha-icon-button
@@ -183,26 +201,56 @@ export default class HaAutomationActionRow extends LitElement {
               .label=${this.hass.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
-            <mwc-list-item>
+            <mwc-list-item graphic="icon">
               ${this.hass.localize(
-                "ui.panel.config.automation.editor.actions.run_action"
+                "ui.panel.config.automation.editor.actions.run"
               )}
+              <ha-svg-icon slot="graphic" .path=${mdiPlay}></ha-svg-icon>
             </mwc-list-item>
-            <mwc-list-item .disabled=${!this._uiModeAvailable}>
-              ${yamlMode
-                ? this.hass.localize(
-                    "ui.panel.config.automation.editor.edit_ui"
-                  )
-                : this.hass.localize(
-                    "ui.panel.config.automation.editor.edit_yaml"
-                  )}
+
+            <mwc-list-item graphic="icon">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.rename"
+              )}
+              <ha-svg-icon slot="graphic" .path=${mdiRenameBox}></ha-svg-icon>
             </mwc-list-item>
-            <mwc-list-item>
+            <mwc-list-item graphic="icon">
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.actions.duplicate"
               )}
+              <ha-svg-icon
+                slot="graphic"
+                .path=${mdiContentDuplicate}
+              ></ha-svg-icon>
             </mwc-list-item>
-            <mwc-list-item>
+
+            <li divider role="separator"></li>
+
+            <mwc-list-item .disabled=${!this._uiModeAvailable} graphic="icon">
+              ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
+              ${!yamlMode
+                ? html`<ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiCheck}
+                  ></ha-svg-icon>`
+                : ``}
+            </mwc-list-item>
+
+            <mwc-list-item .disabled=${!this._uiModeAvailable} graphic="icon">
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.edit_yaml"
+              )}
+              ${yamlMode
+                ? html`<ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiCheck}
+                  ></ha-svg-icon>`
+                : ``}
+            </mwc-list-item>
+
+            <li divider role="separator"></li>
+
+            <mwc-list-item graphic="icon">
               ${this.action.enabled === false
                 ? this.hass.localize(
                     "ui.panel.config.automation.editor.actions.enable"
@@ -210,11 +258,22 @@ export default class HaAutomationActionRow extends LitElement {
                 : this.hass.localize(
                     "ui.panel.config.automation.editor.actions.disable"
                   )}
+              <ha-svg-icon
+                slot="graphic"
+                .path=${this.action.enabled === false
+                  ? mdiPlayCircleOutline
+                  : mdiStopCircleOutline}
+              ></ha-svg-icon>
             </mwc-list-item>
-            <mwc-list-item class="warning">
+            <mwc-list-item class="warning" graphic="icon">
               ${this.hass.localize(
                 "ui.panel.config.automation.editor.actions.delete"
               )}
+              <ha-svg-icon
+                class="warning"
+                slot="graphic"
+                .path=${mdiDelete}
+              ></ha-svg-icon>
             </mwc-list-item>
           </ha-button-menu>
           <div
@@ -254,11 +313,6 @@ export default class HaAutomationActionRow extends LitElement {
                         )}
                       `
                     : ""}
-                  <h2>
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.edit_yaml"
-                    )}
-                  </h2>
                   <ha-yaml-editor
                     .hass=${this.hass}
                     .defaultValue=${this.action}
@@ -300,21 +354,29 @@ export default class HaAutomationActionRow extends LitElement {
     fireEvent(this, "move-action", { direction: "down" });
   }
 
-  private _handleAction(ev: CustomEvent<ActionDetail>) {
+  private async _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
         this._runAction();
         break;
       case 1:
-        this._switchYamlMode();
+        await this._renameAction();
         break;
       case 2:
         fireEvent(this, "duplicate");
         break;
       case 3:
-        this._onDisable();
+        this._switchUiMode();
+        this.expand();
         break;
       case 4:
+        this._switchYamlMode();
+        this.expand();
+        break;
+      case 5:
+        this._onDisable();
+        break;
+      case 6:
         this._onDelete();
         break;
     }
@@ -384,9 +446,43 @@ export default class HaAutomationActionRow extends LitElement {
     fireEvent(this, "value-changed", { value: ev.detail.value });
   }
 
+  private _switchUiMode() {
+    this._warnings = undefined;
+    this._yamlMode = false;
+  }
+
   private _switchYamlMode() {
     this._warnings = undefined;
-    this._yamlMode = !this._yamlMode;
+    this._yamlMode = true;
+  }
+
+  private async _renameAction(): Promise<void> {
+    const alias = await showPromptDialog(this, {
+      title: this.hass.localize(
+        "ui.panel.config.automation.editor.actions.change_alias"
+      ),
+      inputLabel: this.hass.localize(
+        "ui.panel.config.automation.editor.actions.alias"
+      ),
+      inputType: "string",
+      placeholder: capitalizeFirstLetter(
+        describeAction(this.hass, this.action, undefined, true)
+      ),
+      defaultValue: this.action.alias,
+      confirmText: this.hass.localize("ui.common.submit"),
+    });
+    const value = { ...this.action };
+    if (!alias) {
+      delete value.alias;
+    } else {
+      value.alias = alias;
+    }
+    fireEvent(this, "value-changed", {
+      value,
+    });
+    if (this._yamlMode) {
+      this._yamlEditor?.setValue(value);
+    }
   }
 
   public expand() {
@@ -411,6 +507,17 @@ export default class HaAutomationActionRow extends LitElement {
           --expansion-panel-summary-padding: 0 0 0 8px;
           --expansion-panel-content-padding: 0;
         }
+        .action-icon {
+          display: none;
+        }
+        @media (min-width: 870px) {
+          .action-icon {
+            display: inline-block;
+            color: var(--primary-color);
+            opacity: 0.9;
+            margin-right: 8px;
+          }
+        }
         .card-content {
           padding: 16px;
         }
@@ -424,9 +531,6 @@ export default class HaAutomationActionRow extends LitElement {
         mwc-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }
-        .warning {
-          margin-bottom: 8px;
-        }
         .warning ul {
           margin: 4px 0;
         }

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

@@ -73,8 +73,10 @@ export default class HaAutomationAction extends LitElement {
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
         </mwc-button>
         ${this._processedTypes(this.hass.localize).map(
-          ([opt, label]) => html`
-            <mwc-list-item .value=${opt}>${label}</mwc-list-item>
+          ([opt, label, icon]) => html`
+            <mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
+              ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
+            ></mwc-list-item>
           `
         )}
       </ha-button-menu>
@@ -90,8 +92,11 @@ export default class HaAutomationAction extends LitElement {
       const row = this.shadowRoot!.querySelector<HaAutomationActionRow>(
         "ha-automation-action-row:last-of-type"
       )!;
-      row.expand();
-      row.focus();
+      row.updateComplete.then(() => {
+        row.expand();
+        row.scrollIntoView();
+        row.focus();
+      });
     }
   }
 
@@ -104,9 +109,7 @@ export default class HaAutomationAction extends LitElement {
   }
 
   private _addAction(ev: CustomEvent<ActionDetail>) {
-    const action = (ev.currentTarget as HaSelect).items[ev.detail.index]
-      .value as typeof ACTION_TYPES[number];
-
+    const action = (ev.currentTarget as HaSelect).items[ev.detail.index].value;
     const elClass = customElements.get(
       `ha-automation-action-${action}`
     ) as CustomElementConstructor & { defaultConfig: Action };
@@ -158,16 +161,19 @@ export default class HaAutomationAction extends LitElement {
   }
 
   private _processedTypes = memoizeOne(
-    (localize: LocalizeFunc): [string, string][] =>
-      ACTION_TYPES.map(
-        (action) =>
-          [
-            action,
-            localize(
-              `ui.panel.config.automation.editor.actions.type.${action}.label`
-            ),
-          ] as [string, string]
-      ).sort((a, b) => stringCompare(a[1], b[1]))
+    (localize: LocalizeFunc): [string, string, string][] =>
+      Object.entries(ACTION_TYPES)
+        .map(
+          ([action, icon]) =>
+            [
+              action,
+              localize(
+                `ui.panel.config.automation.editor.actions.type.${action}.label`
+              ),
+              icon,
+            ] as [string, string, string]
+        )
+        .sort((a, b) => stringCompare(a[1], b[1]))
   );
 
   static get styles(): CSSResultGroup {
@@ -175,6 +181,7 @@ export default class HaAutomationAction extends LitElement {
       ha-automation-action-row {
         display: block;
         margin-bottom: 16px;
+        scroll-margin-top: 48px;
       }
       ha-svg-icon {
         height: 20px;

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

@@ -1,6 +1,6 @@
 import { mdiDelete, mdiPlus } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { ensureArray } from "../../../../../common/ensure-array";
 import "../../../../../components/ha-icon-button";
@@ -17,8 +17,10 @@ export class HaChooseAction extends LitElement implements ActionElement {
 
   @property() public action!: ChooseAction;
 
+  @state() private _showDefault = false;
+
   public static get defaultConfig() {
-    return { choose: [{ conditions: [], sequence: [] }], default: [] };
+    return { choose: [{ conditions: [], sequence: [] }] };
   }
 
   protected render() {
@@ -78,19 +80,33 @@ export class HaChooseAction extends LitElement implements ActionElement {
       >
         <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
       </mwc-button>
-      <h2>
-        ${this.hass.localize(
-          "ui.panel.config.automation.editor.actions.type.choose.default"
-        )}:
-      </h2>
-      <ha-automation-action
-        .actions=${action.default || []}
-        @value-changed=${this._defaultChanged}
-        .hass=${this.hass}
-      ></ha-automation-action>
+      ${this._showDefault || action.default
+        ? html`
+            <h2>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.choose.default"
+              )}:
+            </h2>
+            <ha-automation-action
+              .actions=${action.default || []}
+              @value-changed=${this._defaultChanged}
+              .hass=${this.hass}
+            ></ha-automation-action>
+          `
+        : html` <div class="link-button-row">
+            <button class="link" @click=${this._addDefault}>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.actions.type.choose.add_default"
+              )}
+            </button>
+          </div>`}
     `;
   }
 
+  private _addDefault() {
+    this._showDefault = true;
+  }
+
   private _conditionChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const value = ev.detail.value as Condition[];
@@ -171,6 +187,9 @@ export class HaChooseAction extends LitElement implements ActionElement {
         ha-svg-icon {
           height: 20px;
         }
+        .link-button-row {
+          padding: 14px;
+        }
       `,
     ];
   }

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

@@ -34,8 +34,10 @@ export class HaConditionAction extends LitElement implements ActionElement {
         @selected=${this._typeChanged}
       >
         ${this._processedTypes(this.hass.localize).map(
-          ([opt, label]) => html`
-            <mwc-list-item .value=${opt}>${label}</mwc-list-item>
+          ([opt, label, icon]) => html`
+            <mwc-list-item .value=${opt} aria-label=${label} graphic="icon">
+              ${label}<ha-svg-icon slot="graphic" .path=${icon}></ha-svg-icon
+            ></mwc-list-item>
           `
         )}
       </ha-select>
@@ -48,16 +50,19 @@ export class HaConditionAction extends LitElement implements ActionElement {
   }
 
   private _processedTypes = memoizeOne(
-    (localize: LocalizeFunc): [string, string][] =>
-      CONDITION_TYPES.map(
-        (condition) =>
-          [
-            condition,
-            localize(
-              `ui.panel.config.automation.editor.conditions.type.${condition}.label`
-            ),
-          ] as [string, string]
-      ).sort((a, b) => stringCompare(a[1], b[1]))
+    (localize: LocalizeFunc): [string, string, string][] =>
+      Object.entries(CONDITION_TYPES)
+        .map(
+          ([condition, icon]) =>
+            [
+              condition,
+              localize(
+                `ui.panel.config.automation.editor.conditions.type.${condition}.label`
+              ),
+              icon,
+            ] as [string, string, string]
+        )
+        .sort((a, b) => stringCompare(a[1], b[1]))
   );
 
   private _conditionChanged(ev: CustomEvent) {

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

@@ -1,5 +1,5 @@
 import { html, LitElement, PropertyValues } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { hasTemplate } from "../../../../../common/string/has-template";
 import type { HaDurationData } from "../../../../../components/ha-duration-input";
@@ -13,9 +13,9 @@ import { createDurationData } from "../../../../../common/datetime/create_durati
 export class HaDelayAction extends LitElement implements ActionElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public action!: DelayAction;
+  @property({ attribute: false }) public action!: DelayAction;
 
-  @property() public _timeData?: HaDurationData;
+  @state() private _timeData?: HaDurationData;
 
   public static get defaultConfig() {
     return { delay: "" };