format

.devcontainer/Dockerfile

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

.github/ISSUE_TEMPLATE.md

@@ -67,7 +67,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 <!--
   If your issue is about how an entity is shown in the UI, please add the state
   and attributes for all situations with a screenshot of the UI.
-  You can find this information at `/config/developer-tools/state`
+  You can find this information at `/developer-tools/state`
 -->
 
 ```yaml

.github/PULL_REQUEST_TEMPLATE.md

@@ -21,14 +21,6 @@
 -->
 
 
-## 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?
@@ -43,6 +35,16 @@
 - [ ] 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.
@@ -52,8 +54,6 @@
 - 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,50 +61,18 @@
   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.
-- [ ] 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.
+- [ ] Tests have been added to verify that the new code works.
 
 If user exposed functionality or configuration variables are added/changed:
 
 - [ ] Documentation added/updated for [www.home-assistant.io][docs-repository]
 
-<!--
-  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

@@ -2,8 +2,6 @@
 
 You are an assistant helping with development of the Home Assistant frontend. The frontend is built using Lit-based Web Components and TypeScript, providing a responsive and performant interface for home automation control.
 
-**Note**: This file contains high-level guidelines and references to implementation patterns. For detailed component documentation, API references, and usage examples, refer to the `gallery/` directory.
-
 ## Table of Contents
 
 - [Quick Reference](#quick-reference)
@@ -22,13 +20,11 @@ You are an assistant helping with development of the Home Assistant frontend. Th
 ```bash
 yarn lint          # ESLint + Prettier + TypeScript + Lit
 yarn format        # Auto-fix ESLint + Prettier
-yarn lint:types    # TypeScript compiler (run WITHOUT file arguments)
+yarn lint:types    # TypeScript compiler
 yarn test          # Vitest
 script/develop     # Development server
 ```
 
-> **WARNING:** Never run `tsc` or `yarn lint:types` with file arguments (e.g., `yarn lint:types src/file.ts`). When `tsc` receives file arguments, it ignores `tsconfig.json` and emits `.js` files into `src/`, polluting the codebase. Always run `yarn lint:types` without arguments. For individual file type checking, rely on IDE diagnostics. If `.js` files are accidentally generated, clean up with `git clean -fd src/`.
-
 ### Component Prefixes
 
 - `ha-` - Home Assistant components
@@ -155,10 +151,6 @@ try {
 ### Styling Guidelines
 
 - **Use CSS custom properties**: Leverage the theme system
-- **Use spacing tokens**: Prefer `--ha-space-*` tokens over hardcoded values for consistent spacing
-  - Spacing scale: `--ha-space-1` (4px) through `--ha-space-20` (80px) in 4px increments
-  - Defined in `src/resources/theme/core.globals.ts`
-  - Common values: `--ha-space-2` (8px), `--ha-space-4` (16px), `--ha-space-8` (32px)
 - **Mobile-first responsive**: Design for mobile, enhance for desktop
 - **Follow Material Design**: Use Material Web Components where appropriate
 - **Support RTL**: Ensure all layouts work in RTL languages
@@ -167,61 +159,21 @@ try {
 static get styles() {
   return css`
     :host {
-      padding: var(--ha-space-4);
+      --spacing: 16px;
+      padding: var(--spacing);
       color: var(--primary-text-color);
       background-color: var(--card-background-color);
     }
 
-    .content {
-      gap: var(--ha-space-2);
-    }
-
     @media (max-width: 600px) {
       :host {
-        padding: var(--ha-space-2);
+        --spacing: 8px;
       }
     }
   `;
 }
 ```
 
-### View Transitions
-
-The View Transitions API creates smooth animations between DOM state changes. When implementing view transitions:
-
-**Core Resources:**
-
-- **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-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-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
-
-**Default Root Transition:**
-
-By default, `:root` receives `view-transition-name: root`, creating a full-page crossfade. Target with [`::view-transition-group(root)`](https://developer.mozilla.org/en-US/docs/Web/CSS/::view-transition-group) to customize the default page transition.
-
-**Important Constraints:**
-
-- Each `view-transition-name` must be unique at any given time
-- 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
-
-**Specification & Documentation:**
-
-For browser support, API details, and current specifications, refer to these authoritative sources (note: check publication dates as specs evolve):
-
-- [MDN: View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API) - Comprehensive API reference
-- [Chrome for Developers: View Transitions](https://developer.chrome.com/docs/web-platform/view-transitions) - Implementation guide and examples
-- [W3C Draft Specification](https://drafts.csswg.org/css-view-transitions/) - Official specification (evolving)
-
 ### Performance Best Practices
 
 - **Code split**: Split code at the panel/dialog level
@@ -239,7 +191,12 @@ For browser support, API details, and current specifications, refer to these aut
 
 ## Component Library
 
-### Dialog Component
+### Dialog Components
+
+**Available Dialog Types:**
+
+- `ha-md-dialog` - Preferred for new code (Material Design 3)
+- `ha-dialog` - Legacy component still widely used
 
 **Opening Dialogs (Fire Event Pattern - Recommended):**
 
@@ -253,41 +210,20 @@ 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()`
+- Use `createCloseHeading()` for standard headers
+- Import `haStyleDialog` for consistent styling
 - Return `nothing` when no params (loading state)
-- Fire `dialog-closed` event in `_dialogClosed()` handler
-- Use `header-title` attribute for simple titles
-- Use `header-subtitle` attribute for simple subtitles
-- Use slots for custom content where the standard attributes are not enough
-- Use `ha-dialog-footer` with `primaryAction`/`secondaryAction` slots for footer content
-- Add `autofocus` to first focusable element (e.g., `<ha-form autofocus>`). The component may need to forward this attribute internally.
+- Fire `dialog-closed` event when closing
+- Add `dialogInitialFocus` for accessibility
 
-**Dialog Sizing:**
-
-- 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
-
-**Button Appearance Guidelines:**
-
-- **Primary action buttons**: Default appearance (no appearance attribute) or omit for standard styling
-- **Secondary action buttons**: Use `appearance="plain"` for cancel/dismiss actions
-- **Destructive actions**: Use `appearance="filled"` for delete/remove operations (combined with appropriate semantic styling)
-- **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`
-
-**Gallery Documentation:**
-
-- `gallery/src/pages/components/ha-dialog.markdown`
-- `gallery/src/pages/components/ha-dialogs.markdown`
+````
 
 ### Form Component (ha-form)
-
 - 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
@@ -299,11 +235,7 @@ fireEvent(this, "show-dialog", {
   .computeLabel=${(schema) => this.hass.localize(`ui.panel.${schema.name}`)}
   @value-changed=${this._valueChanged}
 ></ha-form>
-```
-
-**Gallery Documentation:**
-
-- `gallery/src/pages/components/ha-form.markdown`
+````
 
 ### Alert Component (ha-alert)
 
@@ -317,35 +249,6 @@ fireEvent(this, "show-dialog", {
 <ha-alert alert-type="success" dismissable>Success message</ha-alert>
 ```
 
-**Gallery Documentation:**
-
-- `gallery/src/pages/components/ha-alert.markdown`
-
-### Keyboard Shortcuts (ShortcutManager)
-
-The `ShortcutManager` class provides a unified way to register keyboard shortcuts with automatic input field protection.
-
-**Key Features:**
-
-- Automatically blocks shortcuts when input fields are focused
-- Prevents shortcuts during text selection (configurable via `allowWhenTextSelected`)
-- Supports both character-based and KeyCode-based shortcuts (for non-latin keyboards)
-
-**Implementation:**
-
-- **Class definition**: `src/common/keyboard/shortcuts.ts`
-- **Real-world example**: `src/state/quick-bar-mixin.ts` - Global shortcuts (e, c, d, m, a, Shift+?) with non-latin keyboard fallbacks
-
-### Tooltip Component (ha-tooltip)
-
-The `ha-tooltip` component wraps Web Awesome tooltip with Home Assistant theming. Use for providing contextual help text on hover.
-
-**Implementation:**
-
-- **Component definition**: `src/components/ha-tooltip.ts`
-- **Usage example**: `src/components/ha-label.ts`
-- **Gallery documentation**: `gallery/src/pages/components/ha-tooltip.markdown`
-
 ## Common Patterns
 
 ### Creating a Panel
@@ -372,6 +275,69 @@ 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;
+
+  public async showDialog(params: MyDialogParams): Promise<void> {
+    this._params = params;
+  }
+
+  public closeDialog(): void {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(this.hass, this._params.title)}
+      >
+        <!-- Dialog content -->
+        <ha-button
+          appearance="plain"
+          @click=${this.closeDialog}
+          slot="secondaryAction"
+        >
+          ${this.hass.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button @click=${this._submit} slot="primaryAction">
+          ${this.hass.localize("ui.common.save")}
+        </ha-button>
+      </ha-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)
@@ -462,10 +428,6 @@ 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
@@ -528,6 +490,7 @@ When creating a pull request, you **must** use the PR template located at `.gith
 
 #### Key Terminology
 
+- **"add-on"** (hyphenated, not "addon")
 - **"integration"** (preferred over "component")
 - **Technical terms**: Use lowercase (automation, entity, device, service)
 
@@ -619,10 +582,13 @@ this.hass.localize("ui.panel.config.automation.delete_confirm", {
 - [ ] American English spelling
 - [ ] Friendly, informational tone
 - [ ] Avoids abbreviations and jargon
-- [ ] Correct terminology (integration not component)
+- [ ] Correct terminology (add-on not addon, integration not component)
 
 ### 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/labeler.yml

@@ -44,3 +44,8 @@ GitHub Actions:
       - any-glob-to-any-file:
           - .github/workflows/**
           - .github/*.yml
+
+Supervisor:
+  - changed-files:
+      - any-glob-to-any-file:
+          - hassio/src/**

.github/workflows/cast_deployment.yaml

@@ -21,12 +21,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -56,12 +56,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

@@ -24,9 +24,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -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@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
+        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
         with:
           path: |
             node_modules/.cache/prettier
@@ -58,9 +58,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -76,9 +76,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -89,15 +89,32 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
           if-no-files-found: error
-      - name: Upload frontend build
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+  supervisor:
+    name: Build supervisor
+    needs: [lint, test]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out files from GitHub
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+      - name: Setup Node
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
-          name: frontend-build
-          path: hass_frontend/
+          node-version-file: ".nvmrc"
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install --immutable
+      - name: Build Application
+        run: ./node_modules/.bin/gulp build-hassio
+        env:
+          IS_TEST: "true"
+      - name: Upload bundle stats
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
+        with:
+          name: supervisor-bundle-stats
+          path: build/stats/*.json
           if-no-files-found: error
-          retention-days: 7

.github/workflows/codeql-analysis.yml

@@ -23,7 +23,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.
@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
+        uses: github/codeql-action/init@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
+        uses: github/codeql-action/autobuild@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@89a39a4e59826350b863aa6b6252a07ad50cf83e # v4.32.4
+        uses: github/codeql-action/analyze@64d10c13136e1c5bce3e5fbde8d4906eeaafc885 # v3.30.6

.github/workflows/demo_deployment.yaml

@@ -22,12 +22,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,12 +57,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_deployment.yaml

@@ -16,10 +16,10 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_preview.yaml

@@ -21,10 +21,10 @@ jobs:
     if: github.repository == 'home-assistant/frontend' && contains(github.event.pull_request.labels.*.name, 'needs design preview')
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/lock.yml

@@ -9,7 +9,7 @@ jobs:
   lock:
     runs-on: ubuntu-latest
     steps:
-      - uses: dessant/lock-threads@7266a7ce5c1df01b1c6db85bf8cd86c737dadbe7 # v6.0.0
+      - uses: dessant/lock-threads@1bf7ec25051fe7c00bdd17e6a7cf3d7bfb7dc771 # v5.0.1
         with:
           github-token: ${{ github.token }}
           process-only: "issues, prs"

.github/workflows/nightly.yaml

@@ -6,7 +6,7 @@ on:
     - cron: "0 1 * * *"
 
 env:
-  PYTHON_VERSION: "3.14"
+  PYTHON_VERSION: "3.13"
   NODE_OPTIONS: --max_old_space_size=6144
 
 permissions:
@@ -20,15 +20,15 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6
+        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@bbbca2ddaa5d8feaa63e36b76fdaad77386f024f # v7.0.0
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4.6.2
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/relative-ci.yaml

@@ -12,12 +12,12 @@ jobs:
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
     strategy:
       matrix:
-        bundle: [frontend]
+        bundle: [frontend, supervisor]
         build: [modern, legacy]
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
+        uses: relative-ci/agent-action@1707825cbfcc7452b2913d273414705415ae64d4 # v3.0.1
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.github/workflows/release-drafter.yaml

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

.github/workflows/release.yaml

@@ -6,7 +6,7 @@ on:
       - published
 
 env:
-  PYTHON_VERSION: "3.14"
+  PYTHON_VERSION: "3.13"
   NODE_OPTIONS: --max_old_space_size=6144
 
 # Set default workflow permissions
@@ -19,17 +19,14 @@ jobs:
   release:
     name: Release
     runs-on: ubuntu-latest
-    environment: pypi
     permissions:
       contents: write # Required to upload release assets
-      id-token: write # For "Trusted Publisher" to PyPi
-    if: github.repository_owner == 'home-assistant'
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
+        uses: actions/setup-python@e797f83bcb11b83ae66e0230d6156d7c80228e7c # v6.0.0
         with:
           python-version: ${{ env.PYTHON_VERSION }}
 
@@ -37,7 +34,7 @@ jobs:
         uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -49,20 +46,16 @@ jobs:
         run: ./script/translations_download
         env:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
-
       - name: Build and release package
         run: |
-          python3 -m pip install build
+          python3 -m pip install twine build
+          export TWINE_USERNAME="__token__"
+          export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
           export SKIP_FETCH_NIGHTLY_TRANSLATIONS=1
           script/release
 
-      - name: Publish to PyPI
-        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
-        with:
-          skip-existing: true
-
       - name: Upload release assets
-        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
         with:
           files: |
             dist/*.whl
@@ -82,9 +75,9 @@ jobs:
 
       # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
-        uses: home-assistant/wheels@2025.12.0
+        uses: home-assistant/wheels@2025.09.1
         with:
-          abi: cp314
+          abi: cp313
           tag: musllinux_1_2
           arch: amd64
           wheels-key: ${{ secrets.WHEELS_KEY }}
@@ -98,9 +91,9 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
       - name: Setup Node
-        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -115,6 +108,35 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
+
+  release-supervisor:
+    name: Release supervisor frontend
+    if: github.event.release.prerelease == false
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write # Required to upload release assets
+    steps:
+      - name: Checkout the repository
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
+      - name: Setup Node
+        uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
+        with:
+          node-version-file: ".nvmrc"
+          cache: yarn
+      - name: Install dependencies
+        run: yarn install
+      - name: Download Translations
+        run: ./script/translations_download
+        env:
+          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
+      - name: Build supervisor
+        run: hassio/script/build_hassio
+      - name: Tar folder
+        run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
+      - name: Upload release asset
+        uses: softprops/action-gh-release@62c96d0c4e8a889135c1f3a25910db8dbe0e85f7 # v2.3.4
+        with:
+          files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

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

@@ -5,38 +5,9 @@ on:
   issues:
     types: [opened]
 
-permissions: {}
-
-concurrency:
-  group: ${{ github.workflow }}-${{ github.event.issue.number }}
-
 jobs:
-  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@b5d41d4e1d5dceea10e7104786b73624c18a190f # v10.2.0
+        uses: actions/stale@5f858e3efba33a5ca4407a664cc011ad407f2008 # v10.1.0
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.github/workflows/translations.yaml

@@ -14,7 +14,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
 
       - name: Upload Translations
         run: |

.gitignore

@@ -15,7 +15,7 @@ dist/
 !.yarn/sdks
 !.yarn/versions
 .pnp.*
-node_modules/
+/node_modules/
 yarn-error.log
 npm-debug.log
 
@@ -56,5 +56,4 @@ test/coverage/
 
 # AI tooling
 .claude
-.cursor
 

.nvmrc

@@ -1 +1 @@
-24.14.0
+22.20.0

.vscode/tasks.json

@@ -73,6 +73,37 @@
         "instanceLimit": 1
       }
     },
+    {
+      "label": "Develop Supervisor panel",
+      "type": "gulp",
+      "task": "develop-hassio",
+      "problemMatcher": {
+        "owner": "ha-build",
+        "source": "ha-build",
+        "fileLocation": "absolute",
+        "severity": "error",
+        "pattern": [
+          {
+            "regexp": "(SyntaxError): (.+): (.+) \\((\\d+):(\\d+)\\)",
+            "severity": 1,
+            "file": 2,
+            "message": 3,
+            "line": 4,
+            "column": 5
+          }
+        ],
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "Changes detected. Starting compilation",
+          "endsPattern": "Build done @"
+        }
+      },
+      "isBackground": true,
+      "group": "build",
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
     {
       "label": "Develop Gallery",
       "type": "gulp",
@@ -215,6 +246,20 @@
         "instanceLimit": 1
       }
     },
+    {
+      "label": "Run HA Core for Supervisor in devcontainer",
+      "type": "shell",
+      "command": "SUPERVISOR=${input:supervisorHost} SUPERVISOR_TOKEN=${input:supervisorToken} script/core",
+      "isBackground": true,
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      },
+      "problemMatcher": [],
+      "runOptions": {
+        "instanceLimit": 1
+      }
+    },
     {
       "label": "Setup and fetch nightly translations",
       "type": "gulp",
@@ -223,6 +268,16 @@
     }
   ],
   "inputs": [
+    {
+      "id": "supervisorHost",
+      "type": "promptString",
+      "description": "The IP of the Supervisor host running the Remote API proxy add-on"
+    },
+    {
+      "id": "supervisorToken",
+      "type": "promptString",
+      "description": "The token for the Remote API proxy add-on"
+    },
     {
       "id": "coreUrl",
       "type": "promptString",

.yarnrc.yml

@@ -1,11 +1,9 @@
 compressionLevel: mixed
 
-npmMinimalAgeGate: "3d"
-
 defaultSemverRangePrefix: ""
 
 enableGlobalCache: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.12.0.cjs
+yarnPath: .yarn/releases/yarn-4.10.3.cjs

AGENTS.md

@@ -1 +0,0 @@
-.github/copilot-instructions.md

README.md

@@ -14,6 +14,7 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 - Development: [Instructions](https://developers.home-assistant.io/docs/frontend/development/)
 - Production build: `script/build_frontend`
 - Gallery: `cd gallery && script/develop_gallery`
+- Supervisor: [Instructions](https://developers.home-assistant.io/docs/supervisor/developing)
 
 ## Frontend development
 

build-scripts/bundle.cjs

@@ -18,14 +18,16 @@ module.exports.sourceMapURL = () => {
 module.exports.ignorePackages = () => [];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ isLandingPageBuild }) =>
+module.exports.emptyPackages = ({ isHassioBuild }) =>
   [
-    // Icons in landingpage conflict with icons in HA so we don't load.
-    isLandingPageBuild &&
+    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
+    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
+    // Icons in supervisor conflict with icons in HA so we don't load.
+    isHassioBuild &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon.ts")
       ),
-    isLandingPageBuild &&
+    isHassioBuild &&
       require.resolve(
         path.resolve(paths.root_dir, "src/components/ha-icon-picker.ts")
       ),
@@ -36,6 +38,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __BUILD__: JSON.stringify(latestBuild ? "modern" : "legacy"),
   __VERSION__: JSON.stringify(env.version()),
   __DEMO__: false,
+  __SUPERVISOR__: false,
   __BACKWARDS_COMPAT__: false,
   __STATIC_PATH__: "/static/",
   __HASS_URL__: `\`${
@@ -288,6 +291,26 @@ module.exports.config = {
     };
   },
 
+  hassio({ isProdBuild, latestBuild, isStatsBuild, isTestBuild }) {
+    return {
+      name: "supervisor" + nameSuffix(latestBuild),
+      entry: {
+        entrypoint: path.resolve(paths.hassio_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.hassio_output_root, latestBuild),
+      publicPath: publicPath(latestBuild, paths.hassio_publicPath),
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+      isTestBuild,
+      isHassioBuild: true,
+      defineOverlay: {
+        __SUPERVISOR__: true,
+        __STATIC_PATH__: `"${paths.hassio_publicPath}/static/"`,
+      },
+    };
+  },
+
   gallery({ isProdBuild, latestBuild }) {
     return {
       name: "gallery" + nameSuffix(latestBuild),
@@ -314,7 +337,6 @@ module.exports.config = {
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
-      isLandingPageBuild: true,
     };
   },
 };

build-scripts/gulp/clean.js

@@ -24,6 +24,10 @@ gulp.task(
   )
 );
 
+gulp.task("clean-hassio", async () =>
+  deleteSync([paths.hassio_output_root, paths.build_dir])
+);
+
 gulp.task(
   "clean-gallery",
   gulp.parallel("clean-translations", async () =>

build-scripts/gulp/compress.js

@@ -43,11 +43,29 @@ const compressAppModernBrotli = () =>
 const compressAppModernZopfli = () =>
   compressModern(paths.app_output_root, paths.app_output_latest, "zopfli");
 
+const compressHassioModernBrotli = () =>
+  compressModern(
+    paths.hassio_output_root,
+    paths.hassio_output_latest,
+    "brotli"
+  );
+const compressHassioModernZopfli = () =>
+  compressModern(
+    paths.hassio_output_root,
+    paths.hassio_output_latest,
+    "zopfli"
+  );
+
 const compressAppOtherBrotli = () =>
   compressOther(paths.app_output_root, paths.app_output_latest, "brotli");
 const compressAppOtherZopfli = () =>
   compressOther(paths.app_output_root, paths.app_output_latest, "zopfli");
 
+const compressHassioOtherBrotli = () =>
+  compressOther(paths.hassio_output_root, paths.hassio_output_latest, "brotli");
+const compressHassioOtherZopfli = () =>
+  compressOther(paths.hassio_output_root, paths.hassio_output_latest, "zopfli");
+
 gulp.task(
   "compress-app",
   gulp.parallel(
@@ -57,3 +75,12 @@ gulp.task(
     compressAppOtherZopfli
   )
 );
+gulp.task(
+  "compress-hassio",
+  gulp.parallel(
+    compressHassioModernBrotli,
+    compressHassioOtherBrotli,
+    compressHassioModernZopfli,
+    compressHassioOtherZopfli
+  )
+);

build-scripts/gulp/entry-html.js

@@ -266,3 +266,28 @@ gulp.task(
     paths.landingPage_output_es5
   )
 );
+
+const HASSIO_PAGE_ENTRIES = { "entrypoint.js": ["entrypoint"] };
+
+gulp.task(
+  "gen-pages-hassio-dev",
+  genPagesDevTask(
+    HASSIO_PAGE_ENTRIES,
+    paths.hassio_dir,
+    paths.hassio_output_root,
+    "src",
+    paths.hassio_publicPath
+  )
+);
+
+gulp.task(
+  "gen-pages-hassio-prod",
+  genPagesProdTask(
+    HASSIO_PAGE_ENTRIES,
+    paths.hassio_dir,
+    paths.hassio_output_root,
+    paths.hassio_output_latest,
+    paths.hassio_output_es5,
+    "src"
+  )
+);

build-scripts/gulp/gather-static.js

@@ -123,11 +123,22 @@ gulp.task("copy-translations-app", async () => {
   copyTranslations(staticDir);
 });
 
+gulp.task("copy-translations-supervisor", async () => {
+  const staticDir = paths.hassio_output_static;
+  copyTranslations(staticDir);
+});
+
 gulp.task("copy-translations-landing-page", async () => {
   const staticDir = paths.landingPage_output_static;
   copyTranslations(staticDir);
 });
 
+gulp.task("copy-static-supervisor", async () => {
+  const staticDir = paths.hassio_output_static;
+  copyLocaleData(staticDir);
+  copyFonts(staticDir);
+});
+
 gulp.task("copy-static-app", async () => {
   const staticDir = paths.app_output_static;
   // Basic static files

build-scripts/gulp/hassio.js

@@ -0,0 +1,45 @@
+import gulp from "gulp";
+import env from "../env.cjs";
+import "./clean.js";
+import "./compress.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-hassio",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-hassio",
+    "gen-dummy-icons-json",
+    "gen-pages-hassio-dev",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
+    "build-locale-data",
+    "copy-static-supervisor",
+    "rspack-watch-hassio"
+  )
+);
+
+gulp.task(
+  "build-hassio",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-hassio",
+    "gen-dummy-icons-json",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
+    "build-locale-data",
+    "copy-static-supervisor",
+    "rspack-prod-hassio",
+    "gen-pages-hassio-prod",
+    ...// Don't compress running tests
+    (env.isTestBuild() ? [] : ["compress-hassio"])
+  )
+);

build-scripts/gulp/index.mjs

@@ -9,6 +9,7 @@ import "./fetch-nightly-translations.js";
 import "./gallery.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
+import "./hassio.js";
 import "./landing-page.js";
 import "./locale-data.js";
 import "./rspack.js";

build-scripts/gulp/rspack.js

@@ -13,6 +13,7 @@ import {
   createCastConfig,
   createDemoConfig,
   createGalleryConfig,
+  createHassioConfig,
   createLandingPageConfig,
 } from "../rspack.cjs";
 
@@ -158,6 +159,31 @@ gulp.task("rspack-prod-cast", () =>
   )
 );
 
+gulp.task("rspack-watch-hassio", () => {
+  // This command will run forever because we don't close compiler
+  rspack(
+    createHassioConfig({
+      isProdBuild: false,
+      latestBuild: true,
+    })
+  ).watch({ ignored: /build/, poll: isWsl }, doneHandler());
+
+  gulp.watch(
+    path.join(paths.translations_src, "en.json"),
+    gulp.series("build-supervisor-translations", "copy-translations-supervisor")
+  );
+});
+
+gulp.task("rspack-prod-hassio", () =>
+  prodBuild(
+    bothBuilds(createHassioConfig, {
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+      isTestBuild: env.isTestBuild(),
+    })
+  )
+);
+
 gulp.task("rspack-dev-server-gallery", () =>
   runDevServer({
     compiler: rspack(

build-scripts/gulp/translations.js

@@ -156,9 +156,7 @@ const createTestTranslation = () =>
  */
 const createMasterTranslation = () =>
   gulp
-    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])], {
-      allowEmpty: true,
-    })
+    .src([EN_SRC, ...(mergeBackend ? [`${inBackendDir}/en.json`] : [])])
     .pipe(new CustomJSON(lokaliseTransform))
     .pipe(new MergeJSON("en"))
     .pipe(gulp.dest(workDir));
@@ -170,7 +168,9 @@ const setFragment = (fragment) => async () => {
 };
 
 const panelFragment = (fragment) =>
-  fragment !== "base" && fragment !== "landing-page";
+  fragment !== "base" &&
+  fragment !== "supervisor" &&
+  fragment !== "landing-page";
 
 const HASHES = new Map();
 
@@ -205,15 +205,18 @@ const createTranslations = async () => {
         FRAGMENTS.map((fragment) => {
           switch (fragment) {
             case "base":
-              // Remove the panels and landing-page to create the base translations
+              // Remove the panels and supervisor to create the base translations
               return [
                 flatten({
                   ...data,
                   ui: { ...data.ui, panel: undefined },
-                  "landing-page": undefined,
+                  supervisor: undefined,
                 }),
                 "",
               ];
+            case "supervisor":
+              // Supervisor key is at the top level
+              return [flatten(data.supervisor), ""];
             case "landing-page":
               // landing-page key is at the top level
               return [flatten(data["landing-page"]), ""];
@@ -313,6 +316,11 @@ gulp.task(
   )
 );
 
+gulp.task(
+  "build-supervisor-translations",
+  gulp.series(setFragment("supervisor"), "build-translations")
+);
+
 gulp.task(
   "build-landing-page-translations",
   gulp.series(setFragment("landing-page"), "build-translations")

build-scripts/paths.cjs

@@ -49,5 +49,15 @@ module.exports = {
     "../landing-page/dist/static"
   ),
 
+  hassio_dir: path.resolve(__dirname, "../hassio"),
+  hassio_output_root: path.resolve(__dirname, "../hassio/build"),
+  hassio_output_static: path.resolve(__dirname, "../hassio/build/static"),
+  hassio_output_latest: path.resolve(
+    __dirname,
+    "../hassio/build/frontend_latest"
+  ),
+  hassio_output_es5: path.resolve(__dirname, "../hassio/build/frontend_es5"),
+  hassio_publicPath: "/api/hassio/app",
+
   translations_src: path.resolve(__dirname, "../src/translations"),
 };

build-scripts/rspack.cjs

@@ -40,7 +40,7 @@ const createRspackConfig = ({
   latestBuild,
   isStatsBuild,
   isTestBuild,
-  isLandingPageBuild,
+  isHassioBuild,
   dontHash,
 }) => {
   if (!dontHash) {
@@ -167,12 +167,10 @@ const createRspackConfig = ({
           );
         },
       }),
-      bundle.emptyPackages({ isLandingPageBuild }).length
-        ? new rspack.NormalModuleReplacementPlugin(
-            new RegExp(bundle.emptyPackages({ isLandingPageBuild }).join("|")),
-            path.resolve(paths.root_dir, "src/util/empty.js")
-          )
-        : false,
+      new rspack.NormalModuleReplacementPlugin(
+        new RegExp(bundle.emptyPackages({ isHassioBuild }).join("|")),
+        path.resolve(paths.root_dir, "src/util/empty.js")
+      ),
       !isProdBuild && new LogStartCompilePlugin(),
       isProdBuild &&
         new StatsWriterPlugin({
@@ -200,7 +198,6 @@ const createRspackConfig = ({
         "lit/decorators$": "lit/decorators.js",
         "lit/directive$": "lit/directive.js",
         "lit/directives/until$": "lit/directives/until.js",
-        "lit/directives/ref$": "lit/directives/ref.js",
         "lit/directives/class-map$": "lit/directives/class-map.js",
         "lit/directives/style-map$": "lit/directives/style-map.js",
         "lit/directives/if-defined$": "lit/directives/if-defined.js",
@@ -209,9 +206,7 @@ const createRspackConfig = ({
         "lit/directives/join$": "lit/directives/join.js",
         "lit/directives/repeat$": "lit/directives/repeat.js",
         "lit/directives/live$": "lit/directives/live.js",
-        "lit/directives/keyed$": latestBuild
-          ? "lit/directives/keyed.js"
-          : path.resolve(__dirname, "../src/common/lit/keyed-es5.ts"),
+        "lit/directives/keyed$": "lit/directives/keyed.js",
         "lit/polyfill-support$": "lit/polyfill-support.js",
         "@lit-labs/virtualizer/layouts/grid":
           "@lit-labs/virtualizer/layouts/grid.js",
@@ -219,42 +214,6 @@ const createRspackConfig = ({
           "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js",
         "@lit-labs/observers/resize-controller":
           "@lit-labs/observers/resize-controller.js",
-        "@formatjs/intl-durationformat/should-polyfill$":
-          "@formatjs/intl-durationformat/should-polyfill.js",
-        "@formatjs/intl-durationformat/polyfill-force$":
-          "@formatjs/intl-durationformat/polyfill-force.js",
-        "@formatjs/intl-datetimeformat/should-polyfill":
-          "@formatjs/intl-datetimeformat/should-polyfill.js",
-        "@formatjs/intl-datetimeformat/polyfill-force":
-          "@formatjs/intl-datetimeformat/polyfill-force.js",
-        "@formatjs/intl-displaynames/should-polyfill":
-          "@formatjs/intl-displaynames/should-polyfill.js",
-        "@formatjs/intl-displaynames/polyfill-force":
-          "@formatjs/intl-displaynames/polyfill-force.js",
-        "@formatjs/intl-getcanonicallocales/should-polyfill":
-          "@formatjs/intl-getcanonicallocales/should-polyfill.js",
-        "@formatjs/intl-getcanonicallocales/polyfill-force":
-          "@formatjs/intl-getcanonicallocales/polyfill-force.js",
-        "@formatjs/intl-listformat/should-polyfill":
-          "@formatjs/intl-listformat/should-polyfill.js",
-        "@formatjs/intl-listformat/polyfill-force":
-          "@formatjs/intl-listformat/polyfill-force.js",
-        "@formatjs/intl-locale/should-polyfill":
-          "@formatjs/intl-locale/should-polyfill.js",
-        "@formatjs/intl-locale/polyfill-force":
-          "@formatjs/intl-locale/polyfill-force.js",
-        "@formatjs/intl-numberformat/should-polyfill":
-          "@formatjs/intl-numberformat/should-polyfill.js",
-        "@formatjs/intl-numberformat/polyfill-force":
-          "@formatjs/intl-numberformat/polyfill-force.js",
-        "@formatjs/intl-pluralrules/should-polyfill":
-          "@formatjs/intl-pluralrules/should-polyfill.js",
-        "@formatjs/intl-pluralrules/polyfill-force":
-          "@formatjs/intl-pluralrules/polyfill-force.js",
-        "@formatjs/intl-relativetimeformat/should-polyfill":
-          "@formatjs/intl-relativetimeformat/should-polyfill.js",
-        "@formatjs/intl-relativetimeformat/polyfill-force":
-          "@formatjs/intl-relativetimeformat/polyfill-force.js",
       },
     },
     output: {
@@ -298,6 +257,7 @@ const createRspackConfig = ({
       ),
     },
     experiments: {
+      layers: true,
       outputModule: true,
     },
   };
@@ -321,6 +281,21 @@ const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
 const createCastConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 
+const createHassioConfig = ({
+  isProdBuild,
+  latestBuild,
+  isStatsBuild,
+  isTestBuild,
+}) =>
+  createRspackConfig(
+    bundle.config.hassio({
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+      isTestBuild,
+    })
+  );
+
 const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
 
@@ -331,6 +306,7 @@ module.exports = {
   createAppConfig,
   createDemoConfig,
   createCastConfig,
+  createHassioConfig,
   createGalleryConfig,
   createRspackConfig,
   createLandingPageConfig,

cast/src/launcher/layout/hc-cast.ts

@@ -16,9 +16,9 @@ import {
 } from "../../../../src/common/auth/token_storage";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
-import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-icon";
 import "../../../../src/components/ha-list";
+import "../../../../src/components/ha-button";
 import "../../../../src/components/ha-list-item";
 import "../../../../src/components/ha-svg-icon";
 import {
@@ -28,6 +28,7 @@ import {
 import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
 import type { LovelaceViewConfig } from "../../../../src/data/lovelace/config/view";
 import "../../../../src/layouts/hass-loading-screen";
+import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";
 
 @customElement("hc-cast")
@@ -95,9 +96,7 @@ class HcCast extends LitElement {
                 <ha-list @action=${this._handlePickView} activatable>
                   ${(
                     this.lovelaceViews ?? [
-                      {
-                        title: "Home",
-                      },
+                      generateDefaultViewConfig({}, {}, {}, {}, () => ""),
                     ]
                   ).map(
                     (view, idx) => html`
@@ -206,7 +205,7 @@ class HcCast extends LitElement {
   }
 
   private async _handlePickView(ev: CustomEvent<ActionDetail>) {
-    const path = this.lovelaceViews?.[ev.detail.index]?.path ?? ev.detail.index;
+    const path = this.lovelaceViews![ev.detail.index].path ?? ev.detail.index;
     await ensureConnectedCastSession(this.castManager!, this.auth!);
     castSendShowLovelaceView(this.castManager, this.auth.data.hassUrl, path);
   }

cast/src/media/entrypoint.ts

@@ -5,19 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  "LOAD" as framework.messages.MessageType.LOAD,
+  framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     const media = loadRequestData.media;
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
+      media.streamType = framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
       // @ts-ignore
-      // type definition is wrong, should be "FMP4" instead of "fmp4"
-      // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.messages#.HlsVideoSegmentFormat
       media.hlsVideoSegmentFormat =
-        "FMP4" as framework.messages.HlsVideoSegmentFormat.FMP4;
+        framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }

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

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

cast/src/receiver/entrypoint.ts

@@ -1,9 +1,10 @@
+import { framework } from "./cast_framework";
 import { CAST_NS } from "../../../src/cast/const";
 import type { HassMessage } from "../../../src/cast/receiver_messages";
 import "../../../src/resources/custom-card-support";
 import { castContext } from "./cast_context";
-import { framework } from "./cast_framework";
 import { HcMain } from "./layout/hc-main";
+import type { ReceivedMessage } from "./types";
 
 const lovelaceController = new HcMain();
 document.body.append(lovelaceController);
@@ -39,8 +40,7 @@ const playDummyMedia = (viewTitle?: string) => {
   loadRequestData.media.contentId =
     "https://cast.home-assistant.io/images/google-nest-hub.png";
   loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType =
-    "NONE" as framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
   const metadata = new framework.messages.GenericMediaMetadata();
   metadata.title = viewTitle;
   loadRequestData.media.metadata = metadata;
@@ -89,30 +89,31 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  // type definition is wrong, should be "JSON" instead of "json"
-  // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.system#.MessageType
-  [CAST_NS]: "JSON" as framework.system.MessageType.JSON,
+  [CAST_NS]: framework.system.MessageType.JSON,
 };
 
-castContext.addCustomMessageListener(CAST_NS, (ev) => {
-  // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
-  if (
-    playerManager.getPlayerState() !==
-    ("IDLE" as framework.messages.PlayerState.IDLE)
-  ) {
-    playerManager.stop();
-  } else {
-    showLovelaceController();
+castContext.addCustomMessageListener(
+  CAST_NS,
+  // @ts-ignore
+  (ev: ReceivedMessage<HassMessage>) => {
+    // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
+    if (
+      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
+    ) {
+      playerManager.stop();
+    } else {
+      showLovelaceController();
+    }
+    const msg = ev.data;
+    msg.senderId = ev.senderId;
+    lovelaceController.processIncomingMessage(msg);
   }
-  const msg = ev.data as HassMessage;
-  msg.senderId = ev.senderId;
-  lovelaceController.processIncomingMessage(msg);
-});
+);
 
 const playerManager = castContext.getPlayerManager();
 
 playerManager.setMessageInterceptor(
-  "LOAD" as framework.messages.MessageType.LOAD,
+  framework.messages.MessageType.LOAD,
   (loadRequestData) => {
     if (
       loadRequestData.media.contentId ===
@@ -126,26 +127,24 @@ playerManager.setMessageInterceptor(
     // Special handling if it came from Google Assistant
     if (media.entity) {
       media.contentId = media.entity;
-      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
+      media.streamType = framework.messages.StreamType.LIVE;
       media.contentType = "application/vnd.apple.mpegurl";
-      // type definition is wrong, should be "FMP4" instead of "fmp4"
-      // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.messages#.HlsVideoSegmentFormat
+      // @ts-ignore
       media.hlsVideoSegmentFormat =
-        "FMP4" as framework.messages.HlsVideoSegmentFormat.FMP4;
+        framework.messages.HlsVideoSegmentFormat.FMP4;
     }
     return loadRequestData;
   }
 );
 
 playerManager.addEventListener(
-  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
+  framework.events.EventType.MEDIA_STATUS,
   (event) => {
     if (
-      event.mediaStatus?.playerState ===
-        ("IDLE" as framework.messages.PlayerState.IDLE) &&
+      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
       event.mediaStatus?.idleReason &&
       event.mediaStatus?.idleReason !==
-        ("INTERRUPTED" as framework.messages.IdleReason.INTERRUPTED)
+        framework.messages.IdleReason.INTERRUPTED
     ) {
       // media finished or stopped, return to default Lovelace
       showLovelaceController();

cast/src/receiver/layout/hc-main.ts

@@ -305,8 +305,9 @@ export class HcMain extends HassElement {
         await llColl.refresh();
         this._unsubLovelace = llColl.subscribe(async (rawConfig) => {
           if (isStrategyDashboard(rawConfig)) {
-            const { generateLovelaceDashboardStrategy } =
-              await import("../../../../src/panels/lovelace/strategies/get-strategy");
+            const { generateLovelaceDashboardStrategy } = await import(
+              "../../../../src/panels/lovelace/strategies/get-strategy"
+            );
             const config = await generateLovelaceDashboardStrategy(
               rawConfig,
               this.hass!
@@ -346,8 +347,9 @@ export class HcMain extends HassElement {
   }
 
   private async _generateDefaultLovelaceConfig() {
-    const { generateLovelaceDashboardStrategy } =
-      await import("../../../../src/panels/lovelace/strategies/get-strategy");
+    const { generateLovelaceDashboardStrategy } = await import(
+      "../../../../src/panels/lovelace/strategies/get-strategy"
+    );
     this._handleNewLovelaceConfig(
       await generateLovelaceDashboardStrategy(DEFAULT_CONFIG, this.hass!)
     );

cast/src/receiver/types.ts

@@ -0,0 +1,6 @@
+export interface ReceivedMessage<T> {
+  gj: boolean;
+  data: T;
+  senderId: string;
+  type: "message";
+}

demo/src/configs/arsaboo/entities.ts

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

demo/src/configs/jimpower/entities.ts

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

demo/src/configs/kernehed/entities.ts

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

demo/src/configs/sections/entities.ts

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

demo/src/configs/teachingbirds/entities.ts

@@ -1,7 +1,8 @@
+import { convertEntities } from "../../../../src/fake_data/entity";
 import type { DemoConfig } from "../types";
 
 export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
-  Object.values({
+  convertEntities({
     "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 { EntityInput } from "../../../src/fake_data/entities/types";
+import type { Entity } from "../../../src/fake_data/entity";
 
 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) => EntityInput[];
+  entities: (localize: LocalizeFunc) => Entity[];
   theme: () => Record<string, string> | null;
 }

demo/src/ha-demo.ts

@@ -9,14 +9,11 @@ import { selectedDemoConfig } from "./configs/demo-configs";
 import { mockAreaRegistry } from "./stubs/area_registry";
 import { mockAuth } from "./stubs/auth";
 import { mockConfigEntries } from "./stubs/config_entries";
-import { mockDeviceRegistry } from "./stubs/device_registry";
 import { mockEnergy } from "./stubs/energy";
 import { energyEntities } from "./stubs/entities";
 import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
-import { mockFloorRegistry } from "./stubs/floor_registry";
 import { mockFrontend } from "./stubs/frontend";
-import { mockLabelRegistry } from "./stubs/label_registry";
 import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
 import { mockLovelace } from "./stubs/lovelace";
@@ -63,9 +60,6 @@ export class HaDemo extends HomeAssistantAppEl {
     mockPersistentNotification(hass);
     mockConfigEntries(hass);
     mockAreaRegistry(hass);
-    mockDeviceRegistry(hass);
-    mockFloorRegistry(hass);
-    mockLabelRegistry(hass);
     mockEntityRegistry(hass, [
       {
         config_entry_id: "co2signal",

demo/src/stubs/area_registry.ts

@@ -1,4 +1,4 @@
-import type { AreaRegistryEntry } from "../../../src/data/area/area_registry";
+import type { AreaRegistryEntry } from "../../../src/data/area_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockAreaRegistry = (

demo/src/stubs/device_registry.ts

@@ -1,4 +1,4 @@
-import type { DeviceRegistryEntry } from "../../../src/data/device/device_registry";
+import type { DeviceRegistryEntry } from "../../../src/data/device_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockDeviceRegistry = (

demo/src/stubs/energy.ts

@@ -14,42 +14,48 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
       energy_sources: [
         {
           type: "grid",
-          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",
+          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,
+            },
+          ],
           cost_adjustment_day: 0,
         },
         {
           type: "solar",
           stat_energy_from: "sensor.solar_production",
-          stat_rate: "sensor.power_solar",
           config_entry_solar_forecast: ["solar_forecast"],
         },
-        {
+        /*         {
           type: "battery",
           stat_energy_from: "sensor.battery_output",
           stat_energy_to: "sensor.battery_input",
-          stat_rate: "sensor.power_battery",
-        },
+        }, */
         {
           type: "gas",
           stat_energy_from: "sensor.energy_gas",
@@ -57,46 +63,25 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
           entity_energy_price: null,
           number_energy_price: null,
         },
-        {
-          type: "water",
-          stat_energy_from: "sensor.energy_water",
-          stat_cost: "sensor.energy_water_cost",
-          entity_energy_price: null,
-          number_energy_price: null,
-        },
       ],
       device_consumption: [
         {
           stat_consumption: "sensor.energy_car",
-          stat_rate: "sensor.power_car",
         },
         {
           stat_consumption: "sensor.energy_ac",
-          stat_rate: "sensor.power_ac",
         },
         {
           stat_consumption: "sensor.energy_washing_machine",
-          stat_rate: "sensor.power_washing_machine",
         },
         {
           stat_consumption: "sensor.energy_dryer",
-          stat_rate: "sensor.power_dryer",
         },
         {
           stat_consumption: "sensor.energy_heat_pump",
-          stat_rate: "sensor.power_heat_pump",
         },
         {
           stat_consumption: "sensor.energy_boiler",
-          stat_rate: "sensor.power_boiler",
-        },
-      ],
-      device_consumption_water: [
-        {
-          stat_consumption: "sensor.water_kitchen",
-        },
-        {
-          stat_consumption: "sensor.water_garden",
         },
       ],
     })

demo/src/stubs/entities.ts

@@ -1,5 +1,7 @@
+import { convertEntities } from "../../../src/fake_data/entity";
+
 export const mapEntities = () =>
-  Object.values({
+  convertEntities({
     "zone.home": {
       entity_id: "zone.home",
       state: "zoning",
@@ -49,7 +51,7 @@ export const mapEntities = () =>
   });
 
 export const energyEntities = () =>
-  Object.values({
+  convertEntities({
     "sensor.grid_fossil_fuel_percentage": {
       entity_id: "sensor.grid_fossil_fuel_percentage",
       state: "88.6",
@@ -152,38 +154,6 @@ export const energyEntities = () =>
         unit_of_measurement: "EUR",
       },
     },
-    "sensor.power_grid": {
-      entity_id: "sensor.power_grid",
-      state: "500",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_grid_return": {
-      entity_id: "sensor.power_grid_return",
-      state: "-100",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_solar": {
-      entity_id: "sensor.power_solar",
-      state: "200",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_battery": {
-      entity_id: "sensor.power_battery",
-      state: "100",
-      attributes: {
-        state_class: "measurement",
-        unit_of_measurement: "W",
-      },
-    },
     "sensor.energy_gas_cost": {
       entity_id: "sensor.energy_gas_cost",
       state: "2",
@@ -201,15 +171,6 @@ export const energyEntities = () =>
         unit_of_measurement: "m³",
       },
     },
-    "sensor.energy_water": {
-      entity_id: "sensor.energy_water",
-      state: "4000",
-      attributes: {
-        last_reset: "1970-01-01T00:00:00:00+00",
-        friendly_name: "Water",
-        unit_of_measurement: "L",
-      },
-    },
     "sensor.energy_car": {
       entity_id: "sensor.energy_car",
       state: "4",
@@ -264,58 +225,4 @@ export const energyEntities = () =>
         unit_of_measurement: "kWh",
       },
     },
-    "sensor.power_car": {
-      entity_id: "sensor.power_car",
-      state: "40",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Electric car",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_ac": {
-      entity_id: "sensor.power_ac",
-      state: "30",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Air conditioning",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_washing_machine": {
-      entity_id: "sensor.power_washing_machine",
-      state: "60",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Washing machine",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_dryer": {
-      entity_id: "sensor.power_dryer",
-      state: "55",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Dryer",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_heat_pump": {
-      entity_id: "sensor.power_heat_pump",
-      state: "60",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Heat pump",
-        unit_of_measurement: "W",
-      },
-    },
-    "sensor.power_boiler": {
-      entity_id: "sensor.power_boiler",
-      state: "70",
-      attributes: {
-        state_class: "measurement",
-        friendly_name: "Boiler",
-        unit_of_measurement: "W",
-      },
-    },
   });

demo/src/stubs/entity_registry.ts

@@ -1,4 +1,4 @@
-import type { EntityRegistryEntry } from "../../../src/data/entity/entity_registry";
+import type { EntityRegistryEntry } from "../../../src/data/entity_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockEntityRegistry = (

demo/src/stubs/frontend.ts

@@ -1,12 +1,14 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-let sidebarChangeCallback;
+let changeFunction;
 
 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") {
-      sidebarChangeCallback?.({
+      changeFunction?.({
         value: {
           panelOrder: value.panelOrder || [],
           hiddenPanels: value.hiddenPanels || [],
@@ -14,34 +16,15 @@ export const mockFrontend = (hass: MockHomeAssistant) => {
       });
     }
   });
-  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 () => {};
-  });
-  hass.mockWS(
-    "frontend/subscribe_system_data",
-    (_msg, currentHass, onChange) => {
-      onChange?.({
-        value: currentHass.systemData,
-      });
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      return () => {};
-    }
-  );
-  hass.mockWS("labs/subscribe", (_msg, _currentHass, onChange) => {
+  hass.mockWS("frontend/subscribe_user_data", (_msg, _hass, onChange) => {
+    changeFunction = onChange;
     onChange?.({
-      preview_feature: _msg.preview_feature,
-      domain: _msg.domain,
-      enabled: false,
-      is_built_in: true,
+      value: {
+        panelOrder: [],
+        hiddenPanels: [],
+      },
     });
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     return () => {};
   });
-  hass.mockWS("repairs/list_issues", () => ({ issues: [] }));
-  hass.mockWS("frontend/get_themes", (_msg, currentHass) => currentHass.themes);
 };

demo/src/stubs/label_registry.ts

@@ -1,4 +1,4 @@
-import type { LabelRegistryEntry } from "../../../src/data/label/label_registry";
+import type { LabelRegistryEntry } from "../../../src/data/label_registry";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockLabelRegistry = (

demo/src/stubs/lovelace.ts

@@ -29,7 +29,6 @@ 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(() => {

demo/src/stubs/recorder.ts

@@ -17,15 +17,17 @@ const generateMeanStatistics = (
   end: Date,
   // eslint-disable-next-line default-param-last
   period: "5minute" | "hour" | "day" | "month" = "hour",
+  initValue: number,
   maxDiff: number
 ): StatisticValue[] => {
   const statistics: StatisticValue[] = [];
   let currentDate = new Date(start);
   currentDate.setMinutes(0, 0, 0);
+  let lastVal = initValue;
   const now = new Date();
   while (end > currentDate && currentDate < now) {
     const delta = Math.random() * maxDiff;
-    const mean = delta;
+    const mean = lastVal + delta;
     statistics.push({
       start: currentDate.getTime(),
       end: currentDate.getTime(),
@@ -36,6 +38,7 @@ const generateMeanStatistics = (
       state: mean,
       sum: null,
     });
+    lastVal = mean;
     currentDate =
       period === "day"
         ? addDays(currentDate, 1)
@@ -333,6 +336,7 @@ export const mockRecorder = (mockHass: MockHomeAssistant) => {
                   start,
                   end,
                   period,
+                  state,
                   state * (state > 80 ? 0.05 : 0.1)
                 );
         }

demo/src/stubs/template.ts

@@ -7,18 +7,8 @@ export const mockTemplate = (hass: MockHomeAssistant) => {
     })
   );
   hass.mockWS("render_template", (msg, _hass, onChange) => {
-    let result = msg.template;
-    // Simple variable substitution for demo purposes
-    if (msg.variables) {
-      for (const [key, value] of Object.entries(msg.variables)) {
-        result = result.replace(
-          new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, "g"),
-          String(value)
-        );
-      }
-    }
     onChange!({
-      result,
+      result: msg.template,
       listeners: { all: false, domains: [], entities: [], time: false },
     });
     // eslint-disable-next-line @typescript-eslint/no-empty-function

eslint.config.mjs

@@ -12,7 +12,6 @@ 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);
@@ -44,6 +43,7 @@ export default tseslint.config(
         __BUILD__: false,
         __VERSION__: false,
         __STATIC_PATH__: false,
+        __SUPERVISOR__: false,
       },
 
       parser: tseslint.parser,
@@ -187,19 +187,5 @@ export default tseslint.config(
       ],
       "no-use-before-define": "off",
     },
-  },
-  {
-    files: ["src/util/recorder-worklet.js"],
-    languageOptions: {
-      globals: globals.audioWorklet,
-    },
-  },
-  {
-    plugins: {
-      html,
-    },
-    rules: {
-      "html/no-invalid-attr-value": "error",
-    },
   }
 );

gallery/src/data/media_players.ts

@@ -1,253 +1,175 @@
+import { getEntity } from "../../../src/fake_data/entity";
+
 export const createMediaPlayerEntities = () => [
-  {
-    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,
-    },
-  },
+  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,
+  }),
 ];

gallery/src/data/plants.ts

@@ -1,82 +1,72 @@
+import { getEntity } from "../../../src/fake_data/entity";
+
 export const createPlantEntities = () => [
-  {
-    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",
+  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.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",
+    unit_of_measurement_dict: {
+      temperature: "°C",
+      moisture: "%",
+      brightness: "lx",
+      battery: "%",
+      conductivity: "μS/cm",
     },
-  },
-  {
-    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",
+    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",
     },
-  },
+    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,24 +5,17 @@ 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 = [
-  {
-    entity_id: "scene.kitchen_morning",
-    state: "scening",
-    attributes: {
-      friendly_name: "Kitchen Morning",
-    },
-  },
-  {
-    entity_id: "media_player.kitchen",
-    state: "playing",
-    attributes: {
-      friendly_name: "Sonos Kitchen",
-    },
-  },
+  getEntity("scene", "kitchen_morning", "scening", {
+    friendly_name: "Kitchen Morning",
+  }),
+  getEntity("media_player", "kitchen", "playing", {
+    friendly_name: "Sonos Kitchen",
+  }),
 ];
 
 const ACTIONS = [
@@ -149,7 +142,7 @@ export class DemoAutomationDescribeAction extends LitElement {
         <div class="action">
           <span>
             ${this._action
-              ? describeAction(this.hass, [], this._action)
+              ? describeAction(this.hass, [], [], {}, this._action)
               : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
@@ -162,7 +155,7 @@ export class DemoAutomationDescribeAction extends LitElement {
         ${ACTIONS.map(
           (conf) => html`
             <div class="action">
-              <span>${describeAction(this.hass, [], conf as any)}</span>
+              <span>${describeAction(this.hass, [], [], {}, conf as any)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `

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

@@ -5,31 +5,20 @@ 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 = [
-  {
-    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",
-    },
-  },
+  getEntity("light", "kitchen", "on", {
+    friendly_name: "Kitchen Light",
+  }),
+  getEntity("device_tracker", "person", "home", {
+    friendly_name: "Person",
+  }),
+  getEntity("zone", "home", "", {
+    friendly_name: "Home",
+  }),
 ];
 
 const conditions: Condition[] = [

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

@@ -3,33 +3,22 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-yaml-editor";
-import type { LegacyTrigger } from "../../../../src/data/automation";
+import type { Trigger } 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 = [
-  {
-    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",
-    },
-  },
+  getEntity("light", "kitchen", "on", {
+    friendly_name: "Kitchen Light",
+  }),
+  getEntity("person", "person", "", {
+    friendly_name: "Person",
+  }),
+  getEntity("zone", "home", "", {
+    friendly_name: "Home",
+  }),
 ];
 
 const triggers = [
@@ -77,7 +66,7 @@ const triggers = [
   },
 ];
 
-const initialTrigger: LegacyTrigger = {
+const initialTrigger: Trigger = {
   trigger: "state",
   entity_id: "light.kitchen",
 };

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

@@ -18,6 +18,7 @@ import { HaEventTrigger } from "../../../../src/panels/config/automation/trigger
 import { HaGeolocationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location";
 import { HaHassTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant";
 import { HaTriggerList } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-list";
+import { HaMQTTTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt";
 import { HaNumericStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state";
 import { HaPersistentNotificationTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-persistent_notification";
 import { HaStateTrigger } from "../../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state";
@@ -37,6 +38,11 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
     triggers: [{ ...HaStateTrigger.defaultConfig }],
   },
 
+  {
+    name: "MQTT",
+    triggers: [{ ...HaMQTTTrigger.defaultConfig }],
+  },
+
   {
     name: "GeoLocation",
     triggers: [{ ...HaGeolocationTrigger.defaultConfig }],

gallery/src/pages/brand/logo.markdown

@@ -10,9 +10,7 @@ As a community, we are proud of our logo. Follow these guidelines to ensure it a
 
 ![Logo](/images/brand/logo.png)
 
-<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>
+Please note that this logo is not released under the CC license. All rights reserved.
 
 # Design
 

gallery/src/pages/brand/logo.ts

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

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

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

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

@@ -1,735 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import { mdiCog, mdiHelp } from "@mdi/js";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-dialog-footer";
-import "../../../../src/components/ha-adaptive-dialog";
-import "../../../../src/components/ha-form/ha-form";
-import "../../../../src/components/ha-icon-button";
-import type { HaFormSchema } from "../../../../src/components/ha-form/types";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../../../src/types";
-
-const SCHEMA: HaFormSchema[] = [
-  { type: "string", name: "Name", default: "", autofocus: true },
-  { type: "string", name: "Email", default: "" },
-];
-
-type DialogType =
-  | false
-  | "basic"
-  | "basic-subtitle-below"
-  | "basic-subtitle-above"
-  | "allow-mode-change"
-  | "form"
-  | "actions"
-  | "large"
-  | "small";
-
-@customElement("demo-components-ha-adaptive-dialog")
-export class DemoHaAdaptiveDialog extends LitElement {
-  @state() private _openDialog: DialogType = false;
-
-  @state() private _hass?: HomeAssistant;
-
-  protected firstUpdated() {
-    const hass = provideHass(this);
-    this._hass = hass;
-  }
-
-  protected render() {
-    return html`
-      <div class="content">
-        <h1>Adaptive dialog <code>&lt;ha-adaptive-dialog&gt;</code></h1>
-
-        <p class="subtitle">
-          Responsive dialog component that automatically switches between a full
-          dialog and bottom sheet based on screen size.
-        </p>
-
-        <h2>Demos</h2>
-
-        <div class="buttons">
-          <ha-button @click=${this._handleOpenDialog("basic")}
-            >Basic adaptive dialog</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("basic-subtitle-below")}
-            >Adaptive dialog with subtitle below</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("basic-subtitle-above")}
-            >Adaptive dialog with subtitle above</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("small")}
-            >Small width adaptive dialog</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("large")}
-            >Large width adaptive dialog</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("form")}
-            >Adaptive dialog with form</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
-          >
-        </div>
-
-        <ha-card>
-          <div class="card-content">
-            <p>
-              <strong>Tip:</strong> Resize your browser window to see the
-              responsive behavior. The dialog automatically switches to a bottom
-              sheet on narrow screens (&lt;870px width) or short screens
-              (&lt;500px height).
-            </p>
-          </div>
-        </ha-card>
-
-        <ha-adaptive-dialog
-          .hass=${this._hass}
-          .open=${this._openDialog === "basic"}
-          header-title="Basic adaptive dialog"
-          @closed=${this._handleClosed}
-        >
-          <div>Adaptive dialog content</div>
-        </ha-adaptive-dialog>
-
-        <ha-adaptive-dialog
-          .hass=${this._hass}
-          .open=${this._openDialog === "basic-subtitle-below"}
-          header-title="Adaptive dialog with subtitle"
-          header-subtitle="This is an adaptive dialog with a subtitle below"
-          @closed=${this._handleClosed}
-        >
-          <div>Adaptive dialog content</div>
-        </ha-adaptive-dialog>
-
-        <ha-adaptive-dialog
-          .hass=${this._hass}
-          .open=${this._openDialog === "basic-subtitle-above"}
-          header-title="Adaptive dialog with subtitle above"
-          header-subtitle="This is an adaptive dialog with a subtitle above"
-          header-subtitle-position="above"
-          @closed=${this._handleClosed}
-        >
-          <div>Adaptive dialog content</div>
-        </ha-adaptive-dialog>
-
-        <ha-adaptive-dialog
-          .hass=${this._hass}
-          .open=${this._openDialog === "small"}
-          width="small"
-          header-title="Small adaptive dialog"
-          @closed=${this._handleClosed}
-        >
-          <div>This dialog uses the small width preset (320px).</div>
-        </ha-adaptive-dialog>
-
-        <ha-adaptive-dialog
-          .hass=${this._hass}
-          .open=${this._openDialog === "large"}
-          width="large"
-          header-title="Large adaptive dialog"
-          @closed=${this._handleClosed}
-        >
-          <div>This dialog uses the large width preset (1024px).</div>
-        </ha-adaptive-dialog>
-
-        <ha-adaptive-dialog
-          .hass=${this._hass}
-          .open=${this._openDialog === "form"}
-          header-title="Adaptive dialog with form"
-          header-subtitle="This is an adaptive dialog with a form"
-          @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>
-        </ha-adaptive-dialog>
-
-        <ha-adaptive-dialog
-          .hass=${this._hass}
-          .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}
-        >
-          <div>
-            This dialog can switch between dialog mode and bottom sheet mode
-            while open.
-          </div>
-        </ha-adaptive-dialog>
-
-        <ha-adaptive-dialog
-          .hass=${this._hass}
-          .open=${this._openDialog === "actions"}
-          header-title="Adaptive dialog with actions"
-          header-subtitle="This is an adaptive dialog with header actions"
-          @closed=${this._handleClosed}
-        >
-          <div slot="headerActionItems">
-            <ha-icon-button label="Settings" path=${mdiCog}></ha-icon-button>
-            <ha-icon-button label="Help" path=${mdiHelp}></ha-icon-button>
-          </div>
-
-          <div>Adaptive dialog content</div>
-        </ha-adaptive-dialog>
-
-        <h2>Design</h2>
-
-        <h3>Responsive behavior</h3>
-
-        <p>
-          The <code>ha-adaptive-dialog</code> component automatically switches
-          between two modes based on screen size:
-        </p>
-
-        <ul>
-          <li>
-            <strong>Dialog mode:</strong> Used on larger screens (width &gt;
-            870px and height &gt; 500px). Renders as a centered dialog using
-            <code>ha-dialog</code>.
-          </li>
-          <li>
-            <strong>Bottom sheet mode:</strong> Used on mobile devices and
-            smaller screens (width ≤ 870px or height ≤ 500px). Renders as a
-            drawer from the bottom using <code>ha-bottom-sheet</code>.
-          </li>
-        </ul>
-
-        <p>
-          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>
-
-        <p>
-          In dialog mode, there are multiple width presets available. These are
-          ignored in bottom sheet mode.
-        </p>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Value</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>small</code></td>
-              <td><code>min(320px, var(--full-width))</code></td>
-            </tr>
-            <tr>
-              <td><code>medium</code></td>
-              <td><code>min(580px, var(--full-width))</code></td>
-            </tr>
-            <tr>
-              <td><code>large</code></td>
-              <td><code>min(1024px, var(--full-width))</code></td>
-            </tr>
-            <tr>
-              <td><code>full</code></td>
-              <td><code>var(--full-width)</code></td>
-            </tr>
-          </tbody>
-        </table>
-
-        <p>Adaptive dialogs have a default width of <code>medium</code>.</p>
-
-        <h3>Header</h3>
-
-        <p>
-          The header contains a navigation icon, title, subtitle, and action
-          items.
-        </p>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Slot</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>headerNavigationIcon</code></td>
-              <td>
-                Leading header action (e.g., close/back button). In bottom sheet
-                mode, defaults to a close button if not provided.
-              </td>
-            </tr>
-            <tr>
-              <td><code>headerTitle</code></td>
-              <td>The header title content.</td>
-            </tr>
-            <tr>
-              <td><code>headerSubtitle</code></td>
-              <td>The header subtitle content.</td>
-            </tr>
-            <tr>
-              <td><code>headerActionItems</code></td>
-              <td>Trailing header actions (e.g., icon buttons, menus).</td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h4>Header title</h4>
-
-        <p>
-          The header title can be set using the <code>header-title</code>
-          attribute or by providing custom content in the
-          <code>headerTitle</code> slot.
-        </p>
-
-        <h4>Header subtitle</h4>
-
-        <p>
-          The header subtitle can be set using the
-          <code>header-subtitle</code> attribute or by providing custom content
-          in the <code>headerSubtitle</code> slot. The subtitle position
-          relative to the title can be controlled with the
-          <code>header-subtitle-position</code> attribute.
-        </p>
-
-        <h4>Header navigation icon</h4>
-
-        <p>
-          In bottom sheet mode, a close button is automatically provided if no
-          custom navigation icon is specified. In dialog mode, the dialog can be
-          closed via the standard dialog close button.
-        </p>
-
-        <h4>Header action items</h4>
-
-        <p>
-          The header action items usually contain icon buttons and/or menu
-          buttons.
-        </p>
-
-        <h3>Body</h3>
-
-        <p>The body is the content of the adaptive dialog.</p>
-
-        <h3>Footer</h3>
-
-        <p>The footer is the footer of the adaptive dialog.</p>
-
-        <p>
-          It is recommended to use the <code>ha-dialog-footer</code> component
-          for the footer and to style the buttons inside the footer as follows:
-        </p>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Slot</th>
-              <th>Description</th>
-              <th>Variant to use</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>secondaryAction</code></td>
-              <td>The secondary action button(s).</td>
-              <td><code>plain</code></td>
-            </tr>
-            <tr>
-              <td><code>primaryAction</code></td>
-              <td>The primary action button(s).</td>
-              <td><code>accent</code></td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h2>Implementation</h2>
-
-        <h3>When to use</h3>
-
-        <p>
-          Use <code>ha-adaptive-dialog</code> when you need a dialog that should
-          adapt to different screen sizes automatically. This is particularly
-          useful for:
-        </p>
-
-        <ul>
-          <li>Forms and data entry that need to work well on mobile devices</li>
-          <li>
-            Content that benefits from full-screen presentation on small devices
-          </li>
-          <li>
-            Interfaces that need consistent behavior across desktop and mobile
-          </li>
-        </ul>
-
-        <p>
-          If you don't need responsive behavior, use
-          <code>ha-dialog</code> directly for desktop-only dialogs or
-          <code>ha-bottom-sheet</code> for mobile-only sheets.
-        </p>
-
-        <p>
-          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>
-
-        <pre><code>&lt;ha-adaptive-dialog
-  .hass=\${this.hass}
-  open
-  header-title="Dialog title"
-  header-subtitle="Dialog subtitle"
-&gt;
-  &lt;div slot="headerActionItems"&gt;
-    &lt;ha-icon-button label="Settings" path="mdiCog"&gt;&lt;/ha-icon-button&gt;
-    &lt;ha-icon-button label="Help" path="mdiHelp"&gt;&lt;/ha-icon-button&gt;
-  &lt;/div&gt;
-  &lt;div&gt;Dialog content&lt;/div&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;Submit&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-dialog</code> and
-          <code>ha-bottom-sheet</code> with automatic mode switching based on
-          screen size.
-        </p>
-
-        <h4>Attributes</h4>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Attribute</th>
-              <th>Description</th>
-              <th>Default</th>
-              <th>Options</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>open</code></td>
-              <td>Controls the adaptive dialog open state.</td>
-              <td><code>false</code></td>
-              <td><code>false</code>, <code>true</code></td>
-            </tr>
-            <tr>
-              <td><code>width</code></td>
-              <td>
-                Preferred dialog width preset (dialog mode only, ignored in
-                bottom sheet mode).
-              </td>
-              <td><code>medium</code></td>
-              <td>
-                <code>small</code>, <code>medium</code>, <code>large</code>,
-                <code>full</code>
-              </td>
-            </tr>
-            <tr>
-              <td><code>header-title</code></td>
-              <td>Header title text when no custom title slot is provided.</td>
-              <td></td>
-              <td></td>
-            </tr>
-            <tr>
-              <td><code>header-subtitle</code></td>
-              <td>
-                Header subtitle text when no custom subtitle slot is provided.
-              </td>
-              <td></td>
-              <td></td>
-            </tr>
-            <tr>
-              <td><code>header-subtitle-position</code></td>
-              <td>Position of the subtitle relative to the title.</td>
-              <td><code>below</code></td>
-              <td><code>above</code>, <code>below</code></td>
-            </tr>
-            <tr>
-              <td><code>aria-labelledby</code></td>
-              <td>
-                The ID of the element that labels the dialog (for
-                accessibility).
-              </td>
-              <td></td>
-              <td></td>
-            </tr>
-            <tr>
-              <td><code>aria-describedby</code></td>
-              <td>
-                The ID of the element that describes the dialog (for
-                accessibility).
-              </td>
-              <td></td>
-              <td></td>
-            </tr>
-            <tr>
-              <td><code>allow-mode-change</code></td>
-              <td>
-                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>
-            </tr>
-          </tbody>
-        </table>
-
-        <h4>CSS custom properties</h4>
-
-        <table>
-          <thead>
-            <tr>
-              <th>CSS Property</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <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>
-            </tr>
-            <tr>
-              <td><code>--ha-dialog-show-duration</code></td>
-              <td>Show animation duration (dialog mode only).</td>
-            </tr>
-            <tr>
-              <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>
-
-        <h4>Events</h4>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Event</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>opened</code></td>
-              <td>
-                Fired when the adaptive dialog is shown (dialog mode only).
-              </td>
-            </tr>
-            <tr>
-              <td><code>closed</code></td>
-              <td>
-                Fired after the adaptive dialog is hidden (dialog mode only).
-              </td>
-            </tr>
-            <tr>
-              <td><code>after-show</code></td>
-              <td>Fired after show animation completes (dialog mode only).</td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h3>Focus management</h3>
-
-        <p>
-          To automatically focus an element when the adaptive dialog opens, add
-          the
-          <code>autofocus</code> attribute to it. Components with
-          <code>delegatesFocus: true</code> (like <code>ha-form</code>) will
-          forward focus to their first focusable child.
-        </p>
-
-        <p>Example:</p>
-
-        <pre><code>&lt;ha-adaptive-dialog .hass=\${this.hass} open&gt;
-  &lt;ha-form autofocus .schema=\${schema}&gt;&lt;/ha-form&gt;
-&lt;/ha-adaptive-dialog&gt;</code></pre>
-      </div>
-    `;
-  }
-
-  private _handleOpenDialog = (dialog: DialogType) => () => {
-    this._openDialog = dialog;
-  };
-
-  private _handleClosed = () => {
-    this._openDialog = false;
-  };
-
-  static styles = [
-    css`
-      :host {
-        display: block;
-        padding: var(--ha-space-4);
-      }
-
-      .content {
-        max-width: 1000px;
-        margin: 0 auto;
-      }
-
-      h1 {
-        margin-top: 0;
-        margin-bottom: var(--ha-space-2);
-      }
-
-      h2 {
-        margin-top: var(--ha-space-6);
-        margin-bottom: var(--ha-space-3);
-      }
-
-      h3,
-      h4 {
-        margin-top: var(--ha-space-4);
-        margin-bottom: var(--ha-space-2);
-      }
-
-      p {
-        margin: var(--ha-space-2) 0;
-        line-height: 1.6;
-      }
-
-      ul {
-        margin: var(--ha-space-2) 0;
-        padding-left: var(--ha-space-5);
-      }
-
-      li {
-        margin: var(--ha-space-1) 0;
-        line-height: 1.6;
-      }
-
-      .subtitle {
-        color: var(--secondary-text-color);
-        font-size: 1.1em;
-        margin-bottom: var(--ha-space-4);
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        margin: var(--ha-space-3) 0;
-      }
-
-      th,
-      td {
-        text-align: left;
-        padding: var(--ha-space-2);
-        border-bottom: 1px solid var(--divider-color);
-      }
-
-      th {
-        font-weight: 500;
-      }
-
-      code {
-        background-color: var(--secondary-background-color);
-        padding: 2px 6px;
-        border-radius: 4px;
-        font-family: monospace;
-        font-size: 0.9em;
-      }
-
-      pre {
-        background-color: var(--secondary-background-color);
-        padding: var(--ha-space-3);
-        border-radius: 8px;
-        overflow-x: auto;
-        margin: var(--ha-space-3) 0;
-      }
-
-      pre code {
-        background-color: transparent;
-        padding: 0;
-      }
-
-      .buttons {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: var(--ha-space-2);
-        margin: var(--ha-space-4) 0;
-      }
-
-      .card-content {
-        padding: var(--ha-space-3);
-      }
-
-      a {
-        color: var(--primary-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-adaptive-dialog": DemoHaAdaptiveDialog;
-  }
-}

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

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

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

@@ -1,542 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import { mdiCog, mdiHelp } from "@mdi/js";
-import "../../../../src/components/ha-button";
-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-dialog";
-import type { HaFormSchema } from "../../../../src/components/ha-form/types";
-
-const SCHEMA: HaFormSchema[] = [
-  { type: "string", name: "Name", default: "", autofocus: true },
-  { type: "string", name: "Email", default: "" },
-];
-
-type DialogType =
-  | false
-  | "basic"
-  | "basic-subtitle-below"
-  | "basic-subtitle-above"
-  | "form"
-  | "actions";
-
-@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-dialog&gt;</code></h1>
-
-        <p class="subtitle">Dialog component built with WebAwesome.</p>
-
-        <h2>Demos</h2>
-
-        <div class="buttons">
-          <ha-button @click=${this._handleOpenDialog("basic")}
-            >Basic dialog</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("basic-subtitle-below")}
-            >Basic dialog with subtitle below</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("basic-subtitle-above")}
-            >Basic dialog with subtitle above</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("form")}
-            >Dialog with form</ha-button
-          >
-          <ha-button @click=${this._handleOpenDialog("actions")}
-            >Dialog with actions</ha-button
-          >
-        </div>
-
-        <ha-dialog
-          .open=${this._openDialog === "basic"}
-          header-title="Basic dialog"
-          @closed=${this._handleClosed}
-        >
-          <div>Dialog content</div>
-        </ha-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-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"
-          header-subtitle-position="above"
-          @closed=${this._handleClosed}
-        >
-          <div>Dialog content</div>
-        </ha-dialog>
-
-        <ha-dialog
-          .open=${this._openDialog === "form"}
-          header-title="Dialog with form"
-          header-subtitle="This is a dialog with a form and a footer"
-          prevent-scrim-close
-          @closed=${this._handleClosed}
-        >
-          <ha-form autofocus .schema=${SCHEMA}></ha-form>
-          <ha-dialog-footer slot="footer">
-            <ha-button
-              data-dialog="close"
-              appearance="plain"
-              slot="secondaryAction"
-            >
-              Cancel
-            </ha-button>
-            <ha-button data-dialog="close" slot="primaryAction">
-              Submit
-            </ha-button>
-          </ha-dialog-footer>
-        </ha-dialog>
-
-        <ha-dialog
-          .open=${this._openDialog === "actions"}
-          header-title="Dialog with actions"
-          header-subtitle="This is a dialog with header actions"
-          @closed=${this._handleClosed}
-        >
-          <div slot="headerActionItems">
-            <ha-icon-button label="Settings" path=${mdiCog}></ha-icon-button>
-            <ha-icon-button label="Help" path=${mdiHelp}></ha-icon-button>
-          </div>
-
-          <div>Dialog content</div>
-        </ha-dialog>
-
-        <h2>Design</h2>
-
-        <h3>Width</h3>
-
-        <p>There are multiple widths available for the dialog.</p>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Name</th>
-              <th>Value</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>small</code></td>
-              <td><code>min(320px, var(--full-width))</code></td>
-            </tr>
-            <tr>
-              <td><code>medium</code></td>
-              <td><code>min(580px, var(--full-width))</code></td>
-            </tr>
-            <tr>
-              <td><code>large</code></td>
-              <td><code>min(1024px, var(--full-width))</code></td>
-            </tr>
-            <tr>
-              <td><code>full</code></td>
-              <td><code>var(--full-width)</code></td>
-            </tr>
-          </tbody>
-        </table>
-
-        <p>
-          <code>--full-width</code> is calculated based on the available width
-          of the screen. 95vw is the maximum width of the dialog on a large
-          screen, while on a small screen it is 100vw minus the safe area
-          insets.
-        </p>
-
-        <p>Dialogs have a default width of <code>medium</code>.</p>
-
-        <h3>Prevent scrim close</h3>
-
-        <p>
-          You can prevent the dialog from being closed by clicking the
-          scrim/overlay. This is allowed by default.
-        </p>
-
-        <h3>Header</h3>
-
-        <p>The header contains a title, a subtitle and action items.</p>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Slot</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>header</code></td>
-              <td>The entire header area.</td>
-            </tr>
-            <tr>
-              <td><code>headerTitle</code></td>
-              <td>The header title text.</td>
-            </tr>
-            <tr>
-              <td><code>headerSubtitle</code></td>
-              <td>The header subtitle text.</td>
-            </tr>
-            <tr>
-              <td><code>headerActionItems</code></td>
-              <td>The header action items.</td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h4>Header title</h4>
-
-        <p>The header title is a text string.</p>
-
-        <h4>Header subtitle</h4>
-
-        <p>The header subtitle is a text string.</p>
-
-        <h4>Header action items</h4>
-
-        <p>
-          The header action items usually containing icon buttons and/or menu
-          buttons.
-        </p>
-
-        <h3>Body</h3>
-
-        <p>The body is the content of the dialog.</p>
-
-        <h3>Footer</h3>
-
-        <p>The footer is the footer of the dialog.</p>
-
-        <p>
-          It is recommended to use the <code>ha-dialog-footer</code> component
-          for the footer and to style the buttons inside the footer as so:
-        </p>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Slot</th>
-              <th>Description</th>
-              <th>Appearance to use</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>secondaryAction</code></td>
-              <td>The secondary action button(s).</td>
-              <td><code>appearance="plain"</code></td>
-            </tr>
-            <tr>
-              <td><code>primaryAction</code></td>
-              <td>The primary action button(s).</td>
-              <td>Default (no appearance attribute)</td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h2>Implementation</h2>
-
-        <h3>Example Usage</h3>
-
-        <pre><code>&lt;ha-dialog
-  open
-  header-title="Dialog title"
-  header-subtitle="Dialog subtitle"
-  prevent-scrim-close
-&gt;
-  &lt;div slot="headerActionItems"&gt;
-    &lt;ha-icon-button label="Settings" path="mdiCog"&gt;&lt;/ha-icon-button&gt;
-    &lt;ha-icon-button label="Help" path="mdiHelp"&gt;&lt;/ha-icon-button&gt;
-  &lt;/div&gt;
-  &lt;div&gt;Dialog content&lt;/div&gt;
-  &lt;ha-dialog-footer slot="footer"&gt;
-    &lt;ha-button
-      data-dialog="close"
-      appearance="plain"
-      slot="secondaryAction"
-    &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-dialog&gt;</code></pre>
-
-        <h3>API</h3>
-
-        <p>
-          This component is based on the webawesome dialog component. Check the
-          <a
-            href="https://webawesome.com/docs/components/dialog/"
-            target="_blank"
-            rel="noopener noreferrer"
-            >webawesome documentation</a
-          >
-          for more details.
-        </p>
-
-        <h4>Attributes</h4>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Attribute</th>
-              <th>Description</th>
-              <th>Default</th>
-              <th>Options</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>open</code></td>
-              <td>Controls the dialog open state.</td>
-              <td><code>false</code></td>
-              <td><code>false</code>, <code>true</code></td>
-            </tr>
-            <tr>
-              <td><code>width</code></td>
-              <td>Preferred dialog width preset.</td>
-              <td><code>medium</code></td>
-              <td>
-                <code>small</code>, <code>medium</code>, <code>large</code>,
-                <code>full</code>
-              </td>
-            </tr>
-            <tr>
-              <td><code>prevent-scrim-close</code></td>
-              <td>
-                Prevents closing the dialog by clicking the scrim/overlay.
-              </td>
-              <td><code>false</code></td>
-              <td><code>true</code></td>
-            </tr>
-            <tr>
-              <td><code>header-title</code></td>
-              <td>Header title text when no custom title slot is provided.</td>
-              <td></td>
-              <td></td>
-            </tr>
-            <tr>
-              <td><code>header-subtitle</code></td>
-              <td>
-                Header subtitle text when no custom subtitle slot is provided.
-              </td>
-              <td></td>
-              <td></td>
-            </tr>
-            <tr>
-              <td><code>header-subtitle-position</code></td>
-              <td>Position of the subtitle relative to the title.</td>
-              <td><code>below</code></td>
-              <td><code>above</code>, <code>below</code></td>
-            </tr>
-            <tr>
-              <td><code>flexcontent</code></td>
-              <td>
-                Makes the dialog body a flex container for flexible layouts.
-              </td>
-              <td><code>false</code></td>
-              <td><code>false</code>, <code>true</code></td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h4>CSS Custom Properties</h4>
-
-        <table>
-          <thead>
-            <tr>
-              <th>CSS Property</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>--dialog-content-padding</code></td>
-              <td>Padding for dialog content sections.</td>
-            </tr>
-            <tr>
-              <td><code>--ha-dialog-show-duration</code></td>
-              <td>Show animation duration.</td>
-            </tr>
-            <tr>
-              <td><code>--ha-dialog-hide-duration</code></td>
-              <td>Hide animation duration.</td>
-            </tr>
-            <tr>
-              <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>--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>
-              <td>Top margin for the dialog surface.</td>
-            </tr>
-          </tbody>
-        </table>
-
-        <h4>Events</h4>
-
-        <table>
-          <thead>
-            <tr>
-              <th>Event</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>opened</code></td>
-              <td>Fired when the dialog is shown.</td>
-            </tr>
-            <tr>
-              <td><code>closed</code></td>
-              <td>Fired after the dialog is hidden.</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    `;
-  }
-
-  private _handleOpenDialog = (dialog: DialogType) => () => {
-    this._openDialog = dialog;
-  };
-
-  private _handleClosed = () => {
-    this._openDialog = false;
-  };
-
-  static styles = [
-    css`
-      :host {
-        display: block;
-        padding: var(--ha-space-4);
-      }
-
-      .content {
-        max-width: 1000px;
-        margin: 0 auto;
-      }
-
-      h1 {
-        margin-top: 0;
-        margin-bottom: var(--ha-space-2);
-      }
-
-      h2 {
-        margin-top: var(--ha-space-6);
-        margin-bottom: var(--ha-space-3);
-      }
-
-      h3,
-      h4 {
-        margin-top: var(--ha-space-4);
-        margin-bottom: var(--ha-space-2);
-      }
-
-      p {
-        margin: var(--ha-space-2) 0;
-        line-height: 1.6;
-      }
-
-      .subtitle {
-        color: var(--secondary-text-color);
-        font-size: 1.1em;
-        margin-bottom: var(--ha-space-4);
-      }
-
-      table {
-        width: 100%;
-        border-collapse: collapse;
-        margin: var(--ha-space-3) 0;
-      }
-
-      th,
-      td {
-        text-align: left;
-        padding: var(--ha-space-2);
-        border-bottom: 1px solid var(--divider-color);
-      }
-
-      th {
-        font-weight: 500;
-      }
-
-      code {
-        background-color: var(--secondary-background-color);
-        padding: 2px 6px;
-        border-radius: 4px;
-        font-family: monospace;
-        font-size: 0.9em;
-      }
-
-      pre {
-        background-color: var(--secondary-background-color);
-        padding: var(--ha-space-3);
-        border-radius: 8px;
-        overflow-x: auto;
-        margin: var(--ha-space-3) 0;
-      }
-
-      pre code {
-        background-color: transparent;
-        padding: 0;
-      }
-
-      .buttons {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: var(--ha-space-2);
-        margin: var(--ha-space-4) 0;
-      }
-
-      a {
-        color: var(--primary-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-dialog": DemoHaDialog;
-  }
-}

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

@@ -5,14 +5,14 @@ subtitle: Dialogs provide important prompts in a user flow.
 
 # Material Design 3
 
-Our dialogs are based on the latest version of Material Design. Please note that we have made some well-considered adjustments to these guidelines. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).
+Our dialogs are based on the latest version of Material Design. Please note that we have made some well-considered adjustments to these guideliness. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).
 
 # Guidelines
 
 ## Design
 
-- Dialogs have a max width of 560px. Alert and confirmation dialogs have a fixed width of 320px. If you need more width, consider a dedicated page instead.
-- The close X-icon is on the top left, on all screen sizes. Except for alert and confirmation dialogs, they only have buttons and no X-icon. This is different compared to the Material guidelines.
+- Dialogs have a max width of 560px. Alert and confirmation dialogs got a fixed width of 320px. If you need more width, consider a dedicated page instead.
+- The close X-icon is on the top left, on all screen sizes. Except for alert and confirmation dialogs, they only have buttons and no X-icon. This is different compared to the Material guideliness.
 - Dialogs can't be closed with ESC or clicked outside of the dialog when there is a form that the user needs to fill out. Instead it will animate "no" by a little shake.
 - Extra icon buttons are on the top right, for example help, settings and expand dialog. More than 2 icon buttons, they will be in an overflow menu.
 - The submit button is grouped with a cancel button at the bottom right, on all screen sizes. Fullscreen mobile dialogs have them sticky at the bottom.
@@ -26,7 +26,7 @@ Our dialogs are based on the latest version of Material Design. Please note that
 
 - A best practice is to always use a title, even if it is optional by Material guidelines.
 - People mainly read the title and a button. Put the most important information in those two.
-- Try to avoid user generated content in the title, this could make the title unreadably long.
+- Try to avoid user generated content in the title, this could make the title unreadable long.
 - If users become unsure, they read the description. Make sure this explains what will happen.
 - Strive for minimalism.
 

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

@@ -1,55 +0,0 @@
----
-title: Dropdown
----
-
-# Dropdown `<ha-dropdown>`
-
-## Implementation
-
-A compact, accessible dropdown menu for choosing actions or settings. `ha-dropdown` supports composed menu items (`<ha-dropdown-item>`) for icons, submenus, checkboxes, disabled entries, and destructive variants. Use composition with `slot="trigger"` to control the trigger button and use `<ha-dropdown-item>` for rich item content.
-
-### Example usage (composition)
-
-```html
-<ha-dropdown>
-  <ha-button slot="trigger" with-caret>Dropdown</ha-button>
-
-  <ha-dropdown-item>
-    <ha-svg-icon .path="mdiContentCut" slot="icon"></ha-svg-icon>
-    Cut
-  </ha-dropdown-item>
-
-  <ha-dropdown-item>
-    <ha-svg-icon .path="mdiContentCopy" slot="icon"></ha-svg-icon>
-    Copy
-  </ha-dropdown-item>
-
-  <ha-dropdown-item disabled>
-    <ha-svg-icon .path="mdiContentPaste" slot="icon"></ha-svg-icon>
-    Paste
-  </ha-dropdown-item>
-
-  <ha-dropdown-item>
-    Show images
-    <ha-dropdown-item slot="submenu" value="show-all-images"
-      >Show all images</ha-dropdown-item
-    >
-    <ha-dropdown-item slot="submenu" value="show-thumbnails"
-      >Show thumbnails</ha-dropdown-item
-    >
-  </ha-dropdown-item>
-
-  <ha-dropdown-item type="checkbox" checked>Emoji shortcuts</ha-dropdown-item>
-  <ha-dropdown-item type="checkbox" checked>Word wrap</ha-dropdown-item>
-
-  <ha-dropdown-item variant="danger">
-    <ha-svg-icon .path="mdiDelete" slot="icon"></ha-svg-icon>
-    Delete
-  </ha-dropdown-item>
-</ha-dropdown>
-```
-
-### API
-
-This component is based on the webawesome dropdown component.
-Check the [webawesome documentation](https://webawesome.com/docs/components/dropdown/) for more details.

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

@@ -1,133 +0,0 @@
-import "@home-assistant/webawesome/dist/components/button/button";
-import "@home-assistant/webawesome/dist/components/dropdown/dropdown";
-import "@home-assistant/webawesome/dist/components/icon/icon";
-import "@home-assistant/webawesome/dist/components/popup/popup";
-import {
-  mdiContentCopy,
-  mdiContentCut,
-  mdiContentPaste,
-  mdiDelete,
-} from "@mdi/js";
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-import "../../../../src/components/ha-button";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-dropdown";
-import "../../../../src/components/ha-dropdown-item";
-import "../../../../src/components/ha-icon-button";
-import "../../../../src/components/ha-svg-icon";
-
-@customElement("demo-components-ha-dropdown")
-export class DemoHaDropdown extends LitElement {
-  protected render(): TemplateResult {
-    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-button in ${mode}">
-              <div class="card-content">
-                <ha-dropdown>
-                  <ha-button slot="trigger" with-caret>Dropdown</ha-button>
-
-                  <ha-dropdown-item>
-                    <ha-svg-icon
-                      .path=${mdiContentCut}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Cut
-                  </ha-dropdown-item>
-                  <ha-dropdown-item>
-                    <ha-svg-icon
-                      .path=${mdiContentCopy}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Copy
-                  </ha-dropdown-item>
-                  <ha-dropdown-item disabled>
-                    <ha-svg-icon
-                      .path=${mdiContentPaste}
-                      slot="icon"
-                    ></ha-svg-icon>
-                    Paste
-                  </ha-dropdown-item>
-                  <ha-dropdown-item>
-                    Show images
-                    <ha-dropdown-item slot="submenu" value="show-all-images"
-                      >Show All Images</ha-dropdown-item
-                    >
-                    <ha-dropdown-item slot="submenu" value="show-thumbnails"
-                      >Show Thumbnails</ha-dropdown-item
-                    >
-                  </ha-dropdown-item>
-                  <ha-dropdown-item type="checkbox" checked
-                    >Emoji Shortcuts</ha-dropdown-item
-                  >
-                  <ha-dropdown-item type="checkbox" checked
-                    >Word Wrap</ha-dropdown-item
-                  >
-                  <ha-dropdown-item variant="danger">
-                    <ha-svg-icon .path=${mdiDelete} slot="icon"></ha-svg-icon>
-                    Delete
-                  </ha-dropdown-item>
-                </ha-dropdown>
-              </div>
-            </ha-card>
-          </div>
-        `
-      )}
-    `;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  static styles = css`
-    :host {
-      display: flex;
-      justify-content: center;
-    }
-    .dark,
-    .light {
-      display: block;
-      background-color: var(--primary-background-color);
-      padding: 0 50px;
-    }
-    .button {
-      padding: unset;
-    }
-    ha-card {
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      gap: 24px;
-    }
-    .card-content div {
-      display: flex;
-      gap: 8px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-dropdown": DemoHaDropdown;
-  }
-}

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

@@ -10,55 +10,36 @@ import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervis
 import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
 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 type { AreaRegistryEntry } from "../../../../src/data/area_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";
+import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
 
 const ENTITIES = [
-  {
-    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",
-    },
-  },
+  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",
+  }),
 ];
 
 const DEVICES: DeviceRegistryEntry[] = [
@@ -188,7 +169,7 @@ const SCHEMAS: {
   {
     title: "Selectors",
     translations: {
-      app: "App",
+      addon: "Addon",
       entity: "Entity",
       device: "Device",
       area: "Area",
@@ -207,7 +188,7 @@ const SCHEMAS: {
       entities: "Entities",
     },
     schema: [
-      { name: "app", selector: { app: {} } },
+      { name: "addon", selector: { addon: {} } },
       { name: "entity", selector: { entity: {} } },
       {
         name: "Attribute",

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

@@ -11,61 +11,35 @@ import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
-import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
+import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
 import type { BlueprintInput } from "../../../../src/data/blueprint";
-import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
 import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
-import type { LabelRegistryEntry } from "../../../../src/data/label/label_registry";
+import type { LabelRegistryEntry } from "../../../../src/data/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 = [
-  {
-    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",
-    },
-  },
+  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",
+  }),
 ];
 
 const DEVICES: DeviceRegistryEntry[] = [
@@ -262,7 +236,7 @@ const SCHEMAS: {
         selector: { config_entry: {} },
       },
       duration: { name: "Duration", selector: { duration: {} } },
-      app: { name: "App", selector: { app: {} } },
+      addon: { name: "Addon", selector: { addon: {} } },
       number_box: {
         name: "Number Box",
         selector: {
@@ -403,33 +377,6 @@ const SCHEMAS: {
         name: "Constant",
         selector: { constant: { value: true, label: "Yes!" } },
       },
-      choose: {
-        name: "Choose",
-        selector: {
-          choose: {
-            choices: {
-              number: {
-                selector: {
-                  number: {
-                    min: 0,
-                    max: 100,
-                    step: 0.1,
-                  },
-                },
-              },
-              entity: {
-                selector: {
-                  entity: {
-                    filter: {
-                      domain: "number",
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
     },
   },
   {

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-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.
+- 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.
 - 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,40 +1,25 @@
 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 = [
-  {
-    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",
-    },
-  },
+  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",
+  }),
 ];
 
 const CONFIGS = [

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

@@ -1,79 +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 = [
-  {
-    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",
-    },
-  },
+  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",
+  }),
 ];
 
 // TODO: Update image here

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

@@ -1,39 +1,24 @@
 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 = [
-  {
-    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",
-    },
-  },
+  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",
+  }),
 ];
 
 const CONFIGS = [

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

@@ -1,257 +1,150 @@
 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 = [
-  {
-    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", "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.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",
-    },
-  },
+  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",
+  }),
 ];
 
 const CONFIGS = [

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

@@ -1,18 +1,15 @@
 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 = [
-  {
-    entity_id: "light.bed_light",
-    state: "on",
-    attributes: {
-      friendly_name: "Bed Light",
-    },
-  },
+  getEntity("light", "bed_light", "on", {
+    friendly_name: "Bed Light",
+  }),
 ];
 
 const CONFIGS = [

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

@@ -1,117 +1,74 @@
 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 = [
-  {
-    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: "%",
-    },
-  },
+  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: "%",
+  }),
 ];
 
 const CONFIGS = [

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

@@ -1,30 +1,23 @@
 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 = [
-  { 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",
-    },
-  },
+  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",
+  }),
 ];
 
 const CONFIGS = [

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

@@ -1,89 +1,62 @@
 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 = [
-  {
-    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",
-    },
-  },
+  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",
+  }),
 ];
 
 const CONFIGS = [

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

@@ -2,69 +2,46 @@ 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 = [
-  {
-    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",
-    },
-  },
+  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",
+  }),
 ];
 
 const CONFIGS = [

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

@@ -1,44 +1,29 @@
 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 = [
-  {
-    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,
-    },
-  },
+  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,
+  }),
 ];
 
 const CONFIGS = [

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

@@ -1,86 +1,59 @@
 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 = [
-  {
-    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",
-    },
-  },
+  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",
+  }),
 ];
 
 const CONFIGS = [

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

@@ -1,19 +1,16 @@
 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 = [
-  {
-    entity_id: "person.paulus",
-    state: "home",
-    attributes: {
-      friendly_name: "Paulus",
-      entity_picture: "/images/paulus.jpg",
-    },
-  },
+  getEntity("person", "paulus", "home", {
+    friendly_name: "Paulus",
+    entity_picture: "/images/paulus.jpg",
+  }),
 ];
 
 const CONFIGS = [

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

@@ -1,63 +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 = [
-  {
-    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: "%",
-    },
-  },
+  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: "%",
+  }),
 ];
 
 const CONFIGS = [

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

@@ -1,33 +1,22 @@
 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 = [
-  {
-    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",
-    },
-  },
+  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",
+  }),
 ];
 
 const CONFIGS = [

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

@@ -1,58 +1,35 @@
 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 = [
-  {
-    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: "%",
-    },
-  },
+  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: "%",
+  }),
 ];
 
 const CONFIGS = [

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

@@ -1,123 +1,100 @@
 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 = [
-  {
-    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,
-    },
-  },
+  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,
+  }),
 ];
 
 const CONFIGS = [

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

@@ -6,6 +6,7 @@ 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";
@@ -13,154 +14,102 @@ import { ClimateEntityFeature } from "../../../../src/data/climate";
 import { FanEntityFeature } from "../../../../src/data/fan";
 
 const ENTITIES = [
-  {
-    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,
-    },
-  },
+  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,
+  }),
 ];
 
 const CONFIGS = [

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

@@ -3,25 +3,18 @@ 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 = [
-  {
-    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",
-    },
-  },
+  getEntity("todo", "shopping_list", "2", {
+    friendly_name: "Shopping List",
+    supported_features: 15,
+  }),
+  getEntity("todo", "read_only", "2", {
+    friendly_name: "Read only",
+  }),
 ];
 
 const CONFIGS = [

gallery/src/pages/misc/entity-state.ts

@@ -39,7 +39,6 @@ const SENSOR_DEVICE_CLASSES = [
   "pm1",
   "pm10",
   "pm25",
-  "pm4",
   "power_factor",
   "power",
   "precipitation",

gallery/src/pages/misc/integration-card.ts

@@ -6,8 +6,8 @@ import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import type { IntegrationManifest } from "../../../../src/data/integration";
 
-import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
-import type { EntityRegistryEntry } from "../../../../src/data/entity/entity_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
+import type { EntityRegistryEntry } from "../../../../src/data/entity_registry";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../../../src/panels/config/integrations/ha-config-flow-card";
 import type {

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

@@ -3,135 +3,108 @@ 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 = [
-  {
-    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,
-    },
-  },
+  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,
+  }),
 ];
 
 @customElement("demo-more-info-climate")
@@ -144,7 +117,7 @@ class DemoMoreInfoClimate extends LitElement {
     return html`
       <demo-more-infos
         .hass=${this.hass}
-        .entities=${ENTITIES.map((ent) => ent.entity_id)}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
       ></demo-more-infos>
     `;
   }