20231228.0 (#19170)

pyproject.toml

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

src/components/ha-list-item.ts

@@ -46,6 +46,7 @@ export class HaListItem extends ListItemBase {
         .mdc-deprecated-list-item__meta {
           display: var(--mdc-list-item-meta-display);
           align-items: center;
+          flex-shrink: 0;
         }
         :host([graphic="icon"]:not([twoline]))
           .mdc-deprecated-list-item__graphic {

src/data/action.ts

@@ -67,6 +67,7 @@ export const ACTION_GROUPS: AutomationElementGroup = {
     icon: mdiDotsHorizontal,
     members: {
       event: {},
+      service: {},
     },
   },
 } as const;

src/dialogs/area-filter/area-filter-dialog.ts

@@ -207,7 +207,8 @@ export class DialogAreaFilter
           color: var(--disabled-text-color);
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
         }
         .actions {
           display: flex;

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

@@ -319,7 +319,8 @@ export default class HaAutomationAction extends LitElement {
           overflow: hidden;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

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

@@ -543,7 +543,8 @@ export class HaChooseAction extends LitElement implements ActionElement {
           padding: 0 16px 16px 16px;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

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

@@ -452,8 +452,8 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
           itemRoles="option"
           rootTabbable
           style=${styleMap({
-            width: `${this._width}px`,
+            width: this._width ? `${this._width}px` : "auto",
-            height: `${this._height}px`,
+            height: this._height ? `${Math.min(468, this._height)}px` : "auto",
           })}
         >
           ${this._params.clipboardItem &&

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

@@ -358,7 +358,8 @@ export default class HaAutomationCondition extends LitElement {
           overflow: hidden;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

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

@@ -338,7 +338,9 @@ class HaAutomationPicker extends LitElement {
               <p>
                 ${this.hass.localize(
                   "ui.panel.config.automation.picker.empty_text_1"
-                )}<br />
+                )}
+              </p>
+              <p>
                 ${this.hass.localize(
                   "ui.panel.config.automation.picker.empty_text_2"
                 )}
@@ -349,9 +351,7 @@ class HaAutomationPicker extends LitElement {
                 rel="noreferrer"
               >
                 <ha-button>
-                  ${this.hass.localize(
+                  ${this.hass.localize("ui.panel.config.common.learn_more")}
-                    "ui.panel.config.automation.picker.learn_more"
-                  )}
                 </ha-button>
               </a>
             </div>`
@@ -513,7 +513,9 @@ class HaAutomationPicker extends LitElement {
             target="_blank"
             rel="noreferrer"
           >
-            ${this.hass.localize("ui.panel.config.common.learn_more")}
+            ${this.hass.localize(
+              "ui.panel.config.automation.picker.learn_more"
+            )}
           </a>
         </p>
       `,

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

@@ -85,8 +85,7 @@ export class HaManualAutomationEditor extends LitElement {
           ></ha-icon-button>
         </a>
       </div>
-      ${!this.hass.userData?.showAdvanced &&
+      ${!ensureArray(this.config.trigger)?.length
-      !ensureArray(this.config.trigger)?.length
         ? html`<p>
             ${this.hass.localize(
               "ui.panel.config.automation.editor.triggers.description"
@@ -125,8 +124,7 @@ export class HaManualAutomationEditor extends LitElement {
           ></ha-icon-button>
         </a>
       </div>
-      ${!this.hass.userData?.showAdvanced &&
+      ${!ensureArray(this.config.condition)?.length
-      !ensureArray(this.config.condition)?.length
         ? html`<p>
             ${this.hass.localize(
               "ui.panel.config.automation.editor.conditions.description",
@@ -165,8 +163,7 @@ export class HaManualAutomationEditor extends LitElement {
           </a>
         </div>
       </div>
-      ${!this.hass.userData?.showAdvanced &&
+      ${!ensureArray(this.config.action)?.length
-      !ensureArray(this.config.action)?.length
         ? html`<p>
             ${this.hass.localize(
               "ui.panel.config.automation.editor.actions.description"

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

@@ -298,7 +298,8 @@ export default class HaAutomationTrigger extends LitElement {
           overflow: hidden;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding: 12px;
         }
         .handle ha-svg-icon {

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

@@ -285,7 +285,8 @@ class HaInputSelectForm extends LitElement {
           margin-bottom: 8px;
         }
         .handle {
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding-right: 12px;
         }
         .handle ha-svg-icon {

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

@@ -265,9 +265,7 @@ class HaSceneDashboard extends LitElement {
                 rel="noreferrer"
               >
                 <ha-button>
-                  ${this.hass.localize(
+                  ${this.hass.localize("ui.panel.config.common.learn_more")}
-                    "ui.panel.config.scene.picker.learn_more"
-                  )}
                 </ha-button>
               </a>
             </div>`
@@ -370,7 +368,7 @@ class HaSceneDashboard extends LitElement {
             target="_blank"
             rel="noreferrer"
           >
-            ${this.hass.localize("ui.panel.config.common.learn_more")}
+            ${this.hass.localize("ui.panel.config.scene.picker.learn_more")}
           </a>
         </p>
       `,

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

@@ -294,9 +294,7 @@ class HaScriptPicker extends LitElement {
                 rel="noreferrer"
               >
                 <ha-button>
-                  ${this.hass.localize(
+                  ${this.hass.localize("ui.panel.config.common.learn_more")}
-                    "ui.panel.config.script.picker.learn_more"
-                  )}
                 </ha-button>
               </a>
             </div>`
@@ -420,7 +418,7 @@ class HaScriptPicker extends LitElement {
             target="_blank"
             rel="noreferrer"
           >
-            ${this.hass.localize("ui.panel.config.common.learn_more")}
+            ${this.hass.localize("ui.panel.config.script.picker.learn_more")}
           </a>
         </p>
       `,

src/panels/lovelace/cards/hui-todo-list-card.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-list/mwc-list";
+import type { List } from "@material/mwc-list/mwc-list";
 import {
   mdiClock,
   mdiDelete,
@@ -56,6 +57,7 @@ import { findEntities } from "../common/find-entities";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { TodoListCardConfig } from "./types";
+import { sortableStyles } from "../../../resources/ha-sortable-style";
 
 @customElement("hui-todo-list-card")
 export class HuiTodoListCard extends LitElement implements LovelaceCard {
@@ -248,7 +250,9 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
                         graphic="icon"
                       >
                         ${this.hass!.localize(
-                          "ui.panel.lovelace.cards.todo-list.reorder_items"
+                          this._reordering
+                            ? "ui.panel.lovelace.cards.todo-list.exit_reorder_items"
+                            : "ui.panel.lovelace.cards.todo-list.reorder_items"
                         )}
                         <ha-svg-icon
                           slot="graphic"
@@ -466,18 +470,29 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
     });
   }
 
-  private _completeItem(ev): void {
+  private async _completeItem(ev): Promise<void> {
     const item = this._getItem(ev.currentTarget.itemId);
     if (!item) {
       return;
     }
-    updateItem(this.hass!, this._entityId!, {
+    await updateItem(this.hass!, this._entityId!, {
       ...item,
       status:
         item.status === TodoItemStatus.NeedsAction
           ? TodoItemStatus.Completed
           : TodoItemStatus.NeedsAction,
     });
+    await this.updateComplete;
+    const newList: List = this.shadowRoot!.querySelector(
+      item.status === TodoItemStatus.NeedsAction ? "#checked" : "#unchecked"
+    )!;
+    await newList.updateComplete;
+    const items =
+      item.status === TodoItemStatus.NeedsAction
+        ? this._getCheckedItems(this._items)
+        : this._getUncheckedItems(this._items);
+    const index = items.findIndex((itm) => itm.uid === item.uid);
+    newList.focusItemAtIndex(index);
   }
 
   private async _clearCompletedItems(): Promise<void> {
@@ -605,7 +620,9 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
+    return [
+      sortableStyles,
+      css`
         ha-card {
           height: 100%;
           box-sizing: border-box;
@@ -727,7 +744,8 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
         }
 
         .handle {
-        cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           height: 24px;
           padding: 16px 4px;
         }
@@ -759,7 +777,8 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
         .warning {
           color: var(--error-color);
         }
-    `;
+      `,
+    ];
   }
 }
 

src/panels/lovelace/components/hui-entity-editor.ts

@@ -181,7 +181,8 @@ export class HuiEntityEditor extends LitElement {
         }
         .entity .handle {
           padding-right: 8px;
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding-inline-end: 8px;
           padding-inline-start: initial;
           direction: var(--direction);

src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts

@@ -460,7 +460,8 @@ export class HuiCardFeaturesEditor extends LitElement {
         }
         .feature .handle {
           padding-right: 8px;
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding-inline-end: 8px;
           padding-inline-start: initial;
           direction: var(--direction);

src/panels/lovelace/editor/hui-entities-card-row-editor.ts

@@ -243,7 +243,8 @@ export class HuiEntitiesCardRowEditor extends LitElement {
 
         .entity .handle {
           padding-right: 8px;
-          cursor: move;
+          cursor: move; /* fallback if grab cursor is unsupported */
+          cursor: grab;
           padding-inline-end: 8px;
           padding-inline-start: initial;
           direction: var(--direction);

src/panels/todo/dialog-todo-item-editor.ts

@@ -99,7 +99,6 @@ class DialogTodoItemEditor extends LitElement {
         open
         @closed=${this.closeDialog}
         scrimClickAction
-        escapeKeyAction
         .heading=${createCloseHeading(
           this.hass,
           isCreate

src/resources/ha-sortable-style.ts

@@ -34,14 +34,22 @@ export const sortableStyles = css`
 
   .sortable-fallback {
     display: none;
+    opacity: 0;
   }
 
   .sortable-ghost {
+    border: 2px solid var(--primary-color);
+    background: rgba(var(--rgb-primary-color), 0.25);
+    border-radius: 4px;
     opacity: 0.4;
   }
 
-  .sortable-fallback {
+  .sortable-drag {
-    opacity: 0;
+    border-radius: 4px;
+    opacity: 1;
+    background: var(--card-background-color);
+    box-shadow: 0px 4px 8px 3px #00000026;
+    cursor: grabbing;
   }
 
   @keyframes keyframes1 {

src/translations/en.json

@@ -1119,8 +1119,8 @@
         },
         "valve": {
           "switch_mode": {
-            "button": "[%key:ui::dialogs::more_info_control::valve::switch_mode::button%]",
+            "button": "[%key:ui::dialogs::more_info_control::cover::switch_mode::button%]",
-            "position": "[%key:ui::dialogs::more_info_control::valve::switch_mode::position%]"
+            "position": "[%key:ui::dialogs::more_info_control::cover::switch_mode::position%]"
           }
         }
       },
@@ -2759,7 +2759,7 @@
                     "preset_mode": "Preset mode"
                   },
                   "description": {
-                    "picker": "If something happens to a device. Great way to start."
+                    "picker": "If a device is in a certain state. Great way to start."
                   }
                 },
                 "not": {
@@ -4768,6 +4768,7 @@
             "add_item": "Add item",
             "today": "Today",
             "reorder_items": "Reorder items",
+            "exit_reorder_items": "Exit reorder mode",
             "drag_and_drop": "Drag and drop",
             "delete_item": "Delete item",
             "delete_confirm_title": "Remove completed items?",