Merge branch 'rc' into dev

* Render small media browser thumbnails without blur

* Only 16 pixels and no svg

* Skip brand url

* Media selector

gallery/src/ha-demo-options.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-top-app-bar-fixed";
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import "../../src/components/ha-icon-button";

gallery/src/ha-gallery.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-top-app-bar-fixed";
 import { mdiMenu, mdiSwapHorizontal } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html } from "lit";
@@ -11,6 +10,7 @@ import type { HaDrawer } from "../../src/components/ha-drawer";
 import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
 import "../../src/components/ha-icon-button";
 import "../../src/components/ha-svg-icon";
+import "../../src/components/ha-top-app-bar-fixed";
 import "../../src/managers/notification-manager";
 import { haStyle } from "../../src/resources/styles";
 import { PAGES, SIDEBAR } from "../build/import-pages";
@@ -84,7 +84,7 @@ class HaGallery extends LitElement {
         <div class="drawer-title">Home Assistant Design</div>
         <div class="sidebar">${sidebar}</div>
         <div slot="appContent" class="app-content">
-          <mwc-top-app-bar-fixed>
+          <ha-top-app-bar-fixed>
             <ha-icon-button
               slot="navigationIcon"
               @click=${this._menuTapped}
@@ -94,7 +94,7 @@ class HaGallery extends LitElement {
             <div slot="title">
               ${PAGES[this._page].metadata.title || this._page.split("/")[1]}
             </div>
-          </mwc-top-app-bar-fixed>
+          </ha-top-app-bar-fixed>
           <div class="content">
             ${PAGES[this._page].description
               ? html`
@@ -227,11 +227,12 @@ class HaGallery extends LitElement {
         -webkit-user-select: initial;
         -moz-user-select: initial;
         --ha-sidebar-width: 256px;
+        --header-height: 64px;
       }
 
       .sidebar {
         box-sizing: border-box;
-        max-height: calc(100vh - 64px);
+        max-height: calc(100vh - var(--header-height));
         overflow-y: auto;
         padding: 4px;
       }
@@ -243,7 +244,7 @@ class HaGallery extends LitElement {
         display: flex;
         font-size: var(--ha-font-size-l);
         font-weight: var(--ha-font-weight-medium);
-        min-height: 64px;
+        min-height: var(--header-height);
         padding: 0 16px;
       }
 
@@ -277,6 +278,10 @@ class HaGallery extends LitElement {
         background: var(--primary-background-color);
       }
 
+      ha-drawer[type="dismissible"][open] ha-top-app-bar-fixed {
+        --ha-top-app-bar-width: calc(100% - var(--ha-sidebar-width));
+      }
+
       .content {
         flex: 1;
       }

gallery/src/pages/components/ha-tip.ts

@@ -1,10 +1,12 @@
-import type { TemplateResult, PropertyValues } from "lit";
-import { html, css, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-tip";
-import "../../../../src/components/ha-card";
+import { provide } from "@lit/context";
+import type { PropertyValues, TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-tip";
+import { internationalizationContext } from "../../../../src/data/context";
+import type { HomeAssistantInternationalization } from "../../../../src/types";
 
 const tips: (string | TemplateResult)[] = [
   "Test tip",
@@ -14,16 +16,25 @@ const tips: (string | TemplateResult)[] = [
 
 @customElement("demo-components-ha-tip")
 export class DemoHaTip extends LitElement {
+  @provide({ context: internationalizationContext })
+  @state()
+  protected _i18n: HomeAssistantInternationalization = {
+    localize: ((key: string) => key) as any,
+    language: "en",
+    selectedLanguage: null,
+    locale: {} as any,
+    translationMetadata: {} as any,
+    loadBackendTranslation: (async () => (key: string) => key) as any,
+    loadFragmentTranslation: (async () => (key: string) => key) as any,
+  };
+
   protected render(): TemplateResult {
     return html` ${["light", "dark"].map(
       (mode) => html`
         <div class=${mode}>
           <ha-card header="ha-tip ${mode} demo">
             <div class="card-content">
-              ${tips.map(
-                (tip) =>
-                  html`<ha-tip .hass=${provideHass(this)}>${tip}</ha-tip>`
-              )}
+              ${tips.map((tip) => html`<ha-tip>${tip}</ha-tip>`)}
             </div>
           </ha-card>
         </div>

package.json

@@ -65,9 +65,6 @@
     "@material/mwc-base": "0.27.0",
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
-    "@material/mwc-top-app-bar": "0.27.0",
-    "@material/mwc-top-app-bar-fixed": "0.27.0",
-    "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
     "@material/web": "2.4.1",
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
@@ -90,7 +87,7 @@
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
     "dialog-polyfill": "0.5.6",
-    "echarts": "6.0.0",
+    "echarts": "6.1.0",
     "element-internals-polyfill": "3.0.2",
     "fuse.js": "7.3.0",
     "google-timezones-json": "1.2.0",
@@ -135,7 +132,7 @@
     "@babel/preset-env": "7.29.5",
     "@bundle-stats/plugin-webpack-filter": "4.22.1",
     "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.60.0",
+    "@html-eslint/eslint-plugin": "0.61.0",
     "@lokalise/node-api": "16.0.0",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20260429.0"
+version      = "20260527.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/common/decorators/consume-context-entry.ts

@@ -1,8 +1,16 @@
 import { consume } from "@lit/context";
 import type { HassEntities, HassEntity } from "home-assistant-js-websocket";
-import type { HomeAssistant } from "../../types";
-import { entitiesContext, statesContext } from "../../data/context";
+import type {
+  HomeAssistant,
+  HomeAssistantInternationalization,
+} from "../../types";
+import {
+  entitiesContext,
+  internationalizationContext,
+  statesContext,
+} from "../../data/context";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
+import type { LocalizeFunc } from "../translations/localize";
 import { transform } from "./transform";
 
 interface ConsumeEntryConfig {
@@ -91,3 +99,15 @@ export const consumeEntityRegistryEntry = (config: ConsumeEntryConfig) =>
       return typeof id === "string" ? entities?.[id] : undefined;
     }
   );
+
+/**
+ * Consumes `internationalizationContext` and narrows it to the `localize`
+ * function. No host watching is needed — the decorated property updates
+ * whenever the i18n context changes.
+ */
+export const consumeLocalize = () =>
+  composeDecorator<HomeAssistantInternationalization, LocalizeFunc>(
+    internationalizationContext,
+    undefined,
+    ({ localize }) => localize
+  );

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

@@ -1,5 +1,6 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import "../ha-tooltip";
 
 export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
 
@@ -12,6 +13,7 @@ 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 {
@@ -19,6 +21,8 @@ export class HaAutomationRowLiveTest extends LitElement {
 
   @property() public label = "";
 
+  @property() public message?: string;
+
   protected render() {
     return html`
       <div
@@ -27,6 +31,9 @@ export class HaAutomationRowLiveTest extends LitElement {
         tabindex="0"
         aria-label=${this.label}
       ></div>
+      ${this.message
+        ? html`<ha-tooltip for="indicator">${this.message}</ha-tooltip>`
+        : nothing}
     `;
   }
 

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

@@ -956,29 +956,11 @@ export class HaChartBase extends LitElement {
     const xAxis = (this.options?.xAxis?.[0] ?? this.options?.xAxis) as
       | XAXisOption
       | undefined;
-    const yAxis = (this.options?.yAxis?.[0] ?? this.options?.yAxis) as
-      | YAXisOption
-      | undefined;
     const series = ensureArray(this.data).map((s) => {
       const data = this._hiddenDatasets.has(String(s.id ?? s.name))
         ? undefined
         : s.data;
       if (data && s.type === "line") {
-        if (yAxis?.type === "log") {
-          // set <=0 values to null so they render as gaps on a log graph
-          return {
-            ...s,
-            data: (data as LineSeriesOption["data"])!.map((v) =>
-              Array.isArray(v)
-                ? [
-                    v[0],
-                    typeof v[1] !== "number" || v[1] > 0 ? v[1] : null,
-                    ...v.slice(2),
-                  ]
-                : v
-            ),
-          };
-        }
         if (s.sampling === "minmax") {
           const minX = xAxis?.min
             ? xAxis.min instanceof Date

src/components/data-table/dialog-data-table-settings.ts

@@ -1,13 +1,14 @@
 import { mdiDragHorizontalVariant, mdiEye, mdiEyeOff } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import { haStyleDialog } from "../../resources/styles";
-import type { HomeAssistant } from "../../types";
 import "../ha-button";
 import "../ha-dialog-footer";
 import "../ha-icon-button";
@@ -24,7 +25,9 @@ import type { DataTableSettingsDialogParams } from "./show-dialog-data-table-set
 
 @customElement("dialog-data-table-settings")
 export class DialogDataTableSettings extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
 
   @state() private _params?: DataTableSettingsDialogParams;
 
@@ -117,7 +120,7 @@ export class DialogDataTableSettings extends LitElement {
       return nothing;
     }
 
-    const localize = this._params.localizeFunc || this.hass.localize;
+    const localize = this._params.localizeFunc || this._localize;
 
     const columns = this._sortedColumns(
       this._params.columns,
@@ -172,7 +175,7 @@ export class DialogDataTableSettings extends LitElement {
                     .hidden=${!isVisible}
                     .path=${isVisible ? mdiEye : mdiEyeOff}
                     slot="meta"
-                    .label=${this.hass!.localize(
+                    .label=${localize(
                       `ui.components.data-table.settings.${isVisible ? "hide" : "show"}`,
                       { title: typeof col.title === "string" ? col.title : "" }
                     )}

src/components/ha-alert.ts

@@ -6,8 +6,9 @@ import {
   mdiInformationOutline,
 } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-icon-button";
@@ -39,7 +40,9 @@ class HaAlert extends LitElement {
 
   @property({ type: Boolean }) public dismissable = false;
 
-  @property({ attribute: false }) public localize?: LocalizeFunc;
+  @state()
+  @consumeLocalize()
+  private _localize?: LocalizeFunc;
 
   @property({ type: Boolean }) public narrow = false;
 
@@ -68,7 +71,7 @@ class HaAlert extends LitElement {
               ${this.dismissable
                 ? html`<ha-icon-button
                     @click=${this._dismissClicked}
-                    .label=${this.localize!("ui.common.dismiss_alert")}
+                    .label=${this._localize?.("ui.common.dismiss_alert")}
                     .path=${mdiClose}
                   ></ha-icon-button>`
                 : nothing}

src/components/ha-areas-display-editor.ts

@@ -61,7 +61,6 @@ export class HaAreasDisplayEditor extends LitElement {
       >
         <ha-svg-icon slot="leading-icon" .path=${mdiTextureBox}></ha-svg-icon>
         <ha-items-display-editor
-          .hass=${this.hass}
           .items=${items}
           .value=${value}
           @value-changed=${this._areaDisplayChanged}

src/components/ha-areas-floors-display-editor.ts

@@ -107,7 +107,6 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
                       ></ha-svg-icon>
                     `}
                 <ha-items-display-editor
-                  .hass=${this.hass}
                   .items=${groupedAreasItems[floor.floor_id]}
                   .value=${value}
                   .floorId=${floor.floor_id}

src/components/ha-entities-display-editor.ts

@@ -54,7 +54,6 @@ export class HaEntitiesDisplayEditor extends LitElement {
 
     return html`
       <ha-items-display-editor
-        .hass=${this.hass}
         .items=${items}
         .value=${value}
         @value-changed=${this._itemDisplayChanged}

src/components/ha-header-bar.ts

@@ -1,59 +1,77 @@
-// @ts-ignore
-import topAppBarStyles from "@material/top-app-bar/dist/mdc.top-app-bar.min.css";
-import { css, html, LitElement, unsafeCSS } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 
 @customElement("ha-header-bar")
 export class HaHeaderBar extends LitElement {
   protected render() {
-    return html`<header class="mdc-top-app-bar">
-      <div class="mdc-top-app-bar__row">
-        <section
-          class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
-          id="navigation"
-        >
+    return html`<header class="header-bar">
+      <div class="row">
+        <section class="section" id="navigation">
           <slot name="navigationIcon"></slot>
-          <span class="mdc-top-app-bar__title">
+          <span class="title">
             <slot name="title"></slot>
           </span>
         </section>
-        <section
-          class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
-          id="actions"
-          role="toolbar"
-        >
+        <section class="section end" id="actions" role="toolbar">
           <slot name="actionItems"></slot>
         </section>
       </div>
     </header>`;
   }
 
-  static get styles() {
-    return [
-      unsafeCSS(topAppBarStyles),
-      css`
-        .mdc-top-app-bar__row {
-          height: var(--header-height);
-        }
-        .mdc-top-app-bar {
-          position: static;
-          color: var(--mdc-theme-on-primary, #fff);
-          padding: var(--header-bar-padding);
-        }
-        .mdc-top-app-bar__section.mdc-top-app-bar__section--align-start {
-          flex: 1;
-        }
-        .mdc-top-app-bar__section.mdc-top-app-bar__section--align-end {
-          flex: none;
-        }
-        .mdc-top-app-bar__title {
-          font-size: var(--ha-font-size-xl);
-          padding-inline-start: 24px;
-          padding-inline-end: initial;
-        }
-      `,
-    ];
-  }
+  static override styles = css`
+    :host {
+      display: block;
+    }
+
+    .header-bar {
+      box-sizing: border-box;
+      color: var(--app-header-text-color, var(--primary-text-color));
+      background-color: var(
+        --app-header-background-color,
+        var(--primary-background-color)
+      );
+      padding: var(--header-bar-padding);
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      width: 100%;
+      height: var(--header-height);
+    }
+
+    .section {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      min-width: 0;
+      height: 100%;
+      padding: 0 var(--ha-space-3);
+    }
+
+    #navigation {
+      flex: 1 1 auto;
+    }
+
+    .section.end {
+      flex: none;
+      justify-content: flex-end;
+    }
+
+    .title {
+      display: block;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: var(--ha-font-size-xl);
+      font-weight: var(--ha-font-weight-normal);
+      line-height: var(--header-height);
+      padding-inline-start: var(--ha-space-6);
+    }
+  `;
 }
 
 declare global {

src/components/ha-icon-overflow-menu.ts

@@ -2,10 +2,11 @@ import "@home-assistant/webawesome/dist/components/divider/divider";
 import { mdiDotsVertical } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { stopPropagation } from "../common/dom/stop_propagation";
+import type { LocalizeFunc } from "../common/translations/localize";
 import { haStyle } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import "./ha-dropdown";
 import "./ha-dropdown-item";
 import "./ha-icon-button";
@@ -26,7 +27,9 @@ export interface IconOverflowMenuItem {
 
 @customElement("ha-icon-overflow-menu")
 export class HaIconOverflowMenu extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
 
   @property({ type: Array }) public items: IconOverflowMenuItem[] = [];
 
@@ -44,7 +47,7 @@ export class HaIconOverflowMenu extends LitElement {
               @click=${stopPropagation}
             >
               <ha-icon-button
-                .label=${this.hass.localize("ui.common.overflow_menu")}
+                .label=${this._localize("ui.common.overflow_menu")}
                 .path=${mdiDotsVertical}
                 slot="trigger"
               ></ha-icon-button>

src/components/ha-input-helper-text.ts

@@ -14,7 +14,7 @@ class InputHelperText extends LitElement {
     :host {
       display: block;
       color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-      font-size: 0.75rem;
+      font-size: var(--ha-font-size-s);
       padding-left: 16px;
       padding-right: 16px;
       padding-inline-start: 16px;

src/components/ha-items-display-editor.ts

@@ -8,10 +8,11 @@ import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
 import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
 import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { orderCompare } from "../common/string/compare";
-import type { HomeAssistant } from "../types";
+import type { LocalizeFunc } from "../common/translations/localize";
 import "./ha-icon";
 import "./ha-icon-button";
 import "./ha-icon-next";
@@ -46,7 +47,9 @@ declare global {
 
 @customElement("ha-items-display-editor")
 export class HaItemDisplayEditor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
 
   @property({ attribute: false }) public items: DisplayItem[] = [];
 
@@ -161,7 +164,7 @@ export class HaItemDisplayEditor extends LitElement {
                     ? html`<ha-icon-button
                         .path=${isVisible ? mdiEye : mdiEyeOff}
                         slot="end"
-                        .label=${this.hass.localize(
+                        .label=${this._localize(
                           `ui.components.items-display-editor.${isVisible ? "hide" : "show"}`,
                           {
                             label: label,

src/components/ha-select-box.ts

@@ -1,11 +1,12 @@
+import { consume, type ContextType } from "@lit/context";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeRTL } from "../common/util/compute_rtl";
-import type { HomeAssistant } from "../types";
+import { internationalizationContext, uiContext } from "../data/context";
 import "./radio/ha-radio-group";
 import type { HaRadioGroup } from "./radio/ha-radio-group";
 import "./radio/ha-radio-option";
@@ -26,8 +27,6 @@ export interface SelectBoxOption {
 
 @customElement("ha-select-box")
 export class HaSelectBox extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
   @property({ attribute: false }) public options: SelectBoxOption[] = [];
 
   @property({ attribute: false }) public value?: string;
@@ -40,6 +39,14 @@ export class HaSelectBox extends LitElement {
   @property({ type: Boolean, attribute: "stacked_image" })
   public stackedImage = false;
 
+  @state()
+  @consume({ context: internationalizationContext, subscribe: true })
+  protected _i18n?: ContextType<typeof internationalizationContext>;
+
+  @state()
+  @consume({ context: uiContext, subscribe: true })
+  protected _ui?: ContextType<typeof uiContext>;
+
   render() {
     const maxColumns = this.maxColumns ?? 3;
     const columns = Math.min(maxColumns, this.options.length);
@@ -62,11 +69,11 @@ export class HaSelectBox extends LitElement {
     const disabled = option.disabled || this.disabled || false;
     const selected = option.value === this.value;
 
-    const isDark = this.hass?.themes.darkMode || false;
-    const isRTL = this.hass
+    const isDark = this._ui?.themes.darkMode || false;
+    const isRTL = this._i18n
       ? computeRTL(
-          this.hass.language,
-          this.hass.translationMetadata.translations
+          this._i18n.language,
+          this._i18n.translationMetadata.translations
         )
       : false;
 

src/components/ha-selector/ha-selector-automation-behavior.ts

@@ -1,30 +1,31 @@
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
+import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { LocalizeKeys } from "../../common/translations/localize";
+import type {
+  LocalizeFunc,
+  LocalizeKeys,
+} from "../../common/translations/localize";
 import type {
   AutomationBehavior,
   AutomationBehaviorConditionMode,
   AutomationBehaviorSelector,
   AutomationBehaviorTriggerMode,
 } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
 import "../ha-input-helper-text";
-import type { SelectBoxOption } from "../ha-select-box";
 import "../ha-select-box";
+import type { SelectBoxOption } from "../ha-select-box";
 
 const TRIGGER_BEHAVIORS: AutomationBehaviorTriggerMode[] = [
-  "any",
+  "each",
   "first",
-  "last",
+  "all",
 ];
 
 const CONDITION_BEHAVIORS: AutomationBehaviorConditionMode[] = ["any", "all"];
 
 @customElement("ha-selector-automation_behavior")
 export class HaSelectorAutomationBehavior extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false })
   public selector!: AutomationBehaviorSelector;
 
@@ -39,6 +40,9 @@ export class HaSelectorAutomationBehavior extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  @consumeLocalize()
+  protected _localize?: LocalizeFunc;
+
   protected render() {
     const { mode } = this.selector.automation_behavior ?? {};
     const modeKey = mode ?? "trigger";
@@ -60,7 +64,6 @@ export class HaSelectorAutomationBehavior extends LitElement {
 
     return html`
       <ha-select-box
-        .hass=${this.hass}
         .options=${options}
         .value=${this.value ?? ""}
         max_columns="1"
@@ -95,8 +98,10 @@ export class HaSelectorAutomationBehavior extends LitElement {
         return translated;
       }
     }
-    return this.hass.localize(
-      `ui.components.selectors.automation_behavior.${mode ?? "trigger"}.options.${behavior}.${field}` as LocalizeKeys
+    return (
+      this._localize?.(
+        `ui.components.selectors.automation_behavior.${mode ?? "trigger"}.options.${behavior}.${field}` as LocalizeKeys
+      ) || behavior
     );
   }
 

src/components/ha-selector/ha-selector-media.ts

@@ -1,11 +1,10 @@
 import { mdiPlayBox, mdiPlus } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { supportsFeature } from "../../common/entity/supports-feature";
-import { getSignedPath } from "../../data/auth";
 import type { MediaPickedEvent } from "../../data/media-player";
 import {
   MediaClassBrowserSettings,
@@ -13,14 +12,10 @@ import {
 } from "../../data/media-player";
 import type { MediaSelector, MediaSelectorValue } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
-import {
-  brandsUrl,
-  extractDomainFromBrandUrl,
-  isBrandUrl,
-} from "../../util/brands-url";
 import "../ha-alert";
 import "../ha-form/ha-form";
 import type { SchemaUnion } from "../ha-form/types";
+import "../media-player/ha-media-browser-thumbnail";
 import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
 import { ensureArray } from "../../common/array/ensure-array";
 import "../ha-picture-upload";
@@ -54,8 +49,6 @@ export class HaMediaSelector extends LitElement {
     filter_entity?: string | string[];
   };
 
-  @state() private _thumbnailUrl?: string | null;
-
   private _contextEntities: string[] | undefined;
 
   private get _hasAccept(): boolean {
@@ -68,35 +61,6 @@ export class HaMediaSelector extends LitElement {
         this._contextEntities = ensureArray(this.context?.filter_entity);
       }
     }
-
-    if (changedProps.has("value")) {
-      const thumbnail = this.value?.metadata?.thumbnail;
-      const oldThumbnail = (changedProps.get("value") as this["value"])
-        ?.metadata?.thumbnail;
-      if (thumbnail === oldThumbnail) {
-        return;
-      }
-      if (thumbnail && isBrandUrl(thumbnail)) {
-        // The backend is not aware of the theme used by the users,
-        // so we rewrite the URL to show a proper icon
-        this._thumbnailUrl = brandsUrl(
-          {
-            domain: extractDomainFromBrandUrl(thumbnail),
-            type: "icon",
-            darkOptimized: this.hass.themes?.darkMode,
-          },
-          this.hass.auth.data.hassUrl
-        );
-      } else if (thumbnail && thumbnail.startsWith("/")) {
-        this._thumbnailUrl = undefined;
-        // Thumbnails served by local API require authentication
-        getSignedPath(this.hass, thumbnail).then((signedPath) => {
-          this._thumbnailUrl = signedPath.path;
-        });
-      } else {
-        this._thumbnailUrl = thumbnail;
-      }
-    }
   }
 
   protected render() {
@@ -186,10 +150,12 @@ export class HaMediaSelector extends LitElement {
                               ),
                           })}
                           image"
-                          style=${this._thumbnailUrl
-                            ? `background-image: url(${this._thumbnailUrl});`
-                            : ""}
-                        ></div>
+                        >
+                          <ha-media-browser-thumbnail
+                            .hass=${this.hass}
+                            .url=${this.value.metadata.thumbnail}
+                          ></ha-media-browser-thumbnail>
+                        </div>
                       `
                     : html`
                         <div class="icon-holder image">
@@ -410,13 +376,11 @@ export class HaMediaSelector extends LitElement {
       right: 0;
       left: 0;
       bottom: 0;
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: center;
+      --ha-media-browser-thumbnail-fit: cover;
     }
     .centered-image {
       margin: 4px;
-      background-size: contain;
+      --ha-media-browser-thumbnail-fit: contain;
     }
     .icon-holder {
       display: flex;

src/components/ha-selector/ha-selector-select.ts

@@ -96,7 +96,6 @@ export class HaSelectSelector extends LitElement {
           .value=${this.value as string | undefined}
           @value-changed=${this._selectChanged}
           .maxColumns=${this.selector.select?.box_max_columns}
-          .hass=${this.hass}
         ></ha-select-box>
         ${this._renderHelper()}
       `;

src/components/ha-tip.ts

@@ -1,24 +1,25 @@
 import { mdiLightbulbOutline } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import type { HomeAssistant } from "../types";
+import { customElement, state } from "lit/decorators";
+import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import type { LocalizeFunc } from "../common/translations/localize";
 
 import "./ha-svg-icon";
 
 @customElement("ha-tip")
 class HaTip extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @state()
+  @consumeLocalize()
+  private _localize!: LocalizeFunc;
 
   public render() {
-    if (!this.hass) {
+    if (!this._localize) {
       return nothing;
     }
 
     return html`
       <ha-svg-icon .path=${mdiLightbulbOutline}></ha-svg-icon>
-      <span class="prefix"
-        >${this.hass.localize("ui.panel.config.tips.tip")}</span
-      >
+      <span class="prefix">${this._localize("ui.panel.config.tips.tip")}</span>
       <span class="text"><slot></slot></span>
     `;
   }

src/components/ha-top-app-bar-fixed.ts

@@ -1,64 +1,230 @@
-import { TopAppBarFixedBase } from "@material/mwc-top-app-bar-fixed/mwc-top-app-bar-fixed-base";
-import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
-import { css } from "lit";
-import { customElement, property } from "lit/decorators";
+import type { CSSResultGroup, PropertyValues } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+
+const PASSIVE_EVENT_OPTIONS = { passive: true } as const;
+
+export const haTopAppBarFixedStyles = css`
+  :host {
+    display: block;
+  }
+
+  .top-app-bar {
+    box-sizing: border-box;
+    color: var(--app-header-text-color, #fff);
+    background-color: var(--app-header-background-color, var(--primary-color));
+    position: fixed;
+    top: 0;
+    inset-inline-end: 0;
+    width: var(--ha-top-app-bar-width, 100%);
+    z-index: 4;
+    padding-top: var(--safe-area-inset-top);
+    padding-right: var(--safe-area-inset-right);
+    transition:
+      width var(--ha-animation-duration-normal) ease,
+      padding-left var(--ha-animation-duration-normal) ease,
+      padding-right var(--ha-animation-duration-normal) ease;
+  }
+
+  :host([narrow]) .top-app-bar {
+    padding-left: var(--safe-area-inset-left);
+  }
+
+  .top-app-bar.scrolled:not(.pane-header) {
+    box-shadow: var(--ha-box-shadow-s);
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: var(--header-height);
+    border-bottom: var(--app-header-border-bottom);
+  }
+
+  .section {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-width: 0;
+    height: 100%;
+    padding: 0 var(--ha-space-3);
+  }
+
+  #navigation {
+    flex: 1 1 auto;
+  }
+
+  .section.center {
+    flex: 1 1 auto;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .section.end {
+    flex: none;
+    justify-content: flex-end;
+  }
+
+  .title {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--ha-font-size-xl);
+    font-weight: var(--ha-font-weight-normal);
+    line-height: var(--header-height);
+    padding-inline-start: var(--ha-space-6);
+  }
+
+  :host([narrow]) .title {
+    padding-inline-start: var(--ha-space-2);
+  }
+
+  .top-app-bar-fixed-adjust {
+    padding-top: calc(
+      var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
+    );
+    padding-bottom: var(--safe-area-inset-bottom);
+    padding-right: var(--safe-area-inset-right);
+  }
+
+  :host([narrow]) .top-app-bar-fixed-adjust {
+    padding-left: var(--safe-area-inset-left);
+  }
+`;
 
 @customElement("ha-top-app-bar-fixed")
-export class HaTopAppBarFixed extends TopAppBarFixedBase {
+export class HaTopAppBarFixed extends LitElement {
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  static override styles = [
-    styles,
-    css`
-      header {
-        padding-top: var(--safe-area-inset-top);
-      }
-      .mdc-top-app-bar__row {
-        height: var(--header-height);
-        border-bottom: var(--app-header-border-bottom);
-      }
-      .mdc-top-app-bar--fixed-adjust {
-        padding-top: calc(
-          var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
-        );
-        padding-bottom: var(--safe-area-inset-bottom);
-        padding-right: var(--safe-area-inset-right);
-      }
-      :host([narrow]) .mdc-top-app-bar--fixed-adjust {
-        padding-left: var(--safe-area-inset-left);
-      }
-      .mdc-top-app-bar {
-        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
-        color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
-        background-color: var(
-          --app-header-background-color,
-          var(--mdc-theme-primary)
-        );
-        padding-top: var(--safe-area-inset-top);
-        padding-right: var(--safe-area-inset-right);
-        transition:
-          width var(--ha-animation-duration-normal) ease,
-          padding-left var(--ha-animation-duration-normal) ease,
-          padding-right var(--ha-animation-duration-normal) ease;
-      }
-      :host([narrow]) .mdc-top-app-bar {
-        padding-left: var(--safe-area-inset-left);
-      }
-      @media (prefers-reduced-motion: reduce) {
-        .mdc-top-app-bar {
-          transition: 1ms;
-        }
-      }
-      .mdc-top-app-bar__title {
-        font-size: var(--ha-font-size-xl);
-        padding-inline-start: var(--ha-space-6);
-        padding-inline-end: initial;
-      }
-      :host([narrow]) .mdc-top-app-bar__title {
-        padding-inline-start: var(--ha-space-2);
-      }
-    `,
-  ];
+  @property({ attribute: "center-title", type: Boolean }) centerTitle = false;
+
+  @query(".top-app-bar") protected _barElement!: HTMLElement;
+
+  private _scrollTarget?: HTMLElement | Window;
+
+  @property({ attribute: false })
+  public get scrollTarget(): HTMLElement | Window {
+    return this._scrollTarget || window;
+  }
+
+  public set scrollTarget(value: HTMLElement | Window) {
+    const old = this.scrollTarget;
+    this._unregisterListeners();
+    this._scrollTarget = value;
+    this._updateBarPosition();
+    this.requestUpdate("scrollTarget", old);
+    if (this.isConnected) {
+      this._registerListeners();
+      this._syncScrollState();
+    }
+  }
+
+  protected _isPaneHeader(): boolean {
+    return false;
+  }
+
+  protected render() {
+    return html`${this._renderHeader()}${this._renderContent()}`;
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+
+    if (this.hasUpdated) {
+      this._updateBarPosition();
+      this._registerListeners();
+      this._syncScrollState();
+    }
+  }
+
+  protected _renderHeader() {
+    const title = html`<span class="title">
+      <slot name="title"></slot>
+    </span>`;
+    const paneHeader = this._isPaneHeader();
+
+    return html`
+      <header
+        class="top-app-bar ${classMap({
+          "pane-header": paneHeader,
+        })}"
+      >
+        <div class="row">
+          ${paneHeader
+            ? html`<section class="section" id="title">
+                <slot name="navigationIcon"></slot>
+                ${title}
+              </section>`
+            : nothing}
+          <section class="section" id="navigation">
+            ${paneHeader
+              ? nothing
+              : html`<slot name="navigationIcon"></slot> ${this.centerTitle
+                    ? nothing
+                    : title}`}
+          </section>
+          ${!paneHeader && this.centerTitle
+            ? html`<section class="section center">${title}</section>`
+            : nothing}
+          <section class="section end" id="actions" role="toolbar">
+            <slot name="actionItems"></slot>
+          </section>
+        </div>
+      </header>
+    `;
+  }
+
+  protected _renderContent() {
+    return html`<div class="top-app-bar-fixed-adjust">
+      <slot></slot>
+    </div>`;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues<this>) {
+    super.firstUpdated(changedProperties);
+    this._updateBarPosition();
+    this._registerListeners();
+    this._syncScrollState();
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this._unregisterListeners();
+  }
+
+  protected _updateBarPosition() {
+    if (this._barElement) {
+      this._barElement.style.position =
+        this.scrollTarget === window ? "" : "absolute";
+    }
+  }
+
+  protected _syncScrollState = () => {
+    const scrollTop =
+      this.scrollTarget instanceof Window
+        ? this.scrollTarget.pageYOffset
+        : this.scrollTarget.scrollTop;
+    this._barElement?.classList.toggle("scrolled", scrollTop > 0);
+  };
+
+  protected _registerListeners() {
+    this.scrollTarget.addEventListener(
+      "scroll",
+      this._syncScrollState,
+      PASSIVE_EVENT_OPTIONS
+    );
+  }
+
+  protected _unregisterListeners() {
+    this.scrollTarget.removeEventListener("scroll", this._syncScrollState);
+  }
+
+  static override styles: CSSResultGroup = haTopAppBarFixedStyles;
 }
 
 declare global {

src/components/ha-top-app-bar.ts

@@ -1,37 +0,0 @@
-import { TopAppBarBase } from "@material/mwc-top-app-bar/mwc-top-app-bar-base";
-import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-top-app-bar")
-export class HaTopAppBar extends TopAppBarBase {
-  static override styles = [
-    styles,
-    css`
-      .mdc-top-app-bar__row {
-        height: var(--header-height);
-        border-bottom: var(--app-header-border-bottom);
-      }
-      .mdc-top-app-bar--fixed-adjust {
-        padding-top: calc(var(--safe-area-inset-top) + var(--header-height));
-      }
-      .mdc-top-app-bar {
-        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
-        color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
-        background-color: var(
-          --app-header-background-color,
-          var(--mdc-theme-primary)
-        );
-        padding-top: var(--safe-area-inset-top);
-        padding-left: var(--safe-area-inset-left);
-        padding-right: var(--safe-area-inset-right);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-top-app-bar": HaTopAppBar;
-  }
-}

src/components/ha-two-pane-top-app-bar-fixed.ts

@@ -1,136 +1,37 @@
-import {
-  addHasRemoveClass,
-  BaseElement,
-} from "@material/mwc-base/base-element";
-import { supportsPassiveEventListener } from "@material/mwc-base/utils";
-import type { MDCTopAppBarAdapter } from "@material/top-app-bar/adapter";
-import { strings } from "@material/top-app-bar/constants";
-// eslint-disable-next-line import-x/no-named-as-default
-import MDCFixedTopAppBarFoundation from "@material/top-app-bar/fixed/foundation";
 import type { PropertyValues } from "lit";
 import { html, css, nothing } from "lit";
 import { property, query, customElement } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
 import { haStyleScrollbar } from "../resources/styles";
+import {
+  HaTopAppBarFixed,
+  haTopAppBarFixedStyles,
+} from "./ha-top-app-bar-fixed";
 
-export const passiveEventOptionsIfSupported = supportsPassiveEventListener
-  ? { passive: true }
-  : undefined;
+const PASSIVE_EVENT_OPTIONS = { passive: true } as const;
 
 @customElement("ha-two-pane-top-app-bar-fixed")
-export class TopAppBarBaseBase extends BaseElement {
-  protected override mdcFoundation!: MDCFixedTopAppBarFoundation;
-
-  protected override mdcFoundationClass = MDCFixedTopAppBarFoundation;
-
-  @query(".mdc-top-app-bar") protected mdcRoot!: HTMLElement;
-
-  // _actionItemsSlot should have type HTMLSlotElement, but when TypeScript's
-  // emitDecoratorMetadata is enabled, the HTMLSlotElement constructor will
-  // be emitted into the runtime, which will cause an "HTMLSlotElement is
-  // undefined" error in browsers that don't define it (e.g. IE11).
-  @query('slot[name="actionItems"]') protected _actionItemsSlot!: HTMLElement;
-
-  protected _scrollTarget!: HTMLElement | Window;
-
-  @property({ type: Boolean, reflect: true }) public narrow = false;
-
-  @property({ attribute: "center-title", type: Boolean }) centerTitle = false;
-
-  @property({ type: Boolean, reflect: true }) prominent = false;
-
-  @property({ type: Boolean, reflect: true }) dense = false;
-
+export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
   @property({ type: Boolean }) pane = false;
 
   @property({ type: Boolean }) footer = false;
 
-  @query(".content") private _contentElement!: HTMLElement;
+  @query(".content") private _contentElement?: HTMLElement;
 
   @query(".pane .ha-scrollbar") private _paneElement?: HTMLElement;
 
-  @property({ attribute: false })
-  get scrollTarget() {
-    return this._scrollTarget || window;
+  protected override _isPaneHeader(): boolean {
+    return this.pane;
   }
 
-  set scrollTarget(value) {
-    this.unregisterListeners();
-    const old = this.scrollTarget;
-    this._scrollTarget = value;
-    this.updateRootPosition();
-    this.requestUpdate("scrollTarget", old);
-    this.registerListeners();
-  }
-
-  protected updateRootPosition() {
-    if (this.mdcRoot) {
-      const windowScroller = this.scrollTarget === window;
-      // we add support for top-app-bar's tied to an element scroller.
-      this.mdcRoot.style.position = windowScroller ? "" : "absolute";
-    }
-  }
-
-  protected barClasses() {
-    return {
-      "mdc-top-app-bar--dense": this.dense,
-      "mdc-top-app-bar--prominent": this.prominent,
-      "center-title": this.centerTitle,
-      "mdc-top-app-bar--fixed": true,
-      "mdc-top-app-bar--pane": this.pane,
-    };
-  }
-
-  protected contentClasses() {
-    return {
-      "mdc-top-app-bar--fixed-adjust": !this.dense && !this.prominent,
-      "mdc-top-app-bar--dense-fixed-adjust": this.dense && !this.prominent,
-      "mdc-top-app-bar--prominent-fixed-adjust": !this.dense && this.prominent,
-      "mdc-top-app-bar--dense-prominent-fixed-adjust":
-        this.dense && this.prominent,
-      "mdc-top-app-bar--pane": this.pane,
-    };
-  }
-
-  protected override render() {
-    const title = html`<span class="mdc-top-app-bar__title"
-      ><slot name="title"></slot
-    ></span>`;
+  protected override _renderContent() {
     return html`
-      <header class="mdc-top-app-bar ${classMap(this.barClasses())}">
-        <div class="mdc-top-app-bar__row">
-          ${this.pane
-            ? html`<section
-                class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start"
-                id="title"
-              >
-                <slot
-                  name="navigationIcon"
-                  @click=${this.handleNavigationClick}
-                ></slot>
-                ${title}
-              </section>`
-            : nothing}
-          <section class="mdc-top-app-bar__section" id="navigation">
-            ${this.pane
-              ? nothing
-              : html`<slot
-                    name="navigationIcon"
-                    @click=${this.handleNavigationClick}
-                  ></slot
-                  >${title}`}
-          </section>
-          <section
-            class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end"
-            id="actions"
-            role="toolbar"
-          >
-            <slot name="actionItems"></slot>
-          </section>
-        </div>
-      </header>
-      <div class=${classMap(this.contentClasses())}>
+      <div
+        class=${classMap({
+          "top-app-bar-fixed-adjust": true,
+          "top-app-bar-fixed-adjust--pane": this.pane,
+        })}
+      >
         ${this.pane
           ? html`<div class="pane">
               <div class="shadow-container"></div>
@@ -154,117 +55,57 @@ export class TopAppBarBaseBase extends BaseElement {
     `;
   }
 
-  protected updated(changedProperties: PropertyValues<this>) {
+  protected override willUpdate(changedProperties: PropertyValues<this>) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("pane") && this.hasUpdated) {
+      this._unregisterListeners();
+    }
+  }
+
+  protected override updated(changedProperties: PropertyValues<this>) {
     super.updated(changedProperties);
     if (
       changedProperties.has("pane") &&
       changedProperties.get("pane") !== undefined
     ) {
-      this.unregisterListeners();
-      this.registerListeners();
+      this._registerListeners();
+      this._syncScrollState();
     }
   }
 
-  protected createAdapter(): MDCTopAppBarAdapter {
-    return {
-      ...addHasRemoveClass(this.mdcRoot),
-      setStyle: (prprty: string, value: string) =>
-        this.mdcRoot.style.setProperty(prprty, value),
-      getTopAppBarHeight: () => this.mdcRoot.clientHeight,
-      notifyNavigationIconClicked: () => {
-        this.dispatchEvent(
-          new Event(strings.NAVIGATION_EVENT, {
-            bubbles: true,
-            cancelable: true,
-          })
-        );
-      },
-      getViewportScrollY: () =>
-        this.scrollTarget instanceof Window
-          ? this.scrollTarget.pageYOffset
-          : this.scrollTarget.scrollTop,
-      getTotalActionItems: () =>
-        (this._actionItemsSlot as HTMLSlotElement).assignedNodes({
-          flatten: true,
-        }).length,
-    };
-  }
-
-  protected handleTargetScroll = () => {
-    this.mdcFoundation.handleTargetScroll();
+  private _handlePaneScroll = (ev: Event) => {
+    const target = ev.currentTarget as HTMLElement;
+    target.parentElement?.classList.toggle("scrolled", target.scrollTop > 0);
   };
 
-  protected handlePaneScroll = (ev) => {
-    if (ev.target.scrollTop > 0) {
-      ev.target.parentElement.classList.add("scrolled");
-    } else {
-      ev.target.parentElement.classList.remove("scrolled");
-    }
-  };
-
-  protected handleNavigationClick = () => {
-    this.mdcFoundation.handleNavigationClick();
-  };
-
-  protected registerListeners() {
+  protected override _registerListeners() {
     if (this.pane) {
-      this._paneElement!.addEventListener(
+      this._paneElement?.addEventListener(
         "scroll",
-        this.handlePaneScroll,
-        passiveEventOptionsIfSupported
+        this._handlePaneScroll,
+        PASSIVE_EVENT_OPTIONS
       );
-      this._contentElement.addEventListener(
+      this._contentElement?.addEventListener(
         "scroll",
-        this.handlePaneScroll,
-        passiveEventOptionsIfSupported
+        this._handlePaneScroll,
+        PASSIVE_EVENT_OPTIONS
       );
       return;
     }
-    this.scrollTarget.addEventListener(
-      "scroll",
-      this.handleTargetScroll,
-      passiveEventOptionsIfSupported
-    );
+
+    super._registerListeners();
   }
 
-  protected unregisterListeners() {
-    this._paneElement?.removeEventListener("scroll", this.handlePaneScroll);
-    this._contentElement.removeEventListener("scroll", this.handlePaneScroll);
-    this.scrollTarget.removeEventListener("scroll", this.handleTargetScroll);
-  }
-
-  protected override firstUpdated() {
-    super.firstUpdated();
-    this.updateRootPosition();
-    this.registerListeners();
-  }
-
-  override disconnectedCallback() {
-    super.disconnectedCallback();
-    this.unregisterListeners();
+  protected override _unregisterListeners() {
+    this._paneElement?.removeEventListener("scroll", this._handlePaneScroll);
+    this._contentElement?.removeEventListener("scroll", this._handlePaneScroll);
+    super._unregisterListeners();
   }
 
   static override styles = [
-    styles,
+    haTopAppBarFixedStyles,
     haStyleScrollbar,
     css`
-      header {
-        padding-top: var(--safe-area-inset-top);
-      }
-      .mdc-top-app-bar__row {
-        height: var(--header-height);
-        border-bottom: var(--app-header-border-bottom);
-      }
-      .mdc-top-app-bar--fixed-adjust {
-        padding-top: calc(
-          var(--header-height, 0px) + var(--safe-area-inset-top, 0px)
-        );
-        padding-bottom: var(--safe-area-inset-bottom);
-        padding-right: var(--safe-area-inset-right);
-      }
-      :host([narrow]) .mdc-top-app-bar--fixed-adjust {
-        padding-left: var(--safe-area-inset-left);
-      }
       .shadow-container {
         position: absolute;
         top: calc(-1 * var(--header-height));
@@ -273,39 +114,11 @@ export class TopAppBarBaseBase extends BaseElement {
         z-index: 1;
         transition: box-shadow 200ms linear;
       }
+
       .scrolled .shadow-container {
-        box-shadow: var(
-          --mdc-top-app-bar-fixed-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)
-        );
-      }
-      .mdc-top-app-bar {
-        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
-        color: var(--app-header-text-color, var(--mdc-theme-on-primary, #fff));
-        background-color: var(
-          --app-header-background-color,
-          var(--mdc-theme-primary)
-        );
-        padding-top: var(--safe-area-inset-top);
-        padding-right: var(--safe-area-inset-right);
-        transition:
-          width var(--ha-animation-duration-normal) ease,
-          padding-left var(--ha-animation-duration-normal) ease,
-          padding-right var(--ha-animation-duration-normal) ease;
-      }
-      :host([narrow]) .mdc-top-app-bar {
-        padding-left: var(--safe-area-inset-left);
-      }
-      @media (prefers-reduced-motion: reduce) {
-        .mdc-top-app-bar {
-          transition: 1ms;
-        }
-      }
-      .mdc-top-app-bar--pane.mdc-top-app-bar--fixed-scrolled {
-        box-shadow: none;
+        box-shadow: var(--ha-box-shadow-m);
       }
+
       #title {
         border-right: 1px solid rgba(255, 255, 255, 0.12);
         border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
@@ -314,7 +127,8 @@ export class TopAppBarBaseBase extends BaseElement {
         flex: 0 0 var(--sidepane-width, 250px);
         width: var(--sidepane-width, 250px);
       }
-      div.mdc-top-app-bar--pane {
+
+      .top-app-bar-fixed-adjust--pane {
         display: flex;
         height: calc(
           100vh - var(--header-height, 0px) - var(
@@ -323,6 +137,7 @@ export class TopAppBarBaseBase extends BaseElement {
             ) - var(--safe-area-inset-bottom, 0px)
         );
       }
+
       .pane {
         border-right: 1px solid var(--divider-color);
         border-inline-end: 1px solid var(--divider-color);
@@ -334,36 +149,36 @@ export class TopAppBarBaseBase extends BaseElement {
         flex-direction: column;
         position: relative;
       }
+
       .pane .ha-scrollbar {
         flex: 1;
       }
+
       .pane .footer {
         border-top: 1px solid var(--divider-color);
         padding-bottom: 8px;
       }
+
       .main {
         min-height: 100%;
       }
-      .mdc-top-app-bar--pane .main {
+
+      .top-app-bar-fixed-adjust--pane .main {
         position: relative;
         flex: 1;
         height: 100%;
       }
-      .mdc-top-app-bar--pane .content {
+
+      .top-app-bar-fixed-adjust--pane .content {
         height: 100%;
         overflow: auto;
       }
-      .mdc-top-app-bar__title {
-        font-size: var(--ha-font-size-xl);
-        padding-inline-start: 24px;
-        padding-inline-end: initial;
-      }
     `,
   ];
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-two-pane-top-app-bar-fixed": TopAppBarBaseBase;
+    "ha-two-pane-top-app-bar-fixed": HaTwoPaneTopAppBarFixed;
   }
 }

src/components/input/wa-input-mixin.ts

@@ -1,8 +1,8 @@
 import { type LitElement, css } from "lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import type { Constructor } from "../../types";
 import { nativeElementInternalsSupported } from "../../common/feature-detect/support-native-element-internals";
+import type { Constructor } from "../../types";
 
 /**
  * Minimal interface for the inner wa-input / wa-textarea element.
@@ -339,7 +339,7 @@ export const waInputStyles = css`
     min-height: var(--ha-space-5);
     margin-block-start: 0;
     margin-inline-start: var(--ha-space-3);
-    font-size: var(--ha-font-size-xs);
+    font-size: var(--ha-font-size-s);
     display: flex;
     align-items: center;
     color: var(--ha-color-text-secondary);

src/components/media-player/dialog-media-manage.ts

@@ -227,7 +227,7 @@ class DialogMediaManage extends LitElement {
                 </ha-list>
               `}
         ${isComponentLoaded(this.hass.config, "hassio")
-          ? html`<ha-tip .hass=${this.hass}>
+          ? html`<ha-tip>
               ${this.hass.localize(
                 "ui.components.media-browser.file_management.tip_media_storage",
                 {

src/components/media-player/ha-media-browser-thumbnail.ts

@@ -0,0 +1,147 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import type { HomeAssistant } from "../../types";
+import {
+  brandsUrl,
+  extractDomainFromBrandUrl,
+  isBrandUrl,
+} from "../../util/brands-url";
+
+const SMALL_THUMBNAIL_THRESHOLD = 16;
+
+const isSvgUrl = (url: string): boolean =>
+  /\.svg(\?|#|$)/i.test(url) || url.startsWith("data:image/svg+xml");
+
+const resolveThumbnailURL = (
+  hass: HomeAssistant,
+  thumbnailUrl: string
+): Promise<string> => {
+  if (isBrandUrl(thumbnailUrl)) {
+    return Promise.resolve(
+      brandsUrl(
+        {
+          domain: extractDomainFromBrandUrl(thumbnailUrl),
+          type: "icon",
+          darkOptimized: hass.themes?.darkMode,
+        },
+        hass.auth.data.hassUrl
+      )
+    );
+  }
+  if (thumbnailUrl.startsWith("/")) {
+    // Local thumbnails require authentication; fetch and inline as base64.
+    return hass
+      .fetchWithAuth(thumbnailUrl)
+      .then((response) => response.blob())
+      .then(
+        (blob) =>
+          new Promise<string>((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () =>
+              resolve(typeof reader.result === "string" ? reader.result : "");
+            reader.onerror = (e) => reject(e);
+            reader.readAsDataURL(blob);
+          })
+      );
+  }
+  return Promise.resolve(thumbnailUrl);
+};
+
+@customElement("ha-media-browser-thumbnail")
+export class HaMediaBrowserThumbnail extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public url?: string;
+
+  @state() private _resolvedUrl?: string;
+
+  @state() private _small = false;
+
+  @state() private _brand = false;
+
+  protected willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
+    if (changedProps.has("url")) {
+      this._resolve();
+    }
+  }
+
+  private async _resolve(): Promise<void> {
+    this._small = false;
+    this._brand = !!this.url && isBrandUrl(this.url);
+    if (!this.url) {
+      this._resolvedUrl = undefined;
+      return;
+    }
+    const requested = this.url;
+    try {
+      const resolved = await resolveThumbnailURL(this.hass, requested);
+      if (requested !== this.url) return;
+      this._resolvedUrl = resolved;
+      this._probeSize(resolved);
+    } catch (_err) {
+      if (requested === this.url) this._resolvedUrl = undefined;
+    }
+  }
+
+  private _probeSize(url: string): void {
+    // SVGs (including brand icons) scale natively; pixelated rendering would
+    // break vector output.
+    if (this.url && isBrandUrl(this.url)) return;
+    if (isSvgUrl(url)) return;
+    const img = new Image();
+    img.addEventListener("load", () => {
+      if (this._resolvedUrl !== url) return;
+      if (
+        img.naturalWidth > 0 &&
+        img.naturalWidth <= SMALL_THUMBNAIL_THRESHOLD
+      ) {
+        this._small = true;
+      }
+    });
+    img.src = url;
+  }
+
+  protected render(): TemplateResult | typeof nothing {
+    if (!this._resolvedUrl) return nothing;
+    return html`
+      <div
+        class=${classMap({
+          image: true,
+          small: this._small,
+          brand: this._brand,
+        })}
+        style="background-image: url(${this._resolvedUrl})"
+      ></div>
+    `;
+  }
+
+  static readonly styles: CSSResultGroup = css`
+    :host {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+    .image {
+      width: 100%;
+      height: 100%;
+      background-size: var(--ha-media-browser-thumbnail-fit, contain);
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    .image.brand {
+      background-size: 40%;
+    }
+    .image.small {
+      image-rendering: pixelated;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-media-browser-thumbnail": HaMediaBrowserThumbnail;
+  }
+}

src/components/media-player/ha-media-player-browse.ts

@@ -13,7 +13,6 @@ import {
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
-import { until } from "lit/directives/until";
 import { fireEvent } from "../../common/dom/fire_event";
 import { slugify } from "../../common/string/slugify";
 import { debounce } from "../../common/util/debounce";
@@ -39,11 +38,6 @@ import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { haStyle, haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
-import {
-  brandsUrl,
-  extractDomainFromBrandUrl,
-  isBrandUrl,
-} from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import "../entity/ha-entity-picker";
 import "../ha-alert";
@@ -52,6 +46,7 @@ import "../ha-card";
 import "../ha-icon-button";
 import "../ha-list";
 import "../ha-list-item";
+import "./ha-media-browser-thumbnail";
 import "../ha-spinner";
 import "../ha-svg-icon";
 import "../ha-tooltip";
@@ -411,12 +406,6 @@ export class HaMediaPlayerBrowse extends LitElement {
       ? MediaClassBrowserSettings[currentItem.children_media_class]
       : MediaClassBrowserSettings.directory;
 
-    const backgroundImage = currentItem.thumbnail
-      ? this._getThumbnailURLorBase64(currentItem.thumbnail).then(
-          (value) => `url(${value})`
-        )
-      : "none";
-
     return html`
               ${
                 currentItem.can_play
@@ -431,13 +420,11 @@ export class HaMediaPlayerBrowse extends LitElement {
                         <div class="header-content">
                           ${currentItem.thumbnail
                             ? html`
-                                <div
-                                  class="img"
-                                  style="background-image: ${until(
-                                    backgroundImage,
-                                    ""
-                                  )}"
-                                >
+                                <div class="img">
+                                  <ha-media-browser-thumbnail
+                                    .hass=${this.hass}
+                                    .url=${currentItem.thumbnail}
+                                  ></ha-media-browser-thumbnail>
                                   ${this.narrow &&
                                   currentItem?.can_play &&
                                   (!this.accept ||
@@ -638,12 +625,6 @@ export class HaMediaPlayerBrowse extends LitElement {
   }
 
   private _renderGridItem = (child: MediaPlayerItem): TemplateResult => {
-    const backgroundImage = child.thumbnail
-      ? this._getThumbnailURLorBase64(child.thumbnail).then(
-          (value) => `url(${value})`
-        )
-      : "none";
-
     return html`
       <div class="child" .item=${child} @click=${this._childClicked}>
         <ha-card outlined>
@@ -655,10 +636,13 @@ export class HaMediaPlayerBrowse extends LitElement {
                       "centered-image": ["app", "directory"].includes(
                         child.media_class
                       ),
-                      "brand-image": isBrandUrl(child.thumbnail),
                     })} image"
-                    style="background-image: ${until(backgroundImage, "")}"
-                  ></div>
+                  >
+                    <ha-media-browser-thumbnail
+                      .hass=${this.hass}
+                      .url=${child.thumbnail}
+                    ></ha-media-browser-thumbnail>
+                  </div>
                 `
               : html`
                   <div class="icon-holder image">
@@ -703,13 +687,7 @@ export class HaMediaPlayerBrowse extends LitElement {
   private _renderListItem = (child: MediaPlayerItem): TemplateResult => {
     const currentItem = this._currentItem;
     const mediaClass = MediaClassBrowserSettings[currentItem!.media_class];
-
-    const backgroundImage =
-      mediaClass.show_list_images && child.thumbnail
-        ? this._getThumbnailURLorBase64(child.thumbnail).then(
-            (value) => `url(${value})`
-          )
-        : "none";
+    const showImage = mediaClass.show_list_images && !!child.thumbnail;
 
     return html`
       <ha-list-item
@@ -717,7 +695,7 @@ export class HaMediaPlayerBrowse extends LitElement {
         .item=${child}
         .graphic=${mediaClass.show_list_images ? "medium" : "avatar"}
       >
-        ${backgroundImage === "none" && !child.can_play
+        ${!showImage && !child.can_play
           ? html`<ha-svg-icon
               .path=${MediaClassBrowserSettings[
                 child.media_class === "directory"
@@ -731,9 +709,14 @@ export class HaMediaPlayerBrowse extends LitElement {
                 graphic: true,
                 thumbnail: mediaClass.show_list_images === true,
               })}
-              style="background-image: ${until(backgroundImage, "")}"
               slot="graphic"
             >
+              ${showImage
+                ? html`<ha-media-browser-thumbnail
+                    .hass=${this.hass}
+                    .url=${child.thumbnail}
+                  ></ha-media-browser-thumbnail>`
+                : nothing}
               ${child.can_play
                 ? html`<ha-icon-button
                     class="play ${classMap({
@@ -753,51 +736,6 @@ export class HaMediaPlayerBrowse extends LitElement {
     `;
   };
 
-  private async _getThumbnailURLorBase64(
-    thumbnailUrl: string | undefined
-  ): Promise<string> {
-    if (!thumbnailUrl) {
-      return "";
-    }
-
-    if (isBrandUrl(thumbnailUrl)) {
-      // The backend is not aware of the theme used by the users,
-      // so we rewrite the URL to show a proper icon
-      return brandsUrl(
-        {
-          domain: extractDomainFromBrandUrl(thumbnailUrl),
-          type: "icon",
-          darkOptimized: this.hass.themes?.darkMode,
-        },
-        this.hass.auth.data.hassUrl
-      );
-    }
-
-    if (thumbnailUrl.startsWith("/")) {
-      // Thumbnails served by local API require authentication
-      return new Promise((resolve, reject) => {
-        this.hass
-          .fetchWithAuth(thumbnailUrl!)
-          // Since we are fetching with an authorization header, we cannot just put the
-          // URL directly into the document; we need to embed the image. We could do this
-          // using blob URLs, but then we would need to keep track of them in order to
-          // release them properly. Instead, we embed the thumbnail using base64.
-          .then((response) => response.blob())
-          .then((blob) => {
-            const reader = new FileReader();
-            reader.onload = () => {
-              const result = reader.result;
-              resolve(typeof result === "string" ? result : "");
-            };
-            reader.onerror = (e) => reject(e);
-            reader.readAsDataURL(blob);
-          });
-      });
-    }
-
-    return thumbnailUrl;
-  }
-
   private _actionClicked = (ev: MouseEvent): void => {
     ev.stopPropagation();
     const item = (ev.currentTarget as any).item;
@@ -1048,14 +986,20 @@ export class HaMediaPlayerBrowse extends LitElement {
           align-items: flex-start;
         }
         .header-content .img {
+          position: relative;
           height: 175px;
           width: 175px;
           margin-right: 16px;
-          background-size: cover;
           border-radius: 2px;
+          overflow: hidden;
           transition:
             width 0.4s,
             height 0.4s;
+          --ha-media-browser-thumbnail-fit: cover;
+        }
+        .header-content .img ha-media-browser-thumbnail {
+          position: absolute;
+          inset: 0;
         }
         .header-info {
           display: flex;
@@ -1191,18 +1135,12 @@ export class HaMediaPlayerBrowse extends LitElement {
           right: 0;
           left: 0;
           bottom: 0;
-          background-size: cover;
-          background-repeat: no-repeat;
-          background-position: center;
+          --ha-media-browser-thumbnail-fit: cover;
         }
 
         .centered-image {
           margin: 0 8px;
-          background-size: contain;
-        }
-
-        .brand-image {
-          background-size: 40%;
+          --ha-media-browser-thumbnail-fit: contain;
         }
 
         .children ha-card .icon-holder {
@@ -1278,17 +1216,21 @@ export class HaMediaPlayerBrowse extends LitElement {
         }
 
         ha-list-item .graphic {
-          background-size: contain;
-          background-repeat: no-repeat;
-          background-position: center;
+          position: relative;
           border-radius: var(--ha-border-radius-sm);
-          display: flex;
-          align-content: center;
-          align-items: center;
+          overflow: hidden;
           line-height: initial;
         }
 
+        ha-list-item .graphic ha-media-browser-thumbnail {
+          position: absolute;
+          inset: 0;
+        }
+
         ha-list-item .graphic .play {
+          position: absolute;
+          inset: 0;
+          margin: auto;
           opacity: 0;
           transition: all 0.5s;
           background-color: rgba(var(--rgb-card-background-color), 0.5);

src/components/radio/ha-radio-option.ts

@@ -99,6 +99,8 @@ export class HaRadioOption extends Radio {
             --ha-radio-option-checked-background-color,
             var(--ha-color-fill-primary-normal-resting)
           );
+          color: var(--ha-color-fill-primary-loud-resting);
+          border-color: var(--ha-color-fill-primary-loud-resting);
         }
 
         [part~="label"] {

src/data/automation.ts

@@ -1,4 +1,3 @@
-import { createContext } from "@lit/context";
 import type {
   Connection,
   HassEntityAttributeBase,
@@ -96,7 +95,7 @@ export interface TriggerList {
 
 export interface BaseTrigger {
   alias?: string;
-  comment?: string;
+  note?: string;
   /** @deprecated Use `trigger` instead */
   platform?: string;
   trigger: string;
@@ -242,7 +241,7 @@ export type Trigger = LegacyTrigger | TriggerList | PlatformTrigger;
 interface BaseCondition {
   condition: string;
   alias?: string;
-  comment?: string;
+  note?: string;
   enabled?: boolean;
   options?: Record<string, unknown>;
 }
@@ -491,12 +490,12 @@ export const migrateAutomationTrigger = (
 
 export const flattenTriggers = (
   triggers: undefined | Trigger | Trigger[]
-): Exclude<Trigger, TriggerList>[] => {
+): Trigger[] => {
   if (!triggers) {
     return [];
   }
 
-  const flatTriggers: Exclude<Trigger, TriggerList>[] = [];
+  const flatTriggers: Trigger[] = [];
 
   ensureArray(triggers).forEach((t) => {
     if ("triggers" in t) {
@@ -610,7 +609,7 @@ export interface AutomationClipboard {
 export interface BaseSidebarConfig {
   delete: () => void;
   close: (focus?: boolean) => void;
-  editComment: () => void;
+  editNote: () => void;
 }
 
 export interface TriggerSidebarConfig extends BaseSidebarConfig {
@@ -672,7 +671,7 @@ export interface OptionSidebarConfig extends BaseSidebarConfig {
   rename: () => void;
   duplicate: () => void;
   defaultOption?: boolean;
-  comment?: string;
+  note?: string;
 }
 
 export interface ScriptFieldSidebarConfig extends BaseSidebarConfig {
@@ -698,7 +697,3 @@ export interface ShowAutomationEditorParams {
   data?: Partial<AutomationConfig>;
   expanded?: boolean;
 }
-
-export const automationConfigContext = createContext<
-  AutomationConfig | undefined
->("automationConfig");

src/data/automation_i18n.ts

@@ -27,7 +27,6 @@ import type {
   LegacyTrigger,
   Trigger,
 } from "./automation";
-import { flattenTriggers } from "./automation";
 import { getConditionDomain, getConditionObjectId } from "./condition";
 import type {
   DeviceCondition,
@@ -108,41 +107,6 @@ const formatNumericLimitValue = (
     : value;
 };
 
-export interface TriggerInfo {
-  id: string;
-  label: string;
-  triggerType: string;
-  count: number;
-}
-
-export const getTriggerInfos = (
-  triggers: Trigger[] | undefined,
-  hass: HomeAssistant,
-  entityRegistry: EntityRegistryEntry[]
-): TriggerInfo[] => {
-  if (!triggers) {
-    return [];
-  }
-  const map = new Map<string, TriggerInfo>();
-  for (const t of flattenTriggers(triggers)) {
-    if (isTriggerList(t) || !t.id) {
-      continue;
-    }
-    const existing = map.get(t.id);
-    if (existing) {
-      existing.count++;
-    } else {
-      map.set(t.id, {
-        id: t.id,
-        label: describeTrigger(t, hass, entityRegistry),
-        triggerType: t.trigger,
-        count: 1,
-      });
-    }
-  }
-  return Array.from(map.values());
-};
-
 export const describeTrigger = (
   trigger: Trigger,
   hass: HomeAssistant,

src/data/config_flow.ts

@@ -40,7 +40,6 @@ export const createConfigFlow = (
     "config/config_entries/flow",
     {
       handler,
-      show_advanced_options: Boolean(hass.userData?.showAdvanced),
       entry_id,
     },
     HEADERS

src/data/device/device_automation.ts

@@ -13,7 +13,7 @@ import {
 
 export interface DeviceAutomation {
   alias?: string;
-  comment?: string;
+  note?: string;
   device_id: string;
   domain: string;
   entity_id?: string;

src/data/entity/entity_registry.ts

@@ -161,6 +161,10 @@ export interface VacuumEntityOptions {
   last_seen_segments?: Segment[];
 }
 
+export interface DeviceTrackerEntityOptions {
+  associated_zone?: string | null;
+}
+
 export interface EntityRegistryOptions {
   number?: NumberEntityOptions;
   sensor?: SensorEntityOptions;
@@ -172,6 +176,7 @@ export interface EntityRegistryOptions {
   cover?: CoverEntityOptions;
   valve?: ValveEntityOptions;
   vacuum?: VacuumEntityOptions;
+  device_tracker?: DeviceTrackerEntityOptions;
   switch_as_x?: SwitchAsXEntityOptions;
   conversation?: Record<string, unknown>;
   "cloud.alexa"?: Record<string, unknown>;
@@ -197,7 +202,8 @@ export interface EntityRegistryEntryUpdateParams {
     | LightEntityOptions
     | CoverEntityOptions
     | ValveEntityOptions
-    | VacuumEntityOptions;
+    | VacuumEntityOptions
+    | DeviceTrackerEntityOptions;
   aliases?: (string | null)[];
   labels?: string[];
   categories?: Record<string, string | null>;

src/data/frontend.ts

@@ -2,7 +2,6 @@ import type { Connection } from "home-assistant-js-websocket";
 import type { ShortcutItem } from "./home_shortcuts";
 
 export interface CoreFrontendUserData {
-  showAdvanced?: boolean;
   showEntityIdPicker?: boolean;
   default_panel?: string;
   apps_info_dismissed?: boolean;

src/data/lovelace_custom_cards.ts

@@ -1,6 +1,14 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { HomeAssistant } from "../types";
 import type { LovelaceCardFeatureContext } from "../panels/lovelace/card-features/types";
+import type { LovelaceCardConfig } from "./lovelace/config/card";
+
+export interface CustomCardSuggestion<
+  T extends LovelaceCardConfig = LovelaceCardConfig,
+> {
+  label?: string;
+  config: T;
+}
 
 export interface CustomCardEntry {
   type: string;
@@ -8,6 +16,10 @@ export interface CustomCardEntry {
   description?: string;
   preview?: boolean;
   documentationURL?: string;
+  getEntitySuggestion?: (
+    hass: HomeAssistant,
+    entityId: string
+  ) => CustomCardSuggestion | CustomCardSuggestion[] | null;
 }
 
 export interface CustomBadgeEntry {

src/data/matter.ts

@@ -2,7 +2,10 @@ import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { navigate } from "../common/navigate";
 import type { HomeAssistant } from "../types";
-import { subscribeDeviceRegistry } from "./device/device_registry";
+import {
+  subscribeDeviceRegistry,
+  type DeviceRegistryEntry,
+} from "./device/device_registry";
 import { getThreadDataSetTLV, listThreadDataSets } from "./thread";
 
 export enum NetworkType {
@@ -77,9 +80,9 @@ export const startExternalCommissioning = async (hass: HomeAssistant) => {
   });
 };
 
-export const redirectOnNewMatterDevice = (
+export const watchForNewMatterDevice = (
   hass: HomeAssistant,
-  callback?: () => void
+  callback: (device: DeviceRegistryEntry) => void
 ): UnsubscribeFunc => {
   let curMatterDevices: Set<string> | undefined;
   const unsubDeviceReg = subscribeDeviceRegistry(hass.connection, (entries) => {
@@ -101,8 +104,7 @@ export const redirectOnNewMatterDevice = (
     if (newMatterDevices.length) {
       unsubDeviceReg();
       curMatterDevices = undefined;
-      callback?.();
-      navigate(`/config/devices/device/${newMatterDevices[0].id}`);
+      callback(newMatterDevices[0]);
     }
   });
   return () => {
@@ -111,6 +113,15 @@ export const redirectOnNewMatterDevice = (
   };
 };
 
+export const redirectOnNewMatterDevice = (
+  hass: HomeAssistant,
+  callback?: () => void
+): UnsubscribeFunc =>
+  watchForNewMatterDevice(hass, (device) => {
+    callback?.();
+    navigate(`/config/devices/device/${device.id}`);
+  });
+
 export const addMatterDevice = (hass: HomeAssistant) => {
   startExternalCommissioning(hass);
 };

src/data/options_flow.ts

@@ -7,7 +7,6 @@ export const createOptionsFlow = (hass: HomeAssistant, handler: string) =>
     "config/config_entries/options/flow",
     {
       handler,
-      show_advanced_options: Boolean(hass.userData?.showAdvanced),
     }
   );
 

src/data/script.ts

@@ -36,7 +36,7 @@ export const isMaxMode = arrayLiteralIncludes(MODES_MAX);
 
 export const baseActionStruct = object({
   alias: optional(string()),
-  comment: optional(string()),
+  note: optional(string()),
   continue_on_error: optional(boolean()),
   enabled: optional(boolean()),
 });
@@ -106,7 +106,7 @@ export interface Field {
 
 interface BaseAction {
   alias?: string;
-  comment?: string;
+  note?: string;
   continue_on_error?: boolean;
   enabled?: boolean;
 }
@@ -197,7 +197,7 @@ export interface ForEachRepeat extends BaseRepeat {
 
 export interface Option {
   alias?: string;
-  comment?: string;
+  note?: string;
   conditions: string | Condition[];
   sequence: Action | Action[];
 }

src/data/selector.ts

@@ -125,7 +125,7 @@ export interface BooleanSelector {
   boolean: {} | null;
 }
 
-export type AutomationBehaviorTriggerMode = "first" | "last" | "any";
+export type AutomationBehaviorTriggerMode = "first" | "all" | "each";
 
 export type AutomationBehaviorConditionMode = "all" | "any";
 

src/data/sub_config_flow.ts

@@ -16,7 +16,6 @@ export const createSubConfigFlow = (
     "config/config_entries/subentries/flow",
     {
       handler: [configEntryId, subFlowType],
-      show_advanced_options: Boolean(hass.userData?.showAdvanced),
       subentry_id,
     },
     HEADERS

src/data/trigger.ts

@@ -8,7 +8,6 @@ import type {
   Trigger,
   TriggerList,
 } from "./automation";
-import { flattenTriggers } from "./automation";
 import type { Selector, TargetSelector } from "./selector";
 
 export const TRIGGER_COLLECTIONS: AutomationElementGroupCollection[] = [
@@ -57,49 +56,6 @@ export const TRIGGER_COLLECTIONS: AutomationElementGroupCollection[] = [
 export const isTriggerList = (trigger: Trigger): trigger is TriggerList =>
   "triggers" in trigger;
 
-export const getTriggerIds = (triggers: Trigger[]): string[] =>
-  flattenTriggers(triggers)
-    .map((trigger) => trigger.id)
-    .filter((id): id is string => !!id);
-
-export const getNextNumericTriggerId = (triggers: Trigger[]): string => {
-  let max = 0;
-  for (const id of getTriggerIds(triggers)) {
-    const num = Number(id);
-    if (Number.isInteger(num) && num > max) {
-      max = num;
-    }
-  }
-  return String(max + 1);
-};
-
-const computeUniqueId = (id: string, existing: Set<string>): string => {
-  if (!existing.has(id)) {
-    return id;
-  }
-
-  // Split into a base and a trailing integer suffix so we can bump the
-  // suffix on collision (e.g. "foo2" -> "foo3"); if there's no trailing
-  // digit we start at 2 ("foo" -> "foo2").
-  const match = id.match(/^(.*?)(\d+)$/);
-  let base: string;
-  let num: number;
-  if (match) {
-    base = match[1];
-    num = Number(match[2]) + 1;
-  } else {
-    base = id;
-    num = 2;
-  }
-  while (existing.has(`${base}${num}`)) {
-    num++;
-  }
-  return `${base}${num}`;
-};
-
-export const getUniqueTriggerId = (id: string, triggers: Trigger[]): string =>
-  computeUniqueId(id, new Set(getTriggerIds(triggers)));
-
 export interface TriggerDescription {
   target?: TargetSelector["target"];
   fields: Record<

src/dialogs/config-flow/show-dialog-data-entry-flow.ts

@@ -167,7 +167,6 @@ export interface DataEntryFlowDialogParams {
     entryId?: string;
   }) => void;
   flowConfig: FlowConfig;
-  showAdvanced?: boolean;
   dialogParentElement?: HTMLElement;
   navigateToResult?: boolean;
   carryOverDevices?: string[];

src/dialogs/config-flow/step-flow-abort.ts

@@ -48,7 +48,6 @@ class StepFlowAbort extends LitElement {
         showConfigFlowDialog(this.params.dialogParentElement!, {
           dialogClosedCallback: this.params.dialogClosedCallback,
           startFlowHandler: this.handler,
-          showAdvanced: this.hass.userData?.showAdvanced,
           navigateToResult: this.params.navigateToResult,
         });
       },

src/dialogs/notifications/notification-drawer.ts

@@ -206,8 +206,6 @@ export class HuiNotificationDrawer extends KeyboardShortcutMixin(LitElement) {
 
   static styles = css`
     ha-header-bar {
-      --mdc-theme-on-primary: var(--primary-text-color);
-      --mdc-theme-primary: var(--primary-background-color);
       --header-bar-padding: var(--safe-area-inset-top, 0px) 0 0
         var(--safe-area-inset-left, 0px);
       border-bottom: 1px solid var(--divider-color);

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -267,7 +267,7 @@ export class QuickBar extends LitElement {
             ></ha-picker-combo-box>`
           : nothing}
         ${this._showHint
-          ? html`<ha-tip slot="footer" .hass=${this.hass}
+          ? html`<ha-tip slot="footer"
               >${this.hass.localize("ui.tips.key_shortcut_quick_search", {
                 keyboard_shortcut: html`<button
                   class="link"

src/dialogs/sidebar/dialog-edit-sidebar.ts

@@ -147,7 +147,6 @@ class DialogEditSidebar extends LitElement {
 
     return html`
       <ha-items-display-editor
-        .hass=${this.hass}
         .value=${{
           order: this._order,
           hidden: hiddenPanels,

src/layouts/home-assistant-main.ts

@@ -153,7 +153,7 @@ export class HomeAssistantMain extends LitElement {
       /* remove the grey tap highlights in iOS on the fullscreen touch targets */
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       --ha-sidebar-width: calc(56px + var(--safe-area-inset-left, 0px));
-      --mdc-top-app-bar-width: calc(100% - var(--ha-sidebar-width));
+      --ha-top-app-bar-width: calc(100% - var(--ha-sidebar-width));
       --safe-area-content-inset-left: 0px;
       --safe-area-content-inset-right: var(--safe-area-inset-right);
     }
@@ -162,7 +162,7 @@ export class HomeAssistantMain extends LitElement {
     }
     :host([modal]) {
       --ha-sidebar-width: unset;
-      --mdc-top-app-bar-width: unset;
+      --ha-top-app-bar-width: 100%;
       --safe-area-content-inset-left: var(--safe-area-inset-left);
     }
     partial-panel-resolver,

src/mixins/mobile-aware-mixin.ts

@@ -1,8 +1,8 @@
 import type { LitElement } from "lit";
 import { state } from "lit/decorators";
+import { listenMediaQuery } from "../common/dom/media_query";
 import type { Constructor } from "../types";
 import { isMobileClient } from "../util/is_mobile";
-import { listenMediaQuery } from "../common/dom/media_query";
 
 export const MobileAwareMixin = <T extends Constructor<LitElement>>(
   superClass: T
@@ -12,16 +12,16 @@ export const MobileAwareMixin = <T extends Constructor<LitElement>>(
 
     protected _isMobileClient = isMobileClient;
 
+    protected mobileSizeQuery =
+      "all and (max-width: 450px), all and (max-height: 500px)";
+
     private _unsubMql?: () => void;
 
     public connectedCallback() {
       super.connectedCallback();
-      this._unsubMql = listenMediaQuery(
-        "all and (max-width: 450px), all and (max-height: 500px)",
-        (matches) => {
-          this._isMobileSize = matches;
-        }
-      );
+      this._unsubMql = listenMediaQuery(this.mobileSizeQuery, (matches) => {
+        this._isMobileSize = matches;
+      });
     }
 
     public disconnectedCallback() {

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

@@ -6,7 +6,6 @@ import { classMap } from "lit/directives/class-map";
 import { createRef, ref } from "lit/directives/ref";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
-import { IFRAME_SANDBOX } from "../../util/iframe";
 import { navigate } from "../../common/navigate";
 import { computeRouteTail } from "../../common/url/route";
 import { nextRender } from "../../common/util/render-status";
@@ -137,8 +136,6 @@ class HaPanelApp extends LitElement {
         })}
         title=${this._addon.name}
         src=${this._addon.ingress_url!}
-        .sandbox=${IFRAME_SANDBOX}
-        allow="microphone; camera; clipboard-write"
         @load=${this._checkLoaded}
         ${ref(this._iframeRef)}
       >

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

@@ -342,7 +342,6 @@ class PanelCalendar extends SubscribeMixin(LitElement) {
   private _addCalendar = async (): Promise<void> => {
     showConfigFlowDialog(this, {
       startFlowHandler: "local_calendar",
-      showAdvanced: this.hass.userData?.showAdvanced,
       manifest: await fetchIntegrationManifest(this.hass, "local_calendar"),
       dialogClosedCallback: ({ flowFinished }) => {
         if (flowFinished) {

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

@@ -175,7 +175,7 @@ class PanelClimate extends LitElement {
           position: fixed;
           top: 0;
           width: calc(
-            var(--mdc-top-app-bar-width, 100%) - var(
+            var(--ha-top-app-bar-width, 100%) - var(
                 --safe-area-inset-right,
                 0px
               )
@@ -191,7 +191,7 @@ class PanelClimate extends LitElement {
         }
         :host([narrow]) .header {
           width: calc(
-            var(--mdc-top-app-bar-width, 100%) - var(
+            var(--ha-top-app-bar-width, 100%) - var(
                 --safe-area-inset-left,
                 0px
               ) - var(--safe-area-inset-right, 0px)
@@ -200,7 +200,7 @@ class PanelClimate extends LitElement {
         }
         :host([scrolled]) .header {
           box-shadow: var(
-            --mdc-top-app-bar-fixed-box-shadow,
+            --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)

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -112,7 +112,6 @@ export class HaConfigApplicationCredentials extends LitElement {
           showNarrow: true,
           template: (credential) => html`
             <ha-icon-overflow-menu
-              .hass=${this.hass}
               narrow
               .items=${[
                 {

src/panels/config/apps/app-view/info/supervisor-app-info-tab.ts

@@ -31,7 +31,6 @@ class SupervisorAppInfoDashboard extends LitElement {
         <supervisor-app-info
           .narrow=${this.narrow}
           .route=${this.route}
-          .hass=${this.hass}
           .addon=${this.addon}
           .controlEnabled=${this.controlEnabled}
         ></supervisor-app-info>

src/panels/config/apps/app-view/info/supervisor-app-info.ts

@@ -92,14 +92,15 @@ import {
   showConfirmationDialog,
 } from "../../../../../dialogs/generic/show-dialog-box";
 import { showMoreInfoDialog } from "../../../../../dialogs/more-info/show-ha-more-info-dialog";
+import { MobileAwareMixin } from "../../../../../mixins/mobile-aware-mixin";
 import { mdiHomeAssistant } from "../../../../../resources/home-assistant-logo-svg";
 import { haStyle } from "../../../../../resources/styles";
 import type { Route } from "../../../../../types";
 import { bytesToString } from "../../../../../util/bytes-to-string";
 import { getAppDisplayName } from "../../common/app";
-import "../components/supervisor-app-metric";
-import "../../components/supervisor-apps-tag";
 import "../../components/supervisor-apps-state";
+import "../../components/supervisor-apps-tag";
+import "../components/supervisor-app-metric";
 import { extractChangelog } from "../util/supervisor-app";
 import "./supervisor-app-system-managed";
 
@@ -123,7 +124,7 @@ const RATING_ICON = {
 const POLL_INTERVAL_SECONDS = 5;
 
 @customElement("supervisor-app-info")
-class SupervisorAppInfo extends LitElement {
+class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
   @property({ type: Boolean }) public narrow = false;
 
   @property({ attribute: false }) public route!: Route;
@@ -163,6 +164,9 @@ class SupervisorAppInfo extends LitElement {
 
   private _pollInterval?: number;
 
+  protected mobileSizeQuery =
+    "all and (max-width: 1120px), all and (max-height: 500px)";
+
   private get _currentAddon(): HassioAddonDetails | StoreAddonDetails {
     return this._addon || this.addon;
   }
@@ -863,11 +867,11 @@ class SupervisorAppInfo extends LitElement {
           `
         : nothing}
       <div
-        class="app ${this.narrow || !this._currentAddon.version
+        class="app ${this._isMobileSize || !this._currentAddon.version
           ? "column"
           : ""}"
       >
-        ${this.narrow || !this._currentAddon.version
+        ${this._isMobileSize || !this._currentAddon.version
           ? html`
               ${this._renderInfoCard()}
               ${this._currentAddon.version

src/panels/config/areas/ha-config-area-page.ts

@@ -145,8 +145,6 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
 
   @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false }) public showAdvanced = false;
-
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg: EntityRegistryEntry[] = [];

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

@@ -13,8 +13,6 @@ class HaConfigAreas extends HassRouterPage {
 
   @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false }) public showAdvanced = false;
-
   protected routerOptions: RouterOptions = {
     defaultPage: "dashboard",
     routes: {
@@ -37,7 +35,6 @@ class HaConfigAreas extends HassRouterPage {
 
     pageEl.narrow = this.narrow;
     pageEl.isWide = this.isWide;
-    pageEl.showAdvanced = this.showAdvanced;
     pageEl.route = this.routeTail;
   }
 }

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

@@ -107,7 +107,7 @@ export default class HaAutomationActionEditor extends LitElement {
     ev.stopPropagation();
     const value = {
       ...(this.action.alias ? { alias: this.action.alias } : {}),
-      ...(this.action.comment ? { comment: this.action.comment } : {}),
+      ...(this.action.note ? { note: this.action.note } : {}),
       ...ev.detail.value,
     };
     fireEvent(this, "value-changed", { value });

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

@@ -297,8 +297,8 @@ export default class HaAutomationActionRow extends LitElement {
             ?.target
         : undefined;
 
-    const commentTooltipText = truncateWithEllipsis(
-      this.action.comment?.trim() || "",
+    const noteTooltipText = truncateWithEllipsis(
+      this.action.note?.trim() || "",
       250
     );
 
@@ -337,18 +337,18 @@ export default class HaAutomationActionRow extends LitElement {
               serviceTargetSpec
             )
           : nothing}
-        ${commentTooltipText
+        ${noteTooltipText
           ? html`
               <ha-svg-icon
-                id="comment-icon"
+                id="note-icon"
                 .path=${mdiCommentTextOutline}
                 .label=${this.hass.localize(
-                  "ui.panel.config.automation.editor.comment.label"
+                  "ui.panel.config.automation.editor.note.label"
                 )}
-                class="comment-indicator"
+                class="note-indicator"
               ></ha-svg-icon
-              ><ha-tooltip for="comment-icon"
-                ><p>${commentTooltipText}</p></ha-tooltip
+              ><ha-tooltip for="note-icon"
+                ><p>${noteTooltipText}</p></ha-tooltip
               >
             `
           : nothing}
@@ -407,11 +407,11 @@ export default class HaAutomationActionRow extends LitElement {
             )
           )}
         </ha-dropdown-item>
-        <ha-dropdown-item value="edit_comment">
+        <ha-dropdown-item value="edit_note">
           <ha-svg-icon slot="icon" .path=${mdiCommentEditOutline}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
-              `ui.panel.config.automation.editor.comment.${this.action.comment ? "edit" : "add"}`
+              `ui.panel.config.automation.editor.note.${this.action.note ? "edit" : "add"}`
             )
           )}
         </ha-dropdown-item>
@@ -941,25 +941,25 @@ export default class HaAutomationActionRow extends LitElement {
     }
   };
 
-  private _editCommentAction = async (): Promise<void> => {
-    const comment = await showPromptDialog(this, {
+  private _editNoteAction = async (): Promise<void> => {
+    const note = await showPromptDialog(this, {
       title: this.hass.localize(
-        `ui.panel.config.automation.editor.comment.${this.action.comment ? "edit" : "add"}`
+        `ui.panel.config.automation.editor.note.${this.action.note ? "edit" : "add"}`
       ),
       inputLabel: this.hass.localize(
-        "ui.panel.config.automation.editor.comment.label"
+        "ui.panel.config.automation.editor.note.label"
       ),
       inputType: "string",
-      defaultValue: this.action.comment,
+      defaultValue: this.action.note,
       confirmText: this.hass.localize("ui.common.submit"),
       multiline: true,
     });
-    if (comment !== null) {
+    if (note !== null) {
       const value = { ...this.action };
-      if (comment === "") {
-        delete value.comment;
+      if (note === "") {
+        delete value.note;
       } else {
-        value.comment = comment;
+        value.note = note;
       }
       fireEvent(this, "value-changed", {
         value,
@@ -1089,7 +1089,7 @@ export default class HaAutomationActionRow extends LitElement {
       rename: () => {
         this._renameAction();
       },
-      editComment: this._editCommentAction,
+      editNote: this._editNoteAction,
       toggleYamlMode: () => {
         this._toggleYamlMode();
         this.openSidebar();
@@ -1185,8 +1185,8 @@ export default class HaAutomationActionRow extends LitElement {
       case "rename":
         this._renameAction();
         break;
-      case "edit_comment":
-        this._editCommentAction();
+      case "edit_note":
+        this._editNoteAction();
         break;
       case "duplicate":
         this._duplicateAction();

src/panels/config/automation/automation-mode-dialog/dialog-automation-mode.ts

@@ -95,7 +95,6 @@ class DialogAutomationMode extends LitElement implements HassDialog {
           .value=${this._newMode}
           @value-changed=${this._modeChanged}
           .maxColumns=${1}
-          .hass=${this.hass}
         ></ha-select-box>
 
         ${isMaxMode(this._newMode)

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

@@ -123,7 +123,7 @@ export default class HaAutomationConditionEditor extends LitElement {
     ev.stopPropagation();
     const value = {
       ...(this.condition.alias ? { alias: this.condition.alias } : {}),
-      ...(this.condition.comment ? { comment: this.condition.comment } : {}),
+      ...(this.condition.note ? { note: this.condition.note } : {}),
       ...ev.detail.value,
     };
     fireEvent(this, "value-changed", { value });

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

@@ -1,7 +1,6 @@
 import "@home-assistant/webawesome/dist/components/divider/divider";
 import { consume } from "@lit/context";
 import {
-  mdiAlert,
   mdiAppleKeyboardCommand,
   mdiArrowDown,
   mdiArrowUp,
@@ -26,7 +25,7 @@ import type {
 } from "home-assistant-js-websocket";
 import { dump } from "js-yaml";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
@@ -53,26 +52,18 @@ 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 "../../../../components/ha-trigger-icon";
 import type {
   AutomationClipboard,
-  AutomationConfig,
   Condition,
   ConditionSidebarConfig,
   PlatformCondition,
-  TriggerCondition,
 } from "../../../../data/automation";
 import {
-  automationConfigContext,
   isCondition,
   subscribeCondition,
   testCondition,
 } from "../../../../data/automation";
-import {
-  describeCondition,
-  getTriggerInfos,
-} from "../../../../data/automation_i18n";
+import { describeCondition } from "../../../../data/automation_i18n";
 import type { ConditionDescriptions } from "../../../../data/condition";
 import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
 import {
@@ -92,7 +83,6 @@ import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
 import { showEditorToast } from "../editor-toast";
 import "../ha-automation-editor-warning";
-import "../ha-trigger-id-chip";
 import { overflowStyles, rowStyles } from "../styles";
 import "../target/ha-automation-row-targets";
 import "./ha-automation-condition-editor";
@@ -164,11 +154,10 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @state() private _selected = false;
 
-  @state() private _liveTestResult: LiveTestState = "unknown";
-
-  @state()
-  @consume({ context: automationConfigContext, subscribe: true })
-  private _automationConfig?: AutomationConfig;
+  @state() private _liveTestResult: {
+    state: LiveTestState;
+    message?: string;
+  } = { state: "unknown" };
 
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
@@ -216,8 +205,8 @@ export default class HaAutomationConditionRow extends LitElement {
     const conditionTargetSpec =
       this.conditionDescriptions[this.condition.condition]?.target;
 
-    const commentTooltipText = truncateWithEllipsis(
-      this.condition.comment?.trim() || "",
+    const noteTooltipText = truncateWithEllipsis(
+      this.condition.note?.trim() || "",
       250
     );
 
@@ -228,13 +217,9 @@ export default class HaAutomationConditionRow extends LitElement {
         .condition=${this.condition.condition}
       ></ha-condition-icon>
       <h3 slot="header">
-        ${this.condition.condition === "trigger"
-          ? this._renderTriggerConditionDescription(
-              this.condition as TriggerCondition
-            )
-          : capitalizeFirstLetter(
-              describeCondition(this.condition, this.hass, this._entityReg)
-            )}
+        ${capitalizeFirstLetter(
+          describeCondition(this.condition, this.hass, this._entityReg)
+        )}
         ${target !== undefined || (descriptionHasTarget && !this._isNew)
           ? this._renderTargets(
               target,
@@ -242,19 +227,17 @@ export default class HaAutomationConditionRow extends LitElement {
               conditionTargetSpec
             )
           : nothing}
-        ${this.condition.comment?.trim()
+        ${this.condition.note?.trim()
           ? html`
               <ha-svg-icon
-                id="comment-icon"
+                id="note-icon"
                 .path=${mdiCommentTextOutline}
                 .label=${this.hass.localize(
-                  "ui.panel.config.automation.editor.comment.label"
+                  "ui.panel.config.automation.editor.note.label"
                 )}
-                class="comment-indicator"
+                class="note-indicator"
               ></ha-svg-icon>
-              <ha-tooltip for="comment-icon"
-                ><p>${commentTooltipText}</p></ha-tooltip
-              >
+              <ha-tooltip for="note-icon"><p>${noteTooltipText}</p></ha-tooltip>
             `
           : nothing}
       </h3>
@@ -304,11 +287,11 @@ export default class HaAutomationConditionRow extends LitElement {
             )
           )}
         </ha-dropdown-item>
-        <ha-dropdown-item value="edit_comment">
+        <ha-dropdown-item value="edit_note">
           <ha-svg-icon slot="icon" .path=${mdiCommentEditOutline}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
-              `ui.panel.config.automation.editor.comment.${this.condition.comment ? "edit" : "add"}`
+              `ui.panel.config.automation.editor.note.${this.condition.note ? "edit" : "add"}`
             )
           )}
         </ha-dropdown-item>
@@ -549,11 +532,12 @@ export default class HaAutomationConditionRow extends LitElement {
               <ha-automation-row-live-test
                 slot="icons"
                 .state=${this.condition.condition !== "trigger"
-                  ? this._liveTestResult
+                  ? this._liveTestResult.state
                   : "unknown"}
                 .label=${this.hass.localize(
-                  `ui.panel.config.automation.editor.conditions.live_test_state.${this.condition.condition !== "trigger" ? this._liveTestResult : "unknown"}`
+                  `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>`
           : html`
@@ -585,102 +569,6 @@ export default class HaAutomationConditionRow extends LitElement {
     `;
   }
 
-  private _getTriggerInfos = memoizeOne(getTriggerInfos);
-
-  private _renderTriggerConditionDescription(condition: TriggerCondition) {
-    const ids = ensureArray(condition.id ?? [])
-      .map((id) => (typeof id === "string" ? id : String(id)))
-      .filter((id) => id !== "");
-    const prefix = capitalizeFirstLetter(
-      this.hass
-        .localize(
-          "ui.panel.config.automation.editor.conditions.type.trigger.description.full",
-          { id: "" }
-        )
-        .trim()
-    );
-    if (!ids.length) {
-      return html`${prefix}
-        <div class="trigger warning">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.conditions.type.trigger.description.no_trigger"
-          )}
-        </div>`;
-    }
-
-    const triggerInfos = this._getTriggerInfos(
-      ensureArray(this._automationConfig?.triggers || []),
-      this.hass,
-      this._entityReg
-    );
-    const infoById = new Map(triggerInfos.map((info) => [info.id, info]));
-    return html`${prefix}
-    ${ids.map((id) => {
-      const info = infoById.get(id);
-      if (!info) {
-        return html`<div class="trigger">
-          <ha-trigger-id-chip id=${`trigger-${id}`} warning .triggerId=${id}>
-            <ha-svg-icon slot="start" .path=${mdiAlert}></ha-svg-icon>
-          </ha-trigger-id-chip>
-          ${ids.length < 4
-            ? html`<span
-                >${this.hass.localize("state.default.unavailable")}</span
-              >`
-            : nothing}
-
-          <ha-tooltip .for=${`trigger-${id}`}>
-            ${ids.length >= 4
-              ? html`<div>
-                  ${this.hass.localize("state.default.unavailable")}
-                </div>`
-              : nothing}
-            ${this.hass.localize(
-              "ui.panel.config.automation.editor.conditions.type.trigger.unavailable_info",
-              { id: html`<b>${id}</b>` }
-            )}
-          </ha-tooltip>
-        </div>`;
-      }
-      const triggerIcon = html`<ha-trigger-icon
-        .slot=${ids.length < 4 ? "start" : ""}
-        .hass=${this.hass}
-        .trigger=${info.triggerType}
-      ></ha-trigger-icon>`;
-
-      const isDuplicateId = info.count > 1;
-
-      return html`
-        <div class="trigger">
-          ${ids.length < 4 ? triggerIcon : nothing}
-          <ha-trigger-id-chip
-            id=${`trigger-${id}`}
-            .triggerId=${id}
-            .warning=${isDuplicateId}
-          >
-            ${isDuplicateId
-              ? html`<ha-svg-icon slot="start" .path=${mdiAlert}></ha-svg-icon>`
-              : nothing}
-          </ha-trigger-id-chip>
-          ${ids.length < 4
-            ? html`<span>${info.label}</span>`
-            : html`<ha-tooltip .for=${`trigger-${id}`}></ha-tooltip>`}
-          ${isDuplicateId || ids.length >= 4
-            ? html`<ha-tooltip .for=${`trigger-${id}`}>
-                ${ids.length >= 4
-                  ? html`<div>${triggerIcon}${info.label}</div>`
-                  : nothing}
-                ${isDuplicateId
-                  ? this.hass.localize(
-                      "ui.panel.config.automation.editor.triggers.duplicate_id_warning"
-                    )
-                  : nothing}
-              </ha-tooltip>`
-            : nothing}
-        </div>
-      `;
-    })}`;
-  }
-
   private _renderTargets = memoizeOne(
     (
       target?: HassServiceTarget,
@@ -736,7 +624,12 @@ export default class HaAutomationConditionRow extends LitElement {
   }
 
   private _resetSubscription() {
-    this._liveTestResult = "unknown";
+    this._liveTestResult = {
+      state: "unknown",
+      message: this.hass.localize(
+        "ui.panel.config.automation.editor.conditions.live_test_state.unknown"
+      ),
+    };
     if (this._conditionUnsub) {
       this._conditionUnsub.then((unsub) => unsub());
       this._conditionUnsub = undefined;
@@ -761,7 +654,12 @@ export default class HaAutomationConditionRow extends LitElement {
         if (result.error) {
           this._handleLiveTestError(result.error);
         } else {
-          this._liveTestResult = result.result ? "pass" : "fail";
+          this._liveTestResult = {
+            state: result.result ? "pass" : "fail",
+            message: this.hass.localize(
+              `ui.panel.config.automation.editor.conditions.testing_${result.result ? "pass" : "error"}`
+            ),
+          };
         }
       },
       this.condition
@@ -778,7 +676,12 @@ export default class HaAutomationConditionRow extends LitElement {
   private _handleLiveTestError(error: any) {
     const invalid =
       typeof error !== "string" && error.code === "invalid_format";
-    this._liveTestResult = invalid ? "invalid" : "unknown";
+    this._liveTestResult = {
+      state: invalid ? "invalid" : "unknown",
+      message: this.hass.localize(
+        `ui.panel.config.automation.editor.conditions.${invalid ? "invalid_condition" : "live_test_state.unknown"}`
+      ),
+    };
   }
 
   private _onValueChange(event: CustomEvent) {
@@ -945,25 +848,25 @@ export default class HaAutomationConditionRow extends LitElement {
     }
   };
 
-  private _editCommentCondition = async (): Promise<void> => {
-    const comment = await showPromptDialog(this, {
+  private _editNoteCondition = async (): Promise<void> => {
+    const note = await showPromptDialog(this, {
       title: this.hass.localize(
-        `ui.panel.config.automation.editor.comment.${this.condition.comment ? "edit" : "add"}`
+        `ui.panel.config.automation.editor.note.${this.condition.note ? "edit" : "add"}`
       ),
       inputLabel: this.hass.localize(
-        "ui.panel.config.automation.editor.comment.label"
+        "ui.panel.config.automation.editor.note.label"
       ),
       inputType: "string",
-      defaultValue: this.condition.comment,
+      defaultValue: this.condition.note,
       confirmText: this.hass.localize("ui.common.submit"),
       multiline: true,
     });
-    if (comment !== null) {
+    if (note !== null) {
       const value = { ...this.condition };
-      if (comment === "") {
-        delete value.comment;
+      if (note === "") {
+        delete value.note;
       } else {
-        value.comment = comment;
+        value.note = note;
       }
       fireEvent(this, "value-changed", {
         value,
@@ -1118,7 +1021,7 @@ export default class HaAutomationConditionRow extends LitElement {
       rename: () => {
         this._renameCondition();
       },
-      editComment: this._editCommentCondition,
+      editNote: this._editNoteCondition,
       toggleYamlMode: () => {
         this._toggleYamlMode();
         this.openSidebar();
@@ -1190,8 +1093,8 @@ export default class HaAutomationConditionRow extends LitElement {
       case "rename":
         this._renameCondition();
         break;
-      case "edit_comment":
-        this._editCommentCondition();
+      case "edit_note":
+        this._editNoteCondition();
         break;
       case "duplicate":
         this._duplicateCondition();
@@ -1224,26 +1127,7 @@ export default class HaAutomationConditionRow extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [
-      rowStyles,
-      overflowStyles,
-      css`
-        .trigger {
-          display: flex;
-          align-items: center;
-          gap: var(--ha-space-2);
-          background-color: var(--ha-color-fill-neutral-normal-resting);
-          border-radius: var(--ha-border-radius-md);
-          padding-inline: var(--ha-space-2);
-          color: var(--ha-color-on-neutral-normal);
-          height: 32px;
-        }
-        .trigger.warning {
-          background-color: var(--ha-color-fill-warning-normal-resting);
-          color: var(--ha-color-on-warning-normal);
-        }
-      `,
-    ];
+    return [rowStyles, overflowStyles];
   }
 }
 

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

@@ -22,7 +22,7 @@ import type { HomeAssistant } from "../../../../../types";
 
 const numericStateConditionStruct = object({
   alias: optional(string()),
-  comment: optional(string()),
+  note: optional(string()),
   condition: literal("numeric_state"),
   entity_id: optional(string()),
   attribute: optional(string()),

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

@@ -25,7 +25,7 @@ import type { ConditionElement } from "../ha-automation-condition-row";
 
 const stateConditionStruct = object({
   alias: optional(string()),
-  comment: optional(string()),
+  note: optional(string()),
   condition: literal("state"),
   entity_id: optional(string()),
   attribute: optional(string()),

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

@@ -1,31 +1,26 @@
-import { consume } from "@lit/context";
-import { mdiAlert } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../../../../common/array/ensure-array";
 import { fireEvent } from "../../../../../common/dom/fire_event";
-import "../../../../../components/ha-alert";
 import "../../../../../components/ha-form/ha-form";
+import type { SchemaUnion } from "../../../../../components/ha-form/types";
 import "../../../../../components/ha-select";
-import "../../../../../components/item/ha-list-item-option";
-import type { HaListItemOption } from "../../../../../components/item/ha-list-item-option";
-import "../../../../../components/list/ha-list-selectable";
-import type { HaListSelectable } from "../../../../../components/list/ha-list-selectable";
-import type { HaListSelectedDetail } from "../../../../../components/list/types";
 import {
-  automationConfigContext,
+  flattenTriggers,
   type AutomationConfig,
+  type Trigger,
   type TriggerCondition,
 } from "../../../../../data/automation";
-import {
-  getTriggerInfos,
-  type TriggerInfo,
-} from "../../../../../data/automation_i18n";
-import { fullEntitiesContext } from "../../../../../data/context";
-import type { EntityRegistryEntry } from "../../../../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../../../../types";
-import "../../ha-trigger-id-chip";
+
+const getTriggersIds = (triggers: Trigger[]): string[] => {
+  const triggerIds = flattenTriggers(triggers)
+    .map((t) => ("id" in t ? t.id : undefined))
+    .filter(Boolean) as string[];
+  return Array.from(new Set(triggerIds));
+};
 
 @customElement("ha-automation-condition-trigger")
 export class HaTriggerCondition extends LitElement {
@@ -35,25 +30,9 @@ export class HaTriggerCondition extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @state()
-  @consume({ context: automationConfigContext, subscribe: true })
-  private _automationConfig?: AutomationConfig;
+  @state() private _triggerIds: string[] = [];
 
-  @state()
-  @consume({ context: fullEntitiesContext, subscribe: true })
-  private _entityReg: EntityRegistryEntry[] = [];
-
-  private _triggerInfos = memoizeOne(
-    (
-      triggers: AutomationConfig["triggers"] | undefined,
-      entityReg: EntityRegistryEntry[]
-    ): TriggerInfo[] =>
-      getTriggerInfos(
-        triggers ? ensureArray(triggers) : undefined,
-        this.hass,
-        entityReg
-      )
-  );
+  private _unsub?: UnsubscribeFunc;
 
   public static get defaultConfig(): TriggerCondition {
     return {
@@ -62,146 +41,89 @@ export class HaTriggerCondition extends LitElement {
     };
   }
 
+  private _schema = memoizeOne(
+    (triggerIds: string[]) =>
+      [
+        {
+          name: "id",
+          selector: {
+            select: {
+              multiple: true,
+              options: triggerIds,
+            },
+          },
+          required: true,
+        },
+      ] as const
+  );
+
+  connectedCallback() {
+    super.connectedCallback();
+    const details = { callback: (config) => this._automationUpdated(config) };
+    fireEvent(this, "subscribe-automation-config", details);
+    this._unsub = (details as any).unsub;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._unsub) {
+      this._unsub();
+    }
+  }
+
   protected render() {
-    const selectedIds = ensureArray(this.condition.id || []).filter(
-      (id): id is string => typeof id === "string" && id !== ""
-    );
-
-    const triggerInfos = this._triggerInfos(
-      this._automationConfig?.triggers,
-      this._entityReg
-    );
-
-    if (!triggerInfos.length && !selectedIds.length) {
-      return html`
-        <ha-alert alert-type="info">
-          ${this.hass.localize(
-            "ui.panel.config.automation.editor.conditions.type.trigger.no_triggers"
-          )}
-        </ha-alert>
-      `;
+    if (!this._triggerIds.length) {
+      return this.hass.localize(
+        "ui.panel.config.automation.editor.conditions.type.trigger.no_triggers"
+      );
     }
 
+    const schema = this._schema(this._triggerIds);
+
     return html`
-      <ha-list-selectable @ha-list-selected=${this._valueChanged} multi>
-        ${this._renderOptions(selectedIds, triggerInfos)}
-      </ha-list-selectable>
+      <ha-form
+        .schema=${schema}
+        .data=${this.condition}
+        .hass=${this.hass}
+        .disabled=${this.disabled}
+        .computeLabel=${this._computeLabelCallback}
+        @value-changed=${this._valueChanged}
+      ></ha-form>
     `;
   }
 
-  private _renderOptions(selectedIds: string[], triggerInfos: TriggerInfo[]) {
-    const unknownTriggerIds = selectedIds.filter(
-      (id) => !triggerInfos.some((info) => info.id === id)
+  private _computeLabelCallback = (
+    schema: SchemaUnion<ReturnType<typeof this._schema>>
+  ): string =>
+    this.hass.localize(
+      `ui.panel.config.automation.editor.conditions.type.trigger.${schema.name}`
     );
 
-    const alertIcon = html`<ha-svg-icon
-      slot="start"
-      .path=${mdiAlert}
-    ></ha-svg-icon>`;
-
-    return html`
-      ${unknownTriggerIds.map(
-        (id) => html`
-          <ha-list-item-option
-            .value=${id}
-            .selected=${true}
-            appearance="checkbox"
-          >
-            <div class="option" slot="headline">
-              <ha-trigger-id-chip
-                id=${`trigger-${id}`}
-                warning
-                .triggerId=${id}
-              >
-                ${alertIcon}
-              </ha-trigger-id-chip>
-              ${this.hass.localize("state.default.unavailable")}
-              <ha-tooltip .for=${`trigger-${id}`}>
-                ${this.hass.localize(
-                  "ui.panel.config.automation.editor.conditions.type.trigger.unavailable_info",
-                  { id: html`<b>${id}</b>` }
-                )}
-              </ha-tooltip>
-            </div>
-          </ha-list-item-option>
-        `
-      )}
-      ${triggerInfos.map(
-        (info) => html`
-          <ha-list-item-option
-            .value=${info.id}
-            .selected=${selectedIds.includes(info.id)}
-            appearance="checkbox"
-          >
-            <div class="option" slot="headline">
-              <ha-trigger-id-chip
-                id=${`trigger-${info.id}`}
-                .warning=${info.count > 1}
-                .triggerId=${info.id}
-              >
-                ${info.count > 1 ? alertIcon : nothing}
-              </ha-trigger-id-chip>
-              ${info.label}${info.count > 1
-                ? html`<ha-tooltip .for=${`trigger-${info.id}`}
-                    >${this.hass.localize(
-                      "ui.panel.config.automation.editor.conditions.type.trigger.duplicated_info"
-                    )}</ha-tooltip
-                  >`
-                : nothing}
-            </div>
-          </ha-list-item-option>
-        `
-      )}
-    `;
+  private _automationUpdated(config?: AutomationConfig) {
+    this._triggerIds = config?.triggers
+      ? getTriggersIds(ensureArray(config.triggers))
+      : [];
   }
 
-  private _valueChanged(ev: CustomEvent<HaListSelectedDetail>): void {
+  private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
-    if (
-      !ev.detail.diff ||
-      (!ev.detail.diff?.added.size && !ev.detail.diff?.removed.size)
-    ) {
-      return;
-    }
+    const newValue = ev.detail.value;
 
-    const ids = ensureArray(this.condition.id || []);
-
-    const valueSet = ev.detail.diff.added.size
-      ? ev.detail.diff.added
-      : ev.detail.diff.removed;
-
-    const index = valueSet.values().next().value;
-
-    if (index === undefined) {
-      return;
-    }
-    const triggerId = (
-      (ev.currentTarget as HaListSelectable).items[index] as HaListItemOption
-    ).value;
-    if (triggerId === undefined || triggerId === "") {
-      return;
-    }
-
-    if (ev.detail.diff.added.size) {
-      ids.push(triggerId);
-    } else {
-      const removeIndex = ids.indexOf(triggerId);
-      if (removeIndex > -1) {
-        ids.splice(removeIndex, 1);
+    if (typeof newValue.id === "string") {
+      if (!this._triggerIds.some((id) => id === newValue.id)) {
+        newValue.id = "";
+      }
+    } else if (Array.isArray(newValue.id)) {
+      newValue.id = newValue.id.filter((_id) =>
+        this._triggerIds.some((id) => id === _id)
+      );
+      if (!newValue.id.length) {
+        newValue.id = "";
       }
     }
 
-    fireEvent(this, "value-changed", { value: { ...this.condition, id: ids } });
+    fireEvent(this, "value-changed", { value: newValue });
   }
-
-  static styles = css`
-    .option {
-      display: flex;
-      align-items: center;
-      gap: var(--ha-space-1);
-      color: var(--ha-color-on-neutral-normal);
-    }
-  `;
 }
 
 declare global {

src/panels/config/automation/dialog-new-automation.ts

@@ -270,7 +270,7 @@ class DialogNewAutomation extends LitElement {
                         : nothing}
                     ${processedBlueprints.length > 0
                       ? html`
-                          <ha-tip .hass=${this.hass}>
+                          <ha-tip>
                             <a
                               href=${documentationUrl(
                                 this.hass,

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

@@ -1,5 +1,4 @@
 import "@home-assistant/webawesome/dist/components/divider/divider";
-import { provide } from "@lit/context";
 import {
   mdiAppleKeyboardCommand,
   mdiCog,
@@ -21,9 +20,10 @@ import {
   mdiTransitConnection,
   mdiUndo,
 } from "@mdi/js";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { UndoRedoController } from "../../../common/controllers/undo-redo-controller";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -31,7 +31,6 @@ import { goBack, navigate } from "../../../common/navigate";
 import { promiseTimeout } from "../../../common/util/promise-timeout";
 import "../../../components/ha-button";
 import "../../../components/ha-dropdown";
-import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
@@ -46,7 +45,6 @@ import type {
   Trigger,
 } from "../../../data/automation";
 import {
-  automationConfigContext,
   deleteAutomation,
   fetchAutomationFileConfig,
   getAutomationEditorInitData,
@@ -74,12 +72,13 @@ import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { Entries, ValueChangedEvent } from "../../../types";
 import { isMac } from "../../../util/is_mac";
+import { showEditorToast } from "./editor-toast";
 import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
 import { showAutomationModeDialog } from "./automation-mode-dialog/show-dialog-automation-mode";
 import { showAutomationSaveDialog } from "./automation-save-dialog/show-dialog-automation-save";
 import { showAutomationSaveTimeoutDialog } from "./automation-save-timeout-dialog/show-dialog-automation-save-timeout";
+import { ADD_AUTOMATION_ELEMENT_QUERY_PARAM } from "./show-add-automation-element-dialog";
 import "./blueprint-automation-editor";
-import { showEditorToast } from "./editor-toast";
 import type { EditorDomainHooks } from "./ha-automation-script-editor-mixin";
 import {
   AutomationScriptEditorMixin,
@@ -87,7 +86,7 @@ import {
 } from "./ha-automation-script-editor-mixin";
 import "./manual-automation-editor";
 import type { HaManualAutomationEditor } from "./manual-automation-editor";
-import { ADD_AUTOMATION_ELEMENT_QUERY_PARAM } from "./show-add-automation-element-dialog";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -95,6 +94,10 @@ declare global {
   }
   // for fire event
   interface HASSDomEvents {
+    "subscribe-automation-config": {
+      callback: (config: AutomationConfig) => void;
+      unsub?: UnsubscribeFunc;
+    };
     "ui-mode-not-available": Error;
     "move-down": undefined;
     "move-up": undefined;
@@ -122,9 +125,12 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
 
-  @provide({ context: automationConfigContext })
-  @state()
-  protected config?: AutomationConfig;
+  private _configSubscriptions: Record<
+    string,
+    (config?: AutomationConfig) => void
+  > = {};
+
+  private _configSubscriptionsId = 1;
 
   private _newAutomationId?: string;
 
@@ -398,7 +404,10 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
             </ha-svg-icon>
           </ha-dropdown-item>
         </ha-dropdown>
-        <div class=${this.mode === "yaml" ? "yaml-mode" : ""}>
+        <div
+          class=${this.mode === "yaml" ? "yaml-mode" : ""}
+          @subscribe-automation-config=${this._subscribeAutomationConfig}
+        >
           ${this.mode === "gui"
             ? html`
                 <div>
@@ -629,6 +638,12 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
     ) {
       this._setEntityId();
     }
+
+    if (changedProps.has("config")) {
+      Object.values(this._configSubscriptions).forEach((sub) =>
+        sub(this.config)
+      );
+    }
   }
 
   private _setEntityId() {
@@ -1006,6 +1021,15 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
     }
   }
 
+  private _subscribeAutomationConfig(ev) {
+    const id = this._configSubscriptionsId++;
+    this._configSubscriptions[id] = ev.detail.callback;
+    ev.detail.unsub = () => {
+      delete this._configSubscriptions[id];
+    };
+    ev.detail.callback(this.config);
+  }
+
   protected supportedShortcuts(): SupportedShortcuts {
     return {
       s: () => this._handleSaveAutomation(),

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

@@ -6,9 +6,9 @@ import "../../../components/ha-button";
 import "../../../components/ha-settings-row";
 import { internationalizationContext } from "../../../data/context";
 
-@customElement("ha-automation-comment")
-export class HaAutomationComment extends LitElement {
-  @property() public comment!: string;
+@customElement("ha-automation-note")
+export class HaAutomationNote extends LitElement {
+  @property() public note!: string;
 
   @state()
   @consume({ context: internationalizationContext, subscribe: true })
@@ -18,9 +18,9 @@ export class HaAutomationComment extends LitElement {
     return html`
       <ha-settings-row narrow>
         <div class="heading" slot="heading">
-          <span class="title" id="comment-label">
+          <span class="title" id="note-label">
             ${this._i18n.localize(
-              "ui.panel.config.automation.editor.comment.label"
+              "ui.panel.config.automation.editor.note.label"
             )}
           </span>
           <ha-button
@@ -31,13 +31,13 @@ export class HaAutomationComment extends LitElement {
             ${this._i18n.localize("ui.common.edit")}
           </ha-button>
         </div>
-        <p aria-labelledby="comment-label">${this.comment}</p>
+        <p aria-labelledby="note-label">${this.note}</p>
       </ha-settings-row>
     `;
   }
 
   private _handleClick() {
-    fireEvent(this, "edit-comment");
+    fireEvent(this, "edit-note");
   }
 
   static styles = css`
@@ -70,10 +70,10 @@ export class HaAutomationComment extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-automation-comment": HaAutomationComment;
+    "ha-automation-note": HaAutomationNote;
   }
 
   interface HASSDomEvents {
-    "edit-comment": undefined;
+    "edit-note": undefined;
   }
 }

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

@@ -27,8 +27,6 @@ class HaConfigAutomation extends HassRouterPage {
 
   @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false }) public showAdvanced = false;
-
   @property({ attribute: false }) public cloudStatus?: CloudStatus;
 
   @property({ attribute: false }) public automations: AutomationEntity[] = [];
@@ -79,7 +77,6 @@ class HaConfigAutomation extends HassRouterPage {
     pageEl.narrow = this.narrow;
     pageEl.isWide = this.isWide;
     pageEl.route = this.routeTail;
-    pageEl.showAdvanced = this.showAdvanced;
     pageEl.cloudStatus = this.cloudStatus;
 
     if (this.hass) {

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

@@ -1,62 +0,0 @@
-import { mdiPound } from "@mdi/js";
-import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import "../../../components/ha-svg-icon";
-
-/**
- * Home Assistant trigger ID chip component
- *
- * @element ha-trigger-id-chip
- * @extends {LitElement}
- *
- * @summary
- * A small chip that displays an automation trigger ID prefixed with a hash icon.
- *
- * @slot start - Optional content rendered before the hash icon (usually an icon).
- *
- * @attr {string} trigger-id - The trigger ID to display.
- * @attr {boolean} warning - Renders the chip with warning colors.
- */
-@customElement("ha-trigger-id-chip")
-export class HaTriggerIdChip extends LitElement {
-  @property({ attribute: "trigger-id" }) public triggerId!: string;
-
-  @property({ type: Boolean, reflect: true }) public warning = false;
-
-  protected render() {
-    return html`
-      <slot name="start"></slot>
-      <ha-svg-icon .path=${mdiPound}></ha-svg-icon>
-      <span>${this.triggerId}</span>
-    `;
-  }
-
-  static styles = css`
-    :host {
-      background-color: var(--card-background-color);
-      border-radius: var(--ha-border-radius-sm);
-      border: var(--ha-border-width-sm) solid
-        var(--ha-color-border-neutral-normal);
-      --mdc-icon-size: 16px;
-      display: inline-flex;
-      gap: var(--ha-space-1);
-      align-items: center;
-      color: var(--ha-color-on-neutral-normal);
-      padding: 0 var(--ha-space-1);
-      font-weight: var(--ha-font-weight-medium);
-      line-height: 20px;
-      height: 20px;
-    }
-    :host([warning]) {
-      border-color: var(--ha-color-border-warning-normal);
-      color: var(--ha-color-on-warning-normal);
-      background-color: var(--ha-color-fill-warning-quiet-resting);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-trigger-id-chip": HaTriggerIdChip;
-  }
-}

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

@@ -32,11 +32,11 @@ import {
   normalizeAutomationConfig,
 } from "../../../data/automation";
 import { getActionType, type Action } from "../../../data/script";
+import { showEditorToast } from "./editor-toast";
 import "./action/ha-automation-action";
 import type HaAutomationAction from "./action/ha-automation-action";
 import "./condition/ha-automation-condition";
 import type HaAutomationCondition from "./condition/ha-automation-condition";
-import { showEditorToast } from "./editor-toast";
 import { ManualEditorMixin } from "./ha-manual-editor-mixin";
 import { showPasteReplaceDialog } from "./paste-replace-dialog/show-dialog-paste-replace";
 import { manualEditorStyles, saveFabStyles } from "./styles";

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

@@ -142,8 +142,8 @@ export default class HaAutomationOptionRow extends LitElement {
     `;
   }
   private _renderRow() {
-    const commentTooltipText = truncateWithEllipsis(
-      this.option?.comment?.trim() || "",
+    const noteTooltipText = truncateWithEllipsis(
+      this.option?.note?.trim() || "",
       250
     );
 
@@ -157,19 +157,17 @@ export default class HaAutomationOptionRow extends LitElement {
           : this.hass.localize(
               "ui.panel.config.automation.editor.actions.type.choose.default"
             )}
-        ${this.option?.comment?.trim()
+        ${this.option?.note?.trim()
           ? html`
               <ha-svg-icon
-                id="comment-icon"
+                id="note-icon"
                 .path=${mdiCommentTextOutline}
                 .label=${this.hass.localize(
-                  "ui.panel.config.automation.editor.comment.label"
+                  "ui.panel.config.automation.editor.note.label"
                 )}
-                class="comment-indicator"
+                class="note-indicator"
               ></ha-svg-icon>
-              <ha-tooltip for="comment-icon"
-                ><p>${commentTooltipText}</p></ha-tooltip
-              >
+              <ha-tooltip for="note-icon"><p>${noteTooltipText}</p></ha-tooltip>
             `
           : nothing}
       </h3>
@@ -199,14 +197,14 @@ export default class HaAutomationOptionRow extends LitElement {
                   )
                 )}
               </ha-dropdown-item>
-              <ha-dropdown-item value="edit_comment">
+              <ha-dropdown-item value="edit_note">
                 <ha-svg-icon
                   slot="icon"
                   .path=${mdiCommentEditOutline}
                 ></ha-svg-icon>
                 ${this._renderOverflowLabel(
                   this.hass.localize(
-                    `ui.panel.config.automation.editor.comment.${this.option?.comment ? "edit" : "add"}`
+                    `ui.panel.config.automation.editor.note.${this.option?.note ? "edit" : "add"}`
                   )
                 )}
               </ha-dropdown-item>
@@ -394,8 +392,8 @@ export default class HaAutomationOptionRow extends LitElement {
       case "rename":
         this._renameOption();
         break;
-      case "edit_comment":
-        this._editCommentOption();
+      case "edit_note":
+        this._editNoteOption();
         break;
       case "delete":
         this._removeOption();
@@ -460,28 +458,28 @@ export default class HaAutomationOptionRow extends LitElement {
     }
   };
 
-  private _editCommentOption = async (): Promise<void> => {
+  private _editNoteOption = async (): Promise<void> => {
     if (!this.option) {
       return;
     }
-    const comment = await showPromptDialog(this, {
+    const note = await showPromptDialog(this, {
       title: this.hass.localize(
-        `ui.panel.config.automation.editor.comment.${this.option.comment ? "edit" : "add"}`
+        `ui.panel.config.automation.editor.note.${this.option.note ? "edit" : "add"}`
       ),
       inputLabel: this.hass.localize(
-        "ui.panel.config.automation.editor.comment.label"
+        "ui.panel.config.automation.editor.note.label"
       ),
       inputType: "string",
-      defaultValue: this.option.comment,
+      defaultValue: this.option.note,
       confirmText: this.hass.localize("ui.common.submit"),
       multiline: true,
     });
-    if (comment !== null) {
+    if (note !== null) {
       const value: Option = { ...this.option };
-      if (comment === "") {
-        delete value.comment;
+      if (note === "") {
+        delete value.note;
       } else {
-        value.comment = comment;
+        value.note = note;
       }
       fireEvent(this, "value-changed", {
         value,
@@ -537,11 +535,11 @@ export default class HaAutomationOptionRow extends LitElement {
       rename: () => {
         this._renameOption();
       },
-      editComment: this._editCommentOption,
+      editNote: this._editNoteOption,
       delete: this._removeOption,
       duplicate: this._duplicateOption,
       defaultOption: !!this.defaultActions,
-      comment: sidebarOption?.comment,
+      note: sidebarOption?.note,
     } satisfies OptionSidebarConfig);
     this._selected = true;
     this._collapsed = false;

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

@@ -39,7 +39,7 @@ import { isMac } from "../../../../util/is_mac";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
 import { getAutomationActionType } from "../action/ha-automation-action-row";
 import { getRepeatType } from "../action/types/ha-automation-action-repeat";
-import "../ha-automation-comment";
+import "../ha-automation-note";
 import { overflowStyles, sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
 
@@ -177,11 +177,11 @@ export default class HaAutomationSidebarAction extends LitElement {
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
       </ha-dropdown-item>
-      <ha-dropdown-item slot="menu-items" value="edit_comment">
+      <ha-dropdown-item slot="menu-items" value="edit_note">
         <ha-svg-icon slot="icon" .path=${mdiCommentEditOutline}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
-            `ui.panel.config.automation.editor.comment.${this.config.config.action.comment ? "edit" : "add"}`
+            `ui.panel.config.automation.editor.note.${this.config.config.action.note ? "edit" : "add"}`
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
@@ -388,11 +388,11 @@ export default class HaAutomationSidebarAction extends LitElement {
               @ui-mode-not-available=${this._handleUiModeNotAvailable}
             ></ha-automation-action-editor>`
           )}
-      ${this.config.config.action.comment?.trim() && !this.yamlMode
-        ? html`<ha-automation-comment
-            @edit-comment=${this.config.editComment}
-            .comment=${this.config.config.action.comment}
-          ></ha-automation-comment>`
+      ${this.config.config.action.note?.trim() && !this.yamlMode
+        ? html`<ha-automation-note
+            @edit-note=${this.config.editNote}
+            .note=${this.config.config.action.note}
+          ></ha-automation-note>`
         : nothing}
     </ha-automation-sidebar-card>`;
   }
@@ -442,8 +442,8 @@ export default class HaAutomationSidebarAction extends LitElement {
       case "rename":
         this.config.rename();
         break;
-      case "edit_comment":
-        this.config.editComment();
+      case "edit_note":
+        this.config.editNote();
         break;
       case "run":
         this.config.run();

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

@@ -35,7 +35,7 @@ import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
 import "../condition/ha-automation-condition-editor";
 import type HaAutomationConditionEditor from "../condition/ha-automation-condition-editor";
-import "../ha-automation-comment";
+import "../ha-automation-note";
 import { overflowStyles, sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
 
@@ -153,13 +153,13 @@ export default class HaAutomationSidebarCondition extends LitElement {
       </ha-dropdown-item>
       <ha-dropdown-item
         slot="menu-items"
-        value="edit_comment"
+        value="edit_note"
         .disabled=${this.disabled}
       >
         <ha-svg-icon slot="icon" .path=${mdiCommentEditOutline}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
-            `ui.panel.config.automation.editor.comment.${this.config.config.comment ? "edit" : "add"}`
+            `ui.panel.config.automation.editor.note.${this.config.config.note ? "edit" : "add"}`
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
@@ -347,11 +347,11 @@ export default class HaAutomationSidebarCondition extends LitElement {
               sidebar
             ></ha-automation-condition-editor>`
           )}
-      ${this.config.config.comment?.trim() && !this.yamlMode
-        ? html`<ha-automation-comment
-            @edit-comment=${this.config.editComment}
-            .comment=${this.config.config.comment}
-          ></ha-automation-comment>`
+      ${this.config.config.note?.trim() && !this.yamlMode
+        ? html`<ha-automation-note
+            @edit-note=${this.config.editNote}
+            .note=${this.config.config.note}
+          ></ha-automation-note>`
         : nothing}
       <div class="testing-wrapper">
         <div
@@ -417,8 +417,8 @@ export default class HaAutomationSidebarCondition extends LitElement {
       case "rename":
         this.config.rename();
         break;
-      case "edit_comment":
-        this.config.editComment();
+      case "edit_note":
+        this.config.editNote();
         break;
       case "test":
         this.config.test();

src/panels/config/automation/sidebar/ha-automation-sidebar-option.ts

@@ -9,16 +9,16 @@ import {
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 
+import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 import "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-svg-icon";
 import type { OptionSidebarConfig } from "../../../../data/automation";
 import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
-import "../ha-automation-comment";
+import "../ha-automation-note";
 import { overflowStyles, sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
-import type { HaDropdownSelectEvent } from "../../../../components/ha-dropdown";
 
 @customElement("ha-automation-sidebar-option")
 export default class HaAutomationSidebarOption extends LitElement {
@@ -76,7 +76,7 @@ export default class HaAutomationSidebarOption extends LitElement {
             </ha-dropdown-item>
             <ha-dropdown-item
               slot="menu-items"
-              value="edit_comment"
+              value="edit_note"
               .disabled=${!!disabled}
             >
               <ha-svg-icon
@@ -85,7 +85,7 @@ export default class HaAutomationSidebarOption extends LitElement {
               ></ha-svg-icon>
               <div class="overflow-label">
                 ${this.hass.localize(
-                  `ui.panel.config.automation.editor.comment.${this.config.comment ? "edit" : "add"}`
+                  `ui.panel.config.automation.editor.note.${this.config.note ? "edit" : "add"}`
                 )}
                 <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
               </div>
@@ -144,11 +144,11 @@ export default class HaAutomationSidebarOption extends LitElement {
           `}
 
       <div class="description">${description}</div>
-      ${!this.config.defaultOption && this.config.comment?.trim()
-        ? html`<ha-automation-comment
-            @edit-comment=${this.config.editComment}
-            .comment=${this.config.comment}
-          ></ha-automation-comment>`
+      ${!this.config.defaultOption && this.config.note?.trim()
+        ? html`<ha-automation-note
+            @edit-note=${this.config.editNote}
+            .note=${this.config.note}
+          ></ha-automation-note>`
         : nothing}
     </ha-automation-sidebar-card>`;
   }
@@ -164,8 +164,8 @@ export default class HaAutomationSidebarOption extends LitElement {
       case "rename":
         this.config.rename();
         break;
-      case "edit_comment":
-        this.config.editComment();
+      case "edit_note":
+        this.config.editNote();
         break;
       case "duplicate":
         this.config.duplicate();

src/panels/config/automation/sidebar/ha-automation-sidebar-script-field.ts

@@ -16,7 +16,7 @@ import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
 import "../../script/ha-script-field-editor";
 import type HaAutomationConditionEditor from "../action/ha-automation-action-editor";
-import "../ha-automation-comment";
+import "../ha-automation-note";
 import { overflowStyles, sidebarEditorStyles } from "../styles";
 import "./ha-automation-sidebar-card";
 
@@ -68,11 +68,11 @@ export default class HaAutomationSidebarScriptField extends LitElement {
       @wa-select=${this._handleDropdownSelect}
     >
       <span slot="title">${title}</span>
-      <ha-dropdown-item slot="menu-items" value="edit_comment">
+      <ha-dropdown-item slot="menu-items" value="edit_note">
         <ha-svg-icon slot="icon" .path=${mdiCommentEditOutline}></ha-svg-icon>
         <div class="overflow-label">
           ${this.hass.localize(
-            `ui.panel.config.automation.editor.comment.${this.config.config.field.description ? "edit" : "add"}`
+            `ui.panel.config.automation.editor.note.${this.config.config.field.description ? "edit" : "add"}`
           )}
           <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
         </div>
@@ -137,10 +137,10 @@ export default class HaAutomationSidebarScriptField extends LitElement {
         ></ha-script-field-editor>`
       )}
       ${this.config.config.field.description?.trim() && !this.yamlMode
-        ? html`<ha-automation-comment
-            @edit-comment=${this.config.editComment}
-            .comment=${this.config.config.field.description}
-          ></ha-automation-comment>`
+        ? html`<ha-automation-note
+            @edit-note=${this.config.editNote}
+            .note=${this.config.config.field.description}
+          ></ha-automation-note>`
         : nothing}
     </ha-automation-sidebar-card>`;
   }
@@ -189,8 +189,8 @@ export default class HaAutomationSidebarScriptField extends LitElement {
       case "toggle_yaml_mode":
         this._toggleYamlMode();
         break;
-      case "edit_comment":
-        this.config.editComment();
+      case "edit_note":
+        this.config.editNote();
         break;
       case "delete":
         this.config.delete();

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

@@ -34,7 +34,7 @@ import {
 } from "../../../../data/trigger";
 import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
-import "../ha-automation-comment";
+import "../ha-automation-note";
 import { overflowStyles, sidebarEditorStyles } from "../styles";
 import "../trigger/ha-automation-trigger-editor";
 import type HaAutomationTriggerEditor from "../trigger/ha-automation-trigger-editor";
@@ -132,7 +132,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
         ${type !== "list"
           ? html`<ha-dropdown-item
               slot="menu-items"
-              value="edit_comment"
+              value="edit_note"
               .disabled=${this.disabled}
             >
               <ha-svg-icon
@@ -141,7 +141,7 @@ export default class HaAutomationSidebarTrigger extends LitElement {
               ></ha-svg-icon>
               <div class="overflow-label">
                 ${this.hass.localize(
-                  `ui.panel.config.automation.editor.comment.${(this.config.config as Exclude<Trigger, TriggerList>).comment ? "edit" : "add"}`
+                  `ui.panel.config.automation.editor.note.${(this.config.config as Exclude<Trigger, TriggerList>).note ? "edit" : "add"}`
                 )}
                 <span class="shortcut-placeholder ${isMac ? "mac" : ""}"></span>
               </div>
@@ -343,12 +343,12 @@ export default class HaAutomationSidebarTrigger extends LitElement {
           ></ha-automation-trigger-editor>`
         )}
         ${!isTriggerList(this.config.config) &&
-        this.config.config.comment?.trim() &&
+        this.config.config.note?.trim() &&
         !this.yamlMode
-          ? html`<ha-automation-comment
-              @edit-comment=${this.config.editComment}
-              .comment=${this.config.config.comment}
-            ></ha-automation-comment>`
+          ? html`<ha-automation-note
+              @edit-note=${this.config.editNote}
+              .note=${this.config.config.note}
+            ></ha-automation-note>`
           : nothing}
       </ha-automation-sidebar-card>
     `;
@@ -401,8 +401,8 @@ export default class HaAutomationSidebarTrigger extends LitElement {
       case "rename":
         this.config.rename();
         break;
-      case "edit_comment":
-        this.config.editComment();
+      case "edit_note":
+        this.config.editNote();
         break;
       case "show_id":
         this._showTriggerId();

src/panels/config/automation/structs.ts

@@ -4,7 +4,7 @@ export const baseTriggerStruct = object({
   trigger: string(),
   id: optional(string()),
   enabled: optional(boolean()),
-  comment: optional(string()),
+  note: optional(string()),
 });
 
 export const forDictStruct = object({

src/panels/config/automation/styles.ts

@@ -53,14 +53,14 @@ export const rowStyles = css`
     position: absolute;
   }
 
-  .comment-indicator {
+  .note-indicator {
     color: var(--ha-color-on-neutral-normal);
   }
-  .comment-indicator + ha-tooltip::part(body) {
+  .note-indicator + ha-tooltip::part(body) {
     cursor: default;
     max-width: 300px;
   }
-  .comment-indicator + ha-tooltip p {
+  .note-indicator + ha-tooltip p {
     white-space: pre-wrap;
     margin: 0;
   }

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

@@ -141,7 +141,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
     ev.stopPropagation();
     const value = {
       ...(this.trigger.alias ? { alias: this.trigger.alias } : {}),
-      ...(this.trigger.comment ? { comment: this.trigger.comment } : {}),
+      ...(this.trigger.note ? { note: this.trigger.note } : {}),
       ...ev.detail.value,
     };
     fireEvent(this, "value-changed", { value });

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

@@ -1,7 +1,6 @@
 import "@home-assistant/webawesome/dist/components/divider/divider";
 import { consume } from "@lit/context";
 import {
-  mdiAlert,
   mdiAppleKeyboardCommand,
   mdiArrowDown,
   mdiArrowUp,
@@ -29,7 +28,6 @@ import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../../../common/array/ensure-array";
 import { storage } from "../../../../common/decorators/storage";
-import { transform } from "../../../../common/decorators/transform";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { preventDefaultStopPropagation } from "../../../../common/dom/prevent_default_stop_propagation";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
@@ -50,21 +48,15 @@ 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 { TRIGGER_ICONS } from "../../../../components/ha-trigger-icon";
 import type {
   AutomationClipboard,
-  AutomationConfig,
   PlatformTrigger,
   Trigger,
   TriggerList,
   TriggerSidebarConfig,
 } from "../../../../data/automation";
-import {
-  automationConfigContext,
-  isTrigger,
-  subscribeTrigger,
-} from "../../../../data/automation";
+import { isTrigger, subscribeTrigger } from "../../../../data/automation";
 import { describeTrigger } from "../../../../data/automation_i18n";
 import { validateConfig } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
@@ -81,7 +73,6 @@ import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
 import { showEditorToast } from "../editor-toast";
 import "../ha-automation-editor-warning";
-import "../ha-trigger-id-chip";
 import { overflowStyles, rowStyles } from "../styles";
 import "../target/ha-automation-row-targets";
 import "./ha-automation-trigger-editor";
@@ -187,30 +178,6 @@ export default class HaAutomationTriggerRow extends LitElement {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg: EntityRegistryEntry[] = [];
 
-  @state()
-  @consume({ context: automationConfigContext, subscribe: true })
-  @transform<AutomationConfig, boolean>({
-    transformer: function (this: HaAutomationTriggerRow, value) {
-      if (
-        !this.trigger ||
-        isTriggerList(this.trigger) ||
-        !(this.trigger as Exclude<Trigger, TriggerList>).id
-      ) {
-        return false;
-      }
-      const triggerId = (this.trigger as Exclude<Trigger, TriggerList>).id;
-      // count how often this trigger id is used in the automation, if more than once, show warning
-      return (
-        ensureArray(value?.triggers || []).filter(
-          (trigger) =>
-            (trigger as Exclude<Trigger, TriggerList>).id === triggerId
-        ).length > 1
-      );
-    },
-    watch: ["trigger"],
-  })
-  private _duplicateTriggerId = false;
-
   get selected() {
     return this._selected;
   }
@@ -257,9 +224,9 @@ export default class HaAutomationTriggerRow extends LitElement {
             ?.target
         : undefined;
 
-    const commentTooltipText = truncateWithEllipsis(
+    const noteTooltipText = truncateWithEllipsis(
       (type !== "list" &&
-        (this.trigger as Exclude<Trigger, TriggerList>).comment?.trim()) ||
+        (this.trigger as Exclude<Trigger, TriggerList>).note?.trim()) ||
         "",
       250
     );
@@ -277,28 +244,6 @@ export default class HaAutomationTriggerRow extends LitElement {
             .trigger=${(this.trigger as Exclude<Trigger, TriggerList>).trigger}
           ></ha-trigger-icon>`}
       <h3 slot="header">
-        ${type !== "list" && (this.trigger as Exclude<Trigger, TriggerList>).id
-          ? html`<ha-trigger-id-chip
-                id="trigger-id-chip"
-                .warning=${this._duplicateTriggerId}
-                slot="leading-icon"
-                .triggerId=${(this.trigger as Exclude<Trigger, TriggerList>).id}
-              >
-                ${this._duplicateTriggerId
-                  ? html`<ha-svg-icon
-                      slot="start"
-                      .path=${mdiAlert}
-                    ></ha-svg-icon>`
-                  : nothing}
-              </ha-trigger-id-chip>
-              ${this._duplicateTriggerId
-                ? html`<ha-tooltip for="trigger-id-chip">
-                    ${this.hass.localize(
-                      "ui.panel.config.automation.editor.triggers.duplicate_id_warning"
-                    )}
-                  </ha-tooltip>`
-                : nothing} `
-          : nothing}
         ${describeTrigger(this.trigger, this.hass, this._entityReg)}
         ${target !== undefined || (descriptionHasTarget && !this._isNew)
           ? this._renderTargets(
@@ -308,19 +253,17 @@ export default class HaAutomationTriggerRow extends LitElement {
             )
           : nothing}
         ${type !== "list" &&
-        (this.trigger as Exclude<Trigger, TriggerList>).comment?.trim()
+        (this.trigger as Exclude<Trigger, TriggerList>).note?.trim()
           ? html`
               <ha-svg-icon
-                id="comment-icon"
+                id="note-icon"
                 .path=${mdiCommentTextOutline}
                 .label=${this.hass.localize(
-                  "ui.panel.config.automation.editor.comment.label"
+                  "ui.panel.config.automation.editor.note.label"
                 )}
-                class="comment-indicator"
+                class="note-indicator"
               ></ha-svg-icon>
-              <ha-tooltip for="comment-icon"
-                ><p>${commentTooltipText}</p></ha-tooltip
-              >
+              <ha-tooltip for="note-icon"><p>${noteTooltipText}</p></ha-tooltip>
             `
           : nothing}
       </h3>
@@ -364,14 +307,14 @@ export default class HaAutomationTriggerRow extends LitElement {
           )}
         </ha-dropdown-item>
         ${type !== "list"
-          ? html`<ha-dropdown-item value="edit_comment">
+          ? html`<ha-dropdown-item value="edit_note">
               <ha-svg-icon
                 slot="icon"
                 .path=${mdiCommentEditOutline}
               ></ha-svg-icon>
               ${this._renderOverflowLabel(
                 this.hass.localize(
-                  `ui.panel.config.automation.editor.comment.${(this.trigger as Exclude<Trigger, TriggerList>).comment ? "edit" : "add"}`
+                  `ui.panel.config.automation.editor.note.${(this.trigger as Exclude<Trigger, TriggerList>).note ? "edit" : "add"}`
                 )
               )}
             </ha-dropdown-item>`
@@ -752,7 +695,7 @@ export default class HaAutomationTriggerRow extends LitElement {
       rename: () => {
         this._renameTrigger();
       },
-      editComment: this._editCommentTrigger,
+      editNote: this._editNoteTrigger,
       toggleYamlMode: () => {
         this._toggleYamlMode();
         this.openSidebar();
@@ -896,27 +839,27 @@ export default class HaAutomationTriggerRow extends LitElement {
     }
   };
 
-  private _editCommentTrigger = async (): Promise<void> => {
+  private _editNoteTrigger = async (): Promise<void> => {
     if (isTriggerList(this.trigger)) return;
     const trigger = this.trigger;
-    const comment = await showPromptDialog(this, {
+    const note = await showPromptDialog(this, {
       title: this.hass.localize(
-        `ui.panel.config.automation.editor.comment.${trigger.comment ? "edit" : "add"}`
+        `ui.panel.config.automation.editor.note.${trigger.note ? "edit" : "add"}`
       ),
       inputLabel: this.hass.localize(
-        "ui.panel.config.automation.editor.comment.label"
+        "ui.panel.config.automation.editor.note.label"
       ),
       inputType: "string",
-      defaultValue: trigger.comment,
+      defaultValue: trigger.note,
       confirmText: this.hass.localize("ui.common.submit"),
       multiline: true,
     });
-    if (comment !== null) {
+    if (note !== null) {
       const value = { ...trigger };
-      if (comment === "") {
-        delete value.comment;
+      if (note === "") {
+        delete value.note;
       } else {
-        value.comment = comment;
+        value.note = note;
       }
       fireEvent(this, "value-changed", {
         value,
@@ -1041,8 +984,8 @@ export default class HaAutomationTriggerRow extends LitElement {
       case "rename":
         this._renameTrigger();
         break;
-      case "edit_comment":
-        this._editCommentTrigger();
+      case "edit_note":
+        this._editNoteTrigger();
         break;
       case "duplicate":
         this._duplicateTrigger();

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

@@ -8,7 +8,6 @@ import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import { ensureArray } from "../../../../common/array/ensure-array";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/ha-button";
@@ -22,20 +21,15 @@ import {
 } from "../../../../data/automation";
 import { subscribeLabFeature } from "../../../../data/labs";
 import type { TriggerDescriptions } from "../../../../data/trigger";
-import {
-  getNextNumericTriggerId,
-  getUniqueTriggerId,
-  isTriggerList,
-  subscribeTriggers,
-} from "../../../../data/trigger";
+import { isTriggerList, subscribeTriggers } from "../../../../data/trigger";
 import { SubscribeMixin } from "../../../../mixins/subscribe-mixin";
 import { EDITOR_SAVE_FAB_TOAST_BOTTOM_OFFSET } from "../editor-toast";
-import { AutomationSortableListMixin } from "../ha-automation-sortable-list-mixin";
 import {
   getAddAutomationElementTargetFromQuery,
   PASTE_VALUE,
   showAddAutomationElementDialog,
 } from "../show-add-automation-element-dialog";
+import { AutomationSortableListMixin } from "../ha-automation-sortable-list-mixin";
 import { automationRowsStyles } from "../styles";
 import "./ha-automation-trigger-row";
 import type HaAutomationTriggerRow from "./ha-automation-trigger-row";
@@ -73,53 +67,6 @@ export default class HaAutomationTrigger extends AutomationSortableListMixin<Tri
     this.highlightedTriggers = items;
   }
 
-  protected override pasteItem(ev: CustomEvent) {
-    if (this.root && ev.detail.item) {
-      const pasted = deepClone(ev.detail.item) as Trigger;
-      if (!isTriggerList(pasted)) {
-        pasted.id = pasted.id
-          ? getUniqueTriggerId(pasted.id, this.triggers)
-          : getNextNumericTriggerId(this.triggers);
-      }
-      ev.detail.item = pasted;
-    }
-    super.pasteItem(ev);
-  }
-
-  protected override insertAfter(ev: CustomEvent) {
-    // Only dedupe when a single trigger is being inserted.
-    const incoming = ensureArray(ev.detail.value) as Trigger[];
-    if (this.root && incoming.length === 1) {
-      const trigger = deepClone(incoming[0]);
-      if (!isTriggerList(trigger)) {
-        trigger.id = trigger.id
-          ? getUniqueTriggerId(trigger.id, this.triggers)
-          : getNextNumericTriggerId(this.triggers);
-      }
-      ev.detail.value = trigger;
-    }
-    super.insertAfter(ev);
-  }
-
-  protected override duplicateItem(ev: CustomEvent) {
-    if (this.root) {
-      const index = (ev.target as any).index;
-      const duplicated = deepClone(this.triggers[index]);
-      if (!isTriggerList(duplicated)) {
-        duplicated.id = duplicated.id
-          ? getUniqueTriggerId(duplicated.id, this.triggers)
-          : getNextNumericTriggerId(this.triggers);
-      }
-      fireEvent(this, "value-changed", {
-        // @ts-expect-error Requires library bump to ES2023
-        value: this.triggers.toSpliced(index + 1, 0, duplicated),
-      });
-      ev.stopPropagation();
-      return;
-    }
-    super.duplicateItem(ev);
-  }
-
   public disconnectedCallback() {
     super.disconnectedCallback();
     this._unsubscribe();
@@ -266,36 +213,23 @@ export default class HaAutomationTrigger extends AutomationSortableListMixin<Tri
   private _addTrigger = (value: string, target?: HassServiceTarget) => {
     let triggers: Trigger[];
     if (value === PASTE_VALUE) {
-      const pasted = deepClone(this._clipboard!.trigger!);
-      if (this.root && !isTriggerList(pasted)) {
-        pasted.id = pasted.id
-          ? getUniqueTriggerId(pasted.id, this.triggers)
-          : getNextNumericTriggerId(this.triggers);
-      }
-      triggers = this.triggers.concat(pasted);
+      triggers = this.triggers.concat(deepClone(this._clipboard!.trigger!));
+    } else if (isDynamic(value)) {
+      triggers = this.triggers.concat({
+        trigger: getValueFromDynamic(value),
+        target,
+      });
     } else {
-      let newTrigger: Trigger;
-      if (isDynamic(value)) {
-        newTrigger = {
-          trigger: getValueFromDynamic(value),
-          target,
-        };
-      } else {
-        const trigger = value as Exclude<Trigger, TriggerList>["trigger"];
-        const elClass = customElements.get(
-          `ha-automation-trigger-${trigger}`
-        ) as CustomElementConstructor & {
-          defaultConfig: Trigger;
-        };
-        newTrigger = {
-          ...elClass.defaultConfig,
-          ...(target?.entity_id ? { entity_id: target.entity_id } : {}),
-        };
-      }
-      if (this.root && !isTriggerList(newTrigger)) {
-        newTrigger.id = getNextNumericTriggerId(this.triggers);
-      }
-      triggers = this.triggers.concat(newTrigger);
+      const trigger = value as Exclude<Trigger, TriggerList>["trigger"];
+      const elClass = customElements.get(
+        `ha-automation-trigger-${trigger}`
+      ) as CustomElementConstructor & {
+        defaultConfig: Trigger;
+      };
+      triggers = this.triggers.concat({
+        ...elClass.defaultConfig,
+        ...(target?.entity_id ? { entity_id: target.entity_id } : {}),
+      });
     }
     this.focusLastItemOnChange = true;
     fireEvent(this, "value-changed", { value: triggers });

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

@@ -29,7 +29,7 @@ const DEFAULT_KEYS: (keyof PlatformTrigger)[] = [
   "trigger",
   "target",
   "alias",
-  "comment",
+  "note",
   "id",
   "variables",
   "enabled",

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

@@ -1,6 +1,6 @@
 import "@home-assistant/webawesome/dist/components/divider/divider";
-import { consume } from "@lit/context";
 import { mdiCog, mdiContentCopy } from "@mdi/js";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -13,10 +13,9 @@ import "../../../../../components/ha-dropdown-item";
 import "../../../../../components/ha-icon-button";
 import "../../../../../components/input/ha-input";
 import type { HaInput } from "../../../../../components/input/ha-input";
-import {
-  automationConfigContext,
-  type AutomationConfig,
-  type WebhookTrigger,
+import type {
+  AutomationConfig,
+  WebhookTrigger,
 } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import { showEditorToast } from "../../editor-toast";
@@ -34,9 +33,9 @@ export class HaWebhookTrigger extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @consume({ context: automationConfigContext, subscribe: true })
-  @state()
-  private _config?: AutomationConfig;
+  @state() private _config?: AutomationConfig;
+
+  private _unsub?: UnsubscribeFunc;
 
   public static get defaultConfig(): WebhookTrigger {
     return {
@@ -47,6 +46,24 @@ export class HaWebhookTrigger extends LitElement {
     };
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    const details = {
+      callback: (config) => {
+        this._config = config;
+      },
+    };
+    fireEvent(this, "subscribe-automation-config", details);
+    this._unsub = (details as any).unsub;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._unsub) {
+      this._unsub();
+    }
+  }
+
   private _generateWebhookId(): string {
     // The webhook_id should be treated like a password. Generate a default
     // value that would be hard for someone to guess. This generates a

src/panels/config/backup/components/config/ha-backup-config-schedule.ts

@@ -296,7 +296,7 @@ class HaBackupConfigSchedule extends LitElement {
           .retention=${data.retention}
           @value-changed=${this._retentionChanged}
         ></ha-backup-config-retention>
-        <ha-tip .hass=${this.hass}
+        <ha-tip
           >${this.hass.localize("ui.panel.config.backup.schedule.tip", {
             backup_create: html`<a
               href=${documentationUrl(

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -244,7 +244,6 @@ class HaBlueprintOverview extends LitElement {
               ></ha-svg-icon>`
             : html`
                 <ha-icon-overflow-menu
-                  .hass=${this.hass}
                   narrow
                   .items=${[
                     {

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

@@ -22,8 +22,6 @@ class HaConfigBlueprint extends HassRouterPage {
 
   @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false }) public showAdvanced = false;
-
   @property({ attribute: false })
   public blueprints: Record<string, Blueprints> = {};
 
@@ -61,7 +59,6 @@ class HaConfigBlueprint extends HassRouterPage {
     pageEl.narrow = this.narrow;
     pageEl.isWide = this.isWide;
     pageEl.route = this.routeTail;
-    pageEl.showAdvanced = this.showAdvanced;
     pageEl.blueprints = this.blueprints;
 
     if (

src/panels/config/cloud/account/cloud-account.ts

@@ -218,7 +218,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
               .cloudStatus=${this.cloudStatus}
             ></cloud-ice-servers-pref>
 
-            <ha-tip .hass=${this.hass}>
+            <ha-tip>
               <a href="/config/voice-assistants">
                 ${this.hass.localize(
                   "ui.panel.config.cloud.account.tip_moved_voice_assistants"

src/panels/config/cloud/account/dialog-cloud-tts-try.ts

@@ -167,14 +167,15 @@ export class DialogTryTts extends LitElement {
     }
     this._message = message;
 
-    if (this._target === "browser") {
+    const target = this._target || "browser";
+    if (target === "browser") {
       // We create the audio element here + do a play, because iOS requires it to be done by user action
       const audio = new Audio();
       audio.play();
       this._playBrowser(message, audio);
     } else {
       this.hass.callService("tts", "cloud_say", {
-        entity_id: this._target,
+        entity_id: target,
         message,
       });
     }

src/panels/config/core/ha-config-section-general.ts

@@ -211,7 +211,6 @@ class HaConfigSectionGeneral extends LitElement {
             <div class="unit-system-options">
               <ha-select-box
                 name="unit_system"
-                .hass=${this.hass}
                 .value=${this._unitSystem}
                 .disabled=${disabled}
                 @value-changed=${this._unitSystemChanged}

src/panels/config/core/ha-config-system-navigation.ts

@@ -42,8 +42,6 @@ class HaConfigSystemNavigation extends LitElement {
 
   @property({ attribute: false }) public cloudStatus?: CloudStatus;
 
-  @property({ attribute: false }) public showAdvanced = false;
-
   @state() private _latestBackupDate?: Date;
 
   @state() private _boardName?: string;

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

@@ -354,7 +354,7 @@ class HaConfigDashboard extends SubscribeMixin(LitElement) {
                   </ha-card>
                 `
           )}
-          <ha-tip .hass=${this.hass}>${this._tip}</ha-tip>
+          <ha-tip>${this._tip}</ha-tip>
         </ha-config-section>
       </ha-top-app-bar-fixed>
     `;

src/panels/config/developer-tools/ha-panel-developer-tools.ts

@@ -166,7 +166,7 @@ class PanelDeveloperTools extends LitElement {
           z-index: 4;
           background-color: var(--app-header-background-color);
           width: calc(
-            var(--mdc-top-app-bar-width, 100%) - var(
+            var(--ha-top-app-bar-width, 100%) - var(
                 --safe-area-inset-right,
                 0px
               )
@@ -179,7 +179,7 @@ class PanelDeveloperTools extends LitElement {
         }
         :host([narrow]) .header {
           width: calc(
-            var(--mdc-top-app-bar-width, 100%) - var(
+            var(--ha-top-app-bar-width, 100%) - var(
                 --safe-area-inset-left,
                 0px
               ) - var(--safe-area-inset-right, 0px)

src/panels/config/developer-tools/template/developer-tools-template.ts

@@ -180,7 +180,7 @@ class HaPanelDevTemplate extends LitElement {
               ${this.hass.localize("ui.common.clear")}
             </ha-button>
           </div>
-          <ha-tip .hass=${this.hass}>
+          <ha-tip>
             ${this.hass.localize(
               "ui.panel.config.developer-tools.tabs.templates.keyboard_tip",
               {

src/panels/config/developer-tools/yaml_configuration/developer-yaml-config.ts

@@ -35,8 +35,6 @@ export class DeveloperYamlConfig extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ attribute: false }) public showAdvanced = false;
-
   @state() private _validating = false;
 
   @state() private _reloadableDomains: TranslatedReloadableDomain[] = [];

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

@@ -188,8 +188,6 @@ export class HaConfigDevicePage extends LitElement {
 
   @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false }) public showAdvanced = false;
-
   @state() private _related?: RelatedResult;
 
   @state() private _diagnosticDownloadLinks: DeviceAction[] = [];

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

@@ -18,8 +18,6 @@ class HaConfigDevices extends HassRouterPage {
 
   @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false }) public showAdvanced = false;
-
   protected routerOptions: RouterOptions = {
     defaultPage: "dashboard",
     routes: {
@@ -53,7 +51,6 @@ class HaConfigDevices extends HassRouterPage {
     pageEl.manifests = this._manifests;
     pageEl.narrow = this.narrow;
     pageEl.isWide = this.isWide;
-    pageEl.showAdvanced = this.showAdvanced;
     pageEl.route = this.routeTail;
   }
 

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

@@ -68,8 +68,6 @@ class HaConfigEnergy extends LitElement {
 
   @property({ attribute: "is-wide", type: Boolean }) public isWide = false;
 
-  @property({ attribute: false }) public showAdvanced = false;
-
   @property({ attribute: false }) public route!: Route;
 
   @state() private _searchParms = new URLSearchParams(window.location.search);

src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts

@@ -39,11 +39,15 @@ export class EntitySettingsHelperTab extends LitElement {
 
   @state() private _submitting = false;
 
+  @state() private _dirty = false;
+
   @state() private _componentLoaded?: boolean;
 
   @query("entity-registry-settings-editor")
   private _registryEditor?: EntityRegistrySettingsEditor;
 
+  private _originalItemJson?: string;
+
   protected firstUpdated(changedProperties: PropertyValues<this>) {
     super.firstUpdated(changedProperties);
     this._componentLoaded = isComponentLoaded(
@@ -120,7 +124,9 @@ export class EntitySettingsHelperTab extends LitElement {
         </ha-button>
         <ha-button
           @click=${this._updateItem}
-          .disabled=${!!this._submitting || !!(this._item && !this._item.name)}
+          .disabled=${!this._dirty ||
+          !!this._submitting ||
+          !!(this._item && !this._item.name)}
         >
           ${this.hass.localize("ui.dialogs.entity_registry.editor.update")}
         </ha-button>
@@ -128,8 +134,18 @@ export class EntitySettingsHelperTab extends LitElement {
     `;
   }
 
+  private get _isHelperDirty(): boolean {
+    if (!this._item || !this._originalItemJson) return false;
+    return JSON.stringify(this._item) !== this._originalItemJson;
+  }
+
+  private _updateDirty() {
+    this._dirty = (this._registryEditor?.dirty ?? false) || this._isHelperDirty;
+  }
+
   private _entityRegistryChanged() {
     this._error = undefined;
+    this._updateDirty();
   }
 
   private _valueChanged(ev: CustomEvent): void {
@@ -138,11 +154,15 @@ export class EntitySettingsHelperTab extends LitElement {
     }
     this._error = undefined;
     this._item = ev.detail.value;
+    this._updateDirty();
   }
 
   private async _getItem() {
     const items = await HELPERS_CRUD[this.entry.platform].fetch(this.hass!);
     this._item = items.find((item) => item.id === this.entry.unique_id) || null;
+    this._originalItemJson = this._item
+      ? JSON.stringify(this._item)
+      : undefined;
   }
 
   private async _updateItem(): Promise<void> {