Remove customElements entry from package.json

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

@@ -1,20 +0,0 @@
----
-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

@@ -1,27 +0,0 @@
----
-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

@@ -1,14 +0,0 @@
----
-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

@@ -1,50 +0,0 @@
----
-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

@@ -1,121 +0,0 @@
----
-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

@@ -1,19 +0,0 @@
----
-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

@@ -1,28 +0,0 @@
----
-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

@@ -1,36 +0,0 @@
----
-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

@@ -1,48 +0,0 @@
----
-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/copilot-instructions.md

@@ -251,6 +251,7 @@ For browser support, API details, and current specifications, refer to these aut
 **Available Dialog Types:**
 
 - `ha-wa-dialog` - Preferred for new dialogs (Web Awesome based)
+- `ha-md-dialog` - Material Design 3 dialog component
 - `ha-dialog` - Legacy component (still widely used)
 
 **Opening Dialogs (Fire Event Pattern - Recommended):**

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@45cbd0c69e560cd9e7cd7f8c32362050c9b7ded2 # v4.32.2
+        uses: github/codeql-action/init@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0
         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@45cbd0c69e560cd9e7cd7f8c32362050c9b7ded2 # v4.32.2
+        uses: github/codeql-action/autobuild@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@45cbd0c69e560cd9e7cd7f8c32362050c9b7ded2 # v4.32.2
+        uses: github/codeql-action/analyze@b20883b0cd1f46c72ae0ba6d1090936928f9fa30 # v4.32.0

.nvmrc

@@ -1 +1 @@
-24.13.1
+24.13.0

AGENTS.md

@@ -1,381 +0,0 @@
-# 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

AGENTS.md

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

build-scripts/gulp/gallery.js

@@ -5,6 +5,7 @@ import yaml from "js-yaml";
 import { marked } from "marked";
 import path from "path";
 import paths from "../paths.cjs";
+import { generateComponentApiMarkdown } from "./gallery/api-docs.js";
 import "./clean.js";
 import "./entry-html.js";
 import "./gather-static.js";
@@ -39,11 +40,19 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
 
     const demoFile = path.resolve(pageDir, `${pageId}.ts`);
     const descriptionFile = path.resolve(pageDir, `${pageId}.markdown`);
+    const componentFile = path.resolve(
+      "src/components",
+      `${path.basename(pageId)}.ts`
+    );
     const hasDemo = fs.existsSync(demoFile);
     let hasDescription = fs.existsSync(descriptionFile);
+    let hasApiDocs = false;
     let metadata = {};
+    let descriptionContent = "";
+    let apiDocsContent = "";
+
     if (hasDescription) {
-      let descriptionContent = fs.readFileSync(descriptionFile, "utf-8");
+      descriptionContent = fs.readFileSync(descriptionFile, "utf-8");
 
       if (descriptionContent.startsWith("---")) {
         const metadataEnd = descriptionContent.indexOf("---", 3);
@@ -52,22 +61,45 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
           .substring(metadataEnd + 3)
           .trim();
       }
+    }
 
-      // If description is just metadata
-      if (descriptionContent === "") {
-        hasDescription = false;
-      } else {
-        descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
-        fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
-        fs.writeFileSync(
-          path.resolve(galleryBuild, `${pageId}-description.ts`),
-          `
-          import {html} from "lit";
-          export default html\`${descriptionContent}\`
-          `
+    if (fs.existsSync(componentFile)) {
+      // eslint-disable-next-line no-await-in-loop
+      const apiDocsMarkdown = await generateComponentApiMarkdown(componentFile);
+      if (apiDocsMarkdown) {
+        hasApiDocs = true;
+        apiDocsContent = marked(`## API docs\n\n${apiDocsMarkdown}`).replace(
+          /`/g,
+          "\\`"
         );
       }
     }
+
+    if (descriptionContent === "") {
+      hasDescription = false;
+    } else {
+      descriptionContent = marked(descriptionContent).replace(/`/g, "\\`");
+      fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
+      fs.writeFileSync(
+        path.resolve(galleryBuild, `${pageId}-description.ts`),
+        `
+          import {html} from "lit";
+          export default html\`${descriptionContent}\`
+          `
+      );
+    }
+
+    if (hasApiDocs) {
+      fs.mkdirSync(path.resolve(galleryBuild, category), { recursive: true });
+      fs.writeFileSync(
+        path.resolve(galleryBuild, `${pageId}-api-docs.ts`),
+        `
+          import {html} from "lit";
+          export default html\`${apiDocsContent}\`
+          `
+      );
+    }
+
     content += `  "${pageId}": {
       metadata: ${JSON.stringify(metadata)},
       ${
@@ -75,6 +107,7 @@ gulp.task("gather-gallery-pages", async function gatherPages() {
           ? `description: () => import("./${pageId}-description").then(m => m.default),`
           : ""
       }
+      ${hasApiDocs ? `apiDocs: () => import("./${pageId}-api-docs").then(m => m.default),` : ""}
       ${hasDemo ? `demo: () => import("../src/pages/${pageId}")` : ""}
 
     },\n`;

build-scripts/gulp/gallery/api-docs.js

@@ -0,0 +1,292 @@
+import { cli as analyzeCustomElements } from "@custom-elements-manifest/analyzer/cli.js";
+import path from "path";
+
+const toCamelCase = (value) =>
+  value.replace(/-([a-z])/g, (_match, char) => char.toUpperCase());
+
+const mdCode = (value) => {
+  if (value === undefined || value === null || value === "") {
+    return "";
+  }
+
+  return `\`${String(value).replace(/`/g, "\\`")}\``;
+};
+
+const mdText = (value) =>
+  String(value || "")
+    .replace(/\|/g, "\\|")
+    .replace(/\r?\n+/g, "<br>")
+    .trim();
+
+const markdownTable = (headers, rows) => {
+  if (!rows.length) {
+    return "";
+  }
+
+  const header = `| ${headers.join(" | ")} |`;
+  const separator = `| ${headers.map(() => "---").join(" | ")} |`;
+  const body = rows.map((row) => `| ${row.join(" | ")} |`).join("\n");
+
+  return `${header}\n${separator}\n${body}`;
+};
+
+const mergeAttributesIntoFields = (manifest) => {
+  if (!manifest?.modules) {
+    return manifest;
+  }
+
+  for (const mod of manifest.modules) {
+    if (!mod.declarations) {
+      continue;
+    }
+
+    for (const declaration of mod.declarations) {
+      if (!declaration.attributes?.length) {
+        continue;
+      }
+
+      declaration.members = declaration.members || [];
+
+      const memberNames = new Set(
+        declaration.members.map((member) => member.name)
+      );
+      const membersByName = new Map(
+        declaration.members.map((member) => [member.name, member])
+      );
+
+      declaration.attributes = declaration.attributes.map((attribute) => {
+        if (attribute.fieldName) {
+          return attribute;
+        }
+
+        const camelName = toCamelCase(attribute.name);
+        let inferredFieldName;
+
+        if (memberNames.has(camelName)) {
+          inferredFieldName = camelName;
+        } else if (memberNames.has(attribute.name)) {
+          inferredFieldName = attribute.name;
+        }
+
+        return inferredFieldName
+          ? { ...attribute, fieldName: inferredFieldName }
+          : attribute;
+      });
+
+      for (const attribute of declaration.attributes) {
+        if (!attribute.fieldName) {
+          continue;
+        }
+
+        const existingMember = membersByName.get(attribute.fieldName);
+        if (existingMember) {
+          if (!existingMember.attribute) {
+            existingMember.attribute = attribute.name;
+          }
+
+          continue;
+        }
+
+        const newMember = {
+          kind: "field",
+          name: attribute.fieldName,
+          privacy: "public",
+          type: attribute.type,
+          default: attribute.default,
+          description: attribute.description,
+          attribute: attribute.name,
+        };
+
+        declaration.members.push(newMember);
+        membersByName.set(attribute.fieldName, newMember);
+        memberNames.add(attribute.fieldName);
+      }
+    }
+  }
+
+  return manifest;
+};
+
+const formatType = (type) => {
+  if (!type) {
+    return "";
+  }
+
+  if (typeof type === "string") {
+    return type;
+  }
+
+  if (type.text) {
+    return type.text;
+  }
+
+  return "";
+};
+
+const getWebAwesomeSuperclassDocsUrl = (superclass) => {
+  const packageName = superclass?.package || "";
+
+  if (!packageName.startsWith("@home-assistant/webawesome")) {
+    return undefined;
+  }
+
+  const match = packageName.match(/components\/([^/]+)/);
+  if (match?.[1]) {
+    return `https://webawesome.com/docs/components/${match[1]}`;
+  }
+
+  return "https://webawesome.com/docs/components/";
+};
+
+const renderComponentApiMarkdown = (manifest) => {
+  if (!manifest?.modules?.length) {
+    return "";
+  }
+
+  const sections = [];
+
+  for (const mod of manifest.modules) {
+    for (const declaration of mod.declarations || []) {
+      if (declaration.kind !== "class") {
+        continue;
+      }
+
+      const classHeading = declaration.tagName
+        ? `### ${mdCode(declaration.tagName)}`
+        : `### ${mdCode(declaration.name)}`;
+      sections.push(classHeading);
+
+      if (declaration.description) {
+        sections.push("#### Description");
+        sections.push(mdText(declaration.description));
+      }
+
+      const properties = (declaration.members || [])
+        .filter(
+          (member) => member.kind === "field" && member.privacy !== "private"
+        )
+        .map((member) => [
+          mdCode(member.name),
+          mdText(member.attribute || ""),
+          mdCode(formatType(member.type) || ""),
+          mdCode(member.default || ""),
+          mdText(member.description || ""),
+        ]);
+
+      const propertiesTable = markdownTable(
+        ["Name", "Attribute", "Type", "Default", "Description"],
+        properties
+      );
+      if (propertiesTable) {
+        sections.push("#### Properties");
+        sections.push(propertiesTable);
+      }
+
+      const events = (declaration.events || []).map((event) => [
+        mdCode(event.name),
+        mdCode(formatType(event.type) || ""),
+        mdText(event.description || ""),
+      ]);
+      const eventsTable = markdownTable(
+        ["Name", "Type", "Description"],
+        events
+      );
+      if (eventsTable) {
+        sections.push("#### Events");
+        sections.push(eventsTable);
+      }
+
+      const cssProperties = (declaration.cssProperties || []).map(
+        (property) => [
+          mdCode(property.name),
+          mdCode(property.default || ""),
+          mdText(property.description || ""),
+        ]
+      );
+      const cssPropertiesTable = markdownTable(
+        ["Name", "Default", "Description"],
+        cssProperties
+      );
+      if (cssPropertiesTable) {
+        sections.push("#### CSS custom properties");
+        sections.push(
+          "[How to use CSS custom properties](https://developer.mozilla.org/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties)"
+        );
+        sections.push(cssPropertiesTable);
+      }
+
+      const cssParts = (declaration.cssParts || []).map((part) => [
+        mdCode(part.name),
+        mdText(part.description || ""),
+      ]);
+      const cssPartsTable = markdownTable(["Name", "Description"], cssParts);
+      if (cssPartsTable) {
+        sections.push("#### CSS shadow parts");
+        sections.push(
+          "[How to style shadow parts with ::part()](https://developer.mozilla.org/docs/Web/CSS/::part)"
+        );
+        sections.push(cssPartsTable);
+      }
+
+      const slots = (declaration.slots || []).map((slot) => [
+        mdCode(slot.name || "(default)"),
+        slot.name ? "no" : "yes",
+        mdText(slot.description || ""),
+      ]);
+      const slotsTable = markdownTable(
+        ["Name", "Default", "Description"],
+        slots
+      );
+      if (slotsTable) {
+        sections.push("#### Slots");
+        sections.push(slotsTable);
+      }
+
+      sections.push("#### Class");
+      sections.push(
+        markdownTable(
+          ["Name", "Tag name"],
+          [[mdCode(declaration.name), mdCode(declaration.tagName || "")]]
+        )
+      );
+
+      if (declaration.superclass?.name) {
+        const docsUrl = getWebAwesomeSuperclassDocsUrl(declaration.superclass);
+        const notes = docsUrl ? `[Web Awesome docs](${docsUrl})` : "";
+
+        sections.push("#### Superclass");
+        sections.push(
+          markdownTable(
+            ["Name", "Package", "Docs"],
+            [
+              [
+                mdCode(declaration.superclass.name),
+                mdText(declaration.superclass.package || ""),
+                notes,
+              ],
+            ]
+          )
+        );
+      }
+    }
+  }
+
+  return sections.filter(Boolean).join("\n\n").trim();
+};
+
+export const generateComponentApiMarkdown = async (componentFile) => {
+  const manifest = await analyzeCustomElements({
+    argv: [
+      "analyze",
+      "--litelement",
+      "--globs",
+      path.relative(process.cwd(), componentFile),
+      "--quiet",
+    ],
+    cwd: process.cwd(),
+    noWrite: true,
+  });
+
+  mergeAttributesIntoFields(manifest);
+  return renderComponentApiMarkdown(manifest);
+};

custom-elements.json

@@ -0,0 +1,186 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/components/ha-alert.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A custom alert component for displaying messages with various alert types.",
+          "name": "HaAlert",
+          "cssProperties": [
+            {
+              "description": "The color used for \"info\" alerts.",
+              "name": "--info-color"
+            },
+            {
+              "description": "The color used for \"warning\" alerts.",
+              "name": "--warning-color"
+            },
+            {
+              "description": "The color used for \"error\" alerts.",
+              "name": "--error-color"
+            },
+            {
+              "description": "The color used for \"success\" alerts.",
+              "name": "--success-color"
+            },
+            {
+              "description": "The primary text color used in the alert.",
+              "name": "--primary-text-color"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The container for the alert.",
+              "name": "issue-type"
+            },
+            {
+              "description": "The container for the alert icon.",
+              "name": "icon"
+            },
+            {
+              "description": "The container for the alert content.",
+              "name": "content"
+            },
+            {
+              "description": "The container for the alert actions.",
+              "name": "action"
+            },
+            {
+              "description": "The container for the alert title.",
+              "name": "title"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The main content of the alert.",
+              "name": ""
+            },
+            {
+              "description": "Slot for providing a custom icon for the alert.",
+              "name": "icon"
+            },
+            {
+              "description": "Slot for providing custom actions or buttons for the alert.",
+              "name": "action"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "\"\"",
+              "description": "The title of the alert. Defaults to an empty string.",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "alertType",
+              "type": {
+                "text": "\"info\" | \"warning\" | \"error\" | \"success\""
+              },
+              "privacy": "public",
+              "default": "\"info\"",
+              "description": "The type of alert to display. Defaults to \"info\". Determines the styling and icon used.",
+              "attribute": "alert-type"
+            },
+            {
+              "kind": "field",
+              "name": "dismissable",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the alert can be dismissed. Defaults to `false`. If `true`, a dismiss button is displayed.",
+              "attribute": "dismissable"
+            },
+            {
+              "kind": "field",
+              "name": "narrow",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false",
+              "description": "Whether the alert should use a narrow layout. Defaults to `false`.",
+              "attribute": "narrow"
+            },
+            {
+              "kind": "method",
+              "name": "_dismissClicked",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired when the dismiss button is clicked.",
+              "name": "alert-dismissed-clicked"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "The title of the alert. Defaults to an empty string.",
+              "fieldName": "title"
+            },
+            {
+              "name": "alert-type",
+              "type": {
+                "text": "\"info\" | \"warning\" | \"error\" | \"success\""
+              },
+              "default": "\"info\"",
+              "description": "The type of alert to display. Defaults to \"info\". Determines the styling and icon used.",
+              "fieldName": "alertType"
+            },
+            {
+              "name": "dismissable",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the alert can be dismissed. Defaults to `false`. If `true`, a dismiss button is displayed.",
+              "fieldName": "dismissable"
+            },
+            {
+              "name": "narrow",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the alert should use a narrow layout. Defaults to `false`.",
+              "fieldName": "narrow"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "ha-alert",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "ha-alert",
+          "declaration": {
+            "name": "HaAlert",
+            "module": "src/components/ha-alert.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

demo/src/stubs/frontend.ts

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

demo/src/stubs/lovelace.ts

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

gallery/src/components/page-api-docs.ts

@@ -0,0 +1,51 @@
+import { css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { until } from "lit/directives/until";
+import { HaMarkdown } from "../../../src/components/ha-markdown";
+import { PAGES } from "../../build/import-pages";
+
+@customElement("page-api-docs")
+class PageApiDocs extends HaMarkdown {
+  @property() public page!: string;
+
+  render() {
+    if (!PAGES[this.page].apiDocs) {
+      return nothing;
+    }
+
+    return html`${until(
+      PAGES[this.page]
+        .apiDocs()
+        .then((content) => html`<div class="root">${content}</div>`),
+      ""
+    )}`;
+  }
+
+  static styles = [
+    HaMarkdown.styles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .root {
+        max-width: 800px;
+        margin: 16px auto;
+      }
+
+      .root > *:first-child {
+        margin-top: 0;
+      }
+
+      .root > *:last-child {
+        margin-bottom: 0;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "page-api-docs": PageApiDocs;
+  }
+}

gallery/src/ha-gallery.ts

@@ -2,7 +2,7 @@ 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 { LitElement, css, html, nothing } from "lit";
 import { customElement, query, state } from "lit/decorators";
 import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
 import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
@@ -10,6 +10,7 @@ import "../../src/components/ha-icon-button";
 import "../../src/managers/notification-manager";
 import { haStyle } from "../../src/resources/styles";
 import { PAGES, SIDEBAR } from "../build/import-pages";
+import "./components/page-api-docs";
 import "./components/page-description";
 
 const GITHUB_DEMO_URL =
@@ -95,6 +96,9 @@ class HaGallery extends LitElement {
                 `
               : ""}
             ${dynamicElement(`demo-${this._page.replace("/", "-")}`)}
+            ${PAGES[this._page].apiDocs
+              ? html`<page-api-docs .page=${this._page}></page-api-docs>`
+              : nothing}
           </div>
           <div class="page-footer">
             <div class="header">Help us to improve our documentation</div>

gallery/src/pages/brand/logo.markdown

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

gallery/src/pages/brand/logo.ts

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

gallery/src/pages/concepts/home.markdown

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

package.json

@@ -20,7 +20,8 @@
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
     "test": "vitest run --config test/vitest.config.ts",
-    "test:coverage": "vitest run --config test/vitest.config.ts --coverage"
+    "test:coverage": "vitest run --config test/vitest.config.ts --coverage",
+    "analyze": "cem analyze --litelement --globs \"src/components/ha-alert.ts\" --dev"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
@@ -29,7 +30,7 @@
     "@babel/runtime": "7.28.6",
     "@braintree/sanitize-url": "7.1.2",
     "@codemirror/autocomplete": "6.20.0",
-    "@codemirror/commands": "6.10.2",
+    "@codemirror/commands": "6.10.1",
     "@codemirror/language": "6.12.1",
     "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.6.0",
@@ -52,7 +53,7 @@
     "@fullcalendar/list": "6.1.20",
     "@fullcalendar/luxon3": "6.1.20",
     "@fullcalendar/timegrid": "6.1.20",
-    "@home-assistant/webawesome": "3.2.1-ha.0",
+    "@home-assistant/webawesome": "3.0.0-ha.2",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.1.0",
     "@lit-labs/observers": "2.1.0",
@@ -132,7 +133,7 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.9",
+    "ua-parser-js": "2.0.8",
     "vue": "2.7.16",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
@@ -150,12 +151,13 @@
     "@babel/plugin-transform-runtime": "7.29.0",
     "@babel/preset-env": "7.29.0",
     "@bundle-stats/plugin-webpack-filter": "4.21.9",
+    "@custom-elements-manifest/analyzer": "0.11.0",
     "@lokalise/node-api": "15.6.1",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.0.3",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.5.2",
-    "@rspack/core": "1.7.5",
+    "@rsdoctor/rspack-plugin": "1.5.1",
+    "@rspack/core": "1.7.4",
     "@rspack/dev-server": "1.2.1",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.25",
@@ -191,14 +193,14 @@
     "eslint-plugin-wc": "3.0.2",
     "fancy-log": "2.0.0",
     "fs-extra": "11.3.3",
-    "glob": "13.0.1",
+    "glob": "13.0.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
     "gulp-json-transform": "0.5.0",
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "28.0.0",
+    "jsdom": "27.4.0",
     "jszip": "3.10.1",
     "lint-staged": "16.2.7",
     "lit-analyzer": "2.0.3",
@@ -235,6 +237,6 @@
   },
   "packageManager": "yarn@4.12.0",
   "volta": {
-    "node": "24.13.1"
+    "node": "24.13.0"
   }
 }

src/common/const.ts

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

src/common/entity/compute_state_display.ts

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

src/common/number/format_number.ts

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

src/common/translations/entity-state.ts

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

src/components/chart/statistics-chart.ts

@@ -572,7 +572,6 @@ export class StatisticsChart extends LitElement {
       let firstSum: number | null | undefined = null;
       stats.forEach((stat) => {
         const startDate = new Date(stat.start);
-        const endDate = new Date(stat.end);
         if (prevDate === startDate) {
           return;
         }
@@ -602,25 +601,10 @@ export class StatisticsChart extends LitElement {
           dataValues.push(val);
         });
         if (!this._hiddenStats.has(statistic_id)) {
-          pushData(
-            startDate,
-            endDate.getTime() < endTime.getTime() ? endDate : endTime,
-            dataValues
-          );
+          pushData(startDate, new Date(stat.end), dataValues);
         }
       });
 
-      // Close out the last stat segment at prevEndTime
-      const lastEndTime = prevEndTime;
-      const lastValues = prevValues;
-      if (lastEndTime && lastValues) {
-        statDataSets.forEach((d, i) => {
-          d.data!.push(
-            this._transformDataValue([lastEndTime, ...lastValues[i]!])
-          );
-        });
-      }
-
       // Append current state if viewing recent data
       const now = new Date();
       // allow 10m of leeway for "now", because stats are 5 minute aggregated
@@ -635,6 +619,16 @@ export class StatisticsChart extends LitElement {
               isFinite(currentValue) &&
               !this._hiddenStats.has(statistic_id)
             ) {
+              // First, close out the last stat segment at prevEndTime
+              const lastEndTime = prevEndTime;
+              const lastValues = prevValues;
+              if (lastEndTime && lastValues) {
+                statDataSets.forEach((d, i) => {
+                  d.data!.push(
+                    this._transformDataValue([lastEndTime, ...lastValues[i]!])
+                  );
+                });
+              }
               // Then push the current state at now
               statTypes.forEach((type, i) => {
                 const val: (number | null)[] = [];

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

@@ -20,7 +20,6 @@ import type { LocalizeFunc } from "../../common/translations/localize";
 import { debounce } from "../../common/util/debounce";
 import { groupBy } from "../../common/util/group-by";
 import { nextRender } from "../../common/util/render-status";
-import { STRINGS_SEPARATOR_DOT } from "../../common/const";
 import { haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
@@ -637,7 +636,7 @@ export class HaDataTable extends LitElement {
                           .map(
                             ([key2, column2], i) =>
                               html`${i !== 0
-                                ? STRINGS_SEPARATOR_DOT
+                                ? " · "
                                 : nothing}${column2.template
                                 ? column2.template(row)
                                 : row[key2]}`
@@ -1193,7 +1192,6 @@ export class HaDataTable extends LitElement {
 
         .mdc-data-table__cell--numeric {
           text-align: var(--float-end);
-          direction: ltr;
         }
 
         .mdc-data-table__cell--icon {

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

@@ -11,7 +11,7 @@ import {
   sortDeviceAutomations,
 } from "../../data/device/device_automation";
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
-import type { HomeAssistant, ValueChangedEvent } from "../../types";
+import type { HomeAssistant } from "../../types";
 import "../ha-generic-picker";
 import "../ha-md-select";
 import "../ha-md-select-option";
@@ -192,7 +192,7 @@ export abstract class HaDeviceAutomationPicker<
     this._renderEmpty = false;
   }
 
-  private _automationChanged(ev: ValueChangedEvent<string>) {
+  private _automationChanged(ev: CustomEvent<{ value: string }>) {
     ev.stopPropagation();
     const value = ev.detail.value;
     if (!value || NO_AUTOMATION_KEY === value) {

src/components/entity/ha-state-label-badge.ts

@@ -9,7 +9,16 @@ import secondsToDuration from "../../common/datetime/seconds_to_duration";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { FIXED_DOMAIN_STATES } from "../../common/entity/get_states";
-import { isUnavailableState, UNAVAILABLE } from "../../data/entity/entity";
+import {
+  formatNumber,
+  getNumberFormatOptions,
+  isNumericState,
+} from "../../common/number/format_number";
+import {
+  isUnavailableState,
+  UNAVAILABLE,
+  UNKNOWN,
+} from "../../data/entity/entity";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import { timerTimeRemaining } from "../../data/timer";
 import type { HomeAssistant } from "../../types";
@@ -171,11 +180,16 @@ export class HaStateLabelBadge extends LitElement {
         }
       // eslint-disable-next-line: disable=no-fallthrough
       default:
-        return isUnavailableState(entityState.state)
+        return entityState.state === UNKNOWN ||
+          entityState.state === UNAVAILABLE
           ? "—"
-          : this.hass!.formatEntityStateToParts(entityState).find(
-              (part) => part.type === "value"
-            )?.value;
+          : isNumericState(entityState)
+            ? formatNumber(
+                entityState.state,
+                this.hass!.locale,
+                getNumberFormatOptions(entityState, entry)
+              )
+            : this.hass!.formatEntityState(entityState);
     }
   }
 
@@ -224,11 +238,7 @@ export class HaStateLabelBadge extends LitElement {
     if (domain === "timer") {
       return secondsToDuration(_timerTimeRemaining);
     }
-    return (
-      this.hass!.formatEntityStateToParts(entityState).find(
-        (part) => part.type === "unit"
-      )?.value || null
-    );
+    return entityState.attributes.unit_of_measurement || null;
   }
 
   private _clearInterval() {

src/components/ha-alert.ts

@@ -25,6 +25,36 @@ declare global {
   }
 }
 
+/**
+ * A custom alert component for displaying messages with various alert types.
+ * 
+ * @element ha-alert
+ * 
+ * @property {string} title - The title of the alert. Defaults to an empty string.
+ * @property {"info" | "warning" | "error" | "success"} alertType - The type of alert to display.
+ * Defaults to "info". Determines the styling and icon used.
+ * @property {boolean} dismissable - Whether the alert can be dismissed. Defaults to `false`.
+ * If `true`, a dismiss button is displayed.
+ * @property {boolean} narrow - Whether the alert should use a narrow layout. Defaults to `false`.
+ * 
+ * @slot - The main content of the alert.
+ * @slot icon - Slot for providing a custom icon for the alert.
+ * @slot action - Slot for providing custom actions or buttons for the alert.
+ * 
+ * @fires alert-dismissed-clicked - Fired when the dismiss button is clicked.
+ * 
+ * @csspart issue-type - The container for the alert.
+ * @csspart icon - The container for the alert icon.
+ * @csspart content - The container for the alert content.
+ * @csspart action - The container for the alert actions.
+ * @csspart title - The container for the alert title.
+ * 
+ * @cssprop --info-color - The color used for "info" alerts.
+ * @cssprop --warning-color - The color used for "warning" alerts.
+ * @cssprop --error-color - The color used for "error" alerts.
+ * @cssprop --success-color - The color used for "success" alerts.
+ * @cssprop --primary-text-color - The primary text color used in the alert.
+ */
 @customElement("ha-alert")
 class HaAlert extends LitElement {
   // eslint-disable-next-line lit/no-native-attributes
@@ -35,7 +65,7 @@ class HaAlert extends LitElement {
     | "warning"
     | "error"
     | "success" = "info";
-
+    
   @property({ type: Boolean }) public dismissable = false;
 
   @property({ type: Boolean }) public narrow = false;

src/components/ha-area-picker.ts

@@ -163,7 +163,7 @@ export class HaAreaPicker extends LitElement {
         {
           id: ADD_NEW_ID + searchString,
           primary: this.hass.localize(
-            "ui.components.area-picker.add_new_suggestion",
+            "ui.components.area-picker.add_new_sugestion",
             {
               name: searchString,
             }

src/components/ha-areas-floors-display-editor.ts

@@ -9,7 +9,7 @@ import { computeFloorName } from "../common/entity/compute_floor_name";
 import { getAreaContext } from "../common/entity/context/get_area_context";
 import type { FloorRegistryEntry } from "../data/floor_registry";
 import { getFloors } from "../panels/lovelace/strategies/areas/helpers/areas-strategy-helper";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
+import type { HomeAssistant } from "../types";
 import "./ha-expansion-panel";
 import "./ha-floor-icon";
 import "./ha-items-display-editor";
@@ -200,7 +200,7 @@ export class HaAreasFloorsDisplayEditor extends LitElement {
     fireEvent(this, "value-changed", { value: newValue });
   }
 
-  private async _areaDisplayChanged(ev: ValueChangedEvent<DisplayValue>) {
+  private async _areaDisplayChanged(ev: CustomEvent<{ value: DisplayValue }>) {
     ev.stopPropagation();
     const value = ev.detail.value;
     const currentFloorId = (ev.currentTarget as any).floorId;

src/components/ha-assist-pipeline-picker.ts

@@ -6,8 +6,8 @@ import { formatLanguageCode } from "../common/language/format_language";
 import type { AssistPipeline } from "../data/assist_pipeline";
 import { listAssistPipelines } from "../data/assist_pipeline";
 import type { HomeAssistant } from "../types";
-import type { HaSelectOption, HaSelectSelectEvent } from "./ha-select";
 import "./ha-select";
+import type { HaSelectOption } from "./ha-select";
 
 const PREFERRED = "preferred";
 const LAST_USED = "last_used";
@@ -94,7 +94,7 @@ export class HaAssistPipelinePicker extends LitElement {
     }
   `;
 
-  private _changed(ev: HaSelectSelectEvent): void {
+  private _changed(ev: CustomEvent<{ value: string }>): void {
     const value = ev.detail.value;
     if (
       !this.hass ||

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

@@ -4,7 +4,6 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
-import type { HaSelectSelectEvent } from "./ha-select";
 import "./ha-icon-button";
 import "./ha-input-helper-text";
 import "./ha-select";
@@ -277,11 +276,11 @@ export class HaBaseTimeInput extends LitElement {
     fireEvent(this, "value-changed");
   }
 
-  private _valueChanged(ev: InputEvent | HaSelectSelectEvent): void {
+  private _valueChanged(ev: InputEvent | CustomEvent<{ value: string }>): void {
     const textField = ev.currentTarget as HaTextField;
     this[textField.name] =
       textField.name === "amPm"
-        ? (ev as HaSelectSelectEvent).detail.value
+        ? (ev as CustomEvent<{ value: string }>).detail.value
         : Number(textField.value);
     const value: TimeChangedEvent = {
       hours: this.hours,

src/components/ha-blueprint-picker.ts

@@ -6,7 +6,6 @@ import { stringCompare } from "../common/string/compare";
 import type { Blueprint, BlueprintDomain, Blueprints } from "../data/blueprint";
 import { fetchBlueprints } from "../data/blueprint";
 import type { HomeAssistant } from "../types";
-import type { HaSelectSelectEvent } from "./ha-select";
 import "./ha-select";
 
 @customElement("ha-blueprint-picker")
@@ -77,7 +76,7 @@ class HaBluePrintPicker extends LitElement {
     }
   }
 
-  private _blueprintChanged(ev: HaSelectSelectEvent) {
+  private _blueprintChanged(ev: CustomEvent<{ value: string }>) {
     const newValue = ev.detail.value;
 
     if (newValue !== this.value) {

src/components/ha-color-picker.ts

@@ -6,7 +6,7 @@ import memoizeOne from "memoize-one";
 import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeKeys } from "../common/translations/localize";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
+import type { HomeAssistant } from "../types";
 import "./ha-generic-picker";
 import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 import type { PickerValueRenderer } from "./ha-picker-field";
@@ -224,7 +224,7 @@ export class HaColorPicker extends LitElement {
     `;
   }
 
-  private _valueChanged(ev: ValueChangedEvent<string | undefined>) {
+  private _valueChanged(ev: CustomEvent<{ value?: string }>) {
     ev.stopPropagation();
     const selected = ev.detail.value;
     const normalized =

src/components/ha-conversation-agent-picker.ts

@@ -14,7 +14,7 @@ import { showOptionsFlowDialog } from "../dialogs/config-flow/show-dialog-option
 import { showSubConfigFlowDialog } from "../dialogs/config-flow/show-dialog-sub-config-flow";
 import type { HomeAssistant } from "../types";
 import "./ha-select";
-import type { HaSelectOption, HaSelectSelectEvent } from "./ha-select";
+import type { HaSelectOption } from "./ha-select";
 
 const NONE = "__NONE_OPTION__";
 
@@ -234,7 +234,7 @@ export class HaConversationAgentPicker extends LitElement {
     }
   `;
 
-  private _changed(ev: HaSelectSelectEvent): void {
+  private _changed(ev: CustomEvent<{ value: string }>): void {
     const value = ev.detail.value;
     if (
       !this.hass ||

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

@@ -65,10 +65,6 @@ export class HaDateRangePicker extends LitElement {
   @property({ attribute: "time-picker", type: Boolean })
   public timePicker = false;
 
-  public open(): void {
-    this._openPicker();
-  }
-
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public minimal = false;
@@ -310,15 +306,6 @@ export class HaDateRangePicker extends LitElement {
     return dateRangePicker.vueComponent.$children[0];
   }
 
-  private _openPicker() {
-    if (!this._dateRangePicker.open) {
-      const datePicker = this.shadowRoot!.querySelector(
-        "date-range-picker div.date-range-inputs"
-      ) as any;
-      datePicker?.click();
-    }
-  }
-
   private _handleInputClick() {
     // close the date picker, so it will open again on the click event
     if (this._dateRangePicker.open) {

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

@@ -7,9 +7,8 @@ import { nextRender } from "../common/util/render-status";
 import { haStyleDialog } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import type { DatePickerDialogParams } from "./ha-date-input";
+import "./ha-dialog";
 import "./ha-button";
-import "./ha-dialog-footer";
-import "./ha-wa-dialog";
 
 @customElement("ha-dialog-date-picker")
 export class HaDialogDatePicker extends LitElement {
@@ -23,8 +22,6 @@ export class HaDialogDatePicker extends LitElement {
 
   @state() private _params?: DatePickerDialogParams;
 
-  @state() private _open = false;
-
   @state() private _value?: string;
 
   public async showDialog(params: DatePickerDialogParams): Promise<void> {
@@ -33,14 +30,9 @@ export class HaDialogDatePicker extends LitElement {
     await nextRender();
     this._params = params;
     this._value = params.value;
-    this._open = true;
   }
 
   public closeDialog() {
-    this._open = false;
-  }
-
-  private _dialogClosed() {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -49,13 +41,7 @@ export class HaDialogDatePicker extends LitElement {
     if (!this._params) {
       return nothing;
     }
-    return html`<ha-wa-dialog
-      .hass=${this.hass}
-      .open=${this._open}
-      width="small"
-      without-header
-      @closed=${this._dialogClosed}
-    >
+    return html`<ha-dialog open @closed=${this.closeDialog}>
       <app-datepicker
         .value=${this._value}
         .min=${this._params.min}
@@ -64,36 +50,35 @@ export class HaDialogDatePicker extends LitElement {
         @datepicker-value-updated=${this._valueChanged}
         .firstDayOfWeek=${this._params.firstWeekday}
       ></app-datepicker>
-      <ha-dialog-footer slot="footer">
-        ${this._params.canClear
-          ? html`<ha-button
-              slot="secondaryAction"
-              @click=${this._clear}
-              variant="danger"
-              appearance="plain"
-            >
-              ${this.hass.localize("ui.dialogs.date-picker.clear")}
-            </ha-button>`
-          : nothing}
-        <ha-button
-          appearance="plain"
-          slot="secondaryAction"
-          @click=${this._setToday}
-        >
-          ${this.hass.localize("ui.dialogs.date-picker.today")}
-        </ha-button>
-        <ha-button
-          appearance="plain"
-          slot="secondaryAction"
-          @click=${this.closeDialog}
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button slot="primaryAction" @click=${this._setValue}>
-          ${this.hass.localize("ui.common.ok")}
-        </ha-button>
-      </ha-dialog-footer>
-    </ha-wa-dialog>`;
+      ${this._params.canClear
+        ? html`<ha-button
+            slot="secondaryAction"
+            @click=${this._clear}
+            variant="danger"
+            appearance="plain"
+          >
+            ${this.hass.localize("ui.dialogs.date-picker.clear")}
+          </ha-button>`
+        : nothing}
+      <ha-button
+        appearance="plain"
+        slot="secondaryAction"
+        @click=${this._setToday}
+      >
+        ${this.hass.localize("ui.dialogs.date-picker.today")}
+      </ha-button>
+      <ha-button
+        appearance="plain"
+        slot="primaryAction"
+        dialogaction="cancel"
+        class="cancel-btn"
+      >
+        ${this.hass.localize("ui.common.cancel")}
+      </ha-button>
+      <ha-button slot="primaryAction" @click=${this._setValue}>
+        ${this.hass.localize("ui.common.ok")}
+      </ha-button>
+    </ha-dialog>`;
   }
 
   private _valueChanged(ev: CustomEvent) {
@@ -123,12 +108,11 @@ export class HaDialogDatePicker extends LitElement {
   static styles = [
     haStyleDialog,
     css`
-      ha-wa-dialog {
+      ha-dialog {
         --dialog-content-padding: 0;
+        --justify-action-buttons: space-between;
       }
       app-datepicker {
-        display: block;
-        margin-inline: auto;
         --app-datepicker-accent-color: var(--primary-color);
         --app-datepicker-bg-color: transparent;
         --app-datepicker-color: var(--primary-text-color);
@@ -145,6 +129,11 @@ export class HaDialogDatePicker extends LitElement {
       app-datepicker::part(body) {
         direction: ltr;
       }
+      @media all and (min-width: 450px) {
+        ha-dialog {
+          --mdc-dialog-min-width: 300px;
+        }
+      }
       @media all and (max-width: 450px), all and (max-height: 500px) {
         app-datepicker {
           width: 100%;

src/components/ha-dropdown.ts

@@ -1,16 +1,9 @@
-import type WaButton from "@home-assistant/webawesome/dist/components/button/button";
 import Dropdown from "@home-assistant/webawesome/dist/components/dropdown/dropdown";
 import { css, type CSSResultGroup } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { HaDropdownItem } from "./ha-dropdown-item";
 
-/**
- * Event type for the ha-dropdown component when an item is selected.
- * @param T - The type of the value of the selected item.
- */
-export type HaDropdownSelectEvent<T = string> = CustomEvent<{
-  item: Omit<HaDropdownItem, "value"> & { value: T };
-}>;
+export type HaDropdownSelectEvent = CustomEvent<{ item: HaDropdownItem }>;
 
 /**
  * Home Assistant dropdown component
@@ -23,37 +16,11 @@ export type HaDropdownSelectEvent<T = string> = CustomEvent<{
  *
  */
 @customElement("ha-dropdown")
-// @ts-ignore Allow to set an alternative anchor element
 export class HaDropdown extends Dropdown {
   @property({ attribute: false }) dropdownTag = "ha-dropdown";
 
   @property({ attribute: false }) dropdownItemTag = "ha-dropdown-item";
 
-  public get anchorElement(): HTMLButtonElement | WaButton | undefined {
-    // @ts-ignore Allow to set an anchor element on popup
-    return this.popup?.anchor as HTMLButtonElement | WaButton | undefined;
-  }
-
-  public set anchorElement(element: HTMLButtonElement | WaButton | undefined) {
-    // @ts-ignore Allow to get the current anchor element from popup
-    if (!this.popup) {
-      return;
-    }
-    // @ts-ignore Allow to get the current anchor element from popup
-    this.popup.anchor = element;
-  }
-
-  /** Get the slotted trigger button, a <wa-button> or <button> element */
-  // @ts-ignore Override parent method to be able to use alternative anchor
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  private override getTrigger(): HTMLButtonElement | WaButton | null {
-    if (this.anchorElement) {
-      return this.anchorElement;
-    }
-    // @ts-ignore fallback to default trigger slot if no anchorElement is set
-    return super.getTrigger();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       Dropdown.styles,

src/components/ha-duration-input.ts

@@ -6,7 +6,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import "./ha-base-time-input";
 import type { TimeChangedEvent } from "./ha-base-time-input";
 import "./ha-button-toggle-group";
-import type { ValueChangedEvent } from "../types";
 
 export interface HaDurationData {
   days?: number;
@@ -153,9 +152,7 @@ class HaDurationInput extends LitElement {
         : NaN;
   }
 
-  private _durationChanged(
-    ev: ValueChangedEvent<TimeChangedEvent | undefined>
-  ) {
+  private _durationChanged(ev: CustomEvent<{ value?: TimeChangedEvent }>) {
     ev.stopPropagation();
     const value = ev.detail.value ? { ...ev.detail.value } : undefined;
 

src/components/ha-filter-categories.ts

@@ -315,13 +315,9 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
         }
         ha-list {
           --mdc-list-item-meta-size: auto;
-          --mdc-list-side-padding-right: var(--ha-space-1);
-          --mdc-list-side-padding-left: var(--ha-space-4);
+          --mdc-list-side-padding-right: 4px;
           --mdc-icon-button-size: 36px;
         }
-        ha-list-item {
-          --mdc-list-item-graphic-margin: var(--ha-space-4);
-        }
         ha-dropdown-item {
           font-size: var(--ha-font-size-m);
         }

src/components/ha-filter-domains.ts

@@ -179,9 +179,6 @@ export class HaFilterDomains extends LitElement {
           margin-inline-start: initial;
           margin-inline-end: 8px;
         }
-        ha-check-list-item {
-          --mdc-list-item-graphic-margin: var(--ha-space-4);
-        }
         .badge {
           display: inline-block;
           margin-left: 8px;

src/components/ha-filter-integrations.ts

@@ -199,9 +199,6 @@ export class HaFilterIntegrations extends LitElement {
           margin-inline-start: auto;
           margin-inline-end: 8px;
         }
-        ha-check-list-item {
-          --mdc-list-item-graphic-margin: var(--ha-space-4);
-        }
         .badge {
           display: inline-block;
           margin-left: 8px;

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

@@ -164,9 +164,6 @@ export class HaFilterVoiceAssistants extends LitElement {
           margin-inline-start: auto;
           margin-inline-end: 8px;
         }
-        ha-check-list-item {
-          --mdc-list-item-graphic-margin: var(--ha-space-4);
-        }
         .badge {
           display: inline-block;
           margin-left: 8px;

src/components/ha-floor-picker.ts

@@ -359,7 +359,7 @@ export class HaFloorPicker extends LitElement {
         {
           id: ADD_NEW_ID + searchString,
           primary: this.hass.localize(
-            "ui.components.floor-picker.add_new_suggestion",
+            "ui.components.floor-picker.add_new_sugestion",
             {
               name: searchString,
             }

src/components/ha-icon-overflow-menu.ts

@@ -9,6 +9,7 @@ import type { HomeAssistant } from "../types";
 import "./ha-dropdown";
 import "./ha-dropdown-item";
 import "./ha-icon-button";
+import "./ha-md-divider";
 import "./ha-svg-icon";
 import "./ha-tooltip";
 

src/components/ha-label-picker.ts

@@ -182,7 +182,7 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
         {
           id: ADD_NEW_ID + searchString,
           primary: this.hass.localize(
-            "ui.components.label-picker.add_new_suggestion",
+            "ui.components.label-picker.add_new_sugestion",
             {
               name: searchString,
             }

src/components/ha-md-dialog.ts

@@ -0,0 +1,263 @@
+import { Dialog } from "@material/web/dialog/internal/dialog";
+import { styles } from "@material/web/dialog/internal/dialog-styles";
+import {
+  type DialogAnimation,
+  DIALOG_DEFAULT_CLOSE_ANIMATION,
+  DIALOG_DEFAULT_OPEN_ANIMATION,
+} from "@material/web/dialog/internal/animations";
+import { css } from "lit";
+import { customElement, property } from "lit/decorators";
+
+// workaround to be able to overlay a dialog with another dialog
+Dialog.addInitializer(async (instance) => {
+  await instance.updateComplete;
+
+  const dialogInstance = instance as HaMdDialog;
+
+  // @ts-expect-error dialog is private
+  dialogInstance.dialog.prepend(dialogInstance.scrim);
+  // @ts-expect-error scrim is private
+  dialogInstance.scrim.style.inset = 0;
+  // @ts-expect-error scrim is private
+  dialogInstance.scrim.style.zIndex = 0;
+
+  const { getOpenAnimation, getCloseAnimation } = dialogInstance;
+  dialogInstance.getOpenAnimation = () => {
+    const animations = getOpenAnimation.call(this);
+    animations.container = [
+      ...(animations.container ?? []),
+      ...(animations.dialog ?? []),
+    ];
+    animations.dialog = [];
+    return animations;
+  };
+  dialogInstance.getCloseAnimation = () => {
+    const animations = getCloseAnimation.call(this);
+    animations.container = [
+      ...(animations.container ?? []),
+      ...(animations.dialog ?? []),
+    ];
+    animations.dialog = [];
+    return animations;
+  };
+});
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-imports
+let DIALOG_POLYFILL: Promise<typeof import("dialog-polyfill")>;
+
+/**
+ * Based on the home assistant design: https://design.home-assistant.io/#components/ha-dialogs
+ *
+ */
+@customElement("ha-md-dialog")
+export class HaMdDialog extends Dialog {
+  /**
+   * When true the dialog will not close when the user presses the esc key or press out of the dialog.
+   */
+  @property({ attribute: "disable-cancel-action", type: Boolean })
+  public disableCancelAction = false;
+
+  private _polyfillDialogRegistered = false;
+
+  constructor() {
+    super();
+    this.addEventListener("cancel", this._handleCancel);
+
+    if (typeof HTMLDialogElement !== "function") {
+      this.addEventListener("open", this._handleOpen);
+
+      if (!DIALOG_POLYFILL) {
+        DIALOG_POLYFILL = import("dialog-polyfill");
+      }
+    }
+
+    // if browser doesn't support animate API disable open/close animations
+    if (this.animate === undefined) {
+      this.quick = true;
+    }
+
+    // if browser doesn't support animate API disable open/close animations
+    if (this.animate === undefined) {
+      this.quick = true;
+    }
+  }
+
+  // prevent open in older browsers and wait for polyfill to load
+  private async _handleOpen(openEvent: Event) {
+    openEvent.preventDefault();
+
+    if (this._polyfillDialogRegistered) {
+      return;
+    }
+
+    this._polyfillDialogRegistered = true;
+    this._loadPolyfillStylesheet("/static/polyfills/dialog-polyfill.css");
+    const dialog = this.shadowRoot?.querySelector(
+      "dialog"
+    ) as HTMLDialogElement;
+
+    const dialogPolyfill = await DIALOG_POLYFILL;
+    dialogPolyfill.default.registerDialog(dialog);
+    this.removeEventListener("open", this._handleOpen);
+
+    this.show();
+  }
+
+  private async _loadPolyfillStylesheet(href) {
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = href;
+
+    return new Promise<void>((resolve, reject) => {
+      link.onload = () => resolve();
+      link.onerror = () =>
+        reject(new Error(`Stylesheet failed to load: ${href}`));
+
+      this.shadowRoot?.appendChild(link);
+    });
+  }
+
+  private _handleCancel(closeEvent: Event) {
+    if (this.disableCancelAction) {
+      closeEvent.preventDefault();
+      const dialogElement = this.shadowRoot?.querySelector("dialog .container");
+      if (this.animate !== undefined) {
+        dialogElement?.animate(
+          [
+            {
+              transform: "rotate(-1deg)",
+              "animation-timing-function": "ease-in",
+            },
+            {
+              transform: "rotate(1.5deg)",
+              "animation-timing-function": "ease-out",
+            },
+            {
+              transform: "rotate(0deg)",
+              "animation-timing-function": "ease-in",
+            },
+          ],
+          {
+            duration: 200,
+            iterations: 2,
+          }
+        );
+      }
+    }
+  }
+
+  static override styles = [
+    styles,
+    css`
+      :host {
+        --md-dialog-container-color: var(--card-background-color);
+        --md-dialog-headline-color: var(--primary-text-color);
+        --md-dialog-supporting-text-color: var(--primary-text-color);
+        --md-sys-color-scrim: #000000;
+
+        --md-dialog-headline-weight: var(--ha-font-weight-normal);
+        --md-dialog-headline-size: var(--ha-font-size-xl);
+        --md-dialog-supporting-text-size: var(--ha-font-size-m);
+        --md-dialog-supporting-text-line-height: var(--ha-line-height-normal);
+        --md-divider-color: var(--divider-color);
+      }
+
+      :host([type="alert"]) {
+        min-width: 320px;
+      }
+
+      @media all and (max-width: 450px), all and (max-height: 500px) {
+        :host(:not([type="alert"])) {
+          min-width: var(--mdc-dialog-min-width, 100vw);
+          min-height: 100%;
+          max-height: 100%;
+          --md-dialog-container-shape: 0;
+        }
+
+        .container {
+          margin-top: var(--safe-area-inset-top, 0);
+          margin-bottom: var(--safe-area-inset-bottom, 0);
+          margin-left: var(--safe-area-inset-left, 0);
+          margin-right: var(--safe-area-inset-right, 0);
+        }
+      }
+
+      ::slotted(ha-dialog-header[slot="headline"]) {
+        display: contents;
+      }
+
+      slot[name="actions"]::slotted(*) {
+        padding: var(--ha-space-4);
+      }
+
+      .scroller {
+        overflow: var(--dialog-content-overflow, auto);
+      }
+
+      slot[name="content"]::slotted(*) {
+        padding: var(--dialog-content-padding, var(--ha-space-6));
+      }
+      .scrim {
+        z-index: 10; /* overlay navigation */
+      }
+    `,
+  ];
+}
+
+// by default the dialog open/close animation will be from/to the top
+// but if we have a special mobile dialog which is at the bottom of the screen, a from bottom animation can be used:
+const OPEN_FROM_BOTTOM_ANIMATION: DialogAnimation = {
+  ...DIALOG_DEFAULT_OPEN_ANIMATION,
+  dialog: [
+    [
+      // Dialog slide up
+      [{ transform: "translateY(50px)" }, { transform: "translateY(0)" }],
+      { duration: 500, easing: "cubic-bezier(.3,0,0,1)" },
+    ],
+  ],
+  container: [
+    [
+      // Container fade in
+      [{ opacity: 0 }, { opacity: 1 }],
+      { duration: 50, easing: "linear", pseudoElement: "::before" },
+    ],
+  ],
+};
+
+const CLOSE_TO_BOTTOM_ANIMATION: DialogAnimation = {
+  ...DIALOG_DEFAULT_CLOSE_ANIMATION,
+  dialog: [
+    [
+      // Dialog slide down
+      [{ transform: "translateY(0)" }, { transform: "translateY(50px)" }],
+      { duration: 150, easing: "cubic-bezier(.3,0,0,1)" },
+    ],
+  ],
+  container: [
+    [
+      // Container fade out
+      [{ opacity: "1" }, { opacity: "0" }],
+      { delay: 100, duration: 50, easing: "linear", pseudoElement: "::before" },
+    ],
+  ],
+};
+
+export const getMobileOpenFromBottomAnimation = () => {
+  const matches = window.matchMedia(
+    "all and (max-width: 450px), all and (max-height: 500px)"
+  ).matches;
+  return matches ? OPEN_FROM_BOTTOM_ANIMATION : DIALOG_DEFAULT_OPEN_ANIMATION;
+};
+
+export const getMobileCloseToBottomAnimation = () => {
+  const matches = window.matchMedia(
+    "all and (max-width: 450px), all and (max-height: 500px)"
+  ).matches;
+  return matches ? CLOSE_TO_BOTTOM_ANIMATION : DIALOG_DEFAULT_CLOSE_ANIMATION;
+};
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-md-dialog": HaMdDialog;
+  }
+}

src/components/ha-md-divider.ts

@@ -0,0 +1,22 @@
+import { Divider } from "@material/web/divider/internal/divider";
+import { styles } from "@material/web/divider/internal/divider-styles";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-md-divider")
+export class HaMdDivider extends Divider {
+  static override styles = [
+    styles,
+    css`
+      :host {
+        --md-divider-color: var(--divider-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-md-divider": HaMdDivider;
+  }
+}

src/components/ha-md-menu-item.ts

@@ -0,0 +1,52 @@
+import { MenuItemEl } from "@material/web/menu/internal/menuitem/menu-item";
+import { styles } from "@material/web/menu/internal/menuitem/menu-item-styles";
+import { css } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-md-menu-item")
+export class HaMdMenuItem extends MenuItemEl {
+  @property({ attribute: false }) clickAction?: (item?: HTMLElement) => void;
+
+  static override styles = [
+    styles,
+    css`
+      :host {
+        --ha-icon-display: block;
+        --md-sys-color-primary: var(--primary-text-color);
+        --md-sys-color-on-primary: var(--primary-text-color);
+        --md-sys-color-secondary: var(--secondary-text-color);
+        --md-sys-color-surface: var(--card-background-color);
+        --md-sys-color-on-surface: var(--primary-text-color);
+        --md-sys-color-on-surface-variant: var(--secondary-text-color);
+        --md-sys-color-secondary-container: rgba(
+          var(--rgb-primary-color),
+          0.15
+        );
+        --md-sys-color-on-secondary-container: var(--text-primary-color);
+        --mdc-icon-size: 16px;
+
+        --md-sys-color-on-primary-container: var(--primary-text-color);
+        --md-sys-color-on-secondary-container: var(--primary-text-color);
+        --md-menu-item-label-text-font: Roboto, sans-serif;
+      }
+      :host(.warning) {
+        --md-menu-item-label-text-color: var(--error-color);
+        --md-menu-item-leading-icon-color: var(--error-color);
+      }
+      ::slotted([slot="headline"]) {
+        text-wrap: nowrap;
+      }
+      :host([disabled]) {
+        opacity: 1;
+        --md-menu-item-label-text-color: var(--disabled-text-color);
+        --md-menu-item-leading-icon-color: var(--disabled-text-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-md-menu-item": HaMdMenuItem;
+  }
+}

src/components/ha-md-menu.ts

@@ -0,0 +1,47 @@
+import { Menu } from "@material/web/menu/internal/menu";
+import { styles } from "@material/web/menu/internal/menu-styles";
+import type { CloseMenuEvent } from "@material/web/menu/menu";
+import {
+  CloseReason,
+  KeydownCloseKey,
+} from "@material/web/menu/internal/controllers/shared";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+import type { HaMdMenuItem } from "./ha-md-menu-item";
+
+@customElement("ha-md-menu")
+export class HaMdMenu extends Menu {
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.addEventListener("close-menu", this._handleCloseMenu);
+  }
+
+  private _handleCloseMenu(ev: CloseMenuEvent) {
+    if (
+      ev.detail.reason.kind === CloseReason.KEYDOWN &&
+      ev.detail.reason.key === KeydownCloseKey.ESCAPE
+    ) {
+      return;
+    }
+    (ev.detail.initiator as HaMdMenuItem).clickAction?.(ev.detail.initiator);
+  }
+
+  static override styles = [
+    styles,
+    css`
+      :host {
+        --md-sys-color-surface-container: var(--card-background-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-md-menu": HaMdMenu;
+  }
+
+  interface HTMLElementEventMap {
+    "close-menu": CloseMenuEvent;
+  }
+}

src/components/ha-mount-picker.ts

@@ -14,9 +14,9 @@ import {
 } from "../data/supervisor/mounts";
 import type { HomeAssistant } from "../types";
 import "./ha-alert";
-import type { HaSelectOption, HaSelectSelectEvent } from "./ha-select";
 import "./ha-list-item";
 import "./ha-select";
+import type { HaSelectOption } from "./ha-select";
 
 const _BACKUP_DATA_DISK_ = "/backup";
 
@@ -146,7 +146,7 @@ class HaMountPicker extends LitElement {
     }
   }
 
-  private _mountChanged(ev: HaSelectSelectEvent) {
+  private _mountChanged(ev: CustomEvent<{ value: string }>) {
     const newValue = ev.detail.value;
 
     if (newValue !== this.value) {

src/components/ha-picker-combo-box.ts

@@ -55,7 +55,6 @@ export interface PickerComboBoxItem {
   sorting_label?: string;
   icon_path?: string;
   icon?: string;
-  isRelated?: boolean;
 }
 
 export interface PickerComboBoxIndexSelectedDetail {

src/components/ha-select.ts

@@ -17,18 +17,6 @@ export interface HaSelectOption {
   disabled?: boolean;
 }
 
-/**
- * Event type for the ha-select component when an item is selected.
- * @param T - The type of the value of the selected item.
- * @param Clearable - Whether the select is clearable (allows undefined values).
- */
-export type HaSelectSelectEvent<
-  T = string,
-  Clearable extends boolean = false,
-> = CustomEvent<{
-  value: Clearable extends true ? T | undefined : T;
-}>;
-
 @customElement("ha-select")
 export class HaSelect extends LitElement {
   @property({ type: Boolean }) public clearable = false;

src/components/ha-stt-picker.ts

@@ -8,8 +8,8 @@ import { debounce } from "../common/util/debounce";
 import type { STTEngine } from "../data/stt";
 import { listSTTEngines } from "../data/stt";
 import type { HomeAssistant } from "../types";
-import type { HaSelectOption, HaSelectSelectEvent } from "./ha-select";
 import "./ha-select";
+import type { HaSelectOption } from "./ha-select";
 
 const NONE = "__NONE_OPTION__";
 
@@ -141,7 +141,7 @@ export class HaSTTPicker extends LitElement {
     }
   `;
 
-  private _changed(ev: HaSelectSelectEvent): void {
+  private _changed(ev: CustomEvent<{ value: string }>): void {
     const value = ev.detail.value;
     if (
       !this.hass ||

src/components/ha-target-picker.ts

@@ -53,7 +53,7 @@ import {
   multiTermSortedSearch,
   type FuseWeightedKey,
 } from "../resources/fuseMultiTerm";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
+import type { HomeAssistant } from "../types";
 import { brandsUrl } from "../util/brands-url";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-generic-picker";
@@ -403,7 +403,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     `;
   }
 
-  private _targetPicked(ev: ValueChangedEvent<string>) {
+  private _targetPicked(ev: CustomEvent<{ value: string }>) {
     ev.stopPropagation();
     const value = ev.detail.value;
     if (value.startsWith(CREATE_ID)) {

src/components/ha-theme-picker.ts

@@ -3,8 +3,8 @@ import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant } from "../types";
-import type { HaSelectOption, HaSelectSelectEvent } from "./ha-select";
 import "./ha-select";
+import type { HaSelectOption } from "./ha-select";
 
 const DEFAULT_THEME = "default";
 
@@ -63,7 +63,7 @@ export class HaThemePicker extends LitElement {
     }
   `;
 
-  private _changed(ev: HaSelectSelectEvent): void {
+  private _changed(ev: CustomEvent<{ value: string }>): void {
     if (!this.hass || ev.detail.value === "") {
       return;
     }

src/components/ha-time-input.ts

@@ -5,7 +5,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import type { FrontendLocaleData } from "../data/translation";
 import "./ha-base-time-input";
 import type { TimeChangedEvent } from "./ha-base-time-input";
-import type { ValueChangedEvent } from "../types";
 
 @customElement("ha-time-input")
 export class HaTimeInput extends LitElement {
@@ -70,7 +69,7 @@ export class HaTimeInput extends LitElement {
     `;
   }
 
-  private _timeChanged(ev: ValueChangedEvent<TimeChangedEvent | undefined>) {
+  private _timeChanged(ev: CustomEvent<{ value?: TimeChangedEvent }>) {
     ev.stopPropagation();
     const eventValue = ev.detail.value;
 

src/components/ha-tts-picker.ts

@@ -8,8 +8,8 @@ import { debounce } from "../common/util/debounce";
 import type { TTSEngine } from "../data/tts";
 import { listTTSEngines } from "../data/tts";
 import type { HomeAssistant } from "../types";
-import type { HaSelectOption, HaSelectSelectEvent } from "./ha-select";
 import "./ha-select";
+import type { HaSelectOption } from "./ha-select";
 
 const NONE = "__NONE_OPTION__";
 
@@ -141,7 +141,7 @@ export class HaTTSPicker extends LitElement {
     }
   `;
 
-  private _changed(ev: HaSelectSelectEvent): void {
+  private _changed(ev: CustomEvent<{ value: string }>): void {
     const value = ev.detail.value;
     if (
       !this.hass ||

src/components/ha-tts-voice-picker.ts

@@ -6,8 +6,8 @@ import { debounce } from "../common/util/debounce";
 import type { TTSVoice } from "../data/tts";
 import { listTTSVoices } from "../data/tts";
 import type { HomeAssistant } from "../types";
-import type { HaSelectOption, HaSelectSelectEvent } from "./ha-select";
 import "./ha-select";
+import type { HaSelectOption } from "./ha-select";
 
 const NONE = "__NONE_OPTION__";
 
@@ -106,7 +106,7 @@ export class HaTTSVoicePicker extends LitElement {
     }
   `;
 
-  private _changed(ev: HaSelectSelectEvent): void {
+  private _changed(ev: CustomEvent<{ value: string }>): void {
     const value = ev.detail.value;
     if (
       !this.hass ||

src/components/ha-wa-dialog.ts

@@ -14,7 +14,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import { ScrollableFadeMixin } from "../mixins/scrollable-fade-mixin";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
-import { isIosApp } from "../util/is_ios";
 import "./ha-dialog-header";
 import "./ha-icon-button";
 
@@ -198,21 +197,22 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
     await this.updateComplete;
 
     requestAnimationFrame(() => {
-      if (isIosApp(this.hass)) {
-        const element = this.querySelector("[autofocus]");
-        if (element !== null) {
-          if (!element.id) {
-            element.id = "ha-wa-dialog-autofocus";
-          }
-          this.hass.auth.external!.fireMessage({
-            type: "focus_element",
-            payload: {
-              element_id: element.id,
-            },
-          });
-        }
-        return;
-      }
+      // temporary disabled because of issues with focus in iOS app, can be reenabled in 2026.2.0
+      // if (isIosApp(this.hass)) {
+      //   const element = this.querySelector("[autofocus]");
+      //   if (element !== null) {
+      //     if (!element.id) {
+      //       element.id = "ha-wa-dialog-autofocus";
+      //     }
+      //     this.hass.auth.external!.fireMessage({
+      //       type: "focus_element",
+      //       payload: {
+      //         element_id: element.id,
+      //       },
+      //     });
+      //   }
+      //   return;
+      // }
       (this.querySelector("[autofocus]") as HTMLElement | null)?.focus();
     });
   };

src/components/media-player/dialog-join-media-players.ts

@@ -1,9 +1,11 @@
 import { mdiClose } from "@mdi/js";
+import type { HassEntity } from "home-assistant-js-websocket";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
+import { computeStateName } from "../../common/entity/compute_state_name";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import { extractApiErrorMessage } from "../../data/hassio/common";
@@ -17,9 +19,8 @@ import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "../ha-alert";
 import "../ha-button";
-import "../ha-dialog-footer";
+import "../ha-dialog";
 import "../ha-dialog-header";
-import "../ha-wa-dialog";
 import "./ha-media-player-toggle";
 import type { JoinMediaPlayersDialogParams } from "./show-join-media-players-dialog";
 
@@ -37,11 +38,8 @@ class DialogJoinMediaPlayers extends LitElement {
 
   @state() private _error?: string;
 
-  @state() private _open = false;
-
   public showDialog(params: JoinMediaPlayersDialogParams): void {
     this._entityId = params.entityId;
-    this._open = true;
 
     const stateObj = this.hass.states[params.entityId] as
       | MediaPlayerEntity
@@ -56,11 +54,6 @@ class DialogJoinMediaPlayers extends LitElement {
   }
 
   public closeDialog() {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
-    this._open = false;
     this._entityId = undefined;
     this._selectedEntities = [];
     this._groupMembers = [];
@@ -75,18 +68,23 @@ class DialogJoinMediaPlayers extends LitElement {
     }
 
     const entityId = this._entityId;
+    const stateObj = this.hass.states[entityId] as HassEntity | undefined;
+    const name = (stateObj && computeStateName(stateObj)) || entityId;
+
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        flexcontent
-        @closed=${this._dialogClosed}
+      <ha-dialog
+        open
+        scrimClickAction
+        escapeKeyAction
+        flexContent
+        .heading=${name}
+        @closed=${this.closeDialog}
       >
-        <ha-dialog-header show-border slot="header">
+        <ha-dialog-header show-border slot="heading">
           <ha-icon-button
             .label=${this.hass.localize("ui.common.close")}
             .path=${mdiClose}
-            data-dialog="close"
+            dialogAction="close"
             slot="navigationIcon"
           ></ha-icon-button>
           <span slot="title"
@@ -120,23 +118,21 @@ class DialogJoinMediaPlayers extends LitElement {
               ></ha-media-player-toggle>`
           )}
         </div>
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            appearance="plain"
-            slot="secondaryAction"
-            @click=${this.closeDialog}
-          >
-            ${this.hass.localize("ui.common.cancel")}
-          </ha-button>
-          <ha-button
-            .disabled=${!!this._submitting}
-            slot="primaryAction"
-            @click=${this._submit}
-          >
-            ${this.hass.localize("ui.common.apply")}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        <ha-button
+          appearance="plain"
+          slot="secondaryAction"
+          @click=${this.closeDialog}
+        >
+          ${this.hass.localize("ui.common.cancel")}
+        </ha-button>
+        <ha-button
+          .disabled=${!!this._submitting}
+          slot="primaryAction"
+          @click=${this._submit}
+        >
+          ${this.hass.localize("ui.common.apply")}
+        </ha-button>
+      </ha-dialog>
     `;
   }
 
@@ -221,7 +217,6 @@ class DialogJoinMediaPlayers extends LitElement {
         .content {
           display: flex;
           flex-direction: column;
-          padding-top: var(--ha-space-6);
           row-gap: var(--ha-space-4);
         }
 

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

@@ -24,8 +24,6 @@ import "../ha-icon-button";
 import "./hat-logbook-note";
 import type { NodeInfo } from "./hat-script-graph";
 import { traceTabStyles } from "./trace-tab-styles";
-import type { Trigger } from "../../data/automation";
-import { migrateAutomationTrigger } from "../../data/automation";
 
 const TRACE_PATH_TABS = [
   "step_config",
@@ -168,9 +166,7 @@ export class HaTracePathDetails extends LitElement {
                 : selectedType === "trigger"
                   ? html`<h2>
                       ${describeTrigger(
-                        migrateAutomationTrigger({
-                          ...currentDetail,
-                        }) as Trigger,
+                        currentDetail,
                         this.hass,
                         this._entityReg
                       )}

src/components/voice-assistant-brand-icon.ts

@@ -32,13 +32,12 @@ export class VoiceAssistantBrandicon extends LitElement {
     return [
       haStyle,
       css`
-        :host {
-          display: inline;
-        }
         .logo {
           position: relative;
-          vertical-align: middle;
           height: 24px;
+          margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
         }
       `,
     ];

src/data/history.ts

@@ -142,7 +142,7 @@ export const subscribeHistory = (
   );
 };
 
-export class HistoryStream {
+class HistoryStream {
   hass: HomeAssistant;
 
   hoursToShow?: number;
@@ -221,7 +221,6 @@ export class HistoryStream {
         // only expire the rest of the history as it ages.
         const lastExpiredState = expiredStates[expiredStates.length - 1];
         lastExpiredState.lu = purgeBeforePythonTime;
-        delete lastExpiredState.lc;
         newHistory[entityId].unshift(lastExpiredState);
       }
     }

src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts

@@ -1,12 +1,17 @@
+import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
-import "../../../../components/ha-dialog-footer";
+import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-icon-button-toggle";
-import "../../../../components/ha-wa-dialog";
+import type { HaMdDialog } from "../../../../components/ha-md-dialog";
+import {
+  getMobileCloseToBottomAnimation,
+  getMobileOpenFromBottomAnimation,
+} from "../../../../components/ha-md-dialog";
 import type { EntityRegistryEntry } from "../../../../data/entity/entity_registry";
 import type { LightColor, LightEntity } from "../../../../data/light";
 import {
@@ -36,7 +41,7 @@ class DialogLightColorFavorite extends LitElement {
 
   @state() private _modes: LightPickerMode[] = [];
 
-  @state() private _open = false;
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
 
   public async showDialog(
     dialogParams: LightColorFavoriteDialogParams
@@ -45,11 +50,10 @@ class DialogLightColorFavorite extends LitElement {
     this._dialogParams = dialogParams;
     this._color = dialogParams.initialColor ?? this._computeCurrentColor();
     this._updateModes();
-    this._open = true;
   }
 
   public closeDialog(): void {
-    this._open = false;
+    this._dialog?.close();
   }
 
   private _updateModes() {
@@ -116,8 +120,16 @@ class DialogLightColorFavorite extends LitElement {
     );
   }
 
+  private async _cancel() {
+    this._dialogParams?.cancel?.();
+  }
+
+  private _cancelDialog() {
+    this._cancel();
+    this.closeDialog();
+  }
+
   private _dialogClosed(): void {
-    this._open = false;
     this._dialogParams = undefined;
     this._entry = undefined;
     this._color = undefined;
@@ -126,7 +138,7 @@ class DialogLightColorFavorite extends LitElement {
 
   private async _save() {
     if (!this._color) {
-      this.closeDialog();
+      this._cancel();
       return;
     }
     this._dialogParams?.submit?.(this._color);
@@ -147,76 +159,83 @@ class DialogLightColorFavorite extends LitElement {
     }
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        .headerTitle=${this._dialogParams?.title}
+      <ha-md-dialog
+        open
+        @cancel=${this._cancel}
         @closed=${this._dialogClosed}
+        aria-labelledby="dialog-light-color-favorite-title"
+        .getOpenAnimation=${getMobileOpenFromBottomAnimation}
+        .getCloseAnimation=${getMobileCloseToBottomAnimation}
       >
-        <div class="header">
-          ${this._modes.length > 1
-            ? html`
-                <div class="modes">
-                  ${this._modes.map(
-                    (value) => html`
-                      <ha-icon-button-toggle
-                        border-only
-                        .selected=${value === this._mode}
-                        .label=${this.hass.localize(
-                          `ui.dialogs.more_info_control.light.color_picker.mode.${value}`
-                        )}
-                        .mode=${value}
-                        @click=${this._modeChanged}
-                      >
-                        <span
-                          class="wheel ${classMap({ [value]: true })}"
-                        ></span>
-                      </ha-icon-button-toggle>
-                    `
-                  )}
-                </div>
-              `
-            : nothing}
-        </div>
-        <div class="content">
-          ${this._mode === "color_temp"
-            ? html`
-                <light-color-temp-picker
-                  .hass=${this.hass}
-                  .stateObj=${this.stateObj}
-                  @color-changed=${this._colorChanged}
-                >
-                </light-color-temp-picker>
-              `
-            : nothing}
-          ${this._mode === "color"
-            ? html`
-                <light-color-rgb-picker
-                  .hass=${this.hass}
-                  .stateObj=${this.stateObj}
-                  @color-changed=${this._colorChanged}
-                >
-                </light-color-rgb-picker>
-              `
-            : nothing}
-        </div>
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            slot="secondaryAction"
-            appearance="plain"
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
             @click=${this.closeDialog}
+            .label=${this.hass.localize("ui.common.close")}
+            .path=${mdiClose}
+          ></ha-icon-button>
+          <span slot="title" id="dialog-light-color-favorite-title"
+            >${this._dialogParams?.title}</span
           >
+        </ha-dialog-header>
+        <div slot="content">
+          <div class="header">
+            ${this._modes.length > 1
+              ? html`
+                  <div class="modes">
+                    ${this._modes.map(
+                      (value) => html`
+                        <ha-icon-button-toggle
+                          border-only
+                          .selected=${value === this._mode}
+                          .label=${this.hass.localize(
+                            `ui.dialogs.more_info_control.light.color_picker.mode.${value}`
+                          )}
+                          .mode=${value}
+                          @click=${this._modeChanged}
+                        >
+                          <span
+                            class="wheel ${classMap({ [value]: true })}"
+                          ></span>
+                        </ha-icon-button-toggle>
+                      `
+                    )}
+                  </div>
+                `
+              : nothing}
+          </div>
+          <div class="content">
+            ${this._mode === "color_temp"
+              ? html`
+                  <light-color-temp-picker
+                    .hass=${this.hass}
+                    .stateObj=${this.stateObj}
+                    @color-changed=${this._colorChanged}
+                  >
+                  </light-color-temp-picker>
+                `
+              : nothing}
+            ${this._mode === "color"
+              ? html`
+                  <light-color-rgb-picker
+                    .hass=${this.hass}
+                    .stateObj=${this.stateObj}
+                    @color-changed=${this._colorChanged}
+                  >
+                  </light-color-rgb-picker>
+                `
+              : nothing}
+          </div>
+        </div>
+        <div slot="actions">
+          <ha-button appearance="plain" @click=${this._cancelDialog}>
             ${this.hass.localize("ui.common.cancel")}
           </ha-button>
-          <ha-button
-            slot="primaryAction"
-            @click=${this._save}
-            .disabled=${!this._color}
+          <ha-button @click=${this._save} .disabled=${!this._color}
+            >${this.hass.localize("ui.common.save")}</ha-button
           >
-            ${this.hass.localize("ui.common.save")}
-          </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        </div>
+      </ha-md-dialog>
     `;
   }
 
@@ -224,18 +243,23 @@ class DialogLightColorFavorite extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-wa-dialog {
-          --ha-dialog-width-md: 420px; /* prevent width jumps when switching modes */
-          --ha-dialog-max-height: min(
+        ha-md-dialog {
+          min-width: 420px; /* prevent width jumps when switching modes */
+          max-height: min(
             600px,
             100% - 48px
           ); /* prevent scrolling on desktop */
         }
 
         @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-wa-dialog {
-            --ha-dialog-width-md: 100vw;
-            --ha-dialog-max-height: calc(100% - 100px);
+          ha-md-dialog {
+            min-width: 100%;
+            min-height: auto;
+            max-height: calc(100% - 100px);
+            margin-bottom: 0;
+
+            --md-dialog-container-shape-start-start: 28px;
+            --md-dialog-container-shape-start-end: 28px;
           }
         }
 

src/dialogs/more-info/components/lights/show-dialog-light-color-favorite.ts

@@ -7,6 +7,7 @@ export interface LightColorFavoriteDialogParams {
   title: string;
   initialColor?: LightColor;
   submit?: (color?: LightColor) => void;
+  cancel?: () => void;
 }
 
 export const loadLightColorFavoriteDialog = () =>
@@ -17,6 +18,7 @@ export const showLightColorFavoriteDialog = (
   dialogParams: LightColorFavoriteDialogParams
 ) =>
   new Promise<LightColor | null>((resolve) => {
+    const origCancel = dialogParams.cancel;
     const origSubmit = dialogParams.submit;
 
     fireEvent(element, "show-dialog", {
@@ -24,6 +26,12 @@ export const showLightColorFavoriteDialog = (
       dialogImport: loadLightColorFavoriteDialog,
       dialogParams: {
         ...dialogParams,
+        cancel: () => {
+          resolve(null);
+          if (origCancel) {
+            origCancel();
+          }
+        },
         submit: (color: LightColor) => {
           resolve(color);
           if (origSubmit) {

src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts

@@ -7,7 +7,6 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { supportsFeature } from "../../../../common/entity/supports-feature";
 import "../../../../components/ha-button";
 import "../../../../components/ha-control-button";
-import type { HaSelectSelectEvent } from "../../../../components/ha-select";
 import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-list-item";
@@ -147,7 +146,7 @@ class MoreInfoSirenAdvancedControls extends LitElement {
     `;
   }
 
-  private _handleToneChange(ev: HaSelectSelectEvent) {
+  private _handleToneChange(ev: CustomEvent<{ value: string }>) {
     this._tone = ev.detail.value;
   }
 

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

@@ -5,7 +5,7 @@ import "../../../components/ha-date-input";
 import "../../../components/ha-time-input";
 import { setDateValue } from "../../../data/date";
 import { isUnavailableState, UNAVAILABLE } from "../../../data/entity/entity";
-import type { HomeAssistant, ValueChangedEvent } from "../../../types";
+import type { HomeAssistant } from "../../../types";
 
 @customElement("more-info-date")
 class MoreInfoDate extends LitElement {
@@ -31,7 +31,7 @@ class MoreInfoDate extends LitElement {
     `;
   }
 
-  private _dateChanged(ev: ValueChangedEvent<string>): void {
+  private _dateChanged(ev: CustomEvent<{ value: string }>): void {
     if (ev.detail.value) {
       setDateValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
     }

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

@@ -6,7 +6,7 @@ import "../../../components/ha-date-input";
 import "../../../components/ha-time-input";
 import { setDateTimeValue } from "../../../data/datetime";
 import { isUnavailableState, UNAVAILABLE } from "../../../data/entity/entity";
-import type { HomeAssistant, ValueChangedEvent } from "../../../types";
+import type { HomeAssistant } from "../../../types";
 
 @customElement("more-info-datetime")
 class MoreInfoDatetime extends LitElement {
@@ -45,7 +45,7 @@ class MoreInfoDatetime extends LitElement {
     ev.stopPropagation();
   }
 
-  private _timeChanged(ev: ValueChangedEvent<string>): void {
+  private _timeChanged(ev: CustomEvent<{ value: string }>): void {
     if (ev.detail.value) {
       const dateObj = new Date(this.stateObj!.state);
       const newTime = ev.detail.value.split(":").map(Number);
@@ -55,7 +55,7 @@ class MoreInfoDatetime extends LitElement {
     }
   }
 
-  private _dateChanged(ev: ValueChangedEvent<string>): void {
+  private _dateChanged(ev: CustomEvent<{ value: string }>): void {
     if (ev.detail.value) {
       const dateObj = new Date(this.stateObj!.state);
       const newDate = ev.detail.value.split("-").map(Number);

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

@@ -8,7 +8,7 @@ import {
   setInputDateTimeValue,
   stateToIsoDateString,
 } from "../../../data/input_datetime";
-import type { HomeAssistant, ValueChangedEvent } from "../../../types";
+import type { HomeAssistant } from "../../../types";
 
 @customElement("more-info-input_datetime")
 class MoreInfoInputDatetime extends LitElement {
@@ -55,7 +55,7 @@ class MoreInfoInputDatetime extends LitElement {
     ev.stopPropagation();
   }
 
-  private _timeChanged(ev: ValueChangedEvent<string>): void {
+  private _timeChanged(ev: CustomEvent<{ value: string }>): void {
     setInputDateTimeValue(
       this.hass!,
       this.stateObj!.entity_id,
@@ -66,7 +66,7 @@ class MoreInfoInputDatetime extends LitElement {
     );
   }
 
-  private _dateChanged(ev: ValueChangedEvent<string>): void {
+  private _dateChanged(ev: CustomEvent<{ value: string }>): void {
     setInputDateTimeValue(
       this.hass!,
       this.stateObj!.entity_id,

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

@@ -202,11 +202,12 @@ class MoreInfoMediaPlayer extends LitElement {
       return nothing;
     }
 
-    return html`<ha-dropdown @wa-select=${this._handleSourceChange}>
+    return html`<ha-dropdown>
       <ha-icon-button
         slot="trigger"
         .label=${this.hass.localize(`ui.card.media_player.source`)}
         .path=${mdiLoginVariant}
+        @wa-select=${this._handleSourceChange}
       >
       </ha-icon-button>
       ${this.stateObj.attributes.source_list!.map(

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

@@ -1,7 +1,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { supportsFeature } from "../../../common/entity/supports-feature";
-import type { HaSelectSelectEvent } from "../../../components/ha-select";
 import "../../../components/ha-select";
 import type { RemoteEntity } from "../../../data/remote";
 import { REMOTE_SUPPORT_ACTIVITY } from "../../../data/remote";
@@ -44,7 +43,7 @@ class MoreInfoRemote extends LitElement {
     `;
   }
 
-  private _handleActivityChanged(ev: HaSelectSelectEvent) {
+  private _handleActivityChanged(ev: CustomEvent<{ value: string }>) {
     const oldVal = this.stateObj!.attributes.current_activity;
     const newVal = ev.detail.value;
 

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

@@ -5,7 +5,7 @@ import "../../../components/ha-date-input";
 import "../../../components/ha-time-input";
 import { isUnavailableState, UNAVAILABLE } from "../../../data/entity/entity";
 import { setTimeValue } from "../../../data/time";
-import type { HomeAssistant, ValueChangedEvent } from "../../../types";
+import type { HomeAssistant } from "../../../types";
 
 @customElement("more-info-time")
 class MoreInfoTime extends LitElement {
@@ -35,7 +35,7 @@ class MoreInfoTime extends LitElement {
     ev.stopPropagation();
   }
 
-  private _timeChanged(ev: ValueChangedEvent<string>): void {
+  private _timeChanged(ev: CustomEvent<{ value: string }>): void {
     if (ev.detail.value) {
       setTimeValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
     }

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

@@ -14,7 +14,6 @@ import memoizeOne from "memoize-one";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/entity/ha-battery-icon";
-import type { HaSelectSelectEvent } from "../../../components/ha-select";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-select";
@@ -286,7 +285,7 @@ class MoreInfoVacuum extends LitElement {
     });
   }
 
-  private _handleFanSpeedChanged(ev: HaSelectSelectEvent) {
+  private _handleFanSpeedChanged(ev: CustomEvent<{ value: string }>) {
     const oldVal = this.stateObj!.attributes.fan_speed;
     const newVal = ev.detail.value;
 

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

@@ -313,119 +313,113 @@ class MoreInfoWeather extends LitElement {
             </div>
           `
         : nothing}
-      ${supportedForecasts?.length
-        ? html`
-            <div class="section">
-              ${this.hass.localize("ui.card.weather.forecast")}:
-            </div>
-            ${supportedForecasts?.length > 1
-              ? html`<ha-tab-group
-                  @wa-tab-show=${this._handleForecastTypeChanged}
+
+      <div class="section">
+        ${this.hass.localize("ui.card.weather.forecast")}:
+      </div>
+      ${supportedForecasts?.length > 1
+        ? html`<ha-tab-group @wa-tab-show=${this._handleForecastTypeChanged}>
+            ${supportedForecasts.map(
+              (forecastType) =>
+                html`<ha-tab-group-tab
+                  slot="nav"
+                  .panel=${forecastType}
+                  .active=${this._forecastType === forecastType}
                 >
-                  ${supportedForecasts.map(
-                    (forecastType) =>
-                      html`<ha-tab-group-tab
-                        slot="nav"
-                        .panel=${forecastType}
-                        .active=${this._forecastType === forecastType}
-                      >
-                        ${this.hass!.localize(
-                          `ui.card.weather.${forecastType}`
-                        )}
-                      </ha-tab-group-tab>`
-                  )}
-                </ha-tab-group>`
-              : nothing}
-            <div class="forecast">
-              ${forecast?.length
-                ? this._groupForecastByDay(forecast).map((dayForecast) => {
-                    const showDayHeader = hourly || dayNight;
-                    return html`
-                      <div class="forecast-day">
-                        ${showDayHeader
-                          ? html`<div class="forecast-day-header">
-                              ${formatDateWeekdayShort(
-                                new Date(dayForecast[0].datetime),
-                                this.hass!.locale,
-                                this.hass!.config
-                              )}
-                            </div>`
-                          : nothing}
-                        <div class="forecast-day-content">
-                          ${dayForecast.map((item) =>
-                            this._showValue(item.templow) ||
-                            this._showValue(item.temperature)
-                              ? html`
-                                  <div class="forecast-item">
-                                    <div
-                                      class="forecast-item-label ${showDayHeader
-                                        ? ""
-                                        : "no-header"}"
-                                    >
-                                      ${hourly
-                                        ? formatTime(
-                                            new Date(item.datetime),
-                                            this.hass!.locale,
-                                            this.hass!.config
-                                          )
-                                        : dayNight
-                                          ? html`<div class="daynight">
-                                              ${item.is_daytime !== false
-                                                ? this.hass!.localize(
-                                                    "ui.card.weather.day"
-                                                  )
-                                                : this.hass!.localize(
-                                                    "ui.card.weather.night"
-                                                  )}
-                                            </div>`
-                                          : formatDateWeekdayShort(
-                                              new Date(item.datetime),
-                                              this.hass!.locale,
-                                              this.hass!.config
-                                            )}
-                                    </div>
-                                    ${this._showValue(item.condition)
-                                      ? html`
-                                          <div class="forecast-image-icon">
-                                            ${getWeatherStateIcon(
-                                              item.condition!,
-                                              this,
-                                              !(
-                                                item.is_daytime ||
-                                                item.is_daytime === undefined
-                                              )
-                                            )}
-                                          </div>
-                                        `
-                                      : nothing}
-                                    <div class="temp">
-                                      ${this._showValue(item.temperature)
-                                        ? html`${formatNumber(
-                                            item.temperature,
-                                            this.hass!.locale
-                                          )}°`
-                                        : "—"}
-                                    </div>
-                                    <div class="templow">
-                                      ${this._showValue(item.templow)
-                                        ? html`${formatNumber(
-                                            item.templow!,
-                                            this.hass!.locale
-                                          )}°`
-                                        : nothing}
-                                    </div>
-                                  </div>
-                                `
-                              : nothing
-                          )}
-                        </div>
-                      </div>
-                    `;
-                  })
-                : html`<ha-spinner size="medium"></ha-spinner>`}
-            </div>
-          `
+                  ${this.hass!.localize(`ui.card.weather.${forecastType}`)}
+                </ha-tab-group-tab>`
+            )}
+          </ha-tab-group>`
         : nothing}
+      <div class="forecast">
+        ${forecast?.length
+          ? this._groupForecastByDay(forecast).map((dayForecast) => {
+              const showDayHeader = hourly || dayNight;
+              return html`
+                <div class="forecast-day">
+                  ${showDayHeader
+                    ? html`<div class="forecast-day-header">
+                        ${formatDateWeekdayShort(
+                          new Date(dayForecast[0].datetime),
+                          this.hass!.locale,
+                          this.hass!.config
+                        )}
+                      </div>`
+                    : nothing}
+                  <div class="forecast-day-content">
+                    ${dayForecast.map((item) =>
+                      this._showValue(item.templow) ||
+                      this._showValue(item.temperature)
+                        ? html`
+                            <div class="forecast-item">
+                              <div
+                                class="forecast-item-label ${showDayHeader
+                                  ? ""
+                                  : "no-header"}"
+                              >
+                                ${hourly
+                                  ? formatTime(
+                                      new Date(item.datetime),
+                                      this.hass!.locale,
+                                      this.hass!.config
+                                    )
+                                  : dayNight
+                                    ? html`<div class="daynight">
+                                        ${item.is_daytime !== false
+                                          ? this.hass!.localize(
+                                              "ui.card.weather.day"
+                                            )
+                                          : this.hass!.localize(
+                                              "ui.card.weather.night"
+                                            )}
+                                      </div>`
+                                    : formatDateWeekdayShort(
+                                        new Date(item.datetime),
+                                        this.hass!.locale,
+                                        this.hass!.config
+                                      )}
+                              </div>
+                              ${this._showValue(item.condition)
+                                ? html`
+                                    <div class="forecast-image-icon">
+                                      ${getWeatherStateIcon(
+                                        item.condition!,
+                                        this,
+                                        !(
+                                          item.is_daytime ||
+                                          item.is_daytime === undefined
+                                        )
+                                      )}
+                                    </div>
+                                  `
+                                : nothing}
+                              <div class="temp">
+                                ${this._showValue(item.temperature)
+                                  ? html`${formatNumber(
+                                      item.temperature,
+                                      this.hass!.locale
+                                    )}°`
+                                  : "—"}
+                              </div>
+                              <div class="templow">
+                                ${this._showValue(item.templow)
+                                  ? html`${formatNumber(
+                                      item.templow!,
+                                      this.hass!.locale
+                                    )}°`
+                                  : nothing}
+                              </div>
+                            </div>
+                          `
+                        : nothing
+                    )}
+                  </div>
+                </div>
+              `;
+            })
+          : html`<ha-spinner size="medium"></ha-spinner>`}
+      </div>
+
       ${this.stateObj.attributes.attribution
         ? html`
             <div class="attribution">

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -47,7 +47,6 @@ import {
   type ActionCommandComboBoxItem,
   type NavigationComboBoxItem,
 } from "../../data/quick_bar";
-import type { RelatedResult } from "../../data/search";
 import {
   multiTermSortedSearch,
   type FuseWeightedKey,
@@ -76,8 +75,6 @@ export class QuickBar extends LitElement {
 
   @state() private _opened = false;
 
-  @state() private _relatedResult?: RelatedResult;
-
   @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
 
   private get _showEntityId() {
@@ -103,9 +100,6 @@ export class QuickBar extends LitElement {
     this._initialize();
     this._selectedSection = params.mode;
     this._showHint = params.showHint ?? false;
-
-    this._relatedResult = params.contextItem ? params.related : undefined;
-
     this._open = true;
   }
 
@@ -423,7 +417,6 @@ export class QuickBar extends LitElement {
     this._selectedSection = section as QuickBarSection | undefined;
     return this._getItemsMemoized(
       this._configEntryLookup,
-      this._relatedResult,
       searchString,
       this._selectedSection
     );
@@ -432,12 +425,10 @@ export class QuickBar extends LitElement {
   private _getItemsMemoized = memoizeOne(
     (
       configEntryLookup: Record<string, ConfigEntry>,
-      relatedResult: RelatedResult | undefined,
       filter?: string,
       section?: QuickBarSection
     ) => {
       const items: (string | PickerComboBoxItem)[] = [];
-      const relatedIdSets = this._getRelatedIdSets(relatedResult);
 
       if (!section || section === "navigate") {
         let navigateItems = this._generateNavigationCommandsMemoized(
@@ -486,29 +477,17 @@ export class QuickBar extends LitElement {
       }
 
       if (!section || section === "entity") {
-        let entityItems = this._getEntitiesMemoized(this.hass);
-
-        // Mark related items
-        if (relatedIdSets.entities.size > 0) {
-          entityItems = entityItems.map((item) => ({
-            ...item,
-            isRelated: relatedIdSets.entities.has(
-              (item as EntityComboBoxItem).stateObj?.entity_id || ""
-            ),
-          }));
-        }
+        let entityItems = this._getEntitiesMemoized(this.hass).sort(
+          this._sortBySortingLabel
+        );
 
         if (filter) {
-          entityItems = this._sortRelatedFirst(
-            this._filterGroup(
-              "entity",
-              entityItems,
-              filter,
-              entityComboBoxKeys
-            ) as EntityComboBoxItem[]
-          );
-        } else {
-          entityItems = this._sortRelatedByLabel(entityItems);
+          entityItems = this._filterGroup(
+            "entity",
+            entityItems,
+            filter,
+            entityComboBoxKeys
+          ) as EntityComboBoxItem[];
         }
 
         if (!section && entityItems.length) {
@@ -525,25 +504,15 @@ export class QuickBar extends LitElement {
         let deviceItems = this._getDevicesMemoized(
           this.hass,
           configEntryLookup
-        );
-
-        // Mark related items
-        if (relatedIdSets.devices.size > 0) {
-          deviceItems = deviceItems.map((item) => {
-            const deviceId = item.id.split(SEPARATOR)[1];
-            return {
-              ...item,
-              isRelated: relatedIdSets.devices.has(deviceId || ""),
-            };
-          });
-        }
+        ).sort(this._sortBySortingLabel);
 
         if (filter) {
-          deviceItems = this._sortRelatedFirst(
-            this._filterGroup("device", deviceItems, filter, deviceComboBoxKeys)
+          deviceItems = this._filterGroup(
+            "device",
+            deviceItems,
+            filter,
+            deviceComboBoxKeys
           );
-        } else {
-          deviceItems = this._sortRelatedByLabel(deviceItems);
         }
 
         if (!section && deviceItems.length) {
@@ -559,23 +528,13 @@ export class QuickBar extends LitElement {
       if (this.hass.user?.is_admin && (!section || section === "area")) {
         let areaItems = this._getAreasMemoized(this.hass);
 
-        // Mark related items
-        if (relatedIdSets.areas.size > 0) {
-          areaItems = areaItems.map((item) => {
-            const areaId = item.id.split(SEPARATOR)[1];
-            return {
-              ...item,
-              isRelated: relatedIdSets.areas.has(areaId || ""),
-            };
-          });
-        }
-
         if (filter) {
-          areaItems = this._sortRelatedFirst(
-            this._filterGroup("area", areaItems, filter, areaComboBoxKeys)
+          areaItems = this._filterGroup(
+            "area",
+            areaItems,
+            filter,
+            areaComboBoxKeys
           );
-        } else {
-          areaItems = this._sortRelatedByLabel(areaItems);
         }
 
         if (!section && areaItems.length) {
@@ -592,12 +551,6 @@ export class QuickBar extends LitElement {
     }
   );
 
-  private _getRelatedIdSets = memoizeOne((related?: RelatedResult) => ({
-    entities: new Set(related?.entity || []),
-    devices: new Set(related?.device || []),
-    areas: new Set(related?.area || []),
-  }));
-
   private _getEntitiesMemoized = memoizeOne((hass: HomeAssistant) =>
     getEntities(
       hass,
@@ -701,23 +654,6 @@ export class QuickBar extends LitElement {
       this.hass.locale.language
     );
 
-  private _sortRelatedByLabel = (items: PickerComboBoxItem[]) =>
-    [...items].sort((a, b) => {
-      if (a.isRelated && !b.isRelated) return -1;
-      if (!a.isRelated && b.isRelated) return 1;
-      return this._sortBySortingLabel(a, b);
-    });
-
-  private _sortRelatedFirst = (items: PickerComboBoxItem[]) =>
-    [...items].sort((a, b) => {
-      const aRelated = Boolean(a.isRelated);
-      const bRelated = Boolean(b.isRelated);
-      if (aRelated === bRelated) {
-        return 0;
-      }
-      return aRelated ? -1 : 1;
-    });
-
   // #endregion data
 
   // #region interaction

src/dialogs/quick-bar/show-dialog-quick-bar.ts

@@ -1,5 +1,4 @@
 import { fireEvent } from "../../common/dom/fire_event";
-import type { ItemType, RelatedResult } from "../../data/search";
 import { closeDialog } from "../make-dialog-manager";
 
 export type QuickBarSection =
@@ -9,17 +8,10 @@ export type QuickBarSection =
   | "navigate"
   | "command";
 
-export interface QuickBarContextItem {
-  itemType: ItemType;
-  itemId: string;
-}
-
 export interface QuickBarParams {
   entityFilter?: string;
   mode?: QuickBarSection;
   showHint?: boolean;
-  contextItem?: QuickBarContextItem;
-  related?: RelatedResult;
 }
 
 export const loadQuickBar = () => import("./ha-quick-bar");

src/dialogs/sidebar/dialog-edit-sidebar.ts

@@ -30,7 +30,7 @@ import {
   getPanelIconPath,
   getPanelTitle,
 } from "../../data/panel";
-import type { HomeAssistant, ValueChangedEvent } from "../../types";
+import type { HomeAssistant } from "../../types";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
 
 @customElement("dialog-edit-sidebar")
@@ -206,7 +206,7 @@ class DialogEditSidebar extends LitElement {
     `;
   }
 
-  private _changed(ev: ValueChangedEvent<DisplayValue>): void {
+  private _changed(ev: CustomEvent<{ value: DisplayValue }>): void {
     const { order = [], hidden = [] } = ev.detail.value;
     this._order = [...order];
     this._hidden = [...hidden];

src/dialogs/voice-assistant-setup/cloud/cloud-step-intro.ts

@@ -129,12 +129,11 @@ export class CloudStepIntro extends LitElement {
       }
       .feature .logos {
         margin-bottom: 16px;
-        display: flex;
-        gap: var(--ha-space-4);
       }
       .feature .logos > * {
         width: 40px;
         height: 40px;
+        margin: 0 4px;
       }
       .round-icon {
         border-radius: var(--ha-border-radius-circle);

src/dialogs/voice-assistant-setup/voice-assistant-setup-step-success.ts

@@ -4,7 +4,6 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
-import type { HaSelectSelectEvent } from "../../components/ha-select";
 import {
   computeDeviceName,
   computeDeviceNameDisplay,
@@ -232,7 +231,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
     this._deviceName = ev.target.value;
   }
 
-  private async _wakeWordPicked(ev: HaSelectSelectEvent) {
+  private async _wakeWordPicked(ev: CustomEvent<{ value: string }>) {
     const option = ev.detail.value;
     if (this.assistConfiguration) {
       this.assistConfiguration.active_wake_words = [option];
@@ -240,7 +239,7 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
     await setWakeWords(this.hass, this.assistEntityId!, [option]);
   }
 
-  private _pipelinePicked(ev: HaSelectSelectEvent) {
+  private _pipelinePicked(ev: CustomEvent<{ value: string }>) {
     const stateObj = this.hass!.states[
       this.assistConfiguration!.pipeline_entity_id
     ] as InputSelectEntity;

src/fake_data/demo_panels.ts

@@ -3,8 +3,8 @@ import type { Panels } from "../types";
 export const demoPanels: Panels = {
   lovelace: {
     component_name: "lovelace",
-    icon: "mdi:view-dashboard",
-    title: "demo",
+    icon: null,
+    title: null,
     config: { mode: "storage" },
     url_path: "lovelace",
   },

src/fake_data/provide_hass.ts

@@ -52,7 +52,6 @@ export interface MockHomeAssistant extends HomeAssistant {
   mockEvent(event);
   mockTheme(theme: Record<string, string> | null);
   formatEntityState(stateObj: HassEntity, state?: string): string;
-  formatEntityStateToParts(stateObj: HassEntity, state?: string): ValuePart[];
   formatEntityAttributeValue(
     stateObj: HassEntity,
     attribute: string,
@@ -118,7 +117,6 @@ export const provideHass = (
   async function updateFormatFunctions() {
     const {
       formatEntityState,
-      formatEntityStateToParts,
       formatEntityAttributeName,
       formatEntityAttributeValue,
       formatEntityAttributeValueToParts,
@@ -135,7 +133,6 @@ export const provideHass = (
     );
     hass().updateHass({
       formatEntityState,
-      formatEntityStateToParts,
       formatEntityAttributeName,
       formatEntityAttributeValue,
       formatEntityAttributeValueToParts,
@@ -259,10 +256,6 @@ export const provideHass = (
       darkMode: false,
       theme: "default",
     },
-    selectedTheme: {
-      theme: "default",
-      dark: false,
-    },
     panels: demoPanels,
     services: demoServices,
     user: {
@@ -355,7 +348,7 @@ export const provideHass = (
     mockTheme(theme) {
       invalidateThemeCache();
       hass().updateHass({
-        selectedTheme: { theme: theme ? "mock" : "default", dark: false },
+        selectedTheme: { theme: theme ? "mock" : "default" },
         themes: {
           ...hass().themes,
           themes: {
@@ -368,7 +361,7 @@ export const provideHass = (
         document.documentElement,
         themes,
         selectedTheme!.theme,
-        { dark: false },
+        undefined,
         true
       );
     },
@@ -378,12 +371,6 @@ export const provideHass = (
     floors: {},
     formatEntityState: (stateObj, state) =>
       (state !== null ? state : stateObj.state) ?? "",
-    formatEntityStateToParts: (stateObj, state) => [
-      {
-        type: "value",
-        value: (state !== null ? state : stateObj.state) ?? "",
-      },
-    ],
     formatEntityAttributeName: (_stateObj, attribute) => attribute,
     formatEntityAttributeValue: (stateObj, attribute, value) =>
       value !== null ? value : (stateObj.attributes[attribute] ?? ""),

src/panels/calendar/ha-full-calendar.ts

@@ -74,8 +74,6 @@ export class HAFullCalendar extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @property({ attribute: "add-fab", type: Boolean }) public addFab = false;
-
   @property({ attribute: false }) public events: CalendarEvent[] = [];
 
   @property({ attribute: false }) public calendars: CalendarData[] = [];
@@ -210,7 +208,7 @@ export class HAFullCalendar extends LitElement {
         : ""}
 
       <div id="calendar"></div>
-      ${this.addFab && this._hasMutableCalendars
+      ${this._hasMutableCalendars
         ? html`<ha-fab
             slot="fab"
             .label=${this.hass.localize("ui.components.calendar.event.add")}

src/panels/calendar/ha-panel-calendar.ts

@@ -193,7 +193,6 @@ class PanelCalendar extends SubscribeMixin(LitElement) {
               </ha-list-item>`
           : nothing}
         <ha-full-calendar
-          add-fab
           .events=${this._events}
           .calendars=${this._calendars}
           .narrow=${this.narrow}
@@ -331,8 +330,6 @@ class PanelCalendar extends SubscribeMixin(LitElement) {
 
         ha-dropdown-item {
           padding-left: 32px;
-          padding-inline-start: 32px;
-          padding-inline-end: initial;
           --icon-primary-color: var(--ha-color-fill-neutral-loud-resting);
         }
 
@@ -342,8 +339,6 @@ class PanelCalendar extends SubscribeMixin(LitElement) {
 
         :host([mobile]) {
           padding-left: unset;
-          padding-inline-start: unset;
-          padding-inline-end: initial;
         }
         .loading {
           display: flex;

src/panels/calendar/ha-recurrence-rule-editor.ts

@@ -11,7 +11,6 @@ import "../../components/chips/ha-chip-set";
 import "../../components/chips/ha-filter-chip";
 import "../../components/ha-date-input";
 import "../../components/ha-select";
-import type { HaSelectSelectEvent } from "../../components/ha-select";
 import "../../components/ha-textfield";
 import type { HomeAssistant } from "../../types";
 import type {
@@ -312,8 +311,8 @@ export class RecurrenceRuleEditor extends LitElement {
     this._interval = (e.target! as any).value;
   }
 
-  private _onRepeatSelected(e: HaSelectSelectEvent<RepeatFrequency>) {
-    this._freq = e.detail.value;
+  private _onRepeatSelected(e: CustomEvent<{ value: string }>) {
+    this._freq = e.detail.value as RepeatFrequency;
 
     if (this._freq === "yearly") {
       this._interval = 1;
@@ -324,9 +323,7 @@ export class RecurrenceRuleEditor extends LitElement {
     }
   }
 
-  private _onMonthlyDetailSelected(
-    e: HaSelectSelectEvent<MonthlyRepeatItem["value"]>
-  ) {
+  private _onMonthlyDetailSelected(e: CustomEvent<{ value: string }>) {
     const selectedItem = this._monthlyRepeatItems.find(
       (item) => item.value === e.detail.value
     );
@@ -349,8 +346,8 @@ export class RecurrenceRuleEditor extends LitElement {
     this.requestUpdate("_weekday");
   }
 
-  private _onEndSelected(e: HaSelectSelectEvent<RepeatEnd>) {
-    const end = e.detail.value;
+  private _onEndSelected(e: CustomEvent<{ value: string }>) {
+    const end = e.detail.value as RepeatEnd;
     if (end === this._end) {
       return;
     }

src/panels/config/apps/app-view/config/supervisor-app-audio.ts

@@ -5,7 +5,6 @@ import "../../../../../components/buttons/ha-progress-button";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-select";
-import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
 import type {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
@@ -119,14 +118,14 @@ class SupervisorAppAudio extends LitElement {
     }
   }
 
-  private _setInputDevice(ev: HaSelectSelectEvent): void {
+  private _setInputDevice(ev: CustomEvent<{ value: string }>): void {
     const device = ev.detail.value;
-    this._selectedInput = device ?? null;
+    this._selectedInput = device;
   }
 
-  private _setOutputDevice(ev: HaSelectSelectEvent): void {
+  private _setOutputDevice(ev: CustomEvent<{ value: string }>): void {
     const device = ev.detail.value;
-    this._selectedOutput = device ?? null;
+    this._selectedOutput = device;
   }
 
   private async _addonChanged(): Promise<void> {

src/panels/config/apps/app-view/documentation/supervisor-app-documentation-tab.ts

@@ -63,7 +63,6 @@ class SupervisorAppDocumentationDashboard extends LitElement {
           margin: auto;
           padding: var(--ha-space-2);
           max-width: 1024px;
-          direction: ltr;
         }
         ha-markdown {
           padding: var(--ha-space-4);

src/panels/config/automation/action/types/ha-automation-action-condition.ts

@@ -7,7 +7,6 @@ import type { LocalizeFunc } from "../../../../../common/translations/localize";
 import { CONDITION_ICONS } from "../../../../../components/ha-condition-icon";
 import "../../../../../components/ha-dropdown-item";
 import "../../../../../components/ha-select";
-import type { HaSelectSelectEvent } from "../../../../../components/ha-select";
 import {
   DYNAMIC_PREFIX,
   getValueFromDynamic,
@@ -201,7 +200,7 @@ export class HaConditionAction
     });
   }
 
-  private _typeChanged(ev: HaSelectSelectEvent) {
+  private _typeChanged(ev: CustomEvent<{ value: string }>) {
     const type = ev.detail.value;
 
     if (!type) {

src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts

@@ -8,7 +8,7 @@ import "../../../../../components/ha-duration-input";
 import "../../../../../components/ha-formfield";
 import "../../../../../components/ha-textfield";
 import type { WaitForTriggerAction } from "../../../../../data/script";
-import type { HomeAssistant, ValueChangedEvent } from "../../../../../types";
+import type { HomeAssistant } from "../../../../../types";
 import "../../trigger/ha-automation-trigger";
 import type { ActionElement } from "../ha-automation-action-row";
 import { handleChangeEvent } from "../ha-automation-action-row";
@@ -78,7 +78,7 @@ export class HaWaitForTriggerAction
     `;
   }
 
-  private _timeoutChanged(ev: ValueChangedEvent<TimeChangedEvent>): void {
+  private _timeoutChanged(ev: CustomEvent<{ value: TimeChangedEvent }>): void {
     ev.stopPropagation();
     const value = ev.detail.value;
     fireEvent(this, "value-changed", {

src/panels/config/automation/add-automation-element-dialog.ts

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import { consume } from "@lit/context";
 import {
   mdiAppleKeyboardCommand,
@@ -43,6 +42,7 @@ import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-icon-button-prev";
 import "../../../components/ha-icon-next";
+import "../../../components/ha-md-divider";
 import "../../../components/ha-md-list";
 import "../../../components/ha-md-list-item";
 import type { PickerComboBoxItem } from "../../../components/ha-picker-combo-box";
@@ -114,7 +114,7 @@ import {
 } from "../../../data/trigger";
 import type { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
-import type { HomeAssistant, ValueChangedEvent } from "../../../types";
+import type { HomeAssistant } from "../../../types";
 import { isMac } from "../../../util/is_mac";
 import { showToast } from "../../../util/toast";
 import "./add-automation-element/ha-automation-add-from-target";
@@ -657,7 +657,10 @@ class DialogAddAutomationElement
                             .path=${mdiPlus}
                           ></ha-svg-icon>
                         </ha-md-list-item>
-                        <wa-divider></wa-divider>`
+                        <ha-md-divider
+                          role="separator"
+                          tabindex="-1"
+                        ></ha-md-divider>`
                     : nothing}
                   ${collections.map(
                     (collection, index) => html`
@@ -1749,7 +1752,7 @@ class DialogAddAutomationElement
     this.closeDialog();
   }
 
-  private _selected(ev: ValueChangedEvent<string>) {
+  private _selected(ev: CustomEvent<{ value: string }>) {
     let target: HassServiceTarget | undefined;
     if (
       this._tab === "targets" &&
@@ -1763,7 +1766,7 @@ class DialogAddAutomationElement
   }
 
   private _handleTargetSelected = (
-    ev: ValueChangedEvent<SingleHassServiceTarget>
+    ev: CustomEvent<{ value: SingleHassServiceTarget }>
   ) => {
     this._targetItems = undefined;
     this._loadItemsError = false;
@@ -2174,8 +2177,8 @@ class DialogAddAutomationElement
           width: var(--ha-space-6);
         }
 
-        wa-divider {
-          --spacing: 0;
+        ha-md-list-item.paste {
+          border-bottom: 1px solid var(--ha-color-border-neutral-quiet);
         }
 
         ha-svg-icon.plus {

src/panels/config/automation/ha-automation-editor.ts

@@ -77,12 +77,7 @@ import "../../../layouts/hass-subpage";
 import { KeyboardShortcutMixin } from "../../../mixins/keyboard-shortcut-mixin";
 import { PreventUnsavedMixin } from "../../../mixins/prevent-unsaved-mixin";
 import { haStyle } from "../../../resources/styles";
-import type {
-  Entries,
-  HomeAssistant,
-  Route,
-  ValueChangedEvent,
-} from "../../../types";
+import type { Entries, HomeAssistant, Route } from "../../../types";
 import { isMac } from "../../../util/is_mac";
 import { showToast } from "../../../util/toast";
 import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
@@ -758,7 +753,7 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
     }
   }
 
-  private _valueChanged(ev: ValueChangedEvent<AutomationConfig>) {
+  private _valueChanged(ev: CustomEvent<{ value: AutomationConfig }>) {
     ev.stopPropagation();
 
     if (this._config) {

src/panels/config/automation/ha-automation-picker.ts

@@ -47,10 +47,6 @@ import type {
 import "../../../components/data-table/ha-data-table-labels";
 import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-dropdown";
-import type {
-  HaDropdown,
-  HaDropdownSelectEvent,
-} from "../../../components/ha-dropdown";
 import "../../../components/ha-dropdown-item";
 import "../../../components/ha-fab";
 import "../../../components/ha-filter-blueprints";
@@ -61,6 +57,10 @@ import "../../../components/ha-filter-floor-areas";
 import "../../../components/ha-filter-labels";
 import "../../../components/ha-filter-voice-assistants";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-md-menu";
+import type { HaMdMenu } from "../../../components/ha-md-menu";
+import "../../../components/ha-md-menu-item";
+import type { HaMdMenuItem } from "../../../components/ha-md-menu-item";
 import "../../../components/ha-sub-menu";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-tooltip";
@@ -84,9 +84,9 @@ import { fullEntitiesContext } from "../../../data/context";
 import type { DataTableFilters } from "../../../data/data_table_filters";
 import {
   deserializeFilters,
+  serializeFilters,
   isFilterUsed,
   isRelatedItemsFilterUsed,
-  serializeFilters,
 } from "../../../data/data_table_filters";
 import { UNAVAILABLE } from "../../../data/entity/entity";
 import type {
@@ -111,16 +111,16 @@ import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant, Route, ServiceCallResponse } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { turnOnOffEntity } from "../../lovelace/common/entity/turn-on-off-entity";
-import { showAreaRegistryDetailDialog } from "../areas/show-dialog-area-registry-detail";
-import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
-import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
 import {
+  getEntityIdHiddenTableColumn,
   getAreaTableColumn,
   getCategoryTableColumn,
-  getEntityIdHiddenTableColumn,
   getLabelsTableColumn,
   getTriggeredAtTableColumn,
 } from "../common/data-table-columns";
+import { showAreaRegistryDetailDialog } from "../areas/show-dialog-area-registry-detail";
+import { showAssignCategoryDialog } from "../category/show-dialog-assign-category";
+import { showCategoryRegistryDetailDialog } from "../category/show-dialog-category-registry-detail";
 import { configSections } from "../ha-panel-config";
 import { showLabelDetailDialog } from "../labels/show-dialog-label-detail";
 import {
@@ -129,6 +129,7 @@ import {
 } from "../voice-assistants/expose/assistants-table-column";
 import { getAvailableAssistants } from "../voice-assistants/expose/available-assistants";
 import { showNewAutomationDialog } from "./show-dialog-new-automation";
+import type { HaDropdownSelectEvent } from "../../../components/ha-dropdown";
 
 type AutomationItem = AutomationEntity & {
   name: string;
@@ -222,7 +223,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
   })
   private _activeHiddenColumns?: string[];
 
-  @query("#overflow-menu") private _overflowMenu!: HaDropdown;
+  @query("#overflow-menu") private _overflowMenu!: HaMdMenu;
 
   private _sizeController = new ResizeController(this, {
     callback: (entries) => entries[0]?.contentRect.width,
@@ -232,8 +233,6 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     return getAvailableAssistants(this.cloudStatus, this.hass);
   }
 
-  private _openingOverflow = false;
-
   private _automations = memoizeOne(
     (
       automations: AutomationEntity[],
@@ -372,27 +371,16 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
   );
 
   private _showOverflowMenu = (ev) => {
-    if (this._overflowMenu.anchorElement === ev.target) {
-      this._overflowMenu.anchorElement = undefined;
+    if (
+      this._overflowMenu.open &&
+      ev.target === this._overflowMenu.anchorElement
+    ) {
+      this._overflowMenu.close();
       return;
     }
-    this._openingOverflow = true;
-    this._overflowMenu.anchorElement = ev.target;
     this._overflowAutomation = ev.target.automation;
-    this._overflowMenu.open = true;
-  };
-
-  private _overflowMenuOpened = () => {
-    this._openingOverflow = false;
-  };
-
-  private _overflowMenuClosed = () => {
-    // changing the anchorElement triggers a close event, ignore it
-    if (this._openingOverflow) {
-      return;
-    }
-
-    this._overflowMenu.anchorElement = undefined;
+    this._overflowMenu.anchorElement = ev.target;
+    this._overflowMenu.show();
   };
 
   protected hassSubscribe(): (UnsubscribeFunc | Promise<UnsubscribeFunc>)[] {
@@ -709,58 +697,74 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
           <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-fab>
       </hass-tabs-subpage-data-table>
-      <ha-dropdown
-        id="overflow-menu"
-        @wa-select=${this._handleOverflowAction}
-        @wa-after-show=${this._overflowMenuOpened}
-        @wa-after-hide=${this._overflowMenuClosed}
-      >
-        <ha-dropdown-item value="show_info">
-          <ha-svg-icon .path=${mdiInformationOutline} slot="icon"></ha-svg-icon>
-          ${this.hass.localize("ui.panel.config.automation.editor.show_info")}
-        </ha-dropdown-item>
+      <ha-md-menu id="overflow-menu" positioning="fixed">
+        <ha-md-menu-item .clickAction=${this._showInfo}>
+          <ha-svg-icon
+            .path=${mdiInformationOutline}
+            slot="start"
+          ></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize("ui.panel.config.automation.editor.show_info")}
+          </div>
+        </ha-md-menu-item>
 
-        <ha-dropdown-item value="show_settings">
-          <ha-svg-icon .path=${mdiCog} slot="icon"></ha-svg-icon>
-          ${this.hass.localize(
-            "ui.panel.config.automation.picker.show_settings"
-          )}
-        </ha-dropdown-item>
-        <ha-dropdown-item value="edit_category">
-          <ha-svg-icon .path=${mdiTag} slot="icon"></ha-svg-icon>
-          ${this.hass.localize(
-            `ui.panel.config.automation.picker.${this._overflowAutomation?.category ? "edit_category" : "assign_category"}`
-          )}
-        </ha-dropdown-item>
-        <ha-dropdown-item value="run_actions">
-          <ha-svg-icon .path=${mdiPlay} slot="icon"></ha-svg-icon>
-          ${this.hass.localize("ui.panel.config.automation.editor.run")}
-        </ha-dropdown-item>
-        <ha-dropdown-item value="show_trace">
-          <ha-svg-icon .path=${mdiTransitConnection} slot="icon"></ha-svg-icon>
-          ${this.hass.localize("ui.panel.config.automation.editor.show_trace")}
-        </ha-dropdown-item>
-        <wa-divider></wa-divider>
-        <ha-dropdown-item value="duplicate">
-          <ha-svg-icon .path=${mdiContentDuplicate} slot="icon"></ha-svg-icon>
-          ${this.hass.localize("ui.panel.config.automation.picker.duplicate")}
-        </ha-dropdown-item>
-        <ha-dropdown-item value="toggle">
+        <ha-md-menu-item .clickAction=${this._showSettings}>
+          <ha-svg-icon .path=${mdiCog} slot="start"></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize(
+              "ui.panel.config.automation.picker.show_settings"
+            )}
+          </div>
+        </ha-md-menu-item>
+        <ha-md-menu-item .clickAction=${this._editCategory}>
+          <ha-svg-icon .path=${mdiTag} slot="start"></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize(
+              `ui.panel.config.automation.picker.${this._overflowAutomation?.category ? "edit_category" : "assign_category"}`
+            )}
+          </div>
+        </ha-md-menu-item>
+        <ha-md-menu-item .clickAction=${this._runActions}>
+          <ha-svg-icon .path=${mdiPlay} slot="start"></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize("ui.panel.config.automation.editor.run")}
+          </div>
+        </ha-md-menu-item>
+        <ha-md-menu-item .clickAction=${this._showTrace}>
+          <ha-svg-icon .path=${mdiTransitConnection} slot="start"></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize(
+              "ui.panel.config.automation.editor.show_trace"
+            )}
+          </div>
+        </ha-md-menu-item>
+        <ha-md-divider role="separator" tabindex="-1"></ha-md-divider>
+        <ha-md-menu-item .clickAction=${this._duplicate}>
+          <ha-svg-icon .path=${mdiContentDuplicate} slot="start"></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize("ui.panel.config.automation.picker.duplicate")}
+          </div>
+        </ha-md-menu-item>
+        <ha-md-menu-item .clickAction=${this._toggle}>
           <ha-svg-icon
             .path=${this._overflowAutomation?.state === "off"
               ? mdiToggleSwitch
               : mdiToggleSwitchOffOutline}
-            slot="icon"
+            slot="start"
           ></ha-svg-icon>
-          ${this._overflowAutomation?.state === "off"
-            ? this.hass.localize("ui.panel.config.automation.editor.enable")
-            : this.hass.localize("ui.panel.config.automation.editor.disable")}
-        </ha-dropdown-item>
-        <ha-dropdown-item value="delete" variant="danger">
-          <ha-svg-icon .path=${mdiDelete} slot="icon"></ha-svg-icon>
-          ${this.hass.localize("ui.panel.config.automation.picker.delete")}
-        </ha-dropdown-item>
-      </ha-dropdown>
+          <div slot="headline">
+            ${this._overflowAutomation?.state === "off"
+              ? this.hass.localize("ui.panel.config.automation.editor.enable")
+              : this.hass.localize("ui.panel.config.automation.editor.disable")}
+          </div>
+        </ha-md-menu-item>
+        <ha-md-menu-item .clickAction=${this._deleteConfirm} class="warning">
+          <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
+          <div slot="headline">
+            ${this.hass.localize("ui.panel.config.automation.picker.delete")}
+          </div>
+        </ha-md-menu-item>
+      </ha-md-menu>
     `;
   }
 
@@ -897,59 +901,33 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     this._applyFilters();
   }
 
-  private _handleOverflowAction = (ev: HaDropdownSelectEvent) => {
-    const action = ev.detail.item.value;
-
-    if (!action || !this._overflowAutomation) {
-      return;
-    }
-
-    switch (action) {
-      case "show_info":
-        this._showInfo(this._overflowAutomation);
-        break;
-      case "show_settings":
-        this._showSettings(this._overflowAutomation);
-        break;
-      case "edit_category":
-        this._editCategory(this._overflowAutomation);
-        break;
-      case "run_actions":
-        this._runActions(this._overflowAutomation);
-        break;
-      case "show_trace":
-        this._showTrace(this._overflowAutomation);
-        break;
-      case "toggle":
-        this._toggle(this._overflowAutomation);
-        break;
-      case "delete":
-        this._deleteConfirm(this._overflowAutomation);
-        break;
-      case "duplicate":
-        this._duplicate(this._overflowAutomation);
-        break;
-    }
+  private _showInfo = (item: HaMdMenuItem) => {
+    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
+      .automation;
+    fireEvent(this, "hass-more-info", { entityId: automation.entity_id });
   };
 
-  private _showInfo = (automation: AutomationItem) => {
-    fireEvent(this, "hass-more-info", {
-      entityId: automation.entity_id,
-    });
-  };
+  private _showSettings = (item: HaMdMenuItem) => {
+    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
+      .automation;
 
-  private _showSettings = (automation: AutomationItem) => {
     fireEvent(this, "hass-more-info", {
       entityId: automation.entity_id,
       view: "settings",
     });
   };
 
-  private _runActions = (automation: AutomationItem) => {
+  private _runActions = (item: HaMdMenuItem) => {
+    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
+      .automation;
+
     triggerAutomationActions(this.hass, automation.entity_id);
   };
 
-  private _editCategory = (automation: AutomationItem) => {
+  private _editCategory = (item: HaMdMenuItem) => {
+    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
+      .automation;
+
     const entityReg = this._entityReg.find(
       (reg) => reg.entity_id === automation.entity_id
     );
@@ -970,7 +948,10 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     });
   };
 
-  private _showTrace = (automation: AutomationItem) => {
+  private _showTrace = (item: HaMdMenuItem) => {
+    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
+      .automation;
+
     if (!automation.attributes.id) {
       showAlertDialog(this, {
         text: this.hass.localize(
@@ -984,14 +965,20 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     );
   };
 
-  private _toggle = async (automation: AutomationItem): Promise<void> => {
+  private _toggle = async (item: HaMdMenuItem): Promise<void> => {
+    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
+      .automation;
+
     const service = automation.state === "off" ? "turn_on" : "turn_off";
     await this.hass.callService("automation", service, {
       entity_id: automation.entity_id,
     });
   };
 
-  private _deleteConfirm = async (automation: AutomationItem) => {
+  private _deleteConfirm = async (item: HaMdMenuItem) => {
+    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
+      .automation;
+
     showConfirmationDialog(this, {
       title: this.hass.localize(
         "ui.panel.config.automation.picker.delete_confirm_title"
@@ -1007,9 +994,9 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     });
   };
 
-  private async _delete(automation: AutomationItem) {
+  private async _delete(automation) {
     try {
-      await deleteAutomation(this.hass, automation.attributes.id!);
+      await deleteAutomation(this.hass, automation.attributes.id);
       this._selected = this._selected.filter(
         (entityId) => entityId !== automation.entity_id
       );
@@ -1028,11 +1015,14 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _duplicate = async (automation: AutomationItem) => {
+  private _duplicate = async (item: HaMdMenuItem) => {
+    const automation = ((item.parentElement as HaMdMenu)!.anchorElement as any)!
+      .automation;
+
     try {
       const config = await fetchAutomationFileConfig(
         this.hass,
-        automation.attributes.id!
+        automation.attributes.id
       );
       duplicateAutomation(config);
     } catch (err: any) {

src/panels/config/automation/manual-automation-editor.ts

@@ -54,7 +54,7 @@ import {
 import { configEntriesContext } from "../../../data/context";
 import { getActionType, type Action } from "../../../data/script";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import type { HomeAssistant, ValueChangedEvent } from "../../../types";
+import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import "./action/ha-automation-action";
@@ -383,7 +383,7 @@ export class HaManualAutomationEditor extends SubscribeMixin(LitElement) {
     this._sidebarElement?.focus();
   }
 
-  private _sidebarConfigChanged(ev: ValueChangedEvent<SidebarConfig>) {
+  private _sidebarConfigChanged(ev: CustomEvent<{ value: SidebarConfig }>) {
     ev.stopPropagation();
     if (!this._sidebarConfig) {
       return;
@@ -438,6 +438,7 @@ export class HaManualAutomationEditor extends SubscribeMixin(LitElement) {
   }
 
   private _saveAutomation() {
+    this.triggerCloseSidebar();
     fireEvent(this, "save-automation");
   }
 

src/panels/config/automation/styles.ts

@@ -40,6 +40,9 @@ export const rowStyles = css`
   .warning ul {
     margin: 4px 0;
   }
+  ha-md-menu-item > ha-svg-icon {
+    --mdc-icon-size: 24px;
+  }
   ha-tooltip {
     cursor: default;
   }
@@ -269,4 +272,7 @@ export const overflowStyles = css`
       display: none;
     }
   }
+  ha-md-menu-item {
+    --mdc-icon-size: 24px;
+  }
 `;