20240104.0 (#19284)

* Fix thermostat and humidifier card rendering when off

* Fix action color

package.json

@@ -81,8 +81,8 @@
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
     "@material/web": "=1.1.1",
-    "@mdi/js": "7.3.67",
-    "@mdi/svg": "7.3.67",
+    "@mdi/js": "7.4.47",
+    "@mdi/svg": "7.4.47",
     "@polymer/paper-input": "3.2.1",
     "@polymer/paper-item": "3.0.1",
     "@polymer/paper-listbox": "3.0.1",
@@ -119,7 +119,7 @@
     "leaflet-draw": "1.0.4",
     "lit": "2.8.0",
     "luxon": "3.4.4",
-    "marked": "11.1.0",
+    "marked": "11.1.1",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "0.3.2",
@@ -190,7 +190,7 @@
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",
     "babel-plugin-template-html-minifier": "4.1.0",
-    "chai": "4.3.10",
+    "chai": "5.0.0",
     "del": "7.1.0",
     "eslint": "8.56.0",
     "eslint-config-airbnb-base": "15.0.0",
@@ -223,19 +223,19 @@
     "map-stream": "0.0.7",
     "mocha": "10.2.0",
     "object-hash": "3.0.0",
-    "open": "10.0.1",
+    "open": "10.0.2",
     "pinst": "3.0.0",
     "prettier": "3.1.1",
     "rollup": "2.79.1",
     "rollup-plugin-string": "3.0.0",
     "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-visualizer": "5.11.0",
+    "rollup-plugin-visualizer": "5.12.0",
     "serve-handler": "6.1.5",
     "sinon": "17.0.1",
     "source-map-url": "0.4.1",
     "systemjs": "6.14.2",
     "tar": "6.2.0",
-    "terser-webpack-plugin": "5.3.9",
+    "terser-webpack-plugin": "5.3.10",
     "ts-lit-plugin": "2.0.1",
     "typescript": "5.3.3",
     "vinyl-buffer": "1.0.1",

pyproject.toml

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

src/auth/ha-auth-textfield.ts

@@ -47,7 +47,7 @@ export class HaAuthTextField extends HaTextField {
     // TODO: live() directive needs casting for lit-analyzer
     // https://github.com/runem/lit-analyzer/pull/91/files
     // TODO: lit-analyzer labels min/max as (number|string) instead of string
-    return html` <input
+    return html`<input
       aria-labelledby=${ifDefined(ariaLabelledbyOrUndef)}
       aria-controls=${ifDefined(ariaControlsOrUndef)}
       aria-describedby=${ifDefined(ariaDescribedbyOrUndef)}

src/common/const.ts

@@ -29,6 +29,7 @@ import {
   mdiFlash,
   mdiFlower,
   mdiFormatListBulleted,
+  mdiFormatListCheckbox,
   mdiFormTextbox,
   mdiGauge,
   mdiGoogleAssistant,
@@ -64,6 +65,7 @@ import {
   mdiTransmissionTower,
   mdiWater,
   mdiWaterPercent,
+  mdiWeatherPartlyCloudy,
   mdiWeatherPouring,
   mdiWeatherRainy,
   mdiWeatherWindy,
@@ -128,6 +130,7 @@ export const FIXED_DOMAIN_ICONS = {
   updater: mdiCloudUpload,
   vacuum: mdiRobotVacuum,
   wake_word: mdiChatSleep,
+  weather: mdiWeatherPartlyCloudy,
   zone: mdiMapMarkerRadius,
 };
 
@@ -166,6 +169,7 @@ export const FIXED_DEVICE_CLASS_ICONS = {
   precipitation_intensity: mdiWeatherPouring,
   pressure: mdiGauge,
   reactive_power: mdiFlash,
+  shopping_List: mdiFormatListCheckbox,
   signal_strength: mdiWifi,
   sound_pressure: mdiEarHearing,
   speed: mdiSpeedometer,
@@ -250,6 +254,7 @@ export const DOMAINS_INPUT_ROW = [
   "text",
   "time",
   "vacuum",
+  "valve",
 ];
 
 /** States that we consider "off". */
@@ -268,6 +273,7 @@ export const DOMAINS_TOGGLE = new Set([
   "group",
   "automation",
   "humidifier",
+  "valve",
 ]);
 
 /** Domains that have a dynamic entity image / picture. */

src/common/entity/get_states.ts

@@ -50,6 +50,7 @@ export const FIXED_DOMAIN_STATES = {
   timer: ["active", "idle", "paused"],
   update: ["on", "off"],
   vacuum: ["cleaning", "docked", "error", "idle", "paused", "returning"],
+  valve: ["closed", "closing", "open", "opening"],
   weather: [
     "clear-night",
     "cloudy",

src/components/ha-date-input.ts

@@ -18,7 +18,8 @@ export interface datePickerDialogParams {
   max?: string;
   locale?: string;
   firstWeekday?: number;
-  onChange: (value: string) => void;
+  canClear?: boolean;
+  onChange: (value: string | undefined) => void;
 }
 
 const showDatePickerDialog = (
@@ -49,6 +50,8 @@ export class HaDateInput extends LitElement {
 
   @property() public helper?: string;
 
+  @property({ type: Boolean }) public canClear?: boolean;
+
   render() {
     return html`<ha-textfield
       .label=${this.label}
@@ -58,6 +61,7 @@ export class HaDateInput extends LitElement {
       helperPersistent
       readonly
       @click=${this._openDialog}
+      @keydown=${this._keyDown}
       .value=${this.value
         ? formatDateNumeric(
             new Date(`${this.value.split("T")[0]}T00:00:00`),
@@ -82,13 +86,23 @@ export class HaDateInput extends LitElement {
       min: this.min || "1970-01-01",
       max: this.max,
       value: this.value,
+      canClear: this.canClear,
       onChange: (value) => this._valueChanged(value),
       locale: this.locale.language,
       firstWeekday: firstWeekdayIndex(this.locale),
     });
   }
 
-  private _valueChanged(value: string) {
+  private _keyDown(ev: KeyboardEvent) {
+    if (!this.canClear) {
+      return;
+    }
+    if (["Backspace", "Delete"].includes(ev.key)) {
+      this._valueChanged(undefined);
+    }
+  }
+
+  private _valueChanged(value: string | undefined) {
     if (this.value !== value) {
       this.value = value;
       fireEvent(this, "change");

src/components/ha-dialog-date-picker.ts

@@ -50,6 +50,15 @@ export class HaDialogDatePicker extends LitElement {
         @datepicker-value-updated=${this._valueChanged}
         .firstDayOfWeek=${this._params.firstWeekday}
       ></app-datepicker>
+      ${this._params.canClear
+        ? html`<mwc-button
+            slot="secondaryAction"
+            @click=${this._clear}
+            class="warning"
+          >
+            ${this.hass.localize("ui.dialogs.date-picker.clear")}
+          </mwc-button>`
+        : nothing}
       <mwc-button slot="secondaryAction" @click=${this._setToday}>
         ${this.hass.localize("ui.dialogs.date-picker.today")}
       </mwc-button>
@@ -66,6 +75,11 @@ export class HaDialogDatePicker extends LitElement {
     this._value = ev.detail.value;
   }
 
+  private _clear() {
+    this._params?.onChange(undefined);
+    this.closeDialog();
+  }
+
   private _setToday() {
     const today = new Date();
     this._value = format(today, "yyyy-MM-dd");

src/components/ha-labeled-slider.ts

@@ -10,9 +10,9 @@ class HaLabeledSlider extends LitElement {
 
   @property() public caption?: string;
 
-  @property() public disabled?: boolean;
+  @property({ type: Boolean }) public disabled = false;
 
-  @property() public required?: boolean;
+  @property({ type: Boolean }) public required = true;
 
   @property() public min: number = 0;
 

src/components/ha-service-control.ts

@@ -4,7 +4,14 @@ import {
   HassServices,
   HassServiceTarget,
 } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  nothing,
+} from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../common/array/ensure-array";
@@ -83,6 +90,8 @@ export class HaServiceControl extends LitElement {
 
   @property({ type: Boolean }) public showAdvanced?: boolean;
 
+  @property({ type: Boolean, reflect: true }) public hidePicker?: boolean;
+
   @state() private _value!: this["value"];
 
   @state() private _checkedKeys = new Set();
@@ -363,12 +372,14 @@ export class HaServiceControl extends LitElement {
         )) ||
       serviceData?.description;
 
-    return html`<ha-service-picker
-        .hass=${this.hass}
-        .value=${this._value?.service}
-        .disabled=${this.disabled}
-        @value-changed=${this._serviceChanged}
-      ></ha-service-picker>
+    return html`${this.hidePicker
+        ? nothing
+        : html`<ha-service-picker
+            .hass=${this.hass}
+            .value=${this._value?.service}
+            .disabled=${this.disabled}
+            @value-changed=${this._serviceChanged}
+          ></ha-service-picker>`}
       <div class="description">
         ${description ? html`<p>${description}</p>` : ""}
         ${this._manifest
@@ -735,6 +746,9 @@ export class HaServiceControl extends LitElement {
         margin: var(--service-control-padding, 0 16px);
         padding: 16px 0;
       }
+      :host([hidePicker]) p {
+        padding-top: 0;
+      }
       .checkbox-spacer {
         width: 32px;
       }

src/components/media-player/ha-media-upload-button.ts

@@ -53,7 +53,7 @@ class MediaUploadButton extends LitElement {
         ${this._uploading > 0
           ? html`
               <ha-circular-progress
-                size="tiny"
+                size="small"
                 indeterminate
                 area-label="Uploading"
                 slot="icon"

src/components/trace/ha-trace-path-details.ts

@@ -133,7 +133,7 @@ export class HaTracePathDetails extends LitElement {
 
           if (result?.enabled === false) {
             return html`${this.hass!.localize(
-              "ui.panel.config.automation.trace.path.disabled_node"
+              "ui.panel.config.automation.trace.path.disabled_step"
             )}`;
           }
 
@@ -208,11 +208,19 @@ export class HaTracePathDetails extends LitElement {
     const paths = this.trace.trace;
     const data: ActionTraceStep[] = paths[this.selected.path];
 
+    if (data === undefined) {
+      return html`<div class="padded-box">
+        ${this.hass!.localize(
+          "ui.panel.config.automation.trace.path.step_not_executed"
+        )}
+      </div>`;
+    }
+
     return html`
       <div class="padded-box">
         ${data.map(
           (trace, idx) => html`
-            ${idx > 0
+            ${data.length > 1
               ? html`<p>
                   ${this.hass!.localize(
                     "ui.panel.config.automation.trace.path.iteration",
@@ -240,7 +248,7 @@ export class HaTracePathDetails extends LitElement {
     if (index === -1) {
       return html`<div class="padded-box">
         ${this.hass!.localize(
-          "ui.panel.config.automation.trace.path.node_not_tracked"
+          "ui.panel.config.automation.trace.path.step_not_executed"
         )}
       </div>`;
     }

src/data/script.ts

@@ -52,6 +52,7 @@ export const serviceActionStruct: Describe<ServiceAction> = assign(
     target: optional(targetStruct),
     data: optional(object()),
     response_variable: optional(string()),
+    metadata: optional(object()),
   })
 );
 
@@ -133,6 +134,7 @@ export interface ServiceAction extends BaseAction {
   target?: HassServiceTarget;
   data?: Record<string, unknown>;
   response_variable?: string;
+  metadata?: Record<string, unknown>;
 }
 
 export interface DeviceAction extends BaseAction {

src/data/script_i18n.ts

@@ -168,6 +168,18 @@ const tryDescribeAction = <T extends ActionType>(
       const service =
         hass.localize(`component.${domain}.services.${serviceName}.name`) ||
         hass.services[domain][serviceName]?.name;
+
+      if (config.metadata) {
+        return hass.localize(
+          `${actionTranslationBaseKey}.service.description.service_name`,
+          {
+            domain: domainToName(hass.localize, domain),
+            name: service || config.service,
+            targets: formatListWithAnds(hass.locale, targets),
+          }
+        );
+      }
+
       return hass.localize(
         `${actionTranslationBaseKey}.service.description.service_based_on_name`,
         {
@@ -404,7 +416,9 @@ const tryDescribeAction = <T extends ActionType>(
   if (actionType === "device_action") {
     const config = action as DeviceAction;
     if (!config.device_id) {
-      return "Device action";
+      return hass.localize(
+        `${actionTranslationBaseKey}.device_id.description.no_device`
+      );
     }
     const localized = localizeDeviceAutomationAction(
       hass,

src/data/todo.ts

@@ -18,8 +18,8 @@ export interface TodoItem {
   uid: string;
   summary: string;
   status: TodoItemStatus;
-  description?: string;
-  due?: string;
+  description?: string | null;
+  due?: string | null;
 }
 
 export const enum TodoListEntityFeature {
@@ -83,9 +83,12 @@ export const updateItem = (
       item: item.uid,
       rename: item.summary,
       status: item.status,
-      description: item.description || undefined,
+      description: item.description,
       due_datetime: item.due?.includes("T") ? item.due : undefined,
-      due_date: item.due?.includes("T") ? undefined : item.due || undefined,
+      due_date:
+        item.due === undefined || item.due?.includes("T")
+          ? undefined
+          : item.due,
     },
     { entity_id }
   );
@@ -102,7 +105,10 @@ export const createItem = (
       item: item.summary,
       description: item.description || undefined,
       due_datetime: item.due?.includes("T") ? item.due : undefined,
-      due_date: item.due?.includes("T") ? undefined : item.due,
+      due_date:
+        item.due === undefined || item.due?.includes("T")
+          ? undefined
+          : item.due,
     },
     { entity_id }
   );

src/data/valve.ts

@@ -14,14 +14,20 @@ export const enum ValveEntityFeature {
 }
 
 export function isFullyOpen(stateObj: ValveEntity) {
-  if (stateObj.attributes.current_position !== undefined) {
+  if (
+    stateObj.attributes.current_position !== undefined &&
+    stateObj.attributes.current_position !== null
+  ) {
     return stateObj.attributes.current_position === 100;
   }
   return stateObj.state === "open";
 }
 
 export function isFullyClosed(stateObj: ValveEntity) {
-  if (stateObj.attributes.current_position !== undefined) {
+  if (
+    stateObj.attributes.current_position !== undefined &&
+    stateObj.attributes.current_position !== null
+  ) {
     return stateObj.attributes.current_position === 0;
   }
   return stateObj.state === "closed";

src/panels/calendar/dialog-calendar-event-editor.ts

@@ -144,9 +144,9 @@ class DialogCalendarEventEditor extends LitElement {
         escapeKeyAction
         .heading=${createCloseHeading(
           this.hass,
-          isCreate
-            ? this.hass.localize("ui.components.calendar.event.add")
-            : this._summary
+          this.hass.localize(
+            `ui.components.calendar.event.${isCreate ? "add" : "edit"}`
+          )
         )}
       >
         <div class="content">

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

@@ -29,6 +29,8 @@ import { classMap } from "lit/directives/class-map";
 import { storage } from "../../../../common/decorators/storage";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { computeDomain } from "../../../../common/entity/compute_domain";
+import { domainIconWithoutDefault } from "../../../../common/entity/domain_icon";
 import { capitalizeFirstLetter } from "../../../../common/string/capitalize-first-letter";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-alert";
@@ -190,7 +192,13 @@ export default class HaAutomationActionRow extends LitElement {
           <h3 slot="header">
             <ha-svg-icon
               class="action-icon"
-              .path=${ACTION_ICONS[type!]}
+              .path=${type === "service" &&
+              "service" in this.action &&
+              this.action.service
+                ? domainIconWithoutDefault(
+                    computeDomain(this.action.service as string)
+                  ) || ACTION_ICONS[type!]
+                : ACTION_ICONS[type!]}
             ></ha-svg-icon>
             ${capitalizeFirstLetter(
               describeAction(this.hass, this._entityReg, this.action)

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

@@ -191,6 +191,7 @@ export default class HaAutomationAction extends LitElement {
     } else if (isService(action)) {
       actions = this.actions.concat({
         service: getService(action),
+        metadata: {},
       });
     } else {
       const elClass = customElements.get(

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

@@ -1,4 +1,4 @@
-import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
@@ -9,10 +9,10 @@ import type { HomeAssistant } from "../../../../../types";
 import "../ha-automation-action";
 import type { ActionElement } from "../ha-automation-action-row";
 
+import { isTemplate } from "../../../../../common/string/has-template";
 import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import "../../../../../components/ha-form/ha-form";
 import type { SchemaUnion } from "../../../../../components/ha-form/types";
-import { hasTemplate } from "../../../../../common/string/has-template";
 
 const OPTIONS = ["count", "while", "until", "for_each"] as const;
 
@@ -32,22 +32,13 @@ export class HaRepeatAction extends LitElement implements ActionElement {
     return { repeat: { count: 2, sequence: [] } };
   }
 
-  public willUpdate(changedProperties: PropertyValues) {
-    if (!changedProperties.has("action")) {
-      return;
-    }
-    // Check for templates in action. If found, revert to YAML mode.
-    if (this.action && hasTemplate(this.action)) {
-      fireEvent(
-        this,
-        "ui-mode-not-available",
-        Error(this.hass.localize("ui.errors.config.no_template_editor_support"))
-      );
-    }
-  }
-
   private _schema = memoizeOne(
-    (localize: LocalizeFunc, type: string, reOrderMode: boolean) =>
+    (
+      localize: LocalizeFunc,
+      type: string,
+      reOrderMode: boolean,
+      template: boolean
+    ) =>
       [
         {
           name: "type",
@@ -68,7 +59,9 @@ export class HaRepeatAction extends LitElement implements ActionElement {
               {
                 name: "count",
                 required: true,
-                selector: { number: { mode: "box", min: 1 } },
+                selector: template
+                  ? ({ template: {} } as const)
+                  : ({ number: { mode: "box", min: 1 } } as const),
               },
             ] as const)
           : []),
@@ -104,7 +97,10 @@ export class HaRepeatAction extends LitElement implements ActionElement {
     const schema = this._schema(
       this.hass.localize,
       type ?? "count",
-      this.reOrderMode
+      this.reOrderMode,
+      "count" in action && typeof action.count === "string"
+        ? isTemplate(action.count)
+        : false
     );
     const data = { ...action, type };
     return html`<ha-form

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

@@ -1,14 +1,21 @@
 import "@material/mwc-list/mwc-list";
 import { mdiClose, mdiContentPaste, mdiPlus } from "@mdi/js";
 import Fuse, { IFuseOptions } from "fuse.js";
-import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
+import {
+  CSSResultGroup,
+  LitElement,
+  PropertyValues,
+  css,
+  html,
+  nothing,
+} from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { domainIcon } from "../../../common/entity/domain_icon";
+import { domainIconWithoutDefault } from "../../../common/entity/domain_icon";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
 import { stringCompare } from "../../../common/string/compare";
 import { LocalizeFunc } from "../../../common/translations/localize";
@@ -38,10 +45,13 @@ import { TRIGGER_GROUPS, TRIGGER_ICONS } from "../../../data/trigger";
 import { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
 import {
   AddAutomationElementDialogParams,
   PASTE_VALUE,
 } from "./show-add-automation-element-dialog";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { deepEqual } from "../../../common/util/deep-equal";
 
 const TYPES = {
   trigger: { groups: TRIGGER_GROUPS, icons: TRIGGER_ICONS },
@@ -59,7 +69,8 @@ interface ListItem {
   key: string;
   name: string;
   description: string;
-  icon: string;
+  icon?: string;
+  image?: string;
   group: boolean;
 }
 
@@ -79,6 +90,8 @@ const ENTITY_DOMAINS_OTHER = new Set([
   "image_processing",
 ]);
 
+const ENTITY_DOMAINS_MAIN = new Set(["notify"]);
+
 @customElement("add-automation-element-dialog")
 class DialogAddAutomationElement extends LitElement implements HassDialog {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -93,13 +106,15 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
 
   @state() private _manifests?: DomainManifestLookup;
 
+  @state() private _domains?: Set<string>;
+
   @query("ha-dialog") private _dialog?: HaDialog;
 
   private _fullScreen = false;
 
-  private _width?: number;
+  @state() private _width?: number;
 
-  private _height?: number;
+  @state() private _height?: number;
 
   public showDialog(params): void {
     this._params = params;
@@ -107,6 +122,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
     if (this._params?.type === "action") {
       this.hass.loadBackendTranslation("services");
       this._fetchManifests();
+      this._calculateUsedDomains();
     }
     this._fullScreen = matchMedia(
       "all and (max-width: 450px), all and (max-height: 500px)"
@@ -124,8 +140,19 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
     this._prev = undefined;
     this._filter = "";
     this._manifests = undefined;
+    this._domains = undefined;
   }
 
+  private _getGroups = (
+    type: AddAutomationElementDialogParams["type"],
+    group: string | undefined
+  ): AutomationElementGroup =>
+    group
+      ? isService(group)
+        ? {}
+        : TYPES[type].groups[group].members!
+      : TYPES[type].groups;
+
   private _convertToItem = (
     key: string,
     options,
@@ -158,11 +185,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
       services: HomeAssistant["services"],
       manifests?: DomainManifestLookup
     ): ListItem[] => {
-      const groups: AutomationElementGroup = group
-        ? isService(group)
-          ? {}
-          : TYPES[type].groups[group].members!
-        : TYPES[type].groups;
+      const groups = this._getGroups(type, group);
 
       const flattenGroups = (grp: AutomationElementGroup) =>
         Object.entries(grp).map(([key, options]) =>
@@ -192,21 +215,23 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
     (
       type: AddAutomationElementDialogParams["type"],
       group: string | undefined,
+      domains: Set<string> | undefined,
       localize: LocalizeFunc,
       services: HomeAssistant["services"],
       manifests?: DomainManifestLookup
     ): ListItem[] => {
       if (type === "action" && isService(group)) {
-        const result = this._services(localize, services, manifests, group);
+        let result = this._services(localize, services, manifests, group);
         if (group === `${SERVICE_PREFIX}media_player`) {
-          result.unshift(this._convertToItem("play_media", {}, type, localize));
+          result = [
+            this._convertToItem("play_media", {}, type, localize),
+            ...result,
+          ];
         }
         return result;
       }
 
-      const groups: AutomationElementGroup = group
-        ? TYPES[type].groups[group].members!
-        : TYPES[type].groups;
+      const groups = this._getGroups(type, group);
 
       const result = Object.entries(groups).map(([key, options]) =>
         this._convertToItem(key, options, type, localize)
@@ -215,15 +240,33 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
       if (type === "action") {
         if (!this._group) {
           result.unshift(
-            ...this._serviceGroups(localize, services, manifests, undefined)
+            ...this._serviceGroups(
+              localize,
+              services,
+              manifests,
+              domains,
+              undefined
+            )
           );
         } else if (this._group === "helpers") {
           result.unshift(
-            ...this._serviceGroups(localize, services, manifests, "helper")
+            ...this._serviceGroups(
+              localize,
+              services,
+              manifests,
+              domains,
+              "helper"
+            )
           );
         } else if (this._group === "other") {
           result.unshift(
-            ...this._serviceGroups(localize, services, manifests, "other")
+            ...this._serviceGroups(
+              localize,
+              services,
+              manifests,
+              domains,
+              "other"
+            )
           );
         }
       }
@@ -243,44 +286,54 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
     }
   );
 
-  private _serviceGroups = memoizeOne(
-    (
-      localize: LocalizeFunc,
-      services: HomeAssistant["services"],
-      manifests: DomainManifestLookup | undefined,
-      type: "helper" | "other" | undefined
-    ): ListItem[] => {
-      if (!services || !manifests) {
-        return [];
-      }
-      const result: ListItem[] = [];
-      Object.keys(services)
-        .sort()
-        .forEach((domain) => {
-          const manifest = manifests[domain];
-          if (
-            (type === undefined &&
-              manifest?.integration_type === "entity" &&
-              !ENTITY_DOMAINS_OTHER.has(domain)) ||
-            (type === "helper" && manifest?.integration_type === "helper") ||
-            (type === "other" &&
-              (ENTITY_DOMAINS_OTHER.has(domain) ||
-                !["helper", "entity"].includes(
-                  manifest?.integration_type || ""
-                )))
-          ) {
-            result.push({
-              group: true,
-              icon: domainIcon(domain),
-              key: `${SERVICE_PREFIX}${domain}`,
-              name: domainToName(localize, domain, manifest),
-              description: "",
-            });
-          }
-        });
-      return result;
+  private _serviceGroups = (
+    localize: LocalizeFunc,
+    services: HomeAssistant["services"],
+    manifests: DomainManifestLookup | undefined,
+    domains: Set<string> | undefined,
+    type: "helper" | "other" | undefined
+  ): ListItem[] => {
+    if (!services || !manifests) {
+      return [];
     }
-  );
+    const result: ListItem[] = [];
+    Object.keys(services).forEach((domain) => {
+      const manifest = manifests[domain];
+      const domainUsed = !domains ? true : domains.has(domain);
+      if (
+        (type === undefined &&
+          (ENTITY_DOMAINS_MAIN.has(domain) ||
+            (manifest?.integration_type === "entity" &&
+              domainUsed &&
+              !ENTITY_DOMAINS_OTHER.has(domain)))) ||
+        (type === "helper" && manifest?.integration_type === "helper") ||
+        (type === "other" &&
+          !ENTITY_DOMAINS_MAIN.has(domain) &&
+          (ENTITY_DOMAINS_OTHER.has(domain) ||
+            (!domainUsed && manifest?.integration_type === "entity") ||
+            !["helper", "entity"].includes(manifest?.integration_type || "")))
+      ) {
+        const icon = domainIconWithoutDefault(domain);
+        result.push({
+          group: true,
+          icon,
+          image: !icon
+            ? brandsUrl({
+                domain,
+                type: "icon",
+                darkOptimized: this.hass.themes?.darkMode,
+              })
+            : undefined,
+          key: `${SERVICE_PREFIX}${domain}`,
+          name: domainToName(localize, domain, manifest),
+          description: "",
+        });
+      }
+    });
+    return result.sort((a, b) =>
+      stringCompare(a.name, b.name, this.hass.locale.language)
+    );
+  };
 
   private _services = memoizeOne(
     (
@@ -304,9 +357,17 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
         const services_keys = Object.keys(services[dmn]);
 
         for (const service of services_keys) {
+          const icon = domainIconWithoutDefault(dmn);
           result.push({
             group: false,
-            icon: domainIcon(dmn),
+            icon,
+            image: !icon
+              ? brandsUrl({
+                  domain: dmn,
+                  type: "icon",
+                  darkOptimized: this.hass.themes?.darkMode,
+                })
+              : undefined,
             key: `${SERVICE_PREFIX}${dmn}.${service}`,
             name: `${domain ? "" : `${domainToName(localize, dmn)}: `}${
               this.hass.localize(`component.${dmn}.services.${service}.name`) ||
@@ -362,6 +423,13 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
     this._manifests = manifests;
   }
 
+  private _calculateUsedDomains() {
+    const domains = new Set(Object.keys(this.hass.states).map(computeDomain));
+    if (!deepEqual(domains, this._domains)) {
+      this._domains = domains;
+    }
+  }
+
   protected _opened(): void {
     // Store the width and height so that when we search, box doesn't jump
     const boundingRect =
@@ -370,6 +438,16 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
     this._height = boundingRect?.height;
   }
 
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (
+      this._params?.type === "action" &&
+      changedProperties.has("hass") &&
+      changedProperties.get("hass")?.states !== this.hass.states
+    ) {
+      this._calculateUsedDomains();
+    }
+  }
+
   protected render() {
     if (!this._params) {
       return nothing;
@@ -387,6 +465,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
       : this._getGroupItems(
           this._params.type,
           this._group,
+          this._domains,
           this.hass.localize,
           this.hass.services,
           this._manifests
@@ -499,7 +578,18 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
               >
                 ${item.name}
                 <span slot="secondary">${item.description}</span>
-                <ha-svg-icon slot="graphic" .path=${item.icon}></ha-svg-icon>
+                ${item.icon
+                  ? html`<ha-svg-icon
+                      slot="graphic"
+                      .path=${item.icon}
+                    ></ha-svg-icon>`
+                  : html`<img
+                      alt=""
+                      slot="graphic"
+                      src=${item.image}
+                      crossorigin="anonymous"
+                      referrerpolicy="no-referrer"
+                    />`}
                 ${item.group
                   ? html`<ha-icon-next slot="meta"></ha-icon-next>`
                   : html`<ha-svg-icon
@@ -515,6 +605,7 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
   }
 
   private _back() {
+    this._dialog!.scrollToPos(0, 0);
     if (this._filter) {
       this._filter = "";
       return;
@@ -563,6 +654,10 @@ class DialogAddAutomationElement extends LitElement implements HassDialog {
         ha-icon-next {
           width: 24px;
         }
+        mwc-list {
+          max-height: 468px;
+          max-width: 100vw;
+        }
         search-input {
           display: block;
           margin: 0 16px;

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

@@ -168,6 +168,7 @@ export class HaDeviceCondition extends LitElement {
     }
 
     ha-form {
+      display: block;
       margin-top: 24px;
     }
   `;

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

@@ -174,6 +174,7 @@ export class HaDeviceTrigger extends LitElement {
     }
 
     ha-form {
+      display: block;
       margin-top: 24px;
     }
   `;

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

@@ -118,6 +118,8 @@ const OVERRIDE_DEVICE_CLASSES = {
       "carbon_monoxide",
       "moisture",
     ], // Alarm
+    ["connectivity"], // Connectivity
+    ["update"], // Update
   ],
 };
 

src/panels/config/integrations/dialog-add-integration.ts

@@ -340,7 +340,9 @@ class AddIntegrationDialog extends LitElement {
       !("integrations" in integration) &&
       !this._flowsInProgress?.length
     ) {
-      return "What type of device is it?";
+      return this.hass.localize(
+        "ui.panel.config.integrations.what_device_type"
+      );
     }
     if (
       integration &&
@@ -348,9 +350,11 @@ class AddIntegrationDialog extends LitElement {
       !("integrations" in integration) &&
       this._flowsInProgress?.length
     ) {
-      return "Want to add these discovered devices?";
+      return this.hass.localize(
+        "ui.panel.config.integrations.confirm_add_discovered"
+      );
     }
-    return "What do you want to add?";
+    return this.hass.localize("ui.panel.config.integrations.what_to_add");
   }
 
   private _renderIntegration(

src/panels/config/repairs/dialog-system-information.ts

@@ -326,7 +326,7 @@ class DialogSystemInformation extends LitElement {
               value = html`
                 <ha-circular-progress
                   indeterminate
-                  size="tiny"
+                  size="small"
                 ></ha-circular-progress>
               `;
             } else if (info.type === "failed") {

src/panels/config/voice-assistants/debug/assist-pipeline-run-debug.ts

@@ -247,7 +247,7 @@ export class AssistPipelineRunDebug extends LitElement {
         }
 
         // Play audio when we're done.
-        if (updatedRun.stage === "done") {
+        if (updatedRun.stage === "done" && !updatedRun.error) {
           const url = updatedRun.tts!.tts_output!.url;
           const audio = new Audio(url);
           audio.addEventListener("ended", () => {
@@ -261,7 +261,10 @@ export class AssistPipelineRunDebug extends LitElement {
             }
           });
           audio.play();
-        } else if (updatedRun.stage === "error") {
+        } else if (
+          (updatedRun.stage === "done" && updatedRun.error) ||
+          updatedRun.stage === "error"
+        ) {
           this._finished = true;
         }
       },

src/panels/config/voice-assistants/debug/assist-render-pipeline-run.ts

@@ -90,7 +90,7 @@ const renderProgress = (
       return html`❌`;
     }
     return html`
-      <ha-circular-progress size="tiny" indeterminate></ha-circular-progress>
+      <ha-circular-progress size="small" indeterminate></ha-circular-progress>
     `;
   }
 

src/panels/lovelace/cards/hui-tile-card.ts

@@ -287,21 +287,40 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
 
   @eventOptions({ passive: true })
   private handleRippleActivate(evt?: Event) {
+    if (!this.hasCardAction) return;
     this._rippleHandlers.startPress(evt);
   }
 
   private handleRippleDeactivate() {
+    if (!this.hasCardAction) return;
     this._rippleHandlers.endPress();
   }
 
   private handleRippleMouseEnter() {
+    if (!this.hasCardAction) return;
     this._rippleHandlers.startHover();
   }
 
   private handleRippleMouseLeave() {
+    if (!this.hasCardAction) return;
     this._rippleHandlers.endHover();
   }
 
+  get hasCardAction() {
+    return (
+      !this._config?.tap_action ||
+      hasAction(this._config?.tap_action) ||
+      hasAction(this._config?.hold_action) ||
+      hasAction(this._config?.double_tap_action)
+    );
+  }
+
+  get hasIconAction() {
+    return (
+      !this._config?.icon_tap_action || hasAction(this._config?.icon_tap_action)
+    );
+  }
+
   protected render() {
     if (!this._config || !this.hass) {
       return nothing;
@@ -368,8 +387,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
             hasHold: hasAction(this._config!.hold_action),
             hasDoubleClick: hasAction(this._config!.double_tap_action),
           })}
-          role="button"
-          tabindex="0"
+          role=${ifDefined(this.hasCardAction ? "button" : undefined)}
+          tabindex=${ifDefined(this.hasCardAction ? "0" : undefined)}
           aria-labelledby="info"
           @mousedown=${this.handleRippleActivate}
           @mouseup=${this.handleRippleDeactivate}
@@ -386,8 +405,8 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
         <div class="content ${classMap(contentClasses)}">
           <div
             class="icon-container"
-            role="button"
-            tabindex="0"
+            role=${ifDefined(this.hasIconAction ? "button" : undefined)}
+            tabindex=${ifDefined(this.hasIconAction ? "0" : undefined)}
             @action=${this._handleIconAction}
             .actionHandler=${actionHandler()}
           >

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

@@ -335,7 +335,7 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
           const due = item.due
             ? item.due.includes("T")
               ? new Date(item.due)
-              : endOfDay(new Date(item.due))
+              : endOfDay(new Date(`${item.due}T00:00:00`))
             : undefined;
           const today =
             due && !item.due!.includes("T") && isSameDay(new Date(), due);
@@ -476,7 +476,8 @@ export class HuiTodoListCard extends LitElement implements LovelaceCard {
       return;
     }
     await updateItem(this.hass!, this._entityId!, {
-      ...item,
+      uid: item.uid,
+      summary: item.summary,
       status:
         item.status === TodoItemStatus.NeedsAction
           ? TodoItemStatus.Completed

src/panels/lovelace/common/entity/turn-on-off-entity.ts

@@ -24,6 +24,9 @@ export const turnOnOffEntity = (
     case "scene":
       service = "turn_on";
       break;
+    case "valve":
+      service = turnOn ? "open_valve" : "close_valve";
+      break;
     default:
       service = turnOn ? "turn_on" : "turn_off";
   }

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

@@ -81,6 +81,7 @@ const EDITABLES_FEATURE_TYPES = new Set<UiFeatureTypes>([
   "humidifier-modes",
   "water-heater-operation-modes",
   "lawn-mower-commands",
+  "climate-fan-modes",
   "climate-preset-modes",
   "numeric-input",
   "update-actions",

src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts

@@ -8,6 +8,7 @@ import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-icon";
 import "../../../../components/ha-select";
+import "../../../../components/ha-alert";
 import {
   fetchConfig,
   LovelaceConfig,
@@ -104,8 +105,15 @@ export class HuiDialogSelectView extends LitElement {
               })}
             </ha-select>`
           : ""}
-        ${this._config
-          ? this._config.views.length > 1
+        ${!this._config || (this._config.views || []).length < 1
+          ? html`<ha-alert alert-type="error"
+              >${this.hass.localize(
+                this._config
+                  ? "ui.panel.lovelace.editor.select_view.no_views"
+                  : "ui.panel.lovelace.editor.select_view.no_config"
+              )}</ha-alert
+            >`
+          : this._config.views.length > 1
             ? html`
                 <mwc-list dialogInitialFocus>
                   ${this._config.views.map(
@@ -125,8 +133,7 @@ export class HuiDialogSelectView extends LitElement {
                   )}
                 </mwc-list>
               `
-            : ""
-          : html`<div>No config found.</div>`}
+            : ""}
         <mwc-button
           slot="secondaryAction"
           @click=${this.closeDialog}
@@ -134,7 +141,11 @@ export class HuiDialogSelectView extends LitElement {
         >
           ${this.hass!.localize("ui.common.cancel")}
         </mwc-button>
-        <mwc-button slot="primaryAction" @click=${this._selectView}>
+        <mwc-button
+          slot="primaryAction"
+          .disabled=${!this._config || (this._config.views || []).length < 1}
+          @click=${this._selectView}
+        >
           ${this._params.actionLabel || this.hass!.localize("ui.common.move")}
         </mwc-button>
       </ha-dialog>

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

@@ -250,7 +250,6 @@ class HaPanelProfile extends LitElement {
           max-width: 600px;
           margin: 0 auto;
           padding-bottom: env(safe-area-inset-bottom);
-          overflow: hidden;
         }
 
         .content > * {

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

@@ -60,8 +60,10 @@ class DialogTodoItemEditor extends LitElement {
       this._checked = entry.status === TodoItemStatus.Completed;
       this._summary = entry.summary;
       this._description = entry.description || "";
-      this._due = entry.due ? new Date(entry.due) : undefined;
       this._hasTime = entry.due?.includes("T") || false;
+      this._due = entry.due
+        ? new Date(this._hasTime ? entry.due : `${entry.due}T00:00:00`)
+        : undefined;
     } else {
       this._hasTime = false;
       this._checked = false;
@@ -101,9 +103,9 @@ class DialogTodoItemEditor extends LitElement {
         scrimClickAction
         .heading=${createCloseHeading(
           this.hass,
-          isCreate
-            ? this.hass.localize("ui.components.todo.item.add")
-            : this._summary
+          this.hass.localize(
+            `ui.components.todo.item.${isCreate ? "add" : "edit"}`
+          )
         )}
       >
         <div class="content">
@@ -161,7 +163,8 @@ class DialogTodoItemEditor extends LitElement {
                     .value=${dueDate}
                     .locale=${this.hass.locale}
                     .disabled=${!canUpdate}
-                    @value-changed=${this._endDateChanged}
+                    @value-changed=${this._dueDateChanged}
+                    canClear
                   ></ha-date-input>
                   ${this._todoListSupportsFeature(
                     TodoListEntityFeature.SET_DUE_DATETIME_ON_ITEM
@@ -170,7 +173,7 @@ class DialogTodoItemEditor extends LitElement {
                         .value=${dueTime}
                         .locale=${this.hass.locale}
                         .disabled=${!canUpdate}
-                        @value-changed=${this._endTimeChanged}
+                        @value-changed=${this._dueTimeChanged}
                       ></ha-time-input>`
                     : nothing}
                 </div>
@@ -259,12 +262,16 @@ class DialogTodoItemEditor extends LitElement {
     this._description = ev.target.value;
   }
 
-  private _endDateChanged(ev: CustomEvent) {
+  private _dueDateChanged(ev: CustomEvent) {
+    if (!ev.detail.value) {
+      this._due = undefined;
+      return;
+    }
     const time = this._due ? this._formatTime(this._due) : undefined;
     this._due = this._parseDate(`${ev.detail.value}${time ? `T${time}` : ""}`);
   }
 
-  private _endTimeChanged(ev: CustomEvent) {
+  private _dueTimeChanged(ev: CustomEvent) {
     this._hasTime = true;
     this._due = this._parseDate(
       `${this._formatDate(this._due || new Date())}T${ev.detail.value}`
@@ -319,14 +326,20 @@ class DialogTodoItemEditor extends LitElement {
           (this._todoListSupportsFeature(
             TodoListEntityFeature.SET_DESCRIPTION_ON_ITEM
           )
-            ? // backend should accept null to clear the field, but it doesn't now
-              " "
+            ? null
             : undefined),
         due: this._due
           ? this._hasTime
             ? this._due.toISOString()
             : this._formatDate(this._due)
-          : undefined,
+          : this._todoListSupportsFeature(
+                TodoListEntityFeature.SET_DUE_DATETIME_ON_ITEM
+              ) ||
+              this._todoListSupportsFeature(
+                TodoListEntityFeature.SET_DUE_DATE_ON_ITEM
+              )
+            ? null
+            : undefined,
         status: this._checked
           ? TodoItemStatus.Completed
           : TodoItemStatus.NeedsAction,

src/state-control/climate/ha-state-control-climate-temperature.ts

@@ -177,11 +177,20 @@ export class HaStateControlClimateTemperature extends LitElement {
 
     const action = this.stateObj.attributes.hvac_action;
 
+    const isTemperatureDisplayed =
+      (this.stateObj.attributes.current_temperature != null &&
+        this.showCurrentAsPrimary) ||
+      ((this._supportsTargetTemperature ||
+        this._supportsTargetTemperatureRange) &&
+        !this.showCurrentAsPrimary);
+
     return html`
       <p class="label">
-        ${action
+        ${action && action !== "off"
           ? this.hass.formatEntityAttributeValue(this.stateObj, "hvac_action")
-          : this.hass.formatEntityState(this.stateObj)}
+          : isTemperatureDisplayed
+            ? this.hass.formatEntityState(this.stateObj)
+            : nothing}
       </p>
     `;
   }
@@ -315,6 +324,14 @@ export class HaStateControlClimateTemperature extends LitElement {
       `;
     }
 
+    if (this.stateObj.state !== UNAVAILABLE) {
+      return html`
+        <p class="primary-state">
+          ${this.hass.formatEntityState(this.stateObj)}
+        </p>
+      `;
+    }
+
     return nothing;
   }
 
@@ -373,6 +390,14 @@ export class HaStateControlClimateTemperature extends LitElement {
     return html`<p class="label"></p>`;
   }
 
+  private _renderInfo() {
+    return html`
+      <div class="info">
+        ${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
+      </div>
+    `;
+  }
+
   get _supportsTargetTemperature() {
     return (
       supportsFeature(this.stateObj, ClimateEntityFeature.TARGET_TEMPERATURE) &&
@@ -447,10 +472,7 @@ export class HaStateControlClimateTemperature extends LitElement {
             @value-changing=${this._valueChanging}
           >
           </ha-control-circular-slider>
-          <div class="info">
-            ${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
-          </div>
-          ${this._renderTemperatureButtons("value")}
+          ${this._renderInfo()} ${this._renderTemperatureButtons("value")}
         </div>
       `;
     }
@@ -484,9 +506,7 @@ export class HaStateControlClimateTemperature extends LitElement {
             @high-changing=${this._valueChanging}
           >
           </ha-control-circular-slider>
-          <div class="info">
-            ${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
-          </div>
+          ${this._renderInfo()}
           ${this._renderTemperatureButtons(this._selectTargetTemperature, true)}
         </div>
       `;
@@ -497,6 +517,7 @@ export class HaStateControlClimateTemperature extends LitElement {
         class="container${containerSizeClass}"
         style=${styleMap({
           "--state-color": stateColor,
+          "--action-color": actionColor,
         })}
       >
         <ha-control-circular-slider
@@ -510,9 +531,7 @@ export class HaStateControlClimateTemperature extends LitElement {
           .disabled=${!active}
         >
         </ha-control-circular-slider>
-        <div class="info">
-          ${this._renderLabel()} ${this._renderSecondary()}
-        </div>
+        ${this._renderInfo()}
       </div>
     `;
   }

src/state-control/humidifier/ha-state-control-humidifier-humidity.ts

@@ -105,11 +105,18 @@ export class HaStateControlHumidifierHumidity extends LitElement {
 
     const action = this.stateObj.attributes.action;
 
+    const isHumidityDisplayed =
+      (this.stateObj.attributes.current_humidity != null &&
+        this.showCurrentAsPrimary) ||
+      (this._targetHumidity != null && !this.showCurrentAsPrimary);
+
     return html`
       <p class="label">
-        ${action
+        ${action && action !== "off"
           ? this.hass.formatEntityAttributeValue(this.stateObj, "action")
-          : this.hass.formatEntityState(this.stateObj)}
+          : isHumidityDisplayed
+            ? this.hass.formatEntityState(this.stateObj)
+            : nothing}
       </p>
     `;
   }
@@ -144,6 +151,14 @@ export class HaStateControlHumidifierHumidity extends LitElement {
       return this._renderTarget(this._targetHumidity!, "big");
     }
 
+    if (this.stateObj.state !== UNAVAILABLE) {
+      return html`
+        <p class="primary-state">
+          ${this.hass.formatEntityState(this.stateObj)}
+        </p>
+      `;
+    }
+
     return nothing;
   }
 
@@ -225,6 +240,14 @@ export class HaStateControlHumidifierHumidity extends LitElement {
     `;
   }
 
+  private _renderInfo() {
+    return html`
+      <div class="info">
+        ${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
+      </div>
+    `;
+  }
+
   protected render() {
     const stateColor = stateColorCss(this.stateObj);
     const active = stateActive(this.stateObj);
@@ -272,10 +295,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
             @value-changing=${this._valueChanging}
           >
           </ha-control-circular-slider>
-          <div class="info">
-            ${this._renderLabel()}${this._renderPrimary()}${this._renderSecondary()}
-          </div>
-          ${this._renderButtons()}
+          ${this._renderInfo()} ${this._renderButtons()}
         </div>
       `;
     }
@@ -284,6 +304,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
       <div
         class="container${containerSizeClass}"
         style=${styleMap({
+          "--state-color": stateColor,
           "--action-color": actionColor,
         })}
       >
@@ -296,9 +317,7 @@ export class HaStateControlHumidifierHumidity extends LitElement {
           disabled
         >
         </ha-control-circular-slider>
-        <div class="info">
-          ${this._renderLabel()} ${this._renderSecondary()}
-        </div>
+        ${this._renderInfo()}
       </div>
     `;
   }

src/state-control/state-control-circular-slider-style.ts

@@ -54,7 +54,6 @@ export const stateControlCircularSliderStyle = css`
   .label.disabled {
     color: var(--secondary-text-color);
   }
-
   .buttons {
     position: absolute;
     bottom: 10px;
@@ -67,6 +66,9 @@ export const stateControlCircularSliderStyle = css`
     align-items: center;
     justify-content: center;
   }
+  .primary-state {
+    font-size: 36px;
+  }
 
   .buttons ha-outlined-icon-button {
     --md-outlined-icon-button-container-width: 48px;
@@ -77,6 +79,9 @@ export const stateControlCircularSliderStyle = css`
   .container.md ha-big-number {
     font-size: 44px;
   }
+  .container.md .state {
+    font-size: 30px;
+  }
   .container.md .info {
     margin-top: 12px;
     gap: 6px;
@@ -91,6 +96,9 @@ export const stateControlCircularSliderStyle = css`
   .container.sm ha-big-number {
     font-size: 32px;
   }
+  .container.sm .state {
+    font-size: 26px;
+  }
   .container.sm .info {
     margin-top: 12px;
     font-size: 14px;
@@ -107,6 +115,9 @@ export const stateControlCircularSliderStyle = css`
   .container.xs ha-big-number {
     font-size: 32px;
   }
+  .container.xs .state {
+    font-size: 16px;
+  }
   .container.xs .info {
     margin-top: 12px;
   }

src/translations/en.json

@@ -1009,7 +1009,8 @@
         "crop_image": "Picture to crop"
       },
       "date-picker": {
-        "today": "Today"
+        "today": "Today",
+        "clear": "Clear"
       },
       "more_info_control": {
         "dismiss": "Dismiss dialog",
@@ -2491,13 +2492,13 @@
               "groups": {
                 "entity": {
                   "label": "Entity",
-                  "description": "When something happens to an entity"
+                  "description": "When something happens to an entity."
                 },
                 "time_location": {
                   "label": "Time and location",
                   "description": "When someone enters or leaves a zone, or at a specific time."
                 },
-                "other": { "label": "Other" }
+                "other": { "label": "Other triggers" }
               },
               "type": {
                 "calendar": {
@@ -2533,7 +2534,7 @@
                   "context_user_picked": "User firing event",
                   "context_user_pick": "Select user",
                   "description": {
-                    "picker": "When an event is being received (event is an advanced concept in Home Assistant)",
+                    "picker": "When an event is being received (event is an advanced concept in Home Assistant).",
                     "full": "When {eventTypes} event is fired"
                   }
                 },
@@ -2545,7 +2546,7 @@
                   "enter": "Enter",
                   "leave": "Leave",
                   "description": {
-                    "picker": "When an entity created by a geolocation platform appears in or disappears from a zone",
+                    "picker": "When an entity created by a geolocation platform appears in or disappears from a zone.",
                     "full": "When {source} {event, select, \n enter {enters}\n leave {leaves} other {} \n} {zone} {numberOfZones, plural,\n one {zone}\n other {zones}\n}"
                   }
                 },
@@ -2607,7 +2608,7 @@
                     "updated": "updated"
                   },
                   "description": {
-                    "picker": "When a persistent notification is added or removed",
+                    "picker": "When a persistent notification is added or removed.",
                     "full": "When a persistent notification is updated"
                   }
                 },
@@ -2618,7 +2619,7 @@
                   "sunset": "Sunset",
                   "offset": "Offset (optional)",
                   "description": {
-                    "picker": "When the sun sets or rises",
+                    "picker": "When the sun sets or rises.",
                     "sets": "When the sun sets{hasDuration, select, \n true { offset by {duration}} \n other {}\n }",
                     "rises": "When the sun rises{hasDuration, select, \n true { offset by {duration}} \n other {}\n }"
                   }
@@ -2647,7 +2648,7 @@
                   "value_template": "Value template",
                   "for": "For",
                   "description": {
-                    "picker": "When a template is evaluated to true.",
+                    "picker": "When a template evaluates to true.",
                     "full": "When a template changes from false to true{hasDuration, select, \n true { for {duration}} \n other {}\n }"
                   }
                 },
@@ -2668,7 +2669,7 @@
                   "minutes": "Minutes",
                   "seconds": "Seconds",
                   "description": {
-                    "picker": "Periodically, every defined interval of time."
+                    "picker": "Periodically, at a defined interval."
                   }
                 },
                 "webhook": {
@@ -2691,7 +2692,7 @@
                   "enter": "Enter",
                   "leave": "Leave",
                   "description": {
-                    "picker": "When someone (or something) enters or leaves a zone",
+                    "picker": "When someone (or something) enters or leaves a zone.",
                     "full": "When {entity} {event, select, \n enter {enters}\n leave {leaves} other {} \n} {zone} {numberOfZones, plural,\n one {zone} \n other {zones}\n}"
                   }
                 }
@@ -2733,7 +2734,7 @@
                   "label": "Time and location",
                   "description": "If someone is in a zone or if the current time is before or after a specified time."
                 },
-                "other": { "label": "Other" },
+                "other": { "label": "Other conditions" },
                 "building_blocks": {
                   "label": "Building blocks",
                   "description": "Build more complex conditions."
@@ -2759,13 +2760,13 @@
                     "preset_mode": "Preset mode"
                   },
                   "description": {
-                    "picker": "If a device is in a certain state. Great way to start."
+                    "picker": "Set of conditions provided by your device. Great way to start."
                   }
                 },
                 "not": {
                   "label": "Not",
                   "description": {
-                    "picker": "Test if a condition is not true",
+                    "picker": "Test if a condition is not true.",
                     "no_conditions": "Test if no condition matches",
                     "one_condition": "Test if 1 condition does not match",
                     "full": "Test if none of {count} conditions match"
@@ -2799,7 +2800,7 @@
                   "label": "[%key:ui::panel::config::automation::editor::triggers::type::state::label%]",
                   "state": "[%key:ui::panel::config::automation::editor::triggers::type::state::label%]",
                   "description": {
-                    "picker": "If an entity (or attribute) is in a specific state",
+                    "picker": "If an entity (or attribute) is in a specific state.",
                     "no_entity": "Confirm state",
                     "full": "Confirm{hasAttribute, select, \n true { {attribute} of}\n other {}\n} {numberOfEntities, plural,\n zero {an entity is}\n one {{entities} is}\n other {{entities} are}\n} {numberOfStates, plural,\n zero {a state}\n other {{states}}\n}{hasDuration, select, \n true { for {duration}} \n other {}\n }"
                   }
@@ -2820,7 +2821,7 @@
                   "label": "[%key:ui::panel::config::automation::editor::triggers::type::template::label%]",
                   "value_template": "[%key:ui::panel::config::automation::editor::triggers::type::template::value_template%]",
                   "description": {
-                    "picker": "If a template is evaluated to true.",
+                    "picker": "If a template evaluates to true.",
                     "full": "Test if template renders a value equal to true"
                   }
                 },
@@ -2843,7 +2844,7 @@
                     "sun": "Sunday"
                   },
                   "description": {
-                    "picker": "If the current time is before or after a specified time",
+                    "picker": "If the current time is before or after a specified time.",
                     "full": "Confirm the {hasTime, select, \n after {time is after {time_after}}\n before {time is before {time_before}}\n after_before {time is after {time_after} and before {time_before}} \n other {}\n }{hasTimeAndDay, select, \n true { and the }\n other {}\n}{hasDay, select, \n true { day is {day}}\n other {}\n}"
                   }
                 },
@@ -2861,7 +2862,7 @@
                   "entity": "[%key:ui::panel::config::automation::editor::triggers::type::zone::entity%]",
                   "zone": "[%key:ui::panel::config::automation::editor::triggers::type::zone::label%]",
                   "description": {
-                    "picker": "If someone (or something) is in a zone",
+                    "picker": "If someone (or something) is in a zone.",
                     "full": "Confirm {entity} {numberOfEntities, plural,\n one {is}\n other {are}\n} in {zone} {numberOfZones, plural,\n one {zone} \n other {zones}\n} "
                   }
                 }
@@ -2898,7 +2899,7 @@
               "continue_on_error": "Continue on error",
               "groups": {
                 "helpers": { "label": "Helpers" },
-                "other": { "label": "Other" },
+                "other": { "label": "Other actions" },
                 "building_blocks": {
                   "label": "Building blocks",
                   "description": "Build more complex sequences of actions."
@@ -2913,6 +2914,7 @@
                   "description": {
                     "service_based_on_template": "Call a service based on a template on {targets}",
                     "service_based_on_name": "Call a service ''{name}'' on {targets}",
+                    "service_name": "{domain} ''{name}'' on {targets}",
                     "service": "Call a service",
                     "target_template": "templated {name}",
                     "target_unknown_entity": "unknown entity",
@@ -2989,7 +2991,8 @@
                     "flash": "Flash"
                   },
                   "description": {
-                    "picker": "Do something on a device. Great way to start."
+                    "picker": "Do something on a device. Great way to start.",
+                    "no_device": "Device action"
                   }
                 },
                 "activate_scene": {
@@ -3068,14 +3071,14 @@
                   "response_variable": "The name of the variable to use as response",
                   "error": "Stop because of an unexpected error",
                   "description": {
-                    "picker": "Stop the sequence of actions",
+                    "picker": "Stop the sequence of actions.",
                     "full": "Stop {hasReason, select, \n true { because: {reason}} \n other {}\n }"
                   }
                 },
                 "parallel": {
                   "label": "Run in parallel",
                   "description": {
-                    "picker": "perform a sequence of actions in parallel.",
+                    "picker": "Perform a sequence of actions in parallel.",
                     "full": "Run {number} {number, plural,\n one {action}\n other {actions}\n} in parallel"
                   }
                 },
@@ -3114,15 +3117,15 @@
               "blueprint_config": "Blueprint Config"
             },
             "path": {
-              "choose": "Select a node on the left for more information.",
+              "choose": "Select a step on the left for more information.",
               "default_action_executed": "The default action was executed because no options matched.",
-              "no_further_execution": "This node was not executed and so no further trace information is available.",
-              "disabled_node": "This node was disabled and skipped during execution so no further trace information is available.",
+              "no_further_execution": "This step was not executed and so no further trace information is available.",
+              "disabled_step": "This step was disabled and skipped during execution so no further trace information is available.",
               "iteration": "Iteration {number}",
               "executed": "Executed: {time}",
               "error": "Error: {error}",
               "result": "Result:",
-              "node_not_tracked": "Node not tracked.",
+              "step_not_executed": "This step was not executed.",
               "no_logbook_entries": "No Logbook entries found for this step.",
               "no_variables_changed": "No variables changed",
               "unable_to_find_config": "Unable to find config"
@@ -3799,6 +3802,9 @@
           "add_zwave_js_device": "Add Z-Wave device",
           "add_zha_device": "Add Zigbee device",
           "add_matter_device": "Add Matter device",
+          "what_device_type": "What type of device is it?",
+          "what_to_add": "What do you want to add?",
+          "confirm_add_discovered": "Want to add these discovered devices?",
           "disable": {
             "show_disabled": "Show disabled integrations",
             "disabled_integrations": "{number} disabled",
@@ -5014,7 +5020,9 @@
           "select_view": {
             "header": "Choose a view",
             "dashboard_label": "Dashboard",
-            "views_label": "View"
+            "views_label": "View",
+            "no_config": "No config found.",
+            "no_views": "No views in this dashboard."
           },
           "suggest_card": {
             "header": "We created a suggestion for you",

yarn.lock

@@ -2043,7 +2043,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.9":
+"@jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.20, @jridgewell/trace-mapping@npm:^0.3.9":
   version: 0.3.20
   resolution: "@jridgewell/trace-mapping@npm:0.3.20"
   dependencies:
@@ -3146,17 +3146,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@mdi/js@npm:7.3.67":
-  version: 7.3.67
-  resolution: "@mdi/js@npm:7.3.67"
-  checksum: 0f54a632d4ab3213931cc348d524f0f5e6b492ea74f8f1babe00298a8e7ae07b2fec88cfaf0cf7be0f1e427026a8da23fb8bed55b22892ad3b40b482e01cfb17
+"@mdi/js@npm:7.4.47":
+  version: 7.4.47
+  resolution: "@mdi/js@npm:7.4.47"
+  checksum: c1a8fc82f23030bccc0cf324b13b73a0034d06140e79f8bc7b0e4e59275624c470e5ca6524d6141ad8c4fe3ad0f314c7af99afb3e38df163eb50d3b13b9eab17
   languageName: node
   linkType: hard
 
-"@mdi/svg@npm:7.3.67":
-  version: 7.3.67
-  resolution: "@mdi/svg@npm:7.3.67"
-  checksum: bd9593e6cc16d140b681dedacd2a164da7884186d496c89809a9389c980c295d16edf4ba8744338d28bb6e627b1801f47c4c0cbf7b8faf7084ee87cd5d7b4250
+"@mdi/svg@npm:7.4.47":
+  version: 7.4.47
+  resolution: "@mdi/svg@npm:7.4.47"
+  checksum: e5a6b80bb82cc7b7c98e9a018883aee1eaa0e98edfb62192e7ec5798fa573f30b9226629361d747de6e0a81fe6657fb37e9bc2fd89c68e9b094a07e863be4fba
   languageName: node
   linkType: hard
 
@@ -5895,10 +5895,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"assertion-error@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "assertion-error@npm:1.1.0"
-  checksum: fd9429d3a3d4fd61782eb3962ae76b6d08aa7383123fca0596020013b3ebd6647891a85b05ce821c47d1471ed1271f00b0545cf6a4326cf2fc91efcc3b0fbecf
+"assertion-error@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "assertion-error@npm:2.0.1"
+  checksum: a0789dd882211b87116e81e2648ccb7f60340b34f19877dd020b39ebb4714e475eb943e14ba3e22201c221ef6645b7bfe10297e76b6ac95b48a9898c1211ce66
   languageName: node
   linkType: hard
 
@@ -6434,18 +6434,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chai@npm:4.3.10":
-  version: 4.3.10
-  resolution: "chai@npm:4.3.10"
+"chai@npm:5.0.0":
+  version: 5.0.0
+  resolution: "chai@npm:5.0.0"
   dependencies:
-    assertion-error: "npm:^1.1.0"
-    check-error: "npm:^1.0.3"
-    deep-eql: "npm:^4.1.3"
-    get-func-name: "npm:^2.0.2"
-    loupe: "npm:^2.3.6"
-    pathval: "npm:^1.1.1"
-    type-detect: "npm:^4.0.8"
-  checksum: 9e545fd60f5efee4f06f7ad62f7b1b142932b08fbb3454db69defd511e7c58771ce51843764212da1e129b2c9d1b029fbf5f98da030fe67a95a0853e8679524f
+    assertion-error: "npm:^2.0.1"
+    check-error: "npm:^2.0.0"
+    deep-eql: "npm:^5.0.1"
+    loupe: "npm:^3.0.0"
+    pathval: "npm:^2.0.0"
+  checksum: c23d1bb3912cc36d12861d7e4010bb992aabf923a8d393bc71e776218c39f5f40778ab9f398ff962dd26857edee07ce732c9ad28a678feb1b76f99384d2e4a90
   languageName: node
   linkType: hard
 
@@ -6495,12 +6493,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"check-error@npm:^1.0.3":
-  version: 1.0.3
-  resolution: "check-error@npm:1.0.3"
-  dependencies:
-    get-func-name: "npm:^2.0.2"
-  checksum: e2131025cf059b21080f4813e55b3c480419256914601750b0fee3bd9b2b8315b531e551ef12560419b8b6d92a3636511322752b1ce905703239e7cc451b6399
+"check-error@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "check-error@npm:2.0.0"
+  checksum: 120f252c2e1ad82ef82a616662805345c6c361347bfd6203f8a28c53a158811dd0ea21278f29c8136cc9df12fc7f077d1a07124569d98fb396b3072d08f2f092
   languageName: node
   linkType: hard
 
@@ -7184,12 +7180,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-eql@npm:^4.1.3":
-  version: 4.1.3
-  resolution: "deep-eql@npm:4.1.3"
-  dependencies:
-    type-detect: "npm:^4.0.0"
-  checksum: 12ce93ae63de187e77b076d3d51bfc28b11f98910a22c18714cce112791195e86a94f97788180994614b14562a86c9763f67c69f785e4586f806b5df39bf9301
+"deep-eql@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "deep-eql@npm:5.0.1"
+  checksum: f8846820213462cdca23700873810c8bc01263dcc6a1e0f8694964b64f48a6dcb1f323ef7bb8678b15553f4b82420eda19092d4ae2e2709c56af7ea77bd8e6ab
   languageName: node
   linkType: hard
 
@@ -7228,13 +7222,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"default-browser@npm:^5.2.0":
-  version: 5.2.0
-  resolution: "default-browser@npm:5.2.0"
+"default-browser@npm:^5.2.1":
+  version: 5.2.1
+  resolution: "default-browser@npm:5.2.1"
   dependencies:
     bundle-name: "npm:^4.1.0"
     default-browser-id: "npm:^5.0.0"
-  checksum: 95530de0dca75892b4382d086f42bd798f54a1e25eab748e84e1b64566568b1a02cf1eccfb60a8fbab303d72c09938c2d34e0b38e57d85efd24f13a60d2de802
+  checksum: afab7eff7b7f5f7a94d9114d1ec67273d3fbc539edf8c0f80019879d53aa71e867303c6f6d7cffeb10a6f3cfb59d4f963dba3f9c96830b4540cc7339a1bf9840
   languageName: node
   linkType: hard
 
@@ -8966,7 +8960,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-func-name@npm:^2.0.1, get-func-name@npm:^2.0.2":
+"get-func-name@npm:^2.0.1":
   version: 2.0.2
   resolution: "get-func-name@npm:2.0.2"
   checksum: 3f62f4c23647de9d46e6f76d2b3eafe58933a9b3830c60669e4180d6c601ce1b4aa310ba8366143f55e52b139f992087a9f0647274e8745621fa2af7e0acf13b
@@ -9585,8 +9579,8 @@ __metadata:
     "@material/mwc-top-app-bar-fixed": "npm:0.27.0"
     "@material/top-app-bar": "npm:=14.0.0-canary.53b3cad2f.0"
     "@material/web": "npm:=1.1.1"
-    "@mdi/js": "npm:7.3.67"
-    "@mdi/svg": "npm:7.3.67"
+    "@mdi/js": "npm:7.4.47"
+    "@mdi/svg": "npm:7.4.47"
     "@octokit/auth-oauth-device": "npm:6.0.1"
     "@octokit/plugin-retry": "npm:6.0.1"
     "@octokit/rest": "npm:20.0.2"
@@ -9634,7 +9628,7 @@ __metadata:
     app-datepicker: "npm:5.1.1"
     babel-loader: "npm:9.1.3"
     babel-plugin-template-html-minifier: "npm:4.1.0"
-    chai: "npm:4.3.10"
+    chai: "npm:5.0.0"
     chart.js: "npm:4.4.1"
     comlink: "npm:4.4.1"
     core-js: "npm:3.34.0"
@@ -9685,12 +9679,12 @@ __metadata:
     luxon: "npm:3.4.4"
     magic-string: "npm:0.30.5"
     map-stream: "npm:0.0.7"
-    marked: "npm:11.1.0"
+    marked: "npm:11.1.1"
     memoize-one: "npm:6.0.0"
     mocha: "npm:10.2.0"
     node-vibrant: "npm:3.2.1-alpha.1"
     object-hash: "npm:3.0.0"
-    open: "npm:10.0.1"
+    open: "npm:10.0.2"
     pinst: "npm:3.0.0"
     prettier: "npm:3.1.1"
     proxy-polyfill: "npm:0.3.2"
@@ -9701,7 +9695,7 @@ __metadata:
     rollup: "npm:2.79.1"
     rollup-plugin-string: "npm:3.0.0"
     rollup-plugin-terser: "npm:7.0.2"
-    rollup-plugin-visualizer: "npm:5.11.0"
+    rollup-plugin-visualizer: "npm:5.12.0"
     rrule: "npm:2.8.1"
     serve-handler: "npm:6.1.5"
     sinon: "npm:17.0.1"
@@ -9711,7 +9705,7 @@ __metadata:
     superstruct: "npm:1.0.3"
     systemjs: "npm:6.14.2"
     tar: "npm:6.2.0"
-    terser-webpack-plugin: "npm:5.3.9"
+    terser-webpack-plugin: "npm:5.3.10"
     tinykeys: "npm:2.1.0"
     ts-lit-plugin: "npm:2.0.1"
     tsparticles-engine: "npm:2.12.0"
@@ -11533,12 +11527,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"loupe@npm:^2.3.6":
-  version: 2.3.7
-  resolution: "loupe@npm:2.3.7"
+"loupe@npm:^3.0.0":
+  version: 3.0.2
+  resolution: "loupe@npm:3.0.2"
   dependencies:
     get-func-name: "npm:^2.0.1"
-  checksum: 635c8f0914c2ce7ecfe4e239fbaf0ce1d2c00e4246fafcc4ed000bfdb1b8f89d05db1a220054175cca631ebf3894872a26fffba0124477fcb562f78762848fb1
+  checksum: 256467bf10afaca4a5dd79b32e36fcd042bc2a247232e940c62bcc07cb114c2d7a549218eb103598e7cdb8bd32c6601fe230d80e03b8d49782973d4da11c08ed
   languageName: node
   linkType: hard
 
@@ -11661,12 +11655,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"marked@npm:11.1.0":
-  version: 11.1.0
-  resolution: "marked@npm:11.1.0"
+"marked@npm:11.1.1":
+  version: 11.1.1
+  resolution: "marked@npm:11.1.1"
   bin:
     marked: bin/marked.js
-  checksum: 4636b16283c1963a715e97578d9fd91588b11949276e633a4de53dc408bcdab7b846d2b5c2cf3239f6d2dc8affe5294a0895954b5e3d9562d77301d8847a8915
+  checksum: c2e15a330ac75cca2e12e25aae09985a78ad7e96a84418964dcdd3ee776764a38812dc0e94e9fcbacac43113d1650ca7946f9dc0bab800d72181e56a37e7631e
   languageName: node
   linkType: hard
 
@@ -12530,15 +12524,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"open@npm:10.0.1":
-  version: 10.0.1
-  resolution: "open@npm:10.0.1"
+"open@npm:10.0.2":
+  version: 10.0.2
+  resolution: "open@npm:10.0.2"
   dependencies:
-    default-browser: "npm:^5.2.0"
+    default-browser: "npm:^5.2.1"
     define-lazy-prop: "npm:^3.0.0"
     is-inside-container: "npm:^1.0.0"
     is-wsl: "npm:^3.1.0"
-  checksum: 7ce545e2e68775f06ab800c2a2ef20369bce2738e1219fd31179e1a1773f2c33fcc6b7f816a4f5e9214821cb58ae9c50f2e3f7dd8f5b02e418fbcafabf481f03
+  checksum: 6f7f9e08204af00930f2998690293df1a919a61c98b225ff9e3aa09a765254b8a98bec101644ffe991452c6aabea0c6f9e49670b559d48a44bfc5238f6b58351
   languageName: node
   linkType: hard
 
@@ -12960,10 +12954,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pathval@npm:^1.1.1":
-  version: 1.1.1
-  resolution: "pathval@npm:1.1.1"
-  checksum: b50a4751068aa3a5428f5a0b480deecedc6f537666a3630a0c2ae2d5e7c0f4bf0ee77b48404441ec1220bef0c91625e6030b3d3cf5a32ab0d9764018d1d9dbb6
+"pathval@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "pathval@npm:2.0.0"
+  checksum: b91575bf9cdf01757afd7b5e521eb8a0b874a49bc972d08e0047cfea0cd3c019f5614521d4bc83d2855e3fcc331db6817dfd533dd8f3d90b16bc76fad2450fc1
   languageName: node
   linkType: hard
 
@@ -13846,9 +13840,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup-plugin-visualizer@npm:5.11.0":
-  version: 5.11.0
-  resolution: "rollup-plugin-visualizer@npm:5.11.0"
+"rollup-plugin-visualizer@npm:5.12.0":
+  version: 5.12.0
+  resolution: "rollup-plugin-visualizer@npm:5.12.0"
   dependencies:
     open: "npm:^8.4.0"
     picomatch: "npm:^2.3.1"
@@ -13861,7 +13855,7 @@ __metadata:
       optional: true
   bin:
     rollup-plugin-visualizer: dist/bin/cli.js
-  checksum: 947238aa22706a47a4d3e8ce616855f0e5cb969ed9f61b9a268eaede0a86f461ecb38e27b4e6bf00f4b5e3f63677667f65e0d4af89a659a5160f74add1f192bb
+  checksum: 47358feb672291d6edcfd94197577c192a84c24cb644119425dae8241fb6f5a52556efd0c501f38b276c07534642a80c0885ef681babb474e83c7b5a3b475b84
   languageName: node
   linkType: hard
 
@@ -15011,15 +15005,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser-webpack-plugin@npm:5.3.9, terser-webpack-plugin@npm:^5.3.7":
-  version: 5.3.9
-  resolution: "terser-webpack-plugin@npm:5.3.9"
+"terser-webpack-plugin@npm:5.3.10, terser-webpack-plugin@npm:^5.3.7":
+  version: 5.3.10
+  resolution: "terser-webpack-plugin@npm:5.3.10"
   dependencies:
-    "@jridgewell/trace-mapping": "npm:^0.3.17"
+    "@jridgewell/trace-mapping": "npm:^0.3.20"
     jest-worker: "npm:^27.4.5"
     schema-utils: "npm:^3.1.1"
     serialize-javascript: "npm:^6.0.1"
-    terser: "npm:^5.16.8"
+    terser: "npm:^5.26.0"
   peerDependencies:
     webpack: ^5.1.0
   peerDependenciesMeta:
@@ -15029,7 +15023,7 @@ __metadata:
       optional: true
     uglify-js:
       optional: true
-  checksum: 339737a407e034b7a9d4a66e31d84d81c10433e41b8eae2ca776f0e47c2048879be482a9aa08e8c27565a2a949bc68f6e07f451bf4d9aa347dd61b3d000f5353
+  checksum: fb1c2436ae1b4e983be043fa0a3d355c047b16b68f102437d08c736d7960c001e7420e2f722b9d99ce0dc70ca26a68cc63c0b82bc45f5b48671142b352a9d938
   languageName: node
   linkType: hard
 
@@ -15046,7 +15040,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser@npm:^5.0.0, terser@npm:^5.15.1, terser@npm:^5.16.8":
+"terser@npm:^5.0.0, terser@npm:^5.15.1, terser@npm:^5.26.0":
   version: 5.26.0
   resolution: "terser@npm:5.26.0"
   dependencies:
@@ -15406,7 +15400,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-detect@npm:4.0.8, type-detect@npm:^4.0.0, type-detect@npm:^4.0.8":
+"type-detect@npm:4.0.8, type-detect@npm:^4.0.8":
   version: 4.0.8
   resolution: "type-detect@npm:4.0.8"
   checksum: 5179e3b8ebc51fce1b13efb75fdea4595484433f9683bbc2dca6d99789dba4e602ab7922d2656f2ce8383987467f7770131d4a7f06a26287db0615d2f4c4ce7d