Dev -> Master 20220901.0 (#13561)

demo/src/ha-demo.ts

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

gallery/src/pages/components/dialogs.markdown

@@ -3,7 +3,7 @@ title: Dialgos
 subtitle: Dialogs provide important prompts in a user flow.
 ---
 
-# Material Desing 3
+# 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). 
 

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

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

pyproject.toml

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

src/common/const.ts

@@ -126,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,

src/data/entity_registry.ts

@@ -7,8 +7,8 @@ import { debounce } from "../common/util/debounce";
 import { HomeAssistant } from "../types";
 
 export interface EntityRegistryEntry {
+  id: string;
   entity_id: string;
-  unique_id: string;
   name: string | null;
   icon: string | null;
   platform: string;
@@ -23,6 +23,7 @@ export interface EntityRegistryEntry {
 }
 
 export interface ExtEntityRegistryEntry extends EntityRegistryEntry {
+  unique_id: string;
   capabilities: Record<string, unknown>;
   original_icon?: string;
   device_class?: string;
@@ -162,11 +163,11 @@ export const sortEntityRegistryByName = (entries: EntityRegistryEntry[]) =>
     caseInsensitiveStringCompare(entry1.name || "", entry2.name || "")
   );
 
-export const entityRegistryByUniqueId = memoizeOne(
+export const entityRegistryById = memoizeOne(
   (entries: HomeAssistant["entities"]) => {
     const entities: HomeAssistant["entities"] = {};
     for (const entity of Object.values(entries)) {
-      entities[entity.unique_id] = entity;
+      entities[entity.id] = entity;
     }
     return entities;
   }

src/data/script_i18n.ts

@@ -10,7 +10,7 @@ import { localizeDeviceAutomationAction } from "./device_automation";
 import { computeDeviceName } from "./device_registry";
 import {
   computeEntityRegistryName,
-  entityRegistryByUniqueId,
+  entityRegistryById,
 } from "./entity_registry";
 import { domainToName } from "./integration";
 import {
@@ -91,9 +91,7 @@ export const describeAction = <T extends ActionType>(
                 targets.push(targetThing);
               }
             } else {
-              const entityReg = entityRegistryByUniqueId(hass.entities)[
+              const entityReg = entityRegistryById(hass.entities)[targetThing];
-                targetThing
-              ];
               if (entityReg) {
                 targets.push(
                   computeEntityRegistryName(hass, entityReg) || targetThing

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

@@ -157,13 +157,13 @@ export default class HaAutomationActionRow extends LitElement {
             </div>`
           : ""}
         <ha-expansion-panel leftChevron>
-          <div slot="header">
+          <h3 slot="header">
             <ha-svg-icon
               class="action-icon"
               .path=${ACTION_TYPES[type!]}
             ></ha-svg-icon>
             ${capitalizeFirstLetter(describeAction(this.hass, this.action))}
-          </div>
+          </h3>
 
           ${this.index !== 0
             ? html`
@@ -507,6 +507,11 @@ export default class HaAutomationActionRow extends LitElement {
           --expansion-panel-summary-padding: 0 0 0 8px;
           --expansion-panel-content-padding: 0;
         }
+        h3 {
+          margin: 0;
+          font-size: inherit;
+          font-weight: inherit;
+        }
         .action-icon {
           display: none;
         }

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

@@ -3,7 +3,6 @@ import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-blueprint-picker";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
@@ -11,10 +10,7 @@ import "../../../components/ha-markdown";
 import "../../../components/ha-selector/ha-selector";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-textfield";
-import {
+import { BlueprintAutomationConfig } from "../../../data/automation";
-  BlueprintAutomationConfig,
-  triggerAutomationActions,
-} from "../../../data/automation";
 import {
   BlueprintOrError,
   Blueprints,
@@ -67,9 +63,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
     const blueprint = this._blueprint;
     return html`
       <ha-config-section vertical .isWide=${this.isWide}>
-        ${!this.narrow
-          ? html` <span slot="header">${this.config.alias}</span> `
-          : ""}
         <span slot="introduction">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.introduction"
@@ -102,36 +95,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
                   </div>
                 `}
           </div>
-          ${this.stateObj
-            ? html`
-                <div class="card-actions layout horizontal justified center">
-                  <div class="layout horizontal center">
-                    <ha-entity-toggle
-                      .hass=${this.hass}
-                      .stateObj=${this.stateObj!}
-                    ></ha-entity-toggle>
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.enable_disable"
-                    )}
-                  </div>
-                  <div>
-                    <a href="/config/automation/trace/${this.config.id}">
-                      <mwc-button>
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.editor.show_trace"
-                        )}
-                      </mwc-button>
-                    </a>
-                    <mwc-button
-                      @click=${this._runActions}
-                      .stateObj=${this.stateObj}
-                    >
-                      ${this.hass.localize("ui.card.automation.trigger")}
-                    </mwc-button>
-                  </div>
-                </div>
-              `
-            : ""}
         </ha-card>
       </ha-config-section>
 
@@ -220,10 +183,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
     this._blueprints = await fetchBlueprints(this.hass, "automation");
   }
 
-  private _runActions(ev: Event) {
-    triggerAutomationActions(this.hass, (ev.target as any).stateObj.entity_id);
-  }
-
   private _blueprintChanged(ev) {
     ev.stopPropagation();
     if (this.config.use_blueprint.path === ev.detail.value) {
@@ -319,9 +278,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
         p {
           margin-bottom: 0;
         }
-        ha-entity-toggle {
-          margin-right: 8px;
-        }
         ha-settings-row {
           --paper-time-input-justify-content: flex-end;
           --settings-row-content-width: 100%;

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

@@ -93,7 +93,7 @@ export default class HaAutomationConditionRow extends LitElement {
           : ""}
 
         <ha-expansion-panel leftChevron>
-          <div slot="header">
+          <h3 slot="header">
             <ha-svg-icon
               class="condition-icon"
               .path=${CONDITION_TYPES[this.condition.condition]}
@@ -101,7 +101,7 @@ export default class HaAutomationConditionRow extends LitElement {
             ${capitalizeFirstLetter(
               describeCondition(this.condition, this.hass)
             )}
-          </div>
+          </h3>
 
           <ha-button-menu
             slot="icons"
@@ -423,6 +423,11 @@ export default class HaAutomationConditionRow extends LitElement {
           --expansion-panel-summary-padding: 0 0 0 8px;
           --expansion-panel-content-padding: 0;
         }
+        h3 {
+          margin: 0;
+          font-size: inherit;
+          font-weight: inherit;
+        }
         .condition-icon {
           display: none;
         }

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

@@ -681,15 +681,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         }
         h1 {
           margin: 0;
-          font-family: var(--paper-font-headline_-_font-family);
-          -webkit-font-smoothing: var(
-            --paper-font-headline_-_-webkit-font-smoothing
-          );
-          font-size: var(--paper-font-headline_-_font-size);
-          font-weight: var(--paper-font-headline_-_font-weight);
-          letter-spacing: var(--paper-font-headline_-_letter-spacing);
-          line-height: var(--paper-font-headline_-_line-height);
-          opacity: var(--dark-primary-opacity);
         }
         .header-name {
           display: flex;

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

@@ -47,12 +47,12 @@ export class HaManualAutomationEditor extends LitElement {
           : ""}
 
         <ha-expansion-panel leftChevron>
-          <div slot="header">
+          <h3 slot="header">
             <ha-svg-icon class="settings-icon" .path=${mdiRobot}></ha-svg-icon>
             ${this.hass.localize(
               "ui.panel.config.automation.editor.automation_settings"
             )}
-          </div>
+          </h3>
           <div class="card-content">
             <ha-textarea
               .label=${this.hass.localize(
@@ -115,11 +115,11 @@ export class HaManualAutomationEditor extends LitElement {
       </ha-card>
 
       <div class="header">
-        <div class="name">
+        <h2 id="triggers-heading" class="name">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.triggers.header"
           )}
-        </div>
+        </h2>
         <a
           href=${documentationUrl(this.hass, "/docs/automation/trigger/")}
           target="_blank"
@@ -135,17 +135,19 @@ export class HaManualAutomationEditor extends LitElement {
       </div>
 
       <ha-automation-trigger
+        role="region"
+        aria-labelledby="triggers-heading"
         .triggers=${this.config.trigger}
         @value-changed=${this._triggerChanged}
         .hass=${this.hass}
       ></ha-automation-trigger>
 
       <div class="header">
-        <div class="name">
+        <h2 id="conditions-heading" class="name">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.conditions.header"
           )}
-        </div>
+        </h2>
         <a
           href=${documentationUrl(this.hass, "/docs/automation/condition/")}
           target="_blank"
@@ -161,17 +163,19 @@ export class HaManualAutomationEditor extends LitElement {
       </div>
 
       <ha-automation-condition
+        role="region"
+        aria-labelledby="conditions-heading"
         .conditions=${this.config.condition || []}
         @value-changed=${this._conditionChanged}
         .hass=${this.hass}
       ></ha-automation-condition>
 
       <div class="header">
-        <div class="name">
+        <h2 id="actions-heading" class="name">
           ${this.hass.localize(
             "ui.panel.config.automation.editor.actions.header"
           )}
-        </div>
+        </h2>
         <a
           href=${documentationUrl(this.hass, "/docs/automation/action/")}
           target="_blank"
@@ -187,6 +191,8 @@ export class HaManualAutomationEditor extends LitElement {
       </div>
 
       <ha-automation-action
+        role="region"
+        aria-labelledby="actions-heading"
         .actions=${this.config.action}
         @value-changed=${this._actionChanged}
         .hass=${this.hass}
@@ -292,7 +298,6 @@ export class HaManualAutomationEditor extends LitElement {
         }
         .header {
           display: flex;
-          margin: 16px 0;
           align-items: center;
         }
         .header .name {
@@ -303,6 +308,11 @@ export class HaManualAutomationEditor extends LitElement {
         .header a {
           color: var(--secondary-text-color);
         }
+        h3 {
+          margin: 0;
+          font-size: inherit;
+          font-weight: inherit;
+        }
         ha-expansion-panel {
           --expansion-panel-summary-padding: 0 0 0 8px;
           --expansion-panel-content-padding: 0;

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

@@ -121,13 +121,13 @@ export default class HaAutomationTriggerRow extends LitElement {
           : ""}
 
         <ha-expansion-panel leftChevron>
-          <div slot="header">
+          <h3 slot="header">
             <ha-svg-icon
               class="trigger-icon"
               .path=${TRIGGER_TYPES[this.trigger.platform]}
             ></ha-svg-icon>
             ${capitalizeFirstLetter(describeTrigger(this.trigger, this.hass))}
-          </div>
+          </h3>
           <ha-button-menu
             slot="icons"
             fixed
@@ -532,6 +532,11 @@ export default class HaAutomationTriggerRow extends LitElement {
           --expansion-panel-summary-padding: 0 0 0 8px;
           --expansion-panel-content-padding: 0;
         }
+        h3 {
+          margin: 0;
+          font-size: inherit;
+          font-weight: inherit;
+        }
         .trigger-icon {
           display: none;
         }

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

@@ -944,7 +944,18 @@ export class HaConfigDevicePage extends LitElement {
       buttons.push({
         action: async () => {
           const confirmed = await showConfirmationDialog(this, {
-            text: this.hass.localize("ui.panel.config.devices.confirm_delete"),
+            text:
+              this._integrations(device, this.entries).length > 1
+                ? this.hass.localize(
+                    `ui.panel.config.devices.confirm_delete_integration`,
+                    {
+                      integration: domainToName(
+                        this.hass.localize,
+                        entry.domain
+                      ),
+                    }
+                  )
+                : this.hass.localize(`ui.panel.config.devices.confirm_delete`),
           });
 
           if (!confirmed) {
@@ -960,7 +971,7 @@ export class HaConfigDevicePage extends LitElement {
         classes: "warning",
         icon: mdiDelete,
         label:
-          buttons.length > 1
+          this._integrations(device, this.entries).length > 1
             ? this.hass.localize(
                 `ui.panel.config.devices.delete_device_integration`,
                 {

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

@@ -872,10 +872,17 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
       name: this._name.trim() || null,
       icon: this._icon.trim() || null,
       area_id: this._areaId || null,
-      device_class: this._deviceClass || null,
       new_entity_id: this._entityId.trim(),
     };
 
+    // Only update device class if changed by user
+    if (
+      this._deviceClass !==
+      (this.entry.device_class || this.entry.original_device_class)
+    ) {
+      params.device_class = this._deviceClass;
+    }
+
     const stateObj: HassEntity | undefined =
       this.hass.states[this.entry.entity_id];
     const domain = computeDomain(this.entry.entity_id);

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

@@ -68,10 +68,10 @@ import type { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
 
-export interface StateEntity extends Omit<EntityRegistryEntry, "unique_id"> {
+export interface StateEntity extends Omit<EntityRegistryEntry, "id"> {
   readonly?: boolean;
   selectable?: boolean;
-  unique_id?: string;
+  id?: string;
 }
 
 export interface EntityRow extends StateEntity {

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

@@ -36,7 +36,6 @@ const defaultFullCalendarConfig: CalendarOptions = {
   selectOverlap: false,
   eventOverlap: false,
   allDaySlot: false,
-  slotMinTime: "00:00:59",
   height: "parent",
   locales: allLocales,
   firstDay: 1,
@@ -178,7 +177,7 @@ class HaScheduleForm extends LitElement {
       },
       eventTimeFormat: {
         hour: useAmPm(this.hass.locale) ? "numeric" : "2-digit",
-        minute: undefined,
+        minute: useAmPm(this.hass.locale) ? "numeric" : "2-digit",
         hour12: useAmPm(this.hass.locale),
         meridiem: useAmPm(this.hass.locale) ? "narrow" : false,
       },
@@ -214,7 +213,8 @@ class HaScheduleForm extends LitElement {
       }
 
       this[`_${day}`].forEach((item: ScheduleDay, index: number) => {
-        const distance = i - currentDay;
+        // Add 7 to 0 because we start the calendar on Monday
+        const distance = i - currentDay + (i === 0 ? 7 : 0);
 
         const start = new Date();
         start.setDate(start.getDate() + distance);
@@ -227,7 +227,9 @@ class HaScheduleForm extends LitElement {
         end.setDate(end.getDate() + distance);
         end.setHours(
           parseInt(item.to.slice(0, 2)),
-          parseInt(item.to.slice(-2))
+          parseInt(item.to.slice(-2)),
+          0,
+          0
         );
 
         events.push({

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

@@ -331,11 +331,11 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                             `
                           : html`
                               <div class="header">
-                                <div class="name">
+                                <h2 id="sequence-heading" class="name">
                                   ${this.hass.localize(
                                     "ui.panel.config.script.editor.sequence"
                                   )}
-                                </div>
+                                </h2>
                                 <a
                                   href=${documentationUrl(
                                     this.hass,
@@ -354,6 +354,8 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
                               </div>
 
                               <ha-automation-action
+                                role="region"
+                                aria-labelledby="sequence-heading"
                                 .actions=${this._config.sequence}
                                 @value-changed=${this._sequenceChanged}
                                 .hass=${this.hass}

src/translations/en.json

@@ -2576,7 +2576,7 @@
           "download_diagnostics": "Download diagnostics",
           "download_diagnostics_integration": "Download {integration} diagnostics",
           "delete_device": "Delete",
-          "delete_device_integration": "Remove {integration} from device",
+          "delete_device_integration": "Remove device from {integration}",
           "type": {
             "device_heading": "Device",
             "device": "device",
@@ -2653,6 +2653,7 @@
           },
           "delete": "Delete",
           "confirm_delete": "Are you sure you want to delete this device?",
+          "confirm_delete_integration": "Are you sure you want to remove this device from {integration}?",
           "picker": {
             "search": "Search devices",
             "filter": {