Consider unknown as stopped for app

Refactor climate panel to use top bar component (#52245 )
* Refactor climate panel to use top bar component * Remove calc * Remove * Remove
2026-05-30 04:51:35 +00:00 · 2026-05-28 15:25:46 +02:00 · 2026-05-28 15:48:06 +03:00 · 2026-05-28 15:47:41 +03:00 · 2026-05-28 14:33:55 +02:00 · 2026-05-28 14:27:47 +02:00
11 changed files with 695 additions and 825 deletions
@@ -27,7 +27,7 @@
  "license": "Apache-2.0",
  "type": "module",
  "dependencies": {
-    "@babel/runtime": "7.29.2",
+    "@babel/runtime": "7.29.7",
    "@braintree/sanitize-url": "7.1.2",
    "@codemirror/autocomplete": "6.20.2",
    "@codemirror/commands": "6.10.3",
@@ -126,10 +126,10 @@
    "xss": "1.0.15"
  },
  "devDependencies": {
-    "@babel/core": "7.29.0",
+    "@babel/core": "7.29.7",
    "@babel/helper-define-polyfill-provider": "0.6.8",
-    "@babel/plugin-transform-runtime": "7.29.0",
-    "@babel/preset-env": "7.29.5",
+    "@babel/plugin-transform-runtime": "7.29.7",
+    "@babel/preset-env": "7.29.7",
    "@bundle-stats/plugin-webpack-filter": "4.22.1",
    "@eslint/js": "10.0.1",
    "@html-eslint/eslint-plugin": "0.61.0",
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20260527.1"
+version      = "20260527.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -1,7 +1,6 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { goBack } from "../../common/navigate";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -15,6 +14,7 @@ import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
 import "../lovelace/views/hui-view-background";
 import "../lovelace/views/hui-view-container";
+import "../../components/ha-top-app-bar-fixed";

 const CLIMATE_LOVELACE_VIEW_CONFIG: LovelaceStrategyViewConfig = {
  strategy: {
@@ -97,38 +97,36 @@ class PanelClimate extends LitElement {

  protected render() {
    return html`
-      <div class="header ${classMap({ narrow: this.narrow })}">
-        <div class="toolbar">
-          ${this._searchParams.has("historyBack")
-            ? html`
-                <ha-icon-button-arrow-prev
-                  @click=${this._back}
-                  slot="navigationIcon"
-                ></ha-icon-button-arrow-prev>
-              `
-            : html`
-                <ha-menu-button
-                  slot="navigationIcon"
-                  .hass=${this.hass}
-                  .narrow=${this.narrow}
-                ></ha-menu-button>
-              `}
-          <div class="main-title">${this.hass.localize("panel.climate")}</div>
-        </div>
-      </div>
-      ${this._lovelace
-        ? html`
-            <hui-view-container .hass=${this.hass}>
-              <hui-view-background .hass=${this.hass}> </hui-view-background>
-              <hui-view
+      <ha-top-app-bar-fixed .narrow=${this.narrow}>
+        ${this._searchParams.has("historyBack")
+          ? html`
+              <ha-icon-button-arrow-prev
+                @click=${this._back}
+                slot="navigationIcon"
+              ></ha-icon-button-arrow-prev>
+            `
+          : html`
+              <ha-menu-button
+                slot="navigationIcon"
                .hass=${this.hass}
                .narrow=${this.narrow}
-                .lovelace=${this._lovelace}
-                .index=${this._viewIndex}
-              ></hui-view
-            ></hui-view-container>
-          `
-        : nothing}
+              ></ha-menu-button>
+            `}
+        <div slot="title">${this.hass.localize("panel.climate")}</div>
+        ${this._lovelace
+          ? html`
+              <hui-view-container .hass=${this.hass}>
+                <hui-view-background .hass=${this.hass}> </hui-view-background>
+                <hui-view
+                  .hass=${this.hass}
+                  .narrow=${this.narrow}
+                  .lovelace=${this._lovelace}
+                  .index=${this._viewIndex}
+                ></hui-view
+              ></hui-view-container>
+            `
+          : nothing}
+      </ha-top-app-bar-fixed>
    `;
  }

@@ -169,78 +167,11 @@ class PanelClimate extends LitElement {
          -webkit-user-select: none;
          -moz-user-select: none;
        }
-        .header {
-          background-color: var(--app-header-background-color);
-          color: var(--app-header-text-color, white);
-          position: fixed;
-          top: 0;
-          width: calc(
-            var(--ha-top-app-bar-width, 100%) - var(
-                --safe-area-inset-right,
-                0px
-              )
-          );
-          padding-top: var(--safe-area-inset-top);
-          z-index: 4;
-          display: flex;
-          flex-direction: row;
-          -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
-          backdrop-filter: var(--app-header-backdrop-filter, none);
-          padding-top: var(--safe-area-inset-top);
-          padding-right: var(--safe-area-inset-right);
-        }
-        :host([narrow]) .header {
-          width: calc(
-            var(--ha-top-app-bar-width, 100%) - var(
-                --safe-area-inset-left,
-                0px
-              ) - var(--safe-area-inset-right, 0px)
-          );
-          padding-left: var(--safe-area-inset-left);
-        }
-        :host([scrolled]) .header {
-          box-shadow: var(
-            --bar-box-shadow,
-            0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-            0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-            0px 1px 10px 0px rgba(0, 0, 0, 0.12)
-          );
-        }
-        .toolbar {
-          height: var(--header-height);
-          display: flex;
-          flex: 1;
-          align-items: center;
-          font-size: var(--ha-font-size-xl);
-          padding: 0px 12px;
-          font-weight: var(--ha-font-weight-normal);
-          box-sizing: border-box;
-          border-bottom: var(--app-header-border-bottom, none);
-        }
-        :host([narrow]) .toolbar {
-          padding: 0 4px;
-        }
-        .main-title {
-          margin-inline-start: var(--ha-space-6);
-          line-height: var(--ha-line-height-normal);
-          flex-grow: 1;
-        }
-        .narrow .main-title {
-          margin-inline-start: var(--ha-space-2);
-        }
        hui-view-container {
          position: relative;
          display: flex;
          min-height: 100vh;
          box-sizing: border-box;
-          padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
-          padding-right: var(--safe-area-inset-right);
-          padding-inline-end: var(--safe-area-inset-right);
-          padding-bottom: var(--safe-area-inset-bottom);
-        }
-        :host([narrow]) hui-view-container {
-          padding-left: var(--safe-area-inset-left);
-          padding-inline-start: var(--safe-area-inset-left);
        }
        hui-view {
          flex: 1 1 100%;
@@ -1,9 +1,7 @@
 import { consume, type ContextType } from "@lit/context";
-import { mdiHelpCircle } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../../../components/ha-svg-icon";
 import { internationalizationContext } from "../../../../data/context";
 import type { AddonState } from "../../../../data/hassio/addon";

@@ -16,13 +14,14 @@ class SupervisorAppsState extends LitElement {
  private _i18n!: ContextType<typeof internationalizationContext>;

  protected render(): TemplateResult {
+    // Consider "unknown" state as "stopped" for display purposes
+    // because unknown doesn't add any value to the user
+    const displayState = this.state === "unknown" ? "stopped" : this.state;
    return html`
-      ${this.state === "unknown"
-        ? html`<ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>`
-        : html` <div class="dot state-${this.state}"></div> `}
+      <div class="dot state-${displayState}"></div>
      <span
        >${this._i18n.localize(
-          `ui.panel.config.apps.dashboard.capability.state.${this.state}`
+          `ui.panel.config.apps.dashboard.capability.state.${displayState}`
        )}</span
      >
    `;
@@ -48,6 +48,8 @@ import type { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry

 const cropOptions: CropOptions = {
  round: false,
+  type: "image/jpeg",
+  quality: 0.75,
 };

 const SENSOR_DOMAINS = ["sensor"];
@@ -40,37 +40,6 @@ export class HaSunCondition extends LitElement implements ConditionElement {
  private _schema = memoizeOne(
    (localize: LocalizeFunc, formType: FormType) =>
      [
-        ...(["between", "after"].includes(formType)
-          ? [
-              {
-                name: "after",
-                type: "select",
-                default: AFTER_DEFAULT,
-                options: [
-                  [
-                    "sunrise",
-                    localize(
-                      "ui.panel.config.automation.editor.conditions.type.sun.sunrise"
-                    ),
-                  ],
-                  [
-                    "sunset",
-                    localize(
-                      "ui.panel.config.automation.editor.conditions.type.sun.sunset"
-                    ),
-                  ],
-                ],
-              },
-              {
-                name: "after_offset",
-                selector: {
-                  duration: {
-                    allow_negative: true,
-                  },
-                },
-              },
-            ]
-          : []),
        ...(["between", "before"].includes(formType)
          ? [
              {
@@ -102,6 +71,37 @@ export class HaSunCondition extends LitElement implements ConditionElement {
              },
            ]
          : []),
+        ...(["between", "after"].includes(formType)
+          ? [
+              {
+                name: "after",
+                type: "select",
+                default: AFTER_DEFAULT,
+                options: [
+                  [
+                    "sunrise",
+                    localize(
+                      "ui.panel.config.automation.editor.conditions.type.sun.sunrise"
+                    ),
+                  ],
+                  [
+                    "sunset",
+                    localize(
+                      "ui.panel.config.automation.editor.conditions.type.sun.sunset"
+                    ),
+                  ],
+                ],
+              },
+              {
+                name: "after_offset",
+                selector: {
+                  duration: {
+                    allow_negative: true,
+                  },
+                },
+              },
+            ]
+          : []),
      ] as const
  );

@@ -217,7 +217,7 @@ export class CloudRegister extends LitElement {

    try {
      await cloudRegister(this.hass, email, password);
-      this._verificationEmailSent(email);
+      this._verificationEmailSent(email, "account_created");
    } catch (err: any) {
      this._password = "";
      this._requestInProgress = false;
@@ -238,15 +238,18 @@ export class CloudRegister extends LitElement {

    const email = emailField.value || "";

+    this._requestInProgress = true;
+
    const doResend = async (username: string) => {
      try {
        await cloudResendVerification(this.hass, username);
-        this._verificationEmailSent(username);
+        this._verificationEmailSent(username, "verification_email_sent");
      } catch (err: any) {
        const errCode = err && err.body && err.body.code;
        if (errCode === "usernotfound" && username !== username.toLowerCase()) {
          await doResend(username.toLowerCase());
        } else {
+          this._requestInProgress = false;
          this._error =
            err && err.body && err.body.message
              ? err.body.message
@@ -258,13 +261,16 @@ export class CloudRegister extends LitElement {
    await doResend(email);
  }

-  private _verificationEmailSent(email: string) {
+  private _verificationEmailSent(
+    email: string,
+    messageKey: "account_created" | "verification_email_sent"
+  ) {
    this._requestInProgress = false;
    this._password = "";
    fireEvent(this, "cloud-email-changed", { value: email });
    fireEvent(this, "cloud-done", {
      flashMessage: this.hass.localize(
-        "ui.panel.config.cloud.register.account_created"
+        `ui.panel.config.cloud.register.${messageKey}`
      ),
    });
  }
@@ -1,7 +1,6 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { goBack } from "../../common/navigate";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -15,6 +14,7 @@ import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
 import "../lovelace/views/hui-view-container";
 import "../lovelace/views/hui-view-background";
+import "../../components/ha-top-app-bar-fixed";

 const LIGHT_LOVELACE_VIEW_CONFIG: LovelaceStrategyViewConfig = {
  strategy: {
@@ -97,38 +97,36 @@ class PanelLight extends LitElement {

  protected render() {
    return html`
-      <div class="header ${classMap({ narrow: this.narrow })}">
-        <div class="toolbar">
-          ${this._searchParms.has("historyBack")
-            ? html`
-                <ha-icon-button-arrow-prev
-                  @click=${this._back}
-                  slot="navigationIcon"
-                ></ha-icon-button-arrow-prev>
-              `
-            : html`
-                <ha-menu-button
-                  slot="navigationIcon"
-                  .hass=${this.hass}
-                  .narrow=${this.narrow}
-                ></ha-menu-button>
-              `}
-          <div class="main-title">${this.hass.localize("panel.light")}</div>
-        </div>
-      </div>
-      ${this._lovelace
-        ? html`
-            <hui-view-container .hass=${this.hass}>
-              <hui-view-background .hass=${this.hass}> </hui-view-background>
-              <hui-view
+      <ha-top-app-bar-fixed .narrow=${this.narrow}>
+        ${this._searchParms.has("historyBack")
+          ? html`
+              <ha-icon-button-arrow-prev
+                @click=${this._back}
+                slot="navigationIcon"
+              ></ha-icon-button-arrow-prev>
+            `
+          : html`
+              <ha-menu-button
+                slot="navigationIcon"
                .hass=${this.hass}
                .narrow=${this.narrow}
-                .lovelace=${this._lovelace}
-                .index=${this._viewIndex}
-              ></hui-view
-            ></hui-view-container>
-          `
-        : nothing}
+              ></ha-menu-button>
+            `}
+        <div slot="title">${this.hass.localize("panel.light")}</div>
+        ${this._lovelace
+          ? html`
+              <hui-view-container .hass=${this.hass}>
+                <hui-view-background .hass=${this.hass}> </hui-view-background>
+                <hui-view
+                  .hass=${this.hass}
+                  .narrow=${this.narrow}
+                  .lovelace=${this._lovelace}
+                  .index=${this._viewIndex}
+                ></hui-view
+              ></hui-view-container>
+            `
+          : nothing}
+      </ha-top-app-bar-fixed>
    `;
  }

@@ -169,78 +167,11 @@ class PanelLight extends LitElement {
          -webkit-user-select: none;
          -moz-user-select: none;
        }
-        .header {
-          background-color: var(--app-header-background-color);
-          color: var(--app-header-text-color, white);
-          position: fixed;
-          top: 0;
-          width: calc(
-            var(--ha-top-app-bar-width, 100%) - var(
-                --safe-area-inset-right,
-                0px
-              )
-          );
-          padding-top: var(--safe-area-inset-top);
-          z-index: 4;
-          display: flex;
-          flex-direction: row;
-          -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
-          backdrop-filter: var(--app-header-backdrop-filter, none);
-          padding-top: var(--safe-area-inset-top);
-          padding-right: var(--safe-area-inset-right);
-        }
-        :host([narrow]) .header {
-          width: calc(
-            var(--ha-top-app-bar-width, 100%) - var(
-                --safe-area-inset-left,
-                0px
-              ) - var(--safe-area-inset-right, 0px)
-          );
-          padding-left: var(--safe-area-inset-left);
-        }
-        :host([scrolled]) .header {
-          box-shadow: var(
-            --bar-box-shadow,
-            0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-            0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-            0px 1px 10px 0px rgba(0, 0, 0, 0.12)
-          );
-        }
-        .toolbar {
-          height: var(--header-height);
-          display: flex;
-          flex: 1;
-          align-items: center;
-          font-size: var(--ha-font-size-xl);
-          padding: 0px 12px;
-          font-weight: var(--ha-font-weight-normal);
-          box-sizing: border-box;
-          border-bottom: var(--app-header-border-bottom, none);
-        }
-        :host([narrow]) .toolbar {
-          padding: 0 4px;
-        }
-        .main-title {
-          margin-inline-start: var(--ha-space-6);
-          line-height: var(--ha-line-height-normal);
-          flex-grow: 1;
-        }
-        .narrow .main-title {
-          margin-inline-start: var(--ha-space-2);
-        }
        hui-view-container {
          position: relative;
          display: flex;
          min-height: 100vh;
          box-sizing: border-box;
-          padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
-          padding-right: var(--safe-area-inset-right);
-          padding-inline-end: var(--safe-area-inset-right);
-          padding-bottom: var(--safe-area-inset-bottom);
-        }
-        :host([narrow]) hui-view-container {
-          padding-left: var(--safe-area-inset-left);
-          padding-inline-start: var(--safe-area-inset-left);
        }
        hui-view {
          flex: 1 1 100%;
@@ -155,7 +155,7 @@ export class HuiActionEditor extends LitElement {
        this.defaultAction
          ? ` (${this.hass!.localize(
              `ui.panel.lovelace.editor.action-editor.actions.${this.defaultAction}`
-            )})`
+            ).toLowerCase()})`
          : ""
      }`,
    };
@@ -5575,7 +5575,7 @@
                  "sunset": "Sunset",
                  "description": {
                    "picker": "Tests if the sun is above or below the horizon.",
-                    "between": "Between {afterChoice, select, \n sunrise { sunrise}\n sunset { sunset}\n other {}\n}{afterOffsetChoice, select, \n offset { {afterOffset}}\n other {}\n} and {beforeChoice, select, \n sunrise { sunrise}\n sunset { sunset}\n other {}\n}{beforeOffsetChoice, select, \n offset { {beforeOffset}}\n other {}\n}",
+                    "between": "Between {beforeChoice, select, \n sunrise { sunrise}\n sunset { sunset}\n other {}\n}{beforeOffsetChoice, select, \n offset { {beforeOffset}}\n other {}\n} and {afterChoice, select, \n sunrise { sunrise}\n sunset { sunset}\n other {}\n}{afterOffsetChoice, select, \n offset { {afterOffset}}\n other {}\n}",
                    "before": "Before {beforeChoice, select, \n sunrise { sunrise}\n sunset { sunset}\n other {}\n}{beforeOffsetChoice, select, \n offset { {beforeOffset}}\n other {}\n}",
                    "after": "After {afterChoice, select, \n sunrise { sunrise}\n sunset { sunset}\n other {}\n}{afterOffsetChoice, select, \n offset { {afterOffset}}\n other {}\n}"
                  }
@@ -6319,7 +6319,8 @@
            "resend_confirm_email": "Resend confirmation email",
            "clicked_confirm": "I opened the confirmation link",
            "confirm_email": "Check the email we just sent to {email} and open the confirmation link to continue.",
-            "account_created": "Account created! Check your email for instructions on how to activate your account."
+            "account_created": "Account created! Check your email for instructions on how to activate your account.",
+            "verification_email_sent": "Verification email sent. Check your inbox for instructions on how to activate your account."
          },
          "account": {
            "download_support_package": "Download support package",
Author	SHA1	Message	Date
Paul Bottein	64f03ef147	Consider unknown as stopped for app	2026-05-28 15:25:46 +02:00
Jan-Philipp Benecke	e373689a37	Refactor climate panel to use top bar component (#52245 ) * Refactor climate panel to use top bar component * Remove calc * Remove * Remove	2026-05-28 15:48:06 +03:00
Jan-Philipp Benecke	5edcdb8977	Refactor light panel to use top bar component (#52246 ) * Refactor light panel to use top bar component * Remove * Remove * Remove	2026-05-28 15:47:41 +03:00
Wendelin	26b8921e8c	Fix automation behavior img file names (#52247 ) fix behavior img names	2026-05-28 14:33:55 +02:00
Petar Petrov	b8c201b6d3	Render echarts tooltips with Lit templates (#52235 ) * Render echarts tooltips with Lit templates Replace raw HTML string interpolation in echarts tooltip formatters with Lit templates so user-controlled fields (entity friendly_name, device names, node labels) are auto-escaped instead of relying on per-string filterXSS. ha-chart-base now wraps any function tooltip.formatter into a stable per-formatter container and handles Lit TemplateResult / nothing / null returns; the public HaECOption type lets charts express Lit-returning formatters without per-callsite casts. * Simplify * Refactor _getSeries * Small fix * Fix merge mistake * Marker component and wrapper test	2026-05-28 14:27:47 +02:00
Wendelin	4a6c23c93e	Fix automation add TCA paste (#52276 ) Fix automation add paste	2026-05-28 14:22:52 +02:00
Wendelin	e2712cb0b0	Fix row target count flickering, keyboard nav, type device (#52236 ) * Fix row target count flickering * Add noninteractive for device, fix keyboard nav * Noninteractive action, conditon * Remove unsued hass * invert noninteractive	2026-05-28 14:14:26 +02:00
renovate[bot]	db52cd0d8e	Update babel monorepo to v7.29.7 (#52277 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2026-05-28 15:01:16 +03:00
Wendelin	4891783c86	App details improve mobile and icon (#52275 ) * icon instead of logo, enable wrap * Keep logo * revert test url	2026-05-28 13:23:55 +02:00
Wendelin	b73732acdb	Card visibility-status use ha-alert (#52271 )	2026-05-28 10:57:41 +01:00
Wendelin	d950514104	Fix automation note keyboard a11y (#52270 )	2026-05-28 10:56:12 +01:00
Simon Lamon	f37cf1e848	Don't redispatch the original event in a checklist item (#52242 )	2026-05-28 08:26:00 +03:00
Paulus Schoutsen	a188ef1b7a	Fix resend-verification flash and concurrency on cloud signup (#52244 ) Resending the confirmation email reused the registration code path, so the flash on the login screen said "Account created!" even though no new account was created. Pass a message key to _verificationEmailSent so resend can show "Verification email sent." instead. _handleResendVerifyEmail also never set _requestInProgress, so the resend button (and the start-trial button, which share that flag) were not disabled while a resend was in flight and could be clicked repeatedly. Set the flag at the start and clear it on terminal errors; _verificationEmailSent already clears it on success. Co-authored-by: Claude <noreply@anthropic.com>	2026-05-28 08:11:54 +03:00
Wendelin	087ef159df	Fix ha-radio-option checked theming (#52237 ) Update ha-radio-option theming to use checked-icon-color for text and border	2026-05-27 15:58:00 +02:00