Use checkStrategyShouldRegenerate in views, sections, and panels

Replace hardcoded registry checks with checkStrategyShouldRegenerate in hui-view, hui-section, ha-panel-lovelace, and ha-panel-home. Regeneration checks are also extended to sections (previously only dashboards and views were checked). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Add registryDependencies to all built-in strategies
2026-05-30 04:51:35 +00:00 · 2026-05-23 15:12:38 +02:00 · 2026-05-23 15:12:38 +02:00 · 2026-05-23 15:12:38 +02:00 · 2026-05-23 15:12:38 +02:00
211 changed files with 3257 additions and 4585 deletions
@@ -41,14 +41,14 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
+        uses: github/codeql-action/init@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4
        with:
          languages: ${{ matrix.language }}

      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
+        uses: github/codeql-action/autobuild@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 https://git.io/JvXDl
@@ -62,4 +62,4 @@ jobs:
      #   make release

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
+        uses: github/codeql-action/analyze@68bde559dea0fdcac2102bfdf6230c5f70eb485e # v4.35.4
@@ -13,4 +13,4 @@ nodeLinker: node-modules

 npmMinimalAgeGate: 3d

-yarnPath: .yarn/releases/yarn-4.15.0.cjs
+yarnPath: .yarn/releases/yarn-4.14.1.cjs
@@ -1,3 +1,4 @@
+import "@material/mwc-top-app-bar-fixed";
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import "../../src/components/ha-icon-button";
@@ -1,3 +1,4 @@
+import "@material/mwc-top-app-bar-fixed";
 import { mdiMenu, mdiSwapHorizontal } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html } from "lit";
@@ -10,7 +11,6 @@ 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">
-          <ha-top-app-bar-fixed>
+          <mwc-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>
-          </ha-top-app-bar-fixed>
+          </mwc-top-app-bar-fixed>
          <div class="content">
            ${PAGES[this._page].description
              ? html`
@@ -227,12 +227,11 @@ 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 - var(--header-height));
+        max-height: calc(100vh - 64px);
        overflow-y: auto;
        padding: 4px;
      }
@@ -244,7 +243,7 @@ class HaGallery extends LitElement {
        display: flex;
        font-size: var(--ha-font-size-l);
        font-weight: var(--ha-font-weight-medium);
-        min-height: var(--header-height);
+        min-height: 64px;
        padding: 0 16px;
      }

@@ -278,10 +277,6 @@ 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;
      }
@@ -1,12 +1,10 @@
-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 "../../../../src/components/ha-card";
+import type { TemplateResult, PropertyValues } from "lit";
+import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-tip";
-import { internationalizationContext } from "../../../../src/data/context";
-import type { HomeAssistantInternationalization } from "../../../../src/types";
+import "../../../../src/components/ha-card";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import { provideHass } from "../../../../src/fake_data/provide_hass";

 const tips: (string | TemplateResult)[] = [
  "Test tip",
@@ -16,25 +14,16 @@ 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>${tip}</ha-tip>`)}
+              ${tips.map(
+                (tip) =>
+                  html`<ha-tip .hass=${provideHass(this)}>${tip}</ha-tip>`
+              )}
            </div>
          </ha-card>
        </div>
@@ -38,7 +38,7 @@
    "@codemirror/search": "6.7.0",
    "@codemirror/state": "6.6.0",
    "@codemirror/view": "6.43.0",
-    "@date-fns/tz": "1.5.0",
+    "@date-fns/tz": "1.4.1",
    "@egjs/hammerjs": "2.0.17",
    "@formatjs/intl-datetimeformat": "7.4.6",
    "@formatjs/intl-displaynames": "7.3.8",
@@ -65,14 +65,17 @@
    "@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",
    "@replit/codemirror-indentation-markers": "6.5.3",
    "@swc/helpers": "0.5.21",
    "@thomasloven/round-slider": "0.6.0",
-    "@tsparticles/engine": "4.0.5",
-    "@tsparticles/preset-links": "4.0.5",
+    "@tsparticles/engine": "4.0.4",
+    "@tsparticles/preset-links": "4.0.4",
    "@vibrant/color": "4.0.4",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
    "@webcomponents/webcomponentsjs": "2.8.0",
@@ -83,19 +86,19 @@
    "core-js": "3.49.0",
    "cropperjs": "1.6.2",
    "culori": "4.0.2",
-    "date-fns": "4.3.0",
+    "date-fns": "4.2.1",
    "deep-clone-simple": "1.1.1",
    "deep-freeze": "0.0.1",
    "dialog-polyfill": "0.5.6",
-    "echarts": "6.1.0",
+    "echarts": "6.0.0",
    "element-internals-polyfill": "3.0.2",
    "fuse.js": "7.3.0",
    "google-timezones-json": "1.2.0",
    "gulp-zopfli-green": "7.0.0",
    "hls.js": "1.6.16",
    "home-assistant-js-websocket": "9.6.0",
-    "idb-keyval": "6.2.4",
-    "intl-messageformat": "11.2.7",
+    "idb-keyval": "6.2.2",
+    "intl-messageformat": "11.2.6",
    "js-yaml": "4.1.1",
    "leaflet": "1.9.4",
    "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -115,7 +118,7 @@
    "sortablejs": "patch:sortablejs@npm%3A1.15.6#~/.yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch",
    "stacktrace-js": "2.0.2",
    "superstruct": "2.0.2",
-    "tinykeys": "4.0.0",
+    "tinykeys": "3.0.0",
    "weekstart": "2.0.0",
    "workbox-cacheable-response": "7.4.1",
    "workbox-core": "7.4.1",
@@ -132,13 +135,13 @@
    "@babel/preset-env": "7.29.5",
    "@bundle-stats/plugin-webpack-filter": "4.22.1",
    "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.61.0",
+    "@html-eslint/eslint-plugin": "0.60.0",
    "@lokalise/node-api": "16.0.0",
    "@octokit/auth-oauth-device": "8.0.3",
    "@octokit/plugin-retry": "8.1.0",
    "@octokit/rest": "22.0.1",
    "@rsdoctor/rspack-plugin": "1.5.11",
-    "@rspack/core": "2.0.4",
+    "@rspack/core": "2.0.3",
    "@rspack/dev-server": "2.0.1",
    "@types/babel__plugin-transform-runtime": "7.9.5",
    "@types/chromecast-caf-receiver": "6.0.26",
@@ -157,7 +160,7 @@
    "@types/sortablejs": "1.15.9",
    "@types/tar": "7.0.87",
    "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.1.7",
+    "@vitest/coverage-v8": "4.1.6",
    "babel-loader": "10.1.1",
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.4",
@@ -172,7 +175,7 @@
    "eslint-plugin-wc": "3.1.0",
    "fancy-log": "2.0.0",
    "fs-extra": "11.3.5",
-    "generate-license-file": "4.2.1",
+    "generate-license-file": "4.1.1",
    "glob": "13.0.6",
    "globals": "17.6.0",
    "gulp": "5.0.1",
@@ -200,7 +203,7 @@
    "typescript": "6.0.3",
    "typescript-eslint": "8.59.4",
    "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.1.7",
+    "vitest": "4.1.6",
    "webpack-stats-plugin": "1.1.3",
    "webpackbar": "7.0.0",
    "workbox-build": "patch:workbox-build@npm%3A7.4.1#~/.yarn/patches/workbox-build-npm-7.4.1-c84561662c.patch"
@@ -216,7 +219,7 @@
    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
    "glob@^10.2.2": "^10.5.0"
  },
-  "packageManager": "yarn@4.15.0",
+  "packageManager": "yarn@4.14.1",
  "volta": {
    "node": "24.16.0"
  }
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20260527.0"
+version      = "20260429.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -1,16 +1,8 @@
 import { consume } from "@lit/context";
 import type { HassEntities, HassEntity } from "home-assistant-js-websocket";
-import type {
-  HomeAssistant,
-  HomeAssistantInternationalization,
-} from "../../types";
-import {
-  entitiesContext,
-  internationalizationContext,
-  statesContext,
-} from "../../data/context";
+import type { HomeAssistant } from "../../types";
+import { entitiesContext, statesContext } from "../../data/context";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
-import type { LocalizeFunc } from "../translations/localize";
 import { transform } from "./transform";

 interface ConsumeEntryConfig {
@@ -99,15 +91,3 @@ 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
-  );
@@ -1,6 +1,5 @@
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../ha-tooltip";

 export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";

@@ -13,7 +12,6 @@ export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
 *
 * @attr {"pass"|"fail"|"invalid"|"unknown"} state - The current live-test state. Defaults to `unknown`.
 * @attr {string} label - Accessible label announced by assistive technology.
- * @attr {string} message - Optional tooltip body shown on hover/focus.
 */
@customElement("ha-automation-row-live-test")
 export class HaAutomationRowLiveTest extends LitElement {
@@ -21,8 +19,6 @@ export class HaAutomationRowLiveTest extends LitElement {

  @property() public label = "";

-  @property() public message?: string;
-
  protected render() {
    return html`
      <div
@@ -31,9 +27,6 @@ export class HaAutomationRowLiveTest extends LitElement {
        tabindex="0"
        aria-label=${this.label}
      ></div>
-      ${this.message
-        ? html`<ha-tooltip for="indicator">${this.message}</ha-tooltip>`
-        : nothing}
    `;
  }

@@ -128,9 +128,7 @@ export class HaAutomationRow extends LitElement {
    }
    .row {
      display: flex;
-      padding-left: var(--ha-space-3);
-      padding-inline-start: var(--ha-space-3);
-      padding-inline-end: initial;
+      padding: 0 0 0 var(--ha-space-3);
      min-height: 48px;
      align-items: flex-start;
      cursor: pointer;
@@ -146,8 +144,6 @@ export class HaAutomationRow extends LitElement {
      transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
      color: var(--ha-color-on-neutral-quiet);
      margin-left: calc(var(--ha-space-2) * -1);
-      margin-inline-start: calc(var(--ha-space-2) * -1);
-      margin-inline-end: initial;
    }
    :host([building-block]) .leading-icon-wrapper {
      background-color: var(--ha-color-fill-neutral-loud-resting);
@@ -956,11 +956,29 @@ 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
@@ -1,14 +1,13 @@
 import { mdiDragHorizontalVariant, mdiEye, mdiEyeOff } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, state } from "lit/decorators";
+import { customElement, property, 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";
@@ -25,9 +24,7 @@ import type { DataTableSettingsDialogParams } from "./show-dialog-data-table-set

@customElement("dialog-data-table-settings")
 export class DialogDataTableSettings extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _params?: DataTableSettingsDialogParams;

@@ -120,7 +117,7 @@ export class DialogDataTableSettings extends LitElement {
      return nothing;
    }

-    const localize = this._params.localizeFunc || this._localize;
+    const localize = this._params.localizeFunc || this.hass.localize;

    const columns = this._sortedColumns(
      this._params.columns,
@@ -175,7 +172,7 @@ export class DialogDataTableSettings extends LitElement {
                    .hidden=${!isVisible}
                    .path=${isVisible ? mdiEye : mdiEyeOff}
                    slot="meta"
-                    .label=${localize(
+                    .label=${this.hass!.localize(
                      `ui.components.data-table.settings.${isVisible ? "hide" : "show"}`,
                      { title: typeof col.title === "string" ? col.title : "" }
                    )}
@@ -6,9 +6,8 @@ import {
  mdiInformationOutline,
 } from "@mdi/js";
 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 { 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";
@@ -40,9 +39,7 @@ class HaAlert extends LitElement {

  @property({ type: Boolean }) public dismissable = false;

-  @state()
-  @consumeLocalize()
-  private _localize?: LocalizeFunc;
+  @property({ attribute: false }) public localize?: LocalizeFunc;

  @property({ type: Boolean }) public narrow = false;

@@ -71,7 +68,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}
@@ -61,6 +61,7 @@ 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}
@@ -107,6 +107,7 @@ 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}
@@ -294,7 +294,6 @@ export class HaDrawer extends LitElement {
      border-inline-end: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
      box-sizing: border-box;
      transition: width var(--ha-animation-duration-normal) ease;
-      z-index: 6;
    }

    .app-content {
@@ -54,6 +54,7 @@ export class HaEntitiesDisplayEditor extends LitElement {

    return html`
      <ha-items-display-editor
+        .hass=${this.hass}
        .items=${items}
        .value=${value}
        @value-changed=${this._itemDisplayChanged}
@@ -109,8 +109,6 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
  @property({ attribute: "custom-value-label" })
  public customValueLabel?: string;

-  @property({ type: Boolean, attribute: "no-sort" }) public noSort = false;
-
  @query(".container") private _containerElement?: HTMLDivElement;

  @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
@@ -273,7 +271,6 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
        .selectedSection=${this.selectedSection}
        .searchKeys=${this.searchKeys}
        .customValueLabel=${this.customValueLabel}
-        .noSort=${this.noSort}
      ></ha-picker-combo-box>
    `;
  }
@@ -1,77 +1,59 @@
-import { css, html, LitElement } from "lit";
+// @ts-ignore
+import topAppBarStyles from "@material/top-app-bar/dist/mdc.top-app-bar.min.css";
+import { css, html, LitElement, unsafeCSS } from "lit";
 import { customElement } from "lit/decorators";

@customElement("ha-header-bar")
 export class HaHeaderBar extends LitElement {
  protected render() {
-    return html`<header class="header-bar">
-      <div class="row">
-        <section class="section" id="navigation">
+    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"
+        >
          <slot name="navigationIcon"></slot>
-          <span class="title">
+          <span class="mdc-top-app-bar__title">
            <slot name="title"></slot>
          </span>
        </section>
-        <section class="section end" id="actions" role="toolbar">
+        <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>`;
  }

-  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);
-    }
-  `;
+  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;
+        }
+      `,
+    ];
+  }
 }

 declare global {
@@ -2,11 +2,10 @@ 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, state } from "lit/decorators";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
+import { customElement, property } from "lit/decorators";
 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";
@@ -27,9 +26,7 @@ export interface IconOverflowMenuItem {

@customElement("ha-icon-overflow-menu")
 export class HaIconOverflowMenu extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ type: Array }) public items: IconOverflowMenuItem[] = [];

@@ -47,7 +44,7 @@ export class HaIconOverflowMenu extends LitElement {
              @click=${stopPropagation}
            >
              <ha-icon-button
-                .label=${this._localize("ui.common.overflow_menu")}
+                .label=${this.hass.localize("ui.common.overflow_menu")}
                .path=${mdiDotsVertical}
                slot="trigger"
              ></ha-icon-button>
@@ -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: var(--ha-font-size-s);
+      font-size: 0.75rem;
      padding-left: 16px;
      padding-right: 16px;
      padding-inline-start: 16px;
@@ -8,11 +8,10 @@ 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 { LocalizeFunc } from "../common/translations/localize";
+import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-icon-button";
 import "./ha-icon-next";
@@ -47,9 +46,7 @@ declare global {

@customElement("ha-items-display-editor")
 export class HaItemDisplayEditor extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public items: DisplayItem[] = [];

@@ -164,7 +161,7 @@ export class HaItemDisplayEditor extends LitElement {
                    ? html`<ha-icon-button
                        .path=${isVisible ? mdiEye : mdiEyeOff}
                        slot="end"
-                        .label=${this._localize(
+                        .label=${this.hass.localize(
                          `ui.components.items-display-editor.${isVisible ? "hide" : "show"}`,
                          {
                            label: label,
@@ -167,8 +167,6 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {

  @property({ type: Boolean, reflect: true }) public clearable = false;

-  @property({ type: Boolean, attribute: "no-sort" }) public noSort = false;
-
  @query("lit-virtualizer") public virtualizerElement?: LitVirtualizer;

  @query("ha-input-search") private _searchFieldElement?: HaInputSearch;
@@ -344,7 +342,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
  private _getItems = () => {
    let items = [...(this.getItems(this._search, this._selectedSection) || [])];

-    if (!this.sections?.length && !this.noSort) {
+    if (!this.sections?.length) {
      items = items.sort((entityA, entityB) => {
        const sortLabelA =
          typeof entityA === "string" ? entityA : entityA.sorting_label;
@@ -1,12 +1,11 @@
-import { consume, type ContextType } from "@lit/context";
 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 { 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 { internationalizationContext, uiContext } from "../data/context";
+import type { HomeAssistant } from "../types";
 import "./radio/ha-radio-group";
 import type { HaRadioGroup } from "./radio/ha-radio-group";
 import "./radio/ha-radio-option";
@@ -27,6 +26,8 @@ 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;
@@ -39,14 +40,6 @@ 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);
@@ -69,11 +62,11 @@ export class HaSelectBox extends LitElement {
    const disabled = option.disabled || this.disabled || false;
    const selected = option.value === this.value;

-    const isDark = this._ui?.themes.darkMode || false;
-    const isRTL = this._i18n
+    const isDark = this.hass?.themes.darkMode || false;
+    const isRTL = this.hass
      ? computeRTL(
-          this._i18n.language,
-          this._i18n.translationMetadata.translations
+          this.hass.language,
+          this.hass.translationMetadata.translations
        )
      : false;

@@ -1,31 +1,30 @@
 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 {
-  LocalizeFunc,
-  LocalizeKeys,
-} from "../../common/translations/localize";
+import type { 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 "../ha-select-box";
 import type { SelectBoxOption } from "../ha-select-box";
+import "../ha-select-box";

 const TRIGGER_BEHAVIORS: AutomationBehaviorTriggerMode[] = [
-  "each",
+  "any",
  "first",
-  "all",
+  "last",
 ];

 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;

@@ -40,9 +39,6 @@ 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";
@@ -64,6 +60,7 @@ export class HaSelectorAutomationBehavior extends LitElement {

    return html`
      <ha-select-box
+        .hass=${this.hass}
        .options=${options}
        .value=${this.value ?? ""}
        max_columns="1"
@@ -98,10 +95,8 @@ export class HaSelectorAutomationBehavior extends LitElement {
        return translated;
      }
    }
-    return (
-      this._localize?.(
-        `ui.components.selectors.automation_behavior.${mode ?? "trigger"}.options.${behavior}.${field}` as LocalizeKeys
-      ) || behavior
+    return this.hass.localize(
+      `ui.components.selectors.automation_behavior.${mode ?? "trigger"}.options.${behavior}.${field}` as LocalizeKeys
    );
  }

@@ -1,10 +1,11 @@
 import { mdiPlayBox, mdiPlus } from "@mdi/js";
 import type { PropertyValues } from "lit";
 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 { 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,
@@ -12,10 +13,14 @@ 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";
@@ -49,6 +54,8 @@ export class HaMediaSelector extends LitElement {
    filter_entity?: string | string[];
  };

+  @state() private _thumbnailUrl?: string | null;
+
  private _contextEntities: string[] | undefined;

  private get _hasAccept(): boolean {
@@ -61,6 +68,35 @@ 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() {
@@ -150,12 +186,10 @@ export class HaMediaSelector extends LitElement {
                              ),
                          })}
                          image"
-                        >
-                          <ha-media-browser-thumbnail
-                            .hass=${this.hass}
-                            .url=${this.value.metadata.thumbnail}
-                          ></ha-media-browser-thumbnail>
-                        </div>
+                          style=${this._thumbnailUrl
+                            ? `background-image: url(${this._thumbnailUrl});`
+                            : ""}
+                        ></div>
                      `
                    : html`
                        <div class="icon-holder image">
@@ -376,11 +410,13 @@ export class HaMediaSelector extends LitElement {
      right: 0;
      left: 0;
      bottom: 0;
-      --ha-media-browser-thumbnail-fit: cover;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
    }
    .centered-image {
      margin: 4px;
-      --ha-media-browser-thumbnail-fit: contain;
+      background-size: contain;
    }
    .icon-holder {
      display: flex;
@@ -96,6 +96,7 @@ 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()}
      `;
@@ -198,7 +199,6 @@ export class HaSelectSelector extends LitElement {
          : nothing}

        <ha-generic-picker
-          no-sort
          .hass=${this.hass}
          .helper=${this.helper}
          .disabled=${this.disabled}
@@ -215,7 +215,6 @@ export class HaSelectSelector extends LitElement {
    if (this.selector.select?.custom_value) {
      return html`
        <ha-generic-picker
-          no-sort
          .hass=${this.hass}
          .label=${this.label}
          .helper=${this.helper}
@@ -1,25 +1,24 @@
 import { mdiLightbulbOutline } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, state } from "lit/decorators";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";
+import { customElement, property } from "lit/decorators";
+import type { HomeAssistant } from "../types";

 import "./ha-svg-icon";

@customElement("ha-tip")
 class HaTip extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  public render() {
-    if (!this._localize) {
+    if (!this.hass) {
      return nothing;
    }

    return html`
      <ha-svg-icon .path=${mdiLightbulbOutline}></ha-svg-icon>
-      <span class="prefix">${this._localize("ui.panel.config.tips.tip")}</span>
+      <span class="prefix"
+        >${this.hass.localize("ui.panel.config.tips.tip")}</span
+      >
      <span class="text"><slot></slot></span>
    `;
  }
@@ -1,230 +1,64 @@
-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);
-  }
-`;
+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";

@customElement("ha-top-app-bar-fixed")
-export class HaTopAppBarFixed extends LitElement {
+export class HaTopAppBarFixed extends TopAppBarFixedBase {
  @property({ type: Boolean, reflect: true }) public narrow = false;

-  @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;
+  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);
+      }
+    `,
+  ];
 }

 declare global {
@@ -0,0 +1,37 @@
+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;
+  }
+}
@@ -1,37 +1,136 @@
+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";

-const PASSIVE_EVENT_OPTIONS = { passive: true } as const;
+export const passiveEventOptionsIfSupported = supportsPassiveEventListener
+  ? { passive: true }
+  : undefined;

@customElement("ha-two-pane-top-app-bar-fixed")
-export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
+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;
+
  @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;

-  protected override _isPaneHeader(): boolean {
-    return this.pane;
+  @property({ attribute: false })
+  get scrollTarget() {
+    return this._scrollTarget || window;
  }

-  protected override _renderContent() {
+  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>`;
    return html`
-      <div
-        class=${classMap({
-          "top-app-bar-fixed-adjust": true,
-          "top-app-bar-fixed-adjust--pane": this.pane,
-        })}
-      >
+      <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())}>
        ${this.pane
          ? html`<div class="pane">
              <div class="shadow-container"></div>
@@ -55,57 +154,117 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
    `;
  }

-  protected override willUpdate(changedProperties: PropertyValues<this>) {
-    super.willUpdate(changedProperties);
-    if (changedProperties.has("pane") && this.hasUpdated) {
-      this._unregisterListeners();
-    }
-  }
-
-  protected override updated(changedProperties: PropertyValues<this>) {
+  protected updated(changedProperties: PropertyValues<this>) {
    super.updated(changedProperties);
    if (
      changedProperties.has("pane") &&
      changedProperties.get("pane") !== undefined
    ) {
-      this._registerListeners();
-      this._syncScrollState();
+      this.unregisterListeners();
+      this.registerListeners();
    }
  }

-  private _handlePaneScroll = (ev: Event) => {
-    const target = ev.currentTarget as HTMLElement;
-    target.parentElement?.classList.toggle("scrolled", target.scrollTop > 0);
+  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();
  };

-  protected override _registerListeners() {
+  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() {
    if (this.pane) {
-      this._paneElement?.addEventListener(
+      this._paneElement!.addEventListener(
        "scroll",
-        this._handlePaneScroll,
-        PASSIVE_EVENT_OPTIONS
+        this.handlePaneScroll,
+        passiveEventOptionsIfSupported
      );
-      this._contentElement?.addEventListener(
+      this._contentElement.addEventListener(
        "scroll",
-        this._handlePaneScroll,
-        PASSIVE_EVENT_OPTIONS
+        this.handlePaneScroll,
+        passiveEventOptionsIfSupported
      );
      return;
    }
-
-    super._registerListeners();
+    this.scrollTarget.addEventListener(
+      "scroll",
+      this.handleTargetScroll,
+      passiveEventOptionsIfSupported
+    );
  }

-  protected override _unregisterListeners() {
-    this._paneElement?.removeEventListener("scroll", this._handlePaneScroll);
-    this._contentElement?.removeEventListener("scroll", this._handlePaneScroll);
-    super._unregisterListeners();
+  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();
  }

  static override styles = [
-    haTopAppBarFixedStyles,
+    styles,
    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));
@@ -114,11 +273,39 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
        z-index: 1;
        transition: box-shadow 200ms linear;
      }
-
      .scrolled .shadow-container {
-        box-shadow: var(--ha-box-shadow-m);
+        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;
      }
-
      #title {
        border-right: 1px solid rgba(255, 255, 255, 0.12);
        border-inline-end: 1px solid rgba(255, 255, 255, 0.12);
@@ -127,8 +314,7 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
        flex: 0 0 var(--sidepane-width, 250px);
        width: var(--sidepane-width, 250px);
      }
-
-      .top-app-bar-fixed-adjust--pane {
+      div.mdc-top-app-bar--pane {
        display: flex;
        height: calc(
          100vh - var(--header-height, 0px) - var(
@@ -137,7 +323,6 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
            ) - var(--safe-area-inset-bottom, 0px)
        );
      }
-
      .pane {
        border-right: 1px solid var(--divider-color);
        border-inline-end: 1px solid var(--divider-color);
@@ -149,36 +334,36 @@ export class HaTwoPaneTopAppBarFixed extends HaTopAppBarFixed {
        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%;
      }
-
-      .top-app-bar-fixed-adjust--pane .main {
+      .mdc-top-app-bar--pane .main {
        position: relative;
        flex: 1;
        height: 100%;
      }
-
-      .top-app-bar-fixed-adjust--pane .content {
+      .mdc-top-app-bar--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": HaTwoPaneTopAppBarFixed;
+    "ha-two-pane-top-app-bar-fixed": TopAppBarBaseBase;
  }
 }
@@ -1,8 +1,8 @@
 import { type LitElement, css } from "lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { nativeElementInternalsSupported } from "../../common/feature-detect/support-native-element-internals";
 import type { Constructor } from "../../types";
+import { nativeElementInternalsSupported } from "../../common/feature-detect/support-native-element-internals";

 /**
 * 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-s);
+    font-size: var(--ha-font-size-xs);
    display: flex;
    align-items: center;
    color: var(--ha-color-text-secondary);
@@ -227,7 +227,7 @@ class DialogMediaManage extends LitElement {
                </ha-list>
              `}
        ${isComponentLoaded(this.hass.config, "hassio")
-          ? html`<ha-tip>
+          ? html`<ha-tip .hass=${this.hass}>
              ${this.hass.localize(
                "ui.components.media-browser.file_management.tip_media_storage",
                {
@@ -1,147 +0,0 @@
-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;
-  }
-}
@@ -13,6 +13,7 @@ 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";
@@ -38,6 +39,11 @@ 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";
@@ -46,7 +52,6 @@ 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";
@@ -406,6 +411,12 @@ 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
@@ -420,11 +431,13 @@ export class HaMediaPlayerBrowse extends LitElement {
                        <div class="header-content">
                          ${currentItem.thumbnail
                            ? html`
-                                <div class="img">
-                                  <ha-media-browser-thumbnail
-                                    .hass=${this.hass}
-                                    .url=${currentItem.thumbnail}
-                                  ></ha-media-browser-thumbnail>
+                                <div
+                                  class="img"
+                                  style="background-image: ${until(
+                                    backgroundImage,
+                                    ""
+                                  )}"
+                                >
                                  ${this.narrow &&
                                  currentItem?.can_play &&
                                  (!this.accept ||
@@ -625,6 +638,12 @@ 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>
@@ -636,13 +655,10 @@ export class HaMediaPlayerBrowse extends LitElement {
                      "centered-image": ["app", "directory"].includes(
                        child.media_class
                      ),
+                      "brand-image": isBrandUrl(child.thumbnail),
                    })} image"
-                  >
-                    <ha-media-browser-thumbnail
-                      .hass=${this.hass}
-                      .url=${child.thumbnail}
-                    ></ha-media-browser-thumbnail>
-                  </div>
+                    style="background-image: ${until(backgroundImage, "")}"
+                  ></div>
                `
              : html`
                  <div class="icon-holder image">
@@ -687,7 +703,13 @@ export class HaMediaPlayerBrowse extends LitElement {
  private _renderListItem = (child: MediaPlayerItem): TemplateResult => {
    const currentItem = this._currentItem;
    const mediaClass = MediaClassBrowserSettings[currentItem!.media_class];
-    const showImage = mediaClass.show_list_images && !!child.thumbnail;
+
+    const backgroundImage =
+      mediaClass.show_list_images && child.thumbnail
+        ? this._getThumbnailURLorBase64(child.thumbnail).then(
+            (value) => `url(${value})`
+          )
+        : "none";

    return html`
      <ha-list-item
@@ -695,7 +717,7 @@ export class HaMediaPlayerBrowse extends LitElement {
        .item=${child}
        .graphic=${mediaClass.show_list_images ? "medium" : "avatar"}
      >
-        ${!showImage && !child.can_play
+        ${backgroundImage === "none" && !child.can_play
          ? html`<ha-svg-icon
              .path=${MediaClassBrowserSettings[
                child.media_class === "directory"
@@ -709,14 +731,9 @@ 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({
@@ -736,6 +753,51 @@ 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;
@@ -986,20 +1048,14 @@ 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;
@@ -1135,12 +1191,18 @@ export class HaMediaPlayerBrowse extends LitElement {
          right: 0;
          left: 0;
          bottom: 0;
-          --ha-media-browser-thumbnail-fit: cover;
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: center;
        }

        .centered-image {
          margin: 0 8px;
-          --ha-media-browser-thumbnail-fit: contain;
+          background-size: contain;
+        }
+
+        .brand-image {
+          background-size: 40%;
        }

        .children ha-card .icon-holder {
@@ -1216,21 +1278,17 @@ export class HaMediaPlayerBrowse extends LitElement {
        }

        ha-list-item .graphic {
-          position: relative;
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
          border-radius: var(--ha-border-radius-sm);
-          overflow: hidden;
+          display: flex;
+          align-content: center;
+          align-items: center;
          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);
@@ -99,8 +99,6 @@ export class HaRadioOption extends Radio {
            --ha-radio-option-checked-background-color,
            var(--ha-color-fill-primary-normal-resting)
          );
-          color: var(--checked-icon-color);
-          border-color: var(--checked-icon-color);
        }

        [part~="label"] {
@@ -112,7 +112,6 @@ export class HaTileContainer extends LitElement {
      flex-direction: column;
      text-align: center;
      justify-content: center;
-      padding: 10px 0;
    }
    .vertical ::slotted([slot="info"]) {
      width: 100%;
@@ -1,3 +1,4 @@
+import { createContext } from "@lit/context";
 import type {
  Connection,
  HassEntityAttributeBase,
@@ -95,7 +96,7 @@ export interface TriggerList {

 export interface BaseTrigger {
  alias?: string;
-  note?: string;
+  comment?: string;
  /** @deprecated Use `trigger` instead */
  platform?: string;
  trigger: string;
@@ -241,7 +242,7 @@ export type Trigger = LegacyTrigger | TriggerList | PlatformTrigger;
 interface BaseCondition {
  condition: string;
  alias?: string;
-  note?: string;
+  comment?: string;
  enabled?: boolean;
  options?: Record<string, unknown>;
 }
@@ -490,12 +491,12 @@ export const migrateAutomationTrigger = (

 export const flattenTriggers = (
  triggers: undefined | Trigger | Trigger[]
-): Trigger[] => {
+): Exclude<Trigger, TriggerList>[] => {
  if (!triggers) {
    return [];
  }

-  const flatTriggers: Trigger[] = [];
+  const flatTriggers: Exclude<Trigger, TriggerList>[] = [];

  ensureArray(triggers).forEach((t) => {
    if ("triggers" in t) {
@@ -609,7 +610,7 @@ export interface AutomationClipboard {
 export interface BaseSidebarConfig {
  delete: () => void;
  close: (focus?: boolean) => void;
-  editNote: () => void;
+  editComment: () => void;
 }

 export interface TriggerSidebarConfig extends BaseSidebarConfig {
@@ -671,7 +672,7 @@ export interface OptionSidebarConfig extends BaseSidebarConfig {
  rename: () => void;
  duplicate: () => void;
  defaultOption?: boolean;
-  note?: string;
+  comment?: string;
 }

 export interface ScriptFieldSidebarConfig extends BaseSidebarConfig {
@@ -697,3 +698,7 @@ export interface ShowAutomationEditorParams {
  data?: Partial<AutomationConfig>;
  expanded?: boolean;
 }
+
+export const automationConfigContext = createContext<
+  AutomationConfig | undefined
+>("automationConfig");
@@ -27,6 +27,7 @@ import type {
  LegacyTrigger,
  Trigger,
 } from "./automation";
+import { flattenTriggers } from "./automation";
 import { getConditionDomain, getConditionObjectId } from "./condition";
 import type {
  DeviceCondition,
@@ -107,6 +108,41 @@ 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,
@@ -17,7 +17,6 @@ export interface BluetoothDeviceData extends DataTableRowData {
  source: string;
  time: number;
  tx_power: number;
-  raw: string | null;
 }

 export interface BluetoothConnectionData extends DataTableRowData {
@@ -59,21 +58,13 @@ export interface BluetoothAllocationsData {
  allocated: string[];
 }

-export type BluetoothScannerMode = "active" | "passive";
-
-export type BluetoothScannerRequestedMode = BluetoothScannerMode | "auto";
-
 export interface BluetoothScannerState {
  source: string;
  adapter: string;
-  current_mode: BluetoothScannerMode | null;
-  requested_mode: BluetoothScannerRequestedMode | null;
+  current_mode: "active" | "passive" | null;
+  requested_mode: "active" | "passive" | null;
 }

-export const isScannerStateMismatch = (state: BluetoothScannerState): boolean =>
-  state.requested_mode !== "auto" &&
-  state.current_mode !== state.requested_mode;
-
 export const subscribeBluetoothScannersDetailsUpdates = (
  conn: Connection,
  store: Store<BluetoothScannersDetails>
@@ -40,6 +40,7 @@ export const createConfigFlow = (
    "config/config_entries/flow",
    {
      handler,
+      show_advanced_options: Boolean(hass.userData?.showAdvanced),
      entry_id,
    },
    HEADERS
@@ -13,7 +13,7 @@ import {

 export interface DeviceAutomation {
  alias?: string;
-  note?: string;
+  comment?: string;
  device_id: string;
  domain: string;
  entity_id?: string;
@@ -161,10 +161,6 @@ export interface VacuumEntityOptions {
  last_seen_segments?: Segment[];
 }

-export interface DeviceTrackerEntityOptions {
-  associated_zone?: string | null;
-}
-
 export interface EntityRegistryOptions {
  number?: NumberEntityOptions;
  sensor?: SensorEntityOptions;
@@ -176,7 +172,6 @@ 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>;
@@ -202,8 +197,7 @@ export interface EntityRegistryEntryUpdateParams {
    | LightEntityOptions
    | CoverEntityOptions
    | ValveEntityOptions
-    | VacuumEntityOptions
-    | DeviceTrackerEntityOptions;
+    | VacuumEntityOptions;
  aliases?: (string | null)[];
  labels?: string[];
  categories?: Record<string, string | null>;
@@ -2,6 +2,7 @@ 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;
@@ -1,14 +1,6 @@
 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;
@@ -16,10 +8,6 @@ export interface CustomCardEntry {
  description?: string;
  preview?: boolean;
  documentationURL?: string;
-  getEntitySuggestion?: (
-    hass: HomeAssistant,
-    entityId: string
-  ) => CustomCardSuggestion | CustomCardSuggestion[] | null;
 }

 export interface CustomBadgeEntry {
@@ -2,10 +2,7 @@ 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,
-  type DeviceRegistryEntry,
-} from "./device/device_registry";
+import { subscribeDeviceRegistry } from "./device/device_registry";
 import { getThreadDataSetTLV, listThreadDataSets } from "./thread";

 export enum NetworkType {
@@ -80,9 +77,9 @@ export const startExternalCommissioning = async (hass: HomeAssistant) => {
  });
 };

-export const watchForNewMatterDevice = (
+export const redirectOnNewMatterDevice = (
  hass: HomeAssistant,
-  callback: (device: DeviceRegistryEntry) => void
+  callback?: () => void
 ): UnsubscribeFunc => {
  let curMatterDevices: Set<string> | undefined;
  const unsubDeviceReg = subscribeDeviceRegistry(hass.connection, (entries) => {
@@ -104,7 +101,8 @@ export const watchForNewMatterDevice = (
    if (newMatterDevices.length) {
      unsubDeviceReg();
      curMatterDevices = undefined;
-      callback(newMatterDevices[0]);
+      callback?.();
+      navigate(`/config/devices/device/${newMatterDevices[0].id}`);
    }
  });
  return () => {
@@ -113,15 +111,6 @@ export const watchForNewMatterDevice = (
  };
 };

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

@@ -36,7 +36,7 @@ export const isMaxMode = arrayLiteralIncludes(MODES_MAX);

 export const baseActionStruct = object({
  alias: optional(string()),
-  note: optional(string()),
+  comment: optional(string()),
  continue_on_error: optional(boolean()),
  enabled: optional(boolean()),
 });
@@ -106,7 +106,7 @@ export interface Field {

 interface BaseAction {
  alias?: string;
-  note?: string;
+  comment?: string;
  continue_on_error?: boolean;
  enabled?: boolean;
 }
@@ -197,7 +197,7 @@ export interface ForEachRepeat extends BaseRepeat {

 export interface Option {
  alias?: string;
-  note?: string;
+  comment?: string;
  conditions: string | Condition[];
  sequence: Action | Action[];
 }
@@ -125,7 +125,7 @@ export interface BooleanSelector {
  boolean: {} | null;
 }

-export type AutomationBehaviorTriggerMode = "first" | "all" | "each";
+export type AutomationBehaviorTriggerMode = "first" | "last" | "any";

 export type AutomationBehaviorConditionMode = "all" | "any";

@@ -16,6 +16,7 @@ export const createSubConfigFlow = (
    "config/config_entries/subentries/flow",
    {
      handler: [configEntryId, subFlowType],
+      show_advanced_options: Boolean(hass.userData?.showAdvanced),
      subentry_id,
    },
    HEADERS
@@ -8,6 +8,7 @@ import type {
  Trigger,
  TriggerList,
 } from "./automation";
+import { flattenTriggers } from "./automation";
 import type { Selector, TargetSelector } from "./selector";

 export const TRIGGER_COLLECTIONS: AutomationElementGroupCollection[] = [
@@ -56,6 +57,49 @@ 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<
@@ -167,6 +167,7 @@ export interface DataEntryFlowDialogParams {
    entryId?: string;
  }) => void;
  flowConfig: FlowConfig;
+  showAdvanced?: boolean;
  dialogParentElement?: HTMLElement;
  navigateToResult?: boolean;
  carryOverDevices?: string[];
@@ -48,6 +48,7 @@ class StepFlowAbort extends LitElement {
        showConfigFlowDialog(this.params.dialogParentElement!, {
          dialogClosedCallback: this.params.dialogClosedCallback,
          startFlowHandler: this.handler,
+          showAdvanced: this.hass.userData?.showAdvanced,
          navigateToResult: this.params.navigateToResult,
        });
      },
@@ -206,6 +206,8 @@ 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);
@@ -267,7 +267,7 @@ export class QuickBar extends LitElement {
            ></ha-picker-combo-box>`
          : nothing}
        ${this._showHint
-          ? html`<ha-tip slot="footer"
+          ? html`<ha-tip slot="footer" .hass=${this.hass}
              >${this.hass.localize("ui.tips.key_shortcut_quick_search", {
                keyboard_shortcut: html`<button
                  class="link"
@@ -147,6 +147,7 @@ class DialogEditSidebar extends LitElement {

    return html`
      <ha-items-display-editor
+        .hass=${this.hass}
        .value=${{
          order: this._order,
          hidden: hiddenPanels,
@@ -343,9 +343,9 @@ export class HaVoiceAssistantSetupDialog extends LitElement {
    this._step = this._previousSteps.pop()!;
  }

-  private async _goToNextStep(ev?: CustomEvent) {
+  private _goToNextStep(ev?: CustomEvent) {
    if (ev?.detail?.updateConfig) {
-      await this._fetchAssistConfiguration();
+      this._fetchAssistConfiguration();
    }
    if (ev?.detail?.nextStep) {
      this._nextStep = ev.detail.nextStep;
@@ -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));
-      --ha-top-app-bar-width: calc(100% - var(--ha-sidebar-width));
+      --mdc-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;
-      --ha-top-app-bar-width: 100%;
+      --mdc-top-app-bar-width: unset;
      --safe-area-content-inset-left: var(--safe-area-inset-left);
    }
    partial-panel-resolver,
@@ -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(this.mobileSizeQuery, (matches) => {
-        this._isMobileSize = matches;
-      });
+      this._unsubMql = listenMediaQuery(
+        "all and (max-width: 450px), all and (max-height: 500px)",
+        (matches) => {
+          this._isMobileSize = matches;
+        }
+      );
    }

    public disconnectedCallback() {
@@ -190,20 +190,16 @@ class PanelCalendar extends SubscribeMixin(LitElement) {
          .label=${this.hass.localize("ui.common.refresh")}
          @click=${this._handleRefresh}
        ></ha-icon-button>
-        ${showPane
-          ? html`<ha-list slot="pane" multi>${calendarItems}</ha-list>${this
-                .hass.user?.is_admin
-                ? html`<ha-list-item
-                    graphic="icon"
-                    slot="pane-footer"
-                    @click=${this._addCalendar}
-                  >
-                    <ha-svg-icon .path=${mdiPlus} slot="graphic"></ha-svg-icon>
-                    ${this.hass.localize(
-                      "ui.components.calendar.create_calendar"
-                    )}
-                  </ha-list-item>`
-                : nothing}`
+        ${showPane && this.hass.user?.is_admin
+          ? html`<ha-list slot="pane" multi}>${calendarItems}</ha-list>
+              <ha-list-item
+                graphic="icon"
+                slot="pane-footer"
+                @click=${this._addCalendar}
+              >
+                <ha-svg-icon .path=${mdiPlus} slot="graphic"></ha-svg-icon>
+                ${this.hass.localize("ui.components.calendar.create_calendar")}
+              </ha-list-item>`
          : nothing}
        <ha-full-calendar
          add-fab
@@ -342,6 +338,7 @@ 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) {
@@ -175,7 +175,7 @@ class PanelClimate extends LitElement {
          position: fixed;
          top: 0;
          width: calc(
-            var(--ha-top-app-bar-width, 100%) - var(
+            var(--mdc-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(--ha-top-app-bar-width, 100%) - var(
+            var(--mdc-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(
-            --bar-box-shadow,
+            --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)
@@ -112,6 +112,7 @@ export class HaConfigApplicationCredentials extends LitElement {
          showNarrow: true,
          template: (credential) => html`
            <ha-icon-overflow-menu
+              .hass=${this.hass}
              narrow
              .items=${[
                {
@@ -31,6 +31,7 @@ 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>
@@ -92,15 +92,14 @@ 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-apps-state";
-import "../../components/supervisor-apps-tag";
 import "../components/supervisor-app-metric";
+import "../../components/supervisor-apps-tag";
+import "../../components/supervisor-apps-state";
 import { extractChangelog } from "../util/supervisor-app";
 import "./supervisor-app-system-managed";

@@ -124,7 +123,7 @@ const RATING_ICON = {
 const POLL_INTERVAL_SECONDS = 5;

@customElement("supervisor-app-info")
-class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
+class SupervisorAppInfo extends LitElement {
  @property({ type: Boolean }) public narrow = false;

  @property({ attribute: false }) public route!: Route;
@@ -164,9 +163,6 @@ class SupervisorAppInfo extends MobileAwareMixin(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;
  }
@@ -867,11 +863,11 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
          `
        : nothing}
      <div
-        class="app ${this._isMobileSize || !this._currentAddon.version
+        class="app ${this.narrow || !this._currentAddon.version
          ? "column"
          : ""}"
      >
-        ${this._isMobileSize || !this._currentAddon.version
+        ${this.narrow || !this._currentAddon.version
          ? html`
              ${this._renderInfoCard()}
              ${this._currentAddon.version
@@ -145,6 +145,8 @@ 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[] = [];
@@ -13,6 +13,8 @@ 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: {
@@ -35,6 +37,7 @@ class HaConfigAreas extends HassRouterPage {

    pageEl.narrow = this.narrow;
    pageEl.isWide = this.isWide;
+    pageEl.showAdvanced = this.showAdvanced;
    pageEl.route = this.routeTail;
  }
 }
@@ -107,7 +107,7 @@ export default class HaAutomationActionEditor extends LitElement {
    ev.stopPropagation();
    const value = {
      ...(this.action.alias ? { alias: this.action.alias } : {}),
-      ...(this.action.note ? { note: this.action.note } : {}),
+      ...(this.action.comment ? { comment: this.action.comment } : {}),
      ...ev.detail.value,
    };
    fireEvent(this, "value-changed", { value });
@@ -297,8 +297,8 @@ export default class HaAutomationActionRow extends LitElement {
            ?.target
        : undefined;

-    const noteTooltipText = truncateWithEllipsis(
-      this.action.note?.trim() || "",
+    const commentTooltipText = truncateWithEllipsis(
+      this.action.comment?.trim() || "",
      250
    );

@@ -337,18 +337,18 @@ export default class HaAutomationActionRow extends LitElement {
              serviceTargetSpec
            )
          : nothing}
-        ${noteTooltipText
+        ${commentTooltipText
          ? html`
              <ha-svg-icon
-                id="note-icon"
+                id="comment-icon"
                .path=${mdiCommentTextOutline}
                .label=${this.hass.localize(
-                  "ui.panel.config.automation.editor.note.label"
+                  "ui.panel.config.automation.editor.comment.label"
                )}
-                class="note-indicator"
+                class="comment-indicator"
              ></ha-svg-icon
-              ><ha-tooltip for="note-icon"
-                ><p>${noteTooltipText}</p></ha-tooltip
+              ><ha-tooltip for="comment-icon"
+                ><p>${commentTooltipText}</p></ha-tooltip
              >
            `
          : nothing}
@@ -407,11 +407,11 @@ export default class HaAutomationActionRow extends LitElement {
            )
          )}
        </ha-dropdown-item>
-        <ha-dropdown-item value="edit_note">
+        <ha-dropdown-item value="edit_comment">
          <ha-svg-icon slot="icon" .path=${mdiCommentEditOutline}></ha-svg-icon>
          ${this._renderOverflowLabel(
            this.hass.localize(
-              `ui.panel.config.automation.editor.note.${this.action.note ? "edit" : "add"}`
+              `ui.panel.config.automation.editor.comment.${this.action.comment ? "edit" : "add"}`
            )
          )}
        </ha-dropdown-item>
@@ -941,25 +941,25 @@ export default class HaAutomationActionRow extends LitElement {
    }
  };

-  private _editNoteAction = async (): Promise<void> => {
-    const note = await showPromptDialog(this, {
+  private _editCommentAction = async (): Promise<void> => {
+    const comment = await showPromptDialog(this, {
      title: this.hass.localize(
-        `ui.panel.config.automation.editor.note.${this.action.note ? "edit" : "add"}`
+        `ui.panel.config.automation.editor.comment.${this.action.comment ? "edit" : "add"}`
      ),
      inputLabel: this.hass.localize(
-        "ui.panel.config.automation.editor.note.label"
+        "ui.panel.config.automation.editor.comment.label"
      ),
      inputType: "string",
-      defaultValue: this.action.note,
+      defaultValue: this.action.comment,
      confirmText: this.hass.localize("ui.common.submit"),
      multiline: true,
    });
-    if (note !== null) {
+    if (comment !== null) {
      const value = { ...this.action };
-      if (note === "") {
-        delete value.note;
+      if (comment === "") {
+        delete value.comment;
      } else {
-        value.note = note;
+        value.comment = comment;
      }
      fireEvent(this, "value-changed", {
        value,
@@ -1089,7 +1089,7 @@ export default class HaAutomationActionRow extends LitElement {
      rename: () => {
        this._renameAction();
      },
-      editNote: this._editNoteAction,
+      editComment: this._editCommentAction,
      toggleYamlMode: () => {
        this._toggleYamlMode();
        this.openSidebar();
@@ -1185,8 +1185,8 @@ export default class HaAutomationActionRow extends LitElement {
      case "rename":
        this._renameAction();
        break;
-      case "edit_note":
-        this._editNoteAction();
+      case "edit_comment":
+        this._editCommentAction();
        break;
      case "duplicate":
        this._duplicateAction();
@@ -95,6 +95,7 @@ class DialogAutomationMode extends LitElement implements HassDialog {
          .value=${this._newMode}
          @value-changed=${this._modeChanged}
          .maxColumns=${1}
+          .hass=${this.hass}
        ></ha-select-box>

        ${isMaxMode(this._newMode)
@@ -123,7 +123,7 @@ export default class HaAutomationConditionEditor extends LitElement {
    ev.stopPropagation();
    const value = {
      ...(this.condition.alias ? { alias: this.condition.alias } : {}),
-      ...(this.condition.note ? { note: this.condition.note } : {}),
+      ...(this.condition.comment ? { comment: this.condition.comment } : {}),
      ...ev.detail.value,
    };
    fireEvent(this, "value-changed", { value });
@@ -1,6 +1,7 @@
 import "@home-assistant/webawesome/dist/components/divider/divider";
 import { consume } from "@lit/context";
 import {
+  mdiAlert,
  mdiAppleKeyboardCommand,
  mdiArrowDown,
  mdiArrowUp,
@@ -25,7 +26,7 @@ import type {
 } from "home-assistant-js-websocket";
 import { dump } from "js-yaml";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
-import { LitElement, html, nothing } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
@@ -52,18 +53,26 @@ 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 } from "../../../../data/automation_i18n";
+import {
+  describeCondition,
+  getTriggerInfos,
+} from "../../../../data/automation_i18n";
 import type { ConditionDescriptions } from "../../../../data/condition";
 import { CONDITION_BUILDING_BLOCKS } from "../../../../data/condition";
 import {
@@ -83,6 +92,7 @@ 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";
@@ -154,10 +164,11 @@ export default class HaAutomationConditionRow extends LitElement {

  @state() private _selected = false;

-  @state() private _liveTestResult: {
-    state: LiveTestState;
-    message?: string;
-  } = { state: "unknown" };
+  @state() private _liveTestResult: LiveTestState = "unknown";
+
+  @state()
+  @consume({ context: automationConfigContext, subscribe: true })
+  private _automationConfig?: AutomationConfig;

  @state()
  @consume({ context: fullEntitiesContext, subscribe: true })
@@ -205,8 +216,8 @@ export default class HaAutomationConditionRow extends LitElement {
    const conditionTargetSpec =
      this.conditionDescriptions[this.condition.condition]?.target;

-    const noteTooltipText = truncateWithEllipsis(
-      this.condition.note?.trim() || "",
+    const commentTooltipText = truncateWithEllipsis(
+      this.condition.comment?.trim() || "",
      250
    );

@@ -217,9 +228,13 @@ export default class HaAutomationConditionRow extends LitElement {
        .condition=${this.condition.condition}
      ></ha-condition-icon>
      <h3 slot="header">
-        ${capitalizeFirstLetter(
-          describeCondition(this.condition, this.hass, this._entityReg)
-        )}
+        ${this.condition.condition === "trigger"
+          ? this._renderTriggerConditionDescription(
+              this.condition as TriggerCondition
+            )
+          : capitalizeFirstLetter(
+              describeCondition(this.condition, this.hass, this._entityReg)
+            )}
        ${target !== undefined || (descriptionHasTarget && !this._isNew)
          ? this._renderTargets(
              target,
@@ -227,17 +242,19 @@ export default class HaAutomationConditionRow extends LitElement {
              conditionTargetSpec
            )
          : nothing}
-        ${this.condition.note?.trim()
+        ${this.condition.comment?.trim()
          ? html`
              <ha-svg-icon
-                id="note-icon"
+                id="comment-icon"
                .path=${mdiCommentTextOutline}
                .label=${this.hass.localize(
-                  "ui.panel.config.automation.editor.note.label"
+                  "ui.panel.config.automation.editor.comment.label"
                )}
-                class="note-indicator"
+                class="comment-indicator"
              ></ha-svg-icon>
-              <ha-tooltip for="note-icon"><p>${noteTooltipText}</p></ha-tooltip>
+              <ha-tooltip for="comment-icon"
+                ><p>${commentTooltipText}</p></ha-tooltip
+              >
            `
          : nothing}
      </h3>
@@ -287,11 +304,11 @@ export default class HaAutomationConditionRow extends LitElement {
            )
          )}
        </ha-dropdown-item>
-        <ha-dropdown-item value="edit_note">
+        <ha-dropdown-item value="edit_comment">
          <ha-svg-icon slot="icon" .path=${mdiCommentEditOutline}></ha-svg-icon>
          ${this._renderOverflowLabel(
            this.hass.localize(
-              `ui.panel.config.automation.editor.note.${this.condition.note ? "edit" : "add"}`
+              `ui.panel.config.automation.editor.comment.${this.condition.comment ? "edit" : "add"}`
            )
          )}
        </ha-dropdown-item>
@@ -532,12 +549,11 @@ export default class HaAutomationConditionRow extends LitElement {
              <ha-automation-row-live-test
                slot="icons"
                .state=${this.condition.condition !== "trigger"
-                  ? this._liveTestResult.state
+                  ? this._liveTestResult
                  : "unknown"}
                .label=${this.hass.localize(
-                  `ui.panel.config.automation.editor.conditions.live_test_state.${this.condition.condition !== "trigger" ? this._liveTestResult.state : "unknown"}`
+                  `ui.panel.config.automation.editor.conditions.live_test_state.${this.condition.condition !== "trigger" ? this._liveTestResult : "unknown"}`
                )}
-                .message=${this._liveTestResult.message}
              ></ha-automation-row-live-test
            ></ha-automation-row>`
          : html`
@@ -569,6 +585,102 @@ 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,
@@ -624,12 +736,7 @@ export default class HaAutomationConditionRow extends LitElement {
  }

  private _resetSubscription() {
-    this._liveTestResult = {
-      state: "unknown",
-      message: this.hass.localize(
-        "ui.panel.config.automation.editor.conditions.live_test_state.unknown"
-      ),
-    };
+    this._liveTestResult = "unknown";
    if (this._conditionUnsub) {
      this._conditionUnsub.then((unsub) => unsub());
      this._conditionUnsub = undefined;
@@ -654,12 +761,7 @@ export default class HaAutomationConditionRow extends LitElement {
        if (result.error) {
          this._handleLiveTestError(result.error);
        } else {
-          this._liveTestResult = {
-            state: result.result ? "pass" : "fail",
-            message: this.hass.localize(
-              `ui.panel.config.automation.editor.conditions.testing_${result.result ? "pass" : "error"}`
-            ),
-          };
+          this._liveTestResult = result.result ? "pass" : "fail";
        }
      },
      this.condition
@@ -676,12 +778,7 @@ export default class HaAutomationConditionRow extends LitElement {
  private _handleLiveTestError(error: any) {
    const invalid =
      typeof error !== "string" && error.code === "invalid_format";
-    this._liveTestResult = {
-      state: invalid ? "invalid" : "unknown",
-      message: this.hass.localize(
-        `ui.panel.config.automation.editor.conditions.${invalid ? "invalid_condition" : "live_test_state.unknown"}`
-      ),
-    };
+    this._liveTestResult = invalid ? "invalid" : "unknown";
  }

  private _onValueChange(event: CustomEvent) {
@@ -848,25 +945,25 @@ export default class HaAutomationConditionRow extends LitElement {
    }
  };

-  private _editNoteCondition = async (): Promise<void> => {
-    const note = await showPromptDialog(this, {
+  private _editCommentCondition = async (): Promise<void> => {
+    const comment = await showPromptDialog(this, {
      title: this.hass.localize(
-        `ui.panel.config.automation.editor.note.${this.condition.note ? "edit" : "add"}`
+        `ui.panel.config.automation.editor.comment.${this.condition.comment ? "edit" : "add"}`
      ),
      inputLabel: this.hass.localize(
-        "ui.panel.config.automation.editor.note.label"
+        "ui.panel.config.automation.editor.comment.label"
      ),
      inputType: "string",
-      defaultValue: this.condition.note,
+      defaultValue: this.condition.comment,
      confirmText: this.hass.localize("ui.common.submit"),
      multiline: true,
    });
-    if (note !== null) {
+    if (comment !== null) {
      const value = { ...this.condition };
-      if (note === "") {
-        delete value.note;
+      if (comment === "") {
+        delete value.comment;
      } else {
-        value.note = note;
+        value.comment = comment;
      }
      fireEvent(this, "value-changed", {
        value,
@@ -1021,7 +1118,7 @@ export default class HaAutomationConditionRow extends LitElement {
      rename: () => {
        this._renameCondition();
      },
-      editNote: this._editNoteCondition,
+      editComment: this._editCommentCondition,
      toggleYamlMode: () => {
        this._toggleYamlMode();
        this.openSidebar();
@@ -1093,8 +1190,8 @@ export default class HaAutomationConditionRow extends LitElement {
      case "rename":
        this._renameCondition();
        break;
-      case "edit_note":
-        this._editNoteCondition();
+      case "edit_comment":
+        this._editCommentCondition();
        break;
      case "duplicate":
        this._duplicateCondition();
@@ -1127,7 +1224,26 @@ export default class HaAutomationConditionRow extends LitElement {
  }

  static get styles(): CSSResultGroup {
-    return [rowStyles, overflowStyles];
+    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);
+        }
+      `,
+    ];
  }
 }

@@ -22,7 +22,7 @@ import type { HomeAssistant } from "../../../../../types";

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

 const stateConditionStruct = object({
  alias: optional(string()),
-  note: optional(string()),
+  comment: optional(string()),
  condition: literal("state"),
  entity_id: optional(string()),
  attribute: optional(string()),
@@ -1,26 +1,31 @@
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { html, LitElement } from "lit";
+import { consume } from "@lit/context";
+import { mdiAlert } from "@mdi/js";
+import { css, html, LitElement, nothing } 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 {
-  flattenTriggers,
+  automationConfigContext,
  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";
-
-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));
-};
+import "../../ha-trigger-id-chip";

@customElement("ha-automation-condition-trigger")
 export class HaTriggerCondition extends LitElement {
@@ -30,9 +35,25 @@ export class HaTriggerCondition extends LitElement {

  @property({ type: Boolean }) public disabled = false;

-  @state() private _triggerIds: string[] = [];
+  @state()
+  @consume({ context: automationConfigContext, subscribe: true })
+  private _automationConfig?: AutomationConfig;

-  private _unsub?: UnsubscribeFunc;
+  @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
+      )
+  );

  public static get defaultConfig(): TriggerCondition {
    return {
@@ -41,89 +62,146 @@ 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() {
-    if (!this._triggerIds.length) {
-      return this.hass.localize(
-        "ui.panel.config.automation.editor.conditions.type.trigger.no_triggers"
-      );
-    }
+    const selectedIds = ensureArray(this.condition.id || []).filter(
+      (id): id is string => typeof id === "string" && id !== ""
+    );

-    const schema = this._schema(this._triggerIds);
+    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>
+      `;
+    }

    return html`
-      <ha-form
-        .schema=${schema}
-        .data=${this.condition}
-        .hass=${this.hass}
-        .disabled=${this.disabled}
-        .computeLabel=${this._computeLabelCallback}
-        @value-changed=${this._valueChanged}
-      ></ha-form>
+      <ha-list-selectable @ha-list-selected=${this._valueChanged} multi>
+        ${this._renderOptions(selectedIds, triggerInfos)}
+      </ha-list-selectable>
    `;
  }

-  private _computeLabelCallback = (
-    schema: SchemaUnion<ReturnType<typeof this._schema>>
-  ): string =>
-    this.hass.localize(
-      `ui.panel.config.automation.editor.conditions.type.trigger.${schema.name}`
+  private _renderOptions(selectedIds: string[], triggerInfos: TriggerInfo[]) {
+    const unknownTriggerIds = selectedIds.filter(
+      (id) => !triggerInfos.some((info) => info.id === id)
    );

-  private _automationUpdated(config?: AutomationConfig) {
-    this._triggerIds = config?.triggers
-      ? getTriggersIds(ensureArray(config.triggers))
-      : [];
+    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 _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev: CustomEvent<HaListSelectedDetail>): void {
    ev.stopPropagation();
-    const newValue = ev.detail.value;
+    if (
+      !ev.detail.diff ||
+      (!ev.detail.diff?.added.size && !ev.detail.diff?.removed.size)
+    ) {
+      return;
+    }

-    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 = "";
+    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);
      }
    }

-    fireEvent(this, "value-changed", { value: newValue });
+    fireEvent(this, "value-changed", { value: { ...this.condition, id: ids } });
  }
+
+  static styles = css`
+    .option {
+      display: flex;
+      align-items: center;
+      gap: var(--ha-space-1);
+      color: var(--ha-color-on-neutral-normal);
+    }
+  `;
 }

 declare global {
@@ -270,7 +270,7 @@ class DialogNewAutomation extends LitElement {
                        : nothing}
                    ${processedBlueprints.length > 0
                      ? html`
-                          <ha-tip>
+                          <ha-tip .hass=${this.hass}>
                            <a
                              href=${documentationUrl(
                                this.hass,
@@ -6,9 +6,9 @@ import "../../../components/ha-button";
 import "../../../components/ha-settings-row";
 import { internationalizationContext } from "../../../data/context";

-@customElement("ha-automation-note")
-export class HaAutomationNote extends LitElement {
-  @property() public note!: string;
+@customElement("ha-automation-comment")
+export class HaAutomationComment extends LitElement {
+  @property() public comment!: string;

  @state()
  @consume({ context: internationalizationContext, subscribe: true })
@@ -18,9 +18,9 @@ export class HaAutomationNote extends LitElement {
    return html`
      <ha-settings-row narrow>
        <div class="heading" slot="heading">
-          <span class="title" id="note-label">
+          <span class="title" id="comment-label">
            ${this._i18n.localize(
-              "ui.panel.config.automation.editor.note.label"
+              "ui.panel.config.automation.editor.comment.label"
            )}
          </span>
          <ha-button
@@ -31,13 +31,13 @@ export class HaAutomationNote extends LitElement {
            ${this._i18n.localize("ui.common.edit")}
          </ha-button>
        </div>
-        <p aria-labelledby="note-label">${this.note}</p>
+        <p aria-labelledby="comment-label">${this.comment}</p>
      </ha-settings-row>
    `;
  }

  private _handleClick() {
-    fireEvent(this, "edit-note");
+    fireEvent(this, "edit-comment");
  }

  static styles = css`
@@ -70,10 +70,10 @@ export class HaAutomationNote extends LitElement {

 declare global {
  interface HTMLElementTagNameMap {
-    "ha-automation-note": HaAutomationNote;
+    "ha-automation-comment": HaAutomationComment;
  }

  interface HASSDomEvents {
-    "edit-note": undefined;
+    "edit-comment": undefined;
  }
 }
@@ -1,4 +1,5 @@
 import "@home-assistant/webawesome/dist/components/divider/divider";
+import { provide } from "@lit/context";
 import {
  mdiAppleKeyboardCommand,
  mdiCog,
@@ -20,10 +21,9 @@ 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 } from "lit/decorators";
+import { customElement, property, query, state } 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,6 +31,7 @@ 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";
@@ -45,6 +46,7 @@ import type {
  Trigger,
 } from "../../../data/automation";
 import {
+  automationConfigContext,
  deleteAutomation,
  fetchAutomationFileConfig,
  getAutomationEditorInitData,
@@ -72,13 +74,12 @@ 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,
@@ -86,7 +87,7 @@ import {
 } from "./ha-automation-script-editor-mixin";
 import "./manual-automation-editor";
 import type { HaManualAutomationEditor } from "./manual-automation-editor";
-import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
+import { ADD_AUTOMATION_ELEMENT_QUERY_PARAM } from "./show-add-automation-element-dialog";

 declare global {
  interface HTMLElementTagNameMap {
@@ -94,10 +95,6 @@ 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;
@@ -125,12 +122,9 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo

  @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;

-  private _configSubscriptions: Record<
-    string,
-    (config?: AutomationConfig) => void
-  > = {};
-
-  private _configSubscriptionsId = 1;
+  @provide({ context: automationConfigContext })
+  @state()
+  protected config?: AutomationConfig;

  private _newAutomationId?: string;

@@ -404,10 +398,7 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
            </ha-svg-icon>
          </ha-dropdown-item>
        </ha-dropdown>
-        <div
-          class=${this.mode === "yaml" ? "yaml-mode" : ""}
-          @subscribe-automation-config=${this._subscribeAutomationConfig}
-        >
+        <div class=${this.mode === "yaml" ? "yaml-mode" : ""}>
          ${this.mode === "gui"
            ? html`
                <div>
@@ -638,12 +629,6 @@ export class HaAutomationEditor extends AutomationScriptEditorMixin<AutomationCo
    ) {
      this._setEntityId();
    }
-
-    if (changedProps.has("config")) {
-      Object.values(this._configSubscriptions).forEach((sub) =>
-        sub(this.config)
-      );
-    }
  }

  private _setEntityId() {
@@ -1021,15 +1006,6 @@ 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(),
@@ -116,10 +116,8 @@ import { showCategoryRegistryDetailDialog } from "../category/show-dialog-catego
 import {
  getAreaTableColumn,
  getCategoryTableColumn,
-  getCreatedAtTableColumn,
  getEntityIdHiddenTableColumn,
  getLabelsTableColumn,
-  getModifiedAtTableColumn,
  getTriggeredAtTableColumn,
 } from "../common/data-table-columns";
 import { configSections } from "../ha-panel-config";
@@ -141,8 +139,6 @@ type AutomationItem = AutomationEntity & {
  labels: string[]; // search only
  assistants: string[];
  assistants_sortable_key: string | undefined;
-  created_at: number | undefined;
-  modified_at: number | undefined;
 };

@customElement("ha-automation-picker")
@@ -289,8 +285,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
          labels: label_entries.map((lbl) => lbl.name),
          assistants,
          assistants_sortable_key: getAssistantsSortableKey(assistants),
-          created_at: entityRegEntry?.created_at,
-          modified_at: entityRegEntry?.modified_at,
          selectable: entityRegEntry !== undefined,
        };
      });
@@ -341,8 +335,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
        category: getCategoryTableColumn(localize),
        labels: getLabelsTableColumn(),
        last_triggered: getTriggeredAtTableColumn(localize, this.hass),
-        created_at: getCreatedAtTableColumn(localize, this.hass),
-        modified_at: getModifiedAtTableColumn(localize, this.hass),
        formatted_state: {
          minWidth: "82px",
          maxWidth: "82px",
@@ -27,6 +27,8 @@ 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[] = [];
@@ -77,6 +79,7 @@ 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) {
@@ -0,0 +1,62 @@
+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;
+  }
+}
@@ -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";
@@ -142,8 +142,8 @@ export default class HaAutomationOptionRow extends LitElement {
    `;
  }
  private _renderRow() {
-    const noteTooltipText = truncateWithEllipsis(
-      this.option?.note?.trim() || "",
+    const commentTooltipText = truncateWithEllipsis(
+      this.option?.comment?.trim() || "",
      250
    );

@@ -157,17 +157,19 @@ export default class HaAutomationOptionRow extends LitElement {
          : this.hass.localize(
              "ui.panel.config.automation.editor.actions.type.choose.default"
            )}
-        ${this.option?.note?.trim()
+        ${this.option?.comment?.trim()
          ? html`
              <ha-svg-icon
-                id="note-icon"
+                id="comment-icon"
                .path=${mdiCommentTextOutline}
                .label=${this.hass.localize(
-                  "ui.panel.config.automation.editor.note.label"
+                  "ui.panel.config.automation.editor.comment.label"
                )}
-                class="note-indicator"
+                class="comment-indicator"
              ></ha-svg-icon>
-              <ha-tooltip for="note-icon"><p>${noteTooltipText}</p></ha-tooltip>
+              <ha-tooltip for="comment-icon"
+                ><p>${commentTooltipText}</p></ha-tooltip
+              >
            `
          : nothing}
      </h3>
@@ -197,14 +199,14 @@ export default class HaAutomationOptionRow extends LitElement {
                  )
                )}
              </ha-dropdown-item>
-              <ha-dropdown-item value="edit_note">
+              <ha-dropdown-item value="edit_comment">
                <ha-svg-icon
                  slot="icon"
                  .path=${mdiCommentEditOutline}
                ></ha-svg-icon>
                ${this._renderOverflowLabel(
                  this.hass.localize(
-                    `ui.panel.config.automation.editor.note.${this.option?.note ? "edit" : "add"}`
+                    `ui.panel.config.automation.editor.comment.${this.option?.comment ? "edit" : "add"}`
                  )
                )}
              </ha-dropdown-item>
@@ -392,8 +394,8 @@ export default class HaAutomationOptionRow extends LitElement {
      case "rename":
        this._renameOption();
        break;
-      case "edit_note":
-        this._editNoteOption();
+      case "edit_comment":
+        this._editCommentOption();
        break;
      case "delete":
        this._removeOption();
@@ -458,28 +460,28 @@ export default class HaAutomationOptionRow extends LitElement {
    }
  };

-  private _editNoteOption = async (): Promise<void> => {
+  private _editCommentOption = async (): Promise<void> => {
    if (!this.option) {
      return;
    }
-    const note = await showPromptDialog(this, {
+    const comment = await showPromptDialog(this, {
      title: this.hass.localize(
-        `ui.panel.config.automation.editor.note.${this.option.note ? "edit" : "add"}`
+        `ui.panel.config.automation.editor.comment.${this.option.comment ? "edit" : "add"}`
      ),
      inputLabel: this.hass.localize(
-        "ui.panel.config.automation.editor.note.label"
+        "ui.panel.config.automation.editor.comment.label"
      ),
      inputType: "string",
-      defaultValue: this.option.note,
+      defaultValue: this.option.comment,
      confirmText: this.hass.localize("ui.common.submit"),
      multiline: true,
    });
-    if (note !== null) {
+    if (comment !== null) {
      const value: Option = { ...this.option };
-      if (note === "") {
-        delete value.note;
+      if (comment === "") {
+        delete value.comment;
      } else {
-        value.note = note;
+        value.comment = comment;
      }
      fireEvent(this, "value-changed", {
        value,
@@ -535,11 +537,11 @@ export default class HaAutomationOptionRow extends LitElement {
      rename: () => {
        this._renameOption();
      },
-      editNote: this._editNoteOption,
+      editComment: this._editCommentOption,
      delete: this._removeOption,
      duplicate: this._duplicateOption,
      defaultOption: !!this.defaultActions,
-      note: sidebarOption?.note,
+      comment: sidebarOption?.comment,
    } satisfies OptionSidebarConfig);
    this._selected = true;
    this._collapsed = false;
@@ -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-note";
+import "../ha-automation-comment";
 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_note">
+      <ha-dropdown-item slot="menu-items" value="edit_comment">
        <ha-svg-icon slot="icon" .path=${mdiCommentEditOutline}></ha-svg-icon>
        <div class="overflow-label">
          ${this.hass.localize(
-            `ui.panel.config.automation.editor.note.${this.config.config.action.note ? "edit" : "add"}`
+            `ui.panel.config.automation.editor.comment.${this.config.config.action.comment ? "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.note?.trim() && !this.yamlMode
-        ? html`<ha-automation-note
-            @edit-note=${this.config.editNote}
-            .note=${this.config.config.action.note}
-          ></ha-automation-note>`
+      ${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>`
        : nothing}
    </ha-automation-sidebar-card>`;
  }
@@ -442,8 +442,8 @@ export default class HaAutomationSidebarAction extends LitElement {
      case "rename":
        this.config.rename();
        break;
-      case "edit_note":
-        this.config.editNote();
+      case "edit_comment":
+        this.config.editComment();
        break;
      case "run":
        this.config.run();
@@ -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-note";
+import "../ha-automation-comment";
 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_note"
+        value="edit_comment"
        .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.note.${this.config.config.note ? "edit" : "add"}`
+            `ui.panel.config.automation.editor.comment.${this.config.config.comment ? "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.note?.trim() && !this.yamlMode
-        ? html`<ha-automation-note
-            @edit-note=${this.config.editNote}
-            .note=${this.config.config.note}
-          ></ha-automation-note>`
+      ${this.config.config.comment?.trim() && !this.yamlMode
+        ? html`<ha-automation-comment
+            @edit-comment=${this.config.editComment}
+            .comment=${this.config.config.comment}
+          ></ha-automation-comment>`
        : nothing}
      <div class="testing-wrapper">
        <div
@@ -417,8 +417,8 @@ export default class HaAutomationSidebarCondition extends LitElement {
      case "rename":
        this.config.rename();
        break;
-      case "edit_note":
-        this.config.editNote();
+      case "edit_comment":
+        this.config.editComment();
        break;
      case "test":
        this.config.test();
@@ -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-note";
+import "../ha-automation-comment";
 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_note"
+              value="edit_comment"
              .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.note.${this.config.note ? "edit" : "add"}`
+                  `ui.panel.config.automation.editor.comment.${this.config.comment ? "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.note?.trim()
-        ? html`<ha-automation-note
-            @edit-note=${this.config.editNote}
-            .note=${this.config.note}
-          ></ha-automation-note>`
+      ${!this.config.defaultOption && this.config.comment?.trim()
+        ? html`<ha-automation-comment
+            @edit-comment=${this.config.editComment}
+            .comment=${this.config.comment}
+          ></ha-automation-comment>`
        : nothing}
    </ha-automation-sidebar-card>`;
  }
@@ -164,8 +164,8 @@ export default class HaAutomationSidebarOption extends LitElement {
      case "rename":
        this.config.rename();
        break;
-      case "edit_note":
-        this.config.editNote();
+      case "edit_comment":
+        this.config.editComment();
        break;
      case "duplicate":
        this.config.duplicate();
@@ -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-note";
+import "../ha-automation-comment";
 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_note">
+      <ha-dropdown-item slot="menu-items" value="edit_comment">
        <ha-svg-icon slot="icon" .path=${mdiCommentEditOutline}></ha-svg-icon>
        <div class="overflow-label">
          ${this.hass.localize(
-            `ui.panel.config.automation.editor.note.${this.config.config.field.description ? "edit" : "add"}`
+            `ui.panel.config.automation.editor.comment.${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-note
-            @edit-note=${this.config.editNote}
-            .note=${this.config.config.field.description}
-          ></ha-automation-note>`
+        ? html`<ha-automation-comment
+            @edit-comment=${this.config.editComment}
+            .comment=${this.config.config.field.description}
+          ></ha-automation-comment>`
        : nothing}
    </ha-automation-sidebar-card>`;
  }
@@ -189,8 +189,8 @@ export default class HaAutomationSidebarScriptField extends LitElement {
      case "toggle_yaml_mode":
        this._toggleYamlMode();
        break;
-      case "edit_note":
-        this.config.editNote();
+      case "edit_comment":
+        this.config.editComment();
        break;
      case "delete":
        this.config.delete();
@@ -34,7 +34,7 @@ import {
 } from "../../../../data/trigger";
 import type { HomeAssistant } from "../../../../types";
 import { isMac } from "../../../../util/is_mac";
-import "../ha-automation-note";
+import "../ha-automation-comment";
 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_note"
+              value="edit_comment"
              .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.note.${(this.config.config as Exclude<Trigger, TriggerList>).note ? "edit" : "add"}`
+                  `ui.panel.config.automation.editor.comment.${(this.config.config as Exclude<Trigger, TriggerList>).comment ? "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.note?.trim() &&
+        this.config.config.comment?.trim() &&
        !this.yamlMode
-          ? html`<ha-automation-note
-              @edit-note=${this.config.editNote}
-              .note=${this.config.config.note}
-            ></ha-automation-note>`
+          ? html`<ha-automation-comment
+              @edit-comment=${this.config.editComment}
+              .comment=${this.config.config.comment}
+            ></ha-automation-comment>`
          : nothing}
      </ha-automation-sidebar-card>
    `;
@@ -401,8 +401,8 @@ export default class HaAutomationSidebarTrigger extends LitElement {
      case "rename":
        this.config.rename();
        break;
-      case "edit_note":
-        this.config.editNote();
+      case "edit_comment":
+        this.config.editComment();
        break;
      case "show_id":
        this._showTriggerId();
@@ -4,7 +4,7 @@ export const baseTriggerStruct = object({
  trigger: string(),
  id: optional(string()),
  enabled: optional(boolean()),
-  note: optional(string()),
+  comment: optional(string()),
 });

 export const forDictStruct = object({
@@ -53,14 +53,14 @@ export const rowStyles = css`
    position: absolute;
  }

-  .note-indicator {
+  .comment-indicator {
    color: var(--ha-color-on-neutral-normal);
  }
-  .note-indicator + ha-tooltip::part(body) {
+  .comment-indicator + ha-tooltip::part(body) {
    cursor: default;
    max-width: 300px;
  }
-  .note-indicator + ha-tooltip p {
+  .comment-indicator + ha-tooltip p {
    white-space: pre-wrap;
    margin: 0;
  }
@@ -141,7 +141,7 @@ export default class HaAutomationTriggerEditor extends LitElement {
    ev.stopPropagation();
    const value = {
      ...(this.trigger.alias ? { alias: this.trigger.alias } : {}),
-      ...(this.trigger.note ? { note: this.trigger.note } : {}),
+      ...(this.trigger.comment ? { comment: this.trigger.comment } : {}),
      ...ev.detail.value,
    };
    fireEvent(this, "value-changed", { value });
@@ -1,6 +1,7 @@
 import "@home-assistant/webawesome/dist/components/divider/divider";
 import { consume } from "@lit/context";
 import {
+  mdiAlert,
  mdiAppleKeyboardCommand,
  mdiArrowDown,
  mdiArrowUp,
@@ -28,6 +29,7 @@ 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";
@@ -48,15 +50,21 @@ 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 { isTrigger, subscribeTrigger } from "../../../../data/automation";
+import {
+  automationConfigContext,
+  isTrigger,
+  subscribeTrigger,
+} from "../../../../data/automation";
 import { describeTrigger } from "../../../../data/automation_i18n";
 import { validateConfig } from "../../../../data/config";
 import { fullEntitiesContext } from "../../../../data/context";
@@ -73,6 +81,7 @@ 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";
@@ -178,6 +187,30 @@ 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;
  }
@@ -224,9 +257,9 @@ export default class HaAutomationTriggerRow extends LitElement {
            ?.target
        : undefined;

-    const noteTooltipText = truncateWithEllipsis(
+    const commentTooltipText = truncateWithEllipsis(
      (type !== "list" &&
-        (this.trigger as Exclude<Trigger, TriggerList>).note?.trim()) ||
+        (this.trigger as Exclude<Trigger, TriggerList>).comment?.trim()) ||
        "",
      250
    );
@@ -244,6 +277,28 @@ 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(
@@ -253,17 +308,19 @@ export default class HaAutomationTriggerRow extends LitElement {
            )
          : nothing}
        ${type !== "list" &&
-        (this.trigger as Exclude<Trigger, TriggerList>).note?.trim()
+        (this.trigger as Exclude<Trigger, TriggerList>).comment?.trim()
          ? html`
              <ha-svg-icon
-                id="note-icon"
+                id="comment-icon"
                .path=${mdiCommentTextOutline}
                .label=${this.hass.localize(
-                  "ui.panel.config.automation.editor.note.label"
+                  "ui.panel.config.automation.editor.comment.label"
                )}
-                class="note-indicator"
+                class="comment-indicator"
              ></ha-svg-icon>
-              <ha-tooltip for="note-icon"><p>${noteTooltipText}</p></ha-tooltip>
+              <ha-tooltip for="comment-icon"
+                ><p>${commentTooltipText}</p></ha-tooltip
+              >
            `
          : nothing}
      </h3>
@@ -307,14 +364,14 @@ export default class HaAutomationTriggerRow extends LitElement {
          )}
        </ha-dropdown-item>
        ${type !== "list"
-          ? html`<ha-dropdown-item value="edit_note">
+          ? html`<ha-dropdown-item value="edit_comment">
              <ha-svg-icon
                slot="icon"
                .path=${mdiCommentEditOutline}
              ></ha-svg-icon>
              ${this._renderOverflowLabel(
                this.hass.localize(
-                  `ui.panel.config.automation.editor.note.${(this.trigger as Exclude<Trigger, TriggerList>).note ? "edit" : "add"}`
+                  `ui.panel.config.automation.editor.comment.${(this.trigger as Exclude<Trigger, TriggerList>).comment ? "edit" : "add"}`
                )
              )}
            </ha-dropdown-item>`
@@ -695,7 +752,7 @@ export default class HaAutomationTriggerRow extends LitElement {
      rename: () => {
        this._renameTrigger();
      },
-      editNote: this._editNoteTrigger,
+      editComment: this._editCommentTrigger,
      toggleYamlMode: () => {
        this._toggleYamlMode();
        this.openSidebar();
@@ -839,27 +896,27 @@ export default class HaAutomationTriggerRow extends LitElement {
    }
  };

-  private _editNoteTrigger = async (): Promise<void> => {
+  private _editCommentTrigger = async (): Promise<void> => {
    if (isTriggerList(this.trigger)) return;
    const trigger = this.trigger;
-    const note = await showPromptDialog(this, {
+    const comment = await showPromptDialog(this, {
      title: this.hass.localize(
-        `ui.panel.config.automation.editor.note.${trigger.note ? "edit" : "add"}`
+        `ui.panel.config.automation.editor.comment.${trigger.comment ? "edit" : "add"}`
      ),
      inputLabel: this.hass.localize(
-        "ui.panel.config.automation.editor.note.label"
+        "ui.panel.config.automation.editor.comment.label"
      ),
      inputType: "string",
-      defaultValue: trigger.note,
+      defaultValue: trigger.comment,
      confirmText: this.hass.localize("ui.common.submit"),
      multiline: true,
    });
-    if (note !== null) {
+    if (comment !== null) {
      const value = { ...trigger };
-      if (note === "") {
-        delete value.note;
+      if (comment === "") {
+        delete value.comment;
      } else {
-        value.note = note;
+        value.comment = comment;
      }
      fireEvent(this, "value-changed", {
        value,
@@ -984,8 +1041,8 @@ export default class HaAutomationTriggerRow extends LitElement {
      case "rename":
        this._renameTrigger();
        break;
-      case "edit_note":
-        this._editNoteTrigger();
+      case "edit_comment":
+        this._editCommentTrigger();
        break;
      case "duplicate":
        this._duplicateTrigger();
@@ -8,6 +8,7 @@ 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";
@@ -21,15 +22,20 @@ import {
 } from "../../../../data/automation";
 import { subscribeLabFeature } from "../../../../data/labs";
 import type { TriggerDescriptions } from "../../../../data/trigger";
-import { isTriggerList, subscribeTriggers } from "../../../../data/trigger";
+import {
+  getNextNumericTriggerId,
+  getUniqueTriggerId,
+  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";
@@ -67,6 +73,53 @@ 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();
@@ -213,23 +266,36 @@ export default class HaAutomationTrigger extends AutomationSortableListMixin<Tri
  private _addTrigger = (value: string, target?: HassServiceTarget) => {
    let triggers: Trigger[];
    if (value === PASTE_VALUE) {
-      triggers = this.triggers.concat(deepClone(this._clipboard!.trigger!));
-    } else if (isDynamic(value)) {
-      triggers = this.triggers.concat({
-        trigger: getValueFromDynamic(value),
-        target,
-      });
+      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);
    } else {
-      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 } : {}),
-      });
+      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);
    }
    this.focusLastItemOnChange = true;
    fireEvent(this, "value-changed", { value: triggers });
@@ -29,7 +29,7 @@ const DEFAULT_KEYS: (keyof PlatformTrigger)[] = [
  "trigger",
  "target",
  "alias",
-  "note",
+  "comment",
  "id",
  "variables",
  "enabled",
@@ -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,9 +13,10 @@ import "../../../../../components/ha-dropdown-item";
 import "../../../../../components/ha-icon-button";
 import "../../../../../components/input/ha-input";
 import type { HaInput } from "../../../../../components/input/ha-input";
-import type {
-  AutomationConfig,
-  WebhookTrigger,
+import {
+  automationConfigContext,
+  type AutomationConfig,
+  type WebhookTrigger,
 } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
 import { showEditorToast } from "../../editor-toast";
@@ -33,9 +34,9 @@ export class HaWebhookTrigger extends LitElement {

  @property({ type: Boolean }) public disabled = false;

-  @state() private _config?: AutomationConfig;
-
-  private _unsub?: UnsubscribeFunc;
+  @consume({ context: automationConfigContext, subscribe: true })
+  @state()
+  private _config?: AutomationConfig;

  public static get defaultConfig(): WebhookTrigger {
    return {
@@ -46,24 +47,6 @@ 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
@@ -296,7 +296,7 @@ class HaBackupConfigSchedule extends LitElement {
          .retention=${data.retention}
          @value-changed=${this._retentionChanged}
        ></ha-backup-config-retention>
-        <ha-tip
+        <ha-tip .hass=${this.hass}
          >${this.hass.localize("ui.panel.config.backup.schedule.tip", {
            backup_create: html`<a
              href=${documentationUrl(
@@ -244,6 +244,7 @@ class HaBlueprintOverview extends LitElement {
              ></ha-svg-icon>`
            : html`
                <ha-icon-overflow-menu
+                  .hass=${this.hass}
                  narrow
                  .items=${[
                    {
@@ -22,6 +22,8 @@ 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> = {};

@@ -59,6 +61,7 @@ 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 (
@@ -218,7 +218,7 @@ export class CloudAccount extends SubscribeMixin(LitElement) {
              .cloudStatus=${this.cloudStatus}
            ></cloud-ice-servers-pref>

-            <ha-tip>
+            <ha-tip .hass=${this.hass}>
              <a href="/config/voice-assistants">
                ${this.hass.localize(
                  "ui.panel.config.cloud.account.tip_moved_voice_assistants"
@@ -6,8 +6,8 @@ import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
 import "../../../../components/ha-card";
 import "../../../../components/ha-expansion-panel";
+import "../../../../components/ha-md-list-item";
 import "../../../../components/ha-switch";
-import "../../../../components/item/ha-row-item";

 import { formatDate } from "../../../../common/datetime/format_date";
 import type { HaSwitch } from "../../../../components/ha-switch";
@@ -143,7 +143,7 @@ export class CloudRemotePref extends LitElement {
              "ui.panel.config.cloud.account.remote.security_options"
            )}
          >
-            <ha-row-item>
+            <ha-md-list-item>
              <span slot="headline"
                >${this.hass.localize(
                  "ui.panel.config.cloud.account.remote.external_activation"
@@ -160,9 +160,9 @@ export class CloudRemotePref extends LitElement {
                @change=${this._toggleAllowRemoteEnabledChanged}
              >
              </ha-switch>
-            </ha-row-item>
+            </ha-md-list-item>
            <hr />
-            <ha-row-item>
+            <ha-md-list-item>
              <span slot="headline"
                >${this.hass.localize(
                  "ui.panel.config.cloud.account.remote.certificate_info"
@@ -194,7 +194,7 @@ export class CloudRemotePref extends LitElement {
                  "ui.panel.config.cloud.account.remote.more_info"
                )}
              </ha-button>
-            </ha-row-item>
+            </ha-md-list-item>
          </ha-expansion-panel>
        </div>
      </ha-card>
@@ -281,12 +281,10 @@ export class CloudRemotePref extends LitElement {
    ha-expansion-panel {
      margin-top: 16px;
    }
-    ha-row-item {
-      --ha-row-item-padding-inline: 0;
-    }
-    ha-row-item::part(headline),
-    ha-row-item::part(supporting-text) {
-      white-space: wrap;
+    ha-md-list-item {
+      --md-list-item-leading-space: 0;
+      --md-list-item-trailing-space: 0;
+      --md-item-overflow: visible;
    }
    ha-expansion-panel {
      --expansion-panel-content-padding: 0 16px;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Paul Bottein	073b4bfb91	Use checkStrategyShouldRegenerate in views, sections, and panels Replace hardcoded registry checks with checkStrategyShouldRegenerate in hui-view, hui-section, ha-panel-lovelace, and ha-panel-home. Regeneration checks are also extended to sections (previously only dashboards and views were checked). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-23 15:12:38 +02:00
Paul Bottein	8da8f4b6d8	Add registryDependencies to all built-in strategies Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-23 15:12:38 +02:00
Paul Bottein	97acff0634	Add registryDependencies and checkStrategyShouldRegenerate to strategy interface Strategies can now declare which registries they depend on via a static `registryDependencies` property. A `shouldRegenerate` method can also be implemented for custom logic. The `checkStrategyShouldRegenerate` helper uses these to decide whether regeneration is needed, falling back to checking entities, devices, areas, and floors by default. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-23 15:12:38 +02:00
Paul Bottein	7656a40d4e	Refactor lovelace view lifecycle to avoid unnecessary DOM rebuilds - Remove `force` flag from `hui-root` that was clearing the entire view cache and destroying all cached view DOM on any config change. Views now receive updated lovelace in place and handle config changes internally. - Add `_cleanupViewCache` to remove stale cache entries when views are added, removed, or reordered. - Remove `@ll-rebuild` handler from `hui-root`. Cards and badges already handle `ll-rebuild` via their `hui-card`/`hui-badge` wrappers. Sections now always stop propagation and rebuild locally. - Add `deepEqual` guard in `hui-view._setConfig` and `hui-section._initializeConfig` to skip re-rendering when strategy regeneration produces an identical config. - Simplify `hui-view` refresh flow: remove `_refreshConfig`, `_rendered` flag, `strategy-config-changed` event, and connected/disconnected callbacks. Registry changes now debounce directly into `_initializeConfig`. - Fix `isStrategy` check in `hui-view._initializeConfig` to use the raw config (before strategy expansion) rather than the generated config. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-05-23 15:12:38 +02:00