Cleanup

.agents/skills/component-alert/SKILL.md

@@ -0,0 +1,20 @@
+---
+name: component-alert
+description: Show user feedback with ha-alert. Use when choosing alert types, properties, and accessible dynamic status messaging.
+---
+
+### Alert Component (ha-alert)
+
+- Types: `error`, `warning`, `info`, `success`
+- Properties: `title`, `alert-type`, `dismissable`, `icon`, `action`, `rtl`
+- Content announced by screen readers when dynamically displayed
+
+```html
+<ha-alert alert-type="error">Error message</ha-alert>
+<ha-alert alert-type="warning" title="Warning">Description</ha-alert>
+<ha-alert alert-type="success" dismissable>Success message</ha-alert>
+```
+
+**Gallery Documentation:**
+
+- `gallery/src/pages/components/ha-alert.markdown`

.agents/skills/component-form/SKILL.md

@@ -0,0 +1,27 @@
+---
+name: component-form
+description: Build schema-driven ha-form UIs. Use when defining HaFormSchema, wiring data/error/schema, and localized labels/helpers in forms.
+---
+
+### 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 `autofocus` attribute to automatically focus the first focusable element. If using the legacy `ha-dialog` dialogs, use `dialogInitialFocus`
+- Use `computeLabel`, `computeError`, `computeHelper` for translations
+
+```typescript
+<ha-form
+  .hass=${this.hass}
+  .data=${this._data}
+  .schema=${this._schema}
+  .error=${this._errors}
+  .computeLabel=${(schema) => this.hass.localize(`ui.panel.${schema.name}`)}
+  @value-changed=${this._valueChanged}
+></ha-form>
+```
+
+**Gallery Documentation:**
+
+- `gallery/src/pages/components/ha-form.markdown`

.agents/skills/component-tooltip/SKILL.md

@@ -0,0 +1,14 @@
+---
+name: component-tooltip
+description: Add contextual hover help with ha-tooltip. Use when integrating Home Assistant themed tooltips and checking canonical usage references.
+---
+
+### 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`

.agents/skills/create-card/SKILL.md

@@ -0,0 +1,50 @@
+---
+name: create-card
+description: Create Lovelace card implementations. Use when implementing LovelaceCard methods, config validation, card size behavior, and optional editor hooks.
+---
+
+#### Creating a Lovelace Card
+
+**Purpose**: Cards allow users to tell different stories about their house (based on gallery)
+
+```typescript
+@customElement("hui-my-card")
+export class HuiMyCard extends LitElement implements LovelaceCard {
+  @property({ attribute: false })
+  hass!: HomeAssistant;
+
+  @state()
+  private _config?: MyCardConfig;
+
+  public setConfig(config: MyCardConfig): void {
+    if (!config.entity) {
+      throw new Error("Entity required");
+    }
+    this._config = config;
+  }
+
+  public getCardSize(): number {
+    return 3; // Height in grid units
+  }
+
+  // Optional: Editor for card configuration
+  public static getConfigElement(): LovelaceCardEditor {
+    return document.createElement("hui-my-card-editor");
+  }
+
+  // Optional: Stub config for card picker
+  public static getStubConfig(): object {
+    return { entity: "" };
+  }
+}
+```
+
+**Card Guidelines:**
+
+- Cards are highly customizable for different households
+- Implement `LovelaceCard` interface with `setConfig()` and `getCardSize()`
+- Use proper error handling in `setConfig()`
+- Consider all possible states (loading, error, unavailable)
+- Support different entity types and states
+- Follow responsive design principles
+- Add configuration editor when needed

.agents/skills/dialogs/SKILL.md

@@ -0,0 +1,121 @@
+---
+name: dialogs
+description: Build and review Home Assistant dialogs. Use when opening dialogs with the show-dialog event, implementing HassDialog lifecycle, and configuring dialog sizing and footer actions.
+---
+
+**Opening Dialogs (Fire Event Pattern - Recommended):**
+
+```typescript
+fireEvent(this, "show-dialog", {
+  dialogTag: "dialog-example",
+  dialogImport: () => import("./dialog-example"),
+  dialogParams: { title: "Example", data: someData },
+});
+```
+
+**Dialog Implementation Requirements:**
+
+- Implement `HassDialog<T>` interface
+- Use `@state() private _open = false` to control dialog visibility
+- Set `_open = true` in `showDialog()`, `_open = false` in `closeDialog()`
+- 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.
+
+### Creating a Dialog
+
+```typescript
+@customElement("dialog-my-feature")
+export class DialogMyFeature
+  extends LitElement
+  implements HassDialog<MyDialogParams>
+{
+  @property({ attribute: false })
+  hass!: HomeAssistant;
+
+  @state()
+  private _params?: MyDialogParams;
+
+  @state()
+  private _open = false;
+
+  public async showDialog(params: MyDialogParams): Promise<void> {
+    this._params = params;
+    this._open = true;
+  }
+
+  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _submit(): void {
+    // Example submit handler: perform save logic, then close the dialog
+    this.closeDialog();
+  }
+
+  private _dialogClosed(): void {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this._params.title}
+        header-subtitle=${this._params.subtitle}
+        @closed=${this._dialogClosed}
+      >
+        <p>Dialog content</p>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this.closeDialog}
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button slot="primaryAction" @click=${this._submit}>
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
+    `;
+  }
+
+  static styles = [haStyleDialog, css``];
+}
+```
+
+**Dialog 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
+- Example: `<ha-wa-dialog width="small">` for alert/confirmation dialogs
+
+**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`
+
+### 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

.agents/skills/keyboard-shortcuts/SKILL.md

@@ -0,0 +1,19 @@
+---
+name: keyboard-shortcuts
+description: Register safe keyboard shortcuts with ShortcutManager. Use when handling focused inputs, text selection, and non-latin keyboard fallback behavior.
+---
+
+### 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

.agents/skills/mixin-subscribe-panel/SKILL.md

@@ -0,0 +1,28 @@
+---
+name: mixin-subscribe-panel
+description: Use when implementing panel classes with SubscribeMixin and hassSubscribe() entity subscriptions.
+---
+
+### Creating a Panel
+
+```typescript
+@customElement("ha-panel-myfeature")
+export class HaPanelMyFeature extends SubscribeMixin(LitElement) {
+  @property({ attribute: false })
+  hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true })
+  narrow!: boolean;
+
+  @property()
+  route!: Route;
+
+  hassSubscribe() {
+    return [
+      subscribeEntityRegistry(this.hass.connection, (entities) => {
+        this._entities = entities;
+      }),
+    ];
+  }
+}
+```

.agents/skills/style-tokens/SKILL.md

@@ -0,0 +1,36 @@
+---
+name: style-tokens
+description: Apply Home Assistant CSS token styling. Use when choosing --ha-space-* spacing tokens, theme variables, responsive behavior, and RTL-safe component CSS.
+---
+
+### 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
+- **Support RTL**: Ensure all layouts work in RTL languages
+
+```typescript
+static get styles() {
+  return css`
+    :host {
+      padding: var(--ha-space-4);
+      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);
+      }
+    }
+  `;
+}
+```

.agents/skills/view-transitions/SKILL.md

@@ -0,0 +1,48 @@
+---
+name: view-transitions
+description: Implement View Transitions API patterns. Use when adding withViewTransition(), view-transition-name, fallback behavior, and transition constraints.
+---
+
+### 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-base-duration` (350ms, respects `prefers-reduced-motion`)
+
+**Implementation Guidelines:**
+
+1. Always use `withViewTransition()` wrapper for automatic fallback
+2. Keep transitions simple (subtle crossfades and fades work best)
+3. Use `--ha-animation-base-duration` CSS variable for consistent timing
+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
+
+**Current Usage & Planned Applications:**
+
+- Launch screen fade out (implemented)
+- Automation sidebar transitions (planned - #27238)
+- More info dialog content changes (planned - #27672)
+- Toolbar navigation, ha-spinner transitions (planned)
+
+**Specification & Documentation:**
+
+For browser support, API details, and current specifications, refer to these authoritative sources (note: check publication dates as specs evolve):
+
+- [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)

.github/ISSUE_TEMPLATE/config.yml

@@ -3,9 +3,6 @@ contact_links:
   - name: Request a feature for the UI / Dashboards
     url: https://github.com/orgs/home-assistant/discussions
     about: Request a new feature for the Home Assistant frontend.
-  - name: Discuss UI or UX design
-    url: https://github.com/OpenHomeFoundation/ux-design/discussions
-    about: Share design feedback and discuss visual or UX changes with the design team.
   - name: Report a bug that is NOT related to the UI / Dashboards
     url: https://github.com/home-assistant/core/issues
     about: This is the issue tracker for our frontend. Please report other issues in the backend ("core") repository.

.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,48 +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 [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:
 -->
+
 [docs-repository]: https://github.com/home-assistant/home-assistant.io
-[perfect-pr]: https://developers.home-assistant.io/docs/review-process/#creating-the-perfect-pr

.github/copilot-instructions.md

@@ -194,13 +194,13 @@ The View Transitions API creates smooth animations between DOM state changes. Wh
 - **Utility wrapper**: `src/common/util/view-transition.ts` - `withViewTransition()` function with graceful fallback
 - **Real-world example**: `src/util/launch-screen.ts` - Launch screen fade pattern with browser support detection
 - **Animation keyframes**: `src/resources/theme/animations.globals.ts` - Global `fade-in`, `fade-out`, `scale` animations
-- **Animation duration**: `src/resources/theme/core.globals.ts` - `--ha-animation-duration-fast` (150ms), `--ha-animation-duration-normal` (250ms), `--ha-animation-duration-slow` (350ms) (all respect `prefers-reduced-motion`)
+- **Animation duration**: `src/resources/theme/core.globals.ts` - `--ha-animation-base-duration` (350ms, respects `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`)
+3. Use `--ha-animation-base-duration` CSS variable for consistent timing
 4. Assign unique `view-transition-name` to elements (must be unique at any given time)
 5. For Lit components: Override `performUpdate()` or use `::part()` for internal elements
 
@@ -214,6 +214,13 @@ By default, `:root` receives `view-transition-name: root`, creating a full-page
 - Only one view transition can run at a time
 - **Shadow DOM incompatibility**: View transitions operate at document level and do not work within Shadow DOM due to style isolation ([spec discussion](https://github.com/w3c/csswg-drafts/issues/10303)). For web components, set `view-transition-name` on the `:host` element or use document-level transitions
 
+**Current Usage & Planned Applications:**
+
+- Launch screen fade out (implemented)
+- Automation sidebar transitions (planned - #27238)
+- More info dialog content changes (planned - #27672)
+- Toolbar navigation, ha-spinner transitions (planned)
+
 **Specification & Documentation:**
 
 For browser support, API details, and current specifications, refer to these authoritative sources (note: check publication dates as specs evolve):
@@ -239,7 +246,12 @@ For browser support, API details, and current specifications, refer to these aut
 
 ## Component Library
 
-### Dialog Component
+### Dialog Components
+
+**Available Dialog Types:**
+
+- `ha-wa-dialog` - Preferred for new dialogs (Web Awesome based)
+- `ha-dialog` - Legacy component (still widely used)
 
 **Opening Dialogs (Fire Event Pattern - Recommended):**
 
@@ -253,7 +265,6 @@ 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()`
@@ -269,6 +280,7 @@ fireEvent(this, "show-dialog", {
 
 - Use `width` attribute with predefined sizes: `"small"` (320px), `"medium"` (560px - default), `"large"` (720px), or `"full"`
 - Custom sizing is NOT recommended - use the standard width presets
+- Example: `<ha-wa-dialog width="small">` for alert/confirmation dialogs
 
 **Button Appearance Guidelines:**
 
@@ -278,9 +290,17 @@ fireEvent(this, "show-dialog", {
 - **Button sizes**: Use `size="small"` (32px height) or default/medium (40px height)
 - Always place primary action in `slot="primaryAction"` and secondary in `slot="secondaryAction"` within `ha-dialog-footer`
 
+**Recent Examples:**
+
+See these files for current patterns:
+
+- `src/panels/config/repairs/dialog-repairs-issue.ts`
+- `src/dialogs/restart/dialog-restart.ts`
+- `src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts`
+
 **Gallery Documentation:**
 
-- `gallery/src/pages/components/ha-dialog.markdown`
+- `gallery/src/pages/components/ha-wa-dialog.markdown`
 - `gallery/src/pages/components/ha-dialogs.markdown`
 
 ### Form Component (ha-form)
@@ -288,6 +308,7 @@ fireEvent(this, "show-dialog", {
 - 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
@@ -372,6 +393,81 @@ export class HaPanelMyFeature extends SubscribeMixin(LitElement) {
 }
 ```
 
+### Creating a Dialog
+
+```typescript
+@customElement("dialog-my-feature")
+export class DialogMyFeature
+  extends LitElement
+  implements HassDialog<MyDialogParams>
+{
+  @property({ attribute: false })
+  hass!: HomeAssistant;
+
+  @state()
+  private _params?: MyDialogParams;
+
+  @state()
+  private _open = false;
+
+  public async showDialog(params: MyDialogParams): Promise<void> {
+    this._params = params;
+    this._open = true;
+  }
+
+  public closeDialog(): void {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render() {
+    if (!this._params) {
+      return nothing;
+    }
+
+    return html`
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this._params.title}
+        header-subtitle=${this._params.subtitle}
+        @closed=${this._dialogClosed}
+      >
+        <p>Dialog content</p>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this.closeDialog}
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          <ha-button slot="primaryAction" @click=${this._submit}>
+            ${this.hass.localize("ui.common.save")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
+    `;
+  }
+
+  static styles = [haStyleDialog, css``];
+}
+```
+
+### Dialog Design Guidelines
+
+- Max width: 560px (Alert/confirmation: 320px fixed width)
+- Close X-icon on top left (all screen sizes)
+- Submit button grouped with cancel at bottom right
+- Keep button labels short: "Save", "Delete", "Enable"
+- Destructive actions use red warning button
+- Always use a title (best practice)
+- Strive for minimalism
+
 #### Creating a Lovelace Card
 
 **Purpose**: Cards allow users to tell different stories about their house (based on gallery)
@@ -462,17 +558,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
-- Check the appropriate "Type of change" box based on the changes
-- Do not check the checklist items on behalf of the user — those are the user's responsibility to review and check
-- If the PR includes UI changes, remind the user to add screenshots or a short video to the PR after creating it
-- Be simple and user friendly — explain what the change does, not implementation details
-- Use markdown so the user can copy it
-
 ### Text and Copy Guidelines
 
 #### Terminology Standards
@@ -630,6 +715,9 @@ this.hass.localize("ui.panel.config.automation.delete_confirm", {
 
 ### Component-Specific Checks
 
+- [ ] Dialogs implement HassDialog interface
+- [ ] Dialog styling uses haStyleDialog
+- [ ] Dialog accessibility includes dialogInitialFocus
 - [ ] ha-alert used correctly for messages
 - [ ] ha-form uses proper schema structure
 - [ ] Components handle all states (loading, error, unavailable)

.github/dependabot.yml

@@ -5,8 +5,6 @@ updates:
     schedule:
       interval: weekly
       time: "06:00"
-    cooldown:
-      default-days: 7
     open-pull-requests-limit: 10
     labels:
       - Dependencies

.github/workflows/cast_deployment.yaml

@@ -8,9 +8,6 @@ on:
     branches:
       - master
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -27,10 +24,9 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: dev
-          persist-credentials: false
 
       - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -63,10 +59,9 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: master
-          persist-credentials: false
 
       - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

@@ -18,9 +18,6 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
-permissions:
-  contents: read
-
 jobs:
   lint:
     name: Lint and check format
@@ -28,10 +25,8 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
       - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -42,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@27d5ce7f107fe9357f9df03efb73ab90386fccae # v5.0.5
+        uses: actions/cache@cdf6c1fa76f9f475f3d7449005a359c84ca0f306 # v5.0.3
         with:
           path: |
             node_modules/.cache/prettier
@@ -58,18 +53,14 @@ jobs:
         run: yarn run lint:lit --quiet
       - name: Run prettier
         run: yarn run lint:prettier
-      - name: Check dependency licenses
-        run: yarn run lint:licenses
   test:
     name: Run tests
     runs-on: ubuntu-latest
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
       - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -86,10 +77,8 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
       - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -100,13 +89,13 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
           if-no-files-found: error
       - name: Upload frontend build
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: frontend-build
           path: hass_frontend/

.github/workflows/codeql-analysis.yml

@@ -7,10 +7,6 @@ on:
     # The branches below must be a subset of the branches above
     branches: [dev]
 
-permissions:
-  contents: read
-  security-events: write
-
 jobs:
   analyze:
     name: Analyze
@@ -32,7 +28,6 @@ jobs:
           # We must fetch at least the immediate parents so that if this is
           # a pull request then we can checkout the head.
           fetch-depth: 2
-          persist-credentials: false
 
       # If this run was triggered by a pull request event, then checkout
       # the head of the pull request instead of the merge commit.
@@ -41,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
+        uses: github/codeql-action/init@45cbd0c69e560cd9e7cd7f8c32362050c9b7ded2 # v4.32.2
         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@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
+        uses: github/codeql-action/autobuild@45cbd0c69e560cd9e7cd7f8c32362050c9b7ded2 # v4.32.2
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -62,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@9e0d7b8d25671d64c341c19c0152d693099fb5ba # v4.35.5
+        uses: github/codeql-action/analyze@45cbd0c69e560cd9e7cd7f8c32362050c9b7ded2 # v4.32.2

.github/workflows/demo_deployment.yaml

@@ -9,9 +9,6 @@ on:
       - dev
       - master
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -28,10 +25,9 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: dev
-          persist-credentials: false
 
       - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -64,10 +60,9 @@ jobs:
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           ref: master
-          persist-credentials: false
 
       - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_deployment.yaml

@@ -5,9 +5,6 @@ on:
   schedule:
     - cron: "0 0 * * *"
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -20,11 +17,9 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
 
       - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_preview.yaml

@@ -10,9 +10,6 @@ on:
     branches:
       - dev
 
-permissions:
-  contents: read
-
 env:
   NODE_OPTIONS: --max_old_space_size=6144
 
@@ -25,11 +22,9 @@ jobs:
     steps:
       - name: Check out files from GitHub
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
 
       - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/labeler.yaml

@@ -1,6 +1,6 @@
 name: "Pull Request Labeler"
 
-on: pull_request_target # zizmor: ignore[dangerous-triggers] -- safe: only runs actions/labeler, no PR code checkout
+on: pull_request_target
 
 jobs:
   triage:
@@ -10,6 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Apply labels
-        uses: actions/labeler@f27b608878404679385c85cfa523b85ccb86e213 # v6.1.0
+        uses: actions/labeler@634933edcd8ababfe52f92936142cc22ac488b1b # v6.0.1
         with:
           sync-labels: true

.github/workflows/lock.yml

@@ -5,10 +5,6 @@ on:
   schedule:
     - cron: "0 * * * *"
 
-permissions:
-  issues: write
-  pull-requests: write
-
 jobs:
   lock:
     runs-on: ubuntu-latest

.github/workflows/nightly.yaml

@@ -21,8 +21,6 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6
@@ -30,7 +28,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
           cache: yarn
@@ -59,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/relative-ci.yaml

@@ -1,39 +1,25 @@
 name: RelativeCI
 
 on:
-  # zizmor: ignore[dangerous-triggers] -- safe: only downloads artifacts, no PR code checkout
   workflow_run:
     workflows: [CI]
     types:
       - completed
 
-permissions:
-  contents: read
-  actions: read
-
 jobs:
-  upload-frontend-modern:
-    name: Upload stats (frontend/modern)
+  upload:
+    name: Upload stats
     if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    strategy:
+      matrix:
+        bundle: [frontend]
+        build: [modern, legacy]
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@fcf45416581928e8dd62eded78ce98c78e5149f8 # v3.2.3
+        uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
         with:
-          key: ${{ secrets.RELATIVE_CI_KEY_frontend_modern }}
+          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}
-          artifactName: frontend-bundle-stats
-          webpackStatsFile: frontend-modern.json
-
-  upload-frontend-legacy:
-    name: Upload stats (frontend/legacy)
-    if: ${{ github.event.workflow_run.conclusion == 'success' }}
-    runs-on: ubuntu-latest
-    steps:
-      - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@fcf45416581928e8dd62eded78ce98c78e5149f8 # v3.2.3
-        with:
-          key: ${{ secrets.RELATIVE_CI_KEY_frontend_legacy }}
-          token: ${{ github.token }}
-          artifactName: frontend-bundle-stats
-          webpackStatsFile: frontend-legacy.json
+          artifactName: ${{ format('{0}-bundle-stats', matrix.bundle) }}
+          webpackStatsFile: ${{ format('{0}-{1}.json', matrix.bundle, matrix.build) }}

.github/workflows/release-drafter.yaml

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

.github/workflows/release.yaml

@@ -27,8 +27,6 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
@@ -36,12 +34,13 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Verify version
-        uses: home-assistant/actions/helpers/verify-version@f6f29a7ee3fa0eccadf3620a7b9ee00ab54ec03b # master
+        uses: home-assistant/actions/helpers/verify-version@master
 
       - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
+          cache: yarn
 
       - name: Install dependencies
         run: yarn install
@@ -58,15 +57,16 @@ jobs:
           script/release
 
       - name: Publish to PyPI
-        uses: pypa/gh-action-pypi-publish@cef221092ed1bacb1cc03d23a2d87d1d172e277b # v1.14.0
+        uses: pypa/gh-action-pypi-publish@ed0c53931b1dc9bd32cbe73a98c7f6766f8a527e # v1.13.0
         with:
           skip-existing: true
 
       - name: Upload release assets
-        env:
-          GH_TOKEN: ${{ github.token }}
-          TAG_NAME: ${{ github.event.release.tag_name }}
-        run: gh release upload "$TAG_NAME" dist/*.whl dist/*.tar.gz --clobber
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        with:
+          files: |
+            dist/*.whl
+            dist/*.tar.gz
 
   wheels-init:
     name: Init wheels build
@@ -74,17 +74,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Generate requirements.txt
-        env:
-          GITHUB_REF: ${{ github.ref }}
         run: |
           # Sleep to give pypi time to populate the new version across mirrors
           sleep 240
-          version=$(echo "$GITHUB_REF" | awk -F"/" '{print $NF}' )
+          version=$(echo "${{ github.ref }}" | awk -F"/" '{print $NF}' )
           echo "home-assistant-frontend==$version" > ./requirements.txt
 
       # home-assistant/wheels doesn't support SHA pinning
       - name: Build wheels
-        uses: home-assistant/wheels@e5742a69d69f0e274e2689c998900c7d19652c21 # 2025.12.0
+        uses: home-assistant/wheels@2025.12.0
         with:
           abi: cp314
           tag: musllinux_1_2
@@ -101,12 +99,11 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
       - name: Setup Node
-        uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
         with:
           node-version-file: ".nvmrc"
+          cache: yarn
       - name: Install dependencies
         run: yarn install
       - name: Download Translations
@@ -116,11 +113,8 @@ jobs:
       - name: Build landing-page
         run: landing-page/script/build_landing_page
       - name: Tar folder
-        env:
-          TAG_NAME: ${{ github.event.release.tag_name }}
-        run: tar -czf "landing-page/home_assistant_frontend_landingpage-${TAG_NAME}.tar.gz" -C landing-page/dist .
+        run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        env:
-          GH_TOKEN: ${{ github.token }}
-          TAG_NAME: ${{ github.event.release.tag_name }}
-        run: gh release upload "$TAG_NAME" "landing-page/home_assistant_frontend_landingpage-${TAG_NAME}.tar.gz" --clobber
+        uses: softprops/action-gh-release@a06a81a03ee405af7f2048a818ed3f03bbf83c7b # v2.5.0
+        with:
+          files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz

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

@@ -5,43 +5,14 @@ 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@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.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:
       - name: Check if user is authorized
-        uses: actions/github-script@3a2844b7e9c422d3c10d287c895573f7108da1b3 # v9.0.0
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
         with:
           script: |
             const issueAuthor = context.payload.issue.user.login;

.github/workflows/stale.yml

@@ -5,17 +5,12 @@ on:
   schedule:
     - cron: "0 * * * *"
 
-permissions:
-  actions: write
-  issues: write
-  pull-requests: write
-
 jobs:
   stale:
     runs-on: ubuntu-latest
     steps:
       - name: 90 days stale policy
-        uses: actions/stale@b5d41d4e1d5dceea10e7104786b73624c18a190f # v10.2.0
+        uses: actions/stale@997185467fa4f803885201cee163a9f38240193d # v10.1.1
         with:
           repo-token: ${{ secrets.GITHUB_TOKEN }}
           days-before-stale: 90

.github/workflows/translations.yaml

@@ -8,9 +8,6 @@ on:
     paths:
       - src/translations/en.json
 
-permissions:
-  contents: read
-
 jobs:
   upload:
     name: Upload
@@ -18,8 +15,6 @@ jobs:
     steps:
       - name: Checkout the repository
         uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-        with:
-          persist-credentials: false
 
       - name: Upload Translations
         run: |

.gitignore

@@ -57,4 +57,4 @@ test/coverage/
 # AI tooling
 .claude
 .cursor
-.opencode
+

.nvmrc

@@ -1 +1 @@
-24.16.0
+24.13.1

.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch

@@ -31,7 +31,7 @@ index 8795ddcaa77aea7b0356417e4bc4b19e2b3f860c..fcdc68342d9ac53936c9ed40a9ccfc2f
 @@ -129,7 +129,10 @@ export async function injectManifest(
        searchString: options.injectionPoint!,
      });
-
+ 
 -    filesToWrite[options.swDest] = source;
 +    filesToWrite[options.swDest] = source.replace(
 +      url!,

.yarnrc.yml

@@ -1,16 +1,11 @@
-approvedGitRepositories:
-  - "**"
-
 compressionLevel: mixed
 
+npmMinimalAgeGate: "3d"
+
 defaultSemverRangePrefix: ""
 
 enableGlobalCache: false
 
-enableScripts: true
-
 nodeLinker: node-modules
 
-npmMinimalAgeGate: 3d
-
-yarnPath: .yarn/releases/yarn-4.15.0.cjs
+yarnPath: .yarn/releases/yarn-4.12.0.cjs

AGENTS.md

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

AGENTS.md

@@ -0,0 +1,381 @@
+# Home Assistant frontend project guide
+
+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.
+
+Specialized implementation guidance has been moved to `.agents/skills/`, including dialogs, styling tokens, view transitions, form, alert, tooltip, keyboard shortcuts, SubscribeMixin panel patterns, and card creation.
+
+## Table of Contents
+
+- [Quick Reference](#quick-reference)
+- [Core Architecture](#core-architecture)
+- [Development Standards](#development-standards)
+- [Common Patterns](#common-patterns)
+- [Text and Copy Guidelines](#text-and-copy-guidelines)
+- [Development Workflow](#development-workflow)
+- [Review Guidelines](#review-guidelines)
+
+## Quick Reference
+
+### Essential Commands
+
+```bash
+yarn lint          # ESLint + Prettier + TypeScript + Lit
+yarn format        # Auto-fix ESLint + Prettier
+yarn lint:types    # TypeScript compiler (run WITHOUT file arguments)
+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
+- `hui-` - Lovelace UI components
+- `dialog-` - Dialog components
+
+### Import Patterns
+
+```typescript
+import type { HomeAssistant } from "../types";
+import { fireEvent } from "../common/dom/fire_event";
+import { showAlertDialog } from "../dialogs/generic/show-alert-dialog";
+```
+
+## Core Architecture
+
+The Home Assistant frontend is a modern web application that:
+
+- Uses Web Components (custom elements) built with Lit framework
+- Is written entirely in TypeScript with strict type checking
+- Communicates with the backend via WebSocket API
+- Provides comprehensive theming and internationalization
+
+## Development Standards
+
+### Code Quality Requirements
+
+**Linting and Formatting (Enforced by Tools)**
+
+- ESLint config extends Airbnb, TypeScript strict, Lit, Web Components, Accessibility
+- Prettier with ES5 trailing commas enforced
+- No console statements (`no-console: "error"`) - use proper logging
+- Import organization: No unused imports, consistent type imports
+
+**Naming Conventions**
+
+- PascalCase for types and classes
+- camelCase for variables, methods
+- Private methods require leading underscore
+- Public methods forbid leading underscore
+
+### TypeScript Usage
+
+- **Always use strict TypeScript**: Enable all strict flags, avoid `any` types
+- **Proper type imports**: Use `import type` for type-only imports
+- **Define interfaces**: Create proper interfaces for data structures
+- **Type component properties**: All Lit properties must be properly typed
+- **No unused variables**: Prefix with `_` if intentionally unused
+- **Consistent imports**: Use `@typescript-eslint/consistent-type-imports`
+
+```typescript
+// Good
+import type { HomeAssistant } from "../types";
+
+interface EntityConfig {
+  entity: string;
+  name?: string;
+}
+
+@property({ type: Object })
+hass!: HomeAssistant;
+
+// Bad
+@property()
+hass: any;
+```
+
+### Web Components with Lit
+
+- **Use Lit 3.x patterns**: Follow modern Lit practices
+- **Extend appropriate base classes**: Use `LitElement`, `SubscribeMixin`, or other mixins as needed
+- **Define custom element names**: Use `ha-` prefix for components
+
+```typescript
+@customElement("ha-my-component")
+export class HaMyComponent extends LitElement {
+  @property({ attribute: false })
+  hass!: HomeAssistant;
+
+  @state()
+  private _config?: MyComponentConfig;
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+    `;
+  }
+
+  render() {
+    return html`<div>Content</div>`;
+  }
+}
+```
+
+### Component Guidelines
+
+- **Use composition**: Prefer composition over inheritance
+- **Lazy load panels**: Heavy panels should be dynamically imported
+- **Optimize renders**: Use `@state()` for internal state, `@property()` for public API
+- **Handle loading states**: Always show appropriate loading indicators
+- **Support themes**: Use CSS custom properties from theme
+
+### Data Management
+
+- **Use WebSocket API**: All backend communication via home-assistant-js-websocket
+- **Cache appropriately**: Use collections and caching for frequently accessed data
+- **Handle errors gracefully**: All API calls should have error handling
+- **Update real-time**: Subscribe to state changes for live updates
+
+```typescript
+// Good
+try {
+  const result = await fetchEntityRegistry(this.hass.connection);
+  this._processResult(result);
+} catch (err) {
+  showAlertDialog(this, {
+    text: `Failed to load: ${err.message}`,
+  });
+}
+```
+
+### Performance Best Practices
+
+- **Code split**: Split code at the panel/dialog level
+- **Lazy load**: Use dynamic imports for heavy components
+- **Optimize bundle**: Keep initial bundle size minimal
+- **Use virtual scrolling**: For long lists, implement virtual scrolling
+- **Memoize computations**: Cache expensive calculations
+
+### Testing Requirements
+
+- **Write tests**: Add tests for data processing and utilities
+- **Test with Vitest**: Use the established test framework
+- **Mock appropriately**: Mock WebSocket connections and API calls
+- **Test accessibility**: Ensure components are accessible
+
+## Common Patterns
+
+### Internationalization
+
+- **Use localize**: Always use the localization system
+- **Add translation keys**: Add keys to src/translations/en.json
+- **Support placeholders**: Use proper placeholder syntax
+
+```typescript
+this.hass.localize("ui.panel.config.updates.update_available", {
+  count: 5,
+});
+```
+
+### Accessibility
+
+- **ARIA labels**: Add appropriate ARIA labels
+- **Keyboard navigation**: Ensure all interactions work with keyboard
+- **Screen reader support**: Test with screen readers
+- **Color contrast**: Meet WCAG AA standards
+
+## Development Workflow
+
+### Setup and Commands
+
+1. **Setup**: `script/setup` - Install dependencies
+2. **Develop**: `script/develop` - Development server
+3. **Lint**: `yarn lint` - Run all linting before committing
+4. **Test**: `yarn test` - Add and run tests
+5. **Build**: `script/build_frontend` - Test production build
+
+### Common Pitfalls to Avoid
+
+- Don't use `querySelector` - Use refs or component properties
+- Don't manipulate DOM directly - Let Lit handle rendering
+- Don't use global styles - Scope styles to components
+- Don't block the main thread - Use web workers for heavy computation
+- Don't ignore TypeScript errors - Fix all type issues
+
+### Security Best Practices
+
+- Sanitize HTML - Never use `unsafeHTML` with user content
+- Validate inputs - Always validate user inputs
+- Use HTTPS - All external resources must use HTTPS
+- CSP compliance - Ensure code works with Content Security Policy
+
+### Text and Copy Guidelines
+
+#### Terminology Standards
+
+**Delete vs Remove** (Based on gallery/src/pages/Text/remove-delete-add-create.markdown)
+
+- **Use "Remove"** for actions that can be restored or reapplied:
+  - Removing a user's permission
+  - Removing a user from a group
+  - Removing links between items
+  - Removing a widget from dashboard
+  - Removing an item from a cart
+- **Use "Delete"** for permanent, non-recoverable actions:
+  - Deleting a field
+  - Deleting a value in a field
+  - Deleting a task
+  - Deleting a group
+  - Deleting a permission
+  - Deleting a calendar event
+
+**Create vs Add** (Create pairs with Delete, Add pairs with Remove)
+
+- **Use "Add"** for already-existing items:
+  - Adding a permission to a user
+  - Adding a user to a group
+  - Adding links between items
+  - Adding a widget to dashboard
+  - Adding an item to a cart
+- **Use "Create"** for something made from scratch:
+  - Creating a new field
+  - Creating a new task
+  - Creating a new group
+  - Creating a new permission
+  - Creating a new calendar event
+
+#### Writing Style (Consistent with Home Assistant Documentation)
+
+- **Use American English**: Standard spelling and terminology
+- **Friendly, informational tone**: Be inspiring, personal, comforting, engaging
+- **Address users directly**: Use "you" and "your"
+- **Be inclusive**: Objective, non-discriminatory language
+- **Be concise**: Use clear, direct language
+- **Be consistent**: Follow established terminology patterns
+- **Use active voice**: "Delete the automation" not "The automation should be deleted"
+- **Avoid jargon**: Use terms familiar to home automation users
+
+#### Language Standards
+
+- **Always use "Home Assistant"** in full, never "HA" or "HASS"
+- **Avoid abbreviations**: Spell out terms when possible
+- **Use sentence case everywhere**: Titles, headings, buttons, labels, UI elements
+  - ✅ "Create new automation"
+  - ❌ "Create New Automation"
+  - ✅ "Device settings"
+  - ❌ "Device Settings"
+- **Oxford comma**: Use in lists (item 1, item 2, and item 3)
+- **Replace Latin terms**: Use "like" instead of "e.g.", "for example" instead of "i.e."
+- **Avoid CAPS for emphasis**: Use bold or italics instead
+- **Write for all skill levels**: Both technical and non-technical users
+
+#### Key Terminology
+
+- **"integration"** (preferred over "component")
+- **Technical terms**: Use lowercase (automation, entity, device, service)
+
+#### Translation Considerations
+
+- **Add translation keys**: All user-facing text must be translatable
+- **Use placeholders**: Support dynamic content in translations
+- **Keep context**: Provide enough context for translators
+
+```typescript
+// Good
+this.hass.localize("ui.panel.config.automation.delete_confirm", {
+  name: automation.alias,
+});
+
+// Bad - hardcoded text
+("Are you sure you want to delete this automation?");
+```
+
+### Common Review Issues (From PR Analysis)
+
+#### User Experience and Accessibility
+
+- **Form validation**: Always provide proper field labels and validation feedback
+- **Form accessibility**: Prevent password managers from incorrectly identifying fields
+- **Loading states**: Show clear progress indicators during async operations
+- **Error handling**: Display meaningful error messages when operations fail
+- **Mobile responsiveness**: Ensure components work well on small screens
+- **Hit targets**: Make clickable areas large enough for touch interaction
+- **Visual feedback**: Provide clear indication of interactive states
+
+#### Dialog and Modal Patterns
+
+- **Dialog width constraints**: Respect minimum and maximum width requirements
+- **Interview progress**: Show clear progress for multi-step operations
+- **State persistence**: Handle dialog state properly during background operations
+- **Cancel behavior**: Ensure cancel/close buttons work consistently
+- **Form prefilling**: Use smart defaults but allow user override
+
+#### Component Design Patterns
+
+- **Terminology consistency**: Use "Join"/"Apply" instead of "Group" when appropriate
+- **Visual hierarchy**: Ensure proper font sizes and spacing ratios
+- **Grid alignment**: Components should align to the design grid system
+- **Badge placement**: Position badges and indicators consistently
+- **Color theming**: Respect theme variables and design system colors
+
+#### Code Quality Issues
+
+- **Null checking**: Always check if entities exist before accessing properties
+- **TypeScript safety**: Handle potentially undefined array/object access
+- **Import organization**: Remove unused imports and use proper type imports
+- **Event handling**: Properly subscribe and unsubscribe from events
+- **Memory leaks**: Clean up subscriptions and event listeners
+
+#### Configuration and Props
+
+- **Optional parameters**: Make configuration fields optional when sensible
+- **Smart defaults**: Provide reasonable default values
+- **Future extensibility**: Design APIs that can be extended later
+- **Validation**: Validate configuration before applying changes
+
+## Review Guidelines
+
+### Core Requirements Checklist
+
+- [ ] TypeScript strict mode passes (`yarn lint:types`)
+- [ ] No ESLint errors or warnings (`yarn lint:eslint`)
+- [ ] Prettier formatting applied (`yarn lint:prettier`)
+- [ ] Lit analyzer passes (`yarn lint:lit`)
+- [ ] Component follows Lit best practices
+- [ ] Proper error handling implemented
+- [ ] Loading states handled
+- [ ] Mobile responsive
+- [ ] Theme variables used
+- [ ] Translations added
+- [ ] Accessible to screen readers
+- [ ] Tests added (where applicable)
+- [ ] No console statements (use proper logging)
+- [ ] Unused imports removed
+- [ ] Proper naming conventions
+
+### Text and Copy Checklist
+
+- [ ] Follows terminology guidelines (Delete vs Remove, Create vs Add)
+- [ ] Localization keys added for all user-facing text
+- [ ] Uses "Home Assistant" (never "HA" or "HASS")
+- [ ] Sentence case for ALL text (titles, headings, buttons, labels)
+- [ ] American English spelling
+- [ ] Friendly, informational tone
+- [ ] Avoids abbreviations and jargon
+- [ ] Correct terminology (integration not component)
+
+### Component-Specific Checks
+
+- [ ] Dialogs implement HassDialog interface
+- [ ] Dialog styling uses haStyleDialog
+- [ ] Dialog accessibility
+- [ ] ha-alert used correctly for messages
+- [ ] ha-form uses proper schema structure
+- [ ] Components handle all states (loading, error, unavailable)
+- [ ] Entity existence checked before property access
+- [ ] Event subscriptions properly cleaned up

build-scripts/bundle.cjs

@@ -1,4 +1,3 @@
-/* global require, module, __dirname, process */
 const path = require("path");
 const env = require("./env.cjs");
 const paths = require("./paths.cjs");
@@ -177,14 +176,11 @@ module.exports.babelOptions = ({
     {
       // Use unambiguous for dependencies so that require() is correctly injected into CommonJS files
       // Exclusions are needed in some cases where ES modules have no static imports or exports, such as polyfills
-      // (otherwise babel-plugin-polyfill-corejs3 injects bare require("core-js/modules/...") calls
-      // that rspack does not transform, causing ReferenceError in browsers like Safari 14).
       sourceType: "unambiguous",
       include: /\/node_modules\//,
       exclude: [
         "element-internals-polyfill",
         "@?lit(?:-labs|-element|-html)?",
-        "@formatjs/(?:ecma402-abstract|intl-\\w+)",
       ].map((p) => new RegExp(`/node_modules/${p}/`)),
     },
   ],

build-scripts/eslint.config.mjs

@@ -6,9 +6,9 @@ import rootConfig from "../eslint.config.mjs";
 export default tseslint.config(...rootConfig, {
   rules: {
     "no-console": "off",
-    "import-x/no-extraneous-dependencies": "off",
-    "import-x/extensions": "off",
-    "import-x/no-dynamic-require": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/extensions": "off",
+    "import/no-dynamic-require": "off",
     "global-require": "off",
     "@typescript-eslint/no-require-imports": "off",
     "prefer-arrow-callback": "off",

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

@@ -1,12 +0,0 @@
-/* global module */
-// Browser-only replacement for core-js/internals/get-built-in-node-module.
-// The original helper evaluates `Function('return require("...")')()`
-// when it detects a Node environment, which causes a runtime
-// ReferenceError on browsers (notably Safari 14) if environment
-// detection mis-classifies the page. Since browser bundles never need to
-// access Node built-in modules, return undefined unconditionally.
-//
-// Wired up via rspack `NormalModuleReplacementPlugin` in build-scripts/rspack.cjs.
-module.exports = function () {
-  return undefined;
-};

build-scripts/gulp/app.js

@@ -5,7 +5,6 @@ import "./compress.js";
 import "./entry-html.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
-import "./licenses.js";
 import "./locale-data.js";
 import "./service-worker.js";
 import "./translations.js";
@@ -37,12 +36,7 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean",
-    gulp.parallel(
-      "gen-icons-json",
-      "build-translations",
-      "build-locale-data",
-      "gen-licenses"
-    ),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-app",
     "rspack-prod-app",
     gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod"),

build-scripts/gulp/download-translations.js

@@ -99,44 +99,6 @@ const lokaliseProjects = {
   frontend: "3420425759f6d6d241f598.13594006",
 };
 
-const POLL_INTERVAL_MS = 1000;
-
-/* eslint-disable no-await-in-loop */
-async function pollProcess(lokaliseApi, projectId, processId) {
-  while (true) {
-    const process = await lokaliseApi
-      .queuedProcesses()
-      .get(processId, { project_id: projectId });
-
-    const project =
-      projectId === lokaliseProjects.backend ? "backend" : "frontend";
-
-    if (process.status === "finished") {
-      console.log(`Lokalise export process for ${project} finished`);
-      return process;
-    }
-
-    if (process.status === "failed" || process.status === "cancelled") {
-      throw new Error(
-        `Lokalise export process for ${project} ${process.status}: ${process.message}`
-      );
-    }
-
-    console.log(
-      `Lokalise export process for ${project} in progress...`,
-      process.status,
-      process.details?.items_to_process
-        ? `${Math.round(((process.details.items_processed || 0) / process.details.items_to_process) * 100)}% (${process.details.items_processed}/${process.details.items_to_process})`
-        : ""
-    );
-
-    await new Promise((resolve) => {
-      setTimeout(resolve, POLL_INTERVAL_MS);
-    });
-  }
-}
-/* eslint-enable no-await-in-loop */
-
 gulp.task("fetch-lokalise", async function () {
   let apiKey;
   try {
@@ -156,60 +118,55 @@ gulp.task("fetch-lokalise", async function () {
   ]);
 
   await Promise.all(
-    Object.entries(lokaliseProjects).map(async ([project, projectId]) => {
-      try {
-        const exportProcess = await lokaliseApi
-          .files()
-          .async_download(projectId, {
-            format: "json",
-            original_filenames: false,
-            replace_breaks: false,
-            json_unescaped_slashes: true,
-            export_empty_as: "skip",
-            filter_data: ["verified"],
-          });
-
-        const finishedProcess = await pollProcess(
-          lokaliseApi,
-          projectId,
-          exportProcess.process_id
-        );
-
-        const bundleUrl = finishedProcess.details.download_url;
-
-        console.log(`Downloading translations from: ${bundleUrl}`);
-
-        const response = await fetch(bundleUrl);
-
-        if (response.status !== 200 && response.status !== 0) {
+    Object.entries(lokaliseProjects).map(([project, projectId]) =>
+      lokaliseApi
+        .files()
+        .download(projectId, {
+          format: "json",
+          original_filenames: false,
+          replace_breaks: false,
+          json_unescaped_slashes: true,
+          export_empty_as: "skip",
+          filter_data: ["verified"],
+        })
+        .then((download) => fetch(download.bundle_url))
+        .then((response) => {
+          if (response.status === 200 || response.status === 0) {
+            return response.arrayBuffer();
+          }
           throw new Error(response.statusText);
-        }
-
-        console.log(`Extracting translations...`);
-
-        const contents = await JSZip.loadAsync(await response.arrayBuffer());
-
-        await mkdirPromise;
-        await Promise.all(
-          Object.keys(contents.files).map(async (filename) => {
-            const file = contents.file(filename);
-            if (!file) {
-              // no file, probably a directory
-              return;
-            }
-            const content = await file.async("nodebuffer");
-            await fs.writeFile(
-              path.join(inDir, project, filename.split("/").splice(-1)[0]),
-              content,
-              { flag: "w", encoding }
-            );
-          })
-        );
-      } catch (err) {
-        console.error(err);
-        throw err;
-      }
-    })
+        })
+        .then(JSZip.loadAsync)
+        .then(async (contents) => {
+          await mkdirPromise;
+          return Promise.all(
+            Object.keys(contents.files).map(async (filename) => {
+              const file = contents.file(filename);
+              if (!file) {
+                // no file, probably a directory
+                return Promise.resolve();
+              }
+              return file
+                .async("nodebuffer")
+                .then((content) =>
+                  fs.writeFile(
+                    path.join(
+                      inDir,
+                      project,
+                      filename.split("/").splice(-1)[0]
+                    ),
+                    content,
+                    { flag: "w", encoding }
+                  )
+                );
+            })
+          );
+        })
+        .catch((err) => {
+          console.error(err);
+          throw err;
+        })
+    )
   );
 });
 

build-scripts/gulp/entry-html.js

@@ -1,4 +1,3 @@
-/* global process */
 // Tasks to generate entry HTML
 
 import {
@@ -26,7 +25,6 @@ const SAFARI_TO_MACOS = {
   16: [11, 0, 0],
   17: [12, 0, 0],
   18: [13, 0, 0],
-  26: [26, 0, 0],
 };
 
 const getCommonTemplateVars = () => {

build-scripts/gulp/licenses.js

@@ -1,81 +0,0 @@
-// Gulp task to generate third-party license notices.
-
-import { readFile, access } from "fs/promises";
-import { generateLicenseFile } from "generate-license-file";
-import gulp from "gulp";
-import path from "path";
-import paths from "../paths.cjs";
-
-const OUTPUT_FILE = path.join(
-  paths.app_output_static,
-  "third-party-licenses.txt"
-);
-
-// The echarts package ships an Apache-2.0 NOTICE file that must be
-// redistributed alongside the compiled output per Apache License §4(d).
-const NOTICE_FILES = [
-  path.resolve(paths.root_dir, "node_modules/echarts/NOTICE"),
-];
-
-// type-fest ships two license files (MIT for code, CC0 for types).
-// We use the MIT license since that covers the bundled code.
-//
-// Each entry is pinned to a specific version. If a package is updated,
-// this list must be reviewed and the version updated after verifying
-// that the new version's license still matches. The build will fail
-// if the installed version does not match the pinned version.
-const LICENSE_OVERRIDES = [
-  {
-    // type-fest ships two license files (MIT for code, CC0 for types).
-    // We use the MIT license since that covers the bundled code.
-    packageName: "type-fest",
-    version: "5.6.0",
-    licensePath: path.resolve(
-      paths.root_dir,
-      "node_modules/type-fest/license-mit"
-    ),
-  },
-];
-
-gulp.task("gen-licenses", async () => {
-  const licenseOverrides = {};
-
-  for (const { packageName, version, licensePath } of LICENSE_OVERRIDES) {
-    const pkgJsonPath = path.resolve(
-      paths.root_dir,
-      `node_modules/${packageName}/package.json`
-    );
-
-    let packageJSON;
-    try {
-      // eslint-disable-next-line no-await-in-loop
-      packageJSON = JSON.parse(await readFile(pkgJsonPath, "utf-8"));
-    } catch {
-      throw new Error(
-        `package.json for "${packageName}" not found or unreadable at ${pkgJsonPath}`
-      );
-    }
-
-    if (packageJSON.version !== version) {
-      throw new Error(
-        `License override for "${packageName}" is pinned to version ${version}, but found version ${packageJSON.version}. ` +
-          `Please verify the new version's license and update the override in build-scripts/gulp/licenses.js.`
-      );
-    }
-
-    try {
-      // eslint-disable-next-line no-await-in-loop
-      await access(licensePath);
-    } catch {
-      throw new Error(`License file not found or unreadable: ${licensePath}`);
-    }
-
-    licenseOverrides[`${packageName}@${version}`] = licensePath;
-  }
-
-  await generateLicenseFile(
-    path.resolve(paths.root_dir, "package.json"),
-    OUTPUT_FILE,
-    { append: NOTICE_FILES, replace: licenseOverrides }
-  );
-});

build-scripts/gulp/locale-data.js

@@ -40,24 +40,18 @@ const convertToJSON = async (
     throw e;
   }
   // Convert to JSON
-  const parts = localeData.split("} else {");
-  const firstBlock = parts[0];
   const obj = INTL_POLYFILLS[pkg];
   const dataRegex = new RegExp(
     `Intl\\.${obj}\\.${addFunc}\\((?<data>.*)\\)`,
     "s"
   );
-  localeData = firstBlock.match(dataRegex)?.groups?.data;
+  localeData = localeData.match(dataRegex)?.groups?.data;
   if (!localeData) {
     throw Error(`Failed to extract data for language ${lang} from ${pkg}`);
   }
   // Parse to validate JSON, then stringify to minify
-  try {
-    localeData = JSON.stringify(JSON.parse(localeData));
-    await writeFile(join(outDir, `${pkg}/${lang}.json`), localeData);
-  } catch (e) {
-    throw Error(`Failed to parse JSON for language ${lang} from ${pkg}: ${e}`);
-  }
+  localeData = JSON.stringify(JSON.parse(localeData));
+  await writeFile(join(outDir, `${pkg}/${lang}.json`), localeData);
 };
 
 gulp.task("clean-locale-data", async () => deleteSync([outDir]));

build-scripts/gulp/rspack.js

@@ -57,12 +57,6 @@ const runDevServer = async ({
         directory: contentBase,
         watch: true,
       },
-      client: {
-        overlay: {
-          runtimeErrors: (error) =>
-            !error?.message?.includes("ResizeObserver loop"),
-        },
-      },
       proxy,
     },
     compiler

build-scripts/list-plugins-and-polyfills.js

@@ -6,6 +6,7 @@ import presetEnv from "@babel/preset-env";
 import compilationTargets from "@babel/helper-compilation-targets";
 import coreJSCompat from "core-js-compat";
 import { logPlugin } from "@babel/preset-env/lib/debug.js";
+// eslint-disable-next-line import/no-relative-packages
 import shippedPolyfills from "../node_modules/babel-plugin-polyfill-corejs3/lib/shipped-proposals.js";
 import { babelOptions } from "./bundle.cjs";
 

build-scripts/rspack.cjs

@@ -1,4 +1,3 @@
-/* global require, module, __dirname */
 const { existsSync } = require("fs");
 const path = require("path");
 const rspack = require("@rspack/core");
@@ -13,7 +12,7 @@ const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("rspack-manifest-plugin");
 const log = require("fancy-log");
 // eslint-disable-next-line @typescript-eslint/naming-convention
-const SafeWebpackBar = require("./safe-webpackbar.cjs");
+const WebpackBar = require("webpackbar/rspack");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");
 
@@ -127,7 +126,7 @@ const createRspackConfig = ({
       },
     },
     plugins: [
-      !isStatsBuild && new SafeWebpackBar({ fancy: !isProdBuild }),
+      !isStatsBuild && new WebpackBar({ fancy: !isProdBuild }),
       new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -174,16 +173,6 @@ const createRspackConfig = ({
             path.resolve(paths.root_dir, "src/util/empty.js")
           )
         : false,
-      // core-js ships a Node-only helper that evaluates
-      // `Function('return require("...")')()` when its runtime environment
-      // detection mis-classifies the page as Node. That produces a
-      // ReferenceError on browsers (observed on Safari 14). Since browser
-      // bundles never need to access Node built-in modules, replace it with
-      // a CommonJS no-op stub matching the helper's API (returns undefined).
-      new rspack.NormalModuleReplacementPlugin(
-        /core-js[\\/]internals[\\/]get-built-in-node-module(?:\.js)?$/,
-        path.resolve(__dirname, "get-built-in-node-module-shim.cjs")
-      ),
       !isProdBuild && new LogStartCompilePlugin(),
       isProdBuild &&
         new StatsWriterPlugin({

build-scripts/safe-webpackbar.cjs

@@ -1,25 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/naming-convention
-const WebpackBar = require("webpackbar/rspack");
-
-// Rspack 2's ProgressPlugin passes the third `info` arg as
-// `{ builtModules, moduleIdentifier? }` instead of the v1 string. webpackbar@7's
-// parseRequest still expects a string and crashes on `split`. Extract
-// moduleIdentifier (the v1 equivalent) so progress still shows the active module.
-class SafeWebpackBar extends WebpackBar {
-  constructor(options) {
-    super(options);
-    const inner = this.webpackbar;
-    const originalUpdate = inner.updateProgress.bind(inner);
-    inner.updateProgress = (percent, message, details = []) =>
-      originalUpdate(
-        percent,
-        message,
-        details.map((d) => {
-          if (typeof d === "string") return d;
-          return d?.moduleIdentifier ?? "";
-        })
-      );
-  }
-}
-
-module.exports = SafeWebpackBar;

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

@@ -1,7 +1,7 @@
 import type { ActionDetail } from "@material/mwc-list/mwc-list";
 import { mdiCast, mdiCastConnected, mdiViewDashboard } from "@mdi/js";
 import type { Auth, Connection } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -150,7 +150,7 @@ class HcCast extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
 
     const llColl = atLeastVersion(this.connection.haVersion, 0, 107)
@@ -183,7 +183,7 @@ class HcCast extends LitElement {
     });
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
     super.updated(changedProps);
     toggleAttribute(
       this,

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

@@ -12,7 +12,7 @@ import {
   ERR_INVALID_HTTPS_TO_HTTP,
   getAuth,
 } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../../src/cast/cast_manager";
@@ -26,7 +26,7 @@ import "../../../../src/components/ha-svg-icon";
 import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
-import "../../../../src/components/input/ha-input";
+import "../../../../src/components/ha-textfield";
 import "../../../../src/components/ha-button";
 
 const seeFAQ = (qid) => html`
@@ -123,11 +123,11 @@ export class HcConnect extends LitElement {
               To get started, enter your Home Assistant URL and click authorize.
               If you want a preview instead, click the show demo button.
             </p>
-            <ha-input
+            <ha-textfield
               label="Home Assistant URL"
               placeholder="https://abcdefghijklmnop.ui.nabu.casa"
               @keydown=${this._handleInputKeyDown}
-            ></ha-input>
+            ></ha-textfield>
             ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
           </div>
           <div class="card-actions">
@@ -158,7 +158,7 @@ export class HcConnect extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     import("./hc-cast");
 
@@ -204,7 +204,7 @@ export class HcConnect extends LitElement {
   }
 
   private async _handleConnect() {
-    const inputEl = this.shadowRoot!.querySelector("ha-input")!;
+    const inputEl = this.shadowRoot!.querySelector("ha-textfield")!;
     const value = inputEl.value || "";
     this.error = undefined;
 
@@ -319,7 +319,7 @@ export class HcConnect extends LitElement {
       flex: 1;
     }
 
-    ha-input {
+    ha-textfield {
       width: 100%;
     }
   `;

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

@@ -1,6 +1,6 @@
 import type { Auth, Connection, HassUser } from "home-assistant-js-websocket";
 import { getUser } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -53,7 +53,7 @@ class HcLayout extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
 
     if (this.connection) {

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/layout/hc-demo.ts

@@ -1,4 +1,3 @@
-import type { PropertyValues } from "lit";
 import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mockHistory } from "../../../../demo/src/stubs/history";
@@ -30,7 +29,7 @@ class HcDemo extends HassElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this._initializeHass();
   }
@@ -42,7 +41,7 @@ class HcDemo extends HassElement {
         this._updateHass(hassUpdate),
     };
 
-    const hass = provideHass(this, initial, true);
+    const hass = (this.hass = provideHass(this, initial));
 
     mockHistory(hass);
 

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

@@ -1,5 +1,4 @@
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, type TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import type { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
@@ -65,7 +64,7 @@ class HcLovelace extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
     super.updated(changedProps);
 
     if (changedProps.has("viewPath") || changedProps.has("lovelaceConfig")) {

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

@@ -1,6 +1,6 @@
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { createConnection, getAuth } from "home-assistant-js-websocket";
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { html } from "lit";
 import { customElement, state } from "lit/decorators";
 import { CAST_NS } from "../../../../src/cast/const";
@@ -106,7 +106,7 @@ export class HcMain extends HassElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     import("./hc-lovelace");
     import("../../../../src/resources/append-ha-style");

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/demo-configs.ts

@@ -11,9 +11,9 @@ export const demoConfigs: (() => Promise<DemoConfig>)[] = [
   () => import("./jimpower").then((mod) => mod.demoJimpower),
 ];
 
-// eslint-disable-next-line import-x/no-mutable-exports
+// eslint-disable-next-line import/no-mutable-exports
 export let selectedDemoConfigIndex = 0;
-// eslint-disable-next-line import-x/no-mutable-exports
+// eslint-disable-next-line import/no-mutable-exports
 export let selectedDemoConfig: Promise<DemoConfig> =
   demoConfigs[selectedDemoConfigIndex]();
 

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",
@@ -141,7 +142,7 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
       },
     },
     "device_tracker.car": {
-      entity_id: "device_tracker.car",
+      entity_id: "sensor.outdoor_humidity",
       state: "not_home",
       attributes: {
         friendly_name: "Car",
@@ -199,7 +200,7 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
       },
     },
     "binary_sensor.kitchen_motion": {
-      entity_id: "binary_sensor.kitchen_motion",
+      entity_id: "light.kitchen_motion",
       state: "on",
       attributes: {
         device_class: "motion",
@@ -335,7 +336,7 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
       },
     },
     "sensor.rain": {
-      entity_id: "sensor.rain",
+      entity_id: "sensor.moon_phase",
       state: "7.2",
       attributes: {
         state_class: "total_increasing",
@@ -565,7 +566,7 @@ export const demoEntitiesSections: DemoConfig["entities"] = (localize) =>
       },
     },
     "update.home_assistant_core_update": {
-      entity_id: "update.home_assistant_core_update",
+      entity_id: "update.home_assistant_supervisor_update",
       state: "off",
       attributes: {
         auto_update: false,

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/custom-cards/cast-demo-row.ts

@@ -1,6 +1,4 @@
-/// <reference types="chromecast-caf-sender" />
 import { mdiTelevision } from "@mdi/js";
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
 import type { CastManager } from "../../../src/cast/cast_manager";
@@ -38,7 +36,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     import("../../../src/cast/cast_manager").then(({ getCastManager }) =>
       getCastManager().then((mgr) => {
@@ -63,7 +61,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     );
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  protected updated(changedProps) {
     super.updated(changedProps);
     this.style.display = this._castManager ? "" : "none";
   }

demo/src/custom-cards/ha-demo-card.ts

@@ -1,4 +1,4 @@
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
@@ -102,7 +102,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     if (this._hidden) {
       this.style.display = "none";

demo/src/ha-demo.ts

@@ -39,7 +39,7 @@ export class HaDemo extends HomeAssistantAppEl {
         this._updateHass(hassUpdate),
     };
 
-    const hass = provideHass(this, initial, true);
+    const hass = (this.hass = provideHass(this, initial));
     const localizePromise =
       // @ts-ignore
       this._loadFragmentTranslations(hass.language, "page-demo").then(

demo/src/stubs/energy.ts

@@ -14,28 +14,40 @@ 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,
+            },
+          ],
+          power: [
+            { stat_rate: "sensor.power_grid" },
+            { stat_rate: "sensor.power_grid_return" },
+          ],
           cost_adjustment_day: 0,
         },
         {

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

demo/src/stubs/lovelace.ts

@@ -1,5 +1,4 @@
 import type { LocalizeFunc } from "../../../src/common/translations/localize";
-import type { LovelaceInfo } from "../../../src/data/lovelace/resource";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import {
   selectedDemoConfig,
@@ -28,9 +27,6 @@ export const mockLovelace = (
     );
   });
 
-  hass.mockWS("lovelace/info", () =>
-    Promise.resolve({ resource_mode: "storage" } as LovelaceInfo)
-  );
   hass.mockWS("lovelace/config/save", () => Promise.resolve());
   hass.mockWS("lovelace/resources", () => Promise.resolve([]));
   hass.mockWS("lovelace/dashboards/list", () => Promise.resolve([]));

demo/src/stubs/recorder.ts

@@ -1,7 +1,6 @@
 import {
   addDays,
   addHours,
-  addMinutes,
   addMonths,
   differenceInHours,
   endOfDay,
@@ -13,22 +12,10 @@ import type {
 } from "../../../src/data/recorder";
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
-const getNextDate = (
-  currentDate: Date,
-  period: "5minute" | "hour" | "day" | "month"
-): Date => {
-  return period === "day"
-    ? addDays(currentDate, 1)
-    : period === "month"
-      ? addMonths(currentDate, 1)
-      : period === "hour"
-        ? addHours(currentDate, 1)
-        : addMinutes(currentDate, 5);
-};
-
 const generateMeanStatistics = (
   start: Date,
   end: Date,
+  // eslint-disable-next-line default-param-last
   period: "5minute" | "hour" | "day" | "month" = "hour",
   maxDiff: number
 ): StatisticValue[] => {
@@ -39,10 +26,9 @@ const generateMeanStatistics = (
   while (end > currentDate && currentDate < now) {
     const delta = Math.random() * maxDiff;
     const mean = delta;
-    const nextDate = getNextDate(currentDate, period);
     statistics.push({
       start: currentDate.getTime(),
-      end: nextDate.getTime(),
+      end: currentDate.getTime(),
       mean,
       min: mean - Math.random() * maxDiff,
       max: mean + Math.random() * maxDiff,
@@ -50,7 +36,12 @@ const generateMeanStatistics = (
       state: mean,
       sum: null,
     });
-    currentDate = nextDate;
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+          ? addMonths(currentDate, 1)
+          : addHours(currentDate, 1);
   }
   return statistics;
 };
@@ -58,6 +49,7 @@ const generateMeanStatistics = (
 const generateSumStatistics = (
   start: Date,
   end: Date,
+  // eslint-disable-next-line default-param-last
   period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number
@@ -68,12 +60,11 @@ const generateSumStatistics = (
   let sum = initValue;
   const now = new Date();
   while (end > currentDate && currentDate < now) {
-    const nextDate = getNextDate(currentDate, period);
     const add = Math.random() * maxDiff;
     sum += add;
     statistics.push({
       start: currentDate.getTime(),
-      end: nextDate.getTime(),
+      end: currentDate.getTime(),
       mean: null,
       min: null,
       max: null,
@@ -82,7 +73,12 @@ const generateSumStatistics = (
       state: initValue + sum,
       sum,
     });
-    currentDate = nextDate;
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+          ? addMonths(currentDate, 1)
+          : addHours(currentDate, 1);
   }
   return statistics;
 };
@@ -90,7 +86,8 @@ const generateSumStatistics = (
 const generateCurvedStatistics = (
   start: Date,
   end: Date,
-  period: "5minute" | "hour" | "day" | "month" = "hour",
+  // eslint-disable-next-line default-param-last
+  _period: "5minute" | "hour" | "day" | "month" = "hour",
   initValue: number,
   maxDiff: number,
   metered: boolean
@@ -104,12 +101,11 @@ const generateCurvedStatistics = (
   let half = false;
   const now = new Date();
   while (end > currentDate && currentDate < now) {
-    const nextDate = getNextDate(currentDate, period);
     const add = i * (Math.random() * maxDiff);
     sum += add;
     statistics.push({
       start: currentDate.getTime(),
-      end: nextDate.getTime(),
+      end: currentDate.getTime(),
       mean: null,
       min: null,
       max: null,
@@ -118,7 +114,7 @@ const generateCurvedStatistics = (
       state: initValue + sum,
       sum: metered ? sum : null,
     });
-    currentDate = nextDate;
+    currentDate = addHours(currentDate, 1);
     if (!half && i > hours / 2) {
       half = true;
     }
@@ -296,7 +292,7 @@ const statisticsFunctions: Record<
       end,
       period,
       productionFinalVal,
-      0.2
+      2
     );
     return [...morning, ...production, ...evening, ...rest];
   },

demo/src/stubs/sensor.ts

@@ -1,56 +1,58 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 
 export const mockSensor = (hass: MockHomeAssistant) => {
-  hass.mockWS("sensor/numeric_device_classes", () => ({
-    numeric_device_classes: [
-      "volume_storage",
-      "gas",
-      "data_size",
-      "irradiance",
-      "wind_speed",
-      "volatile_organic_compounds",
-      "volatile_organic_compounds_parts",
-      "voltage",
-      "frequency",
-      "precipitation_intensity",
-      "volume",
-      "precipitation",
-      "battery",
-      "nitrogen_dioxide",
-      "speed",
-      "signal_strength",
-      "pm1",
-      "nitrous_oxide",
-      "atmospheric_pressure",
-      "data_rate",
-      "temperature",
-      "power_factor",
-      "aqi",
-      "current",
-      "volume_flow_rate",
-      "humidity",
-      "duration",
-      "ozone",
-      "distance",
-      "pressure",
-      "pm25",
-      "weight",
-      "energy",
-      "carbon_monoxide",
-      "apparent_power",
-      "illuminance",
-      "energy_storage",
-      "moisture",
-      "power",
-      "water",
-      "carbon_dioxide",
-      "ph",
-      "reactive_power",
-      "monetary",
-      "nitrogen_monoxide",
-      "pm10",
-      "sound_pressure",
-      "sulphur_dioxide",
-    ],
-  }));
+  hass.mockWS("sensor/numeric_device_classes", () => [
+    {
+      numeric_device_classes: [
+        "volume_storage",
+        "gas",
+        "data_size",
+        "irradiance",
+        "wind_speed",
+        "volatile_organic_compounds",
+        "volatile_organic_compounds_parts",
+        "voltage",
+        "frequency",
+        "precipitation_intensity",
+        "volume",
+        "precipitation",
+        "battery",
+        "nitrogen_dioxide",
+        "speed",
+        "signal_strength",
+        "pm1",
+        "nitrous_oxide",
+        "atmospheric_pressure",
+        "data_rate",
+        "temperature",
+        "power_factor",
+        "aqi",
+        "current",
+        "volume_flow_rate",
+        "humidity",
+        "duration",
+        "ozone",
+        "distance",
+        "pressure",
+        "pm25",
+        "weight",
+        "energy",
+        "carbon_monoxide",
+        "apparent_power",
+        "illuminance",
+        "energy_storage",
+        "moisture",
+        "power",
+        "water",
+        "carbon_dioxide",
+        "ph",
+        "reactive_power",
+        "monetary",
+        "nitrogen_monoxide",
+        "pm10",
+        "sound_pressure",
+        "sulphur_dioxide",
+      ],
+    },
+  ]);
 };

eslint.config.mjs

@@ -1,18 +1,28 @@
 // @ts-check
 
+/* eslint-disable import/no-extraneous-dependencies */
 import unusedImports from "eslint-plugin-unused-imports";
 import globals from "globals";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
 import tseslint from "typescript-eslint";
 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";
-import importX from "eslint-plugin-import-x";
+
+const _filename = fileURLToPath(import.meta.url);
+const _dirname = path.dirname(_filename);
+const compat = new FlatCompat({
+  baseDirectory: _dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
 
 export default tseslint.config(
-  js.configs.recommended,
+  ...compat.extends("airbnb-base"),
   eslintConfigPrettier,
   litConfigs["flat/all"],
   tseslint.configs.recommended,
@@ -20,7 +30,6 @@ export default tseslint.config(
   tseslint.configs.stylistic,
   wcConfigs["flat/recommended"],
   a11yConfigs.recommended,
-  importX.flatConfigs.recommended,
   {
     plugins: {
       "unused-imports": unusedImports,
@@ -48,7 +57,7 @@ export default tseslint.config(
     },
 
     settings: {
-      "import-x/resolver": {
+      "import/resolver": {
         webpack: {
           config: "./rspack.config.cjs",
         },
@@ -56,65 +65,33 @@ export default tseslint.config(
     },
 
     rules: {
-      "array-callback-return": ["error", { allowImplicit: true }],
-      "block-scoped-var": "error",
-      "consistent-return": "error",
-      curly: ["error", "multi-line"],
-      "default-case-last": "error",
-      eqeqeq: ["error", "always", { null: "ignore" }],
-      "guard-for-in": "error",
-      "no-await-in-loop": "error",
-      "no-caller": "error",
-      "no-constructor-return": "error",
-      "no-eval": "error",
-      "no-extend-native": "error",
-      "no-implied-eval": "error",
-      "no-iterator": "error",
-      "no-new-func": "error",
-      "no-new-wrappers": "error",
-      "no-octal-escape": "error",
-      "no-promise-executor-return": "error",
-      "no-return-assign": ["error", "always"],
-      "no-script-url": "error",
-      "no-self-compare": "error",
-      "no-sequences": "error",
-      "no-template-curly-in-string": "error",
-      "no-unreachable-loop": "error",
-
-      "no-else-return": ["error", { allowElseIf: false }],
-      "no-lonely-if": "error",
-      "no-unneeded-ternary": ["error", { defaultAssignment: false }],
-      "no-useless-computed-key": "error",
-      "no-useless-concat": "error",
-      "no-useless-rename": "error",
-      "no-useless-return": "error",
-      "one-var": ["error", "never"],
-      "operator-assignment": ["error", "always"],
-      "prefer-arrow-callback": "error",
-      "prefer-exponentiation-operator": "error",
-      "prefer-object-spread": "error",
-      "prefer-regex-literals": ["error", { disallowRedundantWrapping: true }],
-      "symbol-description": "error",
-      yoda: "error",
-
-      // TODO: Enable once violations are fixed (43 instances as of 2026-04)
-      // "no-useless-assignment": "error",
-      "no-useless-assignment": "error",
-
-      // Project rules
+      "class-methods-use-this": "off",
+      "new-cap": "off",
+      "prefer-template": "off",
+      "object-shorthand": "off",
+      "func-names": "off",
+      "no-underscore-dangle": "off",
+      strict: "off",
+      "no-plusplus": "off",
       "no-bitwise": "error",
+      "comma-dangle": "off",
+      "vars-on-top": "off",
+      "no-continue": "off",
+      "no-param-reassign": "off",
+      "no-multi-assign": "off",
       "no-console": "error",
+      radix: "off",
+      "no-alert": "off",
+      "no-nested-ternary": "off",
+      "prefer-destructuring": "off",
       "no-restricted-globals": [2, "event"],
-      "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
-      "wc/no-self-class": "off",
+      "prefer-promise-reject-errors": "off",
+      "import/prefer-default-export": "off",
+      "import/no-default-export": "off",
+      "import/no-unresolved": "off",
+      "import/no-cycle": "off",
 
-      // import-x rules
-      "import-x/named": "off",
-      "import-x/prefer-default-export": "off",
-      "import-x/no-default-export": "off",
-      "import-x/no-unresolved": "off",
-      "import-x/no-cycle": "off",
-      "import-x/extensions": [
+      "import/extensions": [
         "error",
         "ignorePackages",
         {
@@ -122,27 +99,19 @@ export default tseslint.config(
           js: "never",
         },
       ],
-      "import-x/no-mutable-exports": "error",
-      "import-x/no-amd": "error",
-      "import-x/first": "error",
-      "import-x/order": [
-        "error",
-        { groups: [["builtin", "external", "internal"]] },
-      ],
-      "import-x/newline-after-import": "error",
-      "import-x/no-absolute-path": "error",
-      "import-x/no-dynamic-require": "error",
-      "import-x/no-webpack-loader-syntax": "error",
-      "import-x/no-named-default": "error",
-      "import-x/no-self-import": "error",
-      "import-x/no-useless-path-segments": ["error", { commonjs: true }],
-      "import-x/no-import-module-exports": ["error", { exceptions: [] }],
-      "import-x/no-relative-packages": "error",
 
-      // TypeScript rules
+      "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
+      "object-curly-newline": "off",
+      "default-case": "off",
+      "wc/no-self-class": "off",
+      "no-shadow": "off",
+      "@typescript-eslint/camelcase": "off",
       "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-use-before-define": "off",
       "@typescript-eslint/no-non-null-assertion": "off",
       "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
       "@typescript-eslint/no-shadow": ["error"],
 
       "@typescript-eslint/naming-convention": [
@@ -206,6 +175,7 @@ export default tseslint.config(
       "lit-a11y/role-has-required-aria-attrs": "error",
       "@typescript-eslint/consistent-type-imports": "error",
       "@typescript-eslint/no-import-type-side-effects": "error",
+      camelcase: "off",
       "@typescript-eslint/no-dynamic-delete": "off",
       "@typescript-eslint/no-empty-object-type": [
         "error",
@@ -214,6 +184,7 @@ export default tseslint.config(
           allowObjectTypes: "always",
         },
       ],
+      "no-use-before-define": "off",
     },
   },
   {
@@ -221,19 +192,5 @@ export default tseslint.config(
     languageOptions: {
       globals: globals.audioWorklet,
     },
-  },
-  {
-    files: ["src/entrypoints/service-worker.ts"],
-    languageOptions: {
-      globals: globals.serviceworker,
-    },
-  },
-  {
-    plugins: {
-      html,
-    },
-    rules: {
-      "html/no-invalid-attr-value": "error",
-    },
   }
 );

gallery/src/components/demo-black-white-row.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+import type { TemplateResult } from "lit";
 import { html, LitElement, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
@@ -50,7 +50,7 @@ class DemoBlackWhiteRow extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

gallery/src/components/demo-card.ts

@@ -1,5 +1,5 @@
 import { load } from "js-yaml";
-import type { PropertyValues } from "lit";
+import type { PropertyValueMap } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -60,7 +60,9 @@ class DemoCard extends LitElement {
     this._size = await this._card?.getCardSize();
   }
 
-  protected update(_changedProperties: PropertyValues<this>): void {
+  protected update(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
     super.update(_changedProperties);
     this._updateSize();
   }

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

@@ -1,3 +1,5 @@
+import "@material/mwc-drawer";
+import "@material/mwc-top-app-bar-fixed";
 import { html, css, LitElement } from "lit";
 import { customElement } from "lit/decorators";
 import "../../src/components/ha-icon-button";

gallery/src/ha-gallery.ts

@@ -1,23 +1,17 @@
-import { mdiMenu, mdiSwapHorizontal } from "@mdi/js";
+import "@material/mwc-drawer";
+import "@material/mwc-top-app-bar-fixed";
+import { mdiMenu } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, query, state } from "lit/decorators";
 import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
-import { setDirectionStyles } from "../../src/common/util/compute_rtl";
-import "../../src/components/ha-button";
-import "../../src/components/ha-drawer";
-import type { HaDrawer } from "../../src/components/ha-drawer";
 import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
 import "../../src/components/ha-icon-button";
-import "../../src/components/ha-svg-icon";
-import "../../src/components/ha-top-app-bar-fixed";
 import "../../src/managers/notification-manager";
 import { haStyle } from "../../src/resources/styles";
 import { PAGES, SIDEBAR } from "../build/import-pages";
 import "./components/page-description";
 
-const RTL_STORAGE_KEY = "gallery-rtl";
-
 const GITHUB_DEMO_URL =
   "https://github.com/home-assistant/frontend/blob/dev/gallery/src/pages/";
 
@@ -35,13 +29,11 @@ class HaGallery extends LitElement {
     document.location.hash.substring(1) ||
     `${SIDEBAR[0].category}/${SIDEBAR[0].pages![0]}`;
 
-  @state() private _rtl = localStorage.getItem(RTL_STORAGE_KEY) === "true";
-
   @query("notification-manager")
   private _notifications!: HTMLElementTagNameMap["notification-manager"];
 
-  @query("ha-drawer")
-  private _drawer!: HaDrawer;
+  @query("mwc-drawer")
+  private _drawer!: HTMLElementTagNameMap["mwc-drawer"];
 
   private _narrow = window.matchMedia("(max-width: 600px)").matches;
 
@@ -76,15 +68,16 @@ class HaGallery extends LitElement {
     }
 
     return html`
-      <ha-drawer
-        .direction=${this._rtl ? "rtl" : "ltr"}
+      <mwc-drawer
+        hasHeader
         .open=${!this._narrow}
         .type=${this._narrow ? "modal" : "dismissible"}
       >
-        <div class="drawer-title">Home Assistant Design</div>
+        <span slot="title">Home Assistant Design</span>
+        <!-- <span slot="subtitle">subtitle</span> -->
         <div class="sidebar">${sidebar}</div>
-        <div slot="appContent" class="app-content">
-          <ha-top-app-bar-fixed>
+        <div slot="appContent">
+          <mwc-top-app-bar-fixed>
             <ha-icon-button
               slot="navigationIcon"
               @click=${this._menuTapped}
@@ -94,7 +87,7 @@ class HaGallery extends LitElement {
             <div slot="title">
               ${PAGES[this._page].metadata.title || this._page.split("/")[1]}
             </div>
-          </ha-top-app-bar-fixed>
+          </mwc-top-app-bar-fixed>
           <div class="content">
             ${PAGES[this._page].description
               ? html`
@@ -104,47 +97,37 @@ class HaGallery extends LitElement {
             ${dynamicElement(`demo-${this._page.replace("/", "-")}`)}
           </div>
           <div class="page-footer">
-            <div class="edit-docs">
-              <div class="header">Help us to improve our documentation</div>
-              <div class="secondary">
-                Suggest an edit to this page, or provide/view feedback for this
-                page.
-              </div>
-              <div>
-                ${PAGES[this._page].description ||
-                Object.keys(PAGES[this._page].metadata).length > 0
-                  ? html`
-                      <a
-                        href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
-                        target="_blank"
-                      >
-                        Edit text
-                      </a>
-                    `
-                  : ""}
-                ${PAGES[this._page].demo
-                  ? html`
-                      <a
-                        href=${`${GITHUB_DEMO_URL}${this._page}.ts`}
-                        target="_blank"
-                      >
-                        Edit demo
-                      </a>
-                    `
-                  : ""}
-              </div>
+            <div class="header">Help us to improve our documentation</div>
+            <div class="secondary">
+              Suggest an edit to this page, or provide/view feedback for this
+              page.
             </div>
-            <div class="rtl-toggle">
-              <ha-icon-button
-                @click=${this._toggleRtl}
-                .label=${this._rtl ? "Switch to LTR" : "Switch to RTL"}
-              >
-                <ha-svg-icon .path=${mdiSwapHorizontal}></ha-svg-icon>
-              </ha-icon-button>
+            <div>
+              ${PAGES[this._page].description ||
+              Object.keys(PAGES[this._page].metadata).length > 0
+                ? html`
+                    <a
+                      href=${`${GITHUB_DEMO_URL}${this._page}.markdown`}
+                      target="_blank"
+                    >
+                      Edit text
+                    </a>
+                  `
+                : ""}
+              ${PAGES[this._page].demo
+                ? html`
+                    <a
+                      href=${`${GITHUB_DEMO_URL}${this._page}.ts`}
+                      target="_blank"
+                    >
+                      Edit demo
+                    </a>
+                  `
+                : ""}
             </div>
           </div>
         </div>
-      </ha-drawer>
+      </mwc-drawer>
       <notification-manager
         .hass=${FAKE_HASS}
         id="notifications"
@@ -152,11 +135,9 @@ class HaGallery extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
-    this._applyDirection();
-
     this.addEventListener("show-notification", (ev) =>
       this._notifications.showDialog({ message: ev.detail.message })
     );
@@ -183,11 +164,6 @@ class HaGallery extends LitElement {
 
   updated(changedProps: PropertyValues) {
     super.updated(changedProps);
-
-    if (changedProps.has("_rtl")) {
-      this._applyDirection();
-    }
-
     if (!changedProps.has("_page")) {
       return;
     }
@@ -210,15 +186,6 @@ class HaGallery extends LitElement {
     this._drawer.open = !this._drawer.open;
   }
 
-  private _toggleRtl() {
-    this._rtl = !this._rtl;
-    localStorage.setItem(RTL_STORAGE_KEY, String(this._rtl));
-  }
-
-  private _applyDirection() {
-    setDirectionStyles(this._rtl ? "rtl" : "ltr", this);
-  }
-
   static styles = [
     haStyle,
     css`
@@ -226,28 +193,12 @@ class HaGallery extends LitElement {
         -ms-user-select: initial;
         -webkit-user-select: initial;
         -moz-user-select: initial;
-        --ha-sidebar-width: 256px;
-        --header-height: 64px;
       }
 
       .sidebar {
-        box-sizing: border-box;
-        max-height: calc(100vh - var(--header-height));
-        overflow-y: auto;
         padding: 4px;
       }
 
-      .drawer-title {
-        align-items: center;
-        box-sizing: border-box;
-        color: var(--primary-text-color);
-        display: flex;
-        font-size: var(--ha-font-size-l);
-        font-weight: var(--ha-font-weight-medium);
-        min-height: var(--header-height);
-        padding: 0 16px;
-      }
-
       .sidebar a {
         color: var(--primary-text-color);
         display: block;
@@ -271,17 +222,13 @@ class HaGallery extends LitElement {
         opacity: 0.12;
       }
 
-      .app-content {
+      div[slot="appContent"] {
         display: flex;
         flex-direction: column;
         min-height: 100vh;
         background: var(--primary-background-color);
       }
 
-      ha-drawer[type="dismissible"][open] ha-top-app-bar-fixed {
-        --ha-top-app-bar-width: calc(100% - var(--ha-sidebar-width));
-      }
-
       .content {
         flex: 1;
       }
@@ -291,16 +238,11 @@ class HaGallery extends LitElement {
       }
 
       .page-footer {
-        display: flex;
-        border-radius: var(--ha-border-radius-lg);
-        background-color: var(--primary-background-color);
-      }
-
-      .edit-docs {
-        flex: 1;
         text-align: center;
         margin: 16px;
         padding: 16px;
+        border-radius: var(--ha-border-radius-lg);
+        background-color: var(--primary-background-color);
       }
 
       .page-footer div {
@@ -324,18 +266,6 @@ class HaGallery extends LitElement {
         margin: 0 8px;
         text-decoration: none;
       }
-
-      .rtl-toggle {
-        padding: var(--ha-space-4);
-        display: inline-flex;
-        align-items: flex-end;
-        margin-top: 12px !important;
-      }
-
-      .rtl-toggle ha-icon-button {
-        border: 1px solid var(--divider-color);
-        border-radius: var(--ha-border-radius-pill);
-      }
     `,
   ];
 }

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

@@ -1,29 +1,21 @@
 import { dump } from "js-yaml";
-import type { PropertyValues } from "lit";
 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 { 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 = [
@@ -172,7 +164,7 @@ export class DemoAutomationDescribeAction extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

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

@@ -1,36 +1,24 @@
 import { dump } from "js-yaml";
-import type { PropertyValues } from "lit";
 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 { 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[] = [
@@ -97,7 +85,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

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

@@ -1,36 +1,24 @@
 import { dump } from "js-yaml";
-import type { PropertyValues } from "lit";
 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 { 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 = [
@@ -120,7 +108,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

gallery/src/pages/automation/trace-timeline.ts

@@ -1,6 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
 
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -52,7 +51,7 @@ export class DemoAutomationTraceTimeline extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

gallery/src/pages/automation/trace.ts

@@ -1,6 +1,5 @@
 /* eslint-disable lit/no-template-arrow */
 
-import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
@@ -52,7 +51,7 @@ export class DemoAutomationTrace extends LitElement {
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues<this>) {
+  protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");

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

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

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

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

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

@@ -1,217 +0,0 @@
-import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import { mdiCog, mdiHelp } from "@mdi/js";
-import "../../../../src/components/ha-adaptive-popover";
-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 type { HASSDomCurrentTargetEvent } from "../../../../src/common/dom/fire_event";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../../../src/types";
-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 PopoverType = false | "basic" | "small" | "large" | "form" | "actions";
-
-@customElement("demo-components-ha-adaptive-popover")
-export class DemoHaAdaptivePopover extends LitElement {
-  @state() private _openPopover: PopoverType = false;
-
-  @state() private _hass?: HomeAssistant;
-
-  @state() private _dialogAnchor?: HTMLElement;
-
-  protected firstUpdated() {
-    this._hass = provideHass(this);
-  }
-
-  protected render() {
-    return html`
-      <div class="content">
-        <h1>Adaptive popover <code>&lt;ha-adaptive-popover&gt;</code></h1>
-
-        <p class="subtitle">
-          Responsive popover component that opens as an anchored popover on
-          desktop and falls back to adaptive dialog behavior otherwise.
-        </p>
-
-        <h2>Demos</h2>
-
-        <div class="buttons">
-          <ha-button @click=${this._handleOpenPopover("basic")}
-            >Basic adaptive popover</ha-button
-          >
-          <ha-button @click=${this._handleOpenPopover("small")}
-            >Small adaptive popover</ha-button
-          >
-          <ha-button @click=${this._handleOpenPopover("large")}
-            >Large adaptive popover</ha-button
-          >
-          <ha-button @click=${this._handleOpenPopover("form")}
-            >Adaptive popover with form</ha-button
-          >
-          <ha-button @click=${this._handleOpenPopover("actions")}
-            >Adaptive popover with actions</ha-button
-          >
-        </div>
-
-        <ha-card>
-          <div class="card-content">
-            <p>
-              <strong>Tip:</strong> On desktop, this uses the opener as the
-              popover anchor. On narrow screens, it falls back to adaptive
-              dialog behavior.
-            </p>
-          </div>
-        </ha-card>
-
-        <ha-adaptive-popover
-          .hass=${this._hass}
-          .open=${this._openPopover === "basic"}
-          .dialogAnchor=${this._dialogAnchor}
-          header-title="Basic adaptive popover"
-          header-subtitle="Anchored to the opener on desktop"
-          @closed=${this._handleClosed}
-        >
-          <div>
-            This component uses a desktop popover when an anchor is available,
-            and adaptive dialog behavior otherwise.
-          </div>
-        </ha-adaptive-popover>
-
-        <ha-adaptive-popover
-          .hass=${this._hass}
-          .open=${this._openPopover === "small"}
-          .dialogAnchor=${this._dialogAnchor}
-          width="small"
-          header-title="Small adaptive popover"
-          @closed=${this._handleClosed}
-        >
-          <div>This popover uses the small width preset (320px).</div>
-        </ha-adaptive-popover>
-
-        <ha-adaptive-popover
-          .hass=${this._hass}
-          .open=${this._openPopover === "large"}
-          .dialogAnchor=${this._dialogAnchor}
-          width="large"
-          header-title="Large adaptive popover"
-          @closed=${this._handleClosed}
-        >
-          <div>This popover uses the large width preset (1024px).</div>
-        </ha-adaptive-popover>
-
-        <ha-adaptive-popover
-          .hass=${this._hass}
-          .open=${this._openPopover === "form"}
-          .dialogAnchor=${this._dialogAnchor}
-          header-title="Adaptive popover with form"
-          header-subtitle="This is an adaptive popover 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-popover>
-
-        <ha-adaptive-popover
-          .hass=${this._hass}
-          .open=${this._openPopover === "actions"}
-          .dialogAnchor=${this._dialogAnchor}
-          header-title="Adaptive popover with actions"
-          header-subtitle="This is an adaptive popover 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 popover content</div>
-        </ha-adaptive-popover>
-      </div>
-    `;
-  }
-
-  private _handleOpenPopover =
-    (popover: PopoverType) => (ev?: HASSDomCurrentTargetEvent<HTMLElement>) => {
-      this._dialogAnchor = ev?.currentTarget;
-      this._openPopover = popover;
-    };
-
-  private _handleClosed = () => {
-    this._dialogAnchor = undefined;
-    this._openPopover = 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);
-      }
-
-      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);
-      }
-
-      .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);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-adaptive-popover": DemoHaAdaptivePopover;
-  }
-}

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

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+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";
@@ -160,7 +160,7 @@ export class DemoHaAlert extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -1,5 +1,5 @@
 import { mdiButtonCursor, mdiHome } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+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";
@@ -84,7 +84,7 @@ export class DemoHaBadge extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -57,7 +57,7 @@ Check the [webawesome documentation](https://webawesome.com/docs/components/butt
 | ---------- | ---------------------------------------------- | -------- | --------------------------------------------------------------------------------- |
 | appearance | "accent"/"filled"/"plain"                      | "accent" | Sets the button appearance.                                                       |
 | variants   | "brand"/"danger"/"neutral"/"warning"/"success" | "brand"  | Sets the button color variant. "brand" is default.                                |
-| size       | "small"/"medium"/"large"                       | "medium" | Sets the button size.                                                             |
+| size       | "small"/"medium"                               | "medium" | Sets the button size.                                                             |
 | loading    | Boolean                                        | false    | Shows a loading indicator instead of the buttons label and disable buttons click. |
 | disabled   | Boolean                                        | false    | Disables the button and prevents user interaction.                                |
 

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

@@ -1,5 +1,5 @@
 import { mdiHome } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+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";
@@ -118,7 +118,7 @@ export class DemoHaButton extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

gallery/src/pages/components/ha-control-switch.ts

@@ -9,7 +9,6 @@ import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { repeat } from "lit/directives/repeat";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-switch";
 
@@ -51,100 +50,59 @@ export class DemoHaControlSwitch extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="themes">
-        ${["light", "dark"].map(
-          (mode) => html`
-            <div class=${mode}>
-              <ha-card header="ha-control-switch ${mode}">
-                ${repeat(switches, (sw) => {
-                  const { id, label, ...config } = sw;
-                  return html`
-                    <div class="card-content">
-                      <label id="${mode}-${id}">${label}</label>
-                      <pre>Config: ${JSON.stringify(config)}</pre>
-                      <ha-control-switch
-                        .checked=${this.checked}
-                        class=${ifDefined(config.class)}
-                        @change=${this.handleValueChanged}
-                        .pathOn=${mdiLightbulb}
-                        .pathOff=${mdiLightbulbOff}
-                        .label=${label}
-                        ?disabled=${config.disabled}
-                        ?reversed=${config.reversed}
-                      >
-                      </ha-control-switch>
-                    </div>
-                  `;
-                })}
-                <div class="card-content">
-                  <p class="title"><b>Vertical</b></p>
-                  <div class="vertical-switches">
-                    ${repeat(switches, (sw) => {
-                      const { label, ...config } = sw;
-                      return html`
-                        <ha-control-switch
-                          .checked=${this.checked}
-                          vertical
-                          class=${ifDefined(config.class)}
-                          @change=${this.handleValueChanged}
-                          .label=${label}
-                          .pathOn=${mdiGarageOpen}
-                          .pathOff=${mdiGarage}
-                          ?disabled=${config.disabled}
-                          ?reversed=${config.reversed}
-                        >
-                        </ha-control-switch>
-                      `;
-                    })}
-                  </div>
-                </div>
-              </ha-card>
+      ${repeat(switches, (sw) => {
+        const { id, label, ...config } = sw;
+        return html`
+          <ha-card>
+            <div class="card-content">
+              <label id=${id}>${label}</label>
+              <pre>Config: ${JSON.stringify(config)}</pre>
+              <ha-control-switch
+                .checked=${this.checked}
+                class=${ifDefined(config.class)}
+                @change=${this.handleValueChanged}
+                .pathOn=${mdiLightbulb}
+                .pathOff=${mdiLightbulbOff}
+                .label=${label}
+                ?disabled=${config.disabled}
+                ?reversed=${config.reversed}
+              >
+              </ha-control-switch>
             </div>
-          `
-        )}
-      </div>
+          </ha-card>
+        `;
+      })}
+      <ha-card>
+        <div class="card-content">
+          <p class="title"><b>Vertical</b></p>
+          <div class="vertical-switches">
+            ${repeat(switches, (sw) => {
+              const { id, label, ...config } = sw;
+              return html`
+                <ha-control-switch
+                  .checked=${this.checked}
+                  vertical
+                  class=${ifDefined(config.class)}
+                  @change=${this.handleValueChanged}
+                  .label=${label}
+                  .pathOn=${mdiGarageOpen}
+                  .pathOff=${mdiGarage}
+                  ?disabled=${config.disabled}
+                  ?reversed=${config.reversed}
+                >
+                </ha-control-switch>
+              `;
+            })}
+          </div>
+        </div>
+      </ha-card>
     `;
   }
 
-  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: block;
-    }
-    .themes {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      flex-wrap: wrap;
-      gap: 16px;
-      padding: 16px;
-    }
-    .dark,
-    .light {
-      display: block;
-      background-color: var(--primary-background-color);
-      padding: 16px;
-      border-radius: var(--ha-border-radius-md);
-    }
     ha-card {
       max-width: 600px;
-      margin: 0 auto;
+      margin: 24px auto;
     }
     pre {
       margin-top: 0;

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

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

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

@@ -8,7 +8,7 @@ import {
   mdiContentPaste,
   mdiDelete,
 } from "@mdi/js";
-import type { TemplateResult, PropertyValues } from "lit";
+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";
@@ -80,7 +80,7 @@ export class DemoHaDropdown extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

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

@@ -12,53 +12,34 @@ import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import type { AreaRegistryEntry } from "../../../../src/data/area/area_registry";
 import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
+import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
 
 const ENTITIES = [
-  {
-    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[] = [
@@ -480,12 +461,6 @@ const SCHEMAS: {
       },
       { type: "string", name: "path", default: "/" },
       { type: "boolean", name: "ssl", default: false },
-      {
-        type: "string",
-        name: "comments",
-        default: "disabled field",
-        disabled: true,
-      },
     ],
   },
 ];

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

@@ -1,82 +0,0 @@
----
-title: Input
----
-
-# Input `<ha-input>`
-
-A text input component supporting Home Assistant theming and validation, based on webawesome input.
-Supports multiple input types including text, number, password, email, search, and more.
-
-## Implementation
-
-### Example usage
-
-```html
-<ha-input label="Name" value="Hello"></ha-input>
-
-<ha-input label="Email" type="email" placeholder="you@example.com"></ha-input>
-
-<ha-input label="Password" type="password" password-toggle></ha-input>
-
-<ha-input label="Required" required></ha-input>
-
-<ha-input label="Disabled" disabled value="Can't touch this"></ha-input>
-```
-
-### API
-
-This component is based on the webawesome input component.
-
-**Slots**
-
-- `start`: Content placed before the input (usually for icons or prefixes).
-- `end`: Content placed after the input (usually for icons or suffixes).
-- `label`: Custom label content. Overrides the `label` property.
-- `hint`: Custom hint content. Overrides the `hint` property.
-- `clear-icon`: Custom clear icon.
-- `show-password-icon`: Custom show password icon.
-- `hide-password-icon`: Custom hide password icon.
-
-**Properties/Attributes**
-
-| Name                 | Type                                                                                           | Default    | Description                                                                                                |
-| -------------------- | ---------------------------------------------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------- |
-| appearance           | "material"/"outlined"                                                                          | "material" | Sets the input appearance style. "material" is the default filled style, "outlined" uses a bordered style. |
-| type                 | "text"/"number"/"password"/"email"/"search"/"tel"/"url"/"date"/"datetime-local"/"time"/"color" | "text"     | Sets the input type.                                                                                       |
-| value                | String                                                                                         | -          | The current value of the input.                                                                            |
-| label                | String                                                                                         | ""         | The input's label text.                                                                                    |
-| hint                 | String                                                                                         | ""         | The input's hint/helper text.                                                                              |
-| placeholder          | String                                                                                         | ""         | Placeholder text shown when the input is empty.                                                            |
-| with-clear           | Boolean                                                                                        | false      | Adds a clear button when the input is not empty.                                                           |
-| readonly             | Boolean                                                                                        | false      | Makes the input readonly.                                                                                  |
-| disabled             | Boolean                                                                                        | false      | Disables the input and prevents user interaction.                                                          |
-| required             | Boolean                                                                                        | false      | Makes the input a required field.                                                                          |
-| password-toggle      | Boolean                                                                                        | false      | Adds a button to toggle the password visibility.                                                           |
-| without-spin-buttons | Boolean                                                                                        | false      | Hides the browser's built-in spin buttons for number inputs.                                               |
-| auto-validate        | Boolean                                                                                        | false      | Validates the input on blur instead of on form submit.                                                     |
-| invalid              | Boolean                                                                                        | false      | Marks the input as invalid.                                                                                |
-| inset-label          | Boolean                                                                                        | false      | Uses an inset label style where the label stays inside the input.                                          |
-| validation-message   | String                                                                                         | ""         | Custom validation message shown when the input is invalid.                                                 |
-| pattern              | String                                                                                         | -          | A regular expression pattern to validate input against.                                                    |
-| minlength            | Number                                                                                         | -          | The minimum length of input that will be considered valid.                                                 |
-| maxlength            | Number                                                                                         | -          | The maximum length of input that will be considered valid.                                                 |
-| min                  | Number/String                                                                                  | -          | The input's minimum value. Only applies to date and number input types.                                    |
-| max                  | Number/String                                                                                  | -          | The input's maximum value. Only applies to date and number input types.                                    |
-| step                 | Number/"any"                                                                                   | -          | Specifies the granularity that the value must adhere to.                                                   |
-
-**CSS Custom Properties**
-
-- `--ha-input-padding-top` - Padding above the input.
-- `--ha-input-padding-bottom` - Padding below the input. Defaults to `var(--ha-space-2)`.
-- `--ha-input-text-align` - Text alignment of the input. Defaults to `start`.
-- `--ha-input-required-marker` - The marker shown after the label for required fields. Defaults to `"*"`.
-
----
-
-## Derivatives
-
-The following components extend or wrap `ha-input` for specific use cases:
-
-- **`<ha-input-search>`** — A pre-configured search input with a magnify icon, clear button, and localized "Search" placeholder. Extends `ha-input`.
-- **`<ha-input-copy>`** — A read-only input with a copy-to-clipboard button. Supports optional value masking with a reveal toggle.
-- **`<ha-input-multi>`** — A dynamic list of text inputs for managing arrays of strings. Supports adding, removing, and drag-and-drop reordering.

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

@@ -1,239 +0,0 @@
-import { ContextProvider } from "@lit/context";
-import { mdiMagnify } from "@mdi/js";
-import type { TemplateResult, PropertyValues } 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-card";
-import "../../../../src/components/ha-svg-icon";
-import "../../../../src/components/input/ha-input";
-import "../../../../src/components/input/ha-input-copy";
-import "../../../../src/components/input/ha-input-multi";
-import "../../../../src/components/input/ha-input-search";
-import { internationalizationContext } from "../../../../src/data/context";
-
-const LOCALIZE_KEYS: Record<string, string> = {
-  "ui.common.copy": "Copy",
-  "ui.common.show": "Show",
-  "ui.common.hide": "Hide",
-  "ui.common.add": "Add",
-  "ui.common.remove": "Remove",
-  "ui.common.search": "Search",
-  "ui.common.copied_clipboard": "Copied to clipboard",
-};
-
-@customElement("demo-components-ha-input")
-export class DemoHaInput extends LitElement {
-  constructor() {
-    super();
-    // Provides internationalizationContext for ha-input-copy, ha-input-multi and ha-input-search
-    new ContextProvider(this, {
-      context: internationalizationContext,
-      initialValue: {
-        localize: ((key: string) => LOCALIZE_KEYS[key] ?? key) as any,
-        language: "en",
-        selectedLanguage: null,
-        locale: {} as any,
-        translationMetadata: {} as any,
-        loadBackendTranslation: (async () => (key: string) => key) as any,
-        loadFragmentTranslation: (async () => (key: string) => key) as any,
-      },
-    });
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      ${["light", "dark"].map(
-        (mode) => html`
-          <div class=${mode}>
-            <ha-card header="ha-input in ${mode}">
-              <div class="card-content">
-                <h3>Basic</h3>
-                <div class="row">
-                  <ha-input label="Default"></ha-input>
-                  <ha-input label="With value" value="Hello"></ha-input>
-                  <ha-input
-                    label="With placeholder"
-                    placeholder="Type here..."
-                  ></ha-input>
-                </div>
-
-                <h3>Input types</h3>
-                <div class="row">
-                  <ha-input label="Text" type="text" value="Text"></ha-input>
-                  <ha-input label="Number" type="number" value="42"></ha-input>
-                  <ha-input
-                    label="Email"
-                    type="email"
-                    placeholder="you@example.com"
-                  ></ha-input>
-                </div>
-                <div class="row">
-                  <ha-input
-                    label="Password"
-                    type="password"
-                    value="secret"
-                    password-toggle
-                  ></ha-input>
-                  <ha-input label="URL" type="url" placeholder="https://...">
-                  </ha-input>
-                  <ha-input label="Date" type="date"></ha-input>
-                </div>
-
-                <h3>States</h3>
-                <div class="row">
-                  <ha-input
-                    label="Disabled"
-                    disabled
-                    value="Disabled"
-                  ></ha-input>
-                  <ha-input
-                    label="Readonly"
-                    readonly
-                    value="Readonly"
-                  ></ha-input>
-                  <ha-input label="Required" required></ha-input>
-                </div>
-                <div class="row">
-                  <ha-input
-                    label="Invalid"
-                    invalid
-                    validation-message="This field is required"
-                    value=""
-                  ></ha-input>
-                  <ha-input label="With hint" hint="This is a hint"></ha-input>
-                  <ha-input
-                    label="With clear"
-                    with-clear
-                    value="Clear me"
-                  ></ha-input>
-                </div>
-
-                <h3>With slots</h3>
-                <div class="row">
-                  <ha-input label="With prefix">
-                    <span slot="start">$</span>
-                  </ha-input>
-                  <ha-input label="With suffix">
-                    <span slot="end">kg</span>
-                  </ha-input>
-                  <ha-input label="With icon">
-                    <ha-svg-icon .path=${mdiMagnify} slot="start"></ha-svg-icon>
-                  </ha-input>
-                </div>
-
-                <h3>Appearance: outlined</h3>
-                <div class="row">
-                  <ha-input
-                    appearance="outlined"
-                    label="Outlined"
-                    value="Hello"
-                  ></ha-input>
-                  <ha-input
-                    appearance="outlined"
-                    label="Outlined disabled"
-                    disabled
-                    value="Disabled"
-                  ></ha-input>
-                  <ha-input
-                    appearance="outlined"
-                    label="Outlined invalid"
-                    invalid
-                    validation-message="Required"
-                  ></ha-input>
-                </div>
-                <div class="row">
-                  <ha-input
-                    appearance="outlined"
-                    placeholder="Placeholder only"
-                  ></ha-input>
-                </div>
-              </div>
-            </ha-card>
-
-            <ha-card header="Derivatives in ${mode}">
-              <div class="card-content">
-                <h3>ha-input-search</h3>
-                <ha-input-search label="Search label"></ha-input-search>
-                <ha-input-search appearance="outlined"></ha-input-search>
-
-                <h3>ha-input-copy</h3>
-                <ha-input-copy
-                  value="my-api-token-123"
-                  masked-value="••••••••••••••••••"
-                  masked-toggle
-                ></ha-input-copy>
-
-                <h3>ha-input-multi</h3>
-                <ha-input-multi
-                  label="URL"
-                  add-label="Add URL"
-                  .value=${["https://example.com"]}
-                ></ha-input-multi>
-              </div>
-            </ha-card>
-          </div>
-        `
-      )}
-    `;
-  }
-
-  firstUpdated(changedProps: PropertyValues<this>) {
-    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;
-    }
-    ha-card {
-      margin: 24px auto;
-    }
-    .card-content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-2);
-    }
-    h3 {
-      margin: var(--ha-space-4) 0 var(--ha-space-1) 0;
-      font-size: var(--ha-font-size-l);
-      font-weight: var(--ha-font-weight-medium);
-    }
-    h3:first-child {
-      margin-top: 0;
-    }
-    .row {
-      display: flex;
-      gap: var(--ha-space-4);
-    }
-    .row > * {
-      flex: 1;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-input": DemoHaInput;
-  }
-}

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

@@ -1,189 +0,0 @@
----
-title: List
----
-
-# List
-
-The list family provides accessible, keyboard-navigable list containers and
-item variants. Pick the container based on semantics, then the item based on
-interactivity.
-
-## Containers
-
-### `<ha-list-base>`
-
-A styled container with roving-tabindex keyboard navigation. Host role is
-`list`. Children should be `<ha-list-item-*>`. Arrow keys rove focus;
-Home/End jump to the first/last enabled item; Enter/Space activates the
-focused item.
-
-**Attributes**
-
-| Name         | Type    | Default | Description                    |
-| ------------ | ------- | ------- | ------------------------------ |
-| `wrap-focus` | Boolean | `false` | Arrow keys wrap past the ends. |
-| `aria-label` | String  | —       | Accessible name.               |
-
-**Events**
-
-- `ha-list-activated` — Enter/Space on a focused item. Detail
-  `{ index: number, item: HaListItemBase }`.
-
-**Methods**
-
-- `focus()` — focus the active item (or the first focusable one).
-- `focusItemAtIndex(index)` — make the item at `index` active and focus it.
-- `getActiveItemIndex()` — current active index, or `-1`.
-- `setActiveItemIndex(index, focusItem?)` — move the active index without
-  necessarily focusing.
-- `updateListItems()` — re-discover slotted items (called automatically on
-  slotchange).
-
-**CSS parts**
-
-- `base` — the outer `<div role="list">`.
-
-**CSS custom properties**
-
-- `--ha-list-gap` — spacing between items. Defaults to `0`.
-- `--ha-list-padding` — padding around the list. Defaults to `0`.
-
-### `<ha-list-selectable>`
-
-Selectable list. Extends `ha-list-base`. Host role is `listbox`; items must be
-`<ha-list-item-option>` (role `option`). Set `multi` for multi-select; the
-host reflects `aria-multiselectable`.
-
-**Attributes**
-
-| Name    | Type    | Default | Description                            |
-| ------- | ------- | ------- | -------------------------------------- |
-| `multi` | Boolean | `false` | Allow multiple options to be selected. |
-
-**Events**
-
-- `ha-list-item-selected` — an option was selected. Detail is the option's
-  index (`number`). In single mode this is the only selection event; in multi
-  mode it fires for each option added to the selection.
-- `ha-list-item-deselected` — an option was deselected (multi mode only). Detail
-  is the option's index (`number`).
-
-**Methods / getters**
-
-- `selected` (getter) — current selection (`number` or `Set<number>`).
-- `selectedItems` (getter) — selected `HaListItemOption` elements, in index
-  order.
-- `setSelected(indices)` — replace the entire selection.
-- `select(index)` — add `index` to the selection (replaces in single mode).
-- `toggle(index, force?)` — toggle a single index, or force on/off.
-- `clearSelection()` — clear all.
-
-### `<ha-list-nav>`
-
-Same as `ha-list-base`, but wrapped in a `<nav>` landmark
-(`<nav><div role="list">…</div></nav>`). Use `aria-label` to name the
-landmark — the value is forwarded to the inner `<nav>`. Items should be
-`<ha-list-item-button>` with an `href`.
-
-**CSS parts**
-
-- `nav` — the `<nav>` wrapper.
-- `base` — the inner `<div role="list">`.
-
-## Items
-
-All items inherit from `ha-row-item`, which provides the row layout and the
-shared slots/attributes below.
-
-### Shared row layout (`ha-row-item`)
-
-**Slots**
-
-- `start` — leading container (icon/avatar).
-- `end` — trailing container (meta/chevron).
-- `headline` — primary text (overrides the `headline` attribute).
-- `supporting-text` — secondary text (overrides the `supporting-text` attribute).
-- `content` — escape hatch: replaces the entire middle column.
-
-**Attributes**
-
-| Name              | Type    | Default | Description                             |
-| ----------------- | ------- | ------- | --------------------------------------- |
-| `headline`        | String  | —       | Primary text. Overridden by the slot.   |
-| `supporting-text` | String  | —       | Secondary text. Overridden by the slot. |
-| `disabled`        | Boolean | `false` | Dims the row and blocks pointer events. |
-
-**CSS parts**
-
-`base`, `start`, `content`, `headline`, `supporting-text`, `end`.
-
-**CSS custom properties**
-
-- `--ha-row-item-padding-block` — vertical padding.
-- `--ha-row-item-padding-inline` — horizontal padding.
-- `--ha-row-item-gap` — gap between `start`, `content`, and `end`.
-- `--ha-row-item-min-height` — minimum row height (default `48px`).
-
-### `<ha-list-item-base>`
-
-Non-interactive list row. Host role is `listitem`. Inherits everything from
-`ha-row-item`.
-
-**Attributes**
-
-- `interactive` (Boolean, default `false`) — opt this row into the parent
-  list's roving tabindex. Useful for sortable rows that need keyboard focus
-  but no click action. Interactive subclasses set this automatically.
-
-**CSS custom properties**
-
-- `--ha-list-item-focus-radius` — focus outline border-radius.
-- `--ha-list-item-focus-width` — focus outline width (steady state).
-- `--ha-list-item-focus-width-start` — focus outline width at the start of
-  the focus-in animation.
-- `--ha-list-item-focus-offset` — focus outline offset.
-- `--ha-list-item-focus-background` — background color on keyboard focus.
-
-### `<ha-list-item-button>`
-
-Interactive row. Renders an inner `<a>` when `href` is set, otherwise a
-`<button>`. The full row is the hit target. When placed inside a list using
-roving tabindex, the host is the tab stop and the inner element carries
-`tabindex="-1"`.
-
-**Attributes**
-
-- `href` (String) — when set, renders an `<a>` instead of a `<button>`.
-- `target` (String) — anchor `target` (requires `href`).
-- `rel` (String) — anchor `rel` (requires `href`).
-- `download` (String) — anchor `download` (requires `href`).
-
-**CSS parts**
-
-- `ripple` — the ripple effect element.
-
-### `<ha-list-item-option>`
-
-Selectable row. Host role is `option`; reflects `aria-selected`. Designed to
-sit inside `<ha-list-selectable>`, which owns selection state and toggles
-`selected` on this item — the option itself does not fire selection events.
-
-**Attributes**
-
-- `selected` (Boolean, default `false`, reflected) — set by the parent
-  `ha-list-selectable`.
-- `value` (String) — value identifying the option.
-- `appearance` (`"line"` | `"checkbox"`, default `"line"`) — `"line"`
-  highlights the row; `"checkbox"` renders a decorative `<ha-checkbox>`.
-- `selection-position` (`"start"` | `"end"`, default `"start"`) — side the
-  checkbox sits on when `appearance="checkbox"`.
-
-**CSS parts**
-
-- `checkbox` — wrapper around the `<ha-checkbox>` when `appearance="checkbox"`.
-- `ripple` — the ripple effect element.
-
-**CSS custom properties**
-
-- `--ha-list-item-selected-background` — background color when selected
-  (`appearance="line"`).

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

@@ -1,455 +0,0 @@
-import {
-  mdiAccount,
-  mdiChevronRight,
-  mdiCog,
-  mdiHome,
-  mdiInformationOutline,
-  mdiMapMarker,
-  mdiOpenInNew,
-  mdiViewDashboard,
-  mdiWifi,
-} from "@mdi/js";
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-svg-icon";
-import "../../../../src/components/item/ha-list-item-base";
-import "../../../../src/components/item/ha-list-item-button";
-import "../../../../src/components/item/ha-list-item-option";
-import "../../../../src/components/list/ha-list-base";
-import "../../../../src/components/list/ha-list-nav";
-import "../../../../src/components/list/ha-list-selectable";
-
-type Appearance = "line" | "checkbox";
-type Position = "start" | "end";
-
-const appearances: Appearance[] = ["line", "checkbox"];
-const positions: Position[] = ["start", "end"];
-const selectedStates = [false, true];
-const disabledStates = [false, true];
-
-@customElement("demo-components-ha-list")
-export class DemoHaList extends LitElement {
-  @state() private _buttonClicks = 0;
-
-  @state() private _single: number | Set<number> = -1;
-
-  @state() private _multiLine: number | Set<number> = new Set();
-
-  @state() private _multiCheckStart: number | Set<number> = new Set();
-
-  @state() private _multiCheckEnd: number | Set<number> = new Set();
-
-  private _options = ["Alpha", "Beta", "Gamma", "Delta", "Epsilon"];
-
-  protected render(): TemplateResult {
-    return html`
-      <h2>ha-list-base</h2>
-      <p>
-        Styled container with keyboard focus navigation. Children should be
-        <code>ha-list-item-*</code>.
-      </p>
-
-      <ha-card header="Info list (non-interactive rows)">
-        <ha-list-base aria-label="Device info">
-          <ha-list-item-base
-            headline="IP address"
-            supporting-text="192.168.1.42"
-          >
-            <ha-svg-icon slot="start" .path=${mdiWifi}></ha-svg-icon>
-          </ha-list-item-base>
-          <ha-list-item-base headline="Location" supporting-text="Living room">
-            <ha-svg-icon slot="start" .path=${mdiMapMarker}></ha-svg-icon>
-          </ha-list-item-base>
-          <ha-list-item-base headline="Firmware" supporting-text="2026.4.1">
-            <ha-svg-icon
-              slot="start"
-              .path=${mdiInformationOutline}
-            ></ha-svg-icon>
-          </ha-list-item-base>
-        </ha-list-base>
-      </ha-card>
-
-      <ha-card header="Vertical list (default)">
-        <ha-list-base aria-label="Example list">
-          <ha-list-item-button>
-            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
-            <span slot="headline">First row</span>
-            <span slot="supporting-text">Supporting text</span>
-            <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
-          </ha-list-item-button>
-          <ha-list-item-button>
-            <ha-svg-icon slot="start" .path=${mdiAccount}></ha-svg-icon>
-            <span slot="headline">Second row</span>
-          </ha-list-item-button>
-          <ha-list-item-button disabled>
-            <span slot="headline">Disabled row</span>
-          </ha-list-item-button>
-          <ha-list-item-button>
-            <span slot="headline">Fourth row</span>
-          </ha-list-item-button>
-        </ha-list-base>
-      </ha-card>
-
-      <ha-card header="Vertical list with wrap-focus">
-        <ha-list-base wrap-focus aria-label="Wrap focus">
-          <ha-list-item-button>
-            <span slot="headline">A</span>
-          </ha-list-item-button>
-          <ha-list-item-button>
-            <span slot="headline">B</span>
-          </ha-list-item-button>
-          <ha-list-item-button>
-            <span slot="headline">C</span>
-          </ha-list-item-button>
-        </ha-list-base>
-      </ha-card>
-
-      <h2>ha-list-item-base</h2>
-      <p>Non-interactive base row with slot permutations.</p>
-
-      <ha-card header="Slot permutations">
-        <ha-list-base aria-label="Slot permutations">
-          <ha-list-item-base headline="Headline only"></ha-list-item-base>
-          <ha-list-item-base
-            headline="Headline"
-            supporting-text="Supporting text"
-          ></ha-list-item-base>
-          <ha-list-item-base headline="Start + headline">
-            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
-          </ha-list-item-base>
-          <ha-list-item-base headline="Start + headline + end">
-            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
-            <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
-          </ha-list-item-base>
-          <ha-list-item-base
-            headline="Full row"
-            supporting-text="All slots filled"
-          >
-            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
-            <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
-          </ha-list-item-base>
-          <ha-list-item-base>
-            <div slot="content" class="custom-content">
-              <strong>Custom content escape hatch</strong>
-              <span>Replaces the whole middle column</span>
-            </div>
-          </ha-list-item-base>
-          <ha-list-item-base headline="Disabled row" disabled>
-            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
-          </ha-list-item-base>
-        </ha-list-base>
-      </ha-card>
-
-      <h2>ha-list-item-button</h2>
-      <p>
-        Interactive row. Renders an inner <code>&lt;a&gt;</code> when
-        <code>href</code> is set, otherwise a <code>&lt;button&gt;</code>.
-      </p>
-
-      <ha-card header="Button (default) / link (with href)">
-        <ha-list-base aria-label="Button items">
-          <ha-list-item-button @click=${this._onButtonClick}>
-            <ha-svg-icon slot="start" .path=${mdiHome}></ha-svg-icon>
-            <span slot="headline">Button (clicks: ${this._buttonClicks})</span>
-          </ha-list-item-button>
-          <ha-list-item-button
-            href="https://www.home-assistant.io/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <ha-svg-icon slot="start" .path=${mdiOpenInNew}></ha-svg-icon>
-            <span slot="headline">Link (opens in new tab)</span>
-            <span slot="supporting-text"
-              >Cmd/Ctrl-click still opens in new tab</span
-            >
-          </ha-list-item-button>
-          <ha-list-item-button disabled>
-            <span slot="headline">Disabled button</span>
-          </ha-list-item-button>
-          <ha-list-item-button href="#nope" disabled>
-            <span slot="headline">Disabled link</span>
-          </ha-list-item-button>
-        </ha-list-base>
-      </ha-card>
-
-      <h2>ha-list-selectable + ha-list-item-option</h2>
-      <p>
-        Selectable list (<code>role="listbox"</code>). Items must be
-        <code>ha-list-item-option</code>. Set <code>multi</code> for
-        multi-select.
-      </p>
-
-      <ha-card header="Single select, appearance=line">
-        <ha-list-selectable
-          aria-label="Single select"
-          @ha-list-item-selected=${this._onSingle}
-        >
-          ${this._options.map(
-            (o, i) => html`
-              <ha-list-item-option
-                .value=${o}
-                ?selected=${this._isSel(this._single, i)}
-              >
-                <span slot="headline">${o}</span>
-              </ha-list-item-option>
-            `
-          )}
-        </ha-list-selectable>
-        <pre>selected: ${JSON.stringify(this._toJson(this._single))}</pre>
-      </ha-card>
-
-      <ha-card header="Multi select, appearance=line">
-        <ha-list-selectable
-          multi
-          aria-label="Multi select line"
-          @ha-list-item-selected=${this._onMultiLineSelected}
-          @ha-list-item-deselected=${this._onMultiLineDeselected}
-        >
-          ${this._options.map(
-            (o, i) => html`
-              <ha-list-item-option
-                .value=${o}
-                ?selected=${this._isSel(this._multiLine, i)}
-              >
-                <span slot="headline">${o}</span>
-              </ha-list-item-option>
-            `
-          )}
-        </ha-list-selectable>
-        <pre>selected: ${JSON.stringify(this._toJson(this._multiLine))}</pre>
-      </ha-card>
-
-      <ha-card
-        header='Multi select, appearance=checkbox, selection-position="start"'
-      >
-        <ha-list-selectable
-          multi
-          aria-label="Multi checkbox start"
-          @ha-list-item-selected=${this._onMultiCheckStartSelected}
-          @ha-list-item-deselected=${this._onMultiCheckStartDeselected}
-        >
-          ${this._options.map(
-            (o, i) => html`
-              <ha-list-item-option
-                appearance="checkbox"
-                selection-position="start"
-                .value=${o}
-                ?selected=${this._isSel(this._multiCheckStart, i)}
-              >
-                <span slot="headline">${o}</span>
-              </ha-list-item-option>
-            `
-          )}
-        </ha-list-selectable>
-        <pre>
-selected: ${JSON.stringify(this._toJson(this._multiCheckStart))}</pre
-        >
-      </ha-card>
-
-      <ha-card
-        header='Multi select, appearance=checkbox, selection-position="end"'
-      >
-        <ha-list-selectable
-          multi
-          aria-label="Multi checkbox end"
-          @ha-list-item-selected=${this._onMultiCheckEndSelected}
-          @ha-list-item-deselected=${this._onMultiCheckEndDeselected}
-        >
-          ${this._options.map(
-            (o, i) => html`
-              <ha-list-item-option
-                appearance="checkbox"
-                selection-position="end"
-                .value=${o}
-                ?selected=${this._isSel(this._multiCheckEnd, i)}
-              >
-                <span slot="headline">${o}</span>
-                <span slot="supporting-text">${o.length} characters</span>
-              </ha-list-item-option>
-            `
-          )}
-        </ha-list-selectable>
-        <pre>
-selected: ${JSON.stringify(this._toJson(this._multiCheckEnd))}</pre
-        >
-      </ha-card>
-
-      <ha-card header="Option: all combinations">
-        <div class="grid">
-          ${appearances.map((appearance) =>
-            positions.map((position) =>
-              selectedStates.map((selected) =>
-                disabledStates.map(
-                  (disabled) => html`
-                    <div role="listbox" class="wrap" aria-label="single option">
-                      <ha-list-item-option
-                        appearance=${appearance}
-                        selection-position=${position}
-                        ?selected=${selected}
-                        ?disabled=${disabled}
-                      >
-                        <span slot="headline"
-                          >${appearance} / pos=${position}</span
-                        >
-                        <span slot="supporting-text"
-                          >selected=${String(selected)}
-                          disabled=${String(disabled)}</span
-                        >
-                      </ha-list-item-option>
-                    </div>
-                  `
-                )
-              )
-            )
-          )}
-        </div>
-      </ha-card>
-
-      <h2>ha-list-nav</h2>
-      <p>
-        Same as <code>ha-list-base</code> but wrapped in a
-        <code>&lt;nav&gt;</code> landmark.
-      </p>
-
-      <ha-card header="Sidebar-style navigation">
-        <ha-list-nav aria-label="Primary navigation">
-          ${[
-            { name: "Overview", path: "#overview", icon: mdiHome },
-            { name: "Dashboards", path: "#dashboards", icon: mdiViewDashboard },
-            { name: "Map", path: "#map", icon: mdiMapMarker },
-            { name: "Settings", path: "#settings", icon: mdiCog },
-          ].map(
-            (p) => html`
-              <ha-list-item-button .href=${p.path}>
-                <ha-svg-icon slot="start" .path=${p.icon}></ha-svg-icon>
-                <span slot="headline">${p.name}</span>
-                <ha-svg-icon slot="end" .path=${mdiChevronRight}></ha-svg-icon>
-              </ha-list-item-button>
-            `
-          )}
-        </ha-list-nav>
-      </ha-card>
-    `;
-  }
-
-  private _isSel(value: number | Set<number>, index: number): boolean {
-    if (typeof value === "number") {
-      return value === index;
-    }
-    return value.has(index);
-  }
-
-  private _toJson(value: number | Set<number>): unknown {
-    return value instanceof Set ? [...value] : value;
-  }
-
-  private _onButtonClick = () => {
-    this._buttonClicks++;
-  };
-
-  private _withIndex(
-    value: number | Set<number>,
-    index: number,
-    selected: boolean
-  ): Set<number> {
-    const next = new Set(value instanceof Set ? value : []);
-    if (selected) {
-      next.add(index);
-    } else {
-      next.delete(index);
-    }
-    return next;
-  }
-
-  private _onSingle = (ev: CustomEvent<number>) => {
-    this._single = ev.detail;
-  };
-
-  private _onMultiLineSelected = (ev: CustomEvent<number>) => {
-    this._multiLine = this._withIndex(this._multiLine, ev.detail, true);
-  };
-
-  private _onMultiLineDeselected = (ev: CustomEvent<number>) => {
-    this._multiLine = this._withIndex(this._multiLine, ev.detail, false);
-  };
-
-  private _onMultiCheckStartSelected = (ev: CustomEvent<number>) => {
-    this._multiCheckStart = this._withIndex(
-      this._multiCheckStart,
-      ev.detail,
-      true
-    );
-  };
-
-  private _onMultiCheckStartDeselected = (ev: CustomEvent<number>) => {
-    this._multiCheckStart = this._withIndex(
-      this._multiCheckStart,
-      ev.detail,
-      false
-    );
-  };
-
-  private _onMultiCheckEndSelected = (ev: CustomEvent<number>) => {
-    this._multiCheckEnd = this._withIndex(this._multiCheckEnd, ev.detail, true);
-  };
-
-  private _onMultiCheckEndDeselected = (ev: CustomEvent<number>) => {
-    this._multiCheckEnd = this._withIndex(
-      this._multiCheckEnd,
-      ev.detail,
-      false
-    );
-  };
-
-  static styles = css`
-    :host {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-4);
-      padding: var(--ha-space-6);
-    }
-    h2 {
-      margin: var(--ha-space-4) 0 0;
-      font-size: var(--ha-font-size-xl);
-      font-weight: var(--ha-font-weight-medium);
-    }
-    p {
-      margin: 0 0 var(--ha-space-2);
-      color: var(--secondary-text-color);
-    }
-    ha-card {
-      max-width: 560px;
-    }
-    pre {
-      padding: var(--ha-space-4);
-      background: var(--secondary-background-color);
-      margin: 0;
-    }
-    .custom-content {
-      display: flex;
-      flex-direction: column;
-      gap: var(--ha-space-1);
-    }
-    .grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: var(--ha-space-3);
-      padding: var(--ha-space-3);
-    }
-    .wrap {
-      border: 1px solid var(--divider-color);
-      border-radius: var(--ha-border-radius-sm);
-    }
-    .drag-handle {
-      cursor: grab;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-list": DemoHaList;
-  }
-}

gallery/src/pages/components/ha-progress-button.ts

@@ -1,4 +1,4 @@
-import type { TemplateResult, PropertyValues } from "lit";
+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";
@@ -65,7 +65,7 @@ export class DemoHaProgressButton extends LitElement {
     `;
   }
 
-  firstUpdated(changedProps: PropertyValues<this>) {
+  firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     applyThemesOnElement(
       this.shadowRoot!.querySelector(".dark"),

gallery/src/pages/components/ha-select-box.ts

@@ -43,22 +43,12 @@ const fullOptions: SelectBoxOption[] = [
   },
 ];
 
-const manyOptions: SelectBoxOption[] = [
-  { value: "opt1", label: "Option 1" },
-  { value: "opt2", label: "Option 2" },
-  { value: "opt3", label: "Option 3" },
-  { value: "opt4", label: "Option 4" },
-  { value: "opt5", label: "Option 5" },
-  { value: "opt6", label: "Option 6" },
-];
-
 const selects: {
   id: string;
   label: string;
   class?: string;
   options: SelectBoxOption[];
   disabled?: boolean;
-  maxColumns?: number;
 }[] = [
   {
     id: "basic",
@@ -70,12 +60,6 @@ const selects: {
     label: "With description and image",
     options: fullOptions,
   },
-  {
-    id: "two-columns",
-    label: "2 columns (maxColumns=2)",
-    options: manyOptions,
-    maxColumns: 2,
-  },
 ];
 
 @customElement("demo-components-ha-select-box")
@@ -83,14 +67,13 @@ export class DemoHaSelectBox extends LitElement {
   @state() private value?: string = "off";
 
   handleValueChanged(e: CustomEvent) {
-    console.log(e.detail.value);
     this.value = e.detail.value as string;
   }
 
   protected render(): TemplateResult {
     return html`
       ${repeat(selects, (select) => {
-        const { id, label, options, maxColumns } = select;
+        const { id, label, options } = select;
         return html`
           <ha-card>
             <div class="card-content">
@@ -98,7 +81,6 @@ export class DemoHaSelectBox extends LitElement {
               <ha-select-box
                 .value=${this.value}
                 .options=${options}
-                .maxColumns=${maxColumns}
                 @value-changed=${this.handleValueChanged}
               >
               </ha-select-box>

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

@@ -1,5 +1,5 @@
 import type { TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, state } from "lit/decorators";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
 import { mockConfigEntries } from "../../../../demo/src/stubs/config_entries";
@@ -8,7 +8,6 @@ import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockFloorRegistry } from "../../../../demo/src/stubs/floor_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
 import { mockLabelRegistry } from "../../../../demo/src/stubs/label_registry";
-import type { HASSDomEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
@@ -17,59 +16,33 @@ import type { BlueprintInput } from "../../../../src/data/blueprint";
 import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
 import type { LabelRegistryEntry } from "../../../../src/data/label/label_registry";
-import {
-  showDialog,
-  type ShowDialogParams,
-} from "../../../../src/dialogs/make-dialog-manager";
+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",
+  }),
+  getEntity("number", "number", 5, {
+    friendly_name: "Number",
+  }),
 ];
 
 const DEVICES: DeviceRegistryEntry[] = [
@@ -638,15 +611,14 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     };
   };
 
-  private _dialogManager = (e: HASSDomEvent<ShowDialogParams<unknown>>) => {
-    const { dialogTag, dialogImport, dialogParams, addHistory, parentElement } =
-      e.detail;
+  private _dialogManager = (e) => {
+    const { dialogTag, dialogImport, dialogParams, addHistory } = e.detail;
     showDialog(
       this,
+      this.shadowRoot!,
       dialogTag,
       dialogParams,
       dialogImport,
-      parentElement,
       addHistory
     );
   };
@@ -692,11 +664,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                 ([key, value]) => html`
                   <ha-settings-row narrow slot=${slot}>
                     <span slot="heading">${value?.name || key}</span>
-                    ${value?.description
-                      ? html`<span slot="description"
-                          >${value?.description}</span
-                        >`
-                      : nothing}
+                    <span slot="description">${value?.description}</span>
                     <ha-selector
                       .hass=${this.hass}
                       .selector=${value!.selector}