Fix hass-tabs-subpage narrow toggle (#52375)

Co-authored-by: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
Co-authored-by: Wendelin <w@pe8.at>

package.json

@@ -180,7 +180,7 @@
     "jsdom": "29.1.1",
     "jszip": "3.10.1",
     "license-checker-rseidelsohn": "5.0.1",
-    "lint-staged": "17.0.5",
+    "lint-staged": "17.0.6",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.18.1",

src/components/automation/ha-automation-row-live-test.ts

@@ -1,6 +1,5 @@
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../ha-tooltip";
 
 export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
 
@@ -13,7 +12,6 @@ export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
  *
  * @attr {"pass"|"fail"|"invalid"|"unknown"} state - The current live-test state. Defaults to `unknown`.
  * @attr {string} label - Accessible label announced by assistive technology.
- * @attr {string} message - Optional tooltip body shown on hover/focus.
  */
 @customElement("ha-automation-row-live-test")
 export class HaAutomationRowLiveTest extends LitElement {
@@ -21,8 +19,6 @@ export class HaAutomationRowLiveTest extends LitElement {
 
   @property() public label = "";
 
-  @property() public message?: string;
-
   protected render() {
     return html`
       <div
@@ -31,39 +27,38 @@ export class HaAutomationRowLiveTest extends LitElement {
         tabindex="0"
         aria-label=${this.label}
       ></div>
-      ${this.message
-        ? html`<ha-tooltip for="indicator">${this.message}</ha-tooltip>`
-        : nothing}
     `;
   }
 
   static styles = css`
     :host {
       position: absolute;
+      top: -5px;
       inset-inline-end: -6px;
       display: inline-block;
     }
     #indicator {
-      width: 12px;
-      height: 12px;
+      width: 10px;
+      height: 10px;
       border-radius: var(--ha-border-radius-circle);
-      border: 3px solid;
+      border: var(--ha-border-width-md) solid;
       box-sizing: border-box;
       background-color: var(--card-background-color);
+      box-shadow: 0 0 0 2px var(--card-background-color);
       transition: all var(--ha-animation-duration-normal) ease-in-out;
     }
     :host([state="pass"]) #indicator {
-      background-color: var(--ha-color-fill-success-loud-resting);
-      border-color: var(--ha-color-fill-success-loud-resting);
+      background-color: var(--ha-color-green-60);
+      border-color: var(--ha-color-green-60);
     }
     :host([state="fail"]) #indicator {
-      border-color: var(--ha-color-fill-warning-loud-resting);
+      border-color: var(--ha-color-orange-60);
     }
     :host([state="invalid"]) #indicator {
-      border-color: var(--ha-color-fill-danger-loud-resting);
+      border-color: var(--ha-color-red-60);
     }
     :host([state="unknown"]) #indicator {
-      border-color: var(--ha-color-fill-neutral-loud-resting);
+      border-color: var(--ha-color-neutral-60);
     }
   `;
 }

src/components/automation/ha-automation-row.ts

@@ -165,7 +165,7 @@ export class HaAutomationRow extends LitElement {
     ::slotted([slot="leading-icon"]) {
       color: var(--ha-color-on-neutral-quiet);
     }
-    :host([building-block]) ::slotted([slot="leading-icon"]) {
+    :host([building-block]) ::slotted(#condition-icon) {
       --mdc-icon-size: var(--ha-space-5);
       color: var(--white-color);
       transform: rotate(-45deg);

src/components/chart/ha-sankey-chart.ts

@@ -101,18 +101,22 @@ export class HaSankeyChart extends LitElement {
     const value = this.valueFormatter
       ? this.valueFormatter(data.value)
       : data.value;
+    // Keep numbers and units left-to-right, even in RTL locales.
+    const formattedValue = html`<div style="direction:ltr; display: inline;">
+      ${value}
+    </div>`;
     if (data.id) {
       const node = this.data.nodes.find((n) => n.id === data.id);
       return html`<ha-chart-tooltip-marker
           .color=${String(params.color ?? "")}
         ></ha-chart-tooltip-marker>
-        ${node?.label ?? data.id}<br />${value}`;
+        ${node?.label ?? data.id}<br />${formattedValue}`;
     }
     if (data.source && data.target) {
       const source = this.data.nodes.find((n) => n.id === data.source);
       const target = this.data.nodes.find((n) => n.id === data.target);
       return html`${source?.label ?? data.source} →
-        ${target?.label ?? data.target}<br />${value}`;
+        ${target?.label ?? data.target}<br />${formattedValue}`;
     }
     return null;
   };

src/data/automation.ts

@@ -485,6 +485,17 @@ export const migrateAutomationTrigger = (
     }
     delete trigger.platform;
   }
+
+  if ("options" in trigger) {
+    if (trigger.options && "behavior" in trigger.options) {
+      if (trigger.options.behavior === "any") {
+        trigger.options.behavior = "each";
+      } else if (trigger.options.behavior === "last") {
+        trigger.options.behavior = "all";
+      }
+    }
+  }
+
   return trigger;
 };
 

src/layouts/hass-tabs-subpage.ts

@@ -139,6 +139,8 @@ export class HassTabsSubpage extends LitElement {
   );
 
   public willUpdate(changedProperties: PropertyValues<this>) {
+    this.toggleAttribute("narrow", this._narrow);
+
     if (changedProperties.has("route")) {
       const currentPath = `${this.route.prefix}${this.route.path}`;
       this._activeTab = this.tabs.find((tab) =>

src/panels/config/apps/components/supervisor-apps-card-content.ts

@@ -1,5 +1,5 @@
 import "@home-assistant/webawesome/dist/components/tag/tag";
-import { mdiHelpCircleOutline } from "@mdi/js";
+import { mdiCheckCircle, mdiHelpCircleOutline } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -25,7 +25,9 @@ class SupervisorAppsCardContent extends LitElement {
 
   @property() public stage: AddonStage = "stable";
 
-  @property() public state: AddonState = null;
+  @property() public state?: AddonState;
+
+  @property({ type: Boolean }) public installed = false;
 
   @property() public description?: string;
 
@@ -77,13 +79,23 @@ class SupervisorAppsCardContent extends LitElement {
           </div>
         </div>
       </div>
-      ${this.tags?.length || this.state
+      ${this.tags?.length || this.state !== undefined || this.installed
         ? html`
             <div class="footer">
-              <supervisor-apps-state
-                .state=${this.state || "unknown"}
-              ></supervisor-apps-state>
-
+              ${this.state !== undefined
+                ? html`<supervisor-apps-state
+                    .state=${this.state || "unknown"}
+                  ></supervisor-apps-state>`
+                : this.installed
+                  ? html`<div class="installed">
+                      <ha-svg-icon .path=${mdiCheckCircle}></ha-svg-icon>
+                      <span
+                        >${this.hass.localize(
+                          "ui.panel.config.apps.state.installed"
+                        )}</span
+                      >
+                    </div>`
+                  : html`<span></span>`}
               ${this.tags?.length
                 ? html`<div class="tags">
                     ${this.tags.map(
@@ -159,6 +171,17 @@ class SupervisorAppsCardContent extends LitElement {
       display: flex;
       gap: var(--ha-space-2);
     }
+    .installed {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ha-space-2);
+      color: var(--ha-color-text-secondary);
+      font-size: var(--ha-font-size-m);
+    }
+    .installed ha-svg-icon {
+      --mdc-icon-size: 16px;
+      color: var(--ha-color-on-success-normal);
+    }
   `;
 }
 

src/panels/config/apps/supervisor-apps-repository.ts

@@ -1,7 +1,14 @@
-import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
+import {
+  mdiAlertDecagramOutline,
+  mdiArrowUpBoldCircle,
+  mdiArrowUpBoldCircleOutline,
+  mdiFlask,
+  mdiPuzzle,
+} from "@mdi/js";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
@@ -10,6 +17,7 @@ import type { HassioAddonRepository } from "../../../data/hassio/addon";
 import type { StoreAddon } from "../../../data/supervisor/store";
 import type { HomeAssistant } from "../../../types";
 import "./components/supervisor-apps-card-content";
+import type { AppTag } from "./components/supervisor-apps-card-content";
 import { filterAndSort } from "./components/supervisor-apps-filter";
 import { supervisorAppsStyle } from "./resources/supervisor-apps-style";
 
@@ -54,21 +62,29 @@ export class SupervisorAppsRepositoryEl extends LitElement {
       <div class="content">
         <h1>${repo.name}</h1>
         <div class="card-group">
-          ${addons.map(
-            (addon) => html`
+          ${addons.map((addon) => {
+            const tags = this._getAppTags(addon);
+            return html`
               <ha-card
                 outlined
                 .addon=${addon}
                 class=${addon.available ? "" : "not_available"}
                 @click=${this._addonTapped}
               >
-                <div class="card-content">
+                <div
+                  class=${classMap({
+                    "card-content": true,
+                    "has-footer": tags.length > 0 || addon.installed,
+                  })}
+                >
                   <supervisor-apps-card-content
                     .hass=${this.hass}
                     .title=${addon.name}
                     .stage=${addon.stage}
                     .description=${addon.description}
                     .available=${addon.available}
+                    .installed=${addon.installed}
+                    .tags=${tags}
                     .icon=${addon.installed && addon.update_available
                       ? mdiArrowUpBoldCircle
                       : mdiPuzzle}
@@ -108,8 +124,8 @@ export class SupervisorAppsRepositoryEl extends LitElement {
                   ></supervisor-apps-card-content>
                 </div>
               </ha-card>
-            `
-          )}
+            `;
+          })}
         </div>
       </div>
     `;
@@ -119,6 +135,32 @@ export class SupervisorAppsRepositoryEl extends LitElement {
     navigate(`/config/app/${ev.currentTarget.addon.slug}/info?store=true`);
   }
 
+  private _getAppTags(addon: StoreAddon): AppTag[] {
+    const labels: AppTag[] = [];
+
+    if (addon.installed && addon.update_available) {
+      labels.push({
+        label: this.hass.localize(
+          `ui.panel.config.apps.state.update_available`
+        ),
+        variant: "brand",
+        iconPath: mdiArrowUpBoldCircleOutline,
+      });
+    }
+    if (addon.stage !== "stable") {
+      labels.push({
+        label: this.hass.localize(
+          `ui.panel.config.apps.dashboard.capability.stages.${addon.stage}`
+        ),
+        variant: addon.stage === "experimental" ? "warning" : "danger",
+        iconPath:
+          addon.stage === "experimental" ? mdiFlask : mdiAlertDecagramOutline,
+      });
+    }
+
+    return labels;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       supervisorAppsStyle,
@@ -127,6 +169,9 @@ export class SupervisorAppsRepositoryEl extends LitElement {
           cursor: pointer;
           overflow: hidden;
         }
+        .card-content.has-footer {
+          padding: var(--ha-space-4) var(--ha-space-4) var(--ha-space-2);
+        }
         .not_available {
           opacity: 0.6;
         }

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

@@ -52,6 +52,7 @@ import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 import "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-tooltip";
 import type {
   AutomationClipboard,
   Condition,
@@ -211,11 +212,27 @@ export default class HaAutomationConditionRow extends LitElement {
     );
 
     return html`
-      <ha-condition-icon
-        slot="leading-icon"
-        .hass=${this.hass}
-        .condition=${this.condition.condition}
-      ></ha-condition-icon>
+      <div id="condition-icon" class="icon-badge-wrapper" slot="leading-icon">
+        <ha-condition-icon
+          .hass=${this.hass}
+          .condition=${this.condition.condition}
+        ></ha-condition-icon>
+        ${this.optionsInSidebar && this.condition.condition !== "trigger"
+          ? html`<ha-automation-row-live-test
+              .state=${this._liveTestResult.state}
+              .label=${this.hass.localize(
+                `ui.panel.config.automation.editor.conditions.live_test_state.${this._liveTestResult.state}`
+              )}
+            ></ha-automation-row-live-test>`
+          : nothing}
+      </div>
+      ${this.optionsInSidebar &&
+      this.condition.condition !== "trigger" &&
+      this._liveTestResult.message
+        ? html`<ha-tooltip for="condition-icon" slot="leading-icon"
+            >${this._liveTestResult.message}</ha-tooltip
+          >`
+        : nothing}
       <h3 slot="header">
         ${capitalizeFirstLetter(
           describeCondition(this.condition, this.hass, this._entityReg)
@@ -531,17 +548,7 @@ export default class HaAutomationConditionRow extends LitElement {
               @click=${this._toggleSidebar}
               @toggle-collapsed=${this._toggleCollapse}
               >${this._renderRow()}
-              <ha-automation-row-live-test
-                slot="icons"
-                .state=${this.condition.condition !== "trigger"
-                  ? this._liveTestResult.state
-                  : "unknown"}
-                .label=${this.hass.localize(
-                  `ui.panel.config.automation.editor.conditions.live_test_state.${this.condition.condition !== "trigger" ? this._liveTestResult.state : "unknown"}`
-                )}
-                .message=${this._liveTestResult.message}
-              ></ha-automation-row-live-test
-            ></ha-automation-row>`
+            </ha-automation-row>`
           : html`
               <ha-expansion-panel
                 left-chevron

src/panels/config/automation/styles.ts

@@ -53,6 +53,11 @@ export const rowStyles = css`
     position: absolute;
   }
 
+  .icon-badge-wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
   .note-indicator {
     color: var(--ha-color-on-neutral-normal);
   }

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

@@ -25,6 +25,7 @@ import {
   type ExtEntityRegistryEntry,
 } from "../../../../../data/entity/entity_registry";
 import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box";
+import { OVERRIDE_DEVICE_CLASSES } from "../../../entities/entity-registry-settings-editor";
 import "./matter-add-device/matter-add-device-apple-home";
 import "./matter-add-device/matter-add-device-existing";
 import "./matter-add-device/matter-add-device-generic";
@@ -139,15 +140,17 @@ class DialogMatterAddDevice extends LitElement {
       entityIds
     );
 
-    const mainEntry = Object.values(entries).find(
-      (e) => e.original_name === null
-    );
-    if (!mainEntry) return;
-
-    const domain = computeDomain(mainEntry.entity_id);
-    if (domain === "cover" || domain === "binary_sensor") {
-      this._mainEntity = mainEntry;
-    }
+    this._mainEntity = Object.values(entries).find((entry) => {
+      if (entry.entity_category) return false;
+      const domain = computeDomain(entry.entity_id);
+      const deviceClasses = OVERRIDE_DEVICE_CLASSES[domain];
+      if (!deviceClasses) return false;
+      const deviceClass = entry.device_class ?? entry.original_device_class;
+      if (!deviceClass) return false;
+      return deviceClasses.some(
+        (classes) => classes.length > 1 && classes.includes(deviceClass)
+      );
+    });
   }
 
   private _dialogClosed(): void {

src/panels/lovelace/cards/energy/hui-energy-sankey-card.ts

@@ -438,9 +438,7 @@ class HuiEnergySankeyCard
   }
 
   private _valueFormatter = (value: number) =>
-    `<div style="direction:ltr; display: inline;">
-      ${formatNumber(value, this.hass.locale, value < 0.1 ? { maximumFractionDigits: 3 } : undefined)}
-      kWh</div>`;
+    `${formatNumber(value, this.hass.locale, value < 0.1 ? { maximumFractionDigits: 3 } : undefined)} kWh`;
 
   private _handleNodeClick(ev: CustomEvent<{ node: Node }>) {
     const { node } = ev.detail;

src/panels/lovelace/cards/energy/hui-power-sankey-card.ts

@@ -580,9 +580,7 @@ class HuiPowerSankeyCard
   }
 
   private _valueFormatter = (value: number) =>
-    `<div style="direction:ltr; display: inline;">
-      ${formatPowerShort(this.hass, value)}
-    </div>`;
+    formatPowerShort(this.hass, value);
 
   private _handleNodeClick(ev: CustomEvent<{ node: Node }>) {
     const { node } = ev.detail;

src/panels/lovelace/cards/water/hui-water-flow-sankey-card.ts

@@ -511,9 +511,11 @@ class HuiWaterFlowSankeyCard
   }
 
   private _valueFormatter = (value: number) =>
-    `<div style="direction:ltr; display: inline;">
-      ${formatFlowRateShort(this.hass.locale, this.hass.config.unit_system.length, value)}
-    </div>`;
+    formatFlowRateShort(
+      this.hass.locale,
+      this.hass.config.unit_system.length,
+      value
+    );
 
   private _handleNodeClick(ev: CustomEvent<{ node: Node }>) {
     const { node } = ev.detail;

src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts

@@ -30,6 +30,7 @@ import "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-tooltip";
 import "../../../../components/ha-yaml-editor";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
@@ -230,11 +231,28 @@ export class HaCardConditionEditor extends LitElement {
     return html`
       <div class="container">
         <ha-expansion-panel left-chevron>
-          <ha-svg-icon
+          <div
+            id="condition-icon"
+            class="icon-badge-wrapper"
             slot="leading-icon"
-            class="condition-icon"
-            .path=${ICON_CONDITION[condition.condition]}
-          ></ha-svg-icon>
+          >
+            <ha-svg-icon
+              .path=${ICON_CONDITION[condition.condition]}
+            ></ha-svg-icon>
+            ${hideLiveTest
+              ? nothing
+              : html`<ha-automation-row-live-test
+                  .state=${this._liveTestResult.state}
+                  .label=${this.hass.localize(
+                    `ui.panel.lovelace.editor.condition-editor.live_test_state.${this._liveTestResult.state}`
+                  )}
+                ></ha-automation-row-live-test>`}
+          </div>
+          ${!hideLiveTest && this._liveTestResult.message
+            ? html`<ha-tooltip for="condition-icon" slot="leading-icon"
+                >${this._liveTestResult.message}</ha-tooltip
+              >`
+            : nothing}
           <h3 slot="header">
             ${this.hass.localize(
               `ui.panel.lovelace.editor.condition-editor.condition.${condition.condition}.label`
@@ -255,18 +273,6 @@ export class HaCardConditionEditor extends LitElement {
                   "ui.panel.lovelace.editor.condition-editor.testing_error"
                 )}
           </ha-automation-row-event-chip>
-          ${hideLiveTest
-            ? nothing
-            : html`
-                <ha-automation-row-live-test
-                  slot="icons"
-                  .state=${this._liveTestResult.state}
-                  .label=${this.hass.localize(
-                    `ui.panel.lovelace.editor.condition-editor.live_test_state.${this._liveTestResult.state}`
-                  )}
-                  .message=${this._liveTestResult.message}
-                ></ha-automation-row-live-test>
-              `}
           <ha-dropdown
             slot="icons"
             @wa-select=${this._handleAction}
@@ -479,17 +485,15 @@ export class HaCardConditionEditor extends LitElement {
         --expansion-panel-summary-padding: 0 0 0 8px;
         --expansion-panel-content-padding: 0;
       }
-      .condition-icon {
+      .icon-badge-wrapper {
         display: none;
       }
       @media (min-width: 870px) {
-        .condition-icon {
-          display: inline-block;
+        .icon-badge-wrapper {
+          display: inline-flex;
+          position: relative;
           color: var(--secondary-text-color);
           opacity: 0.9;
-          margin-right: 8px;
-          margin-inline-end: 8px;
-          margin-inline-start: initial;
         }
       }
       h3 {

yarn.lock

@@ -8557,7 +8557,7 @@ __metadata:
     leaflet-draw: "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch"
     leaflet.markercluster: "npm:1.5.3"
     license-checker-rseidelsohn: "npm:5.0.1"
-    lint-staged: "npm:17.0.5"
+    lint-staged: "npm:17.0.6"
     lit: "npm:3.3.3"
     lit-analyzer: "npm:2.0.3"
     lit-html: "npm:3.3.3"
@@ -9936,21 +9936,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lint-staged@npm:17.0.5":
-  version: 17.0.5
-  resolution: "lint-staged@npm:17.0.5"
+"lint-staged@npm:17.0.6":
+  version: 17.0.6
+  resolution: "lint-staged@npm:17.0.6"
   dependencies:
     listr2: "npm:^10.2.1"
     picomatch: "npm:^4.0.4"
     string-argv: "npm:^0.3.2"
-    tinyexec: "npm:^1.1.2"
-    yaml: "npm:^2.8.4"
+    tinyexec: "npm:1.2.2"
+    yaml: "npm:^2.9.0"
   dependenciesMeta:
     yaml:
       optional: true
   bin:
     lint-staged: bin/lint-staged.js
-  checksum: 10/a0bea43689d68ec0bf6a56943884dbdb96b6b49e2677bf80654d802678b2edf9fc65338ca8ef3fc310f245933ea2a809db1ac94431dc445c57a4d49620d9d4da
+  checksum: 10/371918cfb293ed0ca5d16fc2a1de304b5a95d21b87dc1ea7f3751567c8f8a07971a40349fac8edb5fce3c6ea6713f70922ea90184b142fd432a5bb4db6c316b0
   languageName: node
   linkType: hard
 
@@ -13172,10 +13172,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyexec@npm:^1.0.2, tinyexec@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "tinyexec@npm:1.1.2"
-  checksum: 10/2bbe37f9001c6f5723ab39eb8dc1e88f77e830d7cf2e8f34bb75019eb505fcfe3b061b4799c502ff31fa63aa1a9adc649add5ff1e17b7fbd8c16e1afb75d0b9e
+"tinyexec@npm:1.2.2, tinyexec@npm:^1.0.2":
+  version: 1.2.2
+  resolution: "tinyexec@npm:1.2.2"
+  checksum: 10/e6f3cabafc33a46063868b4e9c0ab76722e21cb46f0177f7bef5a9656e09ea6fa37115d3e47f776aff11aab9ab696b0c840c8e0099fab574b1e37767c4371aec
   languageName: node
   linkType: hard
 
@@ -14755,7 +14755,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yaml@npm:^2.8.4":
+"yaml@npm:^2.9.0":
   version: 2.9.0
   resolution: "yaml@npm:2.9.0"
   bin: