Refactor lovelace view lifecycle to avoid unnecessary DOM rebuilds

- Remove `force` flag from `hui-root` that was clearing the entire view
  cache and destroying all cached view DOM on any config change. Views
  now receive updated lovelace in place and handle config changes
  internally.
- Add `_cleanupViewCache` to remove stale cache entries when views are
  added, removed, or reordered.
- Remove `@ll-rebuild` handler from `hui-root`. Cards and badges already
  handle `ll-rebuild` via their `hui-card`/`hui-badge` wrappers. Sections
  now always stop propagation and rebuild locally.
- Add `deepEqual` guard in `hui-view._setConfig` and
  `hui-section._initializeConfig` to skip re-rendering when strategy
  regeneration produces an identical config.
- Simplify `hui-view` refresh flow: remove `_refreshConfig`,
  `_rendered` flag, `strategy-config-changed` event, and
  connected/disconnected callbacks. Registry changes now debounce
  directly into `_initializeConfig`.
- Fix `isStrategy` check in `hui-view._initializeConfig` to use the raw
  config (before strategy expansion) rather than the generated config.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.github/copilot-instructions.md

@@ -464,7 +464,14 @@ this.hass.localize("ui.panel.config.updates.update_available", {
 
 ### Pull Requests
 
-When creating a pull request, you **must** use the PR template located at `.github/PULL_REQUEST_TEMPLATE.md`. Read the template file and use its full content as the PR body, filling in each section appropriately. Do not omit, reorder, or rewrite the template sections. Do not check the checklist items on behalf of the user — those are the user's responsibility to review and check. If the PR includes UI changes, remind the user to add screenshots or a short video to the PR after creating it.
+When creating a pull request, you **must** use the PR template located at `.github/PULL_REQUEST_TEMPLATE.md`. Read the template file and use its full content as the PR body, filling in each section appropriately.
+
+- Do not omit, reorder, or rewrite the template sections
+- Check the appropriate "Type of change" box based on the changes
+- Do not check the checklist items on behalf of the user — those are the user's responsibility to review and check
+- If the PR includes UI changes, remind the user to add screenshots or a short video to the PR after creating it
+- Be simple and user friendly — explain what the change does, not implementation details
+- Use markdown so the user can copy it
 
 ### Text and Copy Guidelines
 

.github/workflows/cast_deployment.yaml

@@ -26,7 +26,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -61,7 +61,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

@@ -26,7 +26,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -60,7 +60,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -78,7 +78,7 @@ jobs:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -89,13 +89,13 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
           if-no-files-found: error
       - name: Upload frontend build
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: frontend-build
           path: hass_frontend/

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
+        uses: github/codeql-action/init@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
+        uses: github/codeql-action/autobuild@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
+        uses: github/codeql-action/analyze@0d579ffd059c29b07949a3cce3983f0780820c98 # v4.32.6

.github/workflows/demo_deployment.yaml

@@ -27,7 +27,7 @@ jobs:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -62,7 +62,7 @@ jobs:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_deployment.yaml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_preview.yaml

@@ -24,7 +24,7 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/nightly.yaml

@@ -28,7 +28,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
+        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/release-drafter.yaml

@@ -18,6 +18,6 @@ jobs:
       pull-requests: read
     runs-on: ubuntu-latest
     steps:
-      - uses: release-drafter/release-drafter@6db134d15f3909ccc9eefd369f02bd1e9cffdf97 # v6.2.0
+      - uses: release-drafter/release-drafter@6a93d829887aa2e0748befe2e808c66c0ec6e4c7 # v6.4.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -37,7 +37,7 @@ jobs:
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -100,7 +100,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.nvmrc

@@ -1 +1 @@
-24.13.1
+24.14.0

cast/src/receiver/demo/cast-demo-entities.ts

@@ -1,8 +1,7 @@
-import type { Entity } from "../../../../src/fake_data/entity";
-import { convertEntities } from "../../../../src/fake_data/entity";
+import type { EntityInput } from "../../../../src/fake_data/entities/types";
 
-export const castDemoEntities: () => Entity[] = () =>
-  convertEntities({
+export const castDemoEntities: () => EntityInput[] = () =>
+  Object.values({
     "light.reading_light": {
       entity_id: "light.reading_light",
       state: "on",

demo/src/configs/arsaboo/entities.ts

@@ -1,8 +1,7 @@
-import { convertEntities } from "../../../../src/fake_data/entity";
 import type { DemoConfig } from "../types";
 
 export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
-  convertEntities({
+  Object.values({
     "todo.shopping_list": {
       entity_id: "todo.shopping_list",
       state: "2",

demo/src/configs/jimpower/entities.ts

@@ -1,8 +1,7 @@
-import { convertEntities } from "../../../../src/fake_data/entity";
 import type { DemoConfig } from "../types";
 
 export const demoEntitiesJimpower: DemoConfig["entities"] = () =>
-  convertEntities({
+  Object.values({
     "todo.shopping_list": {
       entity_id: "todo.shopping_list",
       state: "2",

demo/src/configs/kernehed/entities.ts

@@ -1,8 +1,7 @@
-import { convertEntities } from "../../../../src/fake_data/entity";
 import type { DemoConfig } from "../types";
 
 export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
-  convertEntities({
+  Object.values({
     "todo.shopping_list": {
       entity_id: "todo.shopping_list",
       state: "2",

demo/src/configs/sections/entities.ts

@@ -1,8 +1,7 @@
-import { convertEntities } from "../../../../src/fake_data/entity";
 import type { DemoConfig } from "../types";
 
 export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
-  convertEntities({
+  Object.values({
     "cover.living_room_garden_shutter": {
       entity_id: "cover.living_room_garden_shutter",
       state: "open",

demo/src/configs/teachingbirds/entities.ts

@@ -1,8 +1,7 @@
-import { convertEntities } from "../../../../src/fake_data/entity";
 import type { DemoConfig } from "../types";
 
 export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
-  convertEntities({
+  Object.values({
     "todo.shopping_list": {
       entity_id: "todo.shopping_list",
       state: "2",

demo/src/configs/types.ts

@@ -1,7 +1,7 @@
 import type { TemplateResult } from "lit";
 import type { LocalizeFunc } from "../../../src/common/translations/localize";
 import type { LovelaceConfig } from "../../../src/data/lovelace/config/types";
-import type { Entity } from "../../../src/fake_data/entity";
+import type { EntityInput } from "../../../src/fake_data/entities/types";
 
 export interface DemoConfig {
   index?: number;
@@ -12,6 +12,6 @@ export interface DemoConfig {
     | string
     | ((localize: LocalizeFunc) => string | TemplateResult<1>);
   lovelace: (localize: LocalizeFunc) => LovelaceConfig;
-  entities: (localize: LocalizeFunc) => Entity[];
+  entities: (localize: LocalizeFunc) => EntityInput[];
   theme: () => Record<string, string> | null;
 }

demo/src/stubs/entities.ts

@@ -1,7 +1,5 @@
-import { convertEntities } from "../../../src/fake_data/entity";
-
 export const mapEntities = () =>
-  convertEntities({
+  Object.values({
     "zone.home": {
       entity_id: "zone.home",
       state: "zoning",
@@ -51,7 +49,7 @@ export const mapEntities = () =>
   });
 
 export const energyEntities = () =>
-  convertEntities({
+  Object.values({
     "sensor.grid_fossil_fuel_percentage": {
       entity_id: "sensor.grid_fossil_fuel_percentage",
       state: "88.6",

gallery/src/data/media_players.ts

@@ -1,175 +1,253 @@
-import { getEntity } from "../../../src/fake_data/entity";
-
 export const createMediaPlayerEntities = () => [
-  getEntity("media_player", "music_paused", "paused", {
-    friendly_name: "Pausing The Music",
-    media_content_type: "music",
-    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
-    media_artist: "Technohead",
-    // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-    // Select Source + Stop + Clear + Play + Shuffle Set
-    supported_features: 64063,
-    entity_picture: "/images/album_cover_2.jpg",
-    media_duration: 300,
-    media_position: 50,
-    media_position_updated_at: new Date(
-      // 23 seconds in
-      new Date().getTime() - 23000
-    ).toISOString(),
-    volume_level: 0.5,
-    source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-    source: "AirPlay",
-    sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
-    sound_mode: "Music",
-  }),
-  getEntity("media_player", "music_playing", "playing", {
-    friendly_name: "Playing The Music",
-    media_content_type: "music",
-    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
-    media_artist: "Technohead",
-    // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media + Grouping
-    supported_features: 784959,
-    entity_picture: "/images/album_cover.jpg",
-    media_duration: 300,
-    media_position: 0,
-    media_position_updated_at: new Date(
-      // 23 seconds in
-      new Date().getTime() - 23000
-    ).toISOString(),
-    volume_level: 0.5,
-    sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
-    sound_mode: "Music",
-    group_members: ["media_player.playing", "media_player.stream_playing"],
-  }),
-  getEntity("media_player", "stream_playing", "playing", {
-    friendly_name: "Playing the Stream",
-    media_content_type: "movie",
-    media_title: "Epic sax guy 10 hours",
-    app_name: "YouTube",
-    entity_picture: "/images/frenck.jpg",
-    // Pause + Next Track + Play + Browse Media
-    supported_features: 147489,
-  }),
-  getEntity("media_player", "stream_paused", "paused", {
-    friendly_name: "Paused the Stream",
-    media_content_type: "movie",
-    media_title: "Epic sax guy 10 hours",
-    app_name: "YouTube",
-    entity_picture: "/images/frenck.jpg",
-    // Pause + Next Track + Play
-    supported_features: 16417,
-  }),
-  getEntity("media_player", "stream_playing_previous", "playing", {
-    friendly_name: 'Playing the Stream (with "previous" support)',
-    media_content_type: "movie",
-    media_title: "Epic sax guy 10 hours",
-    app_name: "YouTube",
-    entity_picture: "/images/frenck.jpg",
-    // Pause + Previous Track + Play
-    supported_features: 16401,
-  }),
-  getEntity("media_player", "tv_playing", "playing", {
-    friendly_name: "Playing non-skip TV Show",
-    media_content_type: "tvshow",
-    media_title: "Chapter 1",
-    media_series_title: "House of Cards",
-    app_name: "Netflix",
-    entity_picture: "/images/netflix.jpg",
-    // Pause
-    supported_features: 1,
-  }),
-  getEntity("media_player", "sonos_idle", "idle", {
-    friendly_name: "Sonos Idle",
-    // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-    // Select Source + Stop + Clear + Play + Shuffle Set
-    supported_features: 64063,
-    volume_level: 0.33,
-    is_volume_muted: true,
-  }),
-  getEntity("media_player", "idle_browse_media", "idle", {
-    friendly_name: "Idle waiting for Browse Media (e.g. Spotify)",
-    // Pause + Seek + Volume Set + Previous Track + Next Track + Play Media +
-    // Select Source + Play + Shuffle Set + Browse Media
-    supported_features: 182839,
-    volume_level: 0.79,
-  }),
-  getEntity("media_player", "theater_off", "off", {
-    friendly_name: "TV Off",
-    // On + Off + Play + Next + Pause
-    supported_features: 16801,
-  }),
-  getEntity("media_player", "theater_on", "on", {
-    friendly_name: "TV On",
-    // On + Off + Play + Next + Pause
-    supported_features: 16801,
-  }),
-  getEntity("media_player", "theater_off_static", "off", {
-    friendly_name: "TV Off (cannot be switched on)",
-    // Off + Next + Pause
-    supported_features: 289,
-  }),
-  getEntity("media_player", "theater_on_static", "on", {
-    friendly_name: "TV On (cannot be switched off)",
-    // On + Next + Pause
-    supported_features: 161,
-  }),
-  getEntity("media_player", "android_cast", "playing", {
-    friendly_name: "Casting App (no supported features)",
-    media_title: "Android Screen Casting",
-    app_name: "Screen Mirroring",
-  }),
-  getEntity("media_player", "image_display", "playing", {
-    friendly_name: "Digital Picture Frame",
-    media_content_type: "image",
-    media_title: "Famous Painting",
-    media_artist: "Famous Artist",
-    entity_picture: "/images/sunflowers.jpg",
-    // On + Off + Browse Media
-    supported_features: 131456,
-  }),
-  getEntity("media_player", "unavailable", "unavailable", {
-    friendly_name: "Player Unavailable",
-    // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
-    // Play Media + Stop + Play
-    supported_features: 21437,
-  }),
-  getEntity("media_player", "unknown", "unknown", {
-    friendly_name: "Player Unknown",
-    // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
-    // Play Media + Stop + Play
-    supported_features: 21437,
-  }),
-  getEntity("media_player", "playing", "playing", {
-    friendly_name: "Player Playing (no Pause support)",
-    // Volume Set + Volume Mute + Previous Track + Next Track +
-    // Play Media + Stop + Play
-    supported_features: 21436,
-    volume_level: 1,
-  }),
-  getEntity("media_player", "idle", "idle", {
-    friendly_name: "Player Idle",
-    // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
-    // Play Media + Stop + Play
-    supported_features: 21437,
-    volume_level: 0,
-  }),
-  getEntity("media_player", "receiver_on", "on", {
-    source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-    sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
-    volume_level: 0.63,
-    is_volume_muted: false,
-    source: "TV",
-    sound_mode: "Movie",
-    friendly_name: "Receiver (selectable sources)",
-    // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
-    supported_features: 84364,
-  }),
-  getEntity("media_player", "receiver_off", "off", {
-    source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
-    sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
-    friendly_name: "Receiver (selectable sources)",
-    // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
-    supported_features: 84364,
-  }),
+  {
+    entity_id: "media_player.music_paused",
+    state: "paused",
+    attributes: {
+      friendly_name: "Pausing The Music",
+      media_content_type: "music",
+      media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
+      media_artist: "Technohead",
+      // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
+      // Select Source + Stop + Clear + Play + Shuffle Set
+      supported_features: 64063,
+      entity_picture: "/images/album_cover_2.jpg",
+      media_duration: 300,
+      media_position: 50,
+      media_position_updated_at: new Date(
+        // 23 seconds in
+        new Date().getTime() - 23000
+      ).toISOString(),
+      volume_level: 0.5,
+      source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
+      source: "AirPlay",
+      sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
+      sound_mode: "Music",
+    },
+  },
+  {
+    entity_id: "media_player.music_playing",
+    state: "playing",
+    attributes: {
+      friendly_name: "Playing The Music",
+      media_content_type: "music",
+      media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
+      media_artist: "Technohead",
+      // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
+      // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media + Grouping
+      supported_features: 784959,
+      entity_picture: "/images/album_cover.jpg",
+      media_duration: 300,
+      media_position: 0,
+      media_position_updated_at: new Date(
+        // 23 seconds in
+        new Date().getTime() - 23000
+      ).toISOString(),
+      volume_level: 0.5,
+      sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
+      sound_mode: "Music",
+      group_members: ["media_player.playing", "media_player.stream_playing"],
+    },
+  },
+  {
+    entity_id: "media_player.stream_playing",
+    state: "playing",
+    attributes: {
+      friendly_name: "Playing the Stream",
+      media_content_type: "movie",
+      media_title: "Epic sax guy 10 hours",
+      app_name: "YouTube",
+      entity_picture: "/images/frenck.jpg",
+      // Pause + Next Track + Play + Browse Media
+      supported_features: 147489,
+    },
+  },
+  {
+    entity_id: "media_player.stream_paused",
+    state: "paused",
+    attributes: {
+      friendly_name: "Paused the Stream",
+      media_content_type: "movie",
+      media_title: "Epic sax guy 10 hours",
+      app_name: "YouTube",
+      entity_picture: "/images/frenck.jpg",
+      // Pause + Next Track + Play
+      supported_features: 16417,
+    },
+  },
+  {
+    entity_id: "media_player.stream_playing_previous",
+    state: "playing",
+    attributes: {
+      friendly_name: 'Playing the Stream (with "previous" support)',
+      media_content_type: "movie",
+      media_title: "Epic sax guy 10 hours",
+      app_name: "YouTube",
+      entity_picture: "/images/frenck.jpg",
+      // Pause + Previous Track + Play
+      supported_features: 16401,
+    },
+  },
+  {
+    entity_id: "media_player.tv_playing",
+    state: "playing",
+    attributes: {
+      friendly_name: "Playing non-skip TV Show",
+      media_content_type: "tvshow",
+      media_title: "Chapter 1",
+      media_series_title: "House of Cards",
+      app_name: "Netflix",
+      entity_picture: "/images/netflix.jpg",
+      // Pause
+      supported_features: 1,
+    },
+  },
+  {
+    entity_id: "media_player.sonos_idle",
+    state: "idle",
+    attributes: {
+      friendly_name: "Sonos Idle",
+      // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
+      // Select Source + Stop + Clear + Play + Shuffle Set
+      supported_features: 64063,
+      volume_level: 0.33,
+      is_volume_muted: true,
+    },
+  },
+  {
+    entity_id: "media_player.idle_browse_media",
+    state: "idle",
+    attributes: {
+      friendly_name: "Idle waiting for Browse Media (e.g. Spotify)",
+      // Pause + Seek + Volume Set + Previous Track + Next Track + Play Media +
+      // Select Source + Play + Shuffle Set + Browse Media
+      supported_features: 182839,
+      volume_level: 0.79,
+    },
+  },
+  {
+    entity_id: "media_player.theater_off",
+    state: "off",
+    attributes: {
+      friendly_name: "TV Off",
+      // On + Off + Play + Next + Pause
+      supported_features: 16801,
+    },
+  },
+  {
+    entity_id: "media_player.theater_on",
+    state: "on",
+    attributes: {
+      friendly_name: "TV On",
+      // On + Off + Play + Next + Pause
+      supported_features: 16801,
+    },
+  },
+  {
+    entity_id: "media_player.theater_off_static",
+    state: "off",
+    attributes: {
+      friendly_name: "TV Off (cannot be switched on)",
+      // Off + Next + Pause
+      supported_features: 289,
+    },
+  },
+  {
+    entity_id: "media_player.theater_on_static",
+    state: "on",
+    attributes: {
+      friendly_name: "TV On (cannot be switched off)",
+      // On + Next + Pause
+      supported_features: 161,
+    },
+  },
+  {
+    entity_id: "media_player.android_cast",
+    state: "playing",
+    attributes: {
+      friendly_name: "Casting App (no supported features)",
+      media_title: "Android Screen Casting",
+      app_name: "Screen Mirroring",
+    },
+  },
+  {
+    entity_id: "media_player.image_display",
+    state: "playing",
+    attributes: {
+      friendly_name: "Digital Picture Frame",
+      media_content_type: "image",
+      media_title: "Famous Painting",
+      media_artist: "Famous Artist",
+      entity_picture: "/images/sunflowers.jpg",
+      // On + Off + Browse Media
+      supported_features: 131456,
+    },
+  },
+  {
+    entity_id: "media_player.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Player Unavailable",
+      // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
+      // Play Media + Stop + Play
+      supported_features: 21437,
+    },
+  },
+  {
+    entity_id: "media_player.unknown",
+    state: "unknown",
+    attributes: {
+      friendly_name: "Player Unknown",
+      // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
+      // Play Media + Stop + Play
+      supported_features: 21437,
+    },
+  },
+  {
+    entity_id: "media_player.playing",
+    state: "playing",
+    attributes: {
+      friendly_name: "Player Playing (no Pause support)",
+      // Volume Set + Volume Mute + Previous Track + Next Track +
+      // Play Media + Stop + Play
+      supported_features: 21436,
+      volume_level: 1,
+    },
+  },
+  {
+    entity_id: "media_player.idle",
+    state: "idle",
+    attributes: {
+      friendly_name: "Player Idle",
+      // Pause + Volume Set + Volume Mute + Previous Track + Next Track +
+      // Play Media + Stop + Play
+      supported_features: 21437,
+      volume_level: 0,
+    },
+  },
+  {
+    entity_id: "media_player.receiver_on",
+    state: "on",
+    attributes: {
+      source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
+      sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
+      volume_level: 0.63,
+      is_volume_muted: false,
+      source: "TV",
+      sound_mode: "Movie",
+      friendly_name: "Receiver (selectable sources)",
+      // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
+      supported_features: 84364,
+    },
+  },
+  {
+    entity_id: "media_player.receiver_off",
+    state: "off",
+    attributes: {
+      source_list: ["AirPlay", "Blu-Ray", "TV", "USB", "iPod (USB)"],
+      sound_mode_list: ["Movie", "Music", "Game", "Pure Audio"],
+      friendly_name: "Receiver (selectable sources)",
+      // Volume Set + Volume Mute + On + Off + Select Source + Play + Sound Mode
+      supported_features: 84364,
+    },
+  },
 ];

gallery/src/data/plants.ts

@@ -1,72 +1,82 @@
-import { getEntity } from "../../../src/fake_data/entity";
-
 export const createPlantEntities = () => [
-  getEntity("plant", "lemon_tree", "ok", {
-    problem: "none",
-    sensors: {
-      moisture: "sensor.lemon_tree_moisture",
-      battery: "sensor.lemon_tree_battery",
-      temperature: "sensor.lemon_tree_temperature",
-      conductivity: "sensor.lemon_tree_conductivity",
-      brightness: "sensor.lemon_tree_brightness",
+  {
+    entity_id: "plant.lemon_tree",
+    state: "ok",
+    attributes: {
+      problem: "none",
+      sensors: {
+        moisture: "sensor.lemon_tree_moisture",
+        battery: "sensor.lemon_tree_battery",
+        temperature: "sensor.lemon_tree_temperature",
+        conductivity: "sensor.lemon_tree_conductivity",
+        brightness: "sensor.lemon_tree_brightness",
+      },
+      unit_of_measurement_dict: {
+        temperature: "°C",
+        moisture: "%",
+        brightness: "lx",
+        battery: "%",
+        conductivity: "μS/cm",
+      },
+      moisture: 54,
+      battery: 95,
+      temperature: 15.6,
+      conductivity: 1,
+      brightness: 12,
+      max_brightness: 20,
+      friendly_name: "Lemon Tree",
     },
-    unit_of_measurement_dict: {
-      temperature: "°C",
-      moisture: "%",
-      brightness: "lx",
-      battery: "%",
-      conductivity: "μS/cm",
+  },
+  {
+    entity_id: "plant.apple_tree",
+    state: "ok",
+    attributes: {
+      problem: "brightness",
+      sensors: {
+        moisture: "sensor.apple_tree_moisture",
+        battery: "sensor.apple_tree_battery",
+        temperature: "sensor.apple_tree_temperature",
+        conductivity: "sensor.apple_tree_conductivity",
+        brightness: "sensor.apple_tree_brightness",
+      },
+      unit_of_measurement_dict: {
+        temperature: "°C",
+        moisture: "%",
+        brightness: "lx",
+        battery: "%",
+        conductivity: "μS/cm",
+      },
+      moisture: 54,
+      battery: 2,
+      temperature: 15.6,
+      conductivity: 1,
+      brightness: 25,
+      max_brightness: 20,
+      friendly_name: "Apple Tree",
     },
-    moisture: 54,
-    battery: 95,
-    temperature: 15.6,
-    conductivity: 1,
-    brightness: 12,
-    max_brightness: 20,
-    friendly_name: "Lemon Tree",
-  }),
-  getEntity("plant", "apple_tree", "ok", {
-    problem: "brightness",
-    sensors: {
-      moisture: "sensor.apple_tree_moisture",
-      battery: "sensor.apple_tree_battery",
-      temperature: "sensor.apple_tree_temperature",
-      conductivity: "sensor.apple_tree_conductivity",
-      brightness: "sensor.apple_tree_brightness",
+  },
+  {
+    entity_id: "plant.sunflowers",
+    state: "ok",
+    attributes: {
+      problem: "moisture, temperature, conductivity",
+      sensors: {
+        moisture: "sensor.sunflowers_moisture",
+        temperature: "sensor.sunflowers_temperature",
+        conductivity: "sensor.sunflowers_conductivity",
+        brightness: "sensor.sunflowers_brightness",
+      },
+      unit_of_measurement_dict: {
+        temperature: "°C",
+        moisture: "%",
+        brightness: "lx",
+        conductivity: "μS/cm",
+      },
+      moisture: 54,
+      temperature: 15.6,
+      conductivity: 1,
+      brightness: 25,
+      entity_picture: "/images/sunflowers.jpg",
     },
-    unit_of_measurement_dict: {
-      temperature: "°C",
-      moisture: "%",
-      brightness: "lx",
-      battery: "%",
-      conductivity: "μS/cm",
-    },
-    moisture: 54,
-    battery: 2,
-    temperature: 15.6,
-    conductivity: 1,
-    brightness: 25,
-    max_brightness: 20,
-    friendly_name: "Apple Tree",
-  }),
-  getEntity("plant", "sunflowers", "ok", {
-    problem: "moisture, temperature, conductivity",
-    sensors: {
-      moisture: "sensor.sunflowers_moisture",
-      temperature: "sensor.sunflowers_temperature",
-      conductivity: "sensor.sunflowers_conductivity",
-      brightness: "sensor.sunflowers_brightness",
-    },
-    unit_of_measurement_dict: {
-      temperature: "°C",
-      moisture: "%",
-      brightness: "lx",
-      conductivity: "μS/cm",
-    },
-    moisture: 54,
-    temperature: 15.6,
-    conductivity: 1,
-    brightness: 25,
-    entity_picture: "/images/sunflowers.jpg",
-  }),
+  },
 ];

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

@@ -5,17 +5,24 @@ import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-yaml-editor";
 import type { Action } from "../../../../src/data/script";
 import { describeAction } from "../../../../src/data/script_i18n";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
 
 const ENTITIES = [
-  getEntity("scene", "kitchen_morning", "scening", {
-    friendly_name: "Kitchen Morning",
-  }),
-  getEntity("media_player", "kitchen", "playing", {
-    friendly_name: "Sonos Kitchen",
-  }),
+  {
+    entity_id: "scene.kitchen_morning",
+    state: "scening",
+    attributes: {
+      friendly_name: "Kitchen Morning",
+    },
+  },
+  {
+    entity_id: "media_player.kitchen",
+    state: "playing",
+    attributes: {
+      friendly_name: "Sonos Kitchen",
+    },
+  },
 ];
 
 const ACTIONS = [

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

@@ -5,20 +5,31 @@ import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-yaml-editor";
 import type { Condition } from "../../../../src/data/automation";
 import { describeCondition } from "../../../../src/data/automation_i18n";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
 
 const ENTITIES = [
-  getEntity("light", "kitchen", "on", {
-    friendly_name: "Kitchen Light",
-  }),
-  getEntity("device_tracker", "person", "home", {
-    friendly_name: "Person",
-  }),
-  getEntity("zone", "home", "", {
-    friendly_name: "Home",
-  }),
+  {
+    entity_id: "light.kitchen",
+    state: "on",
+    attributes: {
+      friendly_name: "Kitchen Light",
+    },
+  },
+  {
+    entity_id: "device_tracker.person",
+    state: "home",
+    attributes: {
+      friendly_name: "Person",
+    },
+  },
+  {
+    entity_id: "zone.home",
+    state: "",
+    attributes: {
+      friendly_name: "Home",
+    },
+  },
 ];
 
 const conditions: Condition[] = [

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

@@ -5,20 +5,31 @@ import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-yaml-editor";
 import type { LegacyTrigger } from "../../../../src/data/automation";
 import { describeTrigger } from "../../../../src/data/automation_i18n";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
 
 const ENTITIES = [
-  getEntity("light", "kitchen", "on", {
-    friendly_name: "Kitchen Light",
-  }),
-  getEntity("person", "person", "", {
-    friendly_name: "Person",
-  }),
-  getEntity("zone", "home", "", {
-    friendly_name: "Home",
-  }),
+  {
+    entity_id: "light.kitchen",
+    state: "on",
+    attributes: {
+      friendly_name: "Kitchen Light",
+    },
+  },
+  {
+    entity_id: "person.person",
+    state: "",
+    attributes: {
+      friendly_name: "Person",
+    },
+  },
+  {
+    entity_id: "zone.home",
+    state: "",
+    attributes: {
+      friendly_name: "Home",
+    },
+  },
 ];
 
 const triggers = [

gallery/src/pages/components/ha-adaptive-dialog.ts

@@ -515,6 +515,14 @@ export class DemoHaAdaptiveDialog extends LitElement {
               <td><code>--ha-dialog-surface-background</code></td>
               <td>Dialog/sheet background color.</td>
             </tr>
+            <tr>
+              <td><code>--ha-dialog-surface-backdrop-filter</code></td>
+              <td>Dialog/sheet surface backdrop filter.</td>
+            </tr>
+            <tr>
+              <td><code>--dialog-box-shadow</code></td>
+              <td>Dialog surface box shadow (dialog mode only).</td>
+            </tr>
             <tr>
               <td><code>--ha-dialog-border-radius</code></td>
               <td>Border radius of the dialog surface (dialog mode only).</td>
@@ -527,6 +535,34 @@ export class DemoHaAdaptiveDialog extends LitElement {
               <td><code>--ha-dialog-hide-duration</code></td>
               <td>Hide animation duration (dialog mode only).</td>
             </tr>
+            <tr>
+              <td><code>--ha-dialog-scrim-backdrop-filter</code></td>
+              <td>Dialog/sheet scrim backdrop filter.</td>
+            </tr>
+            <tr>
+              <td><code>--dialog-backdrop-filter</code></td>
+              <td>Dialog/sheet scrim backdrop filter (legacy fallback).</td>
+            </tr>
+            <tr>
+              <td><code>--mdc-dialog-scrim-color</code></td>
+              <td>Dialog/sheet scrim color (legacy compatibility).</td>
+            </tr>
+            <tr>
+              <td><code>--ha-bottom-sheet-surface-background</code></td>
+              <td>Bottom sheet background color (sheet mode only).</td>
+            </tr>
+            <tr>
+              <td><code>--ha-bottom-sheet-surface-backdrop-filter</code></td>
+              <td>Bottom sheet surface backdrop filter (sheet mode only).</td>
+            </tr>
+            <tr>
+              <td><code>--ha-bottom-sheet-scrim-backdrop-filter</code></td>
+              <td>Bottom sheet scrim backdrop filter (sheet mode only).</td>
+            </tr>
+            <tr>
+              <td><code>--ha-bottom-sheet-scrim-color</code></td>
+              <td>Bottom sheet scrim color (sheet mode only).</td>
+            </tr>
           </tbody>
         </table>
 

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

@@ -380,13 +380,29 @@ export class DemoHaDialog extends LitElement {
               <td><code>--ha-dialog-surface-background</code></td>
               <td>Dialog background color.</td>
             </tr>
+            <tr>
+              <td><code>--ha-dialog-surface-backdrop-filter</code></td>
+              <td>Backdrop filter applied to the dialog surface.</td>
+            </tr>
+            <tr>
+              <td><code>--dialog-box-shadow</code></td>
+              <td>Dialog surface box shadow.</td>
+            </tr>
             <tr>
               <td><code>--ha-dialog-border-radius</code></td>
               <td>Border radius of the dialog surface.</td>
             </tr>
             <tr>
-              <td><code>--dialog-z-index</code></td>
-              <td>Z-index for the dialog.</td>
+              <td><code>--ha-dialog-scrim-backdrop-filter</code></td>
+              <td>Backdrop filter applied to the dialog scrim.</td>
+            </tr>
+            <tr>
+              <td><code>--dialog-backdrop-filter</code></td>
+              <td>Legacy fallback for the dialog scrim backdrop filter.</td>
+            </tr>
+            <tr>
+              <td><code>--mdc-dialog-scrim-color</code></td>
+              <td>Dialog scrim color (legacy compatibility).</td>
             </tr>
             <tr>
               <td><code>--dialog-surface-margin-top</code></td>

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

@@ -12,34 +12,53 @@ import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
 import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
 
 const ENTITIES = [
-  getEntity("alarm_control_panel", "alarm", "disarmed", {
-    friendly_name: "Alarm",
-  }),
-  getEntity("media_player", "livingroom", "playing", {
-    friendly_name: "Livingroom",
-    media_content_type: "music",
-    device_class: "tv",
-  }),
-  getEntity("media_player", "lounge", "idle", {
-    friendly_name: "Lounge",
-    supported_features: 444983,
-    device_class: "speaker",
-  }),
-  getEntity("light", "bedroom", "on", {
-    friendly_name: "Bedroom",
-    effect: "colorloop",
-    effect_list: ["colorloop", "random"],
-  }),
-  getEntity("switch", "coffee", "off", {
-    friendly_name: "Coffee",
-    device_class: "switch",
-  }),
+  {
+    entity_id: "alarm_control_panel.alarm",
+    state: "disarmed",
+    attributes: {
+      friendly_name: "Alarm",
+    },
+  },
+  {
+    entity_id: "media_player.livingroom",
+    state: "playing",
+    attributes: {
+      friendly_name: "Livingroom",
+      media_content_type: "music",
+      device_class: "tv",
+    },
+  },
+  {
+    entity_id: "media_player.lounge",
+    state: "idle",
+    attributes: {
+      friendly_name: "Lounge",
+      supported_features: 444983,
+      device_class: "speaker",
+    },
+  },
+  {
+    entity_id: "light.bedroom",
+    state: "on",
+    attributes: {
+      friendly_name: "Bedroom",
+      effect: "colorloop",
+      effect_list: ["colorloop", "random"],
+    },
+  },
+  {
+    entity_id: "switch.coffee",
+    state: "off",
+    attributes: {
+      friendly_name: "Coffee",
+      device_class: "switch",
+    },
+  },
 ];
 
 const DEVICES: DeviceRegistryEntry[] = [

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

@@ -8,6 +8,7 @@ import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockFloorRegistry } from "../../../../demo/src/stubs/floor_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
 import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
+import type { HASSDomEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
@@ -16,33 +17,59 @@ import type { BlueprintInput } from "../../../../src/data/blueprint";
 import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
 import type { LabelRegistryEntry } from "../../../../src/data/label/label_registry";
-import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
-import { getEntity } from "../../../../src/fake_data/entity";
+import {
+  showDialog,
+  type ShowDialogParams,
+} from "../../../../src/dialogs/make-dialog-manager";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
 
 const ENTITIES = [
-  getEntity("alarm_control_panel", "alarm", "disarmed", {
-    friendly_name: "Alarm",
-  }),
-  getEntity("media_player", "livingroom", "playing", {
-    friendly_name: "Livingroom",
-  }),
-  getEntity("media_player", "lounge", "idle", {
-    friendly_name: "Lounge",
-    supported_features: 444983,
-  }),
-  getEntity("light", "bedroom", "on", {
-    friendly_name: "Bedroom",
-  }),
-  getEntity("switch", "coffee", "off", {
-    friendly_name: "Coffee",
-  }),
-  getEntity("number", "number", 5, {
-    friendly_name: "Number",
-  }),
+  {
+    entity_id: "alarm_control_panel.alarm",
+    state: "disarmed",
+    attributes: {
+      friendly_name: "Alarm",
+    },
+  },
+  {
+    entity_id: "media_player.livingroom",
+    state: "playing",
+    attributes: {
+      friendly_name: "Livingroom",
+    },
+  },
+  {
+    entity_id: "media_player.lounge",
+    state: "idle",
+    attributes: {
+      friendly_name: "Lounge",
+      supported_features: 444983,
+    },
+  },
+  {
+    entity_id: "light.bedroom",
+    state: "on",
+    attributes: {
+      friendly_name: "Bedroom",
+    },
+  },
+  {
+    entity_id: "switch.coffee",
+    state: "off",
+    attributes: {
+      friendly_name: "Coffee",
+    },
+  },
+  {
+    entity_id: "number.number",
+    state: "5",
+    attributes: {
+      friendly_name: "Number",
+    },
+  },
 ];
 
 const DEVICES: DeviceRegistryEntry[] = [
@@ -611,14 +638,15 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     };
   };
 
-  private _dialogManager = (e) => {
-    const { dialogTag, dialogImport, dialogParams, addHistory } = e.detail;
+  private _dialogManager = (e: HASSDomEvent<ShowDialogParams<unknown>>) => {
+    const { dialogTag, dialogImport, dialogParams, addHistory, parentElement } =
+      e.detail;
     showDialog(
       this,
-      this.shadowRoot!,
       dialogTag,
       dialogParams,
       dialogImport,
+      parentElement,
       addHistory
     );
   };

gallery/src/pages/components/ha-tooltip.markdown

@@ -28,9 +28,12 @@ This element is based on webawesome `wa-tooltip` it only sets some css tokens an
 
 In your theme settings use this without the prefixed `--`.
 
-- `--ha-tooltip-border-radius` (Default: 4px)
-- `--ha-tooltip-arrow-size` (Default: 8px)
-- `--wa-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
+- `--ha-tooltip-background-color` (Default: `var(--secondary-background-color)`)
+- `--ha-tooltip-text-color` (Default: `var(--primary-text-color)`)
+- `--ha-tooltip-font-family` (Default: `var(--ha-font-family-body)`)
 - `--ha-tooltip-font-size` (Default: `var(--ha-font-size-s)`)
-- `--wa-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
-- `--wa-tooltip-line-height` (Default: `var(--ha-line-height-condensed)`)
+- `--ha-tooltip-font-weight` (Default: `var(--ha-font-weight-normal)`)
+- `--ha-tooltip-line-height` (Default: `var(--ha-line-height-condensed)`)
+- `--ha-tooltip-padding` (Default: 8px)
+- `--ha-tooltip-border-radius` (Default: `var(--ha-border-radius-sm)`)
+- `--ha-tooltip-arrow-size` (Default: 8px)

gallery/src/pages/lovelace/alarm-panel-card.ts

@@ -1,25 +1,40 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("alarm_control_panel", "alarm", "disarmed", {
-    friendly_name: "Alarm",
-  }),
-  getEntity("alarm_control_panel", "alarm_armed", "armed_home", {
-    friendly_name: "Alarm",
-  }),
-  getEntity("alarm_control_panel", "unavailable", "unavailable", {
-    friendly_name: "Alarm",
-  }),
-  getEntity("alarm_control_panel", "alarm_code", "disarmed", {
-    friendly_name: "Alarm",
-    code_format: "number",
-  }),
+  {
+    entity_id: "alarm_control_panel.alarm",
+    state: "disarmed",
+    attributes: {
+      friendly_name: "Alarm",
+    },
+  },
+  {
+    entity_id: "alarm_control_panel.alarm_armed",
+    state: "armed_home",
+    attributes: {
+      friendly_name: "Alarm",
+    },
+  },
+  {
+    entity_id: "alarm_control_panel.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Alarm",
+    },
+  },
+  {
+    entity_id: "alarm_control_panel.alarm_code",
+    state: "disarmed",
+    attributes: {
+      friendly_name: "Alarm",
+      code_format: "number",
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/area-card.ts

@@ -1,44 +1,79 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("light", "bed_light", "on", {
-    friendly_name: "Bed Light",
-  }),
-  getEntity("switch", "bed_ac", "on", {
-    friendly_name: "Ecobee",
-  }),
-  getEntity("sensor", "bed_temp", "72", {
-    friendly_name: "Bedroom Temp",
-    device_class: "temperature",
-    unit_of_measurement: "°F",
-  }),
-  getEntity("light", "living_room_light", "off", {
-    friendly_name: "Living Room Light",
-  }),
-  getEntity("fan", "living_room", "on", {
-    friendly_name: "Living Room Fan",
-  }),
-  getEntity("sensor", "office_humidity", "73", {
-    friendly_name: "Office Humidity",
-    device_class: "humidity",
-    unit_of_measurement: "%",
-  }),
-  getEntity("light", "office", "on", {
-    friendly_name: "Office Light",
-  }),
-  getEntity("fan", "kitchen", "on", {
-    friendly_name: "Kitchen Fan",
-  }),
-  getEntity("binary_sensor", "kitchen_door", "on", {
-    friendly_name: "Office Door",
-    device_class: "door",
-  }),
+  {
+    entity_id: "light.bed_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Bed Light",
+    },
+  },
+  {
+    entity_id: "switch.bed_ac",
+    state: "on",
+    attributes: {
+      friendly_name: "Ecobee",
+    },
+  },
+  {
+    entity_id: "sensor.bed_temp",
+    state: "72",
+    attributes: {
+      friendly_name: "Bedroom Temp",
+      device_class: "temperature",
+      unit_of_measurement: "°F",
+    },
+  },
+  {
+    entity_id: "light.living_room_light",
+    state: "off",
+    attributes: {
+      friendly_name: "Living Room Light",
+    },
+  },
+  {
+    entity_id: "fan.living_room",
+    state: "on",
+    attributes: {
+      friendly_name: "Living Room Fan",
+    },
+  },
+  {
+    entity_id: "sensor.office_humidity",
+    state: "73",
+    attributes: {
+      friendly_name: "Office Humidity",
+      device_class: "humidity",
+      unit_of_measurement: "%",
+    },
+  },
+  {
+    entity_id: "light.office",
+    state: "on",
+    attributes: {
+      friendly_name: "Office Light",
+    },
+  },
+  {
+    entity_id: "fan.kitchen",
+    state: "on",
+    attributes: {
+      friendly_name: "Kitchen Fan",
+    },
+  },
+  {
+    entity_id: "binary_sensor.kitchen_door",
+    state: "on",
+    attributes: {
+      friendly_name: "Office Door",
+      device_class: "door",
+    },
+  },
 ];
 
 // TODO: Update image here

gallery/src/pages/lovelace/conditional-card.ts

@@ -1,24 +1,39 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("light", "controller_1", "on", {
-    friendly_name: "Controller 1",
-  }),
-  getEntity("light", "controller_2", "on", {
-    friendly_name: "Controller 2",
-  }),
-  getEntity("light", "floor", "off", {
-    friendly_name: "Floor light",
-  }),
-  getEntity("light", "kitchen", "on", {
-    friendly_name: "Kitchen light",
-  }),
+  {
+    entity_id: "light.controller_1",
+    state: "on",
+    attributes: {
+      friendly_name: "Controller 1",
+    },
+  },
+  {
+    entity_id: "light.controller_2",
+    state: "on",
+    attributes: {
+      friendly_name: "Controller 2",
+    },
+  },
+  {
+    entity_id: "light.floor",
+    state: "off",
+    attributes: {
+      friendly_name: "Floor light",
+    },
+  },
+  {
+    entity_id: "light.kitchen",
+    state: "on",
+    attributes: {
+      friendly_name: "Kitchen light",
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/entities-card.ts

@@ -1,150 +1,257 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("light", "bed_light", "on", {
-    friendly_name: "Bed Light",
-  }),
-  getEntity("group", "kitchen", "on", {
-    entity_id: ["light.bed_light"],
-    order: 8,
-    friendly_name: "Kitchen Group",
-  }),
-  getEntity("lock", "kitchen_door", "locked", {
-    friendly_name: "Kitchen Lock",
-  }),
-  getEntity("cover", "kitchen_window", "open", {
-    friendly_name: "Kitchen Window",
-    supported_features: 11,
-  }),
-  getEntity("scene", "romantic_lights", "scening", {
-    entity_id: ["light.bed_light", "light.ceiling_lights"],
-    friendly_name: "Romantic Scene",
-  }),
-  getEntity("device_tracker", "demo_paulus", "home", {
-    source_type: "gps",
-    latitude: 32.877105,
-    longitude: 117.232185,
-    gps_accuracy: 91,
-    battery: 71,
-    friendly_name: "Paulus",
-  }),
-  getEntity("climate", "ecobee", "auto", {
-    current_temperature: 73,
-    min_temp: 45,
-    max_temp: 95,
-    temperature: null,
-    target_temp_high: 75,
-    target_temp_low: 70,
-    fan_mode: "Auto Low",
-    fan_list: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
-    operation_mode: "auto",
-    operation_list: ["heat", "cool", "auto", "off"],
-    hold_mode: "home",
-    swing_mode: "Auto",
-    swing_list: ["Auto", "1", "2", "3", "Off"],
-    unit_of_measurement: "°F",
-    friendly_name: "Ecobee",
-    supported_features: 1014,
-  }),
-  getEntity("input_number", "number", 5, {
-    min: 0,
-    max: 10,
-    step: 1,
-    mode: "slider",
-    unit_of_measurement: "dB",
-    friendly_name: "Number",
-    icon: "mdi:bell-ring",
-  }),
-  getEntity("input_boolean", "toggle", "on", {
-    friendly_name: "Toggle",
-  }),
-  getEntity("input_datetime", "date_and_time", "2022-01-10 00:00:00", {
-    has_date: true,
-    has_time: true,
-    editable: true,
-    year: 2022,
-    month: 1,
-    day: 10,
-    hour: 0,
-    minute: 0,
-    second: 0,
-    timestamp: 1641801600,
-    friendly_name: "Date and Time",
-  }),
-  getEntity("sensor", "humidity", "23.2", {
-    friendly_name: "Humidity",
-    unit_of_measurement: "%",
-  }),
-  getEntity("input_select", "dropdown", "Soda", {
-    friendly_name: "Dropdown",
-    options: ["Soda", "Beer", "Wine"],
-  }),
-  getEntity("input_text", "text", "Inspiration", {
-    friendly_name: "Text",
-    mode: "text",
-  }),
-  getEntity("timer", "timer", "idle", {
-    friendly_name: "Timer",
-    duration: "0:05:00",
-  }),
-  getEntity("counter", "counter", "3", {
-    friendly_name: "Counter",
-    initial: 0,
-    step: 1,
-    minimum: 0,
-    maximum: 10,
-  }),
-  getEntity("text", "message", "Hello!", {
-    friendly_name: "Message",
-  }),
+  {
+    entity_id: "light.bed_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Bed Light",
+    },
+  },
+  {
+    entity_id: "group.kitchen",
+    state: "on",
+    attributes: {
+      entity_id: ["light.bed_light"],
+      order: 8,
+      friendly_name: "Kitchen Group",
+    },
+  },
+  {
+    entity_id: "lock.kitchen_door",
+    state: "locked",
+    attributes: {
+      friendly_name: "Kitchen Lock",
+    },
+  },
+  {
+    entity_id: "cover.kitchen_window",
+    state: "open",
+    attributes: {
+      friendly_name: "Kitchen Window",
+      supported_features: 11,
+    },
+  },
+  {
+    entity_id: "scene.romantic_lights",
+    state: "scening",
+    attributes: {
+      entity_id: ["light.bed_light", "light.ceiling_lights"],
+      friendly_name: "Romantic Scene",
+    },
+  },
+  {
+    entity_id: "device_tracker.demo_paulus",
+    state: "home",
+    attributes: {
+      source_type: "gps",
+      latitude: 32.877105,
+      longitude: 117.232185,
+      gps_accuracy: 91,
+      battery: 71,
+      friendly_name: "Paulus",
+    },
+  },
+  {
+    entity_id: "climate.ecobee",
+    state: "auto",
+    attributes: {
+      current_temperature: 73,
+      min_temp: 45,
+      max_temp: 95,
+      temperature: null,
+      target_temp_high: 75,
+      target_temp_low: 70,
+      fan_mode: "Auto Low",
+      fan_list: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
+      operation_mode: "auto",
+      operation_list: ["heat", "cool", "auto", "off"],
+      hold_mode: "home",
+      swing_mode: "Auto",
+      swing_list: ["Auto", "1", "2", "3", "Off"],
+      unit_of_measurement: "°F",
+      friendly_name: "Ecobee",
+      supported_features: 1014,
+    },
+  },
+  {
+    entity_id: "input_number.number",
+    state: "5",
+    attributes: {
+      min: 0,
+      max: 10,
+      step: 1,
+      mode: "slider",
+      unit_of_measurement: "dB",
+      friendly_name: "Number",
+      icon: "mdi:bell-ring",
+    },
+  },
+  {
+    entity_id: "input_boolean.toggle",
+    state: "on",
+    attributes: {
+      friendly_name: "Toggle",
+    },
+  },
+  {
+    entity_id: "input_datetime.date_and_time",
+    state: "2022-01-10 00:00:00",
+    attributes: {
+      has_date: true,
+      has_time: true,
+      editable: true,
+      year: 2022,
+      month: 1,
+      day: 10,
+      hour: 0,
+      minute: 0,
+      second: 0,
+      timestamp: 1641801600,
+      friendly_name: "Date and Time",
+    },
+  },
+  {
+    entity_id: "sensor.humidity",
+    state: "23.2",
+    attributes: {
+      friendly_name: "Humidity",
+      unit_of_measurement: "%",
+    },
+  },
+  {
+    entity_id: "input_select.dropdown",
+    state: "Soda",
+    attributes: {
+      friendly_name: "Dropdown",
+      options: ["Soda", "Beer", "Wine"],
+    },
+  },
+  {
+    entity_id: "input_text.text",
+    state: "Inspiration",
+    attributes: {
+      friendly_name: "Text",
+      mode: "text",
+    },
+  },
+  {
+    entity_id: "timer.timer",
+    state: "idle",
+    attributes: {
+      friendly_name: "Timer",
+      duration: "0:05:00",
+    },
+  },
+  {
+    entity_id: "counter.counter",
+    state: "3",
+    attributes: {
+      friendly_name: "Counter",
+      initial: 0,
+      step: 1,
+      minimum: 0,
+      maximum: 10,
+    },
+  },
+  {
+    entity_id: "text.message",
+    state: "Hello!",
+    attributes: {
+      friendly_name: "Message",
+    },
+  },
 
-  getEntity("light", "unavailable", "unavailable", {
-    friendly_name: "Bed Light",
-  }),
-  getEntity("lock", "unavailable", "unavailable", {
-    friendly_name: "Kitchen Door",
-  }),
-  getEntity("cover", "unavailable", "unavailable", {
-    friendly_name: "Kitchen Window",
-    supported_features: 11,
-  }),
-  getEntity("scene", "unavailable", "unavailable", {
-    friendly_name: "Romantic Scene",
-  }),
-  getEntity("device_tracker", "unavailable", "unavailable", {
-    friendly_name: "Paulus",
-  }),
-  getEntity("climate", "unavailable", "unavailable", {
-    unit_of_measurement: "°F",
-    friendly_name: "Ecobee",
-    supported_features: 1014,
-  }),
-  getEntity("input_number", "unavailable", "unavailable", {
-    friendly_name: "Allowed Noise",
-    icon: "mdi:bell-ring",
-  }),
-  getEntity("input_select", "unavailable", "unavailable", {
-    unit_of_measurement: "dB",
-    friendly_name: "Who cooks",
-    icon: "mdi:cheff",
-  }),
-  getEntity("text", "unavailable", "unavailable", {
-    friendly_name: "Message",
-  }),
-  getEntity("event", "unavailable", "unavailable", {
-    friendly_name: "Empty remote",
-  }),
-  getEntity("event", "doorbell", "2023-07-17T21:26:11.615+00:00", {
-    friendly_name: "Doorbell",
-    device_class: "doorbell",
-    event_type: "Ding-Dong",
-  }),
+  {
+    entity_id: "light.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Bed Light",
+    },
+  },
+  {
+    entity_id: "lock.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Kitchen Door",
+    },
+  },
+  {
+    entity_id: "cover.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Kitchen Window",
+      supported_features: 11,
+    },
+  },
+  {
+    entity_id: "scene.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Romantic Scene",
+    },
+  },
+  {
+    entity_id: "device_tracker.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Paulus",
+    },
+  },
+  {
+    entity_id: "climate.unavailable",
+    state: "unavailable",
+    attributes: {
+      unit_of_measurement: "°F",
+      friendly_name: "Ecobee",
+      supported_features: 1014,
+    },
+  },
+  {
+    entity_id: "input_number.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Allowed Noise",
+      icon: "mdi:bell-ring",
+    },
+  },
+  {
+    entity_id: "input_select.unavailable",
+    state: "unavailable",
+    attributes: {
+      unit_of_measurement: "dB",
+      friendly_name: "Who cooks",
+      icon: "mdi:cheff",
+    },
+  },
+  {
+    entity_id: "text.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Message",
+    },
+  },
+  {
+    entity_id: "event.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Empty remote",
+    },
+  },
+  {
+    entity_id: "event.doorbell",
+    state: "2023-07-17T21:26:11.615+00:00",
+    attributes: {
+      friendly_name: "Doorbell",
+      device_class: "doorbell",
+      event_type: "Ding-Dong",
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/entity-button-card.ts

@@ -1,15 +1,18 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("light", "bed_light", "on", {
-    friendly_name: "Bed Light",
-  }),
+  {
+    entity_id: "light.bed_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Bed Light",
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/entity-filter-card.ts

@@ -1,74 +1,117 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("device_tracker", "demo_paulus", "work", {
-    source_type: "gps",
-    latitude: 32.877105,
-    longitude: 117.232185,
-    gps_accuracy: 91,
-    battery: 25,
-    friendly_name: "Paulus",
-  }),
-  getEntity("device_tracker", "demo_anne_therese", "school", {
-    source_type: "gps",
-    latitude: 32.877105,
-    longitude: 117.232185,
-    gps_accuracy: 91,
-    battery: 50,
-    friendly_name: "Anne Therese",
-  }),
-  getEntity("device_tracker", "demo_home_boy", "home", {
-    source_type: "gps",
-    latitude: 32.877105,
-    longitude: 117.232185,
-    gps_accuracy: 91,
-    battery: 75,
-    friendly_name: "Home Boy",
-  }),
-  getEntity("light", "bed_light", "on", {
-    friendly_name: "Bed Light",
-  }),
-  getEntity("light", "kitchen_lights", "on", {
-    friendly_name: "Kitchen Lights",
-  }),
-  getEntity("light", "ceiling_lights", "off", {
-    friendly_name: "Ceiling Lights",
-  }),
-  getEntity("sensor", "battery_1", 20, {
-    device_class: "battery",
-    friendly_name: "Battery 1",
-    unit_of_measurement: "%",
-  }),
-  getEntity("sensor", "battery_2", 35, {
-    device_class: "battery",
-    friendly_name: "Battery 2",
-    unit_of_measurement: "%",
-  }),
-  getEntity("sensor", "battery_3", 40, {
-    device_class: "battery",
-    friendly_name: "Battery 3",
-    unit_of_measurement: "%",
-  }),
-  getEntity("sensor", "battery_4", 80, {
-    device_class: "battery",
-    friendly_name: "Battery 4",
-    unit_of_measurement: "%",
-  }),
-  getEntity("input_number", "min_battery_level", 30, {
-    mode: "slider",
-    step: 10,
-    min: 0,
-    max: 100,
-    icon: "mdi:battery-alert-variant",
-    friendly_name: "Minimum Battery Level",
-    unit_of_measurement: "%",
-  }),
+  {
+    entity_id: "device_tracker.demo_paulus",
+    state: "work",
+    attributes: {
+      source_type: "gps",
+      latitude: 32.877105,
+      longitude: 117.232185,
+      gps_accuracy: 91,
+      battery: 25,
+      friendly_name: "Paulus",
+    },
+  },
+  {
+    entity_id: "device_tracker.demo_anne_therese",
+    state: "school",
+    attributes: {
+      source_type: "gps",
+      latitude: 32.877105,
+      longitude: 117.232185,
+      gps_accuracy: 91,
+      battery: 50,
+      friendly_name: "Anne Therese",
+    },
+  },
+  {
+    entity_id: "device_tracker.demo_home_boy",
+    state: "home",
+    attributes: {
+      source_type: "gps",
+      latitude: 32.877105,
+      longitude: 117.232185,
+      gps_accuracy: 91,
+      battery: 75,
+      friendly_name: "Home Boy",
+    },
+  },
+  {
+    entity_id: "light.bed_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Bed Light",
+    },
+  },
+  {
+    entity_id: "light.kitchen_lights",
+    state: "on",
+    attributes: {
+      friendly_name: "Kitchen Lights",
+    },
+  },
+  {
+    entity_id: "light.ceiling_lights",
+    state: "off",
+    attributes: {
+      friendly_name: "Ceiling Lights",
+    },
+  },
+  {
+    entity_id: "sensor.battery_1",
+    state: "20",
+    attributes: {
+      device_class: "battery",
+      friendly_name: "Battery 1",
+      unit_of_measurement: "%",
+    },
+  },
+  {
+    entity_id: "sensor.battery_2",
+    state: "35",
+    attributes: {
+      device_class: "battery",
+      friendly_name: "Battery 2",
+      unit_of_measurement: "%",
+    },
+  },
+  {
+    entity_id: "sensor.battery_3",
+    state: "40",
+    attributes: {
+      device_class: "battery",
+      friendly_name: "Battery 3",
+      unit_of_measurement: "%",
+    },
+  },
+  {
+    entity_id: "sensor.battery_4",
+    state: "80",
+    attributes: {
+      device_class: "battery",
+      friendly_name: "Battery 4",
+      unit_of_measurement: "%",
+    },
+  },
+  {
+    entity_id: "input_number.min_battery_level",
+    state: "30",
+    attributes: {
+      mode: "slider",
+      step: 10,
+      min: 0,
+      max: 100,
+      icon: "mdi:battery-alert-variant",
+      friendly_name: "Minimum Battery Level",
+      unit_of_measurement: "%",
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/gauge-card.ts

@@ -1,23 +1,30 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("sensor", "brightness", "12", {}),
-  getEntity("sensor", "brightness_medium", "53", {}),
-  getEntity("sensor", "brightness_high", "87", {}),
-  getEntity("plant", "bonsai", "ok", {}),
-  getEntity("sensor", "not_working", "unavailable", {}),
-  getEntity("sensor", "outside_humidity", "54", {
-    unit_of_measurement: "%",
-  }),
-  getEntity("sensor", "outside_temperature", "15.6", {
-    unit_of_measurement: "°C",
-  }),
+  { entity_id: "sensor.brightness", state: "12", attributes: {} },
+  { entity_id: "sensor.brightness_medium", state: "53", attributes: {} },
+  { entity_id: "sensor.brightness_high", state: "87", attributes: {} },
+  { entity_id: "plant.bonsai", state: "ok", attributes: {} },
+  { entity_id: "sensor.not_working", state: "unavailable", attributes: {} },
+  {
+    entity_id: "sensor.outside_humidity",
+    state: "54",
+    attributes: {
+      unit_of_measurement: "%",
+    },
+  },
+  {
+    entity_id: "sensor.outside_temperature",
+    state: "15.6",
+    attributes: {
+      unit_of_measurement: "°C",
+    },
+  },
 ];
 
 const CONFIGS = [
@@ -47,6 +54,19 @@ const CONFIGS = [
   needle: true
     `,
   },
+  {
+    heading: "Rendering needle and severity levels",
+    config: `
+- type: gauge
+  entity: sensor.brightness_high
+  name: Brightness High
+  needle: true
+  severity:
+    red: 75
+    green: 0
+    yellow: 50
+    `,
+  },
   {
     heading: "Setting severity levels",
     config: `

gallery/src/pages/lovelace/glance-card.ts

@@ -1,62 +1,89 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("device_tracker", "demo_paulus", "home", {
-    source_type: "gps",
-    latitude: 32.877105,
-    longitude: 117.232185,
-    gps_accuracy: 91,
-    battery: 71,
-    friendly_name: "Paulus",
-  }),
-  getEntity("media_player", "living_room", "playing", {
-    volume_level: 1,
-    is_volume_muted: false,
-    media_content_id: "eyU3bRy2x44",
-    media_content_type: "movie",
-    media_duration: 300,
-    media_position: 45.017773,
-    media_position_updated_at: "2018-07-19T10:44:45.919514+00:00",
-    media_title: "♥♥ The Best Fireplace Video (3 hours)",
-    app_name: "YouTube",
-    sound_mode: "Dummy Music",
-    sound_mode_list: ["Dummy Music", "Dummy Movie"],
-    shuffle: false,
-    friendly_name: "Living Room",
-    entity_picture:
-      "/api/media_player_proxy/media_player.living_room?token=e925f8db7f7bd1f317e4524dcb8333d60f6019219a3799a22604b5787f243567&cache=bc2ffb49c4f67034",
-    supported_features: 115597,
-  }),
-  getEntity("sun", "sun", "below_horizon", {
-    next_dawn: "2018-07-19T20:48:47+00:00",
-    next_dusk: "2018-07-20T11:46:06+00:00",
-    next_midnight: "2018-07-19T16:17:28+00:00",
-    next_noon: "2018-07-20T04:17:26+00:00",
-    next_rising: "2018-07-19T21:16:31+00:00",
-    next_setting: "2018-07-20T11:18:22+00:00",
-    elevation: 67.69,
-    azimuth: 338.55,
-    friendly_name: "Sun",
-  }),
-  getEntity("cover", "kitchen_window", "open", {
-    friendly_name: "Kitchen Window",
-    supported_features: 11,
-  }),
-  getEntity("light", "kitchen_lights", "on", {
-    friendly_name: "Kitchen Lights",
-  }),
-  getEntity("light", "ceiling_lights", "off", {
-    friendly_name: "Ceiling Lights",
-  }),
-  getEntity("lock", "kitchen_door", "locked", {
-    friendly_name: "Kitchen Door",
-  }),
+  {
+    entity_id: "device_tracker.demo_paulus",
+    state: "home",
+    attributes: {
+      source_type: "gps",
+      latitude: 32.877105,
+      longitude: 117.232185,
+      gps_accuracy: 91,
+      battery: 71,
+      friendly_name: "Paulus",
+    },
+  },
+  {
+    entity_id: "media_player.living_room",
+    state: "playing",
+    attributes: {
+      volume_level: 1,
+      is_volume_muted: false,
+      media_content_id: "eyU3bRy2x44",
+      media_content_type: "movie",
+      media_duration: 300,
+      media_position: 45.017773,
+      media_position_updated_at: "2018-07-19T10:44:45.919514+00:00",
+      media_title: "♥♥ The Best Fireplace Video (3 hours)",
+      app_name: "YouTube",
+      sound_mode: "Dummy Music",
+      sound_mode_list: ["Dummy Music", "Dummy Movie"],
+      shuffle: false,
+      friendly_name: "Living Room",
+      entity_picture:
+        "/api/media_player_proxy/media_player.living_room?token=e925f8db7f7bd1f317e4524dcb8333d60f6019219a3799a22604b5787f243567&cache=bc2ffb49c4f67034",
+      supported_features: 115597,
+    },
+  },
+  {
+    entity_id: "sun.sun",
+    state: "below_horizon",
+    attributes: {
+      next_dawn: "2018-07-19T20:48:47+00:00",
+      next_dusk: "2018-07-20T11:46:06+00:00",
+      next_midnight: "2018-07-19T16:17:28+00:00",
+      next_noon: "2018-07-20T04:17:26+00:00",
+      next_rising: "2018-07-19T21:16:31+00:00",
+      next_setting: "2018-07-20T11:18:22+00:00",
+      elevation: 67.69,
+      azimuth: 338.55,
+      friendly_name: "Sun",
+    },
+  },
+  {
+    entity_id: "cover.kitchen_window",
+    state: "open",
+    attributes: {
+      friendly_name: "Kitchen Window",
+      supported_features: 11,
+    },
+  },
+  {
+    entity_id: "light.kitchen_lights",
+    state: "on",
+    attributes: {
+      friendly_name: "Kitchen Lights",
+    },
+  },
+  {
+    entity_id: "light.ceiling_lights",
+    state: "off",
+    attributes: {
+      friendly_name: "Ceiling Lights",
+    },
+  },
+  {
+    entity_id: "lock.kitchen_door",
+    state: "locked",
+    attributes: {
+      friendly_name: "Kitchen Door",
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/grid-and-stack-card.ts

@@ -2,46 +2,69 @@ import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
 import { mockHistory } from "../../../../demo/src/stubs/history";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("light", "kitchen_lights", "on", {
-    friendly_name: "Kitchen Lights",
-  }),
-  getEntity("light", "bed_light", "on", {
-    friendly_name: "Bed Lights",
-  }),
-  getEntity("device_tracker", "demo_paulus", "work", {
-    source_type: "gps",
-    latitude: 32.877105,
-    longitude: 117.232185,
-    gps_accuracy: 91,
-    battery: 71,
-    friendly_name: "Paulus",
-  }),
-  getEntity("device_tracker", "demo_anne_therese", "school", {
-    source_type: "gps",
-    latitude: 32.877105,
-    longitude: 117.232185,
-    gps_accuracy: 91,
-    battery: 71,
-    friendly_name: "Anne Therese",
-  }),
-  getEntity("device_tracker", "demo_home_boy", "home", {
-    source_type: "gps",
-    latitude: 32.877105,
-    longitude: 117.232185,
-    gps_accuracy: 91,
-    battery: 71,
-    friendly_name: "Home Boy",
-  }),
-  getEntity("sensor", "illumination", "23", {
-    friendly_name: "Illumination",
-    unit_of_measurement: "lx",
-  }),
+  {
+    entity_id: "light.kitchen_lights",
+    state: "on",
+    attributes: {
+      friendly_name: "Kitchen Lights",
+    },
+  },
+  {
+    entity_id: "light.bed_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Bed Lights",
+    },
+  },
+  {
+    entity_id: "device_tracker.demo_paulus",
+    state: "work",
+    attributes: {
+      source_type: "gps",
+      latitude: 32.877105,
+      longitude: 117.232185,
+      gps_accuracy: 91,
+      battery: 71,
+      friendly_name: "Paulus",
+    },
+  },
+  {
+    entity_id: "device_tracker.demo_anne_therese",
+    state: "school",
+    attributes: {
+      source_type: "gps",
+      latitude: 32.877105,
+      longitude: 117.232185,
+      gps_accuracy: 91,
+      battery: 71,
+      friendly_name: "Anne Therese",
+    },
+  },
+  {
+    entity_id: "device_tracker.demo_home_boy",
+    state: "home",
+    attributes: {
+      source_type: "gps",
+      latitude: 32.877105,
+      longitude: 117.232185,
+      gps_accuracy: 91,
+      battery: 71,
+      friendly_name: "Home Boy",
+    },
+  },
+  {
+    entity_id: "sensor.illumination",
+    state: "23",
+    attributes: {
+      friendly_name: "Illumination",
+      unit_of_measurement: "lx",
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/light-card.ts

@@ -1,29 +1,44 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("light", "bed_light", "on", {
-    friendly_name: "Bed Light",
-    brightness: 255,
-  }),
-  getEntity("light", "dim_on", "on", {
-    friendly_name: "Dining Room",
-    supported_features: 1,
-    brightness: 100,
-  }),
-  getEntity("light", "dim_off", "off", {
-    friendly_name: "Dining Room",
-    supported_features: 1,
-  }),
-  getEntity("light", "unavailable", "unavailable", {
-    friendly_name: "Lost Light",
-    supported_features: 1,
-  }),
+  {
+    entity_id: "light.bed_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Bed Light",
+      brightness: 255,
+    },
+  },
+  {
+    entity_id: "light.dim_on",
+    state: "on",
+    attributes: {
+      friendly_name: "Dining Room",
+      supported_features: 1,
+      brightness: 100,
+    },
+  },
+  {
+    entity_id: "light.dim_off",
+    state: "off",
+    attributes: {
+      friendly_name: "Dining Room",
+      supported_features: 1,
+    },
+  },
+  {
+    entity_id: "light.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Lost Light",
+      supported_features: 1,
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/map-card.ts

@@ -1,59 +1,86 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 
 const ENTITIES = [
-  getEntity("device_tracker", "demo_paulus", "not_home", {
-    source_type: "gps",
-    latitude: 32.877105,
-    longitude: 117.232185,
-    gps_accuracy: 91,
-    battery: 71,
-    friendly_name: "Paulus",
-  }),
-  getEntity("device_tracker", "demo_home_boy", "home", {
-    source_type: "gps",
-    latitude: 32.87334,
-    longitude: 117.22745,
-    gps_accuracy: 20,
-    battery: 53,
-    friendly_name: "Home Boy",
-  }),
-  getEntity("zone", "home", "zoning", {
-    latitude: 32.87354,
-    longitude: 117.22765,
-    radius: 100,
-    friendly_name: "Home",
-    icon: "mdi:home",
-  }),
-  getEntity("zone", "bushfire", "zoning", {
-    latitude: -33.8611,
-    longitude: 151.203,
-    radius: 35000,
-    friendly_name: "Bushfire Zone",
-    icon: "mdi:home",
-  }),
-  getEntity("geo_location", "nelsons_creek", "15", {
-    source: "bushfire_demo",
-    latitude: -34.07792,
-    longitude: 151.03219,
-    friendly_name: "Nelsons Creek",
-  }),
-  getEntity("geo_location", "forest_rd_nowra_hill", "8", {
-    source: "bushfire_demo",
-    latitude: -33.69452,
-    longitude: 151.19577,
-    friendly_name: "Forest Rd, Nowra Hill",
-  }),
-  getEntity("geo_location", "stoney_ridge_rd_kremnos", "20", {
-    source: "bushfire_demo",
-    latitude: -33.66584,
-    longitude: 150.97209,
-    friendly_name: "Stoney Ridge Rd, Kremnos",
-  }),
+  {
+    entity_id: "device_tracker.demo_paulus",
+    state: "not_home",
+    attributes: {
+      source_type: "gps",
+      latitude: 32.877105,
+      longitude: 117.232185,
+      gps_accuracy: 91,
+      battery: 71,
+      friendly_name: "Paulus",
+    },
+  },
+  {
+    entity_id: "device_tracker.demo_home_boy",
+    state: "home",
+    attributes: {
+      source_type: "gps",
+      latitude: 32.87334,
+      longitude: 117.22745,
+      gps_accuracy: 20,
+      battery: 53,
+      friendly_name: "Home Boy",
+    },
+  },
+  {
+    entity_id: "zone.home",
+    state: "zoning",
+    attributes: {
+      latitude: 32.87354,
+      longitude: 117.22765,
+      radius: 100,
+      friendly_name: "Home",
+      icon: "mdi:home",
+    },
+  },
+  {
+    entity_id: "zone.bushfire",
+    state: "zoning",
+    attributes: {
+      latitude: -33.8611,
+      longitude: 151.203,
+      radius: 35000,
+      friendly_name: "Bushfire Zone",
+      icon: "mdi:home",
+    },
+  },
+  {
+    entity_id: "geo_location.nelsons_creek",
+    state: "15",
+    attributes: {
+      source: "bushfire_demo",
+      latitude: -34.07792,
+      longitude: 151.03219,
+      friendly_name: "Nelsons Creek",
+    },
+  },
+  {
+    entity_id: "geo_location.forest_rd_nowra_hill",
+    state: "8",
+    attributes: {
+      source: "bushfire_demo",
+      latitude: -33.69452,
+      longitude: 151.19577,
+      friendly_name: "Forest Rd, Nowra Hill",
+    },
+  },
+  {
+    entity_id: "geo_location.stoney_ridge_rd_kremnos",
+    state: "20",
+    attributes: {
+      source: "bushfire_demo",
+      latitude: -33.66584,
+      longitude: 150.97209,
+      friendly_name: "Stoney Ridge Rd, Kremnos",
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/picture-card.ts

@@ -1,16 +1,19 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("person", "paulus", "home", {
-    friendly_name: "Paulus",
-    entity_picture: "/images/paulus.jpg",
-  }),
+  {
+    entity_id: "person.paulus",
+    state: "home",
+    attributes: {
+      friendly_name: "Paulus",
+      entity_picture: "/images/paulus.jpg",
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/picture-elements-card.ts

@@ -1,40 +1,63 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("light", "bed_light", "on", {
-    friendly_name: "Bed Light",
-  }),
-  getEntity("group", "all_lights", "on", {
-    entity_id: ["light.bed_light"],
-    order: 8,
-    friendly_name: "All Lights",
-  }),
-  getEntity("camera", "demo_camera", "idle", {
-    access_token:
-      "2f5bb163fb91cd8770a9494fa5e7eab172d8d34f4aba806eb6b59411b8c720b8",
-    friendly_name: "Demo camera",
-    entity_picture:
-      "/api/camera_proxy/camera.demo_camera?token=2f5bb163fb91cd8770a9494fa5e7eab172d8d34f4aba806eb6b59411b8c720b8",
-  }),
-  getEntity("binary_sensor", "movement_backyard", "on", {
-    friendly_name: "Movement Backyard",
-    device_class: "motion",
-  }),
-  getEntity("person", "paulus", "home", {
-    friendly_name: "Paulus",
-    entity_picture: "/images/paulus.jpg",
-  }),
-  getEntity("sensor", "battery", 35, {
-    device_class: "battery",
-    friendly_name: "Battery",
-    unit_of_measurement: "%",
-  }),
+  {
+    entity_id: "light.bed_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Bed Light",
+    },
+  },
+  {
+    entity_id: "group.all_lights",
+    state: "on",
+    attributes: {
+      entity_id: ["light.bed_light"],
+      order: 8,
+      friendly_name: "All Lights",
+    },
+  },
+  {
+    entity_id: "camera.demo_camera",
+    state: "idle",
+    attributes: {
+      access_token:
+        "2f5bb163fb91cd8770a9494fa5e7eab172d8d34f4aba806eb6b59411b8c720b8",
+      friendly_name: "Demo camera",
+      entity_picture:
+        "/api/camera_proxy/camera.demo_camera?token=2f5bb163fb91cd8770a9494fa5e7eab172d8d34f4aba806eb6b59411b8c720b8",
+    },
+  },
+  {
+    entity_id: "binary_sensor.movement_backyard",
+    state: "on",
+    attributes: {
+      friendly_name: "Movement Backyard",
+      device_class: "motion",
+    },
+  },
+  {
+    entity_id: "person.paulus",
+    state: "home",
+    attributes: {
+      friendly_name: "Paulus",
+      entity_picture: "/images/paulus.jpg",
+    },
+  },
+  {
+    entity_id: "sensor.battery",
+    state: "35",
+    attributes: {
+      device_class: "battery",
+      friendly_name: "Battery",
+      unit_of_measurement: "%",
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/picture-entity-card.ts

@@ -1,22 +1,33 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("light", "kitchen_lights", "on", {
-    friendly_name: "Kitchen Lights",
-  }),
-  getEntity("light", "bed_light", "off", {
-    friendly_name: "Bed Light",
-  }),
-  getEntity("person", "paulus", "home", {
-    friendly_name: "Paulus",
-    entity_picture: "/images/paulus.jpg",
-  }),
+  {
+    entity_id: "light.kitchen_lights",
+    state: "on",
+    attributes: {
+      friendly_name: "Kitchen Lights",
+    },
+  },
+  {
+    entity_id: "light.bed_light",
+    state: "off",
+    attributes: {
+      friendly_name: "Bed Light",
+    },
+  },
+  {
+    entity_id: "person.paulus",
+    state: "home",
+    attributes: {
+      friendly_name: "Paulus",
+      entity_picture: "/images/paulus.jpg",
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/picture-glance-card.ts

@@ -1,35 +1,58 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("switch", "decorative_lights", "on", {
-    friendly_name: "Decorative Lights",
-  }),
-  getEntity("light", "ceiling_lights", "on", {
-    friendly_name: "Ceiling Lights",
-  }),
-  getEntity("binary_sensor", "movement_backyard", "on", {
-    friendly_name: "Movement Backyard",
-    device_class: "moving",
-  }),
-  getEntity("binary_sensor", "basement_floor_wet", "off", {
-    friendly_name: "Basement Floor Wet",
-    device_class: "moisture",
-  }),
-  getEntity("person", "paulus", "home", {
-    friendly_name: "Paulus",
-    entity_picture: "/images/paulus.jpg",
-  }),
-  getEntity("sensor", "battery", 35, {
-    device_class: "battery",
-    friendly_name: "Battery",
-    unit_of_measurement: "%",
-  }),
+  {
+    entity_id: "switch.decorative_lights",
+    state: "on",
+    attributes: {
+      friendly_name: "Decorative Lights",
+    },
+  },
+  {
+    entity_id: "light.ceiling_lights",
+    state: "on",
+    attributes: {
+      friendly_name: "Ceiling Lights",
+    },
+  },
+  {
+    entity_id: "binary_sensor.movement_backyard",
+    state: "on",
+    attributes: {
+      friendly_name: "Movement Backyard",
+      device_class: "moving",
+    },
+  },
+  {
+    entity_id: "binary_sensor.basement_floor_wet",
+    state: "off",
+    attributes: {
+      friendly_name: "Basement Floor Wet",
+      device_class: "moisture",
+    },
+  },
+  {
+    entity_id: "person.paulus",
+    state: "home",
+    attributes: {
+      friendly_name: "Paulus",
+      entity_picture: "/images/paulus.jpg",
+    },
+  },
+  {
+    entity_id: "sensor.battery",
+    state: "35",
+    attributes: {
+      device_class: "battery",
+      friendly_name: "Battery",
+      unit_of_measurement: "%",
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/thermostat-card.ts

@@ -1,100 +1,123 @@
 import type { PropertyValues, TemplateResult } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 
 const ENTITIES = [
-  getEntity("climate", "ecobee", "auto", {
-    current_temperature: 73,
-    min_temp: 45,
-    max_temp: 95,
-    temperature: null,
-    target_temp_high: 75,
-    target_temp_low: 70,
-    fan_mode: "Auto Low",
-    fan_modes: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
-    hvac_modes: ["heat", "cool", "auto", "off"],
-    swing_mode: "Auto",
-    swing_modes: ["Auto", "1", "2", "3", "Off"],
-    friendly_name: "Ecobee",
-    supported_features: 59,
-    preset_mode: "eco",
-    preset_modes: ["away", "eco"],
-  }),
-  getEntity("climate", "nest", "heat", {
-    current_temperature: 17,
-    min_temp: 15,
-    max_temp: 25,
-    temperature: 19,
-    fan_mode: "Auto Low",
-    fan_modes: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
-    hvac_modes: ["heat", "cool", "auto", "off"],
-    swing_mode: "Auto",
-    swing_modes: ["Auto", "1", "2", "3", "Off"],
-    friendly_name: "Nest",
-    supported_features: 43,
-  }),
-  getEntity("climate", "overkiz_radiator", "heat", {
-    current_temperature: 18,
-    min_temp: 7,
-    max_temp: 35,
-    temperature: 20,
-    hvac_modes: ["heat", "auto", "off"],
-    friendly_name: "Overkiz radiator",
-    supported_features: 17,
-    preset_mode: "comfort",
-    preset_modes: [
-      "none",
-      "frost_protection",
-      "eco",
-      "comfort",
-      "comfort-1",
-      "comfort-2",
-      "auto",
-      "boost",
-      "external",
-      "prog",
-    ],
-  }),
-  getEntity("climate", "overkiz_towel_dryer", "heat", {
-    current_temperature: null,
-    min_temp: 7,
-    max_temp: 35,
-    hvac_modes: ["heat", "off"],
-    friendly_name: "Overkiz towel dryer",
-    supported_features: 16,
-    preset_mode: "eco",
-    preset_modes: [
-      "none",
-      "frost_protection",
-      "eco",
-      "comfort",
-      "comfort-1",
-      "comfort-2",
-    ],
-  }),
-  getEntity("climate", "sensibo", "fan_only", {
-    current_temperature: null,
-    temperature: null,
-    min_temp: 0,
-    max_temp: 1,
-    target_temp_step: 1,
-    hvac_modes: ["fan_only", "off"],
-    friendly_name: "Sensibo purifier",
-    fan_modes: ["low", "high"],
-    fan_mode: "low",
-    swing_modes: ["both", "rangefull", "off"],
-    swing_mode: "rangefull",
-    swing_horizontal_modes: ["both", "rangefull", "off"],
-    swing_horizontal_mode: "both",
-    supported_features: 553,
-  }),
-  getEntity("climate", "unavailable", "unavailable", {
-    supported_features: 43,
-  }),
+  {
+    entity_id: "climate.ecobee",
+    state: "auto",
+    attributes: {
+      current_temperature: 73,
+      min_temp: 45,
+      max_temp: 95,
+      temperature: null,
+      target_temp_high: 75,
+      target_temp_low: 70,
+      fan_mode: "Auto Low",
+      fan_modes: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
+      hvac_modes: ["heat", "cool", "auto", "off"],
+      swing_mode: "Auto",
+      swing_modes: ["Auto", "1", "2", "3", "Off"],
+      friendly_name: "Ecobee",
+      supported_features: 59,
+      preset_mode: "eco",
+      preset_modes: ["away", "eco"],
+    },
+  },
+  {
+    entity_id: "climate.nest",
+    state: "heat",
+    attributes: {
+      current_temperature: 17,
+      min_temp: 15,
+      max_temp: 25,
+      temperature: 19,
+      fan_mode: "Auto Low",
+      fan_modes: ["On Low", "On High", "Auto Low", "Auto High", "Off"],
+      hvac_modes: ["heat", "cool", "auto", "off"],
+      swing_mode: "Auto",
+      swing_modes: ["Auto", "1", "2", "3", "Off"],
+      friendly_name: "Nest",
+      supported_features: 43,
+    },
+  },
+  {
+    entity_id: "climate.overkiz_radiator",
+    state: "heat",
+    attributes: {
+      current_temperature: 18,
+      min_temp: 7,
+      max_temp: 35,
+      temperature: 20,
+      hvac_modes: ["heat", "auto", "off"],
+      friendly_name: "Overkiz radiator",
+      supported_features: 17,
+      preset_mode: "comfort",
+      preset_modes: [
+        "none",
+        "frost_protection",
+        "eco",
+        "comfort",
+        "comfort-1",
+        "comfort-2",
+        "auto",
+        "boost",
+        "external",
+        "prog",
+      ],
+    },
+  },
+  {
+    entity_id: "climate.overkiz_towel_dryer",
+    state: "heat",
+    attributes: {
+      current_temperature: null,
+      min_temp: 7,
+      max_temp: 35,
+      hvac_modes: ["heat", "off"],
+      friendly_name: "Overkiz towel dryer",
+      supported_features: 16,
+      preset_mode: "eco",
+      preset_modes: [
+        "none",
+        "frost_protection",
+        "eco",
+        "comfort",
+        "comfort-1",
+        "comfort-2",
+      ],
+    },
+  },
+  {
+    entity_id: "climate.sensibo",
+    state: "fan_only",
+    attributes: {
+      current_temperature: null,
+      temperature: null,
+      min_temp: 0,
+      max_temp: 1,
+      target_temp_step: 1,
+      hvac_modes: ["fan_only", "off"],
+      friendly_name: "Sensibo purifier",
+      fan_modes: ["low", "high"],
+      fan_mode: "low",
+      swing_modes: ["both", "rangefull", "off"],
+      swing_mode: "rangefull",
+      swing_horizontal_modes: ["both", "rangefull", "off"],
+      swing_horizontal_mode: "both",
+      supported_features: 553,
+    },
+  },
+  {
+    entity_id: "climate.unavailable",
+    state: "unavailable",
+    attributes: {
+      supported_features: 43,
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/tile-card.ts

@@ -6,7 +6,6 @@ import { LightColorMode } from "../../../../src/data/light";
 import { LockEntityFeature } from "../../../../src/data/lock";
 import { MediaPlayerEntityFeature } from "../../../../src/data/media-player";
 import { VacuumEntityFeature } from "../../../../src/data/vacuum";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
@@ -14,102 +13,154 @@ import { ClimateEntityFeature } from "../../../../src/data/climate";
 import { FanEntityFeature } from "../../../../src/data/fan";
 
 const ENTITIES = [
-  getEntity("switch", "tv_outlet", "on", {
-    friendly_name: "TV outlet",
-    device_class: "outlet",
-  }),
-  getEntity("light", "bed_light", "on", {
-    friendly_name: "Bed Light",
-    supported_color_modes: [LightColorMode.HS, LightColorMode.COLOR_TEMP],
-  }),
-  getEntity("light", "unavailable", "unavailable", {
-    friendly_name: "Unavailable entity",
-  }),
-  getEntity("lock", "front_door", "locked", {
-    friendly_name: "Front Door Lock",
-    device_class: "lock",
-    supported_features: LockEntityFeature.OPEN,
-  }),
-  getEntity("media_player", "living_room", "playing", {
-    friendly_name: "Living room speaker",
-    supported_features: MediaPlayerEntityFeature.VOLUME_SET,
-  }),
-  getEntity("climate", "thermostat", "heat", {
-    current_temperature: 73,
-    min_temp: 45,
-    max_temp: 95,
-    temperature: 80,
-    hvac_modes: ["heat", "cool", "auto", "off"],
-    friendly_name: "Thermostat",
-    hvac_action: "heating",
-  }),
-  getEntity("person", "paulus", "home", {
-    friendly_name: "Paulus",
-  }),
-  getEntity("vacuum", "first_floor_vacuum", "docked", {
-    friendly_name: "First floor vacuum",
-    supported_features:
-      VacuumEntityFeature.START +
-      VacuumEntityFeature.STOP +
-      VacuumEntityFeature.RETURN_HOME,
-  }),
-  getEntity("cover", "kitchen_shutter", "open", {
-    friendly_name: "Kitchen shutter",
-    device_class: "shutter",
-    supported_features:
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP,
-  }),
-  getEntity("cover", "pergola_roof", "open", {
-    friendly_name: "Pergola Roof",
-    supported_features:
-      CoverEntityFeature.CLOSE_TILT +
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT,
-  }),
-  getEntity("input_number", "counter", "1.0", {
-    friendly_name: "Counter",
-    initial: 0,
-    min: 0,
-    max: 100,
-    step: 1,
-    mode: "slider",
-  }),
-  getEntity("climate", "dual_thermostat", "heat/cool", {
-    friendly_name: "Dual thermostat",
-    hvac_modes: ["off", "cool", "heat_cool", "auto", "dry", "fan_only"],
-    min_temp: 7,
-    max_temp: 35,
-    fan_modes: ["on_low", "on_high", "auto_low", "auto_high", "off"],
-    preset_modes: ["home", "eco", "away"],
-    swing_modes: ["auto", "1", "2", "3", "off"],
-    switch_horizontal_modes: ["auto", "4", "5", "6", "off"],
-    current_temperature: 23,
-    target_temp_high: 24,
-    target_temp_low: 21,
-    fan_mode: "auto_low",
-    preset_mode: "home",
-    swing_mode: "auto",
-    swing_horizontal_mode: "off",
-    supported_features:
-      ClimateEntityFeature.TURN_ON +
-      ClimateEntityFeature.TURN_OFF +
-      ClimateEntityFeature.SWING_MODE +
-      ClimateEntityFeature.SWING_HORIZONTAL_MODE +
-      ClimateEntityFeature.PRESET_MODE +
-      ClimateEntityFeature.FAN_MODE +
-      ClimateEntityFeature.TARGET_TEMPERATURE_RANGE,
-  }),
-  getEntity("fan", "fan_demo", "on", {
-    friendly_name: "Ceiling fan",
-    device_class: "fan",
-    direction: "reverse",
-    supported_features:
-      FanEntityFeature.DIRECTION +
-      FanEntityFeature.SET_SPEED +
-      FanEntityFeature.OSCILLATE,
-  }),
+  {
+    entity_id: "switch.tv_outlet",
+    state: "on",
+    attributes: {
+      friendly_name: "TV outlet",
+      device_class: "outlet",
+    },
+  },
+  {
+    entity_id: "light.bed_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Bed Light",
+      supported_color_modes: [LightColorMode.HS, LightColorMode.COLOR_TEMP],
+    },
+  },
+  {
+    entity_id: "light.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Unavailable entity",
+    },
+  },
+  {
+    entity_id: "lock.front_door",
+    state: "locked",
+    attributes: {
+      friendly_name: "Front Door Lock",
+      device_class: "lock",
+      supported_features: LockEntityFeature.OPEN,
+    },
+  },
+  {
+    entity_id: "media_player.living_room",
+    state: "playing",
+    attributes: {
+      friendly_name: "Living room speaker",
+      supported_features: MediaPlayerEntityFeature.VOLUME_SET,
+    },
+  },
+  {
+    entity_id: "climate.thermostat",
+    state: "heat",
+    attributes: {
+      current_temperature: 73,
+      min_temp: 45,
+      max_temp: 95,
+      temperature: 80,
+      hvac_modes: ["heat", "cool", "auto", "off"],
+      friendly_name: "Thermostat",
+      hvac_action: "heating",
+    },
+  },
+  {
+    entity_id: "person.paulus",
+    state: "home",
+    attributes: {
+      friendly_name: "Paulus",
+    },
+  },
+  {
+    entity_id: "vacuum.first_floor_vacuum",
+    state: "docked",
+    attributes: {
+      friendly_name: "First floor vacuum",
+      supported_features:
+        VacuumEntityFeature.START +
+        VacuumEntityFeature.STOP +
+        VacuumEntityFeature.RETURN_HOME,
+    },
+  },
+  {
+    entity_id: "cover.kitchen_shutter",
+    state: "open",
+    attributes: {
+      friendly_name: "Kitchen shutter",
+      device_class: "shutter",
+      supported_features:
+        CoverEntityFeature.CLOSE +
+        CoverEntityFeature.OPEN +
+        CoverEntityFeature.STOP,
+    },
+  },
+  {
+    entity_id: "cover.pergola_roof",
+    state: "open",
+    attributes: {
+      friendly_name: "Pergola Roof",
+      supported_features:
+        CoverEntityFeature.CLOSE_TILT +
+        CoverEntityFeature.OPEN_TILT +
+        CoverEntityFeature.STOP_TILT,
+    },
+  },
+  {
+    entity_id: "input_number.counter",
+    state: "1.0",
+    attributes: {
+      friendly_name: "Counter",
+      initial: 0,
+      min: 0,
+      max: 100,
+      step: 1,
+      mode: "slider",
+    },
+  },
+  {
+    entity_id: "climate.dual_thermostat",
+    state: "heat/cool",
+    attributes: {
+      friendly_name: "Dual thermostat",
+      hvac_modes: ["off", "cool", "heat_cool", "auto", "dry", "fan_only"],
+      min_temp: 7,
+      max_temp: 35,
+      fan_modes: ["on_low", "on_high", "auto_low", "auto_high", "off"],
+      preset_modes: ["home", "eco", "away"],
+      swing_modes: ["auto", "1", "2", "3", "off"],
+      switch_horizontal_modes: ["auto", "4", "5", "6", "off"],
+      current_temperature: 23,
+      target_temp_high: 24,
+      target_temp_low: 21,
+      fan_mode: "auto_low",
+      preset_mode: "home",
+      swing_mode: "auto",
+      swing_horizontal_mode: "off",
+      supported_features:
+        ClimateEntityFeature.TURN_ON +
+        ClimateEntityFeature.TURN_OFF +
+        ClimateEntityFeature.SWING_MODE +
+        ClimateEntityFeature.SWING_HORIZONTAL_MODE +
+        ClimateEntityFeature.PRESET_MODE +
+        ClimateEntityFeature.FAN_MODE +
+        ClimateEntityFeature.TARGET_TEMPERATURE_RANGE,
+    },
+  },
+  {
+    entity_id: "fan.fan_demo",
+    state: "on",
+    attributes: {
+      friendly_name: "Ceiling fan",
+      device_class: "fan",
+      direction: "reverse",
+      supported_features:
+        FanEntityFeature.DIRECTION +
+        FanEntityFeature.SET_SPEED +
+        FanEntityFeature.OSCILLATE,
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/lovelace/todo-list-card.ts

@@ -3,18 +3,25 @@ import { html, LitElement } from "lit";
 import { customElement, query } from "lit/decorators";
 import { mockIcons } from "../../../../demo/src/stubs/icons";
 import { mockTodo } from "../../../../demo/src/stubs/todo";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 
 const ENTITIES = [
-  getEntity("todo", "shopping_list", "2", {
-    friendly_name: "Shopping List",
-    supported_features: 15,
-  }),
-  getEntity("todo", "read_only", "2", {
-    friendly_name: "Read only",
-  }),
+  {
+    entity_id: "todo.shopping_list",
+    state: "2",
+    attributes: {
+      friendly_name: "Shopping List",
+      supported_features: 15,
+    },
+  },
+  {
+    entity_id: "todo.read_only",
+    state: "2",
+    attributes: {
+      friendly_name: "Read only",
+    },
+  },
 ];
 
 const CONFIGS = [

gallery/src/pages/more-info/climate.ts

@@ -3,108 +3,135 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 import { ClimateEntityFeature } from "../../../../src/data/climate";
 
 const ENTITIES = [
-  getEntity("climate", "radiator", "heat", {
-    friendly_name: "Basic heater",
-    hvac_modes: ["heat", "off"],
-    hvac_mode: "heat",
-    current_temperature: 18,
-    temperature: 20,
-    min_temp: 10,
-    max_temp: 30,
-    supported_features: ClimateEntityFeature.TARGET_TEMPERATURE,
-  }),
-  getEntity("climate", "ac", "cool", {
-    friendly_name: "Basic air conditioning",
-    hvac_modes: ["cool", "off"],
-    hvac_mode: "cool",
-    current_temperature: 18,
-    temperature: 20,
-    min_temp: 10,
-    max_temp: 30,
-    supported_features: ClimateEntityFeature.TARGET_TEMPERATURE,
-  }),
-  getEntity("climate", "fan", "fan_only", {
-    friendly_name: "Basic fan",
-    hvac_modes: ["fan_only", "off"],
-    hvac_mode: "fan_only",
-    fan_modes: ["low", "high"],
-    fan_mode: "low",
-    current_temperature: null,
-    temperature: null,
-    min_temp: 0,
-    max_temp: 1,
-    target_temp_step: 1,
-    supported_features:
-      // eslint-disable-next-line no-bitwise
-      ClimateEntityFeature.TARGET_TEMPERATURE | ClimateEntityFeature.FAN_MODE,
-  }),
-  getEntity("climate", "hvac", "auto", {
-    friendly_name: "Basic hvac",
-    hvac_modes: ["auto", "off"],
-    hvac_mode: "auto",
-    current_temperature: 18,
-    min_temp: 10,
-    max_temp: 30,
-    target_temp_step: 1,
-    supported_features: ClimateEntityFeature.TARGET_TEMPERATURE_RANGE,
-    target_temp_low: 20,
-    target_temp_high: 25,
-  }),
-  getEntity("climate", "advanced", "auto", {
-    friendly_name: "Advanced hvac",
-    supported_features:
-      // eslint-disable-next-line no-bitwise
-      ClimateEntityFeature.TARGET_TEMPERATURE_RANGE |
-      ClimateEntityFeature.TARGET_HUMIDITY |
-      ClimateEntityFeature.PRESET_MODE,
-    hvac_modes: ["auto", "off"],
-    hvac_mode: "auto",
-    preset_modes: ["eco", "comfort", "boost"],
-    preset_mode: "eco",
-    current_temperature: 18,
-    min_temp: 10,
-    max_temp: 30,
-    target_temp_step: 1,
-    target_temp_low: 20,
-    target_temp_high: 25,
-    current_humidity: 40,
-    min_humidity: 0,
-    max_humidity: 100,
-    humidity: 50,
-  }),
-  getEntity("climate", "towel_dryer", "heat", {
-    friendly_name: "Preset only heater",
-    hvac_modes: ["heat", "off"],
-    hvac_mode: "heat",
-    preset_modes: [
-      "none",
-      "frost_protection",
-      "eco",
-      "comfort",
-      "comfort-1",
-      "comfort-2",
-    ],
-    preset_mode: "eco",
-    current_temperature: null,
-    min_temp: 7,
-    max_temp: 35,
-    supported_features: ClimateEntityFeature.PRESET_MODE,
-  }),
-  getEntity("climate", "unavailable", "unavailable", {
-    friendly_name: "Unavailable heater",
-    hvac_modes: ["heat", "off"],
-    hvac_mode: "heat",
-    min_temp: 10,
-    max_temp: 30,
-    supported_features: ClimateEntityFeature.TARGET_TEMPERATURE,
-  }),
+  {
+    entity_id: "climate.radiator",
+    state: "heat",
+    attributes: {
+      friendly_name: "Basic heater",
+      hvac_modes: ["heat", "off"],
+      hvac_mode: "heat",
+      current_temperature: 18,
+      temperature: 20,
+      min_temp: 10,
+      max_temp: 30,
+      supported_features: ClimateEntityFeature.TARGET_TEMPERATURE,
+    },
+  },
+  {
+    entity_id: "climate.ac",
+    state: "cool",
+    attributes: {
+      friendly_name: "Basic air conditioning",
+      hvac_modes: ["cool", "off"],
+      hvac_mode: "cool",
+      current_temperature: 18,
+      temperature: 20,
+      min_temp: 10,
+      max_temp: 30,
+      supported_features: ClimateEntityFeature.TARGET_TEMPERATURE,
+    },
+  },
+  {
+    entity_id: "climate.fan",
+    state: "fan_only",
+    attributes: {
+      friendly_name: "Basic fan",
+      hvac_modes: ["fan_only", "off"],
+      hvac_mode: "fan_only",
+      fan_modes: ["low", "high"],
+      fan_mode: "low",
+      current_temperature: null,
+      temperature: null,
+      min_temp: 0,
+      max_temp: 1,
+      target_temp_step: 1,
+      supported_features:
+        // eslint-disable-next-line no-bitwise
+        ClimateEntityFeature.TARGET_TEMPERATURE | ClimateEntityFeature.FAN_MODE,
+    },
+  },
+  {
+    entity_id: "climate.hvac",
+    state: "auto",
+    attributes: {
+      friendly_name: "Basic hvac",
+      hvac_modes: ["auto", "off"],
+      hvac_mode: "auto",
+      current_temperature: 18,
+      min_temp: 10,
+      max_temp: 30,
+      target_temp_step: 1,
+      supported_features: ClimateEntityFeature.TARGET_TEMPERATURE_RANGE,
+      target_temp_low: 20,
+      target_temp_high: 25,
+    },
+  },
+  {
+    entity_id: "climate.advanced",
+    state: "auto",
+    attributes: {
+      friendly_name: "Advanced hvac",
+      supported_features:
+        // eslint-disable-next-line no-bitwise
+        ClimateEntityFeature.TARGET_TEMPERATURE_RANGE |
+        ClimateEntityFeature.TARGET_HUMIDITY |
+        ClimateEntityFeature.PRESET_MODE,
+      hvac_modes: ["auto", "off"],
+      hvac_mode: "auto",
+      preset_modes: ["eco", "comfort", "boost"],
+      preset_mode: "eco",
+      current_temperature: 18,
+      min_temp: 10,
+      max_temp: 30,
+      target_temp_step: 1,
+      target_temp_low: 20,
+      target_temp_high: 25,
+      current_humidity: 40,
+      min_humidity: 0,
+      max_humidity: 100,
+      humidity: 50,
+    },
+  },
+  {
+    entity_id: "climate.towel_dryer",
+    state: "heat",
+    attributes: {
+      friendly_name: "Preset only heater",
+      hvac_modes: ["heat", "off"],
+      hvac_mode: "heat",
+      preset_modes: [
+        "none",
+        "frost_protection",
+        "eco",
+        "comfort",
+        "comfort-1",
+        "comfort-2",
+      ],
+      preset_mode: "eco",
+      current_temperature: null,
+      min_temp: 7,
+      max_temp: 35,
+      supported_features: ClimateEntityFeature.PRESET_MODE,
+    },
+  },
+  {
+    entity_id: "climate.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Unavailable heater",
+      hvac_modes: ["heat", "off"],
+      hvac_mode: "heat",
+      min_temp: 10,
+      max_temp: 30,
+      supported_features: ClimateEntityFeature.TARGET_TEMPERATURE,
+    },
+  },
 ];
 
 @customElement("demo-more-info-climate")
@@ -117,7 +144,7 @@ class DemoMoreInfoClimate extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/cover.ts

@@ -4,138 +4,189 @@ import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import { CoverEntityFeature } from "../../../../src/data/cover";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 
 const ENTITIES = [
-  getEntity("cover", "position_buttons", "on", {
-    friendly_name: "Position Buttons",
-    supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE,
-  }),
-  getEntity("cover", "position_slider_half", "on", {
-    friendly_name: "Position Half-Open",
-    supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION,
-    current_position: 50,
-  }),
-  getEntity("cover", "position_slider_open", "on", {
-    friendly_name: "Position Open",
-    supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION,
-    current_position: 100,
-  }),
-  getEntity("cover", "position_slider_closed", "on", {
-    friendly_name: "Position Closed",
-    supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION,
-    current_position: 0,
-  }),
-  getEntity("cover", "tilt_buttons", "on", {
-    friendly_name: "Tilt Buttons",
-    supported_features:
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT,
-  }),
-  getEntity("cover", "tilt_slider_half", "on", {
-    friendly_name: "Tilt Half-Open",
-    supported_features:
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
-    current_tilt_position: 50,
-  }),
-  getEntity("cover", "tilt_slider_open", "on", {
-    friendly_name: "Tilt Open",
-    supported_features:
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
-    current_tilt_position: 100,
-  }),
-  getEntity("cover", "tilt_slider_closed", "on", {
-    friendly_name: "Tilt Closed",
-    supported_features:
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
-    current_tilt_position: 0,
-  }),
-  getEntity("cover", "position_slider_tilt_slider", "on", {
-    friendly_name: "Both Sliders",
-    supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
-    current_position: 30,
-    current_tilt_position: 70,
-  }),
-  getEntity("cover", "position_tilt_slider", "on", {
-    friendly_name: "Position & Tilt Slider",
-    supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
-    current_tilt_position: 70,
-  }),
-  getEntity("cover", "position_slider_tilt", "on", {
-    friendly_name: "Position Slider & Tilt",
-    supported_features:
-      CoverEntityFeature.OPEN +
-      CoverEntityFeature.STOP +
-      CoverEntityFeature.CLOSE +
-      CoverEntityFeature.SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT,
-    current_position: 30,
-  }),
-  getEntity("cover", "position_slider_only_tilt_slider", "on", {
-    friendly_name: "Position Slider Only & Tilt Buttons",
-    supported_features:
-      CoverEntityFeature.SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT,
-    current_position: 30,
-  }),
-  getEntity("cover", "position_slider_only_tilt", "on", {
-    friendly_name: "Position Slider Only & Tilt",
-    supported_features:
-      CoverEntityFeature.SET_POSITION +
-      CoverEntityFeature.OPEN_TILT +
-      CoverEntityFeature.STOP_TILT +
-      CoverEntityFeature.CLOSE_TILT +
-      CoverEntityFeature.SET_TILT_POSITION,
-    current_position: 30,
-    current_tilt_position: 70,
-  }),
+  {
+    entity_id: "cover.position_buttons",
+    state: "on",
+    attributes: {
+      friendly_name: "Position Buttons",
+      supported_features:
+        CoverEntityFeature.OPEN +
+        CoverEntityFeature.STOP +
+        CoverEntityFeature.CLOSE,
+    },
+  },
+  {
+    entity_id: "cover.position_slider_half",
+    state: "on",
+    attributes: {
+      friendly_name: "Position Half-Open",
+      supported_features:
+        CoverEntityFeature.OPEN +
+        CoverEntityFeature.STOP +
+        CoverEntityFeature.CLOSE +
+        CoverEntityFeature.SET_POSITION,
+      current_position: 50,
+    },
+  },
+  {
+    entity_id: "cover.position_slider_open",
+    state: "on",
+    attributes: {
+      friendly_name: "Position Open",
+      supported_features:
+        CoverEntityFeature.OPEN +
+        CoverEntityFeature.STOP +
+        CoverEntityFeature.CLOSE +
+        CoverEntityFeature.SET_POSITION,
+      current_position: 100,
+    },
+  },
+  {
+    entity_id: "cover.position_slider_closed",
+    state: "on",
+    attributes: {
+      friendly_name: "Position Closed",
+      supported_features:
+        CoverEntityFeature.OPEN +
+        CoverEntityFeature.STOP +
+        CoverEntityFeature.CLOSE +
+        CoverEntityFeature.SET_POSITION,
+      current_position: 0,
+    },
+  },
+  {
+    entity_id: "cover.tilt_buttons",
+    state: "on",
+    attributes: {
+      friendly_name: "Tilt Buttons",
+      supported_features:
+        CoverEntityFeature.OPEN_TILT +
+        CoverEntityFeature.STOP_TILT +
+        CoverEntityFeature.CLOSE_TILT,
+    },
+  },
+  {
+    entity_id: "cover.tilt_slider_half",
+    state: "on",
+    attributes: {
+      friendly_name: "Tilt Half-Open",
+      supported_features:
+        CoverEntityFeature.OPEN_TILT +
+        CoverEntityFeature.STOP_TILT +
+        CoverEntityFeature.CLOSE_TILT +
+        CoverEntityFeature.SET_TILT_POSITION,
+      current_tilt_position: 50,
+    },
+  },
+  {
+    entity_id: "cover.tilt_slider_open",
+    state: "on",
+    attributes: {
+      friendly_name: "Tilt Open",
+      supported_features:
+        CoverEntityFeature.OPEN_TILT +
+        CoverEntityFeature.STOP_TILT +
+        CoverEntityFeature.CLOSE_TILT +
+        CoverEntityFeature.SET_TILT_POSITION,
+      current_tilt_position: 100,
+    },
+  },
+  {
+    entity_id: "cover.tilt_slider_closed",
+    state: "on",
+    attributes: {
+      friendly_name: "Tilt Closed",
+      supported_features:
+        CoverEntityFeature.OPEN_TILT +
+        CoverEntityFeature.STOP_TILT +
+        CoverEntityFeature.CLOSE_TILT +
+        CoverEntityFeature.SET_TILT_POSITION,
+      current_tilt_position: 0,
+    },
+  },
+  {
+    entity_id: "cover.position_slider_tilt_slider",
+    state: "on",
+    attributes: {
+      friendly_name: "Both Sliders",
+      supported_features:
+        CoverEntityFeature.OPEN +
+        CoverEntityFeature.STOP +
+        CoverEntityFeature.CLOSE +
+        CoverEntityFeature.SET_POSITION +
+        CoverEntityFeature.OPEN_TILT +
+        CoverEntityFeature.STOP_TILT +
+        CoverEntityFeature.CLOSE_TILT +
+        CoverEntityFeature.SET_TILT_POSITION,
+      current_position: 30,
+      current_tilt_position: 70,
+    },
+  },
+  {
+    entity_id: "cover.position_tilt_slider",
+    state: "on",
+    attributes: {
+      friendly_name: "Position & Tilt Slider",
+      supported_features:
+        CoverEntityFeature.OPEN +
+        CoverEntityFeature.STOP +
+        CoverEntityFeature.CLOSE +
+        CoverEntityFeature.OPEN_TILT +
+        CoverEntityFeature.STOP_TILT +
+        CoverEntityFeature.CLOSE_TILT +
+        CoverEntityFeature.SET_TILT_POSITION,
+      current_tilt_position: 70,
+    },
+  },
+  {
+    entity_id: "cover.position_slider_tilt",
+    state: "on",
+    attributes: {
+      friendly_name: "Position Slider & Tilt",
+      supported_features:
+        CoverEntityFeature.OPEN +
+        CoverEntityFeature.STOP +
+        CoverEntityFeature.CLOSE +
+        CoverEntityFeature.SET_POSITION +
+        CoverEntityFeature.OPEN_TILT +
+        CoverEntityFeature.STOP_TILT +
+        CoverEntityFeature.CLOSE_TILT,
+      current_position: 30,
+    },
+  },
+  {
+    entity_id: "cover.position_slider_only_tilt_slider",
+    state: "on",
+    attributes: {
+      friendly_name: "Position Slider Only & Tilt Buttons",
+      supported_features:
+        CoverEntityFeature.SET_POSITION +
+        CoverEntityFeature.OPEN_TILT +
+        CoverEntityFeature.STOP_TILT +
+        CoverEntityFeature.CLOSE_TILT,
+      current_position: 30,
+    },
+  },
+  {
+    entity_id: "cover.position_slider_only_tilt",
+    state: "on",
+    attributes: {
+      friendly_name: "Position Slider Only & Tilt",
+      supported_features:
+        CoverEntityFeature.SET_POSITION +
+        CoverEntityFeature.OPEN_TILT +
+        CoverEntityFeature.STOP_TILT +
+        CoverEntityFeature.CLOSE_TILT +
+        CoverEntityFeature.SET_TILT_POSITION,
+      current_position: 30,
+      current_tilt_position: 70,
+    },
+  },
 ];
 
 @customElement("demo-more-info-cover")
@@ -148,7 +199,7 @@ class DemoMoreInfoCover extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/fan.ts

@@ -3,21 +3,24 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 import { FanEntityFeature } from "../../../../src/data/fan";
 
 const ENTITIES = [
-  getEntity("fan", "fan", "on", {
-    friendly_name: "Fan",
-    device_class: "fan",
-    supported_features:
-      FanEntityFeature.OSCILLATE +
-      FanEntityFeature.DIRECTION +
-      FanEntityFeature.SET_SPEED,
-  }),
+  {
+    entity_id: "fan.fan",
+    state: "on",
+    attributes: {
+      friendly_name: "Fan",
+      device_class: "fan",
+      supported_features:
+        FanEntityFeature.OSCILLATE +
+        FanEntityFeature.DIRECTION +
+        FanEntityFeature.SET_SPEED,
+    },
+  },
 ];
 
 @customElement("demo-more-info-fan")
@@ -30,7 +33,7 @@ class DemoMoreInfoFan extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/humidifier.ts

@@ -3,27 +3,38 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 
 const ENTITIES = [
-  getEntity("humidifier", "humidifier", "on", {
-    friendly_name: "Humidifier",
-    device_class: "humidifier",
-    current_humidity: 50,
-    humidity: 30,
-  }),
-  getEntity("humidifier", "dehumidifier", "on", {
-    friendly_name: "Dehumidifier",
-    device_class: "dehumidifier",
-    current_humidity: 50,
-    humidity: 30,
-  }),
-  getEntity("humidifier", "unavailable", "unavailable", {
-    friendly_name: "Unavailable humidifier",
-  }),
+  {
+    entity_id: "humidifier.humidifier",
+    state: "on",
+    attributes: {
+      friendly_name: "Humidifier",
+      device_class: "humidifier",
+      current_humidity: 50,
+      humidity: 30,
+    },
+  },
+  {
+    entity_id: "humidifier.dehumidifier",
+    state: "on",
+    attributes: {
+      friendly_name: "Dehumidifier",
+      device_class: "dehumidifier",
+      current_humidity: 50,
+      humidity: 30,
+    },
+  },
+  {
+    entity_id: "humidifier.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Unavailable humidifier",
+    },
+  },
 ];
 
 @customElement("demo-more-info-humidifier")
@@ -36,7 +47,7 @@ class DemoMoreInfoHumidifier extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/input-number.ts

@@ -3,30 +3,37 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 
 const ENTITIES = [
-  getEntity("input_number", "box1", 0, {
-    friendly_name: "Box1",
-    min: 0,
-    max: 100,
-    step: 1,
-    initial: 0,
-    mode: "box",
-    unit_of_measurement: "items",
-  }),
-  getEntity("input_number", "slider1", 0, {
-    friendly_name: "Slider1",
-    min: 0,
-    max: 100,
-    step: 1,
-    initial: 0,
-    mode: "slider",
-    unit_of_measurement: "items",
-  }),
+  {
+    entity_id: "input_number.box1",
+    state: "0",
+    attributes: {
+      friendly_name: "Box1",
+      min: 0,
+      max: 100,
+      step: 1,
+      initial: 0,
+      mode: "box",
+      unit_of_measurement: "items",
+    },
+  },
+  {
+    entity_id: "input_number.slider1",
+    state: "0",
+    attributes: {
+      friendly_name: "Slider1",
+      min: 0,
+      max: 100,
+      step: 1,
+      initial: 0,
+      mode: "slider",
+      unit_of_measurement: "items",
+    },
+  },
 ];
 
 @customElement("demo-more-info-input-number")
@@ -39,7 +46,7 @@ class DemoMoreInfoInputNumber extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/input-text.ts

@@ -3,16 +3,19 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 
 const ENTITIES = [
-  getEntity("input_text", "text", "Inspiration", {
-    friendly_name: "Text",
-    mode: "text",
-  }),
+  {
+    entity_id: "input_text.text",
+    state: "Inspiration",
+    attributes: {
+      friendly_name: "Text",
+      mode: "text",
+    },
+  },
 ];
 
 @customElement("demo-more-info-input-text")
@@ -25,7 +28,7 @@ class DemoMoreInfoInputText extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/light.ts

@@ -4,137 +4,172 @@ import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import { LightColorMode, LightEntityFeature } from "../../../../src/data/light";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 
 const ENTITIES = [
-  getEntity("light", "bed_light", "on", {
-    friendly_name: "Basic Light",
-  }),
-  getEntity("light", "kitchen_light", "on", {
-    friendly_name: "Brightness Light",
-    brightness: 200,
-    supported_color_modes: [LightColorMode.BRIGHTNESS],
-    color_mode: LightColorMode.BRIGHTNESS,
-  }),
-  getEntity("light", "color_temperature_light", "on", {
-    friendly_name: "White Color Temperature Light",
-    brightness: 128,
-    color_temp: 75,
-    min_mireds: 30,
-    max_mireds: 150,
-    supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
-    ],
-    color_mode: LightColorMode.COLOR_TEMP,
-  }),
-  getEntity("light", "color_hs_light", "on", {
-    friendly_name: "Color HS Light",
-    brightness: 255,
-    hs_color: [30, 100],
-    rgb_color: [30, 100, 255],
-    min_mireds: 30,
-    max_mireds: 150,
-    supported_features:
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
-    supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
-      LightColorMode.HS,
-    ],
-    color_mode: LightColorMode.HS,
-    effect_list: ["random", "colorloop"],
-  }),
-  getEntity("light", "color_rgb_ct_light", "on", {
-    friendly_name: "Color RGB + CT Light",
-    brightness: 255,
-    color_temp: 75,
-    min_mireds: 30,
-    max_mireds: 150,
-    supported_features:
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
-    supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
-      LightColorMode.RGB,
-    ],
-    color_mode: LightColorMode.COLOR_TEMP,
-    effect_list: ["random", "colorloop"],
-  }),
-  getEntity("light", "color_RGB_light", "on", {
-    friendly_name: "Color Effects Light",
-    brightness: 255,
-    rgb_color: [30, 100, 255],
-    supported_features:
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
-    supported_color_modes: [LightColorMode.BRIGHTNESS, LightColorMode.RGB],
-    color_mode: LightColorMode.RGB,
-    effect_list: ["random", "colorloop"],
-  }),
-  getEntity("light", "color_rgbw_light", "on", {
-    friendly_name: "Color RGBW Light",
-    brightness: 255,
-    rgbw_color: [30, 100, 255, 125],
-    min_mireds: 30,
-    max_mireds: 150,
-    supported_features:
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
-    supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
-      LightColorMode.RGBW,
-    ],
-    color_mode: LightColorMode.RGBW,
-    effect_list: ["random", "colorloop"],
-  }),
-  getEntity("light", "color_rgbww_light", "on", {
-    friendly_name: "Color RGBWW Light",
-    brightness: 255,
-    rgbww_color: [30, 100, 255, 125, 10],
-    min_mireds: 30,
-    max_mireds: 150,
-    supported_features:
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
-    supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
-      LightColorMode.RGBWW,
-    ],
-    color_mode: LightColorMode.RGBWW,
-    effect_list: ["random", "colorloop"],
-  }),
-  getEntity("light", "color_xy_light", "on", {
-    friendly_name: "Color XY Light",
-    brightness: 255,
-    xy_color: [30, 100],
-    rgb_color: [30, 100, 255],
-    min_mireds: 30,
-    max_mireds: 150,
-    supported_features:
-      LightEntityFeature.EFFECT +
-      LightEntityFeature.FLASH +
-      LightEntityFeature.TRANSITION,
-    supported_color_modes: [
-      LightColorMode.BRIGHTNESS,
-      LightColorMode.COLOR_TEMP,
-      LightColorMode.XY,
-    ],
-    color_mode: LightColorMode.XY,
-    effect_list: ["random", "colorloop"],
-  }),
+  {
+    entity_id: "light.bed_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Basic Light",
+    },
+  },
+  {
+    entity_id: "light.kitchen_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Brightness Light",
+      brightness: 200,
+      supported_color_modes: [LightColorMode.BRIGHTNESS],
+      color_mode: LightColorMode.BRIGHTNESS,
+    },
+  },
+  {
+    entity_id: "light.color_temperature_light",
+    state: "on",
+    attributes: {
+      friendly_name: "White Color Temperature Light",
+      brightness: 128,
+      color_temp: 75,
+      min_mireds: 30,
+      max_mireds: 150,
+      supported_color_modes: [
+        LightColorMode.BRIGHTNESS,
+        LightColorMode.COLOR_TEMP,
+      ],
+      color_mode: LightColorMode.COLOR_TEMP,
+    },
+  },
+  {
+    entity_id: "light.color_hs_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Color HS Light",
+      brightness: 255,
+      hs_color: [30, 100],
+      rgb_color: [30, 100, 255],
+      min_mireds: 30,
+      max_mireds: 150,
+      supported_features:
+        LightEntityFeature.EFFECT +
+        LightEntityFeature.FLASH +
+        LightEntityFeature.TRANSITION,
+      supported_color_modes: [
+        LightColorMode.BRIGHTNESS,
+        LightColorMode.COLOR_TEMP,
+        LightColorMode.HS,
+      ],
+      color_mode: LightColorMode.HS,
+      effect_list: ["random", "colorloop"],
+    },
+  },
+  {
+    entity_id: "light.color_rgb_ct_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Color RGB + CT Light",
+      brightness: 255,
+      color_temp: 75,
+      min_mireds: 30,
+      max_mireds: 150,
+      supported_features:
+        LightEntityFeature.EFFECT +
+        LightEntityFeature.FLASH +
+        LightEntityFeature.TRANSITION,
+      supported_color_modes: [
+        LightColorMode.BRIGHTNESS,
+        LightColorMode.COLOR_TEMP,
+        LightColorMode.RGB,
+      ],
+      color_mode: LightColorMode.COLOR_TEMP,
+      effect_list: ["random", "colorloop"],
+    },
+  },
+  {
+    entity_id: "light.color_RGB_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Color Effects Light",
+      brightness: 255,
+      rgb_color: [30, 100, 255],
+      supported_features:
+        LightEntityFeature.EFFECT +
+        LightEntityFeature.FLASH +
+        LightEntityFeature.TRANSITION,
+      supported_color_modes: [LightColorMode.BRIGHTNESS, LightColorMode.RGB],
+      color_mode: LightColorMode.RGB,
+      effect_list: ["random", "colorloop"],
+    },
+  },
+  {
+    entity_id: "light.color_rgbw_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Color RGBW Light",
+      brightness: 255,
+      rgbw_color: [30, 100, 255, 125],
+      min_mireds: 30,
+      max_mireds: 150,
+      supported_features:
+        LightEntityFeature.EFFECT +
+        LightEntityFeature.FLASH +
+        LightEntityFeature.TRANSITION,
+      supported_color_modes: [
+        LightColorMode.BRIGHTNESS,
+        LightColorMode.COLOR_TEMP,
+        LightColorMode.RGBW,
+      ],
+      color_mode: LightColorMode.RGBW,
+      effect_list: ["random", "colorloop"],
+    },
+  },
+  {
+    entity_id: "light.color_rgbww_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Color RGBWW Light",
+      brightness: 255,
+      rgbww_color: [30, 100, 255, 125, 10],
+      min_mireds: 30,
+      max_mireds: 150,
+      supported_features:
+        LightEntityFeature.EFFECT +
+        LightEntityFeature.FLASH +
+        LightEntityFeature.TRANSITION,
+      supported_color_modes: [
+        LightColorMode.BRIGHTNESS,
+        LightColorMode.COLOR_TEMP,
+        LightColorMode.RGBWW,
+      ],
+      color_mode: LightColorMode.RGBWW,
+      effect_list: ["random", "colorloop"],
+    },
+  },
+  {
+    entity_id: "light.color_xy_light",
+    state: "on",
+    attributes: {
+      friendly_name: "Color XY Light",
+      brightness: 255,
+      xy_color: [30, 100],
+      rgb_color: [30, 100, 255],
+      min_mireds: 30,
+      max_mireds: 150,
+      supported_features:
+        LightEntityFeature.EFFECT +
+        LightEntityFeature.FLASH +
+        LightEntityFeature.TRANSITION,
+      supported_color_modes: [
+        LightColorMode.BRIGHTNESS,
+        LightColorMode.COLOR_TEMP,
+        LightColorMode.XY,
+      ],
+      color_mode: LightColorMode.XY,
+      effect_list: ["random", "colorloop"],
+    },
+  },
 ];
 
 @customElement("demo-more-info-light")
@@ -147,7 +182,7 @@ class DemoMoreInfoLight extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/lock.ts

@@ -3,19 +3,26 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 
 const ENTITIES = [
-  getEntity("lock", "lock", "locked", {
-    friendly_name: "Lock",
-    device_class: "lock",
-  }),
-  getEntity("lock", "unavailable", "unavailable", {
-    friendly_name: "Unavailable lock",
-  }),
+  {
+    entity_id: "lock.lock",
+    state: "locked",
+    attributes: {
+      friendly_name: "Lock",
+      device_class: "lock",
+    },
+  },
+  {
+    entity_id: "lock.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Unavailable lock",
+    },
+  },
 ];
 
 @customElement("demo-more-info-lock")
@@ -28,7 +35,7 @@ class DemoMoreInfoLock extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/media-player.ts

@@ -20,7 +20,7 @@ class DemoMoreInfoMediaPlayer extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/number.ts

@@ -3,48 +3,63 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 
 const ENTITIES = [
-  getEntity("number", "box1", 0, {
-    friendly_name: "Box1",
-    min: 0,
-    max: 100,
-    step: 1,
-    initial: 0,
-    mode: "box",
-    unit_of_measurement: "items",
-  }),
-  getEntity("number", "slider1", 0, {
-    friendly_name: "Slider1",
-    min: 0,
-    max: 100,
-    step: 1,
-    initial: 0,
-    mode: "slider",
-    unit_of_measurement: "items",
-  }),
-  getEntity("number", "auto1", 0, {
-    friendly_name: "Auto1",
-    min: 0,
-    max: 1000,
-    step: 1,
-    initial: 0,
-    mode: "auto",
-    unit_of_measurement: "items",
-  }),
-  getEntity("number", "auto2", 0, {
-    friendly_name: "Auto2",
-    min: 0,
-    max: 100,
-    step: 1,
-    initial: 0,
-    mode: "auto",
-    unit_of_measurement: "items",
-  }),
+  {
+    entity_id: "number.box1",
+    state: "0",
+    attributes: {
+      friendly_name: "Box1",
+      min: 0,
+      max: 100,
+      step: 1,
+      initial: 0,
+      mode: "box",
+      unit_of_measurement: "items",
+    },
+  },
+  {
+    entity_id: "number.slider1",
+    state: "0",
+    attributes: {
+      friendly_name: "Slider1",
+      min: 0,
+      max: 100,
+      step: 1,
+      initial: 0,
+      mode: "slider",
+      unit_of_measurement: "items",
+    },
+  },
+  {
+    entity_id: "number.auto1",
+    state: "0",
+    attributes: {
+      friendly_name: "Auto1",
+      min: 0,
+      max: 1000,
+      step: 1,
+      initial: 0,
+      mode: "auto",
+      unit_of_measurement: "items",
+    },
+  },
+  {
+    entity_id: "number.auto2",
+    state: "0",
+    attributes: {
+      friendly_name: "Auto2",
+      min: 0,
+      max: 100,
+      step: 1,
+      initial: 0,
+      mode: "auto",
+      unit_of_measurement: "items",
+    },
+  },
 ];
 
 @customElement("demo-more-info-number")
@@ -57,7 +72,7 @@ class DemoMoreInfoNumber extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/scene.ts

@@ -3,19 +3,26 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 
 const ENTITIES = [
-  getEntity("scene", "romantic_lights", "scening", {
-    entity_id: ["light.bed_light", "light.ceiling_lights"],
-    friendly_name: "Romantic Scene",
-  }),
-  getEntity("scene", "unavailable", "unavailable", {
-    friendly_name: "Romantic Scene",
-  }),
+  {
+    entity_id: "scene.romantic_lights",
+    state: "scening",
+    attributes: {
+      entity_id: ["light.bed_light", "light.ceiling_lights"],
+      friendly_name: "Romantic Scene",
+    },
+  },
+  {
+    entity_id: "scene.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Romantic Scene",
+    },
+  },
 ];
 
 @customElement("demo-more-info-scene")
@@ -28,7 +35,7 @@ class DemoMoreInfoScene extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/timer.ts

@@ -3,16 +3,19 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 
 const ENTITIES = [
-  getEntity("timer", "timer", "idle", {
-    friendly_name: "Timer",
-    duration: "0:05:00",
-  }),
+  {
+    entity_id: "timer.timer",
+    state: "idle",
+    attributes: {
+      friendly_name: "Timer",
+      duration: "0:05:00",
+    },
+  },
 ];
 
 @customElement("demo-more-info-timer")
@@ -25,7 +28,7 @@ class DemoMoreInfoTimer extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/update.ts

@@ -3,7 +3,6 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
@@ -23,124 +22,208 @@ const base_attributes = {
 };
 
 const ENTITIES = [
-  getEntity("update", "update1", "on", {
-    ...base_attributes,
-    friendly_name: "Update",
-  }),
-  getEntity("update", "update2", "on", {
-    ...base_attributes,
-    title: null,
-    friendly_name: "Update without title",
-  }),
-  getEntity("update", "update3", "on", {
-    ...base_attributes,
-    release_url: null,
-    friendly_name: "Update without release_url",
-  }),
-  getEntity("update", "update4", "on", {
-    ...base_attributes,
-    release_summary: null,
-    friendly_name: "Update without release_summary",
-  }),
-  getEntity("update", "update5", "off", {
-    ...base_attributes,
-    installed_version: "1.2.3",
-    friendly_name: "No update",
-  }),
-  getEntity("update", "update6", "off", {
-    ...base_attributes,
-    skipped_version: "1.2.3",
-    friendly_name: "Skipped version",
-  }),
-  getEntity("update", "update7", "on", {
-    ...base_attributes,
-    supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.BACKUP,
-    friendly_name: "With backup support",
-  }),
-  getEntity("update", "update8", "on", {
-    ...base_attributes,
-    in_progress: true,
-    friendly_name: "With true in_progress",
-  }),
-  getEntity("update", "update9", "on", {
-    ...base_attributes,
-    in_progress: 25,
-    supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
-    friendly_name: "With 25 in_progress",
-  }),
-  getEntity("update", "update10", "on", {
-    ...base_attributes,
-    in_progress: 50,
-    supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
-    friendly_name: "With 50 in_progress",
-  }),
-  getEntity("update", "update11", "on", {
-    ...base_attributes,
-    in_progress: 75,
-    supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
-    friendly_name: "With 75 in_progress",
-  }),
-  getEntity("update", "update12", "unavailable", {
-    ...base_attributes,
-    in_progress: 50,
-    friendly_name: "Unavailable",
-  }),
-  getEntity("update", "update13", "on", {
-    ...base_attributes,
-    supported_features: 0,
-    friendly_name: "No install support",
-  }),
-  getEntity("update", "update14", "off", {
-    ...base_attributes,
-    installed_version: null,
-    friendly_name: "Update without installed_version",
-  }),
-  getEntity("update", "update15", "off", {
-    ...base_attributes,
-    latest_version: null,
-    friendly_name: "Update without latest_version",
-  }),
-  getEntity("update", "update16", "off", {
-    ...base_attributes,
-    friendly_name: "Update with release notes",
-    supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
-  }),
-  getEntity("update", "update17", "off", {
-    ...base_attributes,
-    friendly_name: "Update with release notes error",
-    supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
-  }),
-  getEntity("update", "update18", "off", {
-    ...base_attributes,
-    friendly_name: "Update with release notes loading",
-    supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
-  }),
-  getEntity("update", "update19", "on", {
-    ...base_attributes,
-    friendly_name: "Update with auto update",
-    auto_update: true,
-  }),
-  getEntity("update", "update20", "on", {
-    ...base_attributes,
-    in_progress: true,
-    title: undefined,
-    friendly_name: "Installing without title",
-  }),
-  getEntity("update", "update21", "on", {
-    ...base_attributes,
-    in_progress: true,
-    friendly_name:
-      "Update with in_progress true and  UpdateEntityFeature.PROGRESS",
-    supported_features:
-      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
-  }),
+  {
+    entity_id: "update.update1",
+    state: "on",
+    attributes: {
+      ...base_attributes,
+      friendly_name: "Update",
+    },
+  },
+  {
+    entity_id: "update.update2",
+    state: "on",
+    attributes: {
+      ...base_attributes,
+      title: null,
+      friendly_name: "Update without title",
+    },
+  },
+  {
+    entity_id: "update.update3",
+    state: "on",
+    attributes: {
+      ...base_attributes,
+      release_url: null,
+      friendly_name: "Update without release_url",
+    },
+  },
+  {
+    entity_id: "update.update4",
+    state: "on",
+    attributes: {
+      ...base_attributes,
+      release_summary: null,
+      friendly_name: "Update without release_summary",
+    },
+  },
+  {
+    entity_id: "update.update5",
+    state: "off",
+    attributes: {
+      ...base_attributes,
+      installed_version: "1.2.3",
+      friendly_name: "No update",
+    },
+  },
+  {
+    entity_id: "update.update6",
+    state: "off",
+    attributes: {
+      ...base_attributes,
+      skipped_version: "1.2.3",
+      friendly_name: "Skipped version",
+    },
+  },
+  {
+    entity_id: "update.update7",
+    state: "on",
+    attributes: {
+      ...base_attributes,
+      supported_features:
+        base_attributes.supported_features + UpdateEntityFeature.BACKUP,
+      friendly_name: "With backup support",
+    },
+  },
+  {
+    entity_id: "update.update8",
+    state: "on",
+    attributes: {
+      ...base_attributes,
+      in_progress: true,
+      friendly_name: "With true in_progress",
+    },
+  },
+  {
+    entity_id: "update.update9",
+    state: "on",
+    attributes: {
+      ...base_attributes,
+      in_progress: 25,
+      supported_features:
+        base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
+      friendly_name: "With 25 in_progress",
+    },
+  },
+  {
+    entity_id: "update.update10",
+    state: "on",
+    attributes: {
+      ...base_attributes,
+      in_progress: 50,
+      supported_features:
+        base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
+      friendly_name: "With 50 in_progress",
+    },
+  },
+  {
+    entity_id: "update.update11",
+    state: "on",
+    attributes: {
+      ...base_attributes,
+      in_progress: 75,
+      supported_features:
+        base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
+      friendly_name: "With 75 in_progress",
+    },
+  },
+  {
+    entity_id: "update.update12",
+    state: "unavailable",
+    attributes: {
+      ...base_attributes,
+      in_progress: 50,
+      friendly_name: "Unavailable",
+    },
+  },
+  {
+    entity_id: "update.update13",
+    state: "on",
+    attributes: {
+      ...base_attributes,
+      supported_features: 0,
+      friendly_name: "No install support",
+    },
+  },
+  {
+    entity_id: "update.update14",
+    state: "off",
+    attributes: {
+      ...base_attributes,
+      installed_version: null,
+      friendly_name: "Update without installed_version",
+    },
+  },
+  {
+    entity_id: "update.update15",
+    state: "off",
+    attributes: {
+      ...base_attributes,
+      latest_version: null,
+      friendly_name: "Update without latest_version",
+    },
+  },
+  {
+    entity_id: "update.update16",
+    state: "off",
+    attributes: {
+      ...base_attributes,
+      friendly_name: "Update with release notes",
+      supported_features:
+        base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
+    },
+  },
+  {
+    entity_id: "update.update17",
+    state: "off",
+    attributes: {
+      ...base_attributes,
+      friendly_name: "Update with release notes error",
+      supported_features:
+        base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
+    },
+  },
+  {
+    entity_id: "update.update18",
+    state: "off",
+    attributes: {
+      ...base_attributes,
+      friendly_name: "Update with release notes loading",
+      supported_features:
+        base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
+    },
+  },
+  {
+    entity_id: "update.update19",
+    state: "on",
+    attributes: {
+      ...base_attributes,
+      friendly_name: "Update with auto update",
+      auto_update: true,
+    },
+  },
+  {
+    entity_id: "update.update20",
+    state: "on",
+    attributes: {
+      ...base_attributes,
+      in_progress: true,
+      title: undefined,
+      friendly_name: "Installing without title",
+    },
+  },
+  {
+    entity_id: "update.update21",
+    state: "on",
+    attributes: {
+      ...base_attributes,
+      in_progress: true,
+      friendly_name:
+        "Update with in_progress true and  UpdateEntityFeature.PROGRESS",
+      supported_features:
+        base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
+    },
+  },
 ];
 
 @customElement("demo-more-info-update")
@@ -153,7 +236,7 @@ class DemoMoreInfoUpdate extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/vacuum.ts

@@ -3,20 +3,23 @@ import { html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 import { VacuumEntityFeature } from "../../../../src/data/vacuum";
 
 const ENTITIES = [
-  getEntity("vacuum", "first_floor_vacuum", "docked", {
-    friendly_name: "First floor vacuum",
-    supported_features:
-      VacuumEntityFeature.START +
-      VacuumEntityFeature.STOP +
-      VacuumEntityFeature.RETURN_HOME,
-  }),
+  {
+    entity_id: "vacuum.first_floor_vacuum",
+    state: "docked",
+    attributes: {
+      friendly_name: "First floor vacuum",
+      supported_features:
+        VacuumEntityFeature.START +
+        VacuumEntityFeature.STOP +
+        VacuumEntityFeature.RETURN_HOME,
+    },
+  },
 ];
 
 @customElement("demo-more-info-vacuum")
@@ -29,7 +32,7 @@ class DemoMoreInfoVacuum extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

gallery/src/pages/more-info/water-heater.ts

@@ -4,39 +4,46 @@ import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import { WaterHeaterEntityFeature } from "../../../../src/data/water_heater";
 import "../../../../src/dialogs/more-info/more-info-content";
-import { getEntity } from "../../../../src/fake_data/entity";
 import type { MockHomeAssistant } from "../../../../src/fake_data/provide_hass";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 
 const ENTITIES = [
-  getEntity("water_heater", "basic", "eco", {
-    friendly_name: "Basic heater",
-    operation_list: ["heat_pump", "eco", "performance", "off"],
-    operation_mode: "eco",
-    away_mode: "off",
-    target_temp_step: 1,
-    current_temperature: 55,
-    temperature: 60,
-    min_temp: 20,
-    max_temp: 70,
-    supported_features:
-      // eslint-disable-next-line no-bitwise
-      WaterHeaterEntityFeature.TARGET_TEMPERATURE |
-      WaterHeaterEntityFeature.OPERATION_MODE |
-      WaterHeaterEntityFeature.AWAY_MODE,
-  }),
-  getEntity("water_heater", "unavailable", "unavailable", {
-    friendly_name: "Unavailable heater",
-    operation_list: ["heat_pump", "eco", "performance", "off"],
-    operation_mode: "off",
-    min_temp: 20,
-    max_temp: 70,
-    supported_features:
-      // eslint-disable-next-line no-bitwise
-      WaterHeaterEntityFeature.TARGET_TEMPERATURE |
-      WaterHeaterEntityFeature.OPERATION_MODE,
-  }),
+  {
+    entity_id: "water_heater.basic",
+    state: "eco",
+    attributes: {
+      friendly_name: "Basic heater",
+      operation_list: ["heat_pump", "eco", "performance", "off"],
+      operation_mode: "eco",
+      away_mode: "off",
+      target_temp_step: 1,
+      current_temperature: 55,
+      temperature: 60,
+      min_temp: 20,
+      max_temp: 70,
+      supported_features:
+        // eslint-disable-next-line no-bitwise
+        WaterHeaterEntityFeature.TARGET_TEMPERATURE |
+        WaterHeaterEntityFeature.OPERATION_MODE |
+        WaterHeaterEntityFeature.AWAY_MODE,
+    },
+  },
+  {
+    entity_id: "water_heater.unavailable",
+    state: "unavailable",
+    attributes: {
+      friendly_name: "Unavailable heater",
+      operation_list: ["heat_pump", "eco", "performance", "off"],
+      operation_mode: "off",
+      min_temp: 20,
+      max_temp: 70,
+      supported_features:
+        // eslint-disable-next-line no-bitwise
+        WaterHeaterEntityFeature.TARGET_TEMPERATURE |
+        WaterHeaterEntityFeature.OPERATION_MODE,
+    },
+  },
 ];
 
 @customElement("demo-more-info-water-heater")
@@ -49,7 +56,7 @@ class DemoMoreInfoWaterHeater extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entityId)}
+        .entities=${ENTITIES.map((ent) => ent.entity_id)}
       ></demo-more-infos>
     `;
   }

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

@@ -118,7 +118,7 @@ class HaLandingPage extends LandingPageBaseElement {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
-    makeDialogManager(this, this.shadowRoot!);
+    makeDialogManager(this);
 
     if (window.innerWidth > 450) {
       import("../../src/resources/particles");

package.json

@@ -28,16 +28,16 @@
   "dependencies": {
     "@babel/runtime": "7.28.6",
     "@braintree/sanitize-url": "7.1.2",
-    "@codemirror/autocomplete": "6.20.0",
+    "@codemirror/autocomplete": "6.20.1",
     "@codemirror/commands": "6.10.2",
-    "@codemirror/language": "6.12.1",
+    "@codemirror/language": "6.12.2",
     "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.6.0",
     "@codemirror/state": "6.5.4",
-    "@codemirror/view": "6.39.15",
+    "@codemirror/view": "6.39.16",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.2.2",
+    "@formatjs/intl-datetimeformat": "7.2.4",
     "@formatjs/intl-displaynames": "7.2.1",
     "@formatjs/intl-durationformat": "0.10.1",
     "@formatjs/intl-getcanonicallocales": "3.2.1",
@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.20",
     "@fullcalendar/luxon3": "6.1.20",
     "@fullcalendar/timegrid": "6.1.20",
-    "@home-assistant/webawesome": "3.2.1-ha.2",
+    "@home-assistant/webawesome": "3.3.1",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.1.0",
     "@lit-labs/observers": "2.1.0",
@@ -72,7 +72,6 @@
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "@material/mwc-radio": "0.27.0",
     "@material/mwc-select": "0.27.0",
-    "@material/mwc-snackbar": "0.27.0",
     "@material/mwc-switch": "0.27.0",
     "@material/mwc-textarea": "0.27.0",
     "@material/mwc-textfield": "0.27.0",
@@ -83,7 +82,7 @@
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
-    "@swc/helpers": "0.5.18",
+    "@swc/helpers": "0.5.19",
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
@@ -92,7 +91,7 @@
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
-    "barcode-detector": "3.0.8",
+    "barcode-detector": "3.1.0",
     "color-name": "2.1.0",
     "comlink": "4.4.2",
     "core-js": "3.48.0",
@@ -106,7 +105,7 @@
     "element-internals-polyfill": "3.0.2",
     "fuse.js": "7.1.0",
     "google-timezones-json": "1.2.0",
-    "gulp-zopfli-green": "6.0.2",
+    "gulp-zopfli-green": "7.0.0",
     "hls.js": "1.6.15",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.2.2",
@@ -118,7 +117,7 @@
     "lit": "3.3.2",
     "lit-html": "3.3.2",
     "luxon": "3.7.2",
-    "marked": "17.0.3",
+    "marked": "17.0.4",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
@@ -145,17 +144,17 @@
   },
   "devDependencies": {
     "@babel/core": "7.29.0",
-    "@babel/helper-define-polyfill-provider": "0.6.6",
+    "@babel/helper-define-polyfill-provider": "0.6.7",
     "@babel/plugin-transform-runtime": "7.29.0",
     "@babel/preset-env": "7.29.0",
     "@bundle-stats/plugin-webpack-filter": "4.21.10",
-    "@html-eslint/eslint-plugin": "0.56.0",
+    "@html-eslint/eslint-plugin": "0.58.1",
     "@lokalise/node-api": "15.6.1",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
     "@rsdoctor/rspack-plugin": "1.5.2",
-    "@rspack/core": "1.7.6",
+    "@rspack/core": "1.7.7",
     "@rspack/dev-server": "1.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.25",
@@ -172,15 +171,15 @@
     "@types/mocha": "10.0.10",
     "@types/qrcode": "1.5.6",
     "@types/sortablejs": "1.15.9",
-    "@types/tar": "6.1.13",
+    "@types/tar": "7.0.87",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
     "@vitest/coverage-v8": "4.0.18",
-    "babel-loader": "10.0.0",
+    "babel-loader": "10.1.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.1",
-    "eslint": "9.39.3",
+    "eslint": "9.39.4",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",
@@ -188,9 +187,9 @@
     "eslint-plugin-lit": "2.2.1",
     "eslint-plugin-lit-a11y": "5.1.1",
     "eslint-plugin-unused-imports": "4.4.1",
-    "eslint-plugin-wc": "3.0.2",
+    "eslint-plugin-wc": "3.1.0",
     "fancy-log": "2.0.0",
-    "fs-extra": "11.3.3",
+    "fs-extra": "11.3.4",
     "glob": "13.0.6",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
@@ -198,9 +197,9 @@
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "28.0.0",
+    "jsdom": "28.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.2.7",
+    "lint-staged": "16.3.2",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -208,14 +207,14 @@
     "pinst": "3.0.0",
     "prettier": "3.8.1",
     "rspack-manifest-plugin": "5.2.1",
-    "serve": "14.2.5",
-    "sinon": "21.0.1",
-    "tar": "7.5.8",
-    "terser-webpack-plugin": "5.3.16",
+    "serve": "14.2.6",
+    "sinon": "21.0.2",
+    "tar": "7.5.10",
+    "terser-webpack-plugin": "5.3.17",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.54.0",
-    "vite-tsconfig-paths": "6.0.5",
+    "typescript-eslint": "8.56.1",
+    "vite-tsconfig-paths": "6.1.1",
     "vitest": "4.0.18",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
@@ -228,13 +227,13 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.20",
-    "globals": "17.3.0",
+    "globals": "17.4.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "glob@^10.2.2": "^10.5.0"
   },
   "packageManager": "yarn@4.12.0",
   "volta": {
-    "node": "24.13.1"
+    "node": "24.14.0"
   }
 }

src/auth/ha-auth-flow.ts

@@ -2,7 +2,7 @@
 import { genClientId } from "home-assistant-js-websocket";
 import type { PropertyValues } from "lit";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { keyed } from "lit/directives/keyed";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-alert";
@@ -23,6 +23,7 @@ import type {
   DataEntryFlowStepForm,
 } from "../data/data_entry_flow";
 import "./ha-auth-form";
+import type { HaAuthForm } from "./ha-auth-form";
 
 type State = "loading" | "error" | "step";
 
@@ -52,6 +53,8 @@ export class HaAuthFlow extends LitElement {
 
   @state() private _submitting = false;
 
+  @query("ha-auth-form") private _form?: HaAuthForm;
+
   createRenderRoot() {
     return this;
   }
@@ -179,7 +182,7 @@ export class HaAuthFlow extends LitElement {
           <div class="action">
             <ha-button
               @click=${this._handleSubmit}
-              .disabled=${this._submitting}
+              .loading=${this._submitting}
             >
               ${this.step.type === "form"
                 ? this.localize("ui.panel.page-authorize.form.next")
@@ -370,6 +373,11 @@ export class HaAuthFlow extends LitElement {
       this._providerChanged(this.authProvider);
       return;
     }
+
+    if (!this._form?.reportValidity()) {
+      return;
+    }
+
     this._submitting = true;
 
     const postData = { ...this._stepData, client_id: this.clientId };

src/auth/ha-auth-form-string.ts

@@ -12,6 +12,10 @@ export class HaAuthFormString extends HaFormString {
     return this;
   }
 
+  public reportValidity(): boolean {
+    return this.querySelector("ha-auth-textfield")?.reportValidity() ?? true;
+  }
+
   protected render(): TemplateResult {
     return html`
       <style>

src/common/color/compute-color.ts

@@ -32,9 +32,17 @@ const YAML_ONLY_THEMES_COLORS = new Set([
   "disabled",
 ]);
 
-export function computeCssColor(color: string): string {
+export function computeCssVariableName(color: string): string {
   if (THEME_COLORS.has(color) || YAML_ONLY_THEMES_COLORS.has(color)) {
-    return `var(--${color}-color)`;
+    return `--${color}-color`;
+  }
+  return color;
+}
+
+export function computeCssColor(color: string): string {
+  const cssVarName = computeCssVariableName(color);
+  if (cssVarName !== color) {
+    return `var(${cssVarName})`;
   }
   return color;
 }

src/common/dom/can-override-input.ts

@@ -11,11 +11,11 @@ export const canOverrideAlphanumericInput = (composedPath: EventTarget[]) => {
 
   const el = composedPath[0] as Element;
 
-  if (el.tagName === "TEXTAREA") {
-    return false;
-  }
-
-  if (el.parentElement?.tagName === "HA-SELECT") {
+  if (
+    el.tagName === "TEXTAREA" ||
+    el.parentElement?.tagName === "HA-SELECT" ||
+    el.parentElement?.tagName === "HA-DROPDOWN"
+  ) {
     return false;
   }
 

src/common/entity/compute_state_display.ts

@@ -133,33 +133,34 @@ const computeStateToPartsFromEntityAttributes = (
           ),
         });
       } catch (_err) {
-        // fallback to default
+        // fallback to default numeric formatting below
       }
 
-      const TYPE_MAP: Record<string, ValuePart["type"]> = {
-        integer: "value",
-        group: "value",
-        decimal: "value",
-        fraction: "value",
-        literal: "literal",
-        currency: "unit",
-      };
+      if (parts.length) {
+        const TYPE_MAP: Record<string, ValuePart["type"]> = {
+          integer: "value",
+          group: "value",
+          decimal: "value",
+          fraction: "value",
+          literal: "literal",
+          currency: "unit",
+        };
 
-      const valueParts: ValuePart[] = [];
+        const valueParts: ValuePart[] = [];
 
-      for (const part of parts) {
-        const type = TYPE_MAP[part.type];
-        if (!type) continue;
-        const last = valueParts[valueParts.length - 1];
-        // Merge consecutive numeric parts (e.g. "1" + "," + "234" + "." + "56" → "1,234.56")
-        if (type === "value" && last?.type === "value") {
-          last.value += part.value;
-        } else {
-          valueParts.push({ type, value: part.value });
+        for (const part of parts) {
+          const type = TYPE_MAP[part.type];
+          if (!type) continue;
+          const last = valueParts[valueParts.length - 1];
+          // Merge consecutive numeric parts (e.g. "1" + "," + "234" + "." + "56" → "1,234.56")
+          if (type === "value" && last?.type === "value") {
+            last.value += part.value;
+          } else {
+            valueParts.push({ type, value: part.value });
+          }
         }
+        return valueParts;
       }
-
-      return valueParts;
     }
 
     // default processing of numeric values

src/common/util/copy-clipboard.ts

@@ -1,3 +1,24 @@
+import { deepActiveElement } from "../dom/deep-active-element";
+
+const getClipboardFallbackRoot = (): HTMLElement => {
+  const activeElement = deepActiveElement();
+  if (activeElement instanceof HTMLElement) {
+    let root: Node = activeElement.getRootNode();
+    let host: HTMLElement | null = null;
+
+    while (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+      host = root.host;
+      root = root.host.getRootNode();
+    }
+
+    if (host) {
+      return host;
+    }
+  }
+
+  return document.body;
+};
+
 export const copyToClipboard = async (str, rootEl?: HTMLElement) => {
   if (navigator.clipboard) {
     try {
@@ -8,10 +29,15 @@ export const copyToClipboard = async (str, rootEl?: HTMLElement) => {
     }
   }
 
-  const root = rootEl ?? document.body;
+  const root = rootEl || getClipboardFallbackRoot();
 
   const el = document.createElement("textarea");
   el.value = str;
+  el.setAttribute("readonly", "");
+  el.style.position = "fixed";
+  el.style.top = "0";
+  el.style.left = "0";
+  el.style.opacity = "0";
   root.appendChild(el);
   el.select();
   document.execCommand("copy");

src/common/util/debounce.ts

@@ -1,9 +1,8 @@
-// From: https://davidwalsh.name/javascript-debounce-function
-
 // Returns a function, that, as long as it continues to be invoked, will not
 // be triggered. The function will be called after it stops being called for
 // N milliseconds. If `immediate` is passed, trigger the function on the
-// leading edge and on the trailing.
+// leading edge. The trailing edge only fires if there were additional calls
+// during the wait period.
 
 export const debounce = <T extends any[]>(
   func: (...args: T) => void,
@@ -11,20 +10,35 @@ export const debounce = <T extends any[]>(
   immediate = false
 ) => {
   let timeout: number | undefined;
+  let trailingArgs: T | undefined;
+
   const debouncedFunc = (...args: T): void => {
-    const later = () => {
-      timeout = undefined;
-      func(...args);
-    };
-    const callNow = immediate && !timeout;
+    const isLeading = immediate && !timeout;
+
+    if (timeout) {
+      trailingArgs = args;
+    }
     clearTimeout(timeout);
-    timeout = window.setTimeout(later, wait);
-    if (callNow) {
+
+    timeout = window.setTimeout(() => {
+      timeout = undefined;
+      if (trailingArgs) {
+        func(...trailingArgs);
+        trailingArgs = undefined;
+      } else if (!immediate) {
+        func(...args);
+      }
+    }, wait);
+
+    if (isLeading) {
       func(...args);
     }
   };
+
   debouncedFunc.cancel = () => {
     clearTimeout(timeout);
+    trailingArgs = undefined;
   };
+
   return debouncedFunc;
 };

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

@@ -877,10 +877,20 @@ export class HaChartBase extends LitElement {
           };
         }
         if (s.sampling === "minmax") {
-          const minX =
-            xAxis?.min && typeof xAxis.min === "number" ? xAxis.min : undefined;
-          const maxX =
-            xAxis?.max && typeof xAxis.max === "number" ? xAxis.max : undefined;
+          const minX = xAxis?.min
+            ? xAxis.min instanceof Date
+              ? xAxis.min.getTime()
+              : typeof xAxis.min === "number"
+                ? xAxis.min
+                : undefined
+            : undefined;
+          const maxX = xAxis?.max
+            ? xAxis.max instanceof Date
+              ? xAxis.max.getTime()
+              : typeof xAxis.max === "number"
+                ? xAxis.max
+                : undefined
+            : undefined;
           return {
             ...s,
             sampling: undefined,

src/components/chart/statistics-chart.ts

@@ -507,7 +507,6 @@ export class StatisticsChart extends LitElement {
             id: `${statistic_id}-${type}`,
             type: this.chartType,
             smooth: this.chartType === "line" ? 0.4 : false,
-            smoothMonotone: "x",
             cursor: "default",
             data: [],
             name: name
@@ -640,11 +639,12 @@ export class StatisticsChart extends LitElement {
             ) {
               // Then push the current state at now
               statTypes.forEach((type, i) => {
-                const val: (number | null)[] = [];
                 if (type === "sum" || type === "change") {
-                  // Skip cumulative types - need special calculation
-                  val.push(null);
-                } else if (
+                  // Skip cumulative types - need special calculation.
+                  return;
+                }
+                const val: (number | null)[] = [];
+                if (
                   type === bandTop &&
                   this.chartType === "line" &&
                   drawBands &&

src/components/data-table/ha-data-table.ts

@@ -118,8 +118,6 @@ export class HaDataTable extends LitElement {
 
   @property({ type: Boolean }) public clickable = false;
 
-  @property({ attribute: "has-fab", type: Boolean }) public hasFab = false;
-
   /**
    * Add an extra row at the bottom of the data table
    * @type {TemplateResult}
@@ -519,7 +517,6 @@ export class HaDataTable extends LitElement {
                     this._filteredData,
                     localize,
                     this.appendRow,
-                    this.hasFab,
                     this.groupColumn,
                     this.groupOrder,
                     this._collapsedGroups,
@@ -716,14 +713,13 @@ export class HaDataTable extends LitElement {
       data: DataTableRowData[],
       localize: LocalizeFunc,
       appendRow,
-      hasFab: boolean,
       groupColumn: string | undefined,
       groupOrder: string[] | undefined,
       collapsedGroups: string[],
       sortColumn: string | undefined,
       sortDirection: SortingDirection
     ) => {
-      if (appendRow || hasFab || groupColumn) {
+      if (appendRow || groupColumn) {
         let items = [...data];
 
         if (groupColumn) {
@@ -813,13 +809,11 @@ export class HaDataTable extends LitElement {
           items.push({ append: true, selectable: false, content: appendRow });
         }
 
-        if (hasFab) {
-          items.push({ empty: true });
-        }
+        items.push({ empty: true });
 
         return items;
       }
-      return data;
+      return [...data, { empty: true }];
     }
   );
 
@@ -871,7 +865,6 @@ export class HaDataTable extends LitElement {
       this._filteredData,
       this.localizeFunc || this.hass.localize,
       this.appendRow,
-      this.hasFab,
       this.groupColumn,
       this.groupOrder,
       this._collapsedGroups,
@@ -1089,11 +1082,8 @@ export class HaDataTable extends LitElement {
         }
 
         .mdc-data-table__row.empty-row {
-          height: max(
-            var(
-              --data-table-empty-row-height,
-              var(--data-table-row-height, 52px)
-            ),
+          height: var(
+            --data-table-empty-row-height,
             var(--safe-area-inset-bottom, 0px)
           );
         }

src/components/device/ha-device-automation-picker.ts

@@ -36,7 +36,7 @@ export abstract class HaDeviceAutomationPicker<
 
   @state()
   @consume({ context: fullEntitiesContext, subscribe: true })
-  _entityReg!: EntityRegistryEntry[];
+  _entityReg: EntityRegistryEntry[] = [];
 
   protected get NO_AUTOMATION_TEXT() {
     return this.hass.localize(

src/components/device/ha-device-picker.ts

@@ -173,11 +173,14 @@ export class HaDevicePicker extends LitElement {
               alt=""
               crossorigin="anonymous"
               referrerpolicy="no-referrer"
-              src=${brandsUrl({
-                domain: configEntry.domain,
-                type: "icon",
-                darkOptimized: this.hass.themes?.darkMode,
-              })}
+              src=${brandsUrl(
+                {
+                  domain: configEntry.domain,
+                  type: "icon",
+                  darkOptimized: this.hass.themes?.darkMode,
+                },
+                this.hass.auth.data.hassUrl
+              )}
             />`
           : nothing}
         <span slot="headline">${primary}</span>
@@ -195,11 +198,14 @@ export class HaDevicePicker extends LitElement {
               alt=""
               crossorigin="anonymous"
               referrerpolicy="no-referrer"
-              src=${brandsUrl({
-                domain: item.domain,
-                type: "icon",
-                darkOptimized: this.hass.themes.darkMode,
-              })}
+              src=${brandsUrl(
+                {
+                  domain: item.domain,
+                  type: "icon",
+                  darkOptimized: this.hass.themes.darkMode,
+                },
+                this.hass.auth.data.hassUrl
+              )}
             />
           `
         : nothing}

src/components/entity/state-badge.ts

@@ -138,10 +138,10 @@ export class StateBadge extends LitElement {
           let imageUrl =
             stateObj.attributes.entity_picture_local ||
             stateObj.attributes.entity_picture;
-          imageUrl = addBrandsAuth(imageUrl);
           if (this.hass) {
             imageUrl = this.hass.hassUrl(imageUrl);
           }
+          imageUrl = addBrandsAuth(imageUrl, this.hass?.auth.data.hassUrl);
           if (domain === "camera") {
             imageUrl = cameraUrlWithWidthHeight(imageUrl, 80, 80);
           }

src/components/ha-adaptive-dialog.ts

@@ -31,9 +31,18 @@ type DialogSheetMode = "dialog" | "bottom-sheet";
  * @slot footer - Dialog/sheet footer content.
  *
  * @cssprop --ha-dialog-surface-background - Dialog/sheet background color.
+ * @cssprop --ha-dialog-surface-backdrop-filter - Dialog/sheet backdrop filter.
+ * @cssprop --dialog-box-shadow - Dialog box shadow (dialog mode only).
  * @cssprop --ha-dialog-border-radius - Border radius of the dialog surface (dialog mode only).
  * @cssprop --ha-dialog-show-duration - Show animation duration (dialog mode only).
  * @cssprop --ha-dialog-hide-duration - Hide animation duration (dialog mode only).
+ * @cssprop --ha-dialog-scrim-backdrop-filter - Dialog/sheet scrim backdrop filter.
+ * @cssprop --dialog-backdrop-filter - Dialog/sheet scrim backdrop filter (legacy).
+ * @cssprop --mdc-dialog-scrim-color - Dialog/sheet scrim color (legacy).
+ * @cssprop --ha-bottom-sheet-surface-background - Bottom sheet background color (sheet mode only).
+ * @cssprop --ha-bottom-sheet-surface-backdrop-filter - Bottom sheet backdrop filter (sheet mode only).
+ * @cssprop --ha-bottom-sheet-scrim-backdrop-filter - Bottom sheet scrim backdrop filter (sheet mode only).
+ * @cssprop --ha-bottom-sheet-scrim-color - Bottom sheet scrim color (sheet mode only).
  *
  * @attr {boolean} open - Controls the dialog/sheet open state.
  * @attr {("alert"|"standard")} type - Dialog type (dialog mode only). Defaults to "standard".

src/components/ha-areas-picker.ts

@@ -1,3 +1,4 @@
+import { mdiDragHorizontalVariant } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -6,6 +7,7 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-area-picker";
+import "./ha-sortable";
 
 @customElement("ha-areas-picker")
 export class HaAreasPicker extends SubscribeMixin(LitElement) {
@@ -62,6 +64,8 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public required = false;
 
+  @property({ type: Boolean }) public reorder = false;
+
   protected render() {
     if (!this.hass) {
       return nothing;
@@ -69,26 +73,42 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
 
     const currentAreas = this._currentAreas;
     return html`
-      ${currentAreas.map(
-        (area) => html`
-          <div>
-            <ha-area-picker
-              .curValue=${area}
-              .noAdd=${this.noAdd}
-              .hass=${this.hass}
-              .value=${area}
-              .label=${this.pickedAreaLabel}
-              .includeDomains=${this.includeDomains}
-              .excludeDomains=${this.excludeDomains}
-              .includeDeviceClasses=${this.includeDeviceClasses}
-              .deviceFilter=${this.deviceFilter}
-              .entityFilter=${this.entityFilter}
-              .disabled=${this.disabled}
-              @value-changed=${this._areaChanged}
-            ></ha-area-picker>
-          </div>
-        `
-      )}
+      <ha-sortable
+        .disabled=${!this.reorder || this.disabled}
+        handle-selector=".area-handle"
+        @item-moved=${this._areaMoved}
+      >
+        <div class="list">
+          ${currentAreas.map(
+            (area) => html`
+              <div class="area">
+                <ha-area-picker
+                  .curValue=${area}
+                  .noAdd=${this.noAdd}
+                  .hass=${this.hass}
+                  .value=${area}
+                  .label=${this.pickedAreaLabel}
+                  .includeDomains=${this.includeDomains}
+                  .excludeDomains=${this.excludeDomains}
+                  .includeDeviceClasses=${this.includeDeviceClasses}
+                  .deviceFilter=${this.deviceFilter}
+                  .entityFilter=${this.entityFilter}
+                  .disabled=${this.disabled}
+                  @value-changed=${this._areaChanged}
+                ></ha-area-picker>
+                ${this.reorder
+                  ? html`
+                      <ha-svg-icon
+                        class="area-handle"
+                        .path=${mdiDragHorizontalVariant}
+                      ></ha-svg-icon>
+                    `
+                  : nothing}
+              </div>
+            `
+          )}
+        </div>
+      </ha-sortable>
       <div>
         <ha-area-picker
           .noAdd=${this.noAdd}
@@ -110,6 +130,17 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
     `;
   }
 
+  private _areaMoved(e: CustomEvent) {
+    e.stopPropagation();
+    const { oldIndex, newIndex } = e.detail;
+    const currentAreas = this._currentAreas;
+    const movedArea = currentAreas[oldIndex];
+    const newAreas = [...currentAreas];
+    newAreas.splice(oldIndex, 1);
+    newAreas.splice(newIndex, 0, movedArea);
+    this._updateAreas(newAreas);
+  }
+
   private get _currentAreas(): string[] {
     return this.value || [];
   }
@@ -159,6 +190,19 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
     div {
       margin-top: 8px;
     }
+    .area {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    .area ha-area-picker {
+      flex: 1;
+    }
+    .area-handle {
+      padding: 8px;
+      cursor: move; /* fallback if grab cursor is unsupported */
+      cursor: grab;
+    }
   `;
 }
 

src/components/ha-assist-chat.ts

@@ -672,11 +672,11 @@ export class HaAssistChat extends LitElement {
           --markdown-code-background-color: var(--primary-background-color);
           --markdown-code-text-color: var(--primary-text-color);
           --markdown-list-indent: 1.15em;
-          &:not(:has(ha-markdown-element)) {
-            min-height: 1lh;
-            min-width: 1lh;
-            flex-shrink: 0;
-          }
+        }
+        ha-markdown:not(:has(ha-markdown-element)) {
+          min-height: 1lh;
+          min-width: 1lh;
+          flex-shrink: 0;
         }
         .bouncer {
           width: 48px;

src/components/ha-base-time-input.ts

@@ -1,7 +1,7 @@
 import { mdiClose } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, queryAll } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-icon-button";
@@ -133,6 +133,17 @@ export class HaBaseTimeInput extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public clearable?: boolean;
 
+  @queryAll("ha-textfield") private _inputs?: HaTextField[];
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  public reportValidity(): boolean {
+    return this._inputs?.every((input) => input.reportValidity()) ?? true;
+  }
+
   protected render(): TemplateResult {
     return html`
       ${this.label
@@ -349,7 +360,11 @@ export class HaBaseTimeInput extends LitElement {
       text-align: center;
       --mdc-shape-small: 0;
       --text-field-appearance: none;
-      --text-field-padding: 0 4px;
+      --text-field-padding-top: 0;
+      --text-field-padding-bottom: 0;
+      --text-field-padding-start: 4px;
+      --text-field-padding-end: 4px;
+
       --text-field-suffix-padding-left: 2px;
       --text-field-suffix-padding-right: 0;
       --text-field-text-align: center;

src/components/ha-bottom-sheet.ts

@@ -25,6 +25,27 @@ const SWIPE_LOCKED_COMPONENTS = new Set([
 
 const SWIPE_LOCKED_CLASSES = new Set(["volume-slider-container", "forecast"]);
 
+/**
+ * Home Assistant bottom sheet component.
+ *
+ * @element ha-bottom-sheet
+ * @extends {LitElement}
+ *
+ * @cssprop --ha-bottom-sheet-height - Preferred height of the bottom sheet.
+ * @cssprop --ha-bottom-sheet-max-height - Maximum height of the bottom sheet.
+ * @cssprop --ha-bottom-sheet-max-width - Maximum width of the bottom sheet.
+ * @cssprop --ha-bottom-sheet-border-radius - Top border radius of the bottom sheet.
+ * @cssprop --ha-bottom-sheet-surface-background - Bottom sheet background color.
+ * @cssprop --ha-bottom-sheet-surface-backdrop-filter - Bottom sheet surface backdrop filter.
+ * @cssprop --ha-bottom-sheet-scrim-backdrop-filter - Bottom sheet scrim backdrop filter.
+ * @cssprop --ha-bottom-sheet-scrim-color - Bottom sheet scrim color.
+ *
+ * @cssprop --ha-dialog-surface-background - Bottom sheet background color fallback.
+ * @cssprop --ha-dialog-surface-backdrop-filter - Bottom sheet surface backdrop filter fallback.
+ * @cssprop --ha-dialog-scrim-backdrop-filter - Bottom sheet scrim backdrop filter fallback.
+ * @cssprop --dialog-backdrop-filter - Bottom sheet scrim backdrop filter legacy fallback.
+ * @cssprop --mdc-dialog-scrim-color - Bottom sheet scrim color legacy fallback.
+ */
 @customElement("ha-bottom-sheet")
 export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
   @property({ attribute: false }) public hass?: HomeAssistant;
@@ -69,7 +90,7 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
     await this.updateComplete;
 
     requestAnimationFrame(() => {
-      if (this.hass && isIosApp(this.hass)) {
+      if (this.hass && isIosApp(this.hass.auth.external)) {
         const element = this.renderRoot.querySelector("[autofocus]");
         if (element !== null) {
           if (!element.id) {
@@ -141,6 +162,9 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
   private _handleKeyDown = (ev: KeyboardEvent) => {
     if (ev.key === "Escape") {
       this._escapePressed = true;
+      if (this.preventScrimClose) {
+        ev.preventDefault();
+      }
       ev.stopPropagation();
       (ev.currentTarget as WaDrawer).open = false;
     }
@@ -377,11 +401,50 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
           --hide-duration: ${BOTTOM_SHEET_ANIMATION_DURATION_MS}ms;
         }
         wa-drawer::part(dialog) {
-          max-height: var(--ha-bottom-sheet-max-height, 90vh);
+          max-height: min(
+            var(--ha-bottom-sheet-max-height, 90vh),
+            calc(100vh - max(var(--safe-area-inset-top), 48px))
+          );
+          max-height: min(
+            var(--ha-bottom-sheet-max-height, 90dvh),
+            calc(100dvh - max(var(--safe-area-inset-top), 48px))
+          );
           align-items: center;
           transform: var(--dialog-transform);
           transition: var(--dialog-transition);
         }
+        @media (prefers-reduced-motion: reduce) {
+          wa-drawer {
+            --wa-color-surface-raised: transparent;
+            --spacing: 0;
+            --size: var(--ha-bottom-sheet-height, auto);
+            --show-duration: 1ms;
+            --hide-duration: 1ms;
+          }
+          wa-drawer::part(dialog) {
+            transition: 1ms;
+          }
+        }
+        wa-drawer::part(dialog)::backdrop {
+          -webkit-backdrop-filter: var(
+            --ha-bottom-sheet-scrim-backdrop-filter,
+            var(
+              --ha-dialog-scrim-backdrop-filter,
+              var(--dialog-backdrop-filter, none)
+            )
+          );
+          backdrop-filter: var(
+            --ha-bottom-sheet-scrim-backdrop-filter,
+            var(
+              --ha-dialog-scrim-backdrop-filter,
+              var(--dialog-backdrop-filter, none)
+            )
+          );
+          background-color: var(
+            --ha-bottom-sheet-scrim-color,
+            var(--mdc-dialog-scrim-color, none)
+          );
+        }
         wa-drawer::part(body) {
           max-width: var(--ha-bottom-sheet-max-width);
           width: 100%;
@@ -396,7 +459,18 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
           );
           background-color: var(
             --ha-bottom-sheet-surface-background,
-            var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
+            var(
+              --ha-dialog-surface-background,
+              var(--card-background-color, var(--ha-color-surface-default))
+            )
+          );
+          -webkit-backdrop-filter: var(
+            --ha-bottom-sheet-surface-backdrop-filter,
+            var(--ha-dialog-surface-backdrop-filter, none)
+          );
+          backdrop-filter: var(
+            --ha-bottom-sheet-surface-backdrop-filter,
+            var(--ha-dialog-surface-backdrop-filter, none)
           );
           padding: var(
             --ha-bottom-sheet-padding,

src/components/ha-button.ts

@@ -58,7 +58,8 @@ export class HaButton extends Button {
           font-size: var(--ha-font-size-m);
           line-height: 1;
 
-          transition: background-color 0.15s ease-in-out;
+          transition: background-color var(--ha-animation-duration-fast)
+            ease-out;
           text-wrap: wrap;
         }
 
@@ -245,7 +246,7 @@ export class HaButton extends Button {
         }
 
         .label {
-          overflow: hidden;
+          overflow: var(--ha-button-label-overflow, hidden);
           text-overflow: ellipsis;
           padding: var(--ha-space-1) 0;
         }

src/components/ha-code-editor.ts

@@ -1,3 +1,5 @@
+import "@home-assistant/webawesome/dist/components/popup/popup";
+import type WaPopup from "@home-assistant/webawesome/dist/components/popup/popup";
 import type {
   Completion,
   CompletionContext,
@@ -84,6 +86,9 @@ export class HaCodeEditor extends ReactiveElement {
   @property({ type: Boolean, attribute: "disable-fullscreen" })
   public disableFullscreen = false;
 
+  @property({ type: Boolean, attribute: "in-dialog" })
+  public inDialog = false;
+
   @property({ type: Boolean, attribute: "has-toolbar" })
   public hasToolbar = true;
 
@@ -107,6 +112,18 @@ export class HaCodeEditor extends ReactiveElement {
   // eslint-disable-next-line @typescript-eslint/consistent-type-imports
   private _loadedCodeMirror?: typeof import("../resources/codemirror");
 
+  private _completionInfoPopover?: WaPopup;
+
+  private _completionInfoContainer?: HTMLDivElement;
+
+  private _completionInfoDestroy?: () => void;
+
+  private _completionInfoRequest = 0;
+
+  private _completionInfoKey?: string;
+
+  private _completionInfoFrame?: number;
+
   private _editorToolbar?: HaIconButtonToolbar;
 
   private _iconList?: Completion[];
@@ -132,6 +149,7 @@ export class HaCodeEditor extends ReactiveElement {
 
   public connectedCallback() {
     super.connectedCallback();
+    this.classList.toggle("in-dialog", this.inDialog);
     // Force update on reconnection so editor is recreated
     if (this.hasUpdated) {
       this.requestUpdate();
@@ -150,6 +168,15 @@ export class HaCodeEditor extends ReactiveElement {
   }
 
   public disconnectedCallback() {
+    fireEvent(this, "dialog-set-fullscreen", false);
+    this._clearCompletionInfo();
+    if (this._completionInfoFrame !== undefined) {
+      cancelAnimationFrame(this._completionInfoFrame);
+      this._completionInfoFrame = undefined;
+    }
+    this._completionInfoPopover?.remove();
+    this._completionInfoPopover = undefined;
+    this._completionInfoContainer = undefined;
     super.disconnectedCallback();
     this.removeEventListener("keydown", stopPropagation);
     this.removeEventListener("keydown", this._handleKeyDown);
@@ -216,6 +243,9 @@ export class HaCodeEditor extends ReactiveElement {
     if (changedProps.has("error")) {
       this.classList.toggle("error-state", this.error);
     }
+    if (changedProps.has("inDialog")) {
+      this.classList.toggle("in-dialog", this.inDialog);
+    }
     if (changedProps.has("_isFullscreen")) {
       this.classList.toggle("fullscreen", this._isFullscreen);
       this._updateToolbarButtons();
@@ -280,6 +310,9 @@ export class HaCodeEditor extends ReactiveElement {
       this._loadedCodeMirror.foldingCompartment.of(
         this._getFoldingExtensions()
       ),
+      this._loadedCodeMirror.tooltips({
+        position: "absolute",
+      }),
       ...(this.placeholder ? [placeholder(this.placeholder)] : []),
     ];
 
@@ -434,10 +467,19 @@ export class HaCodeEditor extends ReactiveElement {
   private _updateFullscreenState(
     fullscreen: boolean = this._isFullscreen
   ): boolean {
+    const previousFullscreen = this._isFullscreen;
+
+    this.classList.toggle("in-dialog", this.inDialog);
+
     // Update the current fullscreen state based on selected value. If fullscreen
     // is disabled, or we have no toolbar, ensure we are not in fullscreen mode.
     this._isFullscreen =
       fullscreen && !this.disableFullscreen && this.hasToolbar;
+
+    if (previousFullscreen !== this._isFullscreen) {
+      fireEvent(this, "dialog-set-fullscreen", this._isFullscreen);
+    }
+
     // Return whether successfully in requested state
     return this._isFullscreen === fullscreen;
   }
@@ -578,6 +620,157 @@ export class HaCodeEditor extends ReactiveElement {
     return completionInfo;
   };
 
+  private _getCompletionInfo = (
+    completion: Completion
+  ): CompletionInfo | Promise<CompletionInfo> | null => {
+    if (this.hass && completion.label in this.hass.states) {
+      return this._renderInfo(completion);
+    }
+
+    if (completion.label.startsWith("mdi:")) {
+      return renderIcon(completion);
+    }
+
+    return null;
+  };
+
+  private _ensureCompletionInfoPopover(): WaPopup {
+    if (!this._completionInfoPopover) {
+      this._completionInfoPopover = document.createElement(
+        "wa-popup"
+      ) as WaPopup;
+      this._completionInfoPopover.classList.add("completion-info-popover");
+      this._completionInfoPopover.placement = "right-start";
+      this._completionInfoPopover.distance = 4;
+      this._completionInfoPopover.flip = true;
+      this._completionInfoPopover.flipFallbackPlacements =
+        "left-start bottom-start top-start";
+      this._completionInfoPopover.shift = true;
+      this._completionInfoPopover.shiftPadding = 8;
+      this._completionInfoPopover.autoSize = "both";
+      this._completionInfoPopover.autoSizePadding = 8;
+
+      this._completionInfoContainer = document.createElement("div");
+      this._completionInfoPopover.appendChild(this._completionInfoContainer);
+      this.renderRoot.appendChild(this._completionInfoPopover);
+    }
+
+    return this._completionInfoPopover;
+  }
+
+  private _clearCompletionInfo() {
+    this._completionInfoRequest += 1;
+    this._completionInfoKey = undefined;
+    this._completionInfoDestroy?.();
+    this._completionInfoDestroy = undefined;
+    this._completionInfoContainer?.replaceChildren();
+
+    if (this._completionInfoPopover?.active) {
+      this._completionInfoPopover.active = false;
+    }
+  }
+
+  private _renderCompletionInfoContent(info: CompletionInfo) {
+    this._completionInfoDestroy?.();
+    this._completionInfoDestroy = undefined;
+
+    if (!this._completionInfoContainer) {
+      return;
+    }
+
+    if (info === null) {
+      this._completionInfoContainer.replaceChildren();
+      return;
+    }
+
+    if ("nodeType" in info) {
+      this._completionInfoContainer.replaceChildren(info);
+      return;
+    }
+
+    this._completionInfoContainer.replaceChildren(info.dom);
+    this._completionInfoDestroy = info.destroy;
+  }
+
+  private _syncCompletionInfoPopover = () => {
+    if (this._completionInfoFrame !== undefined) {
+      cancelAnimationFrame(this._completionInfoFrame);
+    }
+
+    this._completionInfoFrame = requestAnimationFrame(() => {
+      this._completionInfoFrame = undefined;
+      this._syncCompletionInfoPopoverNow();
+    });
+  };
+
+  private _syncCompletionInfoPopoverNow = () => {
+    if (!this.codemirror || !this._loadedCodeMirror) {
+      return;
+    }
+
+    if (window.matchMedia("(max-width: 600px)").matches) {
+      this._clearCompletionInfo();
+      return;
+    }
+
+    const completion = this._loadedCodeMirror.selectedCompletion(
+      this.codemirror.state
+    );
+    const selectedOption = this.codemirror.dom.querySelector(
+      ".cm-tooltip-autocomplete li[aria-selected]"
+    ) as HTMLElement | null;
+
+    if (!completion || !selectedOption) {
+      this._clearCompletionInfo();
+      return;
+    }
+
+    const infoResult = this._getCompletionInfo(completion);
+
+    if (!infoResult) {
+      this._clearCompletionInfo();
+      return;
+    }
+
+    const requestId = ++this._completionInfoRequest;
+    const infoKey = completion.label;
+    const popover = this._ensureCompletionInfoPopover();
+    popover.anchor = selectedOption;
+
+    const showPopover = async (info: CompletionInfo) => {
+      if (requestId !== this._completionInfoRequest) {
+        if (info && typeof info === "object" && "destroy" in info) {
+          info.destroy?.();
+        }
+        return;
+      }
+
+      if (infoKey !== this._completionInfoKey) {
+        this._renderCompletionInfoContent(info);
+        this._completionInfoKey = infoKey;
+      }
+
+      await popover.updateComplete;
+      popover.active = true;
+      popover.reposition();
+    };
+
+    if ("then" in infoResult) {
+      infoResult.then(showPopover).catch(() => {
+        if (requestId === this._completionInfoRequest) {
+          this._clearCompletionInfo();
+        }
+      });
+      return;
+    }
+
+    showPopover(infoResult).catch(() => {
+      if (requestId === this._completionInfoRequest) {
+        this._clearCompletionInfo();
+      }
+    });
+  };
+
   private _getStates = memoizeOne((states: HassEntities): Completion[] => {
     if (!states) {
       return [];
@@ -587,7 +780,6 @@ export class HaCodeEditor extends ReactiveElement {
       type: "variable",
       label: key,
       detail: states[key].attributes.friendly_name,
-      info: this._renderInfo,
     }));
 
     return options;
@@ -761,7 +953,6 @@ export class HaCodeEditor extends ReactiveElement {
         type: "variable",
         label: `mdi:${icon.name}`,
         detail: icon.keywords.join(", "),
-        info: renderIcon,
       }));
     }
 
@@ -789,6 +980,7 @@ export class HaCodeEditor extends ReactiveElement {
   private _onUpdate = (update: ViewUpdate): void => {
     this._canUndo = !this.readOnly && undoDepth(update.state) > 0;
     this._canRedo = !this.readOnly && redoDepth(update.state) > 0;
+    this._syncCompletionInfoPopover();
     if (!update.docChanged) {
       return;
     }
@@ -846,10 +1038,10 @@ export class HaCodeEditor extends ReactiveElement {
 
         :host(.fullscreen) {
           position: fixed !important;
-          top: calc(var(--header-height, 56px) + 8px) !important;
-          left: 8px !important;
-          right: 8px !important;
-          bottom: 8px !important;
+          top: calc(var(--header-height, 56px) + var(--ha-space-2)) !important;
+          left: var(--ha-space-2) !important;
+          right: var(--ha-space-2) !important;
+          bottom: var(--ha-space-2) !important;
           z-index: 6;
           border-radius: var(--ha-border-radius-lg) !important;
           box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
@@ -867,6 +1059,17 @@ export class HaCodeEditor extends ReactiveElement {
           display: block !important;
         }
 
+        :host(.in-dialog.fullscreen) {
+          position: absolute !important;
+          top: 0 !important;
+          left: 0 !important;
+          right: 0 !important;
+          bottom: 0 !important;
+          border-radius: 0 !important;
+          box-shadow: none !important;
+          padding: 0 !important;
+        }
+
         :host(.hasToolbar) .cm-editor {
           padding-top: var(--code-editor-toolbar-height);
         }
@@ -897,9 +1100,31 @@ export class HaCodeEditor extends ReactiveElement {
           padding: 8px;
         }
 
+        wa-popup.completion-info-popover {
+          --auto-size-available-width: min(
+            420px,
+            calc(var(--safe-width) - var(--ha-space-8))
+          );
+        }
+
+        wa-popup.completion-info-popover::part(popup) {
+          padding: 0;
+          color: var(--primary-text-color);
+          background-color: var(
+            --code-editor-background-color,
+            var(--card-background-color)
+          );
+          border: 1px solid var(--divider-color);
+          border-radius: var(--mdc-shape-medium, 4px);
+          box-shadow:
+            0px 5px 5px -3px rgb(0 0 0 / 20%),
+            0px 8px 10px 1px rgb(0 0 0 / 14%),
+            0px 3px 14px 2px rgb(0 0 0 / 12%);
+        }
+
         /* Hide completion info on narrow screens */
         @media (max-width: 600px) {
-          .cm-completionInfo,
+          wa-popup.completion-info-popover,
           .completion-info {
             display: none;
           }

src/components/ha-color-picker.ts

@@ -1,20 +1,20 @@
+import { consume, type ContextType } from "@lit/context";
 import { mdiInvertColorsOff, mdiPalette } from "@mdi/js";
 import { html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeKeys } from "../common/translations/localize";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
+import { localizeContext } from "../data/context";
+import type { ValueChangedEvent } from "../types";
 import "./ha-generic-picker";
 import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 import type { PickerValueRenderer } from "./ha-picker-field";
 
 @customElement("ha-color-picker")
 export class HaColorPicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public label?: string;
 
   @property() public helper?: string;
@@ -34,12 +34,15 @@ export class HaColorPicker extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
+  @state()
+  @consume({ context: localizeContext, subscribe: true })
+  private localize!: ContextType<typeof localizeContext>;
+
   render() {
     const effectiveValue = this.value ?? this.defaultColor ?? "";
 
     return html`
       <ha-generic-picker
-        .hass=${this.hass}
         .disabled=${this.disabled}
         .required=${this.required}
         .hideClearIcon=${!this.value && !!this.defaultColor}
@@ -50,7 +53,7 @@ export class HaColorPicker extends LitElement {
         .rowRenderer=${this._rowRenderer}
         .valueRenderer=${this._valueRenderer}
         @value-changed=${this._valueChanged}
-        .notFoundLabel=${this.hass.localize(
+        .notFoundLabel=${this.localize?.(
           "ui.components.color-picker.no_colors_found"
         )}
         .getAdditionalItems=${this._getAdditionalItems}
@@ -78,7 +81,9 @@ export class HaColorPicker extends LitElement {
     return [
       {
         id: searchString,
-        primary: this.hass.localize("ui.components.color-picker.custom_color"),
+        primary:
+          this.localize?.("ui.components.color-picker.custom_color") ||
+          "Custom color",
         secondary: searchString,
       },
     ];
@@ -101,16 +106,15 @@ export class HaColorPicker extends LitElement {
     ): PickerComboBoxItem[] => {
       const items: PickerComboBoxItem[] = [];
 
-      const defaultSuffix = this.hass.localize(
-        "ui.components.color-picker.default"
-      );
+      const defaultSuffix =
+        this.localize?.("ui.components.color-picker.default") || "Default";
 
       const addDefaultSuffix = (label: string, isDefault: boolean) =>
         isDefault && defaultSuffix ? `${label} (${defaultSuffix})` : label;
 
       if (includeNone) {
         const noneLabel =
-          this.hass.localize("ui.components.color-picker.none") || "None";
+          this.localize?.("ui.components.color-picker.none") || "None";
         items.push({
           id: "none",
           primary: addDefaultSuffix(noneLabel, defaultColor === "none"),
@@ -120,7 +124,7 @@ export class HaColorPicker extends LitElement {
 
       if (includeState) {
         const stateLabel =
-          this.hass.localize("ui.components.color-picker.state") || "State";
+          this.localize?.("ui.components.color-picker.state") || "State";
         items.push({
           id: "state",
           primary: addDefaultSuffix(stateLabel, defaultColor === "state"),
@@ -130,7 +134,7 @@ export class HaColorPicker extends LitElement {
 
       Array.from(THEME_COLORS).forEach((color) => {
         const themeLabel =
-          this.hass.localize(
+          this.localize?.(
             `ui.components.color-picker.colors.${color}` as LocalizeKeys
           ) || color;
         items.push({
@@ -184,7 +188,7 @@ export class HaColorPicker extends LitElement {
       return html`
         <ha-svg-icon slot="start" .path=${mdiInvertColorsOff}></ha-svg-icon>
         <span slot="headline">
-          ${this.hass.localize("ui.components.color-picker.none")}
+          ${this.localize?.("ui.components.color-picker.none") || "None"}
         </span>
       `;
     }
@@ -192,7 +196,7 @@ export class HaColorPicker extends LitElement {
       return html`
         <ha-svg-icon slot="start" .path=${mdiPalette}></ha-svg-icon>
         <span slot="headline">
-          ${this.hass.localize("ui.components.color-picker.state")}
+          ${this.localize?.("ui.components.color-picker.state") || "State"}
         </span>
       `;
     }
@@ -200,7 +204,7 @@ export class HaColorPicker extends LitElement {
     return html`
       <span slot="start">${this._renderColorCircle(value)}</span>
       <span slot="headline">
-        ${this.hass.localize(
+        ${this.localize?.(
           `ui.components.color-picker.colors.${value}` as LocalizeKeys
         ) || value}
       </span>

src/components/ha-control-button.ts

@@ -33,6 +33,7 @@ export class HaControlButton extends LitElement {
       --control-button-background-color: var(--disabled-color);
       --control-button-background-opacity: 0.2;
       --control-button-border-radius: var(--ha-border-radius-md);
+      --control-button-font-weight: var(--ha-font-weight-medium);
       --control-button-padding: 8px;
       --mdc-icon-size: 20px;
       --ha-ripple-color: var(--secondary-text-color);
@@ -59,7 +60,7 @@ export class HaControlButton extends LitElement {
       box-sizing: border-box;
       line-height: inherit;
       font-family: var(--ha-font-family-body);
-      font-weight: var(--ha-font-weight-medium);
+      font-weight: var(--control-button-font-weight);
       outline: none;
       overflow: hidden;
       background: none;

src/components/ha-control-select-menu.ts

@@ -1,11 +1,9 @@
 import { mdiMenuDown } from "@mdi/js";
-import type { HassEntity } from "home-assistant-js-websocket";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
-import type { HomeAssistant } from "../types";
-import "./ha-attribute-icon";
 import "./ha-dropdown";
 import "./ha-dropdown-item";
 import "./ha-icon";
@@ -16,17 +14,10 @@ export interface SelectOption {
   value: string;
   iconPath?: string;
   icon?: string;
-  attributeIcon?: {
-    stateObj: HassEntity;
-    attribute: string;
-    attributeValue?: string;
-  };
 }
 
 @customElement("ha-control-select-menu")
 export class HaControlSelectMenu extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ type: Boolean, attribute: "show-arrow" })
   public showArrow = false;
 
@@ -47,6 +38,9 @@ export class HaControlSelectMenu extends LitElement {
 
   @property({ attribute: false }) public options: SelectOption[] = [];
 
+  @property({ attribute: false })
+  public renderIcon?: (value: string) => TemplateResult<1> | typeof nothing;
+
   @query("button") private _triggerButton!: HTMLButtonElement;
 
   public override render() {
@@ -94,14 +88,8 @@ export class HaControlSelectMenu extends LitElement {
         ? html`<ha-svg-icon slot="icon" .path=${option.iconPath}></ha-svg-icon>`
         : option.icon
           ? html`<ha-icon slot="icon" .icon=${option.icon}></ha-icon>`
-          : option.attributeIcon
-            ? html`<ha-attribute-icon
-                slot="icon"
-                .hass=${this.hass}
-                .stateObj=${option.attributeIcon.stateObj}
-                .attribute=${option.attributeIcon.attribute}
-                .attributeValue=${option.attributeIcon.attributeValue}
-              ></ha-attribute-icon>`
+          : this.renderIcon
+            ? html`<span slot="icon">${this.renderIcon(option.value)}</span>`
             : nothing}
       ${option.label}</ha-dropdown-item
     >`;
@@ -119,24 +107,20 @@ export class HaControlSelectMenu extends LitElement {
   }
 
   private _renderIcon() {
-    const { iconPath, icon, attributeIcon } =
-      this.getValueObject(this.options, this.value) ?? {};
+    const value = this.getValueObject(this.options, this.value);
     const defaultIcon = this.querySelector("[slot='icon']");
 
     return html`
       <div class="icon">
-        ${iconPath
-          ? html`<ha-svg-icon slot="icon" .path=${iconPath}></ha-svg-icon>`
-          : icon
-            ? html`<ha-icon slot="icon" .icon=${icon}></ha-icon>`
-            : attributeIcon
-              ? html`<ha-attribute-icon
-                  slot="icon"
-                  .hass=${this.hass}
-                  .stateObj=${attributeIcon.stateObj}
-                  .attribute=${attributeIcon.attribute}
-                  .attributeValue=${attributeIcon.attributeValue}
-                ></ha-attribute-icon>`
+        ${value?.iconPath
+          ? html`<ha-svg-icon
+              slot="icon"
+              .path=${value.iconPath}
+            ></ha-svg-icon>`
+          : value?.icon
+            ? html`<ha-icon slot="icon" .icon=${value.icon}></ha-icon>`
+            : this.renderIcon && this.value
+              ? this.renderIcon(this.value)
               : defaultIcon
                 ? html`<slot name="icon"></slot>`
                 : nothing}
@@ -172,12 +156,12 @@ export class HaControlSelectMenu extends LitElement {
         font-size: var(--ha-font-size-m);
         line-height: 1.4;
         width: auto;
-        color: var(--primary-text-color);
         -webkit-tap-highlight-color: transparent;
       }
       .select-anchor {
         border: none;
         text-align: left;
+        color: var(--primary-text-color);
         height: var(--control-select-menu-height);
         padding: var(--control-select-menu-padding);
         overflow: hidden;

src/components/ha-date-input.ts

@@ -1,7 +1,7 @@
 import { mdiCalendar } from "@mdi/js";
 import type { HassConfig } from "home-assistant-js-websocket";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import { formatDateNumeric } from "../common/datetime/format_date";
 import { fireEvent } from "../common/dom/fire_event";
@@ -9,6 +9,7 @@ import { TimeZone } from "../data/translation";
 import type { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 import "./ha-textfield";
+import type { HaTextField } from "./ha-textfield";
 
 const loadDatePickerDialog = () => import("./ha-dialog-date-picker");
 
@@ -52,6 +53,12 @@ export class HaDateInput extends LitElement {
 
   @property({ attribute: "can-clear", type: Boolean }) public canClear = false;
 
+  @query("ha-textfield", true) private _input?: HaTextField;
+
+  public reportValidity(): boolean {
+    return this._input?.reportValidity() ?? true;
+  }
+
   render() {
     return html`<ha-textfield
       .label=${this.label}

src/components/ha-date-range-picker.ts

@@ -93,6 +93,8 @@ export class HaDateRangePicker extends LitElement {
     | "center"
     | "inline";
 
+  @state() private _calcedVerticalOpeningDirection?: "up" | "down";
+
   protected willUpdate(changedProps: PropertyValues) {
     if (
       (!this.hasUpdated && this.ranges === undefined) ||
@@ -134,7 +136,9 @@ export class HaDateRangePicker extends LitElement {
         opening-direction=${ifDefined(
           this.openingDirection || this._calcedOpeningDirection
         )}
-        opens-vertical=${ifDefined(this.verticalOpeningDirection)}
+        opens-vertical=${ifDefined(
+          this.verticalOpeningDirection || this._calcedVerticalOpeningDirection
+        )}
         first-day=${firstWeekdayIndex(this.hass.locale)}
         language=${this.hass.locale.language}
         @change=${this._handleChange}
@@ -328,17 +332,24 @@ export class HaDateRangePicker extends LitElement {
 
   private _handleClick() {
     // calculate opening direction if not set
-    if (!this._dateRangePicker.open && !this.openingDirection) {
-      const datePickerPosition = this.getBoundingClientRect().x;
-      let opens: "right" | "left" | "center" | "inline";
-      if (datePickerPosition > (2 * window.innerWidth) / 3) {
-        opens = "left";
-      } else if (datePickerPosition < window.innerWidth / 3) {
-        opens = "right";
-      } else {
-        opens = "center";
+    if (!this._dateRangePicker.open) {
+      if (!this.openingDirection) {
+        const datePickerPosition = this.getBoundingClientRect().x;
+        let opens: "right" | "left" | "center" | "inline";
+        if (datePickerPosition > (2 * window.innerWidth) / 3) {
+          opens = "left";
+        } else if (datePickerPosition < window.innerWidth / 3) {
+          opens = "right";
+        } else {
+          opens = "center";
+        }
+        this._calcedOpeningDirection = opens;
+      }
+      if (!this.verticalOpeningDirection) {
+        const rect = this.getBoundingClientRect();
+        this._calcedVerticalOpeningDirection =
+          rect.top > window.innerHeight / 2 ? "up" : "down";
       }
-      this._calcedOpeningDirection = opens;
     }
   }
 

src/components/ha-dialog.ts

@@ -1,5 +1,6 @@
 import "@home-assistant/webawesome/dist/components/dialog/dialog";
 import type WaDialog from "@home-assistant/webawesome/dist/components/dialog/dialog";
+import { consume, type ContextType } from "@lit/context";
 import { mdiClose } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import {
@@ -10,10 +11,12 @@ import {
   state,
 } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
+import type { HASSDomEvent } from "../common/dom/fire_event";
 import { fireEvent } from "../common/dom/fire_event";
+import { withViewTransition } from "../common/util/view-transition";
+import { authContext, localizeContext } from "../data/context";
 import { ScrollableFadeMixin } from "../mixins/scrollable-fade-mixin";
 import { haStyleScrollbar } from "../resources/styles";
-import type { HomeAssistant } from "../types";
 import { isIosApp } from "../util/is_ios";
 import "./ha-dialog-header";
 import "./ha-icon-button";
@@ -52,7 +55,12 @@ type DialogHideEvent = CustomEvent<{ source?: Element }>;
  * @cssprop --ha-dialog-show-duration - Show animation duration.
  * @cssprop --ha-dialog-hide-duration - Hide animation duration.
  * @cssprop --ha-dialog-surface-background - Dialog background color.
+ * @cssprop --ha-dialog-surface-backdrop-filter - Dialog backdrop filter.
+ * @cssprop --dialog-box-shadow - Dialog box shadow.
  * @cssprop --ha-dialog-border-radius - Border radius of the dialog surface.
+ * @cssprop --ha-dialog-scrim-backdrop-filter - Dialog scrim backdrop filter.
+ * @cssprop --dialog-backdrop-filter - Dialog scrim backdrop filter (legacy).
+ * @cssprop --mdc-dialog-scrim-color - Dialog scrim color (legacy).
  * @cssprop --dialog-surface-margin-top - Top margin for the dialog surface.
  *
  * @attr {boolean} open - Controls the dialog open state.
@@ -77,8 +85,6 @@ type DialogHideEvent = CustomEvent<{ source?: Element }>;
  */
 @customElement("ha-dialog")
 export class HaDialog extends ScrollableFadeMixin(LitElement) {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
   @property({ attribute: "aria-labelledby" })
   public ariaLabelledBy?: string;
 
@@ -117,11 +123,27 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
 
   @query(".body") public bodyContainer!: HTMLDivElement;
 
+  @state()
+  @consume({ context: localizeContext, subscribe: true })
+  private localize!: ContextType<typeof localizeContext>;
+
+  @state()
+  @consume({ context: authContext, subscribe: true })
+  private auth?: ContextType<typeof authContext>;
+
   @state()
   private _bodyScrolled = false;
 
   private _escapePressed = false;
 
+  public connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener(
+      "dialog-set-fullscreen",
+      this._handleFullscreenChanged as EventListener
+    );
+  }
+
   protected get scrollableElement(): HTMLElement | null {
     return this.bodyContainer;
   }
@@ -162,7 +184,7 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
                 <slot name="headerNavigationIcon" slot="navigationIcon">
                   <ha-icon-button
                     data-dialog="close"
-                    .label=${this.hass?.localize("ui.common.close") ?? "Close"}
+                    .label=${this.localize?.("ui.common.close") ?? "Close"}
                     .path=${mdiClose}
                   ></ha-icon-button>
                 </slot>
@@ -189,20 +211,23 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
     `;
   }
 
-  private _handleShow = async () => {
+  private _handleShow = async (ev: Event) => {
+    if (ev.eventPhase !== Event.AT_TARGET) {
+      return;
+    }
     this._open = true;
     fireEvent(this, "opened");
 
     await this.updateComplete;
 
     requestAnimationFrame(() => {
-      if (this.hass && isIosApp(this.hass)) {
+      if (this.auth?.external && isIosApp(this.auth.external)) {
         const element = this.querySelector("[autofocus]");
         if (element !== null) {
           if (!element.id) {
             element.id = "ha-dialog-autofocus";
           }
-          this.hass?.auth.external?.fireMessage({
+          this.auth.external.fireMessage({
             type: "focus_element",
             payload: {
               element_id: element.id,
@@ -215,22 +240,46 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
     });
   };
 
-  private _handleAfterShow = () => {
+  private _handleAfterShow = (ev: Event) => {
+    if (ev.eventPhase !== Event.AT_TARGET) {
+      return;
+    }
     fireEvent(this, "after-show");
   };
 
   private _handleAfterHide = (ev: DialogHideEvent) => {
     if (ev.eventPhase === Event.AT_TARGET) {
       this._open = false;
+      this._setFullscreen(false);
       fireEvent(this, "closed");
     }
   };
 
   public disconnectedCallback(): void {
+    this.removeEventListener(
+      "dialog-set-fullscreen",
+      this._handleFullscreenChanged as EventListener
+    );
+    this._setFullscreen(false);
     super.disconnectedCallback();
     this._open = false;
   }
 
+  private _handleFullscreenChanged(ev: HASSDomEvent<boolean>): void {
+    if (!this._open) {
+      this._setFullscreen(ev.detail);
+      return;
+    }
+
+    withViewTransition(() => {
+      this._setFullscreen(ev.detail);
+    });
+  }
+
+  private _setFullscreen(fullscreen: boolean): void {
+    this.toggleAttribute("fullscreen", fullscreen);
+  }
+
   @eventOptions({ passive: true })
   private _handleBodyScroll(ev: Event) {
     this._bodyScrolled = (ev.target as HTMLDivElement).scrollTop > 0;
@@ -239,6 +288,9 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
   private _handleKeyDown(ev: KeyboardEvent) {
     if (ev.key === "Escape") {
       this._escapePressed = true;
+      if (this.preventScrimClose) {
+        ev.preventDefault();
+      }
       ev.stopPropagation();
       (ev.currentTarget as WaDialog).open = false;
     }
@@ -268,10 +320,6 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
           --spacing: var(--dialog-content-padding, var(--ha-space-6));
           --show-duration: var(--ha-dialog-show-duration, 200ms);
           --hide-duration: var(--ha-dialog-hide-duration, 200ms);
-          --ha-dialog-surface-background: var(
-            --card-background-color,
-            var(--ha-color-surface-default)
-          );
           --wa-color-surface-raised: var(
             --ha-dialog-surface-background,
             var(--card-background-color, var(--ha-color-surface-default))
@@ -297,11 +345,34 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
           --width: min(var(--ha-dialog-width-lg, 1024px), var(--full-width));
         }
 
-        :host([width="full"]) wa-dialog {
+        :host([width="full"]) wa-dialog,
+        :host([fullscreen]) wa-dialog {
           --width: var(--full-width);
         }
 
+        :host([fullscreen]) wa-dialog::part(dialog) {
+          min-height: var(--safe-height);
+          max-height: var(--safe-height);
+          margin-top: 0;
+          transform: none;
+        }
+
+        :host([fullscreen]) .content-wrapper {
+          overflow: hidden;
+        }
+
+        :host([fullscreen]) .body {
+          overflow: hidden;
+          padding: 0;
+        }
+
         wa-dialog::part(dialog) {
+          -webkit-backdrop-filter: var(
+            --ha-dialog-surface-backdrop-filter,
+            none
+          );
+          backdrop-filter: var(--ha-dialog-surface-backdrop-filter, none);
+          box-shadow: var(--dialog-box-shadow, var(--wa-shadow-l));
           color: var(--primary-text-color);
           min-width: var(--width, var(--full-width));
           max-width: var(--width, var(--full-width));
@@ -331,32 +402,44 @@ export class HaDialog extends ScrollableFadeMixin(LitElement) {
           overflow: hidden;
         }
 
+        wa-dialog::part(dialog)::backdrop {
+          -webkit-backdrop-filter: var(
+            --ha-dialog-scrim-backdrop-filter,
+            var(--dialog-backdrop-filter, none)
+          );
+          backdrop-filter: var(
+            --ha-dialog-scrim-backdrop-filter,
+            var(--dialog-backdrop-filter, none)
+          );
+          background-color: var(--mdc-dialog-scrim-color, none);
+        }
+
         @media all and (max-width: 450px), all and (max-height: 500px) {
           :host([type="standard"]) {
             --ha-dialog-border-radius: 0;
+          }
 
-            wa-dialog {
-              /* Make the container fill the whole screen width and not the safe width */
-              --full-width: var(--ha-dialog-width-full, 100vw);
-              --width: var(--full-width);
-            }
+          :host([type="standard"]) wa-dialog {
+            /* Make the container fill the whole screen width and not the safe width */
+            --full-width: var(--ha-dialog-width-full, 100vw);
+            --width: var(--full-width);
+          }
 
-            wa-dialog::part(dialog) {
-              /* Make the dialog fill the whole screen height and not the safe height */
-              min-height: var(--ha-dialog-min-height, 100vh);
-              min-height: var(--ha-dialog-min-height, 100dvh);
-              max-height: var(--ha-dialog-max-height, 100vh);
-              max-height: var(--ha-dialog-max-height, 100dvh);
-              margin-top: 0;
-              margin-bottom: 0;
-              /* Use safe area as padding instead of the container size */
-              padding-top: var(--safe-area-inset-top);
-              padding-bottom: var(--safe-area-inset-bottom);
-              padding-left: var(--safe-area-inset-left);
-              padding-right: var(--safe-area-inset-right);
-              /* Reset the transform to center the dialog */
-              transform: none;
-            }
+          :host([type="standard"]) wa-dialog::part(dialog) {
+            /* Make the dialog fill the whole screen height and not the safe height */
+            min-height: var(--ha-dialog-min-height, 100vh);
+            min-height: var(--ha-dialog-min-height, 100dvh);
+            max-height: var(--ha-dialog-max-height, 100vh);
+            max-height: var(--ha-dialog-max-height, 100dvh);
+            margin-top: 0;
+            margin-bottom: 0;
+            /* Use safe area as padding instead of the container size */
+            padding-top: var(--safe-area-inset-top);
+            padding-bottom: var(--safe-area-inset-bottom);
+            padding-left: var(--safe-area-inset-left);
+            padding-right: var(--safe-area-inset-right);
+            /* Reset the transform to center the dialog */
+            transform: none;
           }
         }
 
@@ -443,6 +526,7 @@ declare global {
   }
 
   interface HASSDomEvents {
+    "dialog-set-fullscreen": boolean;
     opened: undefined;
     "after-show": undefined;
     closed: undefined;

src/components/ha-domain-icon.ts

@@ -61,11 +61,14 @@ export class HaDomainIcon extends LitElement {
       `;
     }
     if (this.brandFallback) {
-      const image = brandsUrl({
-        domain: this.domain!,
-        type: "icon",
-        darkOptimized: this.hass.themes?.darkMode,
-      });
+      const image = brandsUrl(
+        {
+          domain: this.domain!,
+          type: "icon",
+          darkOptimized: this.hass.themes?.darkMode,
+        },
+        this.hass.auth.data.hassUrl
+      );
       return html`
         <img
           alt=""

src/components/ha-drawer.ts

@@ -186,9 +186,11 @@ export class HaDrawer extends DrawerBase {
           padding-inline-start var(--ha-animation-duration-normal) ease;
       }
       @media (prefers-reduced-motion: reduce) {
+        /* Use 1ms instead of "none" so the transitionend event still fires.
+           The MDC drawer foundation relies on it to complete the close cycle. */
         .mdc-drawer,
         .mdc-drawer-app-content {
-          transition: none;
+          transition: 1ms;
         }
       }
     `,

src/components/ha-duration-input.ts

@@ -1,12 +1,12 @@
 import { mdiMinusThick, mdiPlusThick } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import "./ha-base-time-input";
-import type { TimeChangedEvent } from "./ha-base-time-input";
-import "./ha-button-toggle-group";
 import type { ValueChangedEvent } from "../types";
+import "./ha-base-time-input";
+import type { HaBaseTimeInput, TimeChangedEvent } from "./ha-base-time-input";
+import "./ha-button-toggle-group";
 
 export interface HaDurationData {
   days?: number;
@@ -19,7 +19,7 @@ export interface HaDurationData {
 const FIELDS = ["milliseconds", "seconds", "minutes", "hours", "days"];
 
 @customElement("ha-duration-input")
-class HaDurationInput extends LitElement {
+export class HaDurationInput extends LitElement {
   @property({ attribute: false }) public data?: HaDurationData;
 
   @property() public label?: string;
@@ -42,8 +42,19 @@ class HaDurationInput extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @query("ha-base-time-input", true) private _input?: HaBaseTimeInput;
+
   private _toggleNegative = false;
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  public reportValidity(): boolean {
+    return this._input?.reportValidity() ?? true;
+  }
+
   protected render(): TemplateResult {
     return html`
       <div class="row">

src/components/ha-filter-labels.ts

@@ -1,6 +1,6 @@
+import { consume } from "@lit/context";
 import type { SelectedDetail } from "@material/mwc-list";
 import { mdiCog, mdiFilterVariantRemove } from "@mdi/js";
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -11,8 +11,7 @@ import { fireEvent } from "../common/dom/fire_event";
 import { navigate } from "../common/navigate";
 import { stringCompare } from "../common/string/compare";
 import type { LabelRegistryEntry } from "../data/label/label_registry";
-import { subscribeLabelRegistry } from "../data/label/label_registry";
-import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import { labelsContext } from "../data/context";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-check-list-item";
@@ -25,7 +24,7 @@ import "./ha-list-item";
 import "./search-input-outlined";
 
 @customElement("ha-filter-labels")
-export class HaFilterLabels extends SubscribeMixin(LitElement) {
+export class HaFilterLabels extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public value?: string[];
@@ -34,20 +33,14 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public expanded = false;
 
-  @state() private _labels: LabelRegistryEntry[] = [];
+  @consume({ context: labelsContext, subscribe: true })
+  @state()
+  private _labels?: LabelRegistryEntry[];
 
   @state() private _shouldRender = false;
 
   @state() private _filter?: string;
 
-  protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
-    return [
-      subscribeLabelRegistry(this.hass.connection, (labels) => {
-        this._labels = labels;
-      }),
-    ];
-  }
-
   private _filteredLabels = memoizeOne(
     // `_value` used to recalculate the memoization when the selection changes
     (labels: LabelRegistryEntry[], filter: string | undefined, _value) =>
@@ -98,7 +91,11 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
                 multi
               >
                 ${repeat(
-                  this._filteredLabels(this._labels, this._filter, this.value),
+                  this._filteredLabels(
+                    this._labels || [],
+                    this._filter,
+                    this.value
+                  ),
                   (label) => label.label_id,
                   (label) => {
                     const color = label.color
@@ -172,7 +169,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
 
   private async _labelSelected(ev: CustomEvent<SelectedDetail<Set<number>>>) {
     const filteredLabels = this._filteredLabels(
-      this._labels,
+      this._labels || [],
       this._filter,
       this.value
     );

src/components/ha-form/ha-form-expandable.ts

@@ -1,8 +1,9 @@
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import type { HomeAssistant } from "../../types";
-import "./ha-form";
 import "../ha-expansion-panel";
+import "./ha-form";
+import type { HaForm } from "./ha-form";
 import type {
   HaFormDataContainer,
   HaFormElement,
@@ -35,6 +36,12 @@ export class HaFormExpandable extends LitElement implements HaFormElement {
     key: string
   ) => string;
 
+  @query("ha-form", true) private _form?: HaForm;
+
+  public reportValidity(): boolean {
+    return this._form?.reportValidity() ?? true;
+  }
+
   private _renderDescription() {
     const description = this.computeHelper?.(this.schema);
     return description ? html`<p>${description}</p>` : nothing;

src/components/ha-form/ha-form-float.ts

@@ -1,15 +1,15 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { HaTextField } from "../ha-textfield";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import "../ha-textfield";
+import type { HaTextField } from "../ha-textfield";
 import type {
   HaFormElement,
   HaFormFloatData,
   HaFormFloatSchema,
 } from "./types";
-import type { LocalizeFunc } from "../../common/translations/localize";
 
 @customElement("ha-form-float")
 export class HaFormFloat extends LitElement implements HaFormElement {
@@ -25,12 +25,15 @@ export class HaFormFloat extends LitElement implements HaFormElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @query("ha-textfield") private _input?: HaTextField;
+  @query("ha-textfield", true) private _input?: HaTextField;
 
-  public focus() {
-    if (this._input) {
-      this._input.focus();
-    }
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  public reportValidity(): boolean {
+    return this._input?.reportValidity() ?? true;
   }
 
   protected render(): TemplateResult {

src/components/ha-form/ha-form-grid.ts

@@ -1,14 +1,15 @@
-import "./ha-form";
 import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, queryAll } from "lit/decorators";
+import type { HomeAssistant } from "../../types";
+import "./ha-form";
+import type { HaForm } from "./ha-form";
 import type {
-  HaFormGridSchema,
   HaFormDataContainer,
   HaFormElement,
+  HaFormGridSchema,
   HaFormSchema,
 } from "./types";
-import type { HomeAssistant } from "../../types";
 
 @customElement("ha-form-grid")
 export class HaFormGrid extends LitElement implements HaFormElement {
@@ -33,9 +34,22 @@ export class HaFormGrid extends LitElement implements HaFormElement {
     key: string
   ) => string;
 
-  public async focus() {
-    await this.updateComplete;
-    this.renderRoot.querySelector("ha-form")?.focus();
+  @queryAll("ha-form", true) private _forms?: HaForm[];
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  public reportValidity(): boolean {
+    const forms = this._forms ?? [];
+    let valid = true;
+    for (const form of forms) {
+      if (!form.reportValidity()) {
+        valid = false;
+      }
+    }
+    return valid;
   }
 
   protected updated(changedProps: PropertyValues): void {

src/components/ha-form/ha-form-integer.ts

@@ -2,10 +2,11 @@ import type { PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { HaCheckbox } from "../ha-checkbox";
-import "../ha-slider";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import "../ha-checkbox";
+import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-input-helper-text";
+import "../ha-slider";
 import "../ha-textfield";
 import type { HaTextField } from "../ha-textfield";
 import type {
@@ -13,7 +14,6 @@ import type {
   HaFormIntegerData,
   HaFormIntegerSchema,
 } from "./types";
-import type { LocalizeFunc } from "../../common/translations/localize";
 
 @customElement("ha-form-integer")
 export class HaFormInteger extends LitElement implements HaFormElement {
@@ -29,24 +29,39 @@ export class HaFormInteger extends LitElement implements HaFormElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @query("ha-textfield ha-slider") private _input?:
+  @query("ha-textfield, ha-slider", true) private _input?:
     | HaTextField
     | HTMLInputElement;
 
   private _lastValue?: HaFormIntegerData;
 
-  public focus() {
-    if (this._input) {
-      this._input.focus();
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  public reportValidity(): boolean {
+    const showSlider = this._showSlider();
+    if (showSlider && this.schema.required && isNaN(Number(this.data))) {
+      return false;
     }
+
+    if (!showSlider) {
+      return this._input?.reportValidity() ?? true;
+    }
+    return true;
   }
 
-  protected render(): TemplateResult {
-    if (
+  private _showSlider(): boolean {
+    return (
       this.schema.valueMin !== undefined &&
       this.schema.valueMax !== undefined &&
       this.schema.valueMax - this.schema.valueMin < 256
-    ) {
+    );
+  }
+
+  protected render(): TemplateResult {
+    if (this._showSlider()) {
       return html`
         <div>
           ${this.label}

src/components/ha-form/ha-form-multi_select.ts

@@ -44,6 +44,13 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
     this._dropdown?.focus();
   }
 
+  public reportValidity(): boolean {
+    if (!this.schema.required || (this.data && this.data.length > 0)) {
+      return true;
+    }
+    return false;
+  }
+
   protected render(): TemplateResult {
     const options = Array.isArray(this.schema.options)
       ? this.schema.options

src/components/ha-form/ha-form-optional_actions.ts

@@ -8,16 +8,17 @@ import type { LocalizeFunc } from "../../common/translations/localize";
 import type { HomeAssistant } from "../../types";
 import "../ha-button";
 import "../ha-dropdown";
+import type { HaDropdownSelectEvent } from "../ha-dropdown";
 import "../ha-dropdown-item";
 import "../ha-svg-icon";
 import "./ha-form";
+import type { HaForm } from "./ha-form";
 import type {
   HaFormDataContainer,
   HaFormElement,
   HaFormOptionalActionsSchema,
   HaFormSchema,
 } from "./types";
-import type { HaDropdownSelectEvent } from "../ha-dropdown";
 
 const NO_ACTIONS = [];
 
@@ -53,6 +54,11 @@ export class HaFormOptionalActions extends LitElement implements HaFormElement {
     this.renderRoot.querySelector("ha-form")?.focus();
   }
 
+  public reportValidity(): boolean {
+    const form = this.renderRoot.querySelector<HaForm>("ha-form");
+    return form ? form.reportValidity() : true;
+  }
+
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
     if (changedProps.has("data")) {