use input instead of change

So when you press enter, the correct value is saved

.github/workflows/nightly.yaml

@@ -55,9 +55,19 @@ jobs:
           rm -rf dist home_assistant_frontend.egg-info
           python3 -m build
 
+      - name: Archive translations
+        run: tar -czvf translations.tar.gz translations
+
       - name: Upload build artifacts
         uses: actions/upload-artifact@v3
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
+
+      - name: Upload translations
+        uses: actions/upload-artifact@v3
+        with:
+          name: translations
+          path: translations.tar.gz
+          if-no-files-found: error

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+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"),

demo/src/ha-demo.ts

@@ -61,6 +61,7 @@ class HaDemo extends HomeAssistantAppEl {
         area_id: null,
         disabled_by: null,
         entity_id: "sensor.co2_intensity",
+        id: "sensor.co2_intensity",
         name: null,
         icon: null,
         platform: "co2signal",
@@ -74,6 +75,7 @@ class HaDemo extends HomeAssistantAppEl {
         area_id: null,
         disabled_by: null,
         entity_id: "sensor.grid_fossil_fuel_percentage",
+        id: "sensor.co2_intensity",
         name: null,
         icon: null,
         platform: "co2signal",

gallery/src/ha-gallery.ts

@@ -5,7 +5,7 @@ import { html, css, LitElement, PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../src/components/ha-icon-button";
 import "../../src/managers/notification-manager";
-import "../../src/components/ha-expansion-panel";
+import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
 import { haStyle } from "../../src/resources/styles";
 import { PAGES, SIDEBAR } from "../build/import-pages";
 import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
@@ -174,9 +174,10 @@ class HaGallery extends LitElement {
     const menuItem = this.shadowRoot!.querySelector(
       `a[href="#${this._page}"]`
     )!;
+
     // Make sure section is expanded
-    if (menuItem.parentElement instanceof HTMLDetailsElement) {
-      menuItem.parentElement.open = true;
+    if (menuItem.parentElement instanceof HaExpansionPanel) {
+      menuItem.parentElement.expanded = true;
     }
   }
 

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

@@ -1,7 +1,9 @@
 import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-yaml-editor";
+import { Action } from "../../../../src/data/script";
 import { describeAction } from "../../../../src/data/script_i18n";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
@@ -88,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: [
       {
@@ -103,16 +114,38 @@ const ACTIONS = [
   },
 ];
 
+const initialAction: Action = {
+  service: "light.turn_on",
+  target: {
+    entity_id: "light.kitchen",
+  },
+};
+
 @customElement("demo-automation-describe-action")
 export class DemoAutomationDescribeAction extends LitElement {
   @property({ attribute: false }) hass!: HomeAssistant;
 
+  @state() _action = initialAction;
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
     }
     return html`
       <ha-card header="Actions">
+        <div class="action">
+          <span>
+            ${this._action
+              ? describeAction(this.hass, this._action)
+              : "<invalid YAML>"}
+          </span>
+          <ha-yaml-editor
+            label="Action Config"
+            .defaultValue=${initialAction}
+            @value-changed=${this._dataChanged}
+          ></ha-yaml-editor>
+        </div>
+
         ${ACTIONS.map(
           (conf) => html`
             <div class="action">
@@ -132,6 +165,11 @@ export class DemoAutomationDescribeAction extends LitElement {
     hass.addEntities(ENTITIES);
   }
 
+  private _dataChanged(ev: CustomEvent): void {
+    ev.stopPropagation();
+    this._action = ev.detail.isValid ? ev.detail.value : undefined;
+  }
+
   static get styles() {
     return css`
       ha-card {
@@ -147,6 +185,9 @@ export class DemoAutomationDescribeAction extends LitElement {
       span {
         margin-right: 16px;
       }
+      ha-yaml-editor {
+        width: 50%;
+      }
     `;
   }
 }

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

@@ -1,31 +1,81 @@
 import { dump } from "js-yaml";
-import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement } 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" },
 ];
 
+const initialCondition: Condition = {
+  condition: "state",
+  entity_id: "light.kitchen",
+  state: "on",
+};
+
 @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, this.hass)
+              : "<invalid YAML>"}
+          </span>
+          <ha-yaml-editor
+            label="Condition Config"
+            .defaultValue=${initialCondition}
+            @value-changed=${this._dataChanged}
+          ></ha-yaml-editor>
+        </div>
+
         ${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>
           `
@@ -34,6 +84,18 @@ 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;
+  }
+
   static get styles() {
     return css`
       ha-card {
@@ -49,6 +111,9 @@ export class DemoAutomationDescribeCondition extends LitElement {
       span {
         margin-right: 16px;
       }
+      ha-yaml-editor {
+        width: 50%;
+      }
     `;
   }
 }

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

@@ -1,34 +1,92 @@
 import { dump } from "js-yaml";
-import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement } 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 = {
+  platform: "state",
+  entity_id: "light.kitchen",
+};
+
 @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, this.hass)
+              : "<invalid YAML>"}
+          </span>
+          <ha-yaml-editor
+            label="Trigger Config"
+            .defaultValue=${initialTrigger}
+            @value-changed=${this._dataChanged}
+          ></ha-yaml-editor>
+        </div>
         ${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>
           `
@@ -37,6 +95,18 @@ 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;
+  }
+
   static get styles() {
     return css`
       ha-card {
@@ -52,6 +122,9 @@ export class DemoAutomationDescribeTrigger extends LitElement {
       span {
         margin-right: 16px;
       }
+      ha-yaml-editor {
+        width: 50%;
+      }
     `;
   }
 }

gallery/src/pages/components/dialogs.markdown

@@ -0,0 +1,32 @@
+---
+title: Dialgos
+subtitle: Dialogs provide important prompts in a user flow.
+---
+
+# Material Design 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-expansion-panel.markdown

@@ -0,0 +1,5 @@
+---
+title: Expansion Panel
+---
+
+Expansion panel following all the ARIA guidelines.

gallery/src/pages/components/ha-expansion-panel.ts

@@ -0,0 +1,157 @@
+import { mdiPacMan } from "@mdi/js";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-expansion-panel";
+import "../../../../src/components/ha-markdown";
+import "../../components/demo-black-white-row";
+import { LONG_TEXT } from "../../data/text";
+
+const SHORT_TEXT = LONG_TEXT.substring(0, 113);
+
+const SAMPLES: {
+  template: (slot: string, leftChevron: boolean) => TemplateResult;
+}[] = [
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          header="Attr header"
+        >
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          header="Attr header"
+          secondary="Attr secondary"
+        >
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          .header=${"Prop header"}
+        >
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          .header=${"Prop header"}
+          .secondary=${"Prop secondary"}
+        >
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          .header=${"Prop header"}
+        >
+          <span slot="secondary">Slot Secondary</span>
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel slot=${slot} .leftChevron=${leftChevron}>
+          <span slot="header">Slot header</span>
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel slot=${slot} .leftChevron=${leftChevron}>
+          <span slot="header">Slot header with actions</span>
+          <ha-icon-button
+            slot="icons"
+            label="Some Action"
+            .path=${mdiPacMan}
+          ></ha-icon-button>
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          header="Attr Header with actions"
+        >
+          <ha-icon-button
+            slot="icons"
+            label="Some Action"
+            .path=${mdiPacMan}
+          ></ha-icon-button>
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
+];
+
+@customElement("demo-components-ha-expansion-panel")
+export class DemoHaExpansionPanel extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      ${SAMPLES.map(
+        (sample) => html`
+          <demo-black-white-row>
+            ${["light", "dark"].map((slot) =>
+              sample.template(slot, slot === "dark")
+            )}
+          </demo-black-white-row>
+        `
+      )}
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-expansion-panel {
+        margin: -16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-expansion-panel": DemoHaExpansionPanel;
+  }
+}

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",
   }),
 ];
 
@@ -141,7 +148,13 @@ const SCHEMAS: {
         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: {} } },
@@ -423,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";
@@ -115,11 +116,19 @@ const SCHEMAS: {
     name: "One of each",
     input: {
       entity: { name: "Entity", selector: { entity: {} } },
+      state: {
+        name: "State",
+        selector: { state: { entity_id: "alarm_control_panel.alarm" } },
+      },
       attribute: {
         name: "Attribute",
         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: {} } },
@@ -276,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
     `,
   },
   {

gallery/src/pages/misc/integration-card.ts

@@ -191,6 +191,7 @@ const createEntityRegistryEntries = (
     hidden_by: null,
     entity_category: null,
     entity_id: "binary_sensor.updater",
+    id: "binary_sensor.updater",
     name: null,
     icon: null,
     platform: "updater",

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"

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

@@ -4,7 +4,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-form/ha-form";
-import { HaFormSchema } from "../../../../src/components/ha-form/types";
+import type { SchemaUnion } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-settings-row";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -19,7 +19,7 @@ import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { RegistriesDialogParams } from "./show-dialog-registries";
 
-const SCHEMA: HaFormSchema[] = [
+const SCHEMA = [
   {
     name: "registry",
     required: true,
@@ -35,7 +35,7 @@ const SCHEMA: HaFormSchema[] = [
     required: true,
     selector: { text: { type: "password" } },
   },
-];
+] as const;
 
 @customElement("dialog-hassio-registries")
 class HassioRegistriesDialog extends LitElement {
@@ -135,8 +135,8 @@ class HassioRegistriesDialog extends LitElement {
     `;
   }
 
-  private _computeLabel = (schema: HaFormSchema) =>
-    this.supervisor.localize(`dialog.registries.${schema.name}`) || schema.name;
+  private _computeLabel = (schema: SchemaUnion<typeof SCHEMA>) =>
+    this.supervisor.localize(`dialog.registries.${schema.name}`);
 
   private _valueChanged(ev: CustomEvent) {
     this._input = ev.detail.value;

lint-staged.config.js

@@ -1,4 +1,11 @@
 module.exports = {
-  "*.{js,ts}": 'eslint --ignore-pattern "**/build-scripts/**/*.js" --fix',
-  "!(/translations)*.{js,ts,json,css,md,html}": "prettier --write",
+  "*.{js,ts}": [
+    "prettier --write",
+    'eslint --ignore-pattern "**/build-scripts/**/*.js" --fix',
+  ],
+  "!(/translations)*.{json,css,md,html}": "prettier --write",
+  "translations/*/*.json": (files) =>
+    'printf "%s\n" "These files should not be modified.  Instead, make the necessary modifications in src/translations/en.json.  Please see translations/README.md for details." ' +
+    files.join(" ") +
+    " >&2 && exit 1",
 };

package.json

@@ -16,6 +16,9 @@
     "lint:lit": "lit-analyzer \"**/src/**/*.ts\" --format markdown --outFile result.md",
     "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types",
     "format": "yarn run format:eslint && yarn run format:prettier",
+    "postinstall": "husky install",
+    "prepack": "pinst --disable",
+    "postpack": "pinst --enable",
     "test": "instant-mocha --webpack-config ./test/webpack.config.js --require ./test/setup.js \"test/**/*.ts\""
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
@@ -108,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",
@@ -203,9 +205,9 @@
     "gulp-rename": "^2.0.0",
     "gulp-zopfli-green": "^3.0.1",
     "html-minifier": "^4.0.0",
-    "husky": "^1.3.1",
+    "husky": "^8.0.1",
     "instant-mocha": "^1.3.1",
-    "lint-staged": "^11.1.2",
+    "lint-staged": "^13.0.3",
     "lit-analyzer": "^1.2.1",
     "lodash.template": "^4.5.0",
     "magic-string": "^0.25.7",
@@ -214,6 +216,7 @@
     "mocha": "^8.4.0",
     "object-hash": "^2.0.3",
     "open": "^7.0.4",
+    "pinst": "^3.0.0",
     "prettier": "^2.4.1",
     "require-dir": "^1.2.0",
     "rollup": "^2.8.2",
@@ -246,11 +249,6 @@
     "@lit/reactive-element": "1.2.1"
   },
   "main": "src/home-assistant.js",
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "prettier": {
     "trailingComma": "es5",
     "arrowParens": "always"

pyproject.toml

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

src/auth/ha-auth-flow.ts

@@ -314,7 +314,8 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
   }
 
   private _computeStepDescription(step: DataEntryFlowStepForm) {
-    const resourceKey = `ui.panel.page-authorize.form.providers.${step.handler[0]}.step.${step.step_id}.description`;
+    const resourceKey =
+      `ui.panel.page-authorize.form.providers.${step.handler[0]}.step.${step.step_id}.description` as const;
     const args: string[] = [];
     const placeholders = step.description_placeholders || {};
     Object.keys(placeholders).forEach((key) => {
@@ -359,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,
@@ -125,6 +126,7 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   gas: mdiGasCylinder,
   humidity: mdiWaterPercent,
   illuminance: mdiBrightness5,
+  moisture: mdiWaterPercent,
   monetary: mdiCash,
   nitrogen_dioxide: mdiMolecule,
   nitrogen_monoxide: mdiMolecule,
@@ -166,46 +168,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 +199,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_duration.ts

@@ -0,0 +1,28 @@
+import { HaDurationData } from "../../components/ha-duration-input";
+
+const leftPad = (num: number) => (num < 10 ? `0${num}` : num);
+
+export const formatDuration = (duration: HaDurationData) => {
+  const d = duration.days || 0;
+  const h = duration.hours || 0;
+  const m = duration.minutes || 0;
+  const s = duration.seconds || 0;
+  const ms = duration.milliseconds || 0;
+
+  if (d > 0) {
+    return `${d} days ${h}:${leftPad(m)}:${leftPad(s)}`;
+  }
+  if (h > 0) {
+    return `${h}:${leftPad(m)}:${leftPad(s)}`;
+  }
+  if (m > 0) {
+    return `${m}:${leftPad(s)}`;
+  }
+  if (s > 0) {
+    return `${s} seconds`;
+  }
+  if (ms > 0) {
+    return `${ms} milliseconds`;
+  }
+  return null;
+};

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

@@ -2,17 +2,18 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { FrontendLocaleData } from "../../data/translation";
 import {
-  UPDATE_SUPPORT_PROGRESS,
   updateIsInstallingFromAttributes,
+  UPDATE_SUPPORT_PROGRESS,
 } from "../../data/update";
+import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
 import { formatNumber, isNumericFromAttributes } from "../number/format_number";
+import { blankBeforePercent } from "../translations/blank_before_percent";
 import { LocalizeFunc } from "../translations/localize";
-import { supportsFeatureFromAttributes } from "./supports-feature";
-import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
 import { computeDomain } from "./compute_domain";
+import { supportsFeatureFromAttributes } from "./supports-feature";
 
 export const computeStateDisplay = (
   localize: LocalizeFunc,
@@ -64,9 +65,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 === "%"
+      ? blankBeforePercent(locale) + "%"
+      : ` ${attributes.unit_of_measurement}`;
+    return `${formatNumber(state, locale)}${unit}`;
   }
 
   const domain = computeDomain(entityId);

src/common/entity/get_states.ts

@@ -0,0 +1,277 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { computeStateDomain } from "./compute_state_domain";
+import { UNAVAILABLE_STATES } from "../../data/entity";
+
+const FIXED_DOMAIN_STATES = {
+  alarm_control_panel: [
+    "armed_away",
+    "armed_custom_bypass",
+    "armed_home",
+    "armed_night",
+    "armed_vacation",
+    "arming",
+    "disarmed",
+    "disarming",
+    "pending",
+    "triggered",
+  ],
+  automation: ["on", "off"],
+  binary_sensor: ["on", "off"],
+  button: [],
+  calendar: ["on", "off"],
+  camera: ["idle", "recording", "streaming"],
+  cover: ["closed", "closing", "open", "opening"],
+  device_tracker: ["home", "not_home"],
+  fan: ["on", "off"],
+  humidifier: ["on", "off"],
+  input_boolean: ["on", "off"],
+  input_button: [],
+  light: ["on", "off"],
+  lock: ["jammed", "locked", "locking", "unlocked", "unlocking"],
+  media_player: ["idle", "off", "paused", "playing", "standby"],
+  person: ["home", "not_home"],
+  remote: ["on", "off"],
+  scene: [],
+  schedule: ["on", "off"],
+  script: ["on", "off"],
+  siren: ["on", "off"],
+  sun: ["above_horizon", "below_horizon"],
+  switch: ["on", "off"],
+  update: ["on", "off"],
+  vacuum: ["cleaning", "docked", "error", "idle", "paused", "returning"],
+  weather: [
+    "clear-night",
+    "cloudy",
+    "exceptional",
+    "fog",
+    "hail",
+    "lightning-rainy",
+    "lightning",
+    "partlycloudy",
+    "pouring",
+    "rainy",
+    "snowy-rainy",
+    "snowy",
+    "sunny",
+    "windy-variant",
+    "windy",
+  ],
+};
+
+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 (!attribute && domain in FIXED_DOMAIN_STATES) {
+    result.push(...FIXED_DOMAIN_STATES[domain]);
+  } 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":
+      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":
+      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":
+      if (!attribute || attribute === "operation_mode") {
+        result.push(...state.attributes.operation_list);
+      }
+      break;
+  }
+
+  if (!attribute) {
+    // All entities can have unavailable states
+    result.push(...UNAVAILABLE_STATES);
+  }
+  return [...new Set(result)];
+};

src/common/translations/blank_before_percent.ts

@@ -0,0 +1,18 @@
+import { FrontendLocaleData } from "../../data/translation";
+
+// Logic based on https://en.wikipedia.org/wiki/Percent_sign#Form_and_spacing
+export const blankBeforePercent = (
+  localeOptions: FrontendLocaleData
+): string => {
+  switch (localeOptions.language) {
+    case "cz":
+    case "de":
+    case "fi":
+    case "fr":
+    case "sk":
+    case "sv":
+      return " ";
+    default:
+      return "";
+  }
+};

src/common/translations/localize.ts

@@ -11,12 +11,41 @@ import { getLocalLanguage } from "../../util/common-translation";
 // Fixing component category will require tighter definition of types from backend and/or web socket
 export type LocalizeKeys =
   | FlattenObjectKeys<Omit<TranslationDict, "supervisor">>
-  | `${string}`
   | `panel.${string}`
   | `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-automation-picker.ts

@@ -172,8 +172,7 @@ export abstract class HaDeviceAutomationPicker<
   static get styles(): CSSResultGroup {
     return css`
       ha-select {
-        width: 100%;
-        margin-top: 4px;
+        display: block;
       }
     `;
   }

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),
+            }))
         : [];
     }
   }
@@ -58,7 +68,7 @@ class HaEntityAttributePicker extends LitElement {
     return html`
       <ha-combo-box
         .hass=${this.hass}
-        .value=${this.value || ""}
+        .value=${this.value ? formatAttributeName(this.value) : ""}
         .autofocus=${this.autofocus}
         .label=${this.label ??
         this.hass.localize(

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

@@ -0,0 +1,111 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { computeStateDisplay } from "../../common/entity/compute_state_display";
+import { PolymerChangedEvent } from "../../polymer-types";
+import { getStates } from "../../common/entity/get_states";
+import { HomeAssistant } from "../../types";
+import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
+
+export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
+
+@customElement("ha-entity-state-picker")
+class HaEntityStatePicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public entityId?: string;
+
+  @property() public attribute?: string;
+
+  @property({ type: Boolean }) public autofocus = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @property({ type: Boolean, attribute: "allow-custom-value" })
+  public allowCustomValue;
+
+  @property() public label?: string;
+
+  @property() public value?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) private _opened = false;
+
+  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
+
+  protected shouldUpdate(changedProps: PropertyValues) {
+    return !(!changedProps.has("_opened") && this._opened);
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    if (changedProps.has("_opened") && this._opened) {
+      const state = this.entityId ? this.hass.states[this.entityId] : undefined;
+      (this._comboBox as any).items =
+        this.entityId && state
+          ? getStates(state, this.attribute).map((key) => ({
+              value: key,
+              label: !this.attribute
+                ? computeStateDisplay(
+                    this.hass.localize,
+                    state,
+                    this.hass.locale,
+                    key
+                  )
+                : key,
+            }))
+          : [];
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+
+    return html`
+      <ha-combo-box
+        .hass=${this.hass}
+        .value=${this.value
+          ? this.entityId && this.hass.states[this.entityId]
+            ? computeStateDisplay(
+                this.hass.localize,
+                this.hass.states[this.entityId],
+                this.hass.locale,
+                this.value
+              )
+            : this.value
+          : ""}
+        .autofocus=${this.autofocus}
+        .label=${this.label ??
+        this.hass.localize("ui.components.entity.entity-state-picker.state")}
+        .disabled=${this.disabled || !this.entityId}
+        .required=${this.required}
+        .helper=${this.helper}
+        .allowCustomValue=${this.allowCustomValue}
+        item-value-path="value"
+        item-label-path="label"
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._valueChanged}
+      >
+      </ha-combo-box>
+    `;
+  }
+
+  private _openedChanged(ev: PolymerChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+  }
+
+  private _valueChanged(ev: PolymerChangedEvent<string>) {
+    this.value = ev.detail.value;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-entity-state-picker": HaEntityStatePicker;
+  }
+}

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

@@ -14,11 +14,13 @@ import { nextRender } from "../common/util/render-status";
 import "./ha-svg-icon";
 
 @customElement("ha-expansion-panel")
-class HaExpansionPanel extends LitElement {
+export class HaExpansionPanel extends LitElement {
   @property({ type: Boolean, reflect: true }) expanded = false;
 
   @property({ type: Boolean, reflect: true }) outlined = false;
 
+  @property({ type: Boolean, reflect: true }) leftChevron = false;
+
   @property() header?: string;
 
   @property() secondary?: string;
@@ -29,23 +31,42 @@ class HaExpansionPanel extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div
-        id="summary"
-        @click=${this._toggleContainer}
-        @keydown=${this._toggleContainer}
-        role="button"
-        tabindex="0"
-        aria-expanded=${this.expanded}
-        aria-controls="sect1"
-      >
-        <slot class="header" name="header">
-          ${this.header}
-          <slot class="secondary" name="secondary">${this.secondary}</slot>
-        </slot>
-        <ha-svg-icon
-          .path=${mdiChevronDown}
-          class="summary-icon ${classMap({ expanded: this.expanded })}"
-        ></ha-svg-icon>
+      <div class="top">
+        <div
+          id="summary"
+          @click=${this._toggleContainer}
+          @keydown=${this._toggleContainer}
+          @focus=${this._focusChanged}
+          @blur=${this._focusChanged}
+          role="button"
+          tabindex="0"
+          aria-expanded=${this.expanded}
+          aria-controls="sect1"
+        >
+          ${this.leftChevron
+            ? html`
+                <ha-svg-icon
+                  .path=${mdiChevronDown}
+                  class="summary-icon ${classMap({ expanded: this.expanded })}"
+                ></ha-svg-icon>
+              `
+            : ""}
+          <slot name="header">
+            <div class="header">
+              ${this.header}
+              <slot class="secondary" name="secondary">${this.secondary}</slot>
+            </div>
+          </slot>
+          ${!this.leftChevron
+            ? html`
+                <ha-svg-icon
+                  .path=${mdiChevronDown}
+                  class="summary-icon ${classMap({ expanded: this.expanded })}"
+                ></ha-svg-icon>
+              `
+            : ""}
+        </div>
+        <slot name="icons"></slot>
       </div>
       <div
         class="container ${classMap({ expanded: this.expanded })}"
@@ -61,23 +82,35 @@ class HaExpansionPanel extends LitElement {
   }
 
   protected willUpdate(changedProps: PropertyValues) {
+    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;
   }
 
   private async _toggleContainer(ev): Promise<void> {
+    if (ev.defaultPrevented) {
+      return;
+    }
     if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
       return;
     }
     ev.preventDefault();
     const newExpanded = !this.expanded;
     fireEvent(this, "expanded-will-change", { expanded: newExpanded });
+    this._container.style.overflow = "hidden";
 
     if (newExpanded) {
       this._showContent = true;
@@ -98,12 +131,28 @@ class HaExpansionPanel extends LitElement {
     fireEvent(this, "expanded-changed", { expanded: this.expanded });
   }
 
+  private _focusChanged(ev) {
+    this.shadowRoot!.querySelector(".top")!.classList.toggle(
+      "focused",
+      ev.type === "focus"
+    );
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
       }
 
+      .top {
+        display: flex;
+        align-items: center;
+      }
+
+      .top.focused {
+        background: var(--input-fill-color);
+      }
+
       :host([outlined]) {
         box-shadow: none;
         border-width: 1px;
@@ -115,7 +164,17 @@ class HaExpansionPanel extends LitElement {
         border-radius: var(--ha-card-border-radius, 4px);
       }
 
+      .summary-icon {
+        margin-left: 8px;
+      }
+
+      :host([leftchevron]) .summary-icon {
+        margin-left: 0;
+        margin-right: 8px;
+      }
+
       #summary {
+        flex: 1;
         display: flex;
         padding: var(--expansion-panel-summary-padding, 0 8px);
         min-height: 48px;
@@ -126,15 +185,8 @@ class HaExpansionPanel extends LitElement {
         outline: none;
       }
 
-      #summary:focus {
-        background: var(--input-fill-color);
-      }
-
       .summary-icon {
         transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
-        margin-left: auto;
-        margin-inline-start: auto;
-        margin-inline-end: initial;
         direction: var(--direction);
       }
 
@@ -142,6 +194,11 @@ class HaExpansionPanel extends LitElement {
         transform: rotate(180deg);
       }
 
+      .header,
+      ::slotted([slot="header"]) {
+        flex: 1;
+      }
+
       .container {
         padding: var(--expansion-panel-content-padding, 0 8px);
         overflow: hidden;
@@ -153,10 +210,6 @@ class HaExpansionPanel extends LitElement {
         height: auto;
       }
 
-      .header {
-        display: block;
-      }
-
       .secondary {
         display: block;
         color: var(--secondary-text-color);

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

@@ -50,6 +50,7 @@ export const computeInitialHaFormData = (
         "text" in selector ||
         "addon" in selector ||
         "attribute" in selector ||
+        "file" in selector ||
         "icon" in selector ||
         "theme" in selector
       ) {

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-form/ha-form.ts

@@ -41,14 +41,14 @@ export class HaForm extends LitElement implements HaFormElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property() public computeError?: (schema: HaFormSchema, error) => string;
+  @property() public computeError?: (schema: any, error) => string;
 
   @property() public computeLabel?: (
     schema: any,
-    data?: HaFormDataContainer
+    data: HaFormDataContainer
   ) => string;
 
-  @property() public computeHelper?: (schema: HaFormSchema) => string;
+  @property() public computeHelper?: (schema: any) => string | undefined;
 
   public focus() {
     const root = this.shadowRoot?.querySelector(".root");

src/components/ha-gauge.ts

@@ -2,6 +2,7 @@ import { css, LitElement, PropertyValues, svg, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { formatNumber } from "../common/number/format_number";
+import { blankBeforePercent } from "../common/translations/blank_before_percent";
 import { afterNextRender } from "../common/util/render-status";
 import { FrontendLocaleData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";
@@ -132,7 +133,13 @@ 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 === "%"
+        ? blankBeforePercent(this.locale) + "%"
+        : ` ${this.label}`
+    }
         </text>
       </svg>`;
   }

src/components/ha-icon-overflow-menu.ts

@@ -3,6 +3,8 @@ import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
 import "./ha-button-menu";
 import "./ha-icon-button";
@@ -16,6 +18,7 @@ export interface IconOverflowMenuItem {
   disabled?: boolean;
   tooltip?: string;
   onClick: CallableFunction;
+  warning?: boolean;
 }
 
 @customElement("ha-icon-overflow-menu")
@@ -49,9 +52,13 @@ export class HaIconOverflowMenu extends LitElement {
                     graphic="icon"
                     .disabled=${item.disabled}
                     @click=${item.action}
+                    class=${classMap({ warning: Boolean(item.warning) })}
                   >
                     <div slot="graphic">
-                      <ha-svg-icon .path=${item.path}></ha-svg-icon>
+                      <ha-svg-icon
+                        class=${classMap({ warning: Boolean(item.warning) })}
+                        .path=${item.path}
+                      ></ha-svg-icon>
                     </div>
                     ${item.label}
                   </mwc-list-item>
@@ -81,7 +88,8 @@ export class HaIconOverflowMenu extends LitElement {
     `;
   }
 
-  protected _handleIconOverflowMenuOpened() {
+  protected _handleIconOverflowMenuOpened(e) {
+    e.stopPropagation();
     // If this component is used inside a data table, the z-index of the row
     // needs to be increased. Otherwise the ha-button-menu would be displayed
     // underneath the next row in the table.
@@ -99,12 +107,15 @@ export class HaIconOverflowMenu extends LitElement {
   }
 
   static get styles() {
-    return css`
-      :host {
-        display: flex;
-        justify-content: flex-end;
-      }
-    `;
+    return [
+      haStyle,
+      css`
+        :host {
+          display: flex;
+          justify-content: flex-end;
+        }
+      `,
+    ];
   }
 }
 

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-file.ts

@@ -0,0 +1,98 @@
+import { mdiFile } from "@mdi/js";
+import { html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import { removeFile, uploadFile } from "../../data/file_upload";
+import { FileSelector } from "../../data/selector";
+import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
+import { HomeAssistant } from "../../types";
+import "../ha-file-upload";
+
+@customElement("ha-selector-file")
+export class HaFileSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: FileSelector;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @state() private _filename?: { fileId: string; name: string };
+
+  @state() private _busy = false;
+
+  protected render() {
+    return html`
+      <ha-file-upload
+        .hass=${this.hass}
+        .accept=${this.selector.file.accept}
+        .icon=${mdiFile}
+        .label=${this.label}
+        .required=${this.required}
+        .disabled=${this.disabled}
+        .helper=${this.helper}
+        .uploading=${this._busy}
+        .value=${this.value ? this._filename?.name || "Unknown file" : ""}
+        @file-picked=${this._uploadFile}
+        @change=${this._removeFile}
+      ></ha-file-upload>
+    `;
+  }
+
+  protected willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+    if (
+      changedProps.has("value") &&
+      this._filename &&
+      this.value !== this._filename.fileId
+    ) {
+      this._filename = undefined;
+    }
+  }
+
+  private async _uploadFile(ev) {
+    this._busy = true;
+
+    const file = ev.detail.files![0];
+
+    try {
+      const fileId = await uploadFile(this.hass, file);
+      this._filename = { fileId, name: file.name };
+      fireEvent(this, "value-changed", { value: fileId });
+    } catch (err: any) {
+      showAlertDialog(this, {
+        text: this.hass.localize("ui.components.selectors.file.upload_failed", {
+          reason: err.message || err,
+        }),
+      });
+    } finally {
+      this._busy = false;
+    }
+  }
+
+  private _removeFile = async () => {
+    this._busy = true;
+    try {
+      await removeFile(this.hass, this.value!);
+    } catch (err) {
+      // Not ideal if removal fails, but will be cleaned up later
+    } finally {
+      this._busy = false;
+    }
+    this._filename = undefined;
+    fireEvent(this, "value-changed", { value: "" });
+  };
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-file": HaFileSelector;
+  }
+}

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-media.ts

@@ -15,13 +15,13 @@ import type { HomeAssistant } from "../../types";
 import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 import "../ha-alert";
 import "../ha-form/ha-form";
-import type { HaFormSchema } from "../ha-form/types";
+import type { SchemaUnion } from "../ha-form/types";
 import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
 
 const MANUAL_SCHEMA = [
   { name: "media_content_id", required: false, selector: { text: {} } },
   { name: "media_content_type", required: false, selector: { text: {} } },
-];
+] as const;
 
 @customElement("ha-selector-media")
 export class HaMediaSelector extends LitElement {
@@ -163,7 +163,9 @@ export class HaMediaSelector extends LitElement {
           </ha-card>`}`;
   }
 
-  private _computeLabelCallback = (schema: HaFormSchema): string =>
+  private _computeLabelCallback = (
+    schema: SchemaUnion<typeof MANUAL_SCHEMA>
+  ): string =>
     this.hass.localize(`ui.components.selectors.media.${schema.name}`);
 
   private _entityChanged(ev: CustomEvent) {

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

@@ -0,0 +1,52 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { StateSelector } from "../../data/selector";
+import { SubscribeMixin } from "../../mixins/subscribe-mixin";
+import { HomeAssistant } from "../../types";
+import "../entity/ha-entity-state-picker";
+
+@customElement("ha-selector-state")
+export class HaSelectorState extends SubscribeMixin(LitElement) {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: StateSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @property() public context?: {
+    filter_attribute?: string;
+    filter_entity?: string;
+  };
+
+  protected render() {
+    return html`
+      <ha-entity-state-picker
+        .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}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        allow-custom-value
+      ></ha-entity-state-picker>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-state": HaSelectorState;
+  }
+}

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

@@ -1,4 +1,4 @@
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
@@ -48,6 +48,14 @@ export class HaTemplateSelector extends LitElement {
     }
     fireEvent(this, "value-changed", { value });
   }
+
+  static get styles() {
+    return css`
+      p {
+        margin-top: 0;
+      }
+    `;
+  }
 }
 
 declare global {

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,14 +9,17 @@ 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";
 import "./ha-selector-duration";
 import "./ha-selector-entity";
+import "./ha-selector-file";
 import "./ha-selector-number";
 import "./ha-selector-object";
 import "./ha-selector-select";
+import "./ha-selector-state";
 import "./ha-selector-target";
 import "./ha-selector-template";
 import "./ha-selector-text";

src/components/ha-service-control.ts

@@ -230,7 +230,9 @@ export class HaServiceControl extends LitElement {
         @value-changed=${this._serviceChanged}
       ></ha-service-picker>
       <div class="description">
-        <p>${serviceData?.description}</p>
+        ${serviceData?.description
+          ? html`<p>${serviceData?.description}</p>`
+          : ""}
         ${this._manifest
           ? html` <a
               href=${this._manifest.is_built_in

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

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

@@ -8,7 +8,8 @@ import { BlueprintInput } from "./blueprint";
 import { DeviceCondition, DeviceTrigger } from "./device_automation";
 import { Action, MODES } from "./script";
 
-export const AUTOMATION_DEFAULT_MODE: ManualAutomationConfig["mode"] = "single";
+export const AUTOMATION_DEFAULT_MODE: typeof MODES[number] = "single";
+export const AUTOMATION_DEFAULT_MAX = 10;
 
 export interface AutomationEntity extends HassEntityBase {
   attributes: HassEntityAttributeBase & {
@@ -62,6 +63,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,571 @@
+import secondsToDuration from "../common/datetime/seconds_to_duration";
+import { ensureArray } from "../common/ensure-array";
+import { computeStateName } from "../common/entity/compute_state_name";
+import type { HomeAssistant } from "../types";
 import { Condition, Trigger } from "./automation";
+import {
+  DeviceCondition,
+  DeviceTrigger,
+  localizeDeviceAutomationCondition,
+  localizeDeviceAutomationTrigger,
+} from "./device_automation";
+import { formatAttributeName } from "./entity_attributes";
 
-export const describeTrigger = (trigger: Trigger) =>
-  `${trigger.platform} 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") {
+    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 if (trigger.entity_id) {
+      entities = states[trigger.entity_id]
+        ? computeStateName(states[trigger.entity_id])
+        : trigger.entity_id;
+    }
+
+    if (!entities) {
+      // no entity_id or empty array
+      entities = "something";
+    }
+
+    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 an MQTT message 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";
+  }
+
+  if (trigger.platform === "device") {
+    if (!trigger.device_id) {
+      return "Device trigger";
+    }
+    const config = trigger as DeviceTrigger;
+    const localized = localizeDeviceAutomationTrigger(hass, config);
+    if (localized) {
+      return localized;
+    }
+    const stateObj = hass.states[config.entity_id as string];
+    return `${stateObj ? computeStateName(stateObj) : config.entity_id} ${
+      config.type
+    }`;
+  }
+
+  return `${
+    trigger.platform ? trigger.platform.replace(/_/g, " ") : "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}"`;
+
+  if (!condition.condition) {
+    const shorthands: Array<"and" | "or" | "not"> = ["and", "or", "not"];
+    for (const key of shorthands) {
+      if (!(key in condition)) {
+        continue;
+      }
+      if (ensureArray(condition[key])) {
+        condition = {
+          condition: key,
+          conditions: condition[key],
+        };
+      }
+    }
   }
-  return `${condition.condition} condition`;
+
+  if (condition.condition === "or") {
+    const conditions = ensureArray(condition.conditions);
+
+    let count = "condition";
+
+    if (conditions && conditions.length > 0) {
+      count = `of ${conditions.length} conditions`;
+    }
+
+    return `Test if any ${count} matches`;
+  }
+
+  if (condition.condition === "and") {
+    const conditions = ensureArray(condition.conditions);
+
+    const count =
+      conditions && conditions.length > 0
+        ? `${conditions.length} `
+        : "multiple";
+
+    return `Test if ${count} conditions match`;
+  }
+
+  if (condition.condition === "not") {
+    const conditions = ensureArray(condition.conditions);
+
+    const what =
+      conditions && conditions.length > 0
+        ? `none of ${conditions.length} conditions match`
+        : "no condition matches";
+
+    return `Test if ${what}`;
+  }
+
+  // State Condition
+  if (condition.condition === "state") {
+    let base = "Confirm";
+    const stateObj = hass.states[condition.entity_id];
+    const entity = stateObj
+      ? computeStateName(stateObj)
+      : condition.entity_id
+      ? condition.entity_id
+      : "an entity";
+
+    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 if (condition.state) {
+      states = condition.state.toString();
+    }
+
+    if (!states) {
+      states = "a state";
+    }
+
+    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"
+    }`;
+  }
+
+  if (condition.condition === "device") {
+    if (!condition.device_id) {
+      return "Device condition";
+    }
+    const config = condition as DeviceCondition;
+    const localized = localizeDeviceAutomationCondition(hass, config);
+    if (localized) {
+      return localized;
+    }
+    const stateObj = hass.states[config.entity_id as string];
+    return `${stateObj ? computeStateName(stateObj) : config.entity_id} ${
+      config.type
+    }`;
+  }
+
+  return `${
+    condition.condition ? condition.condition.replace(/_/g, " ") : "Unknown"
+  } condition`;
 };

src/data/condition.ts

@@ -0,0 +1,27 @@
+import {
+  mdiAmpersand,
+  mdiClockOutline,
+  mdiCodeBraces,
+  mdiDevices,
+  mdiGateOr,
+  mdiIdentifier,
+  mdiMapMarkerRadius,
+  mdiNotEqualVariant,
+  mdiNumeric,
+  mdiStateMachine,
+  mdiWeatherSunny,
+} from "@mdi/js";
+
+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/entity_registry.ts

@@ -1,11 +1,13 @@
 import { Connection, createCollection } from "home-assistant-js-websocket";
 import { Store } from "home-assistant-js-websocket/dist/store";
+import memoizeOne from "memoize-one";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
 import { HomeAssistant } from "../types";
 
 export interface EntityRegistryEntry {
+  id: string;
   entity_id: string;
   name: string | null;
   icon: string | null;
@@ -161,6 +163,16 @@ export const sortEntityRegistryByName = (entries: EntityRegistryEntry[]) =>
     caseInsensitiveStringCompare(entry1.name || "", entry2.name || "")
   );
 
+export const entityRegistryById = memoizeOne(
+  (entries: HomeAssistant["entities"]) => {
+    const entities: HomeAssistant["entities"] = {};
+    for (const entity of Object.values(entries)) {
+      entities[entity.id] = entity;
+    }
+    return entities;
+  }
+);
+
 export const getEntityPlatformLookup = (
   entities: EntityRegistryEntry[]
 ): Record<string, string> => {

src/data/file_upload.ts

@@ -0,0 +1,22 @@
+import { HomeAssistant } from "../types";
+
+export const uploadFile = async (hass: HomeAssistant, file: File) => {
+  const fd = new FormData();
+  fd.append("file", file);
+  const resp = await hass.fetchWithAuth("/api/file_upload", {
+    method: "POST",
+    body: fd,
+  });
+  if (resp.status === 413) {
+    throw new Error(`Uploaded file is too large (${file.name})`);
+  } else if (resp.status !== 200) {
+    throw new Error("Unknown error");
+  }
+  const data = await resp.json();
+  return data.file_id;
+};
+
+export const removeFile = async (hass: HomeAssistant, file_id: string) =>
+  hass.callApi("DELETE", "file_upload", {
+    file_id,
+  });

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/media-player.ts

@@ -51,6 +51,7 @@ interface MediaPlayerEntityAttributes extends HassEntityAttributeBase {
   media_duration?: number;
   media_position?: number;
   media_title?: string;
+  media_channel?: string;
   icon?: string;
   entity_picture_local?: string;
   is_volume_muted?: boolean;
@@ -235,6 +236,9 @@ export const computeMediaDescription = (
         }
       }
       break;
+    case "channel":
+      secondaryTitle = stateObj.attributes.media_channel!;
+      break;
     default:
       secondaryTitle = stateObj.attributes.app_name || "";
   }

src/data/panel.ts

@@ -21,16 +21,16 @@ export const getDefaultPanel = (hass: HomeAssistant): PanelInfo =>
     ? hass.panels[hass.defaultPanel]
     : hass.panels[DEFAULT_PANEL];
 
-export const getPanelNameTranslationKey = (panel: PanelInfo): string => {
+export const getPanelNameTranslationKey = (panel: PanelInfo) => {
   if (panel.url_path === "lovelace") {
-    return "panel.states";
+    return "panel.states" as const;
   }
 
   if (panel.url_path === "profile") {
-    return "panel.profile";
+    return "panel.profile" as const;
   }
 
-  return `panel.${panel.title}`;
+  return `panel.${panel.title}` as const;
 };
 
 export const getPanelTitle = (hass: HomeAssistant): string | undefined => {

src/data/script.ts

@@ -28,7 +28,12 @@ import {
 import { BlueprintInput } from "./blueprint";
 
 export const MODES = ["single", "restart", "queued", "parallel"] as const;
-export const MODES_MAX = ["queued", "parallel"];
+export const MODES_MAX = ["queued", "parallel"] as const;
+
+export const isMaxMode = (
+  mode: typeof MODES[number]
+): mode is typeof MODES_MAX[number] =>
+  MODES_MAX.includes(mode as typeof MODES_MAX[number]);
 
 export const baseActionStruct = object({
   alias: optional(string()),
@@ -150,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;
 }
 
@@ -275,7 +288,7 @@ export const canRun = (state: ScriptEntity) => {
   }
   if (
     state.state === "on" &&
-    MODES_MAX.includes(state.attributes.mode) &&
+    isMaxMode(state.attributes.mode) &&
     state.attributes.current! < state.attributes.max!
   ) {
     return true;

src/data/script_i18n.ts

@@ -1,3 +1,4 @@
+import { formatDuration } from "../common/datetime/format_duration";
 import secondsToDuration from "../common/datetime/seconds_to_duration";
 import { ensureArray } from "../common/ensure-array";
 import { computeStateName } from "../common/entity/compute_state_name";
@@ -5,6 +6,13 @@ import { isTemplate } from "../common/string/has-template";
 import { HomeAssistant } from "../types";
 import { Condition } from "./automation";
 import { describeCondition, describeTrigger } from "./automation_i18n";
+import { localizeDeviceAutomationAction } from "./device_automation";
+import { computeDeviceName } from "./device_registry";
+import {
+  computeEntityRegistryName,
+  entityRegistryById,
+} from "./entity_registry";
+import { domainToName } from "./integration";
 import {
   ActionType,
   ActionTypes,
@@ -26,9 +34,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) {
@@ -46,9 +55,13 @@ export const describeAction = <T extends ActionType>(
     ) {
       base = "Call a service based on a template";
     } else if (config.service) {
-      base = `Call service ${config.service}`;
+      const [domain, serviceName] = config.service.split(".", 2);
+      const service = hass.services[domain][serviceName];
+      base = service
+        ? `${domainToName(hass.localize, domain)}: ${service.name}`
+        : `Call service: ${config.service}`;
     } else {
-      return actionType;
+      return "Call a service";
     }
     if (config.target) {
       const targets: string[] = [];
@@ -65,26 +78,49 @@ export const describeAction = <T extends ActionType>(
           ? config.target[key]
           : [config.target[key]];
 
-        const values: string[] = [];
-
-        let renderValues = true;
-
         for (const targetThing of keyConf) {
           if (isTemplate(targetThing)) {
             targets.push(`templated ${label}`);
-            renderValues = false;
             break;
+          } else if (key === "entity_id") {
+            if (targetThing.includes(".")) {
+              const state = hass.states[targetThing];
+              if (state) {
+                targets.push(computeStateName(state));
+              } else {
+                targets.push(targetThing);
+              }
+            } else {
+              const entityReg = entityRegistryById(hass.entities)[targetThing];
+              if (entityReg) {
+                targets.push(
+                  computeEntityRegistryName(hass, entityReg) || targetThing
+                );
+              } else {
+                targets.push("unknown entity");
+              }
+            }
+          } else if (key === "device_id") {
+            const device = hass.devices[targetThing];
+            if (device) {
+              targets.push(computeDeviceName(device, hass));
+            } else {
+              targets.push("unknown device");
+            }
+          } else if (key === "area_id") {
+            const area = hass.areas[targetThing];
+            if (area?.name) {
+              targets.push(area.name);
+            } else {
+              targets.push("unknown area");
+            }
           } else {
-            values.push(targetThing);
+            targets.push(targetThing);
           }
         }
-
-        if (renderValues) {
-          targets.push(`${label} ${values.join(", ")}`);
-        }
       }
       if (targets.length > 0) {
-        base += ` on ${targets.join(", ")}`;
+        base += ` ${targets.join(", ")}`;
       }
     }
 
@@ -101,9 +137,11 @@ export const describeAction = <T extends ActionType>(
     } else if (typeof config.delay === "string") {
       duration = isTemplate(config.delay)
         ? "based on a template"
-        : `for ${config.delay}`;
+        : `for ${config.delay || "a duration"}`;
+    } else if (config.delay) {
+      duration = `for ${formatDuration(config.delay)}`;
     } else {
-      duration = `for ${JSON.stringify(config.delay)}`;
+      duration = "for a duration";
     }
 
     return `Delay ${duration}`;
@@ -117,13 +155,12 @@ export const describeAction = <T extends ActionType>(
     } else {
       entityId = config.target?.entity_id || config.entity_id;
     }
+    if (!entityId) {
+      return "Activate a scene";
+    }
     const sceneStateObj = entityId ? hass.states[entityId] : undefined;
-    return `Activate scene ${
-      sceneStateObj
-        ? computeStateName(sceneStateObj)
-        : "scene" in config
-        ? config.scene
-        : config.target?.entity_id || config.entity_id
+    return `Active scene ${
+      sceneStateObj ? computeStateName(sceneStateObj) : entityId
     }`;
   }
 
@@ -131,17 +168,23 @@ export const describeAction = <T extends ActionType>(
     const config = action as PlayMediaAction;
     const entityId = config.target?.entity_id || config.entity_id;
     const mediaStateObj = entityId ? hass.states[entityId] : undefined;
-    return `Play ${config.metadata.title || config.data.media_content_id} on ${
+    return `Play ${
+      config.metadata.title || config.data.media_content_id || "media"
+    } on ${
       mediaStateObj
         ? computeStateName(mediaStateObj)
-        : config.target?.entity_id || config.entity_id
+        : entityId || "a media player"
     }`;
   }
 
   if (actionType === "wait_for_trigger") {
     const config = action as WaitForTriggerAction;
-    return `Wait for ${ensureArray(config.wait_for_trigger)
-      .map((trigger) => describeTrigger(trigger))
+    const triggers = ensureArray(config.wait_for_trigger);
+    if (!triggers || triggers.length === 0) {
+      return "Wait for a trigger";
+    }
+    return `Wait for ${triggers
+      .map((trigger) => describeTrigger(trigger, hass))
       .join(", ")}`;
   }
 
@@ -163,71 +206,50 @@ export const describeAction = <T extends ActionType>(
   }
 
   if (actionType === "check_condition") {
-    return `Test ${describeCondition(action as Condition)}`;
+    return describeCondition(action as Condition, hass);
   }
 
   if (actionType === "stop") {
     const config = action as StopAction;
-    return `Stopped${config.stop ? ` because: ${config.stop}` : ""}`;
+    return `Stop${config.stop ? ` because: ${config.stop}` : ""}`;
   }
 
   if (actionType === "if") {
     const config = action as IfAction;
-    return `If ${
-      typeof config.if === "string"
+    return `Perform an action if: ${
+      !config.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`
+        : ensureArray(config.if).length
+        ? 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,11 +260,18 @@ 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") {
     const config = action as DeviceAction;
+    if (!config.device_id) {
+      return "Device action";
+    }
+    const localized = localizeDeviceAutomationAction(hass, config);
+    if (localized) {
+      return localized;
+    }
     const stateObj = hass.states[config.entity_id as string];
     return `${config.type || "Perform action with"} ${
       stateObj ? computeStateName(stateObj) : config.entity_id
@@ -251,9 +280,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,17 +11,20 @@ export type Selector =
   | BooleanSelector
   | ColorRGBSelector
   | ColorTempSelector
+  | ConfigEntrySelector
   | DateSelector
   | DateTimeSelector
   | DeviceSelector
   | DurationSelector
   | EntitySelector
+  | FileSelector
   | IconSelector
   | LocationSelector
   | MediaSelector
   | NumberSelector
   | ObjectSelector
   | SelectSelector
+  | StateSelector
   | StringSelector
   | TargetSelector
   | TemplateSelector
@@ -63,6 +66,7 @@ export interface AreaSelector {
 export interface AttributeSelector {
   attribute: {
     entity_id?: string;
+    hide_attributes?: readonly string[];
   };
 }
 
@@ -83,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: {};
@@ -112,7 +122,7 @@ export interface DurationSelector {
 export interface EntitySelector {
   entity: {
     integration?: string;
-    domain?: string | string[];
+    domain?: string | readonly string[];
     device_class?: string;
     multiple?: boolean;
     include_entities?: string[];
@@ -120,6 +130,12 @@ export interface EntitySelector {
   };
 }
 
+export interface FileSelector {
+  file: {
+    accept: string;
+  };
+}
+
 export interface IconSelector {
   icon: {
     placeholder?: string;
@@ -180,7 +196,14 @@ export interface SelectSelector {
     multiple?: boolean;
     custom_value?: boolean;
     mode?: "list" | "dropdown";
-    options: string[] | SelectOption[];
+    options: readonly string[] | readonly SelectOption[];
+  };
+}
+
+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

@@ -0,0 +1,35 @@
+import {
+  mdiAvTimer,
+  mdiCalendar,
+  mdiClockOutline,
+  mdiCodeBraces,
+  mdiDevices,
+  mdiGestureDoubleTap,
+  mdiHomeAssistant,
+  mdiMapMarker,
+  mdiMapMarkerRadius,
+  mdiNfcVariant,
+  mdiNumeric,
+  mdiStateMachine,
+  mdiSwapHorizontal,
+  mdiWeatherSunny,
+  mdiWebhook,
+} from "@mdi/js";
+
+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,
+};