test(e2e): handle skip return from waitForLocator in all sidebar wait calls

.github/workflows/e2e.yaml

@@ -0,0 +1,276 @@
+name: E2E Tests
+
+on:
+  push:
+    branches:
+      - dev
+      - master
+  pull_request:
+    branches:
+      - dev
+      - master
+
+env:
+  NODE_OPTIONS: --max_old_space_size=6144
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+permissions:
+  contents: read
+
+jobs:
+  # ── Build the demo once and share it across test jobs via artifact ──────────
+  build-demo:
+    name: Build demo
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build demo
+        run: ./node_modules/.bin/gulp build-demo
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload demo build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: demo-dist
+          path: demo/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Build the e2e test app and share it via artifact ────────────────────────
+  build-e2e-test-app:
+    name: Build e2e test app
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build e2e test app
+        run: ./node_modules/.bin/gulp build-e2e-test-app
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload e2e test app build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Build the gallery and share it via artifact ─────────────────────────────
+  build-gallery:
+    name: Build gallery
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Build gallery
+        run: ./node_modules/.bin/gulp build-gallery
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload gallery build
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+          if-no-files-found: error
+          retention-days: 3
+
+  # ── Run Playwright tests locally against Chromium ──────────────────────────
+  e2e-local:
+    name: E2E (local Chromium)
+    needs: [build-demo, build-e2e-test-app, build-gallery]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Install Playwright browsers
+        run: npx playwright install chromium --with-deps
+
+      - name: Download demo build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: demo-dist
+          path: demo/dist/
+
+      - name: Download e2e test app build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+
+      - name: Download gallery build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+
+      - name: Run Playwright tests (local)
+        run: yarn test:e2e
+
+      - name: Upload blob report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        if: always()
+        with:
+          name: blob-report-local
+          path: test/e2e/reports/
+          retention-days: 3
+
+  # ── Run Playwright tests on BrowserStack (real devices + browsers) ─────────
+  # The BrowserStack SDK manages the Local tunnel and uploads results to the
+  # BrowserStack Automate dashboard automatically — no tunnel action needed.
+  e2e-browserstack:
+    name: E2E (BrowserStack)
+    needs: [build-demo, build-e2e-test-app, build-gallery]
+    runs-on: ubuntu-latest
+    environment: browserstack
+    env:
+      BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
+      BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Download demo build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: demo-dist
+          path: demo/dist/
+
+      - name: Download e2e test app build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: e2e-test-app-dist
+          path: test/e2e/app/dist/
+
+      - name: Download gallery build
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        with:
+          name: gallery-dist
+          path: gallery/dist/
+
+      - name: Run Playwright tests (BrowserStack)
+        run: yarn test:e2e:browserstack
+
+  # ── Merge local blob reports and post PR comment ───────────────────────────
+  report:
+    name: Report
+    needs: [e2e-local, e2e-browserstack]
+    runs-on: ubuntu-latest
+    if: always()
+    permissions:
+      contents: read
+      pull-requests: write
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          persist-credentials: false
+
+      - name: Setup Node
+        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+
+      - name: Install dependencies
+        run: yarn install --immutable
+
+      - name: Download blob report (local)
+        uses: actions/download-artifact@65a9edc5881444af0b9093a5e628f2fe47ea3b2e # v4.1.7
+        continue-on-error: true
+        with:
+          name: blob-report-local
+          path: test/e2e/reports/
+
+      - name: Stage blobs for merge
+        run: node test/e2e/collect-blob-reports.mjs
+
+      - name: Merge blob reports
+        run: npx playwright merge-reports -c test/e2e/playwright.merge.config.ts test/e2e/reports/blob
+
+      - name: Upload merged HTML report
+        id: upload-report
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        with:
+          name: playwright-report
+          path: test/e2e/reports/combined/
+          retention-days: 14
+
+      - name: Post report link to PR
+        if: github.event_name == 'pull_request'
+        uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7.0.1
+        with:
+          script: |
+            const runUrl = `${context.serverUrl}/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`;
+            const body = `## Playwright E2E test report\n\nThe combined HTML report is available as a workflow artifact.\n\n[View workflow run](${runUrl})`;
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              body,
+            });

.gitignore

@@ -54,7 +54,14 @@ src/cast/dev_const.ts
 # test coverage
 test/coverage/
 
+# Playwright e2e output
+test/e2e/reports/
+test/e2e/test-results/
+# E2E test app build output
+test/e2e/app/dist/
+
 # AI tooling
 .claude
 .cursor
 .opencode
+.serena

browserstack.yml

@@ -0,0 +1,53 @@
+# BrowserStack Automate configuration for Home Assistant frontend e2e tests.
+# Credentials are read from BROWSERSTACK_USERNAME and BROWSERSTACK_ACCESS_KEY
+# environment variables set in GitHub Actions (or locally).
+# See: https://www.browserstack.com/docs/automate/playwright/getting-started/nodejs
+
+userName: ${BROWSERSTACK_USERNAME}
+accessKey: ${BROWSERSTACK_ACCESS_KEY}
+
+projectName: Home Assistant Frontend
+buildName: e2e tests
+buildIdentifier: "CI #${BUILD_NUMBER}"
+
+# ── Platforms ────────────────────────────────────────────────────────────────
+platforms:
+  - os: Windows
+    osVersion: 11
+    browserName: chrome
+    browserVersion: latest
+  - os: OS X
+    osVersion: Ventura
+    browserName: playwright-firefox
+    browserVersion: latest
+  - deviceName: iPad 6th
+    osVersion: 12
+    browserName: playwright-webkit
+  - deviceName: iPhone 12
+    osVersion: 14
+    browserName: playwright-webkit
+  - deviceName: Samsung Galaxy S23
+    osVersion: 13
+    browserName: chrome
+    realMobile: true
+
+parallelsPerPlatform: 1
+
+# ── Local tunnel ─────────────────────────────────────────────────────────────
+# The SDK manages the BrowserStack Local tunnel automatically.
+browserstackLocal: true
+
+framework: playwright
+
+# Pin to the latest Playwright version BrowserStack supports. Our local
+# @playwright/test is newer (1.59.x) which BrowserStack does not yet support,
+# causing a "Malformed endpoint" connection error if left unset.
+# Update this when BrowserStack adds support for a newer version.
+# Supported versions: https://www.browserstack.com/docs/automate/playwright/browsers-and-os
+playwrightVersion: 1.latest
+
+# ── Debugging ────────────────────────────────────────────────────────────────
+debug: false
+networkLogs: false
+consoleLogs: errors
+testObservability: true

build-scripts/bundle.cjs

@@ -1,4 +1,3 @@
-/* global require, module, __dirname, process */
 const path = require("path");
 const env = require("./env.cjs");
 const paths = require("./paths.cjs");
@@ -321,4 +320,22 @@ module.exports.config = {
       isLandingPageBuild: true,
     };
   },
+
+  e2eTestApp({ isProdBuild, latestBuild, isStatsBuild }) {
+    return {
+      name: "e2e-test-app" + nameSuffix(latestBuild),
+      entry: {
+        main: path.resolve(paths.e2eTestApp_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.e2eTestApp_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      defineOverlay: {
+        __VERSION__: JSON.stringify(`E2E-TEST-${env.version()}`),
+        __DEMO__: true,
+      },
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    };
+  },
 };

build-scripts/eslint.config.mjs

@@ -1,9 +1,13 @@
 // @ts-check
 
+import globals from "globals";
 import tseslint from "typescript-eslint";
 import rootConfig from "../eslint.config.mjs";
 
 export default tseslint.config(...rootConfig, {
+  languageOptions: {
+    globals: globals.node,
+  },
   rules: {
     "no-console": "off",
     "import-x/no-extraneous-dependencies": "off",

build-scripts/get-built-in-node-module-shim.cjs

@@ -1,4 +1,3 @@
-/* global module */
 // Browser-only replacement for core-js/internals/get-built-in-node-module.
 // The original helper evaluates `Function('return require("...")')()`
 // when it detects a Node environment, which causes a runtime

build-scripts/gulp/clean.js

@@ -45,3 +45,10 @@ gulp.task(
     ])
   )
 );
+
+gulp.task(
+  "clean-e2e-test-app",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([paths.e2eTestApp_output_root, paths.build_dir])
+  )
+);

build-scripts/gulp/e2e-test-app.js

@@ -0,0 +1,41 @@
+import gulp from "gulp";
+import "./clean.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-e2e-test-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-e2e-test-app",
+    "translations-enable-merge-backend",
+    gulp.parallel(
+      "gen-icons-json",
+      "gen-pages-e2e-test-app-dev",
+      "build-translations",
+      "build-locale-data"
+    ),
+    "copy-static-e2e-test-app",
+    "rspack-dev-server-e2e-test-app"
+  )
+);
+
+gulp.task(
+  "build-e2e-test-app",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-e2e-test-app",
+    "translations-enable-merge-backend",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-e2e-test-app",
+    "rspack-prod-e2e-test-app",
+    "gen-pages-e2e-test-app-prod"
+  )
+);

build-scripts/gulp/entry-html.js

@@ -268,3 +268,24 @@ gulp.task(
     paths.landingPage_output_es5
   )
 );
+
+const E2E_TEST_APP_PAGE_ENTRIES = { "index.html": ["main"] };
+
+gulp.task(
+  "gen-pages-e2e-test-app-dev",
+  genPagesDevTask(
+    E2E_TEST_APP_PAGE_ENTRIES,
+    paths.e2eTestApp_dir,
+    paths.e2eTestApp_output_root
+  )
+);
+
+gulp.task(
+  "gen-pages-e2e-test-app-prod",
+  genPagesProdTask(
+    E2E_TEST_APP_PAGE_ENTRIES,
+    paths.e2eTestApp_dir,
+    paths.e2eTestApp_output_root,
+    paths.e2eTestApp_output_latest
+  )
+);

build-scripts/gulp/gather-static.js

@@ -201,3 +201,23 @@ gulp.task("copy-static-landing-page", async () => {
   copyFonts(paths.landingPage_output_static);
   copyTranslations(paths.landingPage_output_static);
 });
+
+gulp.task("copy-static-e2e-test-app", async () => {
+  // Copy app static files (icons, polyfills, etc.)
+  fs.copySync(
+    polyPath("public/static"),
+    path.resolve(paths.e2eTestApp_output_root, "static")
+  );
+  // Copy e2e test app public files (manifest, sw stubs)
+  const e2ePublic = path.resolve(paths.e2eTestApp_dir, "public");
+  if (fs.existsSync(e2ePublic)) {
+    fs.copySync(e2ePublic, paths.e2eTestApp_output_root);
+  }
+
+  copyPolyfills(paths.e2eTestApp_output_static);
+  copyMapPanel(paths.e2eTestApp_output_static);
+  copyFonts(paths.e2eTestApp_output_static);
+  copyTranslations(paths.e2eTestApp_output_static);
+  copyLocaleData(paths.e2eTestApp_output_static);
+  copyMdiIcons(paths.e2eTestApp_output_static);
+});

build-scripts/gulp/index.mjs

@@ -4,6 +4,7 @@ import "./clean.js";
 import "./compress.js";
 import "./demo.js";
 import "./download-translations.js";
+import "./e2e-test-app.js";
 import "./entry-html.js";
 import "./fetch-nightly-translations.js";
 import "./gallery.js";

build-scripts/gulp/rspack.js

@@ -14,6 +14,7 @@ import {
   createDemoConfig,
   createGalleryConfig,
   createLandingPageConfig,
+  createE2eTestAppConfig,
 } from "../rspack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
@@ -210,3 +211,22 @@ gulp.task("rspack-prod-landing-page", () =>
     })
   )
 );
+
+gulp.task("rspack-dev-server-e2e-test-app", () =>
+  runDevServer({
+    compiler: rspack(
+      createE2eTestAppConfig({ isProdBuild: false, latestBuild: true })
+    ),
+    contentBase: paths.e2eTestApp_output_root,
+    port: 8095,
+  })
+);
+
+gulp.task("rspack-prod-e2e-test-app", () =>
+  prodBuild(
+    bothBuilds(createE2eTestAppConfig, {
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+    })
+  )
+);

build-scripts/paths.cjs

@@ -50,4 +50,15 @@ module.exports = {
   ),
 
   translations_src: path.resolve(__dirname, "../src/translations"),
+
+  e2eTestApp_dir: path.resolve(__dirname, "../test/e2e/app"),
+  e2eTestApp_output_root: path.resolve(__dirname, "../test/e2e/app/dist"),
+  e2eTestApp_output_static: path.resolve(
+    __dirname,
+    "../test/e2e/app/dist/static"
+  ),
+  e2eTestApp_output_latest: path.resolve(
+    __dirname,
+    "../test/e2e/app/dist/frontend_latest"
+  ),
 };

build-scripts/rspack.cjs

@@ -1,4 +1,3 @@
-/* global require, module, __dirname */
 const { existsSync } = require("fs");
 const path = require("path");
 const rspack = require("@rspack/core");
@@ -338,6 +337,11 @@ const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
 
+const createE2eTestAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createRspackConfig(
+    bundle.config.e2eTestApp({ isProdBuild, latestBuild, isStatsBuild })
+  );
+
 module.exports = {
   createAppConfig,
   createDemoConfig,
@@ -345,4 +349,5 @@ module.exports = {
   createGalleryConfig,
   createRspackConfig,
   createLandingPageConfig,
+  createE2eTestAppConfig,
 };

demo/src/stubs/assist.ts

@@ -0,0 +1,21 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockAssist = (hass: MockHomeAssistant) => {
+  // Stub for assist pipeline list — returns empty so developer tools assist
+  // tab loads without errors.
+  hass.mockWS("assist_pipeline/pipeline/list", () => ({
+    pipelines: [],
+    preferred_pipeline: null,
+  }));
+
+  // Stub for assist pipeline run — immediately sends run-end event so
+  // the UI does not hang waiting for a response.
+  hass.mockWS("assist_pipeline/run", (_msg, _hass, onChange) => {
+    if (onChange) {
+      onChange({
+        type: "run-end",
+      });
+    }
+    return null;
+  });
+};

demo/src/stubs/cloud.ts

@@ -0,0 +1,21 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockCloud = (hass: MockHomeAssistant) => {
+  // REST mock for cloud status — returns disconnected so config panel loads
+  // without errors but without requiring cloud integration.
+  hass.mockAPI("cloud/status", () => ({
+    logged_in: false,
+    cloud: "disconnected",
+    prefs: {
+      google_enabled: false,
+      alexa_enabled: false,
+      cloudhooks: {},
+      remote_enabled: false,
+    },
+    google_registered: false,
+    alexa_registered: false,
+    remote_domain: null,
+    remote_connected: false,
+    remote_certificate: null,
+  }));
+};

demo/src/stubs/update.ts

@@ -0,0 +1,5 @@
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockUpdate = (hass: MockHomeAssistant) => {
+  hass.mockWS("update/list", () => []);
+};

eslint.config.mjs

@@ -228,6 +228,12 @@ export default tseslint.config(
       globals: globals.serviceworker,
     },
   },
+  {
+    files: ["test/e2e/*.mjs"],
+    languageOptions: {
+      globals: globals.node,
+    },
+  },
   {
     plugins: {
       html,

package.json

@@ -21,13 +21,22 @@
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
     "test": "vitest run --config test/vitest.config.ts",
-    "test:coverage": "vitest run --config test/vitest.config.ts --coverage"
+    "test:coverage": "vitest run --config test/vitest.config.ts --coverage",
+    "test:e2e": "node test/e2e/run-suites.mjs demo app gallery",
+    "test:e2e:browserstack": "node test/e2e/run-suites.mjs demo:browserstack app:browserstack gallery:browserstack",
+    "test:e2e:show-report": "yarn playwright show-report test/e2e/reports/combined",
+    "test:e2e:demo": "playwright test --config test/e2e/playwright.demo.config.ts",
+    "test:e2e:demo:browserstack": "browserstack-node-sdk playwright test --config test/e2e/playwright.demo.config.ts",
+    "test:e2e:app": "playwright test --config test/e2e/playwright.app.config.ts",
+    "test:e2e:app:browserstack": "browserstack-node-sdk playwright test --config test/e2e/playwright.app.config.ts",
+    "test:e2e:gallery": "playwright test --config test/e2e/playwright.gallery.config.ts",
+    "test:e2e:gallery:browserstack": "browserstack-node-sdk playwright test --config test/e2e/playwright.gallery.config.ts"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.29.7",
+    "@babel/runtime": "7.29.2",
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.2",
     "@codemirror/commands": "6.10.3",
@@ -126,10 +135,10 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.29.7",
+    "@babel/core": "7.29.0",
     "@babel/helper-define-polyfill-provider": "0.6.8",
-    "@babel/plugin-transform-runtime": "7.29.7",
-    "@babel/preset-env": "7.29.7",
+    "@babel/plugin-transform-runtime": "7.29.0",
+    "@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",
@@ -137,6 +146,7 @@
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
+    "@playwright/test": "1.59.1",
     "@rsdoctor/rspack-plugin": "1.5.11",
     "@rspack/core": "2.0.4",
     "@rspack/dev-server": "2.0.1",
@@ -161,6 +171,7 @@
     "babel-loader": "10.1.1",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.4",
+    "browserstack-node-sdk": "1.53.2",
     "del": "8.0.1",
     "eslint": "10.4.0",
     "eslint-config-prettier": "10.1.8",
@@ -198,7 +209,7 @@
     "terser-webpack-plugin": "5.6.0",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
-    "typescript-eslint": "8.60.0",
+    "typescript-eslint": "8.59.4",
     "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.1.7",
     "webpack-stats-plugin": "1.1.3",

pyproject.toml

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

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

@@ -11,7 +11,6 @@ import {
 } from "../../data/context";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import type { LocalizeFunc } from "../translations/localize";
-import { ensureArray } from "../array/ensure-array";
 import { transform } from "./transform";
 
 interface ConsumeEntryConfig {
@@ -27,28 +26,6 @@ const resolveAtPath = (host: unknown, path: readonly string[]) => {
   return cur;
 };
 
-/** Reuse `previous` when every entry still references the same `HassEntity`. */
-export const preserveUnchangedEntityStatesRecord = <
-  T extends Record<string, HassEntity | undefined>,
->(
-  previous: T | undefined,
-  next: T
-): T => {
-  if (!previous) {
-    return next;
-  }
-  const nextKeys = Object.keys(next);
-  if (Object.keys(previous).length !== nextKeys.length) {
-    return next;
-  }
-  for (const key of nextKeys) {
-    if (previous[key] !== next[key]) {
-      return next;
-    }
-  }
-  return previous;
-};
-
 const composeDecorator = <T, V>(
   context: Parameters<typeof consume>[0]["context"],
   watchKey: string | undefined,
@@ -86,52 +63,27 @@ export const consumeEntityState = (config: ConsumeEntryConfig) =>
   );
 
 /**
- * Like {@link consumeEntityState} but for one or more entity IDs at
- * `entityIdPath` (a string or string array; wrapped with {@link ensureArray}).
- * Resolves to a record keyed by entity ID containing the currently-available
- * entities (missing entities and non-string IDs are filtered out). Returns the
- * previous record when none of the selected entities changed.
+ * Like {@link consumeEntityState} but for an array of entity IDs at
+ * `entityIdPath`. Resolves to a `HassEntity[]` containing one entry per
+ * currently-available entity (missing entities and non-string IDs are
+ * filtered out; original order is preserved).
  */
-export const consumeEntityStates = (config: ConsumeEntryConfig) => {
-  const watchKey = config.entityIdPath[0];
-  const buildRecord = function (this: unknown, states: HassEntities) {
-    const ids = ensureArray(resolveAtPath(this, config.entityIdPath));
-    if (!ids || !states) return undefined;
-    const result: Record<string, HassEntity> = {};
-    for (const id of ids) {
-      if (typeof id !== "string") continue;
-      const state = states[id];
-      if (state !== undefined) result[id] = state;
+export const consumeEntityStates = (config: ConsumeEntryConfig) =>
+  composeDecorator<HassEntities, HassEntity[]>(
+    statesContext,
+    config.entityIdPath[0],
+    function (states) {
+      const ids = resolveAtPath(this, config.entityIdPath);
+      if (!Array.isArray(ids) || !states) return undefined;
+      const result: HassEntity[] = [];
+      for (const id of ids) {
+        if (typeof id !== "string") continue;
+        const state = states[id];
+        if (state !== undefined) result.push(state);
+      }
+      return result;
     }
-    return result;
-  };
-
-  return (proto: unknown, propertyKey: string) => {
-    const key = String(propertyKey);
-    const transformDec = transform<
-      HassEntities,
-      Record<string, HassEntity> | undefined
-    >({
-      transformer: function (this: unknown, states: HassEntities) {
-        const next = buildRecord.call(this, states);
-        if (next === undefined) {
-          return undefined;
-        }
-        const previous = (this as Record<string, unknown>)[
-          `__transform_${key}`
-        ] as Record<string, HassEntity> | undefined;
-        return preserveUnchangedEntityStatesRecord(previous, next);
-      },
-      watch: watchKey ? [watchKey] : [],
-    });
-    const consumeDec = consume<any>({
-      context: statesContext,
-      subscribe: true,
-    });
-    transformDec(proto as never, propertyKey);
-    consumeDec(proto as never, propertyKey);
-  };
-};
+  );
 
 /**
  * Consumes `entitiesContext` and narrows it to the

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

@@ -1,6 +1,5 @@
-import { LitElement, css, html, nothing } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../ha-tooltip";
 
 export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
 
@@ -13,7 +12,6 @@ export type LiveTestState = "pass" | "fail" | "invalid" | "unknown";
  *
  * @attr {"pass"|"fail"|"invalid"|"unknown"} state - The current live-test state. Defaults to `unknown`.
  * @attr {string} label - Accessible label announced by assistive technology.
- * @attr {string} message - Optional tooltip body shown on hover/focus.
  */
 @customElement("ha-automation-row-live-test")
 export class HaAutomationRowLiveTest extends LitElement {
@@ -21,8 +19,6 @@ export class HaAutomationRowLiveTest extends LitElement {
 
   @property() public label = "";
 
-  @property() public message?: string;
-
   protected render() {
     return html`
       <div
@@ -31,9 +27,6 @@ export class HaAutomationRowLiveTest extends LitElement {
         tabindex="0"
         aria-label=${this.label}
       ></div>
-      ${this.message
-        ? html`<ha-tooltip for="indicator">${this.message}</ha-tooltip>`
-        : nothing}
     `;
   }
 

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}
@@ -103,16 +103,12 @@ export class HaSankeyChart extends LitElement {
       : data.value;
     if (data.id) {
       const node = this.data.nodes.find((n) => n.id === data.id);
-      return html`<ha-chart-tooltip-marker
-          .color=${String(params.color ?? "")}
-        ></ha-chart-tooltip-marker>
-        ${node?.label ?? data.id}<br />${value}`;
+      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 />${value}`;
+      return `${filterXSS(source?.label ?? data.source)} → ${filterXSS(target?.label ?? data.target)}<br>${value}`;
     }
     return null;
   };

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

@@ -5,9 +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");
@@ -24,6 +25,8 @@ export interface SunburstNode {
 
 @customElement("ha-sunburst-chart")
 export class HaSunburstChart extends LitElement {
+  public hass!: HomeAssistant;
+
   @property({ attribute: false }) public data?: SunburstNode;
 
   @property({ attribute: false }) public valueFormatter?: (
@@ -47,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)}
@@ -68,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/entity/ha-statistic-picker.ts

@@ -1,16 +1,11 @@
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import {
-  mdiChartLine,
-  mdiHelpCircleOutline,
-  mdiPencil,
-  mdiShape,
-} from "@mdi/js";
+import { mdiChartLine, mdiHelpCircleOutline, mdiShape } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
-import { type HASSDomEvent, fireEvent } from "../../common/dom/fire_event";
+import { fireEvent } from "../../common/dom/fire_event";
 import { computeEntityNameList } from "../../common/entity/compute_entity_name_display";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { computeRTL } from "../../common/util/compute_rtl";
@@ -58,16 +53,6 @@ const SEARCH_KEYS = [
   { name: "id", weight: 2 },
 ];
 
-export interface StatisticElementChangedEvent {
-  statisticId: string;
-}
-
-declare global {
-  interface HASSDomEvents {
-    "edit-statistics-element": StatisticElementChangedEvent;
-  }
-}
-
 @customElement("ha-statistic-picker")
 export class HaStatisticPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -145,8 +130,6 @@ export class HaStatisticPicker extends LitElement {
 
   @query("ha-generic-picker") private _picker?: HaGenericPicker;
 
-  @property({ attribute: "can-edit", type: Boolean }) public canEdit?: boolean;
-
   public willUpdate(changedProps: PropertyValues<this>) {
     if (
       (!this.hasUpdated && !this.statisticIds) ||
@@ -358,15 +341,6 @@ export class HaStatisticPicker extends LitElement {
       ${item.secondary
         ? html`<span slot="supporting-text">${item.secondary}</span>`
         : nothing}
-      ${this.canEdit
-        ? html`<ha-icon-button
-            slot="end"
-            .value=${statisticId}
-            .label=${this.hass.localize("ui.common.edit")}
-            .path=${mdiPencil}
-            @click=${this._editItem}
-          ></ha-icon-button>`
-        : nothing}
     `;
   }
 
@@ -376,12 +350,6 @@ export class HaStatisticPicker extends LitElement {
 
   private _valueRenderer: PickerValueRenderer = this._makeValueRenderer();
 
-  private _editItem(ev: HASSDomEvent<StatisticElementChangedEvent>) {
-    ev.stopPropagation();
-    const statisticId = (ev.currentTarget as any).value;
-    fireEvent(this, "edit-statistics-element", { statisticId });
-  }
-
   private _computeItem(statisticId: string): StatisticComboBoxItem {
     const stateObj = this.hass.states[statisticId];
 

src/components/entity/ha-statistics-picker.ts

@@ -1,10 +1,9 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import { type HASSDomEvent, fireEvent } from "../../common/dom/fire_event";
+import { fireEvent } from "../../common/dom/fire_event";
 import type { ValueChangedEvent, HomeAssistant } from "../../types";
 import "./ha-statistic-picker";
-import type { StatisticElementChangedEvent } from "./ha-statistic-picker";
 
 @customElement("ha-statistics-picker")
 class HaStatisticsPicker extends LitElement {
@@ -60,8 +59,6 @@ class HaStatisticsPicker extends LitElement {
   })
   public ignoreRestrictionsOnFirstStatistic = false;
 
-  @property({ attribute: "can-edit", type: Boolean }) public canEdit?;
-
   protected render() {
     if (!this.hass) {
       return nothing;
@@ -102,9 +99,7 @@ class HaStatisticsPicker extends LitElement {
               .statisticIds=${this.statisticIds}
               .excludeStatistics=${this.value}
               .allowCustomEntity=${this.allowCustomEntity}
-              .canEdit=${this.canEdit}
               @value-changed=${this._statisticChanged}
-              @edit-statistics-element=${this._editItem}
             ></ha-statistic-picker>
           </div>
         `
@@ -127,17 +122,6 @@ class HaStatisticsPicker extends LitElement {
     `;
   }
 
-  private _editItem(ev: HASSDomEvent<StatisticElementChangedEvent>) {
-    const statisticId = ev.detail.statisticId;
-    const index = this._currentStatistics!.findIndex((e) => e === statisticId);
-    fireEvent(this, "edit-detail-element", {
-      subElementConfig: {
-        index,
-        type: "row",
-      },
-    });
-  }
-
   private get _currentStatistics() {
     return this.value || [];
   }

src/components/entity/state-info.ts

@@ -43,6 +43,7 @@ class StateInfo extends LitElement {
                     )}:
                   </span>
                   <ha-relative-time
+                    .hass=${this.hass}
                     .datetime=${this.stateObj.last_changed}
                     capitalize
                   ></ha-relative-time>
@@ -54,6 +55,7 @@ class StateInfo extends LitElement {
                     )}:
                   </span>
                   <ha-relative-time
+                    .hass=${this.hass}
                     .datetime=${this.stateObj.last_updated}
                     capitalize
                   ></ha-relative-time>
@@ -61,6 +63,7 @@ class StateInfo extends LitElement {
               </ha-tooltip>
               <ha-relative-time
                 id="relative-time"
+                .hass=${this.hass}
                 .datetime=${this.stateObj.last_changed}
                 capitalize
               ></ha-relative-time>

src/components/ha-absolute-time.ts

@@ -1,34 +1,18 @@
-import { consume } from "@lit/context";
 import { addDays, differenceInMilliseconds, startOfDay } from "date-fns";
-import type { HassConfig } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { transform } from "../common/decorators/transform";
+import { customElement, property } from "lit/decorators";
 import { absoluteTime } from "../common/datetime/absolute_time";
-import { configContext, internationalizationContext } from "../data/context";
-import type {
-  HomeAssistantConfig,
-  HomeAssistantInternationalization,
-} from "../types";
+import type { HomeAssistant } from "../types";
 
 const SAFE_MARGIN = 5 * 1000;
 
 @customElement("ha-absolute-time")
 class HaAbsoluteTime extends ReactiveElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ attribute: false }) public datetime?: string | Date;
 
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n?: HomeAssistantInternationalization;
-
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  @transform<HomeAssistantConfig, HassConfig>({
-    transformer: ({ config }) => config,
-  })
-  private _config?: HassConfig;
-
   private _timeout?: number;
 
   public disconnectedCallback(): void {
@@ -78,17 +62,13 @@ class HaAbsoluteTime extends ReactiveElement {
   }
 
   private _updateAbsolute(): void {
-    if (!this._i18n || !this._config) {
-      return;
-    }
-
     if (!this.datetime) {
-      this.innerHTML = this._i18n.localize("ui.components.absolute_time.never");
+      this.innerHTML = this.hass.localize("ui.components.absolute_time.never");
     } else {
       this.innerHTML = absoluteTime(
         new Date(this.datetime),
-        this._i18n.locale,
-        this._config
+        this.hass.locale,
+        this.hass.config
       );
     }
   }

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

@@ -11,15 +11,12 @@ import {
   mdiStateMachine,
   mdiWeatherSunny,
 } from "@mdi/js";
-import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { until } from "lit/directives/until";
-import type { HassConfig, Connection } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
-import { transform } from "../common/decorators/transform";
-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";
 
@@ -39,24 +36,12 @@ 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: configContext, subscribe: true })
-  @transform<{ config: HassConfig }, HassConfig>({
-    transformer: ({ config }) => config,
-  })
-  private _config?: HassConfig;
-
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  @transform<{ connection: Connection }, Connection>({
-    transformer: ({ connection }) => connection,
-  })
-  private _connection?: Connection;
-
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -66,13 +51,13 @@ export class HaConditionIcon extends LitElement {
       return nothing;
     }
 
-    if (!this._connection || !this._config) {
+    if (!this.hass) {
       return this._renderFallback();
     }
 
     const icon = conditionIcon(
-      this._connection,
-      this._config,
+      this.hass.connection,
+      this.hass.config,
       this.condition
     ).then((icn) => {
       if (icn) {

src/components/ha-filter-blueprints.ts

@@ -3,8 +3,6 @@ import { mdiFilterVariantRemove } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
 import { deepEqual } from "../common/util/deep-equal";
 import type { Blueprints } from "../data/blueprint";
@@ -22,10 +20,6 @@ import "./ha-list";
 export class HaFilterBlueprints extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
   @property({ attribute: false }) public value?: string[];
 
   @property() public type?: "automation" | "script";
@@ -60,7 +54,7 @@ export class HaFilterBlueprints extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this._localize("ui.panel.config.blueprint.caption")}
+          ${this.hass.localize("ui.panel.config.blueprint.caption")}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button

src/components/ha-filter-voice-assistants.ts

@@ -4,8 +4,6 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import { consumeLocalize } from "../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../common/translations/localize";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
@@ -24,10 +22,6 @@ import "../panels/config/voice-assistants/expose/expose-assistant-icon";
 export class HaFilterVoiceAssistants extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state()
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
   // the list of selected voiceAssistantIds
   @property({ attribute: false }) public value: string[] = [];
 
@@ -50,7 +44,9 @@ export class HaFilterVoiceAssistants extends LitElement {
         @expanded-changed=${this._expandedChanged}
       >
         <div slot="header" class="header">
-          ${this._localize("ui.panel.config.dashboard.voice_assistants.main")}
+          ${this.hass.localize(
+            "ui.panel.config.dashboard.voice_assistants.main"
+          )}
           ${this.value?.length
             ? html`<div class="badge">${this.value?.length}</div>
                 <ha-icon-button

src/components/ha-relative-time.ts

@@ -1,23 +1,19 @@
-import { consume } from "@lit/context";
 import { parseISO } from "date-fns";
 import type { PropertyValues } from "lit";
 import { ReactiveElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { relativeTime } from "../common/datetime/relative_time";
 import { capitalizeFirstLetter } from "../common/string/capitalize-first-letter";
-import { internationalizationContext } from "../data/context";
-import type { HomeAssistantInternationalization } from "../types";
+import type { HomeAssistant } from "../types";
 
 @customElement("ha-relative-time")
 class HaRelativeTime extends ReactiveElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ attribute: false }) public datetime?: string | Date;
 
   @property({ type: Boolean }) public capitalize = false;
 
-  @state()
-  @consume({ context: internationalizationContext, subscribe: true })
-  private _i18n?: HomeAssistantInternationalization;
-
   private _interval?: number;
 
   public disconnectedCallback(): void {
@@ -61,19 +57,15 @@ class HaRelativeTime extends ReactiveElement {
   }
 
   private _updateRelative(): void {
-    if (!this._i18n) {
-      return;
-    }
-
     if (!this.datetime) {
-      this.innerHTML = this._i18n.localize("ui.components.relative_time.never");
+      this.innerHTML = this.hass.localize("ui.components.relative_time.never");
     } else {
       const date =
         typeof this.datetime === "string"
           ? parseISO(this.datetime)
           : this.datetime;
 
-      const relTime = relativeTime(date, this._i18n.locale);
+      const relTime = relativeTime(date, this.hass.locale);
       this.innerHTML = this.capitalize
         ? capitalizeFirstLetter(relTime)
         : relTime;

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-attribute.ts

@@ -1,13 +1,11 @@
-import type { HassEntity } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { ensureArray } from "../../common/array/ensure-array";
-import { consumeEntityStates } from "../../common/decorators/consume-context-entry";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { AttributeSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
 import "../entity/ha-entity-attribute-picker";
+import { ensureArray } from "../../common/array/ensure-array";
 
 @customElement("ha-selector-attribute")
 export class HaSelectorAttribute extends LitElement {
@@ -29,10 +27,6 @@ export class HaSelectorAttribute extends LitElement {
     filter_entity?: string | string[];
   };
 
-  @state()
-  @consumeEntityStates({ entityIdPath: ["context", "filter_entity"] })
-  private _filterEntityStates?: Record<string, HassEntity>;
-
   protected render() {
     return html`
       <ha-entity-attribute-picker
@@ -79,7 +73,7 @@ export class HaSelectorAttribute extends LitElement {
       const entityIds = ensureArray(this.context.filter_entity);
 
       invalid = !entityIds.some((entityId) => {
-        const stateObj = this._filterEntityStates?.[entityId];
+        const stateObj = this.hass.states[entityId];
         return (
           stateObj &&
           this.value in stateObj.attributes &&

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-boolean.ts

@@ -1,12 +1,15 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import type { HomeAssistant } from "../../types";
 import "../ha-formfield";
 import "../ha-switch";
 import "../ha-input-helper-text";
 
 @customElement("ha-selector-boolean")
 export class HaBooleanSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ type: Boolean }) public value = false;
 
   @property() public placeholder?: any;

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

@@ -2,12 +2,10 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isTemplate } from "../../common/string/has-template";
 import type { ChooseSelector, Selector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
-import type { LocalizeFunc } from "../../common/translations/localize";
 import "../ha-button-toggle-group";
 import "./ha-selector";
 
@@ -30,9 +28,6 @@ export class HaChooseSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
-  @consumeLocalize()
-  protected _localize?: LocalizeFunc;
-
   @state() public _activeChoice?: string;
 
   protected willUpdate(changedProperties: PropertyValues<this>): void {
@@ -67,7 +62,7 @@ export class HaChooseSelector extends LitElement {
           .buttons=${this._toggleButtons(
             this.selector.choose.choices,
             this.selector.choose.translation_key,
-            this._localize
+            this.hass.localize
           )}
           .active=${this._activeChoice}
           @value-changed=${this._choiceChanged}
@@ -88,7 +83,7 @@ export class HaChooseSelector extends LitElement {
     (
       choices: ChooseSelector["choose"]["choices"],
       translationKey?: string,
-      _localize?: LocalizeFunc
+      _localize?: HomeAssistant["localize"]
     ) =>
       Object.keys(choices).map((choice) => ({
         label:

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

@@ -2,11 +2,14 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import type { DurationSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
 import "../ha-duration-input";
 import type { HaDurationData, HaDurationInput } from "../ha-duration-input";
 
 @customElement("ha-selector-duration")
 export class HaTimeDuration extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ attribute: false }) public selector!: DurationSelector;
 
   @property({ attribute: false }) public value?:

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

@@ -3,12 +3,10 @@ import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { removeFile, uploadFile } from "../../data/file_upload";
 import type { FileSelector } from "../../data/selector";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import type { HomeAssistant } from "../../types";
-import type { LocalizeFunc } from "../../common/translations/localize";
 import "../ha-file-upload";
 
 @customElement("ha-selector-file")
@@ -27,9 +25,6 @@ export class HaFileSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
-  @consumeLocalize()
-  protected _localize?: LocalizeFunc;
-
   @state() private _filename?: { fileId: string; name: string };
 
   @state() private _busy = false;
@@ -47,7 +42,7 @@ export class HaFileSelector extends LitElement {
         .uploading=${this._busy}
         .value=${this.value
           ? this._filename?.name ||
-            this._localize!("ui.components.selectors.file.unknown_file")
+            this.hass.localize("ui.components.selectors.file.unknown_file")
           : undefined}
         @file-picked=${this._uploadFile}
         @change=${this._removeFile}
@@ -77,7 +72,7 @@ export class HaFileSelector extends LitElement {
       fireEvent(this, "value-changed", { value: fileId });
     } catch (err: any) {
       showAlertDialog(this, {
-        text: this._localize!("ui.components.selectors.file.upload_failed", {
+        text: this.hass.localize("ui.components.selectors.file.upload_failed", {
           reason: err.message || err,
         }),
       });

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-period.ts

@@ -1,7 +1,6 @@
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { PeriodKey, PeriodSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
@@ -42,9 +41,6 @@ export class HaPeriodSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
-  @consumeLocalize()
-  protected _localize?: LocalizeFunc;
-
   private _schema = memoizeOne(
     (
       selectedPeriodKey: PeriodKey | undefined,
@@ -82,7 +78,7 @@ export class HaPeriodSelector extends LitElement {
     const schema = this._schema(
       typeof data.period === "string" ? (data.period as PeriodKey) : undefined,
       this.selector,
-      this._localize!
+      this.hass.localize
     );
 
     return html`

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-selector/ha-selector-selector.ts

@@ -2,7 +2,6 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { consumeLocalize } from "../../common/decorators/consume-context-entry";
 import { fireEvent } from "../../common/dom/fire_event";
 import type {
   LocalizeFunc,
@@ -169,9 +168,6 @@ export class HaSelectorSelector extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public required = true;
 
-  @consumeLocalize()
-  protected _localize?: LocalizeFunc;
-
   private _yamlMode = false;
 
   protected shouldUpdate(changedProps: PropertyValues<this>) {
@@ -240,7 +236,7 @@ export class HaSelectorSelector extends LitElement {
       };
     }
 
-    const schema = this._schema(type, this._localize!);
+    const schema = this._schema(type, this.hass.localize);
 
     return html`<div>
       <p>${this.label ? this.label : ""}</p>
@@ -294,7 +290,7 @@ export class HaSelectorSelector extends LitElement {
   }
 
   private _computeLabelCallback = (schema: any): string =>
-    this._localize!(
+    this.hass.localize(
       `ui.components.selectors.selector.${schema.name}` as LocalizeKeys
     ) || schema.name;
 

src/components/ha-service-icon.ts

@@ -1,39 +1,24 @@
-import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { until } from "lit/directives/until";
-import type { Connection, HassConfig } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
-import { transform } from "../common/decorators/transform";
-import { configContext, connectionContext } from "../data/context";
 import {
   DEFAULT_SERVICE_ICON,
   FALLBACK_DOMAIN_ICONS,
   serviceIcon,
 } from "../data/icons";
+import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";
 
 @customElement("ha-service-icon")
 export class HaServiceIcon extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public service?: string;
 
   @property() public icon?: string;
 
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  @transform<{ config: HassConfig }, HassConfig>({
-    transformer: ({ config }) => config,
-  })
-  private _config?: HassConfig;
-
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  @transform<{ connection: Connection }, Connection>({
-    transformer: ({ connection }) => connection,
-  })
-  private _connection?: Connection;
-
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -43,18 +28,20 @@ export class HaServiceIcon extends LitElement {
       return nothing;
     }
 
-    if (!this._connection || !this._config) {
+    if (!this.hass) {
       return this._renderFallback();
     }
 
-    const icon = serviceIcon(this._connection, this._config, this.service).then(
-      (icn) => {
-        if (icn) {
-          return html`<ha-icon .icon=${icn}></ha-icon>`;
-        }
-        return this._renderFallback();
+    const icon = serviceIcon(
+      this.hass.connection,
+      this.hass.config,
+      this.service
+    ).then((icn) => {
+      if (icn) {
+        return html`<ha-icon .icon=${icn}></ha-icon>`;
       }
-    );
+      return this._renderFallback();
+    });
 
     return html`${until(icon)}`;
   }

src/components/ha-service-section-icon.ts

@@ -1,36 +1,21 @@
-import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { until } from "lit/directives/until";
-import type { Connection, HassConfig } from "home-assistant-js-websocket";
-import { transform } from "../common/decorators/transform";
-import { configContext, connectionContext } from "../data/context";
-import { serviceSectionIcon } from "../data/icons";
+import type { HomeAssistant } from "../types";
 import "./ha-icon";
 import "./ha-svg-icon";
+import { serviceSectionIcon } from "../data/icons";
 
 @customElement("ha-service-section-icon")
 export class HaServiceSectionIcon extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public service?: string;
 
   @property() public section?: string;
 
   @property() public icon?: string;
 
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  @transform<{ config: HassConfig }, HassConfig>({
-    transformer: ({ config }) => config,
-  })
-  private _config?: HassConfig;
-
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  @transform<{ connection: Connection }, Connection>({
-    transformer: ({ connection }) => connection,
-  })
-  private _connection?: Connection;
-
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -40,13 +25,13 @@ export class HaServiceSectionIcon extends LitElement {
       return nothing;
     }
 
-    if (!this._connection || !this._config) {
+    if (!this.hass) {
       return this._renderFallback();
     }
 
     const icon = serviceSectionIcon(
-      this._connection,
-      this._config,
+      this.hass.connection,
+      this.hass.config,
       this.service,
       this.section
     ).then((icn) => {

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

@@ -22,7 +22,6 @@ export const haTopAppBarFixedStyles = css`
     padding-top: var(--safe-area-inset-top);
     padding-right: var(--safe-area-inset-right);
     transition:
-      box-shadow var(--ha-animation-duration-short) ease,
       width var(--ha-animation-duration-normal) ease,
       padding-left var(--ha-animation-duration-normal) ease,
       padding-right var(--ha-animation-duration-normal) ease;

src/components/ha-trigger-icon.ts

@@ -17,16 +17,13 @@ import {
   mdiWeatherSunny,
   mdiWebhook,
 } from "@mdi/js";
-import { consume } from "@lit/context";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { until } from "lit/directives/until";
-import type { Connection, HassConfig } from "home-assistant-js-websocket";
 import { computeDomain } from "../common/entity/compute_domain";
-import { transform } from "../common/decorators/transform";
-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";
 import "./ha-icon";
 import "./ha-svg-icon";
 
@@ -53,24 +50,12 @@ export const TRIGGER_ICONS = {
 
 @customElement("ha-trigger-icon")
 export class HaTriggerIcon extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public trigger?: string;
 
   @property() public icon?: string;
 
-  @state()
-  @consume({ context: configContext, subscribe: true })
-  @transform<{ config: HassConfig }, HassConfig>({
-    transformer: ({ config }) => config,
-  })
-  private _config?: HassConfig;
-
-  @state()
-  @consume({ context: connectionContext, subscribe: true })
-  @transform<{ connection: Connection }, Connection>({
-    transformer: ({ connection }) => connection,
-  })
-  private _connection?: Connection;
-
   protected render() {
     if (this.icon) {
       return html`<ha-icon .icon=${this.icon}></ha-icon>`;
@@ -80,18 +65,20 @@ export class HaTriggerIcon extends LitElement {
       return nothing;
     }
 
-    if (!this._connection || !this._config) {
+    if (!this.hass) {
       return this._renderFallback();
     }
 
-    const icon = triggerIcon(this._connection, this._config, this.trigger).then(
-      (icn) => {
-        if (icn) {
-          return html`<ha-icon .icon=${icn}></ha-icon>`;
-        }
-        return this._renderFallback();
+    const icon = triggerIcon(
+      this.hass.connection,
+      this.hass.config,
+      this.trigger
+    ).then((icn) => {
+      if (icn) {
+        return html`<ha-icon .icon=${icn}></ha-icon>`;
       }
-    );
+      return this._renderFallback();
+    });
 
     return html`${until(icon)}`;
   }

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-logbook.ts

@@ -1,8 +1,6 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { consumeLocalize } from "../../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../../common/translations/localize";
 import type { LogbookEntry } from "../../data/logbook";
 import type { HomeAssistant } from "../../types";
 import "./hat-logbook-note";
@@ -19,9 +17,6 @@ export class HaTraceLogbook extends LitElement {
 
   @property({ attribute: false }) public logbookEntries!: LogbookEntry[];
 
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
-
   protected render(): TemplateResult {
     return this.logbookEntries.length
       ? html`
@@ -31,10 +26,13 @@ export class HaTraceLogbook extends LitElement {
             .entries=${this.logbookEntries}
             .narrow=${this.narrow}
           ></ha-logbook-renderer>
-          <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
+          <hat-logbook-note
+            .hass=${this.hass}
+            .domain=${this.trace.domain}
+          ></hat-logbook-note>
         `
       : html`<div class="padded-box">
-          ${this._localize(
+          ${this.hass.localize(
             "ui.panel.config.automation.trace.path.no_logbook_entries"
           )}
         </div>`;

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

@@ -374,7 +374,10 @@ export class HaTracePathDetails extends LitElement {
             .entries=${entries}
             .narrow=${this.narrow}
           ></ha-logbook-renderer>
-          <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
+          <hat-logbook-note
+            .hass=${this.hass}
+            .domain=${this.trace.domain}
+          ></hat-logbook-note>
         `
       : html`<div class="padded-box">
           ${this.hass!.localize(

src/components/trace/ha-trace-timeline.ts

@@ -28,7 +28,10 @@ export class HaTraceTimeline extends LitElement {
         allow-pick
       >
       </hat-trace-timeline>
-      <hat-logbook-note .domain=${this.trace.domain}></hat-logbook-note>
+      <hat-logbook-note
+        .hass=${this.hass}
+        .domain=${this.trace.domain}
+      ></hat-logbook-note>
     `;
   }
 

src/components/trace/hat-logbook-note.ts

@@ -1,22 +1,20 @@
 import { css, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { consumeLocalize } from "../../common/decorators/consume-context-entry";
-import type { LocalizeFunc } from "../../common/translations/localize";
+import type { HomeAssistant } from "../../types";
 
 @customElement("hat-logbook-note")
 class HatLogbookNote extends LitElement {
-  @property() public domain: "automation" | "script" = "automation";
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @consumeLocalize()
-  private _localize!: LocalizeFunc;
+  @property() public domain: "automation" | "script" = "automation";
 
   render() {
     if (this.domain === "script") {
-      return this._localize(
+      return this.hass.localize(
         "ui.panel.config.automation.trace.messages.not_all_entries_are_related_script_note"
       );
     }
-    return this._localize(
+    return this.hass.localize(
       "ui.panel.config.automation.trace.messages.not_all_entries_are_related_automation_note"
     );
   }

src/data/automation.ts

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

src/data/automation_i18n.ts

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

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_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/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/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/components/ha-more-info-state-header.ts

@@ -54,12 +54,14 @@ export class HaMoreInfoStateHeader extends LitElement {
           ${this._absoluteTime
             ? html`
                 <ha-absolute-time
+                  .hass=${this.hass}
                   .datetime=${this.changedOverride ??
                   this.stateObj.last_changed}
                 ></ha-absolute-time>
               `
             : html`
                 <ha-relative-time
+                  .hass=${this.hass}
                   .datetime=${this.changedOverride ??
                   this.stateObj.last_changed}
                   capitalize

src/dialogs/more-info/controls/more-info-automation.ts

@@ -23,6 +23,7 @@ class MoreInfoAutomation extends LitElement {
       <div class="flex">
         <div>${this.hass.localize("ui.card.automation.last_triggered")}:</div>
         <ha-relative-time
+          .hass=${this.hass}
           .datetime=${this.stateObj.attributes.last_triggered}
           capitalize
         ></ha-relative-time>

src/dialogs/more-info/controls/more-info-sun.ts

@@ -36,6 +36,7 @@ class MoreInfoSun extends LitElement {
                     )}</span
               >
               <ha-relative-time
+                .hass=${this.hass}
                 .datetime=${item === "ris" ? risingDate : settingDate}
               ></ha-relative-time>
             </div>

src/dialogs/more-info/controls/more-info-weather.ts

@@ -201,6 +201,7 @@ class MoreInfoWeather extends LitElement {
             <div class="time-ago">
               <ha-relative-time
                 id="relative-time"
+                .hass=${this.hass}
                 .datetime=${this.stateObj.last_changed}
                 capitalize
               ></ha-relative-time>
@@ -212,6 +213,7 @@ class MoreInfoWeather extends LitElement {
                     )}:
                   </span>
                   <ha-relative-time
+                    .hass=${this.hass}
                     .datetime=${this.stateObj.last_changed}
                     capitalize
                   ></ha-relative-time>
@@ -223,6 +225,7 @@ class MoreInfoWeather extends LitElement {
                     )}:
                   </span>
                   <ha-relative-time
+                    .hass=${this.hass}
                     .datetime=${this.stateObj.last_updated}
                     capitalize
                   ></ha-relative-time>

src/dialogs/notifications/persistent-notification-item.ts

@@ -30,6 +30,7 @@ export class HuiPersistentNotificationItem extends LitElement {
           <span>
             <ha-relative-time
               id="relative-time"
+              .hass=${this.hass}
               .datetime=${this.notification.created_at}
               capitalize
             ></ha-relative-time>

src/fake_data/provide_hass.ts

@@ -412,6 +412,10 @@ export const provideHass = (
         value: value !== null ? value : (stateObj.attributes[attribute] ?? ""),
       },
     ],
+    formatEntityName: (stateObj, type) =>
+      typeof type === "string"
+        ? type
+        : (stateObj.attributes.friendly_name ?? stateObj.entity_id),
     ...overrideData,
   };
 

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

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { goBack } from "../../common/navigate";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -14,7 +15,6 @@ import type { Lovelace } from "../lovelace/types";
 import "../lovelace/views/hui-view";
 import "../lovelace/views/hui-view-background";
 import "../lovelace/views/hui-view-container";
-import "../../components/ha-top-app-bar-fixed";
 
 const CLIMATE_LOVELACE_VIEW_CONFIG: LovelaceStrategyViewConfig = {
   strategy: {
@@ -97,36 +97,38 @@ class PanelClimate extends LitElement {
 
   protected render() {
     return html`
-      <ha-top-app-bar-fixed .narrow=${this.narrow}>
-        ${this._searchParams.has("historyBack")
-          ? html`
-              <ha-icon-button-arrow-prev
-                @click=${this._back}
-                slot="navigationIcon"
-              ></ha-icon-button-arrow-prev>
-            `
-          : html`
-              <ha-menu-button
-                slot="navigationIcon"
-                .hass=${this.hass}
-                .narrow=${this.narrow}
-              ></ha-menu-button>
-            `}
-        <div slot="title">${this.hass.localize("panel.climate")}</div>
-        ${this._lovelace
-          ? html`
-              <hui-view-container .hass=${this.hass}>
-                <hui-view-background .hass=${this.hass}> </hui-view-background>
-                <hui-view
+      <div class="header ${classMap({ narrow: this.narrow })}">
+        <div class="toolbar">
+          ${this._searchParams.has("historyBack")
+            ? html`
+                <ha-icon-button-arrow-prev
+                  @click=${this._back}
+                  slot="navigationIcon"
+                ></ha-icon-button-arrow-prev>
+              `
+            : html`
+                <ha-menu-button
+                  slot="navigationIcon"
                   .hass=${this.hass}
                   .narrow=${this.narrow}
-                  .lovelace=${this._lovelace}
-                  .index=${this._viewIndex}
-                ></hui-view
-              ></hui-view-container>
-            `
-          : nothing}
-      </ha-top-app-bar-fixed>
+                ></ha-menu-button>
+              `}
+          <div class="main-title">${this.hass.localize("panel.climate")}</div>
+        </div>
+      </div>
+      ${this._lovelace
+        ? html`
+            <hui-view-container .hass=${this.hass}>
+              <hui-view-background .hass=${this.hass}> </hui-view-background>
+              <hui-view
+                .hass=${this.hass}
+                .narrow=${this.narrow}
+                .lovelace=${this._lovelace}
+                .index=${this._viewIndex}
+              ></hui-view
+            ></hui-view-container>
+          `
+        : nothing}
     `;
   }
 
@@ -167,11 +169,78 @@ class PanelClimate extends LitElement {
           -webkit-user-select: none;
           -moz-user-select: none;
         }
+        .header {
+          background-color: var(--app-header-background-color);
+          color: var(--app-header-text-color, white);
+          position: fixed;
+          top: 0;
+          width: calc(
+            var(--ha-top-app-bar-width, 100%) - var(
+                --safe-area-inset-right,
+                0px
+              )
+          );
+          padding-top: var(--safe-area-inset-top);
+          z-index: 4;
+          display: flex;
+          flex-direction: row;
+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
+          backdrop-filter: var(--app-header-backdrop-filter, none);
+          padding-top: var(--safe-area-inset-top);
+          padding-right: var(--safe-area-inset-right);
+        }
+        :host([narrow]) .header {
+          width: calc(
+            var(--ha-top-app-bar-width, 100%) - var(
+                --safe-area-inset-left,
+                0px
+              ) - var(--safe-area-inset-right, 0px)
+          );
+          padding-left: var(--safe-area-inset-left);
+        }
+        :host([scrolled]) .header {
+          box-shadow: var(
+            --bar-box-shadow,
+            0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+            0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+            0px 1px 10px 0px rgba(0, 0, 0, 0.12)
+          );
+        }
+        .toolbar {
+          height: var(--header-height);
+          display: flex;
+          flex: 1;
+          align-items: center;
+          font-size: var(--ha-font-size-xl);
+          padding: 0px 12px;
+          font-weight: var(--ha-font-weight-normal);
+          box-sizing: border-box;
+          border-bottom: var(--app-header-border-bottom, none);
+        }
+        :host([narrow]) .toolbar {
+          padding: 0 4px;
+        }
+        .main-title {
+          margin-inline-start: var(--ha-space-6);
+          line-height: var(--ha-line-height-normal);
+          flex-grow: 1;
+        }
+        .narrow .main-title {
+          margin-inline-start: var(--ha-space-2);
+        }
         hui-view-container {
           position: relative;
           display: flex;
           min-height: 100vh;
           box-sizing: border-box;
+          padding-top: calc(var(--header-height) + var(--safe-area-inset-top));
+          padding-right: var(--safe-area-inset-right);
+          padding-inline-end: var(--safe-area-inset-right);
+          padding-bottom: var(--safe-area-inset-bottom);
+        }
+        :host([narrow]) hui-view-container {
+          padding-left: var(--safe-area-inset-left);
+          padding-inline-start: var(--safe-area-inset-left);
         }
         hui-view {
           flex: 1 1 100%;

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,19 +181,19 @@ 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}
             ${getAppDisplayName(
               this._currentAddon.name,
               this._currentAddon.stage
@@ -239,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">
@@ -503,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
@@ -540,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}
@@ -871,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
@@ -1501,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 {
@@ -1530,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/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

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

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/automation/action/ha-automation-action-editor.ts

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

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

@@ -297,8 +297,8 @@ export default class HaAutomationActionRow extends LitElement {
             ?.target
         : undefined;
 
-    const noteTooltipText = truncateWithEllipsis(
-      this.action.note?.trim() || "",
+    const commentTooltipText = truncateWithEllipsis(
+      this.action.comment?.trim() || "",
       250
     );
 
@@ -334,23 +334,21 @@ export default class HaAutomationActionRow extends LitElement {
           ? this._renderTargets(
               target,
               actionHasTarget && !this._isNew,
-              serviceTargetSpec,
-              type !== "device_id"
+              serviceTargetSpec
             )
           : nothing}
-        ${noteTooltipText
+        ${commentTooltipText
           ? html`
               <ha-svg-icon
-                id="note-icon"
-                tabindex="0"
+                id="comment-icon"
                 .path=${mdiCommentTextOutline}
                 .label=${this.hass.localize(
-                  "ui.panel.config.automation.editor.note.label"
+                  "ui.panel.config.automation.editor.comment.label"
                 )}
-                class="note-indicator"
+                class="comment-indicator"
               ></ha-svg-icon
-              ><ha-tooltip for="note-icon"
-                ><p>${noteTooltipText}</p></ha-tooltip
+              ><ha-tooltip for="comment-icon"
+                ><p>${commentTooltipText}</p></ha-tooltip
               >
             `
           : nothing}
@@ -409,11 +407,11 @@ export default class HaAutomationActionRow extends LitElement {
             )
           )}
         </ha-dropdown-item>
-        <ha-dropdown-item value="edit_note">
+        <ha-dropdown-item value="edit_comment">
           <ha-svg-icon slot="icon" .path=${mdiCommentEditOutline}></ha-svg-icon>
           ${this._renderOverflowLabel(
             this.hass.localize(
-              `ui.panel.config.automation.editor.note.${this.action.note ? "edit" : "add"}`
+              `ui.panel.config.automation.editor.comment.${this.action.comment ? "edit" : "add"}`
             )
           )}
         </ha-dropdown-item>
@@ -723,14 +721,13 @@ export default class HaAutomationActionRow extends LitElement {
     (
       target?: HassServiceTarget,
       targetRequired = false,
-      targetSpec?: TargetSelector["target"],
-      interactive = false
+      targetSpec?: TargetSelector["target"]
     ) =>
       html`<ha-automation-row-targets
+        .hass=${this.hass}
         .target=${target}
         .targetRequired=${targetRequired}
         .selector=${targetSpec ? { target: targetSpec } : undefined}
-        .interactive=${interactive}
       ></ha-automation-row-targets>`
   );
 
@@ -944,25 +941,25 @@ export default class HaAutomationActionRow extends LitElement {
     }
   };
 
-  private _editNoteAction = async (): Promise<void> => {
-    const note = await showPromptDialog(this, {
+  private _editCommentAction = async (): Promise<void> => {
+    const comment = await showPromptDialog(this, {
       title: this.hass.localize(
-        `ui.panel.config.automation.editor.note.${this.action.note ? "edit" : "add"}`
+        `ui.panel.config.automation.editor.comment.${this.action.comment ? "edit" : "add"}`
       ),
       inputLabel: this.hass.localize(
-        "ui.panel.config.automation.editor.note.label"
+        "ui.panel.config.automation.editor.comment.label"
       ),
       inputType: "string",
-      defaultValue: this.action.note,
+      defaultValue: this.action.comment,
       confirmText: this.hass.localize("ui.common.submit"),
       multiline: true,
     });
-    if (note !== null) {
+    if (comment !== null) {
       const value = { ...this.action };
-      if (note === "") {
-        delete value.note;
+      if (comment === "") {
+        delete value.comment;
       } else {
-        value.note = note;
+        value.comment = comment;
       }
       fireEvent(this, "value-changed", {
         value,
@@ -1092,7 +1089,7 @@ export default class HaAutomationActionRow extends LitElement {
       rename: () => {
         this._renameAction();
       },
-      editNote: this._editNoteAction,
+      editComment: this._editCommentAction,
       toggleYamlMode: () => {
         this._toggleYamlMode();
         this.openSidebar();
@@ -1188,8 +1185,8 @@ export default class HaAutomationActionRow extends LitElement {
       case "rename":
         this._renameAction();
         break;
-      case "edit_note":
-        this._editNoteAction();
+      case "edit_comment":
+        this._editCommentAction();
         break;
       case "duplicate":
         this._duplicateAction();