Address review feedback: rename to AutomationSortableListMixin, remove _ prefix from protected members, throw in setHighlightedItems

- Rename AutomationRowsMixin to AutomationSortableListMixin
- Rename file to ha-automation-sortable-list-mixin.ts
- Remove _ prefix from all protected methods/properties
- Make setHighlightedItems throw Not implemented error
- Update all 4 component files with new references

Co-authored-by: wendevlin <12148533+wendevlin@users.noreply.github.com>

.devcontainer/Dockerfile

@@ -1,4 +1,4 @@
-FROM mcr.microsoft.com/devcontainers/python:1-3.13
+FROM mcr.microsoft.com/devcontainers/python:3.14
 
 ENV \
   DEBIAN_FRONTEND=noninteractive \

.github/PULL_REQUEST_TEMPLATE.md

@@ -21,6 +21,14 @@
 -->
 
 
+## Screenshots
+<!--
+  If your PR includes visual changes, please add screenshots or a short video
+  showing the before and after. This helps reviewers understand the impact of
+  your changes.
+  Note: Remove this section if this PR has no visual changes.
+-->
+
 ## Type of change
 <!--
   What type of change does your PR introduce to the Home Assistant frontend?
@@ -35,16 +43,6 @@
 - [ ] Breaking change (fix/feature causing existing functionality to break)
 - [ ] Code quality improvements to existing code or addition of tests
 
-## Example configuration
-<!--
-  Supplying a configuration snippet, makes it easier for a maintainer to test
-  your PR.
--->
-
-```yaml
-
-```
-
 ## Additional information
 <!--
   Details are important, and help maintainers processing your PR.
@@ -54,6 +52,8 @@
 - This PR fixes or closes issue: fixes #
 - This PR is related to issue or discussion:
 - Link to documentation pull request:
+- Link to developer documentation pull request:
+- Link to backend pull request:
 
 ## Checklist
 <!--
@@ -61,18 +61,50 @@
   creating the PR. If you're unsure about any of them, don't hesitate to ask.
   We're here to help! This is simply a reminder of what we are going to look
   for before merging your code.
+
+  AI tools are welcome, but contributors are responsible for *fully*
+  understanding the code before submitting a PR.
 -->
 
+- [ ] I understand the code I am submitting and can explain how it works.
 - [ ] The code change is tested and works locally.
 - [ ] There is no commented out code in this PR.
-- [ ] Tests have been added to verify that the new code works.
+- [ ] I have followed the [development checklist][dev-checklist]
+- [ ] I have followed the [perfect PR recommendations][perfect-pr]
+- [ ] Any generated code has been carefully reviewed for correctness and compliance with project standards.
 
 If user exposed functionality or configuration variables are added/changed:
 
 - [ ] Documentation added/updated for [www.home-assistant.io][docs-repository]
 
 <!--
-  Thank you for contributing <3
+  This project is very active and we have a high turnover of pull requests.
+
+  Unfortunately, the number of incoming pull requests is higher than what our
+  reviewers can review and merge so there is a long backlog of pull requests
+  waiting for review. You can help here!
+
+  By reviewing another pull request, you will help raise the code quality of
+  that pull request and the final review will be faster. This way the general
+  pace of pull request reviews will go up and your wait time will go down.
+
+  When picking a pull request to review, try to choose one that hasn't yet
+  been reviewed.
+
+  Thanks for helping out!
 -->
 
+To help with the load of incoming pull requests:
+
+- [ ] I have reviewed two other [open pull requests][prs] in this repository.
+
+[prs]: https://github.com/home-assistant/frontend/pulls?q=is%3Aopen+is%3Apr+-author%3A%40me+-draft%3Atrue+sort%3Acreated-desc+review%3Anone+-status%3Afailure
+
+<!--
+  Thank you for contributing <3
+
+  Below, some useful links you could explore:
+-->
+[dev-checklist]: https://developers.home-assistant.io/docs/development_checklist/
 [docs-repository]: https://github.com/home-assistant/home-assistant.io
+[perfect-pr]: https://developers.home-assistant.io/docs/review-process/#creating-the-perfect-pr

.github/copilot-instructions.md

@@ -194,13 +194,13 @@ The View Transitions API creates smooth animations between DOM state changes. Wh
 - **Utility wrapper**: `src/common/util/view-transition.ts` - `withViewTransition()` function with graceful fallback
 - **Real-world example**: `src/util/launch-screen.ts` - Launch screen fade pattern with browser support detection
 - **Animation keyframes**: `src/resources/theme/animations.globals.ts` - Global `fade-in`, `fade-out`, `scale` animations
-- **Animation duration**: `src/resources/theme/core.globals.ts` - `--ha-animation-base-duration` (350ms, respects `prefers-reduced-motion`)
+- **Animation duration**: `src/resources/theme/core.globals.ts` - `--ha-animation-duration-fast` (150ms), `--ha-animation-duration-normal` (250ms), `--ha-animation-duration-slow` (350ms) (all respect `prefers-reduced-motion`)
 
 **Implementation Guidelines:**
 
 1. Always use `withViewTransition()` wrapper for automatic fallback
 2. Keep transitions simple (subtle crossfades and fades work best)
-3. Use `--ha-animation-base-duration` CSS variable for consistent timing
+3. Use `--ha-animation-duration-*` CSS variables for consistent timing (`fast`, `normal`, `slow`)
 4. Assign unique `view-transition-name` to elements (must be unique at any given time)
 5. For Lit components: Override `performUpdate()` or use `::part()` for internal elements
 
@@ -214,13 +214,6 @@ By default, `:root` receives `view-transition-name: root`, creating a full-page
 - Only one view transition can run at a time
 - **Shadow DOM incompatibility**: View transitions operate at document level and do not work within Shadow DOM due to style isolation ([spec discussion](https://github.com/w3c/csswg-drafts/issues/10303)). For web components, set `view-transition-name` on the `:host` element or use document-level transitions
 
-**Current Usage & Planned Applications:**
-
-- Launch screen fade out (implemented)
-- Automation sidebar transitions (planned - #27238)
-- More info dialog content changes (planned - #27672)
-- Toolbar navigation, ha-spinner transitions (planned)
-
 **Specification & Documentation:**
 
 For browser support, API details, and current specifications, refer to these authoritative sources (note: check publication dates as specs evolve):
@@ -246,13 +239,7 @@ For browser support, API details, and current specifications, refer to these aut
 
 ## Component Library
 
-### Dialog Components
-
-**Available Dialog Types:**
-
-- `ha-wa-dialog` - Preferred for new dialogs (Web Awesome based)
-- `ha-md-dialog` - Material Design 3 dialog component
-- `ha-dialog` - Legacy component (still widely used)
+### Dialog Component
 
 **Opening Dialogs (Fire Event Pattern - Recommended):**
 
@@ -266,6 +253,7 @@ fireEvent(this, "show-dialog", {
 
 **Dialog Implementation Requirements:**
 
+- Use `ha-dialog` component
 - Implement `HassDialog<T>` interface
 - Use `@state() private _open = false` to control dialog visibility
 - Set `_open = true` in `showDialog()`, `_open = false` in `closeDialog()`
@@ -281,7 +269,6 @@ fireEvent(this, "show-dialog", {
 
 - Use `width` attribute with predefined sizes: `"small"` (320px), `"medium"` (560px - default), `"large"` (720px), or `"full"`
 - Custom sizing is NOT recommended - use the standard width presets
-- Example: `<ha-wa-dialog width="small">` for alert/confirmation dialogs
 
 **Button Appearance Guidelines:**
 
@@ -291,17 +278,9 @@ fireEvent(this, "show-dialog", {
 - **Button sizes**: Use `size="small"` (32px height) or default/medium (40px height)
 - Always place primary action in `slot="primaryAction"` and secondary in `slot="secondaryAction"` within `ha-dialog-footer`
 
-**Recent Examples:**
-
-See these files for current patterns:
-
-- `src/panels/config/repairs/dialog-repairs-issue.ts`
-- `src/dialogs/restart/dialog-restart.ts`
-- `src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts`
-
 **Gallery Documentation:**
 
-- `gallery/src/pages/components/ha-wa-dialog.markdown`
+- `gallery/src/pages/components/ha-dialog.markdown`
 - `gallery/src/pages/components/ha-dialogs.markdown`
 
 ### Form Component (ha-form)
@@ -309,7 +288,6 @@ See these files for current patterns:
 - Schema-driven using `HaFormSchema[]`
 - Supports entity, device, area, target, number, boolean, time, action, text, object, select, icon, media, location selectors
 - Built-in validation with error display
-- Use `dialogInitialFocus` in dialogs
 - Use `computeLabel`, `computeError`, `computeHelper` for translations
 
 ```typescript
@@ -394,81 +372,6 @@ export class HaPanelMyFeature extends SubscribeMixin(LitElement) {
 }
 ```
 
-### Creating a Dialog
-
-```typescript
-@customElement("dialog-my-feature")
-export class DialogMyFeature
-  extends LitElement
-  implements HassDialog<MyDialogParams>
-{
-  @property({ attribute: false })
-  hass!: HomeAssistant;
-
-  @state()
-  private _params?: MyDialogParams;
-
-  @state()
-  private _open = false;
-
-  public async showDialog(params: MyDialogParams): Promise<void> {
-    this._params = params;
-    this._open = true;
-  }
-
-  public closeDialog(): void {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
-    this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render() {
-    if (!this._params) {
-      return nothing;
-    }
-
-    return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${this._params.title}
-        header-subtitle=${this._params.subtitle}
-        @closed=${this._dialogClosed}
-      >
-        <p>Dialog content</p>
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            slot="secondaryAction"
-            appearance="plain"
-            @click=${this.closeDialog}
-          >
-            ${this.hass.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button slot="primaryAction" @click=${this._submit}>
-            ${this.hass.localize("ui.common.save")}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
-    `;
-  }
-
-  static styles = [haStyleDialog, css``];
-}
-```
-
-### Dialog Design Guidelines
-
-- Max width: 560px (Alert/confirmation: 320px fixed width)
-- Close X-icon on top left (all screen sizes)
-- Submit button grouped with cancel at bottom right
-- Keep button labels short: "Save", "Delete", "Enable"
-- Destructive actions use red warning button
-- Always use a title (best practice)
-- Strive for minimalism
-
 #### Creating a Lovelace Card
 
 **Purpose**: Cards allow users to tell different stories about their house (based on gallery)
@@ -559,6 +462,10 @@ this.hass.localize("ui.panel.config.updates.update_available", {
 - Use HTTPS - All external resources must use HTTPS
 - CSP compliance - Ensure code works with Content Security Policy
 
+### 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.
+
 ### Text and Copy Guidelines
 
 #### Terminology Standards
@@ -716,9 +623,6 @@ this.hass.localize("ui.panel.config.automation.delete_confirm", {
 
 ### Component-Specific Checks
 
-- [ ] Dialogs implement HassDialog interface
-- [ ] Dialog styling uses haStyleDialog
-- [ ] Dialog accessibility includes dialogInitialFocus
 - [ ] ha-alert used correctly for messages
 - [ ] ha-form uses proper schema structure
 - [ ] Components handle all states (loading, error, unavailable)

.github/workflows/ci.yaml

@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@8b402f58fbc84540c8b491a91e594a4576fec3d7 # v5.0.2
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
         with:
           path: |
             node_modules/.cache/prettier
@@ -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@19b2f06db2b6f5108140aeb04014ef02b648f789 # v4.31.11
+        uses: github/codeql-action/init@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@19b2f06db2b6f5108140aeb04014ef02b648f789 # v4.31.11
+        uses: github/codeql-action/autobuild@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
 
       # ℹ️ 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@19b2f06db2b6f5108140aeb04014ef02b648f789 # v4.31.11
+        uses: github/codeql-action/analyze@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4

.github/workflows/nightly.yaml

@@ -6,7 +6,7 @@ on:
     - cron: "0 1 * * *"
 
 env:
-  PYTHON_VERSION: "3.13"
+  PYTHON_VERSION: "3.14"
   NODE_OPTIONS: --max_old_space_size=6144
 
 permissions:
@@ -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.yaml

@@ -6,7 +6,7 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.13"
+  PYTHON_VERSION: "3.14"
   NODE_OPTIONS: --max_old_space_size=6144
 
 # Set default workflow permissions
@@ -84,7 +84,7 @@ jobs:
       - name: Build wheels
         uses: home-assistant/wheels@2025.12.0
         with:
-          abi: cp313
+          abi: cp314
           tag: musllinux_1_2
           arch: amd64
           wheels-key: ${{ secrets.WHEELS_KEY }}

.github/workflows/restrict-task-creation.yml

@@ -5,9 +5,38 @@ on:
   issues:
     types: [opened]
 
+permissions: {}
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.issue.number }}
+
 jobs:
-  check-authorization:
+  add-no-stale:
+    name: Add no-stale label
     runs-on: ubuntu-latest
+    permissions:
+      issues: write # To add labels to issues
+    if: >-
+      github.event.issue.type.name == 'Task'
+      || github.event.issue.type.name == 'Epic'
+      || github.event.issue.type.name == 'Opportunity'
+    steps:
+      - name: Add no-stale label
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
+        with:
+          script: |
+            await github.rest.issues.addLabels({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+              labels: ['no-stale']
+            });
+
+  check-authorization:
+    name: Check authorization
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write # To comment on, label, and close issues
     # Only run if this is a Task issue type (from the issue form)
     if: github.event.issue.type.name == 'Task'
     steps:

.github/workflows/stale.yml

@@ -10,7 +10,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@997185467fa4f803885201cee163a9f38240193d # v10.1.1
+        uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f # v10.2.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.nvmrc

@@ -1 +1 @@
-24.13.0
+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/energy.ts

@@ -14,40 +14,28 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
       energy_sources: [
         {
           type: "grid",
-          flow_from: [
-            {
-              stat_energy_from: "sensor.energy_consumption_tarif_1",
-              stat_cost: "sensor.energy_consumption_tarif_1_cost",
-              entity_energy_price: null,
-              number_energy_price: null,
-            },
-            {
-              stat_energy_from: "sensor.energy_consumption_tarif_2",
-              stat_cost: "sensor.energy_consumption_tarif_2_cost",
-              entity_energy_price: null,
-              number_energy_price: null,
-            },
-          ],
-          flow_to: [
-            {
-              stat_energy_to: "sensor.energy_production_tarif_1",
-              stat_compensation:
-                "sensor.energy_production_tarif_1_compensation",
-              entity_energy_price: null,
-              number_energy_price: null,
-            },
-            {
-              stat_energy_to: "sensor.energy_production_tarif_2",
-              stat_compensation:
-                "sensor.energy_production_tarif_2_compensation",
-              entity_energy_price: null,
-              number_energy_price: null,
-            },
-          ],
-          power: [
-            { stat_rate: "sensor.power_grid" },
-            { stat_rate: "sensor.power_grid_return" },
-          ],
+          stat_energy_from: "sensor.energy_consumption_tarif_1",
+          stat_energy_to: "sensor.energy_production_tarif_1",
+          stat_cost: "sensor.energy_consumption_tarif_1_cost",
+          stat_compensation: "sensor.energy_production_tarif_1_compensation",
+          entity_energy_price: null,
+          number_energy_price: null,
+          entity_energy_price_export: null,
+          number_energy_price_export: null,
+          stat_rate: "sensor.power_grid",
+          cost_adjustment_day: 0,
+        },
+        {
+          type: "grid",
+          stat_energy_from: "sensor.energy_consumption_tarif_2",
+          stat_energy_to: "sensor.energy_production_tarif_2",
+          stat_cost: "sensor.energy_consumption_tarif_2_cost",
+          stat_compensation: "sensor.energy_production_tarif_2_compensation",
+          entity_energy_price: null,
+          number_energy_price: null,
+          entity_energy_price_export: null,
+          number_energy_price_export: null,
+          stat_rate: "sensor.power_grid_return",
           cost_adjustment_day: 0,
         },
         {

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

demo/src/stubs/frontend.ts

@@ -1,14 +1,12 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-let changeFunction;
+let sidebarChangeCallback;
 
 export const mockFrontend = (hass: MockHomeAssistant) => {
-  hass.mockWS("frontend/get_user_data", () => ({
-    value: null,
-  }));
+  hass.mockWS("frontend/get_user_data", () => ({ value: null }));
   hass.mockWS("frontend/set_user_data", ({ key, value }) => {
     if (key === "sidebar") {
-      changeFunction?.({
+      sidebarChangeCallback?.({
         value: {
           panelOrder: value.panelOrder || [],
           hiddenPanels: value.hiddenPanels || [],
@@ -16,14 +14,11 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
       });
     }
   });
-  hass.mockWS("frontend/subscribe_user_data", (_msg, _hass, onChange) => {
-    changeFunction = onChange;
-    onChange?.({
-      value: {
-        panelOrder: [],
-        hiddenPanels: [],
-      },
-    });
+  hass.mockWS("frontend/subscribe_user_data", (msg, _hass, onChange) => {
+    if (msg.key === "sidebar") {
+      sidebarChangeCallback = onChange;
+    }
+    onChange?.({ value: null });
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   });
@@ -48,4 +43,5 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
     return () => {};
   });
   hass.mockWS("repairs/list_issues", () => ({ issues: [] }));
+  hass.mockWS("frontend/get_themes", (_msg, currentHass) => currentHass.themes);
 };

demo/src/stubs/lovelace.ts

@@ -29,6 +29,7 @@ export const mockLovelace = (
 
   hass.mockWS("lovelace/config/save", () => Promise.resolve());
   hass.mockWS("lovelace/resources", () => Promise.resolve([]));
+  hass.mockWS("lovelace/dashboards/list", () => Promise.resolve([]));
 };
 
 customElements.whenDefined("hui-root").then(() => {

eslint.config.mjs

@@ -12,6 +12,7 @@ import eslintConfigPrettier from "eslint-config-prettier";
 import { configs as litConfigs } from "eslint-plugin-lit";
 import { configs as wcConfigs } from "eslint-plugin-wc";
 import { configs as a11yConfigs } from "eslint-plugin-lit-a11y";
+import html from "@html-eslint/eslint-plugin";
 
 const _filename = fileURLToPath(import.meta.url);
 const _dirname = path.dirname(_filename);
@@ -192,5 +193,13 @@ export default tseslint.config(
     languageOptions: {
       globals: globals.audioWorklet,
     },
+  },
+  {
+    plugins: {
+      html,
+    },
+    rules: {
+      "html/no-invalid-attr-value": "error",
+    },
   }
 );

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/brand/logo.markdown

@@ -10,7 +10,9 @@ As a community, we are proud of our logo. Follow these guidelines to ensure it a
 
 ![Logo](/images/brand/logo.png)
 
-Please note that this logo is not released under the CC license. All rights reserved.
+<ha-alert alert-type="info">
+This logo is trademarked and the property of the Open Home Foundation. This means it is not available for commercial use without express written permission from the foundation. We regard commercial use as anything designed to market or promote a product, software or service that is for sale. Please contact <a href="mailto:partner@openhomefoundation.org">partner@openhomefoundation.org</a> for further information
+</ha-alert>
 
 # Design
 

gallery/src/pages/brand/logo.ts

@@ -0,0 +1 @@
+import "../../../../src/components/ha-alert";

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

@@ -21,8 +21,8 @@ type DialogType =
   | "basic"
   | "basic-subtitle-below"
   | "basic-subtitle-above"
+  | "allow-mode-change"
   | "form"
-  | "form-block-mode"
   | "actions"
   | "large"
   | "small";
@@ -69,8 +69,8 @@ export class DemoHaAdaptiveDialog extends LitElement {
           <ha-button @click=${this._handleOpenDialog("form")}
             >Adaptive dialog with form</ha-button
           >
-          <ha-button @click=${this._handleOpenDialog("form-block-mode")}
-            >Adaptive dialog with form (block mode change)</ha-button
+          <ha-button @click=${this._handleOpenDialog("allow-mode-change")}
+            >Adaptive dialog with allow mode change</ha-button
           >
           <ha-button @click=${this._handleOpenDialog("actions")}
             >Adaptive dialog with actions</ha-button
@@ -164,27 +164,15 @@ export class DemoHaAdaptiveDialog extends LitElement {
 
         <ha-adaptive-dialog
           .hass=${this._hass}
-          .open=${this._openDialog === "form-block-mode"}
-          header-title="Adaptive dialog with form (block mode change)"
-          header-subtitle="This form will not reset when the viewport size changes"
-          block-mode-change
+          .allowModeChange=${this._openDialog === "allow-mode-change"}
+          header-title="Adaptive dialog with allow mode change"
+          header-subtitle="Resize the window while this dialog is open"
           @closed=${this._handleClosed}
         >
-          <ha-form autofocus .schema=${SCHEMA}></ha-form>
-          <ha-dialog-footer slot="footer">
-            <ha-button
-              @click=${this._handleClosed}
-              slot="secondaryAction"
-              variant="plain"
-              >Cancel</ha-button
-            >
-            <ha-button
-              @click=${this._handleClosed}
-              slot="primaryAction"
-              variant="accent"
-              >Submit</ha-button
-            >
-          </ha-dialog-footer>
+          <div>
+            This dialog can switch between dialog mode and bottom sheet mode
+            while open.
+          </div>
         </ha-adaptive-dialog>
 
         <ha-adaptive-dialog
@@ -215,7 +203,7 @@ export class DemoHaAdaptiveDialog extends LitElement {
           <li>
             <strong>Dialog mode:</strong> Used on larger screens (width &gt;
             870px and height &gt; 500px). Renders as a centered dialog using
-            <code>ha-wa-dialog</code>.
+            <code>ha-dialog</code>.
           </li>
           <li>
             <strong>Bottom sheet mode:</strong> Used on mobile devices and
@@ -225,10 +213,9 @@ export class DemoHaAdaptiveDialog extends LitElement {
         </ul>
 
         <p>
-          The mode is determined automatically and updates when the window is
-          resized. To prevent mode changes after the initial mount (useful for
-          preventing form resets), use the <code>block-mode-change</code>
-          attribute.
+          By default, the mode is determined at mount time and then stays fixed
+          while the dialog is open. To allow switching modes while the viewport
+          changes, use the <code>allow-mode-change</code> attribute.
         </p>
 
         <h3>Width</h3>
@@ -394,15 +381,15 @@ export class DemoHaAdaptiveDialog extends LitElement {
 
         <p>
           If you don't need responsive behavior, use
-          <code>ha-wa-dialog</code> directly for desktop-only dialogs or
+          <code>ha-dialog</code> directly for desktop-only dialogs or
           <code>ha-bottom-sheet</code> for mobile-only sheets.
         </p>
 
         <p>
-          Use the <code>block-mode-change</code> attribute when you want to
-          prevent the dialog from switching modes after it's opened. This is
-          especially useful for forms, as it prevents form data from being lost
-          when users resize their browser window.
+          Use the <code>allow-mode-change</code> attribute when you want the
+          dialog to switch between modes as the viewport changes after opening.
+          For forms, you can keep the default behavior to avoid resetting fields
+          on resize.
         </p>
 
         <h3>Example usage</h3>
@@ -410,7 +397,6 @@ export class DemoHaAdaptiveDialog extends LitElement {
         <pre><code>&lt;ha-adaptive-dialog
   .hass=\${this.hass}
   open
-  width="medium"
   header-title="Dialog title"
   header-subtitle="Dialog subtitle"
 &gt;
@@ -427,27 +413,10 @@ export class DemoHaAdaptiveDialog extends LitElement {
   &lt;/ha-dialog-footer&gt;
 &lt;/ha-adaptive-dialog&gt;</code></pre>
 
-        <p>Example with <code>block-mode-change</code> for forms:</p>
-
-        <pre><code>&lt;ha-adaptive-dialog
-  .hass=\${this.hass}
-  open
-  header-title="Edit configuration"
-  block-mode-change
-&gt;
-  &lt;ha-form .schema=\${schema} .data=\${data}&gt;&lt;/ha-form&gt;
-  &lt;ha-dialog-footer slot="footer"&gt;
-    &lt;ha-button slot="secondaryAction" variant="plain"
-      &gt;Cancel&lt;/ha-button
-    &gt;
-    &lt;ha-button slot="primaryAction" variant="accent"&gt;Save&lt;/ha-button&gt;
-  &lt;/ha-dialog-footer&gt;
-&lt;/ha-adaptive-dialog&gt;</code></pre>
-
         <h3>API</h3>
 
         <p>
-          This component combines <code>ha-wa-dialog</code> and
+          This component combines <code>ha-dialog</code> and
           <code>ha-bottom-sheet</code> with automatic mode switching based on
           screen size.
         </p>
@@ -521,12 +490,10 @@ export class DemoHaAdaptiveDialog extends LitElement {
               <td></td>
             </tr>
             <tr>
-              <td><code>block-mode-change</code></td>
+              <td><code>allow-mode-change</code></td>
               <td>
-                When set, the mode is determined at mount time based on the
-                current screen size, but subsequent mode changes are blocked.
-                Useful for preventing forms from resetting when the viewport
-                size changes.
+                When set, the dialog can switch between modes as the viewport
+                size changes while it is open.
               </td>
               <td><code>false</code></td>
               <td><code>false</code>, <code>true</code></td>
@@ -548,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>
@@ -560,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.markdown

@@ -0,0 +1,3 @@
+---
+title: Dialog (ha-dialog)
+---

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

@@ -6,7 +6,7 @@ import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-dialog-footer";
 import "../../../../src/components/ha-form/ha-form";
 import "../../../../src/components/ha-icon-button";
-import "../../../../src/components/ha-wa-dialog";
+import "../../../../src/components/ha-dialog";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 
 const SCHEMA: HaFormSchema[] = [
@@ -22,14 +22,14 @@ type DialogType =
   | "form"
   | "actions";
 
-@customElement("demo-components-ha-wa-dialog")
-export class DemoHaWaDialog extends LitElement {
+@customElement("demo-components-ha-dialog")
+export class DemoHaDialog extends LitElement {
   @state() private _openDialog: DialogType = false;
 
   protected render() {
     return html`
       <div class="content">
-        <h1>Dialog <code>&lt;ha-wa-dialog&gt;</code></h1>
+        <h1>Dialog <code>&lt;ha-dialog&gt;</code></h1>
 
         <p class="subtitle">Dialog component built with WebAwesome.</p>
 
@@ -53,24 +53,24 @@ export class DemoHaWaDialog extends LitElement {
           >
         </div>
 
-        <ha-wa-dialog
+        <ha-dialog
           .open=${this._openDialog === "basic"}
           header-title="Basic dialog"
           @closed=${this._handleClosed}
         >
           <div>Dialog content</div>
-        </ha-wa-dialog>
+        </ha-dialog>
 
-        <ha-wa-dialog
+        <ha-dialog
           .open=${this._openDialog === "basic-subtitle-below"}
           header-title="Basic dialog with subtitle"
           header-subtitle="This is a basic dialog with a subtitle below"
           @closed=${this._handleClosed}
         >
           <div>Dialog content</div>
-        </ha-wa-dialog>
+        </ha-dialog>
 
-        <ha-wa-dialog
+        <ha-dialog
           .open=${this._openDialog === "basic-subtitle-above"}
           header-title="Dialog with subtitle above"
           header-subtitle="This is a basic dialog with a subtitle above"
@@ -78,9 +78,9 @@ export class DemoHaWaDialog extends LitElement {
           @closed=${this._handleClosed}
         >
           <div>Dialog content</div>
-        </ha-wa-dialog>
+        </ha-dialog>
 
-        <ha-wa-dialog
+        <ha-dialog
           .open=${this._openDialog === "form"}
           header-title="Dialog with form"
           header-subtitle="This is a dialog with a form and a footer"
@@ -91,17 +91,18 @@ export class DemoHaWaDialog extends LitElement {
           <ha-dialog-footer slot="footer">
             <ha-button
               data-dialog="close"
+              appearance="plain"
               slot="secondaryAction"
-              variant="plain"
-              >Cancel</ha-button
-            >
-            <ha-button data-dialog="close" slot="primaryAction" variant="accent"
-              >Submit</ha-button
             >
+              Cancel
+            </ha-button>
+            <ha-button data-dialog="close" slot="primaryAction">
+              Submit
+            </ha-button>
           </ha-dialog-footer>
-        </ha-wa-dialog>
+        </ha-dialog>
 
-        <ha-wa-dialog
+        <ha-dialog
           .open=${this._openDialog === "actions"}
           header-title="Dialog with actions"
           header-subtitle="This is a dialog with header actions"
@@ -113,7 +114,7 @@ export class DemoHaWaDialog extends LitElement {
           </div>
 
           <div>Dialog content</div>
-        </ha-wa-dialog>
+        </ha-dialog>
 
         <h2>Design</h2>
 
@@ -228,19 +229,19 @@ export class DemoHaWaDialog extends LitElement {
             <tr>
               <th>Slot</th>
               <th>Description</th>
-              <th>Variant to use</th>
+              <th>Appearance to use</th>
             </tr>
           </thead>
           <tbody>
             <tr>
               <td><code>secondaryAction</code></td>
               <td>The secondary action button(s).</td>
-              <td><code>plain</code></td>
+              <td><code>appearance="plain"</code></td>
             </tr>
             <tr>
               <td><code>primaryAction</code></td>
               <td>The primary action button(s).</td>
-              <td><code>accent</code></td>
+              <td>Default (no appearance attribute)</td>
             </tr>
           </tbody>
         </table>
@@ -249,7 +250,7 @@ export class DemoHaWaDialog extends LitElement {
 
         <h3>Example Usage</h3>
 
-        <pre><code>&lt;ha-wa-dialog
+        <pre><code>&lt;ha-dialog
   open
   header-title="Dialog title"
   header-subtitle="Dialog subtitle"
@@ -261,12 +262,18 @@ export class DemoHaWaDialog extends LitElement {
   &lt;/div&gt;
   &lt;div&gt;Dialog content&lt;/div&gt;
   &lt;ha-dialog-footer slot="footer"&gt;
-    &lt;ha-button data-dialog="close" slot="secondaryAction" variant="plain"
-      &gt;Cancel&lt;/ha-button
+    &lt;ha-button
+      data-dialog="close"
+      appearance="plain"
+      slot="secondaryAction"
     &gt;
-    &lt;ha-button slot="primaryAction" variant="accent"&gt;Submit&lt;/ha-button&gt;
+      Cancel
+    &lt;/ha-button&gt;
+    &lt;ha-button data-dialog="close" slot="primaryAction"&gt;
+      Submit
+    &lt;/ha-button&gt;
   &lt;/ha-dialog-footer&gt;
-&lt;/ha-wa-dialog&gt;</code></pre>
+&lt;/ha-dialog&gt;</code></pre>
 
         <h3>API</h3>
 
@@ -373,13 +380,29 @@ export class DemoHaWaDialog 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>
@@ -514,6 +537,6 @@ export class DemoHaWaDialog extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-components-ha-wa-dialog": DemoHaWaDialog;
+    "demo-components-ha-dialog": DemoHaDialog;
   }
 }

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

@@ -17,32 +17,55 @@ import type { DeviceRegistryEntry } from "../../../../src/data/device/device_reg
 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 { 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[] = [

gallery/src/pages/components/ha-wa-dialog.markdown

@@ -1,3 +0,0 @@
----
-title: Dialog (ha-wa-dialog)
----

gallery/src/pages/concepts/home.markdown

@@ -18,7 +18,7 @@ The Home Assistant interface is based on Material Design. It's a design system c
 
 We want to make it as easy for designers to contribute as it is for developers. There’s a lot a designer can contribute to:
 
-- Meet us at <a href="https://www.home-assistant.io/join-chat" rel="noopener noreferrer" target="_blank">devs_ux Discord</a>. Feel free to share your designs, user test or strategic ideas.
+- Meet us at <a href="https://www.home-assistant.io/join-chat-design" rel="noopener noreferrer" target="_blank">Discord #designers channel</a>. If you can't see the channel, make sure you set the correct role in Channels & Roles.
 - Start designing with our <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
 - Find the latest UX <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!
 

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

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

@@ -100,7 +100,6 @@ class HaLandingPage extends LandingPageBaseElement {
           button-style
           native-name
           @value-changed=${this._languageChanged}
-          inline-arrow
         ></ha-language-picker>
         <ha-button
           appearance="plain"
@@ -223,6 +222,9 @@ class HaLandingPage extends LandingPageBaseElement {
         flex-direction: column;
         gap: var(--ha-space-4);
       }
+      ha-language-picker {
+        min-width: 200px;
+      }
       ha-alert p {
         text-align: unset;
       }

package.json

@@ -27,32 +27,32 @@
   "type": "module",
   "dependencies": {
     "@babel/runtime": "7.28.6",
-    "@braintree/sanitize-url": "7.1.1",
+    "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.0",
-    "@codemirror/commands": "6.10.1",
-    "@codemirror/language": "6.12.1",
+    "@codemirror/commands": "6.10.2",
+    "@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.11",
+    "@codemirror/view": "6.39.15",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.2.0",
-    "@formatjs/intl-displaynames": "7.2.0",
-    "@formatjs/intl-durationformat": "0.10.0",
-    "@formatjs/intl-getcanonicallocales": "3.2.0",
-    "@formatjs/intl-listformat": "8.2.0",
-    "@formatjs/intl-locale": "5.2.0",
-    "@formatjs/intl-numberformat": "9.2.1",
-    "@formatjs/intl-pluralrules": "6.2.1",
-    "@formatjs/intl-relativetimeformat": "12.2.1",
+    "@formatjs/intl-datetimeformat": "7.2.2",
+    "@formatjs/intl-displaynames": "7.2.1",
+    "@formatjs/intl-durationformat": "0.10.1",
+    "@formatjs/intl-getcanonicallocales": "3.2.1",
+    "@formatjs/intl-listformat": "8.2.1",
+    "@formatjs/intl-locale": "5.2.1",
+    "@formatjs/intl-numberformat": "9.2.2",
+    "@formatjs/intl-pluralrules": "6.2.2",
+    "@formatjs/intl-relativetimeformat": "12.2.2",
     "@fullcalendar/core": "6.1.20",
     "@fullcalendar/daygrid": "6.1.20",
     "@fullcalendar/interaction": "6.1.20",
     "@fullcalendar/list": "6.1.20",
     "@fullcalendar/luxon3": "6.1.20",
     "@fullcalendar/timegrid": "6.1.20",
-    "@home-assistant/webawesome": "3.0.0-ha.2",
+    "@home-assistant/webawesome": "3.2.1-ha.3",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.1.0",
     "@lit-labs/observers": "2.1.0",
@@ -68,13 +68,10 @@
     "@material/mwc-fab": "0.27.0",
     "@material/mwc-floating-label": "0.27.0",
     "@material/mwc-formfield": "patch:@material/mwc-formfield@npm%3A0.27.0#~/.yarn/patches/@material-mwc-formfield-npm-0.27.0-9528cb60f6.patch",
-    "@material/mwc-icon-button": "0.27.0",
     "@material/mwc-linear-progress": "0.27.0",
     "@material/mwc-list": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
-    "@material/mwc-menu": "0.27.0",
     "@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",
@@ -85,16 +82,16 @@
     "@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",
-    "@vibrant/color": "4.0.0",
+    "@vibrant/color": "4.0.4",
     "@vue/web-component-wrapper": "1.3.0",
     "@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",
@@ -108,11 +105,11 @@
     "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",
-    "intl-messageformat": "11.1.1",
+    "intl-messageformat": "11.1.2",
     "js-yaml": "4.1.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -120,9 +117,9 @@
     "lit": "3.3.2",
     "lit-html": "3.3.2",
     "luxon": "3.7.2",
-    "marked": "17.0.1",
+    "marked": "17.0.3",
     "memoize-one": "6.0.0",
-    "node-vibrant": "4.0.3",
+    "node-vibrant": "4.0.4",
     "object-hash": "3.0.0",
     "punycode": "2.3.1",
     "qr-scanner": "1.4.2",
@@ -133,7 +130,7 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.8",
+    "ua-parser-js": "2.0.9",
     "vue": "2.7.16",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
@@ -146,17 +143,18 @@
     "xss": "1.0.15"
   },
   "devDependencies": {
-    "@babel/core": "7.28.6",
+    "@babel/core": "7.29.0",
     "@babel/helper-define-polyfill-provider": "0.6.6",
-    "@babel/plugin-transform-runtime": "7.28.5",
-    "@babel/preset-env": "7.28.6",
-    "@bundle-stats/plugin-webpack-filter": "4.21.8",
-    "@lokalise/node-api": "15.6.0",
+    "@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.57.1",
+    "@lokalise/node-api": "15.6.1",
     "@octokit/auth-oauth-device": "8.0.3",
-    "@octokit/plugin-retry": "8.0.3",
+    "@octokit/plugin-retry": "8.1.0",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.0",
-    "@rspack/core": "1.7.3",
+    "@rsdoctor/rspack-plugin": "1.5.2",
+    "@rspack/core": "1.7.6",
     "@rspack/dev-server": "1.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.25",
@@ -173,7 +171,7 @@
     "@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",
@@ -181,27 +179,27 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.1",
-    "eslint": "9.39.2",
+    "eslint": "9.39.3",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",
     "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-lit": "2.1.1",
+    "eslint-plugin-lit": "2.2.1",
     "eslint-plugin-lit-a11y": "5.1.1",
-    "eslint-plugin-unused-imports": "4.3.0",
-    "eslint-plugin-wc": "3.0.2",
+    "eslint-plugin-unused-imports": "4.4.1",
+    "eslint-plugin-wc": "3.1.0",
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.3",
-    "glob": "13.0.0",
+    "glob": "13.0.6",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "27.4.0",
+    "jsdom": "28.1.0",
     "jszip": "3.10.1",
-    "lint-staged": "16.2.7",
+    "lint-staged": "16.3.1",
     "lit-analyzer": "2.0.3",
     "lodash.merge": "4.6.2",
     "lodash.template": "4.5.0",
@@ -211,12 +209,12 @@
     "rspack-manifest-plugin": "5.2.1",
     "serve": "14.2.5",
     "sinon": "21.0.1",
-    "tar": "7.5.6",
+    "tar": "7.5.9",
     "terser-webpack-plugin": "5.3.16",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.53.1",
-    "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",
@@ -229,13 +227,13 @@
     "clean-css": "5.3.3",
     "@lit/reactive-element": "2.1.2",
     "@fullcalendar/daygrid": "6.1.20",
-    "globals": "17.1.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.0"
+    "node": "24.14.0"
   }
 }

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20260128.5"
+version      = "20260128.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -12,7 +12,7 @@ readme       = "README.md"
 authors      = [
     {name = "The Home Assistant Authors", email = "hello@home-assistant.io"}
 ]
-requires-python = ">=3.13.0"
+requires-python = ">=3.14.0"
 
 [project.urls]
 "Homepage" = "https://github.com/home-assistant/frontend"

script/bootstrap

@@ -16,6 +16,12 @@ if [[ -n "$DEVCONTAINER" ]]; then
         nvm install --reinstall-packages-from="$nodeCurrent" --default
         nvm uninstall "$nodeCurrent"
     fi
+
+    # install yarn if not already available
+    if ! command -v yarn &> /dev/null; then
+        npm install -g corepack
+        yes | yarn
+    fi
 fi
 
 if ! command -v yarn &> /dev/null; then

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>
@@ -31,7 +35,7 @@ export class HaAuthFormString extends HaFormString {
           right: 8px;
           inset-inline-start: initial;
           inset-inline-end: 8px;
-          --mdc-icon-button-size: 40px;
+          --ha-icon-button-size: 40px;
           --mdc-icon-size: 20px;
           color: var(--secondary-text-color);
           direction: var(--direction);

src/auth/ha-authorize.ts

@@ -194,7 +194,6 @@ export class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
           button-style
           native-name
           @value-changed=${this._languageChanged}
-          inline-arrow
         ></ha-language-picker>
         <ha-button
           appearance="plain"

src/common/const.ts

@@ -116,3 +116,6 @@ export const UNIT_F = "°F";
 
 /** Entity ID of the default view. */
 export const DEFAULT_VIEW_ENTITY_ID = "group.default_view";
+
+/** String to visually separate labels on UI */
+export const STRINGS_SEPARATOR_DOT = " · ";

src/common/datetime/format_date.ts

@@ -210,3 +210,39 @@ const formatDateWeekdayShortMem = memoizeOne(
       timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
     })
 );
+
+// Mon, Aug 10
+export const formatDateWeekdayVeryShortDate = (
+  dateObj: Date,
+  locale: FrontendLocaleData,
+  config: HassConfig
+) =>
+  formatDateWeekdayVeryShortDateMem(locale, config.time_zone).format(dateObj);
+
+const formatDateWeekdayVeryShortDateMem = memoizeOne(
+  (locale: FrontendLocaleData, serverTimeZone: string) =>
+    new Intl.DateTimeFormat(locale.language, {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+    })
+);
+
+// Mon, Aug 10, 2021
+export const formatDateWeekdayShortDate = (
+  dateObj: Date,
+  locale: FrontendLocaleData,
+  config: HassConfig
+) => formatDateWeekdayShortDateMem(locale, config.time_zone).format(dateObj);
+
+const formatDateWeekdayShortDateMem = memoizeOne(
+  (locale: FrontendLocaleData, serverTimeZone: string) =>
+    new Intl.DateTimeFormat(locale.language, {
+      weekday: "short",
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+      timeZone: resolveTimeZone(locale.time_zone, serverTimeZone),
+    })
+);

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

@@ -3,13 +3,14 @@ import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import type { FrontendLocaleData } from "../../data/translation";
 import { TimeZone } from "../../data/translation";
-import type { HomeAssistant } from "../../types";
+import type { HomeAssistant, ValuePart } from "../../types";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { DURATION_UNITS, formatDuration } from "../datetime/format_duration";
 import { formatTime } from "../datetime/format_time";
 import {
   formatNumber,
+  formatNumberToParts,
   getNumberFormatOptions,
   isNumericFromAttributes,
 } from "../number/format_number";
@@ -51,8 +52,36 @@ export const computeStateDisplayFromEntityAttributes = (
   attributes: any,
   state: string
 ): string => {
+  const parts = computeStateToPartsFromEntityAttributes(
+    localize,
+    locale,
+    sensorNumericDeviceClasses,
+    config,
+    entity,
+    entityId,
+    attributes,
+    state
+  );
+  return parts.map((part) => part.value).join("");
+};
+
+const computeStateToPartsFromEntityAttributes = (
+  localize: LocalizeFunc,
+  locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
+  config: HassConfig,
+  entity: EntityRegistryDisplayEntry | undefined,
+  entityId: string,
+  attributes: any,
+  state: string
+): ValuePart[] => {
   if (state === UNKNOWN || state === UNAVAILABLE) {
-    return localize(`state.default.${state}`);
+    return [
+      {
+        type: "value",
+        value: localize(`state.default.${state}`),
+      },
+    ];
   }
 
   const domain = computeDomain(entityId);
@@ -73,19 +102,27 @@ export const computeStateDisplayFromEntityAttributes = (
       DURATION_UNITS.includes(attributes.unit_of_measurement)
     ) {
       try {
-        return formatDuration(
-          locale,
-          state,
-          attributes.unit_of_measurement,
-          entity?.display_precision
-        );
+        return [
+          {
+            type: "value",
+            value: formatDuration(
+              locale,
+              state,
+              attributes.unit_of_measurement,
+              entity?.display_precision
+            ),
+          },
+        ];
       } catch (_err) {
         // fallback to default
       }
     }
+
+    // state is monetary
     if (attributes.device_class === "monetary") {
+      let parts: Record<string, string>[] = [];
       try {
-        return formatNumber(state, locale, {
+        parts = formatNumberToParts(state, locale, {
           style: "currency",
           currency: attributes.unit_of_measurement,
           minimumFractionDigits: 2,
@@ -96,10 +133,37 @@ export const computeStateDisplayFromEntityAttributes = (
           ),
         });
       } catch (_err) {
-        // fallback to default
+        // fallback to default numeric formatting below
+      }
+
+      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[] = [];
+
+        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;
       }
     }
 
+    // default processing of numeric values
     const value = formatNumber(
       state,
       locale,
@@ -114,10 +178,14 @@ export const computeStateDisplayFromEntityAttributes = (
       attributes.unit_of_measurement;
 
     if (unit) {
-      return `${value}${blankBeforeUnit(unit, locale)}${unit}`;
+      return [
+        { type: "value", value: value },
+        { type: "literal", value: blankBeforeUnit(unit, locale) },
+        { type: "unit", value: unit },
+      ];
     }
 
-    return value;
+    return [{ type: "value", value: value }];
   }
 
   if (["date", "input_datetime", "time"].includes(domain)) {
@@ -129,36 +197,51 @@ export const computeStateDisplayFromEntityAttributes = (
       const components = state.split(" ");
       if (components.length === 2) {
         // Date and time.
-        return formatDateTime(
-          new Date(components.join("T")),
-          { ...locale, time_zone: TimeZone.local },
-          config
-        );
+        return [
+          {
+            type: "value",
+            value: formatDateTime(
+              new Date(components.join("T")),
+              { ...locale, time_zone: TimeZone.local },
+              config
+            ),
+          },
+        ];
       }
       if (components.length === 1) {
         if (state.includes("-")) {
           // Date only.
-          return formatDate(
-            new Date(`${state}T00:00`),
-            { ...locale, time_zone: TimeZone.local },
-            config
-          );
+          return [
+            {
+              type: "value",
+              value: formatDate(
+                new Date(`${state}T00:00`),
+                { ...locale, time_zone: TimeZone.local },
+                config
+              ),
+            },
+          ];
         }
         if (state.includes(":")) {
           // Time only.
           const now = new Date();
-          return formatTime(
-            new Date(`${now.toISOString().split("T")[0]}T${state}`),
-            { ...locale, time_zone: TimeZone.local },
-            config
-          );
+          return [
+            {
+              type: "value",
+              value: formatTime(
+                new Date(`${now.toISOString().split("T")[0]}T${state}`),
+                { ...locale, time_zone: TimeZone.local },
+                config
+              ),
+            },
+          ];
         }
       }
-      return state;
+      return [{ type: "value", value: state }];
     } catch (_e) {
       // Formatting methods may throw error if date parsing doesn't go well,
       // just return the state string in that case.
-      return state;
+      return [{ type: "value", value: state }];
     }
   }
 
@@ -182,25 +265,58 @@ export const computeStateDisplayFromEntityAttributes = (
     (domain === "sensor" && attributes.device_class === "timestamp")
   ) {
     try {
-      return formatDateTime(new Date(state), locale, config);
+      return [
+        {
+          type: "value",
+          value: formatDateTime(new Date(state), locale, config),
+        },
+      ];
     } catch (_err) {
-      return state;
+      return [{ type: "value", value: state }];
     }
   }
 
-  return (
-    (entity?.translation_key &&
-      localize(
-        `component.${entity.platform}.entity.${domain}.${entity.translation_key}.state.${state}`
-      )) ||
-    // Return device class translation
-    (attributes.device_class &&
-      localize(
-        `component.${domain}.entity_component.${attributes.device_class}.state.${state}`
-      )) ||
-    // Return default translation
-    localize(`component.${domain}.entity_component._.state.${state}`) ||
-    // We don't know! Return the raw state.
-    state
+  return [
+    {
+      type: "value",
+      value:
+        (entity?.translation_key &&
+          localize(
+            `component.${entity.platform}.entity.${domain}.${entity.translation_key}.state.${state}`
+          )) ||
+        // Return device class translation
+        (attributes.device_class &&
+          localize(
+            `component.${domain}.entity_component.${attributes.device_class}.state.${state}`
+          )) ||
+        // Return default translation
+        localize(`component.${domain}.entity_component._.state.${state}`) ||
+        // We don't know! Return the raw state.
+        state,
+    },
+  ];
+};
+
+export const computeStateToParts = (
+  localize: LocalizeFunc,
+  stateObj: HassEntity,
+  locale: FrontendLocaleData,
+  sensorNumericDeviceClasses: string[],
+  config: HassConfig,
+  entities: HomeAssistant["entities"],
+  state?: string
+): ValuePart[] => {
+  const entity = entities?.[stateObj.entity_id] as
+    | EntityRegistryDisplayEntry
+    | undefined;
+  return computeStateToPartsFromEntityAttributes(
+    localize,
+    locale,
+    sensorNumericDeviceClasses,
+    config,
+    entity,
+    stateObj.entity_id,
+    stateObj.attributes,
+    state !== undefined ? state : stateObj.state
   );
 };

src/common/entity/context/get_entity_context.ts

@@ -38,6 +38,18 @@ export const getEntityContext = (
   return getEntityEntryContext(entry, entities, devices, areas, floors);
 };
 
+export const getEntityAreaId = (
+  entityId: string,
+  entities: HomeAssistant["entities"],
+  devices: HomeAssistant["devices"]
+): string | undefined => {
+  const entry = entities[entityId];
+  if (!entry) return undefined;
+  const deviceId = entry.device_id;
+  const device = deviceId ? devices[deviceId] : undefined;
+  return entry.area_id || device?.area_id || undefined;
+};
+
 export const getEntityEntryContext = (
   entry:
     | EntityRegistryDisplayEntry

src/common/number/format_number.ts

@@ -5,7 +5,6 @@ import type {
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import type { FrontendLocaleData } from "../../data/translation";
 import { NumberFormat } from "../../data/translation";
-import { round } from "./round";
 
 /**
  * Returns true if the entity is considered numeric based on the attributes it has
@@ -52,7 +51,22 @@ export const formatNumber = (
   num: string | number,
   localeOptions?: FrontendLocaleData,
   options?: Intl.NumberFormatOptions
-): string => {
+): string =>
+  formatNumberToParts(num, localeOptions, options)
+    .map((part) => part.value)
+    .join("");
+
+/**
+ * Returns an array of objects containing the formatted number in parts
+ * Similar to Intl.NumberFormat.prototype.formatToParts()
+ *
+ * Input params - same as for formatNumber()
+ */
+export const formatNumberToParts = (
+  num: string | number,
+  localeOptions?: FrontendLocaleData,
+  options?: Intl.NumberFormatOptions
+): any[] => {
   const locale = localeOptions
     ? numberFormatToLocale(localeOptions)
     : undefined;
@@ -71,7 +85,7 @@ export const formatNumber = (
     return new Intl.NumberFormat(
       locale,
       getDefaultFormatOptions(num, options)
-    ).format(Number(num));
+    ).formatToParts(Number(num));
   }
 
   if (
@@ -86,15 +100,10 @@ export const formatNumber = (
         ...options,
         useGrouping: false,
       })
-    ).format(Number(num));
+    ).formatToParts(Number(num));
   }
 
-  if (typeof num === "string") {
-    return num;
-  }
-  return `${round(num, options?.maximumFractionDigits).toString()}${
-    options?.style === "currency" ? ` ${options.currency}` : ""
-  }`;
+  return [{ type: "literal", value: num }];
 };
 
 /**

src/common/number/normalize-by-si-prefix.ts

@@ -0,0 +1,28 @@
+const SI_PREFIX_MULTIPLIERS: Record<string, number> = {
+  T: 1e12,
+  G: 1e9,
+  M: 1e6,
+  k: 1e3,
+  m: 1e-3,
+  "\u00B5": 1e-6, // µ (micro sign)
+  "\u03BC": 1e-6, // μ (greek small letter mu)
+};
+
+/**
+ * Normalize a numeric value by detecting SI unit prefixes (T, G, M, k, m, µ).
+ * Only applies when the unit is longer than 1 character and starts with a
+ * recognized prefix, avoiding false positives on standalone units like "m" (meters).
+ */
+export const normalizeValueBySIPrefix = (
+  value: number,
+  unit: string | undefined
+): number => {
+  if (!unit || unit.length <= 1) {
+    return value;
+  }
+  const prefix = unit[0];
+  if (prefix in SI_PREFIX_MULTIPLIERS) {
+    return value * SI_PREFIX_MULTIPLIERS[prefix];
+  }
+  return value;
+};

src/common/translations/entity-state.ts

@@ -12,6 +12,10 @@ export type FormatEntityStateFunc = (
   stateObj: HassEntity,
   state?: string
 ) => string;
+export type FormatEntityStateToPartsFunc = (
+  stateObj: HassEntity,
+  state?: string
+) => ValuePart[];
 export type FormatEntityAttributeValueFunc = (
   stateObj: HassEntity,
   attribute: string,
@@ -46,12 +50,13 @@ export const computeFormatFunctions = async (
   sensorNumericDeviceClasses: string[]
 ): Promise<{
   formatEntityState: FormatEntityStateFunc;
+  formatEntityStateToParts: FormatEntityStateToPartsFunc;
   formatEntityAttributeValue: FormatEntityAttributeValueFunc;
   formatEntityAttributeValueToParts: FormatEntityAttributeValueToPartsFunc;
   formatEntityAttributeName: FormatEntityAttributeNameFunc;
   formatEntityName: FormatEntityNameFunc;
 }> => {
-  const { computeStateDisplay } =
+  const { computeStateDisplay, computeStateToParts } =
     await import("../entity/compute_state_display");
   const {
     computeAttributeValueDisplay,
@@ -70,6 +75,16 @@ export const computeFormatFunctions = async (
         entities,
         state
       ),
+    formatEntityStateToParts: (stateObj, state) =>
+      computeStateToParts(
+        localize,
+        stateObj,
+        locale,
+        sensorNumericDeviceClasses,
+        config,
+        entities,
+        state
+      ),
     formatEntityAttributeValue: (stateObj, attribute, value) =>
       computeAttributeValueDisplay(
         localize,

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/view-transition.ts

@@ -1,3 +1,15 @@
+let isViewTransitionDisabled = false;
+try {
+  isViewTransitionDisabled =
+    window.localStorage.getItem("disableViewTransition") === "true";
+} catch {
+  // ignore
+}
+
+export const setViewTransitionDisabled = (disabled: boolean): void => {
+  isViewTransitionDisabled = disabled;
+};
+
 /**
  * Executes a synchronous callback within a View Transition if supported, otherwise runs it directly.
  *
@@ -14,7 +26,7 @@
 export const withViewTransition = (
   callback: (viewTransitionAvailable: boolean) => void
 ): Promise<void> => {
-  if (!document.startViewTransition) {
+  if (!document.startViewTransition || isViewTransitionDisabled) {
     callback(false);
     return Promise.resolve();
   }

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

@@ -18,8 +18,11 @@ import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
 import { ensureArray } from "../../common/array/ensure-array";
 import { getAllGraphColors } from "../../common/color/colors";
+import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
 import { listenMediaQuery } from "../../common/dom/media_query";
+import { afterNextRender } from "../../common/util/render-status";
+import { filterXSS } from "../../common/util/xss";
 import { themesContext } from "../../data/context";
 import type { Themes } from "../../data/ws-themes";
 import type { ECOption } from "../../resources/echarts/echarts";
@@ -27,7 +30,6 @@ import type { HomeAssistant } from "../../types";
 import { isMac } from "../../util/is_mac";
 import "../chips/ha-assist-chip";
 import "../ha-icon-button";
-import { filterXSS } from "../../common/util/xss";
 import { formatTimeLabel } from "./axis-label";
 import { downSampleLineData } from "./down-sample";
 
@@ -92,10 +94,18 @@ export class HaChartBase extends LitElement {
 
   private _resizeAnimationDuration?: number;
 
+  private _suspendResize = false;
+
+  private _layoutTransitionActive = false;
+
   // @ts-ignore
   private _resizeController = new ResizeController(this, {
     callback: () => {
       if (this.chart) {
+        if (this._suspendResize) {
+          this._shouldResizeChart = true;
+          return;
+        }
         if (!this.chart.getZr().animation.isFinished()) {
           this._shouldResizeChart = true;
         } else {
@@ -113,8 +123,11 @@ export class HaChartBase extends LitElement {
 
   private _originalZrFlush?: () => void;
 
+  private _pendingSetup = false;
+
   public disconnectedCallback() {
     super.disconnectedCallback();
+    this._pendingSetup = false;
     while (this._listeners.length) {
       this._listeners.pop()!();
     }
@@ -126,7 +139,13 @@ export class HaChartBase extends LitElement {
   public connectedCallback() {
     super.connectedCallback();
     if (this.hasUpdated) {
-      this._setupChart();
+      this._pendingSetup = true;
+      afterNextRender(() => {
+        if (this.isConnected && this._pendingSetup) {
+          this._pendingSetup = false;
+          this._setupChart();
+        }
+      });
     }
 
     this._listeners.push(
@@ -181,6 +200,26 @@ export class HaChartBase extends LitElement {
         () => window.removeEventListener("keyup", handleKeyUp)
       );
     }
+
+    const handleLayoutTransition: EventListener = (ev) => {
+      const event = ev as HASSDomEvent<HASSDomEvents["hass-layout-transition"]>;
+      this._layoutTransitionActive = Boolean(event.detail?.active);
+      this.toggleAttribute(
+        "layout-transition-active",
+        this._layoutTransitionActive
+      );
+      this._suspendResize = this._layoutTransitionActive;
+      if (!this._suspendResize) {
+        this._resizeChartIfNeeded();
+      }
+    };
+    window.addEventListener("hass-layout-transition", handleLayoutTransition);
+    this._listeners.push(() =>
+      window.removeEventListener(
+        "hass-layout-transition",
+        handleLayoutTransition
+      )
+    );
   }
 
   protected firstUpdated() {
@@ -988,19 +1027,29 @@ export class HaChartBase extends LitElement {
   }
 
   private _handleChartRenderFinished = () => {
-    if (this._shouldResizeChart) {
-      this.chart?.resize({
-        animation:
-          this._reducedMotion ||
-          typeof this._resizeAnimationDuration !== "number"
-            ? undefined
-            : { duration: this._resizeAnimationDuration },
-      });
-      this._shouldResizeChart = false;
-      this._resizeAnimationDuration = undefined;
-    }
+    this._resizeChartIfNeeded();
   };
 
+  private _resizeChartIfNeeded() {
+    if (!this.chart || !this._shouldResizeChart) {
+      return;
+    }
+    if (this._suspendResize) {
+      return;
+    }
+    if (!this.chart.getZr().animation.isFinished()) {
+      return;
+    }
+    this.chart.resize({
+      animation:
+        this._reducedMotion || typeof this._resizeAnimationDuration !== "number"
+          ? undefined
+          : { duration: this._resizeAnimationDuration },
+    });
+    this._shouldResizeChart = false;
+    this._resizeAnimationDuration = undefined;
+  }
+
   private _compareCustomLegendOptions(
     oldOptions: ECOption | undefined,
     newOptions: ECOption | undefined
@@ -1022,11 +1071,18 @@ export class HaChartBase extends LitElement {
       display: block;
       position: relative;
       letter-spacing: normal;
+      overflow: visible;
+    }
+    :host([layout-transition-active]),
+    :host([layout-transition-active]) .container,
+    :host([layout-transition-active]) .chart-container {
+      overflow: hidden;
     }
     .container {
       display: flex;
       flex-direction: column;
       position: relative;
+      overflow: visible;
     }
     .container.has-height {
       max-height: var(--chart-max-height, 350px);
@@ -1034,6 +1090,7 @@ export class HaChartBase extends LitElement {
     .chart-container {
       width: 100%;
       max-height: var(--chart-max-height, 350px);
+      overflow: visible;
     }
     .has-height .chart-container {
       flex: 1;
@@ -1058,13 +1115,13 @@ export class HaChartBase extends LitElement {
     .chart-controls ::slotted(ha-icon-button) {
       background: var(--card-background-color);
       border-radius: var(--ha-border-radius-sm);
-      --mdc-icon-button-size: 32px;
+      --ha-icon-button-size: 32px;
       color: var(--primary-color);
       border: 1px solid var(--divider-color);
     }
     .chart-controls.small ha-icon-button,
     .chart-controls.small ::slotted(ha-icon-button) {
-      --mdc-icon-button-size: 22px;
+      --ha-icon-button-size: 22px;
       --mdc-icon-size: 16px;
     }
     .chart-controls ha-icon-button.inactive,

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

@@ -58,7 +58,7 @@ export class HaSankeyChart extends LitElement {
 
   @property({ type: Boolean }) public vertical = false;
 
-  @property({ type: String, attribute: false }) public valueFormatter?: (
+  @property({ attribute: false }) public valueFormatter?: (
     value: number
   ) => string;
 

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

@@ -29,7 +29,7 @@ export class HaSunburstChart extends LitElement {
 
   @property({ attribute: false }) public data?: SunburstNode;
 
-  @property({ type: String, attribute: false }) public valueFormatter?: (
+  @property({ attribute: false }) public valueFormatter?: (
     value: number
   ) => string;
 

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

@@ -50,16 +50,16 @@ export class StateHistoryChartLine extends LitElement {
 
   @property({ attribute: false }) public endTime!: Date;
 
-  @property({ attribute: false, type: Number }) public paddingYAxis = 0;
+  @property({ attribute: false }) public paddingYAxis = 0;
 
-  @property({ attribute: false, type: Number }) public chartIndex?;
+  @property({ attribute: false }) public chartIndex?;
 
   @property({ attribute: "logarithmic-scale", type: Boolean })
   public logarithmicScale = false;
 
-  @property({ attribute: false, type: Number }) public minYAxis?: number;
+  @property({ attribute: false }) public minYAxis?: number;
 
-  @property({ attribute: false, type: Number }) public maxYAxis?: number;
+  @property({ attribute: false }) public maxYAxis?: number;
 
   @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;
 
@@ -306,7 +306,10 @@ export class StateHistoryChartLine extends LitElement {
         visualMap: this._visualMap,
         tooltip: {
           trigger: "axis",
-          appendTo: document.body,
+          renderMode: "html",
+          position: "bottom",
+          align: "center",
+          confine: true,
           formatter: this._renderTooltip,
         },
       };
@@ -716,6 +719,18 @@ export class StateHistoryChartLine extends LitElement {
       // Add an entry for final values
       pushData(endTime, prevValues);
 
+      // For sensors, append current state if viewing recent data
+      const now = new Date();
+      // allow 1s of leeway for "now"
+      const isUpToNow = now.getTime() - endTime.getTime() <= 1000;
+      if (domain === "sensor" && isUpToNow && data.length === 1) {
+        const stateObj = this.hass.states[states.entity_id];
+        const currentValue = stateObj ? safeParseFloat(stateObj.state) : null;
+        if (currentValue !== null) {
+          data[0].data!.push([now, currentValue]);
+        }
+      }
+
       // Concat two arrays
       Array.prototype.push.apply(datasets, data);
     });

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

@@ -47,9 +47,9 @@ export class StateHistoryChartTimeline extends LitElement {
 
   @property({ attribute: false }) public endTime!: Date;
 
-  @property({ attribute: false, type: Number }) public paddingYAxis = 0;
+  @property({ attribute: false }) public paddingYAxis = 0;
 
-  @property({ attribute: false, type: Number }) public chartIndex?;
+  @property({ attribute: false }) public chartIndex?;
 
   @property({ attribute: "hide-reset-button", type: Boolean })
   public hideResetButton?: boolean;
@@ -255,7 +255,10 @@ export class StateHistoryChartTimeline extends LitElement {
         right: rtl ? labelWidth : 1,
       },
       tooltip: {
-        appendTo: document.body,
+        renderMode: "html",
+        position: "bottom",
+        align: "center",
+        confine: true,
         formatter: this._renderTooltip,
       },
     };

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

@@ -60,7 +60,7 @@ export class StateHistoryCharts extends LitElement {
 
   @property({ type: Boolean, attribute: "up-to-now" }) public upToNow = false;
 
-  @property({ attribute: false, type: Number }) public hoursToShow?: number;
+  @property({ attribute: false }) public hoursToShow?: number;
 
   @property({ attribute: "show-names", type: Boolean }) public showNames = true;
 
@@ -73,9 +73,9 @@ export class StateHistoryCharts extends LitElement {
   @property({ attribute: "logarithmic-scale", type: Boolean })
   public logarithmicScale = false;
 
-  @property({ attribute: false, type: Number }) public minYAxis?: number;
+  @property({ attribute: false }) public minYAxis?: number;
 
-  @property({ attribute: false, type: Number }) public maxYAxis?: number;
+  @property({ attribute: false }) public maxYAxis?: number;
 
   @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;
 

src/components/chart/statistics-chart.ts

@@ -62,14 +62,14 @@ export class StatisticsChart extends LitElement {
 
   @property({ attribute: false }) public endTime?: Date;
 
-  @property({ attribute: false, type: Array })
+  @property({ attribute: false })
   public statTypes: StatisticType[] = ["sum", "min", "mean", "max"];
 
   @property({ attribute: false }) public chartType: "line" | "bar" = "line";
 
-  @property({ attribute: false, type: Number }) public minYAxis?: number;
+  @property({ attribute: false }) public minYAxis?: number;
 
-  @property({ attribute: false, type: Number }) public maxYAxis?: number;
+  @property({ attribute: false }) public maxYAxis?: number;
 
   @property({ attribute: "fit-y-data", type: Boolean }) public fitYData = false;
 
@@ -335,7 +335,10 @@ export class StatisticsChart extends LitElement {
       },
       tooltip: {
         trigger: "axis",
-        appendTo: document.body,
+        renderMode: "html",
+        position: "bottom",
+        align: "center",
+        confine: true,
         formatter: this._renderTooltip,
       },
     };
@@ -572,6 +575,7 @@ export class StatisticsChart extends LitElement {
       let firstSum: number | null | undefined = null;
       stats.forEach((stat) => {
         const startDate = new Date(stat.start);
+        const endDate = new Date(stat.end);
         if (prevDate === startDate) {
           return;
         }
@@ -601,10 +605,66 @@ export class StatisticsChart extends LitElement {
           dataValues.push(val);
         });
         if (!this._hiddenStats.has(statistic_id)) {
-          pushData(startDate, new Date(stat.end), dataValues);
+          pushData(
+            startDate,
+            endDate.getTime() < endTime.getTime() ? endDate : endTime,
+            dataValues
+          );
         }
       });
 
+      // Close out the last stat segment at prevEndTime
+      const lastEndTime = prevEndTime;
+      const lastValues = prevValues;
+      if (lastEndTime && lastValues) {
+        statDataSets.forEach((d, i) => {
+          d.data!.push(
+            this._transformDataValue([lastEndTime, ...lastValues[i]!])
+          );
+        });
+      }
+
+      // Append current state if viewing recent data
+      const now = new Date();
+      // allow 10m of leeway for "now", because stats are 5 minute aggregated
+      const isUpToNow = now.getTime() - endTime.getTime() <= 600000;
+      if (isUpToNow) {
+        // Skip external statistics (they have ":" in the ID)
+        if (!statistic_id.includes(":")) {
+          const stateObj = this.hass.states[statistic_id];
+          if (stateObj) {
+            const currentValue = parseFloat(stateObj.state);
+            if (
+              isFinite(currentValue) &&
+              !this._hiddenStats.has(statistic_id)
+            ) {
+              // 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 (
+                  type === bandTop &&
+                  this.chartType === "line" &&
+                  drawBands &&
+                  !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
+                ) {
+                  // For band chart, current value is both min and max, so diff is 0
+                  val.push(0);
+                  val.push(currentValue);
+                } else {
+                  val.push(currentValue);
+                }
+                statDataSets[i].data!.push(
+                  this._transformDataValue([now, ...val])
+                );
+              });
+            }
+          }
+        }
+      }
+
       // Concat two arrays
       Array.prototype.push.apply(totalDataSets, statDataSets);
       Array.prototype.push.apply(legendData, statLegendData);

src/components/chart/timeline-color.ts

@@ -6,6 +6,7 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { FIXED_DOMAIN_STATES } from "../../common/entity/get_states";
 import { stateColorProperties } from "../../common/entity/state_color";
+import { slugify } from "../../common/string/slugify";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
 import { computeCssValue } from "../../resources/css-variables";
 
@@ -32,6 +33,22 @@ function computeTimelineStateColor(
     return computeCssValue("--history-unknown-color", computedStyles);
   }
 
+  const domain = computeDomain(stateObj.entity_id);
+
+  // Zone states for person/device_tracker don't have specific CSS color variables,
+  // so they all fall back to the same --state-person-active-color.
+  // Only use a custom CSS variable if explicitly defined (e.g. --state-person-kitchen-color),
+  // otherwise return undefined to get unique colors from the generic color handler.
+  if (
+    (domain === "person" || domain === "device_tracker") &&
+    !((FIXED_DOMAIN_STATES[domain] || []) as readonly string[]).includes(state)
+  ) {
+    return computeCssValue(
+      `--state-${domain}-${slugify(state, "_")}-color`,
+      computedStyles
+    );
+  }
+
   const properties = stateColorProperties(stateObj, state);
 
   if (!properties) {
@@ -41,8 +58,6 @@ function computeTimelineStateColor(
   const rgb = computeCssValue(properties, computedStyles);
 
   if (!rgb) return undefined;
-
-  const domain = computeDomain(stateObj.entity_id);
   const shade = DOMAIN_STATE_SHADES[domain]?.[state] as number | number;
   if (!shade) {
     return rgb;

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

@@ -9,10 +9,13 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "../ha-button";
-import { createCloseHeading } from "../ha-dialog";
+import "../ha-dialog-footer";
+import "../ha-icon-button";
 import "../ha-list";
 import "../ha-list-item";
 import "../ha-sortable";
+import "../ha-svg-icon";
+import "../ha-dialog";
 import type {
   DataTableColumnContainer,
   DataTableColumnData,
@@ -29,17 +32,49 @@ export class DialogDataTableSettings extends LitElement {
 
   @state() private _hiddenColumns?: string[];
 
+  private _lastFixedKeys: string[] = [];
+
+  @state() private _open = false;
+
   public showDialog(params: DataTableSettingsDialogParams) {
     this._params = params;
-    this._columnOrder = params.columnOrder;
+    this._columnOrder = this._preserveLastFixed(params.columnOrder);
     this._hiddenColumns = params.hiddenColumns;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed() {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
+  private _lastFixedCount(): number {
+    const lastFixedKeys = Object.keys(this._params!.columns).filter(
+      (col) => this._params!.columns[col].lastFixed
+    );
+    if (lastFixedKeys.length) {
+      this._lastFixedKeys = lastFixedKeys;
+    }
+    return lastFixedKeys.length;
+  }
+
+  private _preserveLastFixed(columnOrder) {
+    let strippedColumnOrder;
+    const lastFixedCount = this._lastFixedCount();
+    if (lastFixedCount && columnOrder) {
+      strippedColumnOrder = [...columnOrder];
+      strippedColumnOrder.splice(
+        columnOrder.length - lastFixedCount,
+        lastFixedCount
+      );
+    }
+    return strippedColumnOrder;
+  }
+
   private _sortedColumns = memoizeOne(
     (
       columns: DataTableColumnContainer,
@@ -47,7 +82,7 @@ export class DialogDataTableSettings extends LitElement {
       hiddenColumns: string[] | undefined
     ) =>
       Object.keys(columns)
-        .filter((col) => !columns[col].hidden)
+        .filter((col) => !columns[col].hidden && !columns[col].lastFixed)
         .sort((a, b) => {
           const orderA = columnOrder?.indexOf(a) ?? -1;
           const orderB = columnOrder?.indexOf(b) ?? -1;
@@ -92,12 +127,10 @@ export class DialogDataTableSettings extends LitElement {
 
     return html`
       <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${createCloseHeading(
-          this.hass,
-          localize("ui.components.data-table.settings.header")
-        )}
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${localize("ui.components.data-table.settings.header")}
+        @closed=${this._dialogClosed}
       >
         <ha-sortable
           @item-moved=${this._columnMoved}
@@ -152,15 +185,17 @@ export class DialogDataTableSettings extends LitElement {
             )}
           </ha-list>
         </ha-sortable>
-        <ha-button
-          appearance="plain"
-          slot="secondaryAction"
-          @click=${this._reset}
-          >${localize("ui.components.data-table.settings.restore")}</ha-button
-        >
-        <ha-button slot="primaryAction" @click=${this.closeDialog}>
-          ${localize("ui.components.data-table.settings.done")}
-        </ha-button>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this._reset}
+            >${localize("ui.components.data-table.settings.restore")}</ha-button
+          >
+          <ha-button slot="primaryAction" @click=${this.closeDialog}>
+            ${localize("ui.components.data-table.settings.done")}
+          </ha-button>
+        </ha-dialog-footer>
       </ha-dialog>
     `;
   }
@@ -185,7 +220,8 @@ export class DialogDataTableSettings extends LitElement {
 
     this._columnOrder = columnOrder;
 
-    this._params!.onUpdate(this._columnOrder, this._hiddenColumns);
+    const reportedOrder = columnOrder.concat(this._lastFixedKeys);
+    this._params!.onUpdate(reportedOrder, this._hiddenColumns);
   }
 
   private _toggle(ev) {
@@ -266,7 +302,8 @@ export class DialogDataTableSettings extends LitElement {
 
     this._hiddenColumns = hidden;
 
-    this._params!.onUpdate(this._columnOrder, this._hiddenColumns);
+    const reportedOrder = this._columnOrder.concat(this._lastFixedKeys);
+    this._params!.onUpdate(reportedOrder, this._hiddenColumns);
   }
 
   private _reset() {
@@ -282,21 +319,9 @@ export class DialogDataTableSettings extends LitElement {
       haStyleDialog,
       css`
         ha-dialog {
-          --mdc-dialog-max-width: 500px;
           --dialog-z-index: 10;
           --dialog-content-padding: 0 8px;
         }
-        @media all and (max-width: 451px) {
-          ha-dialog {
-            --vertical-align-dialog: flex-start;
-            --dialog-surface-margin-top: 250px;
-            --ha-dialog-border-radius: var(--ha-border-radius-4xl)
-              var(--ha-border-radius-4xl) var(--ha-border-radius-square)
-              var(--ha-border-radius-square);
-            --mdc-dialog-min-height: calc(100% - 250px);
-            --mdc-dialog-max-height: calc(100% - 250px);
-          }
-        }
         ha-list-item {
           --mdc-list-side-padding: 12px;
           overflow: visible;

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

@@ -13,6 +13,7 @@ import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
+import { STRINGS_SEPARATOR_DOT } from "../../common/const";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stringCompare } from "../../common/string/compare";
@@ -85,6 +86,7 @@ export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
   flex?: number;
   forceLTR?: boolean;
   hidden?: boolean;
+  lastFixed?: boolean;
 }
 
 export type ClonedDataTableColumnData = Omit<DataTableColumnData, "title"> & {
@@ -116,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}
@@ -130,12 +130,9 @@ export class HaDataTable extends LitElement {
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: String }) public id = "id";
 
-  @property({ attribute: false, type: String }) public noDataText?: string;
+  @property({ attribute: false }) public noDataText?: string;
 
-  @property({ attribute: false, type: String }) public searchLabel?: string;
-
-  @property({ type: Boolean, attribute: "no-label-float" })
-  public noLabelFloat? = false;
+  @property({ attribute: false }) public searchLabel?: string;
 
   @property({ type: String }) public filter = "";
 
@@ -358,6 +355,11 @@ export class HaDataTable extends LitElement {
         .sort((a, b) => {
           const orderA = columnOrder!.indexOf(a);
           const orderB = columnOrder!.indexOf(b);
+          const fixedA = Boolean(columns[a].lastFixed);
+          const fixedB = Boolean(columns[b].lastFixed);
+          if (fixedA !== fixedB) {
+            return fixedA ? 1 : -1;
+          }
           if (orderA !== orderB) {
             if (orderA === -1) {
               return 1;
@@ -393,7 +395,6 @@ export class HaDataTable extends LitElement {
                     .hass=${this.hass}
                     @value-changed=${this._handleSearchChange}
                     .label=${this.searchLabel}
-                    .noLabelFloat=${this.noLabelFloat}
                   ></search-input>
                 </div>
               `
@@ -427,9 +428,9 @@ export class HaDataTable extends LitElement {
                       <ha-checkbox
                         class="mdc-data-table__row-checkbox"
                         @change=${this._handleHeaderRowCheckboxClick}
-                        .indeterminate=${this._checkedRows.length &&
+                        .indeterminate=${!!this._checkedRows.length &&
                         this._checkedRows.length !== this._checkableRowsCount}
-                        .checked=${this._checkedRows.length &&
+                        .checked=${!!this._checkedRows.length &&
                         this._checkedRows.length === this._checkableRowsCount}
                       >
                       </ha-checkbox>
@@ -516,7 +517,6 @@ export class HaDataTable extends LitElement {
                     this._filteredData,
                     localize,
                     this.appendRow,
-                    this.hasFab,
                     this.groupColumn,
                     this.groupOrder,
                     this._collapsedGroups,
@@ -636,7 +636,7 @@ export class HaDataTable extends LitElement {
                           .map(
                             ([key2, column2], i) =>
                               html`${i !== 0
-                                ? " · "
+                                ? STRINGS_SEPARATOR_DOT
                                 : nothing}${column2.template
                                 ? column2.template(row)
                                 : row[key2]}`
@@ -713,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) {
@@ -810,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 }];
     }
   );
 
@@ -868,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,
@@ -1088,7 +1084,7 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__row.empty-row {
           height: var(
             --data-table-empty-row-height,
-            var(--data-table-row-height, 52px)
+            var(--safe-area-inset-bottom, 0px)
           );
         }
 
@@ -1192,6 +1188,7 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__cell--numeric {
           text-align: var(--float-end);
+          direction: ltr;
         }
 
         .mdc-data-table__cell--icon {

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

@@ -1,5 +1,5 @@
 import { consume } from "@lit/context";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -11,10 +11,8 @@ import {
   sortDeviceAutomations,
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
-import type { HomeAssistant } from "../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-generic-picker";
-import "../ha-md-select";
-import "../ha-md-select-option";
 import type { PickerValueRenderer } from "../ha-picker-field";
 
 const NO_AUTOMATION_KEY = "NO_AUTOMATION";
@@ -192,7 +190,7 @@ export abstract class HaDeviceAutomationPicker<
     this._renderEmpty = false;
   }
 
-  private _automationChanged(ev: CustomEvent<{ value: string }>) {
+  private _automationChanged(ev: ValueChangedEvent<string>) {
     ev.stopPropagation();
     const value = ev.detail.value;
     if (!value || NO_AUTOMATION_KEY === value) {
@@ -217,10 +215,4 @@ export abstract class HaDeviceAutomationPicker<
     delete value.metadata;
     fireEvent(this, "value-changed", { value });
   }
-
-  static styles = css`
-    ha-select {
-      display: block;
-    }
-  `;
 }

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

@@ -48,7 +48,7 @@ export class HaDevicePicker extends LitElement {
   @property({ type: String, attribute: "search-label" })
   public searchLabel?: string;
 
-  @property({ attribute: false, type: Array }) public createDomains?: string[];
+  @property({ attribute: false }) public createDomains?: string[];
 
   /**
    * Show only devices with entities from specific domains.
@@ -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/ha-entities-picker.ts

@@ -76,7 +76,7 @@ class HaEntitiesPicker extends LitElement {
   @property({ attribute: false })
   public entityFilter?: HaEntityPickerEntityFilterFunc;
 
-  @property({ attribute: false, type: Array }) public createDomains?: string[];
+  @property({ attribute: false }) public createDomains?: string[];
 
   @property({ type: Boolean })
   public reorder = false;

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

@@ -6,6 +6,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-generic-picker";
 import type { PickerComboBoxItem } from "../ha-picker-combo-box";
+import type { PickerValueRenderer } from "../ha-picker-field";
 
 @customElement("ha-entity-attribute-picker")
 class HaEntityAttributePicker extends LitElement {
@@ -94,12 +95,19 @@ class HaEntityAttributePicker extends LitElement {
         .helper=${this.helper}
         .allowCustomValue=${this.allowCustomValue}
         .getItems=${this._getItems}
+        .valueRenderer=${this._valueRenderer}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>
     `;
   }
 
+  private _valueRenderer: PickerValueRenderer = (value: string) => {
+    const items = this._getItems();
+    const item = items.find((option) => option.id === value);
+    return html`<span slot="headline">${item?.primary ?? value}</span>`;
+  };
+
   private _valueChanged(ev: ValueChangedEvent<string>) {
     ev.stopPropagation();
     const newValue = ev.detail.value;