Migrate getTriggerInfos to hassless

gallery/src/ha-demo-options.ts

@@ -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";

gallery/src/ha-gallery.ts

@@ -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;
       }

gallery/src/pages/automation/describe-condition.ts

@@ -75,7 +75,17 @@ export class DemoAutomationDescribeCondition extends LitElement {
         <div class="condition">
           <span>
             ${this._condition
-              ? describeCondition(this._condition, this.hass, [])
+              ? describeCondition(
+                  this._condition,
+                  this.hass.localize,
+                  this.hass.locale,
+                  [],
+                  this.hass.states,
+                  this.hass.entities,
+                  this.hass.config,
+                  this.hass.formatEntityState,
+                  this.hass.formatEntityAttributeValue
+                )
               : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
@@ -88,7 +98,19 @@ export class DemoAutomationDescribeCondition extends LitElement {
         ${conditions.map(
           (conf) => html`
             <div class="condition">
-              <span>${describeCondition(conf as any, this.hass, [])}</span>
+              <span
+                >${describeCondition(
+                  conf as any,
+                  this.hass.localize,
+                  this.hass.locale,
+                  [],
+                  this.hass.states,
+                  this.hass.entities,
+                  this.hass.config,
+                  this.hass.formatEntityState,
+                  this.hass.formatEntityAttributeValue
+                )}</span
+              >
               <pre>${dump(conf)}</pre>
             </div>
           `

gallery/src/pages/automation/describe-trigger.ts

@@ -99,7 +99,17 @@ export class DemoAutomationDescribeTrigger extends LitElement {
         <div class="trigger">
           <span>
             ${this._trigger
-              ? describeTrigger(this._trigger, this.hass, [])
+              ? describeTrigger(
+                  this._trigger,
+                  this.hass.localize,
+                  this.hass.locale,
+                  [],
+                  this.hass.states,
+                  this.hass.entities,
+                  this.hass.config,
+                  this.hass.formatEntityState,
+                  this.hass.formatEntityAttributeValue
+                )
               : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
@@ -111,7 +121,19 @@ export class DemoAutomationDescribeTrigger extends LitElement {
         ${triggers.map(
           (conf) => html`
             <div class="trigger">
-              <span>${describeTrigger(conf as any, this.hass, [])}</span>
+              <span
+                >${describeTrigger(
+                  conf as any,
+                  this.hass.localize,
+                  this.hass.locale,
+                  [],
+                  this.hass.states,
+                  this.hass.entities,
+                  this.hass.config,
+                  this.hass.formatEntityState,
+                  this.hass.formatEntityAttributeValue
+                )}</span
+              >
               <pre>${dump(conf)}</pre>
             </div>
           `

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

@@ -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>

landing-page/src/data/supervisor.ts

@@ -13,28 +13,6 @@ export interface NetworkInfo {
   supervisor_internet: boolean;
 }
 
-interface SupervisorJob {
-  name: string;
-  reference: string | null;
-  uuid: string;
-  progress: number; // float, 0–100
-  stage: string | null;
-  done: boolean;
-  errors: {
-    type: string;
-    message: string;
-    stage: string | null;
-  }[];
-  created: string; // ISO datetime string
-  extra: Record<string, unknown> | null;
-  child_jobs: SupervisorJob[];
-}
-
-export interface SupervisorJobInfo {
-  ignore_conditions: string[];
-  jobs: SupervisorJob[];
-}
-
 export const ALTERNATIVE_DNS_SERVERS: {
   ipv4: string[];
   ipv6: string[];
@@ -79,15 +57,6 @@ export async function getSupervisorNetworkInfo(): Promise<NetworkInfo> {
   return responseData?.data;
 }
 
-export async function getSupervisorJobsInfo(): Promise<
-  HassioResponse<SupervisorJobInfo>
-> {
-  const responseData = await handleFetchPromise<
-    HassioResponse<SupervisorJobInfo>
-  >(fetch("/supervisor-api/jobs/info"));
-  return responseData;
-}
-
 export const setSupervisorNetworkDns = async (
   dnsServerIndex: number,
   primaryInterface: string

landing-page/src/ha-landing-page.ts

@@ -2,9 +2,9 @@ import { mdiOpenInNew } from "@mdi/js";
 import { css, html, nothing, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { extractSearchParam } from "../../src/common/url/search-params";
-import "../../src/components/animation/ha-fade-in";
 import "../../src/components/ha-alert";
 import "../../src/components/ha-button";
+import "../../src/components/animation/ha-fade-in";
 import "../../src/components/ha-spinner";
 import "../../src/components/ha-svg-icon";
 import "../../src/components/progress/ha-progress-bar";
@@ -15,7 +15,6 @@ import { haStyle } from "../../src/resources/styles";
 import "./components/landing-page-logs";
 import "./components/landing-page-network";
 import {
-  getSupervisorJobsInfo,
   getSupervisorNetworkInfo,
   pingSupervisor,
   type NetworkInfo,
@@ -25,7 +24,6 @@ import { LandingPageBaseElement } from "./landing-page-base-element";
 export const ASSUME_CORE_START_SECONDS = 60;
 const SCHEDULE_CORE_CHECK_SECONDS = 1;
 const SCHEDULE_FETCH_NETWORK_INFO_SECONDS = 5;
-const SCHEDULE_FETCH_JOBS_INFO_SECONDS = 2;
 
 @customElement("ha-landing-page")
 class HaLandingPage extends LandingPageBaseElement {
@@ -41,8 +39,6 @@ class HaLandingPage extends LandingPageBaseElement {
 
   @state() private _coreCheckActive = false;
 
-  @state() private _progress = -1;
-
   private _mobileApp =
     extractSearchParam("redirect_uri") === "homeassistant://auth-callback";
 
@@ -64,14 +60,7 @@ class HaLandingPage extends LandingPageBaseElement {
           ${!networkIssue && !this._supervisorError
             ? html`
                 <p>${this.localize("subheader")}</p>
-                <ha-progress-bar
-                  .indeterminate=${this._progress <= 0}
-                  .value=${this._progress > 0 ? this._progress : undefined}
-                  .loading=${this._progress >= 0}
-                  >${this._progress > 0
-                    ? `${Math.round(this._progress)}%`
-                    : nothing}</ha-progress-bar
-                >
+                <ha-progress-bar indeterminate></ha-progress-bar>
               `
             : nothing}
           ${networkIssue || this._networkInfoError
@@ -137,7 +126,6 @@ class HaLandingPage extends LandingPageBaseElement {
     import("../../src/components/ha-language-picker");
 
     this._fetchSupervisorInfo(true);
-    this._fetchSupervisorJobsInfo();
   }
 
   private _scheduleFetchSupervisorInfo() {
@@ -150,13 +138,6 @@ class HaLandingPage extends LandingPageBaseElement {
     );
   }
 
-  private _scheduleFetchSupervisorJobsInfo() {
-    setTimeout(
-      () => this._fetchSupervisorJobsInfo(),
-      SCHEDULE_FETCH_JOBS_INFO_SECONDS * 1000
-    );
-  }
-
   private _scheduleTurnOffCoreCheck() {
     setTimeout(() => {
       this._coreCheckActive = false;
@@ -184,7 +165,7 @@ class HaLandingPage extends LandingPageBaseElement {
       // assume supervisor update if ping fails -> don't show an error
       if (!this._coreCheckActive && err.message !== "ping-failed") {
         // eslint-disable-next-line no-console
-        console.error("Failed to fetch supervisor info", err);
+        console.error(err);
         this._networkInfoError = true;
       }
     }
@@ -194,33 +175,6 @@ class HaLandingPage extends LandingPageBaseElement {
     }
   }
 
-  private async _fetchSupervisorJobsInfo() {
-    try {
-      const jobsInfo = await getSupervisorJobsInfo();
-      const coreInstallJob =
-        jobsInfo.result === "ok"
-          ? jobsInfo.data.jobs.find(
-              (job) => job.name === "home_assistant_core_install"
-            )
-          : undefined;
-      if (coreInstallJob) {
-        this._progress = coreInstallJob.progress;
-      } else {
-        this._progress = -1;
-      }
-    } catch (err: any) {
-      await this._checkCoreAvailability();
-
-      if (!this._coreCheckActive) {
-        this._progress = -1;
-        // eslint-disable-next-line no-console
-        console.error("Failed to fetch supervisor jobs info", err);
-      }
-    }
-
-    this._scheduleFetchSupervisorJobsInfo();
-  }
-
   private async _checkCoreAvailability() {
     try {
       const response = await fetch("/manifest.json");
@@ -268,27 +222,21 @@ class HaLandingPage extends LandingPageBaseElement {
         flex-direction: column;
         gap: var(--ha-space-4);
       }
+      ha-language-picker {
+        min-width: 200px;
+      }
       ha-alert p {
         text-align: unset;
       }
       .footer ha-svg-icon {
         --mdc-icon-size: var(--ha-space-5);
       }
-      ha-language-picker {
-        margin-inline-start: calc(-1 * var(--ha-space-4));
-      }
-      ha-button {
-        margin-inline-end: calc(-1 * var(--ha-space-2));
-      }
       ha-fade-in {
         min-height: calc(100vh - 64px - 88px);
         display: flex;
         justify-content: center;
         align-items: center;
       }
-      ha-progress-bar {
-        --ha-progress-bar-track-height: 20px;
-      }
     `,
   ];
 }

package.json

@@ -65,6 +65,9 @@
     "@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",
@@ -87,7 +90,7 @@
     "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",
@@ -132,7 +135,7 @@
     "@babel/preset-env": "7.29.5",
     "@bundle-stats/plugin-webpack-filter": "4.22.1",
     "@eslint/js": "10.0.1",
-    "@html-eslint/eslint-plugin": "0.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",

pyproject.toml

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

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

@@ -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
-  );

src/common/navigate.ts

@@ -17,19 +17,6 @@ export interface NavigateOptions {
 // max time to wait for dialogs to close before navigating
 const DIALOG_WAIT_TIMEOUT = 500;
 
-/**
- * Stash a destination URL in the current history entry's state. If the page
- * is refreshed while a dialog is open, urlSyncMixin will navigate to this URL
- * on load instead of cleaning up the stale dialog state by going back.
- * The current URL is not changed.
- */
-export const setRefreshUrl = (path: string) => {
-  mainWindow.history.replaceState(
-    { ...mainWindow.history.state, refreshUrl: path },
-    ""
-  );
-};
-
 /**
  * Ensures all dialogs are closed before navigation.
  * Returns true if navigation can proceed, false if a dialog refused to close.

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

@@ -33,32 +33,30 @@ export class HaAutomationRowLiveTest extends LitElement {
   static styles = css`
     :host {
       position: absolute;
-      top: -5px;
       inset-inline-end: -6px;
       display: inline-block;
     }
     #indicator {
-      width: 10px;
-      height: 10px;
+      width: 12px;
+      height: 12px;
       border-radius: var(--ha-border-radius-circle);
-      border: var(--ha-border-width-md) solid;
+      border: 3px solid;
       box-sizing: border-box;
       background-color: var(--card-background-color);
-      box-shadow: 0 0 0 2px var(--card-background-color);
       transition: all var(--ha-animation-duration-normal) ease-in-out;
     }
     :host([state="pass"]) #indicator {
-      background-color: var(--ha-color-green-60);
-      border-color: var(--ha-color-green-60);
+      background-color: var(--ha-color-fill-success-loud-resting);
+      border-color: var(--ha-color-fill-success-loud-resting);
     }
     :host([state="fail"]) #indicator {
-      border-color: var(--ha-color-orange-60);
+      border-color: var(--ha-color-fill-warning-loud-resting);
     }
     :host([state="invalid"]) #indicator {
-      border-color: var(--ha-color-red-60);
+      border-color: var(--ha-color-fill-danger-loud-resting);
     }
     :host([state="unknown"]) #indicator {
-      border-color: var(--ha-color-neutral-60);
+      border-color: var(--ha-color-fill-neutral-loud-resting);
     }
   `;
 }

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

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

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

@@ -14,7 +14,6 @@ import type {
   ECElementEvent,
   LegendComponentOption,
   LineSeriesOption,
-  TooltipOption,
   XAXisOption,
   YAXisOption,
 } from "echarts/types/dist/shared";
@@ -30,59 +29,22 @@ import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
 import { listenMediaQuery } from "../../common/dom/media_query";
 import { afterNextRender } from "../../common/util/render-status";
+import { filterXSS } from "../../common/util/xss";
 import { uiContext } from "../../data/context";
 import type { Themes } from "../../data/ws-themes";
-import type {
-  ECOption,
-  HaECOption,
-  HaECSeries,
-  HaECSeriesItem,
-  HaTooltipOption,
-} from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts/echarts";
 import type { HomeAssistant, HomeAssistantUI } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
 import "../ha-icon-button";
 import { formatTimeLabel } from "./axis-label";
 import { downSampleLineData } from "./down-sample";
-import { wrapLitTooltipFormatter } from "./lit-tooltip-formatter";
 
 export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 const LEGEND_OVERFLOW_LIMIT = 10;
 const LEGEND_OVERFLOW_LIMIT_MOBILE = 6;
 const DOUBLE_TAP_TIME = 300;
 
-type RawSeriesOption = Exclude<
-  NonNullable<ECOption["series"]>,
-  readonly unknown[]
->;
-
-const toEChartsFormatter = (
-  fn: ReturnType<typeof wrapLitTooltipFormatter>
-): NonNullable<TooltipOption["formatter"]> =>
-  fn as NonNullable<TooltipOption["formatter"]>;
-
-const convertHaTooltipFormatter = (tooltip: HaTooltipOption): TooltipOption => {
-  const { formatter, ...rest } = tooltip;
-  const next: TooltipOption = { ...rest };
-  if (typeof formatter === "function") {
-    next.formatter = toEChartsFormatter(wrapLitTooltipFormatter(formatter));
-  } else if (formatter !== undefined) {
-    next.formatter = formatter;
-  }
-  return next;
-};
-
-const processSeriesTooltipFormatter = (s: HaECSeriesItem): RawSeriesOption => {
-  if (s.tooltip && typeof s.tooltip.formatter === "function") {
-    return {
-      ...s,
-      tooltip: convertHaTooltipFormatter(s.tooltip),
-    } as RawSeriesOption;
-  }
-  return s as RawSeriesOption;
-};
-
 export type CustomLegendOption = ECOption["legend"] & {
   type: "custom";
   data?: {
@@ -104,9 +66,9 @@ export class HaChartBase extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public data: HaECSeries = [];
+  @property({ attribute: false }) public data: ECOption["series"] = [];
 
-  @property({ attribute: false }) public options?: HaECOption;
+  @property({ attribute: false }) public options?: ECOption;
 
   @property({ type: String }) public height?: string;
 
@@ -652,7 +614,7 @@ export class HaChartBase extends LitElement {
 
   // Return an array of all IDs associated with the legend item of the primaryId
   private _getAllIdsFromLegend(
-    options: HaECOption | undefined,
+    options: ECOption | undefined,
     primaryId: string
   ): string[] {
     if (!options) return [primaryId];
@@ -672,7 +634,7 @@ export class HaChartBase extends LitElement {
 
   // Parses the options structure and adds all ids of unselected legend items to hiddenDatasets.
   // No known need to remove items at this time.
-  private _updateHiddenStatsFromOptions(options: HaECOption | undefined) {
+  private _updateHiddenStatsFromOptions(options: ECOption | undefined) {
     if (!options) return;
     const legend = ensureArray(this.options?.legend || [])[0] as
       | LegendComponentOption
@@ -795,34 +757,22 @@ export class HaChartBase extends LitElement {
       xAxis,
     };
 
-    if (options.tooltip) {
-      const isMobile = window.matchMedia(
-        "all and (max-width: 450px), all and (max-height: 500px)"
-      ).matches;
-      // Shallow-copy each tooltip object so wrap/mobile mutations don't leak
-      // back into the caller's options.tooltip reference (callers may cache the
-      // options object via memoizeOne, in which case in-place mutation would
-      // pollute that cache across chart instances).
-      const processTooltip = (tooltip: HaTooltipOption): TooltipOption => {
-        const next = convertHaTooltipFormatter(tooltip);
-        if (isMobile) {
-          // mobile charts are full width so we need to confine the tooltip to the chart
-          next.confine = true;
-          next.appendTo = undefined;
-          next.triggerOn = "click";
-        }
-        return next;
-      };
-      const haTooltip = options.tooltip;
-      const processedTooltip = Array.isArray(haTooltip)
-        ? haTooltip.map(processTooltip)
-        : processTooltip(haTooltip);
-      return {
-        ...options,
-        tooltip: processedTooltip,
-      } as ECOption;
+    const isMobile = window.matchMedia(
+      "all and (max-width: 450px), all and (max-height: 500px)"
+    ).matches;
+    if (isMobile && options.tooltip) {
+      // mobile charts are full width so we need to confine the tooltip to the chart
+      const tooltips = Array.isArray(options.tooltip)
+        ? options.tooltip
+        : [options.tooltip];
+      tooltips.forEach((tooltip) => {
+        tooltip.confine = true;
+        tooltip.appendTo = undefined;
+        tooltip.triggerOn = "click";
+      });
+      options.tooltip = tooltips;
     }
-    return options as ECOption;
+    return options;
   }
 
   private _createTheme(style: CSSStyleDeclaration) {
@@ -1006,16 +956,30 @@ 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;
-      let result = {
-        ...s,
-        data,
-      } as HaECSeriesItem;
       if (data && s.type === "line") {
-        if ((s as LineSeriesOption).sampling === "minmax") {
+        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
               ? xAxis.min.getTime()
@@ -1030,8 +994,8 @@ export class HaChartBase extends LitElement {
                 ? xAxis.max
                 : undefined
             : undefined;
-          result = {
-            ...result,
+          return {
+            ...s,
             sampling: undefined,
             data: downSampleLineData(
               data as LineSeriesOption["data"],
@@ -1039,10 +1003,11 @@ export class HaChartBase extends LitElement {
               minX,
               maxX
             ),
-          } as HaECSeriesItem;
+          };
         }
       }
-      return processSeriesTooltipFormatter(result);
+      const name = filterXSS(String(s.name ?? s.id ?? ""));
+      return { ...s, name, data };
     });
     return series as ECOption["series"];
   }
@@ -1379,8 +1344,8 @@ export class HaChartBase extends LitElement {
   }
 
   private _compareCustomLegendOptions(
-    oldOptions: HaECOption | undefined,
-    newOptions: HaECOption | undefined
+    oldOptions: ECOption | undefined,
+    newOptions: ECOption | undefined
   ): boolean {
     const oldLegends = ensureArray(
       oldOptions?.legend || []

src/components/chart/ha-chart-tooltip-marker.ts

@@ -1,41 +0,0 @@
-import type { PropertyValues } from "lit";
-import { css, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-
-@customElement("ha-chart-tooltip-marker")
-class HaChartTooltipMarker extends LitElement {
-  @property() public color = "";
-
-  @property({ type: Boolean, reflect: true }) public rtl = false;
-
-  protected willUpdate(changed: PropertyValues) {
-    if (changed.has("color")) {
-      this.style.backgroundColor = this.color;
-    }
-  }
-
-  protected render() {
-    return nothing;
-  }
-
-  static styles = css`
-    :host {
-      display: inline-block;
-      margin-inline-end: 4px;
-      margin-inline-start: initial;
-      border-radius: 10px;
-      width: 10px;
-      height: 10px;
-      vertical-align: middle;
-    }
-    :host([rtl]) {
-      direction: rtl;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-chart-tooltip-marker": HaChartTooltipMarker;
-  }
-}

src/components/chart/ha-network-graph.ts

@@ -1,6 +1,6 @@
 import type { EChartsType } from "echarts/core";
 import type { GraphSeriesOption } from "echarts/charts";
-import type { PropertyValues, TemplateResult } from "lit";
+import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
 
@@ -11,7 +11,7 @@ import type {
 import { mdiFormatTextVariant, mdiGoogleCirclesGroup } from "@mdi/js";
 import memoizeOne from "memoize-one";
 import { listenMediaQuery } from "../../common/dom/media_query";
-import type { HaECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts/echarts";
 import "./ha-chart-base";
 import type { HaChartBase } from "./ha-chart-base";
 import type { HomeAssistant } from "../../types";
@@ -78,7 +78,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
 
   @property({ attribute: false }) public tooltipFormatter?: (
     params: TopLevelFormatterParams
-  ) => TemplateResult | typeof nothing | null;
+  ) => string;
 
   /**
    * Optional callback that returns additional searchable strings for a node.
@@ -182,7 +182,7 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
   }
 
   private _createOptions = memoizeOne(
-    (categories?: NetworkData["categories"]): HaECOption => ({
+    (categories?: NetworkData["categories"]): ECOption => ({
       tooltip: {
         trigger: "item",
         confine: true,

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

@@ -11,10 +11,10 @@ import { ResizeController } from "@lit-labs/observers/resize-controller";
 import { fireEvent } from "../../common/dom/fire_event";
 import SankeyChart from "../../resources/echarts/components/sankey/install";
 import type { HomeAssistant } from "../../types";
-import type { HaECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts/echarts";
 import { measureTextWidth } from "../../util/text";
+import { filterXSS } from "../../common/util/xss";
 import "./ha-chart-base";
-import "./ha-chart-tooltip-marker";
 import { NODE_SIZE } from "../trace/hat-graph-const";
 import "../ha-alert";
 
@@ -71,7 +71,7 @@ export class HaSankeyChart extends LitElement {
   });
 
   render() {
-    const options: HaECOption = {
+    const options = {
       grid: {
         top: 0,
         bottom: 0,
@@ -83,7 +83,7 @@ export class HaSankeyChart extends LitElement {
         formatter: this._renderTooltip,
         appendTo: document.body,
       },
-    };
+    } as ECOption;
 
     return html`<ha-chart-base
       .hass=${this.hass}
@@ -101,22 +101,14 @@ export class HaSankeyChart extends LitElement {
     const value = this.valueFormatter
       ? this.valueFormatter(data.value)
       : data.value;
-    // Keep numbers and units left-to-right, even in RTL locales.
-    const formattedValue = html`<div style="direction:ltr; display: inline;">
-      ${value}
-    </div>`;
     if (data.id) {
       const node = this.data.nodes.find((n) => n.id === data.id);
-      return html`<ha-chart-tooltip-marker
-          .color=${String(params.color ?? "")}
-        ></ha-chart-tooltip-marker>
-        ${node?.label ?? data.id}<br />${formattedValue}`;
+      return `${params.marker} ${filterXSS(node?.label ?? data.id)}<br>${value}`;
     }
     if (data.source && data.target) {
       const source = this.data.nodes.find((n) => n.id === data.source);
       const target = this.data.nodes.find((n) => n.id === data.target);
-      return html`${source?.label ?? data.source} →
-        ${target?.label ?? data.target}<br />${formattedValue}`;
+      return `${filterXSS(source?.label ?? data.source)} → ${filterXSS(target?.label ?? data.target)}<br>${value}`;
     }
     return null;
   };

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

@@ -5,10 +5,10 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { getGraphColorByIndex } from "../../common/color/colors";
-import type { HaECOption } from "../../resources/echarts/echarts";
+import { filterXSS } from "../../common/util/xss";
+import type { ECOption } from "../../resources/echarts/echarts";
 import type { HomeAssistant } from "../../types";
 import "./ha-chart-base";
-import "./ha-chart-tooltip-marker";
 
 // eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/consistent-type-imports
 let SunburstChart: typeof import("echarts/lib/chart/sunburst/install");
@@ -50,13 +50,13 @@ export class HaSunburstChart extends LitElement {
       return nothing;
     }
 
-    const options: HaECOption = {
+    const options = {
       tooltip: {
         trigger: "item",
         formatter: this._renderTooltip,
         appendTo: document.body,
       },
-    };
+    } as ECOption;
 
     return html`<ha-chart-base
       .data=${this._createData(this.data)}
@@ -71,10 +71,7 @@ export class HaSunburstChart extends LitElement {
     const value = this.valueFormatter
       ? this.valueFormatter(data.value)
       : data.value;
-    return html`<ha-chart-tooltip-marker
-        .color=${String(params.color ?? "")}
-      ></ha-chart-tooltip-marker>
-      ${data.name}<br />${value}`;
+    return `${params.marker} ${filterXSS(data.name)}<br>${value}`;
   };
 
   private _createData = memoizeOne(

src/components/chart/lit-tooltip-formatter.ts

@@ -1,41 +0,0 @@
-import { nothing, render } from "lit";
-import type { LitTooltipFormatter } from "../../resources/echarts/echarts";
-
-type WrappedTooltipFormatter = (
-  params: unknown,
-  ticket?: string
-) => HTMLElement | null;
-
-export type { WrappedTooltipFormatter };
-
-const litTooltipFormatterCache = new WeakMap<
-  LitTooltipFormatter | WrappedTooltipFormatter,
-  WrappedTooltipFormatter
->();
-
-export const wrapLitTooltipFormatter = (
-  fn: LitTooltipFormatter | WrappedTooltipFormatter
-): WrappedTooltipFormatter => {
-  const cached = litTooltipFormatterCache.get(fn);
-  if (cached) return cached;
-  const container = document.createElement("div");
-  // display:contents keeps the wrapper layout-invisible so its children act as
-  // direct children of echarts' tooltip box, matching the prior innerHTML behavior.
-  container.style.display = "contents";
-  const wrapped: WrappedTooltipFormatter = (params, ticket) => {
-    const result = (fn as LitTooltipFormatter)(params, ticket);
-    // `nothing` and null/undefined must all suppress the tooltip. Returning
-    // `nothing` to echarts via `render(nothing, container)` leaves a Lit
-    // comment marker behind so echarts would show an empty box; convert it to
-    // null instead so `setContent(null)` clears innerHTML and `show()` hides.
-    if (result === null || result === undefined || result === nothing) {
-      return null;
-    }
-    render(result, container);
-    return container;
-  };
-  litTooltipFormatterCache.set(fn, wrapped);
-  // Idempotent re-wrap: looking up the wrapped fn returns itself.
-  litTooltipFormatterCache.set(wrapped, wrapped);
-  return wrapped;
-};

src/components/chart/state-history-chart-line.ts

@@ -1,5 +1,5 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { html, LitElement, nothing } from "lit";
+import type { PropertyValues } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { VisualMapComponentOption } from "echarts/components";
 import type { LineSeriesOption } from "echarts/charts";
@@ -12,9 +12,8 @@ import type { LineChartEntity, LineChartState } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
-import "./ha-chart-tooltip-marker";
 import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
-import type { HaECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts/echarts";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import {
   getNumberFormatOptions,
@@ -25,6 +24,7 @@ import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
 import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
 import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
+import { filterXSS } from "../../common/util/xss";
 import { computeAttributeValueDisplay } from "../../common/entity/compute_attribute_display";
 
 const safeParseFloat = (value) => {
@@ -108,7 +108,7 @@ export class StateHistoryChartLine extends LitElement {
 
   private _datasetToDataIndex: number[] = [];
 
-  @state() private _chartOptions?: HaECOption;
+  @state() private _chartOptions?: ECOption;
 
   private _hiddenStats = new Set<string>();
 
@@ -141,11 +141,12 @@ export class StateHistoryChartLine extends LitElement {
 
   private _renderTooltip = (params: any) => {
     const time = params[0].axisValue;
-    const title = formatDateTimeWithSeconds(
-      new Date(time),
-      this.hass.locale,
-      this.hass.config
-    );
+    const title =
+      formatDateTimeWithSeconds(
+        new Date(time),
+        this.hass.locale,
+        this.hass.config
+      ) + "<br>";
     const datapoints: Record<string, any>[] = [];
     this._chartData.forEach((dataset, index) => {
       if (
@@ -176,44 +177,52 @@ export class StateHistoryChartLine extends LitElement {
         seriesName: dataset.name,
         seriesIndex: index,
         value: lastData,
-        color: dataset.color,
+        // HTML copied from echarts. May change based on options
+        marker: `<span style="display:inline-block;margin-right:4px;margin-inline-end:4px;margin-inline-start:initial;border-radius:10px;width:10px;height:10px;background-color:${dataset.color};"></span>`,
       });
     });
     const unit = this.unit
       ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
       : "";
 
-    return html`${title}${datapoints.map((param) => {
-      const entityId = this._entityIds[param.seriesIndex];
-      const stateObj = this.hass.states[entityId];
-      const entry = this.hass.entities[entityId];
-      const stateValue = String(param.value[1]);
-      const value = stateObj
-        ? this.hass.formatEntityState(stateObj, stateValue)
-        : `${formatNumber(
-            stateValue,
-            this.hass.locale,
-            getNumberFormatOptions(undefined, entry)
-          )}${unit}`;
-      const dataIndex = this._datasetToDataIndex[param.seriesIndex];
-      const data = this.data[dataIndex];
-      let statSuffix: TemplateResult | typeof nothing = nothing;
-      if (data.statistics && data.statistics.length > 0) {
-        const source =
-          data.states.length === 0 ||
-          param.value[0] < data.states[0].last_changed
-            ? this.hass.localize("ui.components.history_charts.source_stats")
-            : this.hass.localize("ui.components.history_charts.source_history");
-        // Five non-breaking spaces indent the source label.
-        statSuffix = html`<br />${"\u00a0".repeat(5)}${source}`;
-      }
-      return html`<br /><ha-chart-tooltip-marker
-          .color=${String(param.color ?? "")}
-        ></ha-chart-tooltip-marker>
-        ${param.seriesName
-          ? html`${param.seriesName}: `
-          : nothing}${value}${statSuffix}`;
-    })}`;
+    return (
+      title +
+      datapoints
+        .map((param) => {
+          const entityId = this._entityIds[param.seriesIndex];
+          const stateObj = this.hass.states[entityId];
+          const entry = this.hass.entities[entityId];
+          const stateValue = String(param.value[1]);
+          let value = stateObj
+            ? this.hass.formatEntityState(stateObj, stateValue)
+            : `${formatNumber(
+                stateValue,
+                this.hass.locale,
+                getNumberFormatOptions(undefined, entry)
+              )}${unit}`;
+          const dataIndex = this._datasetToDataIndex[param.seriesIndex];
+          const data = this.data[dataIndex];
+          if (data.statistics && data.statistics.length > 0) {
+            value += "<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
+            const source =
+              data.states.length === 0 ||
+              param.value[0] < data.states[0].last_changed
+                ? `${this.hass.localize(
+                    "ui.components.history_charts.source_stats"
+                  )}`
+                : `${this.hass.localize(
+                    "ui.components.history_charts.source_history"
+                  )}`;
+            value += source;
+          }
+
+          if (param.seriesName) {
+            return `${param.marker} ${filterXSS(param.seriesName)}: ${value}`;
+          }
+          return `${param.marker} ${value}`;
+        })
+        .join("<br>")
+    );
   };
 
   private _datasetHidden(ev: CustomEvent) {

src/components/chart/state-history-chart-timeline.ts

@@ -1,10 +1,11 @@
 import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type {
   CustomSeriesOption,
   CustomSeriesRenderItem,
   ECElementEvent,
+  TooltipFormatterCallback,
   TooltipPositionCallbackParams,
 } from "echarts/types/dist/shared";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
@@ -14,9 +15,8 @@ import type { TimelineEntity } from "../../data/history";
 import type { HomeAssistant } from "../../types";
 import { MIN_TIME_BETWEEN_UPDATES } from "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
-import "./ha-chart-tooltip-marker";
 import { computeTimelineColor } from "./timeline-color";
-import type { HaECOption, HaECSeries } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts/echarts";
 import echarts from "../../resources/echarts/echarts";
 import { luminosity } from "../../common/color/rgb";
 import { hex2rgb } from "../../common/color/convert-color";
@@ -57,7 +57,7 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @state() private _chartData: CustomSeriesOption[] = [];
 
-  @state() private _chartOptions?: HaECOption;
+  @state() private _chartOptions?: ECOption;
 
   @state() private _yWidth = 0;
 
@@ -69,7 +69,7 @@ export class StateHistoryChartTimeline extends LitElement {
         .hass=${this.hass}
         .options=${this._chartOptions}
         .height=${`${this.data.length * 30 + 30}px`}
-        .data=${this._chartData as HaECSeries}
+        .data=${this._chartData as ECOption["series"]}
         small-controls
         @chart-click=${this._handleChartClick}
         @chart-zoom=${this._handleDataZoom}
@@ -132,35 +132,42 @@ export class StateHistoryChartTimeline extends LitElement {
     return rect;
   };
 
-  private _renderTooltip = (params: TooltipPositionCallbackParams) => {
-    const { value, name, seriesName, color } = Array.isArray(params)
-      ? params[0]
-      : params;
-    const durationInMs = value![2] - value![1];
-    const formattedDuration = `${this.hass.localize(
-      "ui.components.history_charts.duration"
-    )}: ${millisecondsToDuration(durationInMs)}`;
+  private _renderTooltip: TooltipFormatterCallback<TooltipPositionCallbackParams> =
+    (params: TooltipPositionCallbackParams) => {
+      const { value, name, marker, seriesName, color } = Array.isArray(params)
+        ? params[0]
+        : params;
+      const title = seriesName
+        ? `<h4 style="text-align: center; margin: 0;">${seriesName}</h4>`
+        : "";
+      const durationInMs = value![2] - value![1];
+      const formattedDuration = `${this.hass.localize(
+        "ui.components.history_charts.duration"
+      )}: ${millisecondsToDuration(durationInMs)}`;
 
-    const rtl = computeRTL(
-      this.hass.language,
-      this.hass.translationMetadata.translations
-    );
-    return html`${seriesName
-        ? html`<h4 style="text-align: center; margin: 0;">${seriesName}</h4>`
-        : nothing}<ha-chart-tooltip-marker
-        .color=${String(color ?? "")}
-        .rtl=${rtl}
-      ></ha-chart-tooltip-marker
-      >${name}<br />${formatDateTimeWithSeconds(
-        new Date(value![1]),
-        this.hass.locale,
-        this.hass.config
-      )}<br />${formatDateTimeWithSeconds(
-        new Date(value![2]),
-        this.hass.locale,
-        this.hass.config
-      )}<br />${formattedDuration}`;
-  };
+      const markerLocalized = !computeRTL(
+        this.hass.language,
+        this.hass.translationMetadata.translations
+      )
+        ? marker
+        : `<span style="direction: rtl;display:inline-block;margin-right:4px;margin-inline-end:4px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
+
+      const lines = [
+        markerLocalized + name,
+        formatDateTimeWithSeconds(
+          new Date(value![1]),
+          this.hass.locale,
+          this.hass.config
+        ),
+        formatDateTimeWithSeconds(
+          new Date(value![2]),
+          this.hass.locale,
+          this.hass.config
+        ),
+        formattedDuration,
+      ].join("<br>");
+      return [title, lines].join("");
+    };
 
   public willUpdate(changedProps: PropertyValues) {
     if (

src/components/chart/statistics-chart.ts

@@ -4,7 +4,7 @@ import type {
   ZRColor,
 } from "echarts/types/dist/shared";
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
@@ -34,13 +34,12 @@ import {
   isExternalStatistic,
   statisticsHaveType,
 } from "../../data/recorder";
-import type { HaECOption } from "../../resources/echarts/echarts";
+import type { ECOption } from "../../resources/echarts/echarts";
 import type { HomeAssistant } from "../../types";
 import { getPeriodicAxisLabelConfig } from "./axis-label";
 import type { CustomLegendOption } from "./ha-chart-base";
 import "./ha-chart-base";
 import { sideTooltipPosition } from "./chart-tooltip-position";
-import "./ha-chart-tooltip-marker";
 import { fillDataGapsAndRoundCaps } from "./round-caps";
 import { computeYAxisFractionDigits } from "./y-axis-fraction-digits";
 
@@ -127,7 +126,7 @@ export class StatisticsChart extends LitElement {
 
   @state() private _statisticIds: string[] = [];
 
-  @state() private _chartOptions?: HaECOption;
+  @state() private _chartOptions?: ECOption;
 
   @state() private _hiddenStats = new Set<string>();
 
@@ -252,101 +251,91 @@ export class StatisticsChart extends LitElement {
     const unit = this.unit
       ? `${blankBeforeUnit(this.unit, this.hass.locale)}${this.unit}`
       : "";
-    const rows: {
-      time?: string;
-      color: string;
-      seriesName?: string;
-      value: string;
-    }[] = [];
-    for (const param of params) {
-      if (rendered[param.seriesIndex]) continue;
-      rendered[param.seriesIndex] = true;
+    return params
+      .map((param, index: number) => {
+        if (rendered[param.seriesIndex]) return "";
+        rendered[param.seriesIndex] = true;
 
-      const statisticId = this._statisticIds[param.seriesIndex];
-      const stateObj = this.hass.states[statisticId];
-      const entry = this.hass.entities[statisticId];
-      let rawValue: string;
-      let rawTime: string;
-      if (chartIsBar) {
-        // For bar charts value is always second value.
-        rawValue = String(param.value[1]);
-        // Time value is third value (un-shifted date) if given, otherwise first value
-        let startTime: Date;
-        let endTime: Date | undefined;
-        if (param.value[2]) {
-          startTime = new Date(param.value[2]);
-          if (param.value[3]) {
-            endTime = new Date(param.value[3]);
+        const statisticId = this._statisticIds[param.seriesIndex];
+        const stateObj = this.hass.states[statisticId];
+        const entry = this.hass.entities[statisticId];
+        let rawValue: string;
+        let rawTime: string;
+        if (chartIsBar) {
+          // For bar charts value is always second value.
+          rawValue = String(param.value[1]);
+          // Time value is third value (un-shifted date) if given, otherwise first value
+          let startTime: Date;
+          let endTime: Date | undefined;
+          if (param.value[2]) {
+            startTime = new Date(param.value[2]);
+            if (param.value[3]) {
+              endTime = new Date(param.value[3]);
+            }
+          } else {
+            startTime = new Date(param.value[0]);
+          }
+          if (
+            period === "year" ||
+            period === "month" ||
+            period === "week" ||
+            period === "day"
+          ) {
+            // For year/month/day periods, show only the date
+            rawTime =
+              formatDate(startTime, this.hass.locale, this.hass.config) +
+              (endTime && period !== "day"
+                ? ` – ${formatDate(
+                    endTime,
+                    this.hass.locale,
+                    this.hass.config
+                  )}`
+                : "") +
+              "<br>";
+          } else {
+            // For other time periods, include time in render, and optionally show range
+            // if we have an end time.
+            rawTime =
+              formatDateTimeWithSeconds(
+                startTime,
+                this.hass.locale,
+                this.hass.config
+              ) +
+              (endTime
+                ? ` – ${formatTimeWithSeconds(
+                    endTime,
+                    this.hass.locale,
+                    this.hass.config
+                  )}`
+                : "") +
+              "<br>";
           }
         } else {
-          startTime = new Date(param.value[0]);
+          // For lines max series can have 3 values, as the second value is the max-min to form a band
+          rawValue = String(param.value[2] ?? param.value[1]);
+          // Time value is always first value
+          rawTime = `${formatDateTimeWithSeconds(
+            new Date(param.value[0]),
+            this.hass.locale,
+            this.hass.config
+          )} <br>`;
         }
-        if (
-          period === "year" ||
-          period === "month" ||
-          period === "week" ||
-          period === "day"
-        ) {
-          // For year/month/day periods, show only the date
-          rawTime =
-            formatDate(startTime, this.hass.locale, this.hass.config) +
-            (endTime && period !== "day"
-              ? ` – ${formatDate(endTime, this.hass.locale, this.hass.config)}`
-              : "");
-        } else {
-          // For other time periods, include time in render, and optionally show range
-          // if we have an end time.
-          rawTime =
-            formatDateTimeWithSeconds(
-              startTime,
-              this.hass.locale,
-              this.hass.config
-            ) +
-            (endTime
-              ? ` – ${formatTimeWithSeconds(
-                  endTime,
-                  this.hass.locale,
-                  this.hass.config
-                )}`
-              : "");
-        }
-      } else {
-        // For lines max series can have 3 values, as the second value is the max-min to form a band
-        rawValue = String(param.value[2] ?? param.value[1]);
-        // Time value is always first value
-        rawTime = formatDateTimeWithSeconds(
-          new Date(param.value[0]),
+
+        const options = getNumberFormatOptions(stateObj, entry) ?? {
+          maximumFractionDigits: 2,
+        };
+
+        const value = `${formatNumber(
+          rawValue,
           this.hass.locale,
-          this.hass.config
-        );
-      }
+          options
+        )}${unit}`;
 
-      const options = getNumberFormatOptions(stateObj, entry) ?? {
-        maximumFractionDigits: 2,
-      };
-
-      const value = `${formatNumber(rawValue, this.hass.locale, options)}${unit}`;
-
-      rows.push({
-        time: rows.length === 0 ? rawTime : undefined,
-        color: String(param.color ?? ""),
-        seriesName: param.seriesName,
-        value,
-      });
-    }
-
-    if (rows.length === 0) return nothing;
-
-    return html`${rows.map(
-      (row, i) =>
-        html`${row.time
-            ? html`${row.time}<br />`
-            : nothing}<ha-chart-tooltip-marker
-            .color=${row.color}
-          ></ha-chart-tooltip-marker>
-          ${row.seriesName}:
-          ${row.value}${i < rows.length - 1 ? html`<br />` : nothing}`
-    )}`;
+        const time = index === 0 ? rawTime : "";
+        return `${time}${param.marker} ${param.seriesName}: ${value}`;
+      })
+      .filter(Boolean)
+      .join("<br>");
   };
 
   private _createOptions() {

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

@@ -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 : "" }
                     )}

src/components/ha-alert.ts

@@ -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}

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

@@ -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}

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

@@ -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}

src/components/ha-check-list-item.ts

@@ -20,7 +20,6 @@ export class HaCheckListItem extends CheckListItemBase {
   separateCheckboxClick = false;
 
   async onChange(event) {
-    event.stopPropagation();
     super.onChange(event);
     fireEvent(this, event.type);
   }

src/components/ha-condition-icon.ts

@@ -1,3 +1,4 @@
+import { consume, type ContextType } from "@lit/context";
 import {
   mdiAmpersand,
   mdiClockOutline,
@@ -12,11 +13,11 @@ import {
   mdiWeatherSunny,
 } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
 import { computeDomain } from "../common/entity/compute_domain";
+import { configContext, connectionContext } from "../data/context";
 import { conditionIcon, FALLBACK_DOMAIN_ICONS } from "../data/icons";
-import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";
 
@@ -36,12 +37,18 @@ export const CONDITION_ICONS = {
 
 @customElement("ha-condition-icon")
 export class HaConditionIcon extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public condition?: string;
 
   @property() public icon?: string;
 
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  protected _connection?: ContextType<typeof connectionContext>;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  protected _config?: ContextType<typeof configContext>;
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -51,13 +58,13 @@ export class HaConditionIcon extends LitElement {
       return nothing;
     }
 
-    if (!this.hass) {
+    if (!this._connection || !this._config) {
       return this._renderFallback();
     }
 
     const icon = conditionIcon(
-      this.hass.connection,
-      this.hass.config,
+      this._connection.connection,
+      this._config.config,
       this.condition
     ).then((icn) => {
       if (icn) {

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

@@ -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}

src/components/ha-generic-picker.ts

@@ -77,7 +77,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
     | "bottom-start"
     | "bottom-end"
     | "left-start"
-    | "left-end" = "bottom";
+    | "left-end" = "bottom-start";
 
   /** If set picker shows an add button instead of textbox when value isn't set */
   @property({ attribute: "add-button-label" }) public addButtonLabel?: string;

src/components/ha-header-bar.ts

@@ -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 {

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

@@ -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>

src/components/ha-icon-picker.ts

@@ -121,6 +121,7 @@ export class HaIconPicker extends LitElement {
         .label=${this.label}
         .value=${this._value}
         .searchFn=${this._filterIcons}
+        popover-placement="bottom-start"
         @value-changed=${this._valueChanged}
       >
         <slot name="start"></slot>

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

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

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

@@ -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,

src/components/ha-language-picker.ts

@@ -152,6 +152,7 @@ export class HaLanguagePicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         .autofocus=${this.autofocus}
+        popover-placement="bottom-end"
         .notFoundLabel=${this._notFoundLabel}
         .emptyLabel=${this.hass?.localize(
           "ui.components.language-picker.no_languages"

src/components/ha-select-box.ts

@@ -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;
 

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

@@ -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
     );
   }
 

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

@@ -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;

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

@@ -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()}
       `;

src/components/ha-theme-picker.ts

@@ -82,6 +82,7 @@ export class HaThemePicker extends LitElement {
         .disabled=${this.disabled}
         .required=${this.required}
         @value-changed=${this._changed}
+        popover-placement="bottom"
       ></ha-generic-picker>
     `;
   }

src/components/ha-tip.ts

@@ -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>
     `;
   }

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

@@ -1,231 +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:
-      box-shadow var(--ha-animation-duration-normal) ease,
-      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 {

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

@@ -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;
+  }
+}

src/components/ha-trigger-icon.ts

@@ -1,3 +1,4 @@
+import { consume, type ContextType } from "@lit/context";
 import {
   mdiAvTimer,
   mdiCalendar,
@@ -18,9 +19,10 @@ import {
   mdiWebhook,
 } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
 import { computeDomain } from "../common/entity/compute_domain";
+import { configContext, connectionContext } from "../data/context";
 import { FALLBACK_DOMAIN_ICONS, triggerIcon } from "../data/icons";
 import { mdiHomeAssistant } from "../resources/home-assistant-logo-svg";
 import type { HomeAssistant } from "../types";
@@ -56,6 +58,14 @@ export class HaTriggerIcon extends LitElement {
 
   @property() public icon?: string;
 
+  @state()
+  @consume({ context: connectionContext, subscribe: true })
+  protected _connection?: ContextType<typeof connectionContext>;
+
+  @state()
+  @consume({ context: configContext, subscribe: true })
+  protected _config?: ContextType<typeof configContext>;
+
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -65,13 +75,13 @@ export class HaTriggerIcon extends LitElement {
       return nothing;
     }
 
-    if (!this.hass) {
+    if (!this._connection || !this._config) {
       return this._renderFallback();
     }
 
     const icon = triggerIcon(
-      this.hass.connection,
-      this.hass.config,
+      this._connection.connection,
+      this._config.config,
       this.trigger
     ).then((icn) => {
       if (icn) {

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

@@ -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;
   }
 }

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

@@ -1,8 +1,8 @@
 import { type LitElement, css } from "lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { 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);

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

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

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

@@ -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;
-  }
-}

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

@@ -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);

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

@@ -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"] {

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

@@ -171,16 +171,28 @@ export class HaTracePathDetails extends LitElement {
                         migrateAutomationTrigger({
                           ...currentDetail,
                         }) as Trigger,
-                        this.hass,
-                        this._entityReg
+                        this.hass.localize,
+                        this.hass.locale,
+                        this._entityReg,
+                        this.hass.states,
+                        this.hass.entities,
+                        this.hass.config,
+                        this.hass.formatEntityState,
+                        this.hass.formatEntityAttributeValue
                       )}
                     </h2>`
                   : selectedType === "condition"
                     ? html`<h2>
                         ${describeCondition(
                           currentDetail,
-                          this.hass,
-                          this._entityReg
+                          this.hass.localize,
+                          this.hass.locale,
+                          this._entityReg,
+                          this.hass.states,
+                          this.hass.entities,
+                          this.hass.config,
+                          this.hass.formatEntityState,
+                          this.hass.formatEntityAttributeValue
                         )}
                       </h2>`
                     : selectedType === "action"
@@ -215,8 +227,14 @@ export class HaTracePathDetails extends LitElement {
               .includes("condition")
               ? html`[${describeCondition(
                     currentDetail,
-                    this.hass,
-                    this._entityReg
+                    this.hass.localize,
+                    this.hass.locale,
+                    this._entityReg,
+                    this.hass.states,
+                    this.hass.entities,
+                    this.hass.config,
+                    this.hass.formatEntityState,
+                    this.hass.formatEntityAttributeValue
                   )}]<br />`
               : nothing}
             ${this.hass!.localize(

src/data/automation.ts

@@ -1,3 +1,4 @@
+import { createContext } from "@lit/context";
 import type {
   Connection,
   HassEntityAttributeBase,
@@ -9,7 +10,7 @@ import type { WeekdayShort } from "../common/datetime/weekday";
 import { navigate } from "../common/navigate";
 import type { LocalizeKeys } from "../common/translations/localize";
 import { createSearchParam } from "../common/url/search-params";
-import type { Context, HomeAssistant } from "../types";
+import type { CallWS, Context, HomeAssistant } from "../types";
 import type { BlueprintInput } from "./blueprint";
 import type { ConditionDescription } from "./condition";
 import { CONDITION_BUILDING_BLOCKS } from "./condition";
@@ -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>;
 }
@@ -485,28 +486,17 @@ export const migrateAutomationTrigger = (
     }
     delete trigger.platform;
   }
-
-  if ("options" in trigger) {
-    if (trigger.options && "behavior" in trigger.options) {
-      if (trigger.options.behavior === "any") {
-        trigger.options.behavior = "each";
-      } else if (trigger.options.behavior === "last") {
-        trigger.options.behavior = "all";
-      }
-    }
-  }
-
   return trigger;
 };
 
 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) {
@@ -588,11 +578,11 @@ export const subscribeTrigger = (
   });
 
 export const testCondition = (
-  hass: HomeAssistant,
+  callWS: CallWS,
   condition: Condition | Condition[],
   variables?: Record<string, unknown>
 ) =>
-  hass.callWS<{ result: boolean }>({
+  callWS<{ result: boolean }>({
     type: "test_condition",
     condition,
     variables,
@@ -620,7 +610,7 @@ export interface AutomationClipboard {
 export interface BaseSidebarConfig {
   delete: () => void;
   close: (focus?: boolean) => void;
-  editNote: () => void;
+  editComment: () => void;
 }
 
 export interface TriggerSidebarConfig extends BaseSidebarConfig {
@@ -682,7 +672,7 @@ export interface OptionSidebarConfig extends BaseSidebarConfig {
   rename: () => void;
   duplicate: () => void;
   defaultOption?: boolean;
-  note?: string;
+  comment?: string;
 }
 
 export interface ScriptFieldSidebarConfig extends BaseSidebarConfig {
@@ -708,3 +698,7 @@ export interface ShowAutomationEditorParams {
   data?: Partial<AutomationConfig>;
   expanded?: boolean;
 }
+
+export const automationConfigContext = createContext<
+  AutomationConfig | undefined
+>("automationConfig");

src/data/calendar.ts

@@ -256,7 +256,6 @@ export const normalizeSubscriptionEventData = (
     dtstart: eventStart,
     dtend: eventEnd,
     description: eventData.description ?? undefined,
-    location: eventData.location ?? undefined,
     uid: eventData.uid ?? undefined,
     recurrence_id: eventData.recurrence_id ?? undefined,
     rrule: eventData.rrule ?? undefined,

src/data/config.ts

@@ -1,4 +1,4 @@
-import type { HomeAssistant } from "../types";
+import type { CallWS } from "../types";
 
 export interface ValidConfig {
   valid: true;
@@ -13,10 +13,10 @@ export interface InvalidConfig {
 type ValidKeys = "triggers" | "actions" | "conditions";
 
 export const validateConfig = <T extends Partial<Record<ValidKeys, unknown>>>(
-  hass: HomeAssistant,
+  callWS: CallWS,
   config: T
 ): Promise<Record<keyof T, ValidConfig | InvalidConfig>> =>
-  hass.callWS({
+  callWS({
     type: "validate_config",
     ...config,
   });

src/data/config_flow.ts

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

src/data/device/device_automation.ts

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

src/data/entity/entity_registry.ts

@@ -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>;

src/data/frontend.ts

@@ -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;

src/data/lovelace_custom_cards.ts

@@ -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 {

src/data/matter.ts

@@ -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);
 };

src/data/options_flow.ts

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

src/data/script.ts

@@ -36,7 +36,7 @@ export const isMaxMode = arrayLiteralIncludes(MODES_MAX);
 
 export const baseActionStruct = object({
   alias: optional(string()),
-  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[];
 }

src/data/script_i18n.ts

@@ -9,8 +9,8 @@ import type { Condition } from "./automation";
 import { describeCondition } from "./automation_i18n";
 import { localizeDeviceAutomationAction } from "./device/device_automation";
 import type { EntityRegistryEntry } from "./entity/entity_registry";
-import { domainToName } from "./integration";
 import type { DomainManifestLookup } from "./integration";
+import { domainToName } from "./integration";
 import type {
   ActionType,
   ActionTypes,
@@ -322,7 +322,17 @@ const tryDescribeAction = <T extends ActionType>(
     return hass.localize(
       `${actionTranslationBaseKey}.check_condition.description.full`,
       {
-        condition: describeCondition(action as Condition, hass, entityRegistry),
+        condition: describeCondition(
+          action as Condition,
+          hass.localize,
+          hass.locale,
+          entityRegistry,
+          hass.states,
+          hass.entities,
+          hass.config,
+          hass.formatEntityState,
+          hass.formatEntityAttributeValue
+        ),
       }
     );
   }

src/data/selector.ts

@@ -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";
 

src/data/sub_config_flow.ts

@@ -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

src/data/trigger.ts

@@ -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<

src/dialogs/add-to/ha-add-to-action-list.ts

@@ -1,211 +0,0 @@
-import { mdiPlus } from "@mdi/js";
-import type { CSSResultGroup, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import type {
-  HASSDomCurrentTargetEvent,
-  HASSDomEvent,
-} from "../../common/dom/fire_event";
-import { fireEvent } from "../../common/dom/fire_event";
-import type {
-  LocalizeFunc,
-  LocalizeKeys,
-} from "../../common/translations/localize";
-import "../../components/ha-icon";
-import "../../components/ha-svg-icon";
-import type { HaListItemButton } from "../../components/item/ha-list-item-button";
-import "../../components/item/ha-list-item-button";
-import "../../components/list/ha-list-base";
-import { consumeLocalize } from "../../common/decorators/consume-context-entry";
-
-export interface AddToActionListItem {
-  name?: string;
-  nameKey?: LocalizeKeys;
-  description?: string;
-  descriptionKey?: LocalizeKeys;
-  icon?: string;
-  iconPath?: string;
-  enabled?: boolean;
-}
-
-export interface AddToActionListSection<
-  Item extends AddToActionListItem = AddToActionListItem,
-> {
-  title?: string;
-  titleKey?: LocalizeKeys;
-  actions: readonly Item[];
-  empty?: string;
-  emptyKey?: LocalizeKeys;
-}
-
-export interface AddToActionListActionSelectedDetail<
-  Item extends AddToActionListItem = AddToActionListItem,
-> {
-  action: Item;
-}
-
-export type AddToActionListActionSelectedEvent<
-  Item extends AddToActionListItem = AddToActionListItem,
-> = HASSDomEvent<AddToActionListActionSelectedDetail<Item>>;
-
-@customElement("ha-add-to-action-list")
-class HaAddToActionList extends LitElement {
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
-  @property({ attribute: false })
-  public sections: readonly AddToActionListSection[] = [];
-
-  protected render(): TemplateResult | typeof nothing {
-    if (!this.sections.length) {
-      return nothing;
-    }
-
-    return html`${this.sections.map((section, sectionIndex) =>
-      this._renderSection(section, sectionIndex)
-    )}`;
-  }
-
-  private _renderSection(
-    section: AddToActionListSection,
-    sectionIndex: number
-  ): TemplateResult | typeof nothing {
-    if (!section.actions.length && !section.empty && !section.emptyKey) {
-      return nothing;
-    }
-
-    return html`
-      <h3 class="section-header">
-        ${this._localizeValue(section.title, section.titleKey)}
-      </h3>
-      ${section.actions.length
-        ? html`<ha-list-base>
-            ${section.actions.map((action, actionIndex) =>
-              this._renderActionItem(action, sectionIndex, actionIndex)
-            )}
-          </ha-list-base>`
-        : html`<h4 class="empty">
-            ${this._localizeValue(section.empty, section.emptyKey)}
-          </h4>`}
-    `;
-  }
-
-  private _renderActionItem(
-    action: AddToActionListItem,
-    sectionIndex: number,
-    actionIndex: number
-  ): TemplateResult {
-    return html`
-      <ha-list-item-button
-        .disabled=${action.enabled === false}
-        data-section-index=${sectionIndex}
-        data-action-index=${actionIndex}
-        .headline=${this._localizeValue(action.name, action.nameKey)}
-        .supportingText=${this._localizeValue(
-          action.description,
-          action.descriptionKey
-        )}
-        @click=${this._actionSelected}
-      >
-        ${action.icon
-          ? html`<ha-icon
-              class="start-icon"
-              slot="start"
-              .icon=${action.icon}
-            ></ha-icon>`
-          : action.iconPath
-            ? html`<ha-svg-icon
-                class="start-icon"
-                slot="start"
-                .path=${action.iconPath}
-              ></ha-svg-icon>`
-            : nothing}
-        <ha-svg-icon class="plus" slot="end" .path=${mdiPlus}></ha-svg-icon>
-      </ha-list-item-button>
-    `;
-  }
-
-  private _localizeValue(
-    value?: string,
-    localizeKey?: LocalizeKeys
-  ): string | undefined {
-    return value || (localizeKey ? this._localize(localizeKey) : undefined);
-  }
-
-  private _actionSelected(
-    ev: HASSDomCurrentTargetEvent<HaListItemButton>
-  ): void {
-    const action =
-      this.sections[Number(ev.currentTarget.dataset.sectionIndex)]?.actions[
-        Number(ev.currentTarget.dataset.actionIndex)
-      ];
-
-    if (!action) {
-      return;
-    }
-
-    if (action.enabled === false) {
-      return;
-    }
-
-    fireEvent(this, "add-to-list-action-selected", {
-      action,
-    });
-  }
-
-  static styles: CSSResultGroup = css`
-    :host {
-      display: block;
-    }
-
-    .section-header {
-      padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-1);
-      margin: 0;
-      font-size: var(--ha-font-size-m);
-      font-weight: var(--ha-font-weight-medium);
-      color: var(--secondary-text-color);
-    }
-
-    .empty {
-      padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-1);
-      margin: 0;
-      font-size: var(--ha-font-size-m);
-      font-weight: var(--ha-font-weight-normal);
-      color: var(--secondary-text-color);
-    }
-
-    ha-list-item-button {
-      --ha-row-item-padding-inline: var(--ha-space-5);
-    }
-
-    ha-icon,
-    ha-svg-icon {
-      display: flex;
-      align-items: center;
-    }
-
-    .start-icon {
-      color: var(--ha-color-text-secondary);
-    }
-
-    .plus {
-      color: var(--primary-color);
-    }
-
-    ha-list-item-button[disabled] .start-icon,
-    ha-list-item-button[disabled] .plus {
-      color: var(--disabled-text-color);
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-add-to-action-list": HaAddToActionList;
-  }
-
-  interface HASSDomEvents {
-    "add-to-list-action-selected": AddToActionListActionSelectedDetail;
-  }
-}

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

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

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

@@ -48,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,
         });
       },

src/dialogs/more-info/add-to.ts

@@ -1,37 +1,26 @@
-import { computeDomain } from "../../common/entity/compute_domain";
 import { navigate } from "../../common/navigate";
-import type { LocalizeKeys } from "../../common/translations/localize";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import { createSearchParam } from "../../common/url/search-params";
-import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
-import { SCENE_IGNORED_DOMAINS, type SceneEntities } from "../../data/scene";
 import type { SingleHassServiceTarget } from "../../data/target";
 import {
   ADD_AUTOMATION_ELEMENT_AREA_TARGET_PARAM,
   ADD_AUTOMATION_ELEMENT_DEVICE_TARGET_PARAM,
-  ADD_AUTOMATION_ELEMENT_ENTITY_TARGET_PARAM,
   ADD_AUTOMATION_ELEMENT_QUERY_PARAM,
+  ADD_AUTOMATION_ELEMENT_ENTITY_TARGET_PARAM,
 } from "../../panels/config/automation/show-add-automation-element-dialog";
 import type { HomeAssistant, TranslationDict } from "../../types";
 
-/** Add to action keys are the keys of the translation dictionary for the add to action options. */
-type AddToActionOptions =
-  TranslationDict["ui"]["dialogs"]["more_info_control"]["add_to"]["action_options"];
-
-export type AddToActionKey = Extract<keyof AddToActionOptions, string>;
-
-export type AddToAutomationScriptActionKey = Exclude<AddToActionKey, "scene">;
-
-/** Fully-qualified localize key for an add to action option label. */
-type AddToActionOptionLabelKey = LocalizeKeys &
-  `ui.dialogs.more_info_control.add_to.action_options.${AddToActionKey}`;
+/** Add to action keys are the keys of the translation dictionary for the add to actions. */
+export type AddToActionKey =
+  TranslationDict["ui"]["dialogs"]["more_info_control"]["add_to"]["actions"] extends infer Actions
+    ? keyof Actions
+    : never;
 
 interface BaseEntityAddToAction {
   /** Whether the action is enabled and can be selected. */
   enabled: boolean;
-  /** Translated label of the action option */
-  name?: string;
-  /** Fully-qualified localize key for the action option label */
-  nameKey?: AddToActionOptionLabelKey;
+  /** Translated name of the action */
+  name: string;
   /** Optional translated description of the action */
   description?: string;
   /** MDI icon name (e.g., "mdi:car") */
@@ -42,7 +31,7 @@ export interface DefaultEntityAddToAction extends BaseEntityAddToAction {
   /** Type of action handled in the frontend */
   type: "default";
   /** Stable key used to resolve the action handler */
-  key: AddToAutomationScriptActionKey;
+  key: AddToActionKey;
 }
 
 export interface ExternalEntityAddToAction extends BaseEntityAddToAction {
@@ -59,11 +48,11 @@ export type EntityAddToAction =
 export type EntityAddToActions = EntityAddToAction[];
 
 interface ActionDefinition {
-  translation_key: AddToAutomationScriptActionKey;
+  translation_key: AddToActionKey;
   icon: string;
 }
 
-const DEFAULT_ACTION_DEFS: ActionDefinition[] = [
+export const DEFAULT_ACTION_DEFS: ActionDefinition[] = [
   {
     translation_key: "automation_trigger",
     icon: "mdi:robot-outline",
@@ -82,49 +71,33 @@ const DEFAULT_ACTION_DEFS: ActionDefinition[] = [
   },
 ];
 
-export const getDefaultAddToActions = (): EntityAddToActions =>
+export const getDefaultAddToActions = (
+  states: HomeAssistant["states"],
+  localize: LocalizeFunc,
+  formatEntityName: HomeAssistant["formatEntityName"],
+  entityId: string
+): EntityAddToActions =>
   DEFAULT_ACTION_DEFS.map(
     (def: ActionDefinition): EntityAddToAction => ({
       type: "default",
       key: def.translation_key,
       enabled: true,
-      nameKey: `ui.dialogs.more_info_control.add_to.action_options.${def.translation_key}`,
+      name: localize(
+        `ui.dialogs.more_info_control.add_to.actions.${def.translation_key}`,
+        {
+          target:
+            states[entityId] !== undefined
+              ? formatEntityName(states[entityId], undefined)
+              : entityId,
+        }
+      ),
       icon: def.icon,
     })
   );
 
-export const createAddToSceneEntities = (
-  entityIds: string[]
-): SceneEntities => {
-  const entities: SceneEntities = {};
-  for (const entityId of entityIds) {
-    entities[entityId] = "";
-  }
-  return entities;
-};
-
-export const filterAddToSceneEntityIds = (
-  entityIds: string[],
-  entityRegistry: readonly EntityRegistryEntry[],
-  states: HomeAssistant["states"]
-): string[] => {
-  const entityIdSet = new Set(entityIds);
-
-  return entityRegistry
-    .filter((entry) => entityIdSet.has(entry.entity_id))
-    .filter(
-      (entry) =>
-        !entry.entity_category &&
-        !entry.hidden_by &&
-        !SCENE_IGNORED_DOMAINS.includes(computeDomain(entry.entity_id)) &&
-        states[entry.entity_id]
-    )
-    .map((entry) => entry.entity_id);
-};
-
 /** Handler for adding a target to an automation/script. */
 export function addToActionHandler(
-  key: AddToAutomationScriptActionKey,
+  key: AddToActionKey,
   target: SingleHassServiceTarget
 ): Promise<boolean> {
   const searchParams: Record<string, string> = {};

src/dialogs/more-info/ha-more-info-add-to.ts

@@ -1,35 +1,26 @@
-import { consume, type ContextType } from "@lit/context";
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-alert";
+import "../../components/ha-icon";
 import "../../components/ha-spinner";
+import "../../components/item/ha-list-item-button";
+import "../../components/list/ha-list-base";
+import type { HaListItemButton } from "../../components/item/ha-list-item-button";
 import { showToast } from "../../util/toast";
 
+import type { HASSDomCurrentTargetEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
-import { configContext } from "../../data/context";
-import "../add-to/ha-add-to-action-list";
-import type {
-  AddToActionListActionSelectedEvent,
-  AddToActionListSection,
-} from "../add-to/ha-add-to-action-list";
+import type { HomeAssistant } from "../../types";
 import {
   type EntityAddToAction,
   type EntityAddToActions,
   addToActionHandler,
   getDefaultAddToActions,
-} from "../add-to/add-to";
-import { consumeLocalize } from "../../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../../common/translations/localize";
+} from "./add-to";
 
 @customElement("ha-more-info-add-to")
 export class HaMoreInfoAddTo extends LitElement {
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  private _config?: ContextType<typeof configContext>;
-
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public entityId!: string;
 
@@ -40,13 +31,18 @@ export class HaMoreInfoAddTo extends LitElement {
   @state() private _loading = true;
 
   private async _loadActions() {
-    this._defaultActions = getDefaultAddToActions();
+    this._defaultActions = getDefaultAddToActions(
+      this.hass.states,
+      this.hass.localize,
+      this.hass.formatEntityName,
+      this.entityId
+    );
     this._externalActions = [];
 
-    if (this._config?.auth.external?.config.hasEntityAddTo) {
+    if (this.hass.auth.external?.config.hasEntityAddTo) {
       try {
         const response =
-          await this._config.auth.external.sendMessage<"entity/add_to/get_actions">(
+          await this.hass.auth.external?.sendMessage<"entity/add_to/get_actions">(
             {
               type: "entity/add_to/get_actions",
               payload: { entity_id: this.entityId },
@@ -70,9 +66,13 @@ export class HaMoreInfoAddTo extends LitElement {
   }
 
   private async _actionSelected(
-    ev: AddToActionListActionSelectedEvent<EntityAddToAction>
+    ev: HASSDomCurrentTargetEvent<
+      HaListItemButton & {
+        action: EntityAddToAction;
+      }
+    >
   ) {
-    const { action } = ev.detail;
+    const action = ev.currentTarget.action;
     if (!action.enabled) {
       return;
     }
@@ -82,10 +82,7 @@ export class HaMoreInfoAddTo extends LitElement {
         if (!action.payload) {
           throw new Error("Missing external action payload");
         }
-        if (!this._config?.auth.external) {
-          throw new Error("Missing external app connection");
-        }
-        this._config.auth.external.fireMessage({
+        this.hass.auth.external!.fireMessage({
           type: "entity/add_to",
           payload: {
             entity_id: this.entityId,
@@ -95,7 +92,7 @@ export class HaMoreInfoAddTo extends LitElement {
         fireEvent(this, "add-to-action-selected");
       } catch (err: unknown) {
         showToast(this, {
-          message: this._localize(
+          message: this.hass.localize(
             "ui.dialogs.more_info_control.add_to.action_failed",
             {
               error: err instanceof Error ? err.message : String(err),
@@ -113,6 +110,24 @@ export class HaMoreInfoAddTo extends LitElement {
     addToActionHandler(action.key, { entity_id: this.entityId });
   }
 
+  private _renderActionItems(actions: EntityAddToActions) {
+    return actions.map(
+      (action) => html`
+        <ha-list-item-button
+          .disabled=${!action.enabled}
+          .action=${action}
+          @click=${this._actionSelected}
+        >
+          <ha-icon slot="start" .icon=${action.icon}></ha-icon>
+          <span slot="headline">${action.name}</span>
+          ${action.description
+            ? html`<span slot="supporting-text">${action.description}</span>`
+            : nothing}
+        </ha-list-item-button>
+      `
+    );
+  }
+
   protected async firstUpdated() {
     await this._loadActions();
     this._loading = false;
@@ -130,38 +145,29 @@ export class HaMoreInfoAddTo extends LitElement {
     if (!this._defaultActions.length && !this._externalActions.length) {
       return html`
         <ha-alert alert-type="info">
-          ${this._localize("ui.dialogs.more_info_control.add_to.no_actions")}
+          ${this.hass.localize(
+            "ui.dialogs.more_info_control.add_to.no_actions"
+          )}
         </ha-alert>
       `;
     }
 
-    const automationActions = this._defaultActions.filter(
-      (action) => action.type === "default" && action.key !== "script_action"
-    );
-    const scriptActions = this._defaultActions.filter(
-      (action) => action.type === "default" && action.key === "script_action"
-    );
-
-    const sections: AddToActionListSection<EntityAddToAction>[] = [
-      {
-        titleKey: "ui.dialogs.more_info_control.add_to.automations_heading",
-        actions: automationActions,
-      },
-      {
-        titleKey: "ui.dialogs.more_info_control.add_to.scripts_heading",
-        actions: scriptActions,
-      },
-      {
-        titleKey: "ui.dialogs.more_info_control.add_to.app_actions",
-        actions: this._externalActions,
-      },
-    ];
-
     return html`
-      <ha-add-to-action-list
-        .sections=${sections}
-        @add-to-list-action-selected=${this._actionSelected}
-      ></ha-add-to-action-list>
+      <ha-list-base>
+        ${this._renderActionItems(this._defaultActions)}
+      </ha-list-base>
+      ${this._externalActions.length
+        ? html`
+            <h2 class="section-title">
+              ${this.hass.localize(
+                "ui.dialogs.more_info_control.add_to.app_actions"
+              )}
+            </h2>
+            <ha-list-base>
+              ${this._renderActionItems(this._externalActions)}
+            </ha-list-base>
+          `
+        : nothing}
     `;
   }
 
@@ -177,6 +183,20 @@ export class HaMoreInfoAddTo extends LitElement {
       align-items: center;
       padding: var(--ha-space-8);
     }
+
+    .section-title {
+      padding: 0 var(--ha-space-6);
+      margin: var(--ha-space-4) 0 var(--ha-space-1);
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-medium);
+      line-height: var(--ha-line-height-normal);
+      color: var(--secondary-text-color);
+    }
+
+    ha-icon {
+      display: flex;
+      align-items: center;
+    }
   `;
 }
 

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -23,7 +23,6 @@ import { customElement, property, query, state } from "lit/decorators";
 import { cache } from "lit/directives/cache";
 import { classMap } from "lit/directives/class-map";
 import { keyed } from "lit/directives/keyed";
-import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -518,7 +517,7 @@ export class MoreInfoDialog extends SubscribeMixin(
     await favoritesHandler.copy(favoritesContext);
   }
 
-  private _goToAddEntityTo(ev: CustomEvent<RequestSelectedDetail>) {
+  private _goToAddEntityTo(ev) {
     // Only check for request-selected events (from menu items), not regular clicks (from icon button)
     if (
       ev.type === "request-selected" &&
@@ -591,19 +590,10 @@ export class MoreInfoDialog extends SubscribeMixin(
       (v): v is string => Boolean(v)
     );
     const defaultTitle = breadcrumb.pop() || entityId;
-    const addToTitle = this.hass.localize(
-      "ui.dialogs.more_info_control.add_to.title",
-      { target: defaultTitle }
-    );
-    const addToMenuItem = this.hass.localize(
-      "ui.dialogs.more_info_control.add_to.item"
-    );
     const title =
       this._currView === "details"
         ? this.hass.localize("ui.dialogs.more_info_control.details")
-        : this._currView === "add_to"
-          ? addToTitle
-          : this._childView?.viewTitle || defaultTitle;
+        : this._childView?.viewTitle || defaultTitle;
 
     const favoritesContext =
       this._entry && stateObj
@@ -721,7 +711,9 @@ export class MoreInfoDialog extends SubscribeMixin(
                                 slot="icon"
                                 .path=${mdiPlusBoxMultipleOutline}
                               ></ha-svg-icon>
-                              ${addToMenuItem}
+                              ${this.hass.localize(
+                                "ui.dialogs.more_info_control.add_to.title"
+                              )}
                             </ha-dropdown-item>
 
                             <wa-divider></wa-divider>
@@ -822,7 +814,9 @@ export class MoreInfoDialog extends SubscribeMixin(
                   ? html`
                       <ha-icon-button
                         slot="headerActionItems"
-                        .label=${addToMenuItem}
+                        .label=${this.hass.localize(
+                          "ui.dialogs.more_info_control.add_to.title"
+                        )}
                         .path=${mdiPlusBoxMultipleOutline}
                         @click=${this._goToAddEntityTo}
                       ></ha-icon-button>
@@ -912,6 +906,7 @@ export class MoreInfoDialog extends SubscribeMixin(
                             : this._currView === "add_to"
                               ? html`
                                   <ha-more-info-add-to
+                                    .hass=${this.hass}
                                     .entityId=${entityId}
                                     @add-to-action-selected=${this._goBack}
                                   ></ha-more-info-add-to>

src/dialogs/notifications/notification-drawer.ts

@@ -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);

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

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

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

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

src/layouts/home-assistant-main.ts

@@ -153,7 +153,7 @@ export class HomeAssistantMain extends LitElement {
       /* remove the grey tap highlights in iOS on the fullscreen touch targets */
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
       --ha-sidebar-width: calc(56px + var(--safe-area-inset-left, 0px));
-      --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,

src/mixins/mobile-aware-mixin.ts

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

src/onboarding/dialogs/app-dialog.ts

@@ -1,20 +1,39 @@
 import { LitElement, css, html, nothing } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import type { LocalizeFunc } from "../../common/translations/localize";
+import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
-import { DialogMixin } from "../../dialogs/dialog-mixin";
-import type { AppDialogParams } from "./show-app-dialog";
 
 @customElement("app-dialog")
-class DialogApp extends DialogMixin<AppDialogParams>(LitElement) {
+class DialogApp extends LitElement {
+  @property({ attribute: false }) public localize?: LocalizeFunc;
+
+  @state() private _open = false;
+
+  public async showDialog(params: { localize: LocalizeFunc }): Promise<void> {
+    this.localize = params.localize;
+    this._open = true;
+  }
+
+  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
+    this.localize = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
   protected render() {
-    if (!this.params?.localize) {
+    if (!this.localize) {
       return nothing;
     }
     return html`<ha-dialog
-      open
-      header-title=${this.params.localize(
+      .open=${this._open}
+      header-title=${this.localize(
         "ui.panel.page-onboarding.welcome.download_app"
       ) || "Click here to download the app"}
+      @closed=${this._dialogClosed}
     >
       <div>
         <div class="app-qr">
@@ -26,17 +45,13 @@ class DialogApp extends DialogMixin<AppDialogParams>(LitElement) {
             <img
               loading="lazy"
               src="/static/images/appstore.svg"
-              alt=${this.params.localize(
-                "ui.panel.page-onboarding.welcome.appstore"
-              )}
+              alt=${this.localize("ui.panel.page-onboarding.welcome.appstore")}
               class="icon"
             />
             <img
               loading="lazy"
               src="/static/images/qr-appstore.svg"
-              alt=${this.params.localize(
-                "ui.panel.page-onboarding.welcome.appstore"
-              )}
+              alt=${this.localize("ui.panel.page-onboarding.welcome.appstore")}
             />
           </a>
           <a
@@ -47,17 +62,13 @@ class DialogApp extends DialogMixin<AppDialogParams>(LitElement) {
             <img
               loading="lazy"
               src="/static/images/playstore.svg"
-              alt=${this.params.localize(
-                "ui.panel.page-onboarding.welcome.playstore"
-              )}
+              alt=${this.localize("ui.panel.page-onboarding.welcome.playstore")}
               class="icon"
             />
             <img
               loading="lazy"
               src="/static/images/qr-playstore.svg"
-              alt=${this.params.localize(
-                "ui.panel.page-onboarding.welcome.playstore"
-              )}
+              alt=${this.localize("ui.panel.page-onboarding.welcome.playstore")}
             />
           </a>
         </div>

src/onboarding/dialogs/community-dialog.ts

@@ -1,87 +1,103 @@
 import { mdiAccountGroup, mdiOpenInNew } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import "../../components/ha-dialog";
-import "../../components/ha-svg-icon";
-import "../../components/item/ha-list-item-button";
-import "../../components/list/ha-list-nav";
-import { DialogMixin } from "../../dialogs/dialog-mixin";
-import type { CommunityDialogParams } from "./show-community-dialog";
+import "../../components/ha-list";
+import "../../components/ha-list-item";
 
 @customElement("community-dialog")
-class DialogCommunity extends DialogMixin<CommunityDialogParams>(LitElement) {
+class DialogCommunity extends LitElement {
+  @property({ attribute: false }) public localize?: LocalizeFunc;
+
+  @state() private _open = false;
+
+  public async showDialog(params): Promise<void> {
+    this.localize = params.localize;
+    this._open = true;
+  }
+
+  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
+    this.localize = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
   protected render() {
-    if (!this.params?.localize) {
+    if (!this.localize) {
       return nothing;
     }
     return html`<ha-dialog
-      open
-      header-title=${this.params.localize(
+      .open=${this._open}
+      header-title=${this.localize(
         "ui.panel.page-onboarding.welcome.community"
       )}
+      @closed=${this._dialogClosed}
     >
-      <ha-list-nav>
-        <ha-list-item-button
+      <ha-list>
+        <a
           target="_blank"
           rel="noreferrer noopener"
           href="https://community.home-assistant.io/"
         >
-          <img
-            src="/static/icons/favicon-192x192.png"
-            slot="start"
-            alt="Home Assistant Logo"
-          />
-          <span slot="headline">
-            ${this.params.localize("ui.panel.page-onboarding.welcome.forums")}
-          </span>
-          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
-        </ha-list-item-button>
-        <ha-list-item-button
+          <ha-list-item hasMeta graphic="icon">
+            <img
+              src="/static/icons/favicon-192x192.png"
+              slot="graphic"
+              alt="Home Assistant Logo"
+            />
+            ${this.localize("ui.panel.page-onboarding.welcome.forums")}
+            <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
+          </ha-list-item>
+        </a>
+        <a
           target="_blank"
           rel="noreferrer noopener"
           href="https://newsletter.openhomefoundation.org/"
         >
-          <img
-            src="/static/icons/logo_ohf.svg"
-            slot="start"
-            alt="Open Home Foundation Logo"
-          />
-          <span slot="headline">
-            ${this.params.localize(
+          <ha-list-item hasMeta graphic="icon">
+            <img
+              src="/static/icons/logo_ohf.svg"
+              slot="graphic"
+              alt="Open Home Foundation Logo"
+            />
+            ${this.localize(
               "ui.panel.page-onboarding.welcome.open_home_newsletter"
             )}
-          </span>
-          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
-        </ha-list-item-button>
-        <ha-list-item-button
+            <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
+          </ha-list-item>
+        </a>
+        <a
           target="_blank"
           rel="noreferrer noopener"
           href="https://www.home-assistant.io/join-chat"
         >
-          <img
-            src="/static/images/logo_discord.png"
-            slot="start"
-            alt="Discord Logo"
-          />
-          <span slot="headline">
-            ${this.params.localize("ui.panel.page-onboarding.welcome.discord")}
-          </span>
-          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
-        </ha-list-item-button>
-        <ha-list-item-button
+          <ha-list-item hasMeta graphic="icon">
+            <img
+              src="/static/images/logo_discord.png"
+              slot="graphic"
+              alt="Discord Logo"
+            />
+            ${this.localize("ui.panel.page-onboarding.welcome.discord")}
+            <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
+          </ha-list-item>
+        </a>
+        <a
           target="_blank"
           rel="noreferrer noopener"
           href="https://fosstodon.org/@homeassistant"
         >
-          <ha-svg-icon .path=${mdiAccountGroup} slot="start"></ha-svg-icon>
-          <span slot="headline">
-            ${this.params.localize(
-              "ui.panel.page-onboarding.welcome.social_media"
-            )}
-          </span>
-          <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
-        </ha-list-item-button>
-      </ha-list-nav>
+          <ha-list-item hasMeta graphic="icon">
+            <ha-svg-icon .path=${mdiAccountGroup} slot="graphic"></ha-svg-icon>
+            ${this.localize("ui.panel.page-onboarding.welcome.social_media")}
+            <ha-svg-icon slot="meta" .path=${mdiOpenInNew}></ha-svg-icon>
+          </ha-list-item>
+        </a>
+      </ha-list>
     </ha-dialog>`;
   }
 
@@ -89,12 +105,12 @@ class DialogCommunity extends DialogMixin<CommunityDialogParams>(LitElement) {
     ha-dialog {
       --dialog-content-padding: 0;
     }
-    img {
-      width: 32px;
-      height: 32px;
+    ha-list-item {
+      height: 56px;
+      --mdc-list-item-meta-size: 20px;
     }
-    ha-svg-icon {
-      color: var(--ha-color-text-secondary);
+    a {
+      text-decoration: none;
     }
   `;
 }

src/onboarding/dialogs/show-app-dialog.ts

@@ -3,18 +3,13 @@ import type { LocalizeFunc } from "../../common/translations/localize";
 
 export const loadAppDialog = () => import("./app-dialog");
 
-export interface AppDialogParams {
-  localize: LocalizeFunc;
-}
-
 export const showAppDialog = (
   element: HTMLElement,
-  params: AppDialogParams
+  params: { localize: LocalizeFunc }
 ): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "app-dialog",
     dialogImport: loadAppDialog,
     dialogParams: params,
-    addHistory: false,
   });
 };

src/onboarding/dialogs/show-community-dialog.ts

@@ -3,18 +3,13 @@ import type { LocalizeFunc } from "../../common/translations/localize";
 
 export const loadCommunityDialog = () => import("./community-dialog");
 
-export interface CommunityDialogParams {
-  localize: LocalizeFunc;
-}
-
 export const showCommunityDialog = (
   element: HTMLElement,
-  params: CommunityDialogParams
+  params: { localize: LocalizeFunc }
 ): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "community-dialog",
     dialogImport: loadCommunityDialog,
     dialogParams: params,
-    addHistory: false,
   });
 };

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

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

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

@@ -342,6 +342,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) {

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

@@ -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)

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

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

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

@@ -31,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>

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

@@ -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;
   }
@@ -185,25 +181,23 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
   private _renderInfoCard() {
     const systemManaged = this._isSystemManaged(this._currentAddon);
 
-    return html` <ha-card outlined>
+    return html`<ha-card outlined>
       <div class="card-content">
         <div class="addon-header">
+          ${this._currentAddon.logo
+            ? html`
+                <img
+                  class="logo"
+                  alt=""
+                  src="/api/hassio/addons/${this._currentAddon.slug}/logo"
+                />
+              `
+            : nothing}
           <div class="title">
-            ${this._currentAddon.logo
-              ? html`
-                  <img
-                    class="logo"
-                    alt=""
-                    src="/api/hassio/addons/${this._currentAddon.slug}/logo"
-                  />
-                `
-              : nothing}
-            ${!this.narrow
-              ? getAppDisplayName(
-                  this._currentAddon.name,
-                  this._currentAddon.stage
-                )
-              : nothing}
+            ${getAppDisplayName(
+              this._currentAddon.name,
+              this._currentAddon.stage
+            )}
             <div class="description">
               ${this._currentAddon.version
                 ? html`
@@ -241,7 +235,17 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
             ? html`<supervisor-apps-state
                 .state=${this._currentAddon.state}
               ></supervisor-apps-state>`
-            : nothing}
+            : html`
+                <ha-progress-button
+                  .disabled=${!this._currentAddon.available}
+                  @click=${this._installClicked}
+                  .iconPath=${mdiApplicationImport}
+                >
+                  ${this.i18n.localize(
+                    "ui.panel.config.apps.dashboard.install"
+                  )}
+                </ha-progress-button>
+              `}
         </div>
 
         <ha-chip-set class="capabilities">
@@ -505,8 +509,7 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
       </div>
       ${(this._currentAddon.update_available && this._updateEntityId) ||
       this._computeShowWebUI ||
-      this._computeShowIngressUI ||
-      !this._currentAddon.version
+      this._computeShowIngressUI
         ? html`
             <div class="card-actions">
               ${this._currentAddon.update_available && this._updateEntityId
@@ -542,19 +545,6 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
                     </ha-button>
                   `
                 : nothing}
-              ${!this._currentAddon.version
-                ? html`
-                    <ha-progress-button
-                      .disabled=${!this._currentAddon.available}
-                      @click=${this._installClicked}
-                      .iconPath=${mdiApplicationImport}
-                    >
-                      ${this.i18n.localize(
-                        "ui.panel.config.apps.dashboard.install"
-                      )}
-                    </ha-progress-button>
-                  `
-                : nothing}
             </div>
           `
         : nothing}
@@ -873,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
@@ -1503,17 +1493,16 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
         }
         .addon-header {
           display: flex;
+          padding-inline-start: var(--ha-space-2);
+          padding-inline-end: initial;
           font-size: var(--ha-font-size-2xl);
           color: var(--ha-card-header-color, var(--primary-text-color));
           align-items: center;
           gap: var(--ha-space-2);
-          flex-wrap: wrap;
-          margin-bottom: var(--ha-space-4);
         }
 
         .addon-header .title {
           flex: 1;
-          margin-inline-end: var(--ha-space-4);
         }
 
         .addon-header .title .description {
@@ -1532,15 +1521,17 @@ class SupervisorAppInfo extends MobileAwareMixin(LitElement) {
           color: var(--error-color);
           margin-bottom: var(--ha-space-4);
         }
+        .description {
+          margin-bottom: var(--ha-space-4);
+        }
         .description a {
           color: var(--primary-color);
         }
 
         img.logo {
           max-width: 100%;
-          max-height: 40px;
+          max-height: 60px;
           display: block;
-          margin-bottom: var(--ha-space-2);
         }
         ha-assist-chip {
           --md-sys-color-primary: var(--text-primary-color);

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

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

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

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

src/panels/config/areas/dialog-area-add-to.ts

@@ -12,32 +12,22 @@ import {
 import { computeAreaName } from "../../../common/entity/compute_area_name";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-adaptive-dialog";
+import "../../../components/ha-list";
+import "../../../components/ha-list-item";
+import "../../../components/ha-svg-icon";
 import {
   areasContext,
   internationalizationContext,
 } from "../../../data/context";
+import type { SceneEntities } from "../../../data/scene";
 import { showSceneEditor } from "../../../data/scene";
-import "../../../dialogs/add-to/ha-add-to-action-list";
-import type {
-  AddToActionListActionSelectedEvent,
-  AddToActionListItem,
-  AddToActionListSection,
-} from "../../../dialogs/add-to/ha-add-to-action-list";
 import {
   addToActionHandler,
-  createAddToSceneEntities,
-  type AddToAutomationScriptActionKey,
-} from "../../../dialogs/add-to/add-to";
+  type AddToActionKey,
+} from "../../../dialogs/more-info/add-to";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { AreaAddToDialogParams } from "./show-dialog-area-add-to";
 
-type AreaAddToAction =
-  | (AddToActionListItem & {
-      type: "automation";
-      key: AddToAutomationScriptActionKey;
-    })
-  | (AddToActionListItem & { type: "scene" });
-
 @customElement("dialog-area-add-to")
 class DialogAreaAddTo extends LitElement {
   @state()
@@ -75,12 +65,7 @@ class DialogAreaAddTo extends LitElement {
       <ha-adaptive-dialog
         .open=${this._open}
         header-title=${this._i18n.localize(
-          "ui.dialogs.more_info_control.add_to.title",
-          {
-            target:
-              computeAreaName(this._areas[this._params.areaId]) ||
-              this._params.areaId,
-          }
+          "ui.dialogs.more_info_control.add_to.title"
         )}
         @closed=${this._dialogClosed}
       >
@@ -94,96 +79,108 @@ class DialogAreaAddTo extends LitElement {
       return nothing;
     }
 
-    const sections: AddToActionListSection<AreaAddToAction>[] = [
-      {
-        title: this._i18n.localize(
-          "ui.panel.config.devices.automation.automations_heading"
-        ),
-        actions: [
-          {
-            type: "automation",
-            key: "automation_trigger",
-            iconPath: mdiRobotOutline,
-            name: this._i18n.localize(
-              "ui.dialogs.more_info_control.add_to.action_options.automation_trigger"
-            ),
-          },
-          {
-            type: "automation",
-            key: "automation_condition",
-            iconPath: mdiPlaylistCheck,
-            name: this._i18n.localize(
-              "ui.dialogs.more_info_control.add_to.action_options.automation_condition"
-            ),
-          },
-          {
-            type: "automation",
-            key: "automation_action",
-            iconPath: mdiPlayCircleOutline,
-            name: this._i18n.localize(
-              "ui.dialogs.more_info_control.add_to.action_options.automation_action"
-            ),
-          },
-        ],
-      },
-      {
-        title: this._i18n.localize(
-          "ui.panel.config.devices.script.scripts_heading"
-        ),
-        actions: [
-          {
-            type: "automation",
-            key: "script_action",
-            iconPath: mdiScriptTextOutline,
-            name: this._i18n.localize(
-              "ui.dialogs.more_info_control.add_to.action_options.script_action"
-            ),
-          },
-        ],
-      },
-    ];
-
-    if (this._params.canCreateScene && this._params.entityIds.length) {
-      sections.push({
-        title: this._i18n.localize(
-          "ui.panel.config.devices.scene.scenes_heading"
-        ),
-        actions: [
-          {
-            type: "scene",
-            iconPath: mdiPalette,
-            name: this._i18n.localize(
-              "ui.dialogs.more_info_control.add_to.action_options.scene"
-            ),
-          },
-        ],
-      });
-    }
+    const area = this._areas[this._params.areaId];
+    const areaName = computeAreaName(area) || this._params.areaId;
 
     return html`
-      <ha-add-to-action-list
-        .sections=${sections}
-        @add-to-list-action-selected=${this._handleActionSelected}
-      ></ha-add-to-action-list>
+      <h3 class="section-header">
+        ${this._i18n.localize(
+          "ui.panel.config.devices.automation.automations_heading"
+        )}
+      </h3>
+      <ha-list>
+        ${this._renderActionItem(
+          "automation_trigger",
+          mdiRobotOutline,
+          "ui.dialogs.more_info_control.add_to.actions.automation_trigger",
+          areaName
+        )}
+        ${this._renderActionItem(
+          "automation_condition",
+          mdiPlaylistCheck,
+          "ui.dialogs.more_info_control.add_to.actions.automation_condition",
+          areaName
+        )}
+        ${this._renderActionItem(
+          "automation_action",
+          mdiPlayCircleOutline,
+          "ui.dialogs.more_info_control.add_to.actions.automation_action",
+          areaName
+        )}
+      </ha-list>
+      <h3 class="section-header">
+        ${this._i18n.localize("ui.panel.config.devices.script.scripts_heading")}
+      </h3>
+      <ha-list>
+        ${this._renderActionItem(
+          "script_action",
+          mdiScriptTextOutline,
+          "ui.dialogs.more_info_control.add_to.actions.script_action",
+          areaName
+        )}
+      </ha-list>
+      ${this._renderSceneSection(areaName)}
     `;
   }
 
-  private _handleActionSelected(
-    ev: AddToActionListActionSelectedEvent<AreaAddToAction>
+  private _renderSceneSection(areaName: string) {
+    if (!this._params?.entityIds.length) {
+      return nothing;
+    }
+
+    return html`
+      <h3 class="section-header">
+        ${this._i18n.localize("ui.panel.config.devices.scene.scenes_heading")}
+      </h3>
+      <ha-list>
+        <ha-list-item
+          graphic="icon"
+          @click=${this._handleCreateScene}
+          data-dialog="close"
+        >
+          <ha-svg-icon slot="graphic" .path=${mdiPalette}></ha-svg-icon>
+          ${this._i18n.localize(
+            "ui.dialogs.more_info_control.add_to.actions.scene",
+            { target: areaName }
+          )}
+        </ha-list-item>
+      </ha-list>
+    `;
+  }
+
+  private _renderActionItem(
+    key: AddToActionKey,
+    path: string,
+    translationKey:
+      | "ui.dialogs.more_info_control.add_to.actions.automation_trigger"
+      | "ui.dialogs.more_info_control.add_to.actions.automation_condition"
+      | "ui.dialogs.more_info_control.add_to.actions.automation_action"
+      | "ui.dialogs.more_info_control.add_to.actions.script_action",
+    areaName: string
   ) {
+    return html`
+      <ha-list-item
+        graphic="icon"
+        data-type=${key}
+        @click=${this._handleAction}
+        data-dialog="close"
+      >
+        <ha-svg-icon slot="graphic" .path=${path}></ha-svg-icon>
+        ${this._i18n.localize(translationKey, { target: areaName })}
+      </ha-list-item>
+    `;
+  }
+
+  private _handleAction(ev: Event) {
     if (!this._params) {
       return;
     }
 
-    const { action } = ev.detail;
-
-    if (action.type === "scene") {
-      this._handleCreateScene();
-      return;
-    }
+    const key = (ev.currentTarget as HTMLElement).dataset
+      .type as AddToActionKey;
 
     this.closeDialog();
-    addToActionHandler(action.key, { area_id: this._params.areaId });
+    addToActionHandler(key, { area_id: this._params.areaId });
   }
 
   private _handleCreateScene() {
@@ -191,11 +188,13 @@ class DialogAreaAddTo extends LitElement {
       return;
     }
 
+    const entities: SceneEntities = {};
+    for (const entityId of this._params.entityIds) {
+      entities[entityId] = "";
+    }
+
     this.closeDialog();
-    showSceneEditor(
-      { entities: createAddToSceneEntities(this._params.entityIds) },
-      this._params.areaId
-    );
+    showSceneEditor({ entities }, this._params.areaId);
   }
 
   static get styles(): CSSResultGroup {
@@ -206,6 +205,14 @@ class DialogAreaAddTo extends LitElement {
         ha-adaptive-dialog {
           --dialog-content-padding: 0;
         }
+
+        .section-header {
+          padding: var(--ha-space-2) var(--ha-space-4) 0;
+          margin: 0;
+          font-size: var(--ha-font-size-m);
+          font-weight: var(--ha-font-weight-medium);
+          color: var(--secondary-text-color);
+        }
       `,
     ];
   }

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -48,6 +48,8 @@ import type { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry
 
 const cropOptions: CropOptions = {
   round: false,
+  type: "image/jpeg",
+  quality: 0.75,
 };
 
 const SENSOR_DOMAINS = ["sensor"];

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

@@ -60,7 +60,6 @@ import type { SceneEntity } from "../../../data/scene";
 import type { ScriptEntity } from "../../../data/script";
 import type { RelatedResult } from "../../../data/search";
 import { findRelated } from "../../../data/search";
-import { filterAddToSceneEntityIds } from "../../../dialogs/add-to/add-to";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import { showMoreInfoDialog } from "../../../dialogs/more-info/show-ha-more-info-dialog";
 import "../../../layouts/hass-error-screen";
@@ -146,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[] = [];
@@ -440,7 +441,7 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
                           .path=${mdiPlus}
                         ></ha-svg-icon>
                         ${this.hass.localize(
-                          "ui.dialogs.more_info_control.add_to.item"
+                          "ui.dialogs.more_info_control.add_to.title"
                         )}
                       </ha-button>`
                     : nothing}
@@ -782,17 +783,9 @@ class HaConfigAreaPage extends SubscribeMixin(LitElement) {
     if (!area) {
       return;
     }
-    const sceneEntityIds = filterAddToSceneEntityIds(
-      this._areaEntityIds,
-      this._entityReg,
-      this.hass.states
-    );
     showAreaAddToDialog(this, {
       areaId: area.area_id,
-      entityIds: sceneEntityIds,
-      canCreateScene:
-        isComponentLoaded(this.hass.config, "scene") &&
-        sceneEntityIds.length > 0,
+      entityIds: this._areaEntityIds,
     });
   }
 

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

@@ -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;
   }
 }

src/panels/config/areas/show-dialog-area-add-to.ts

@@ -3,7 +3,6 @@ import { fireEvent } from "../../../common/dom/fire_event";
 export interface AreaAddToDialogParams {
   areaId: string;
   entityIds: string[];
-  canCreateScene: boolean;
 }
 
 export const loadAreaAddToDialog = () => import("./dialog-area-add-to");