Match original more closely

.github/workflows/relative-ci.yaml

@@ -17,7 +17,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@feb19ddc698445db27401f1490f6ac182da0816f # v3.2.0
+        uses: relative-ci/agent-action@8504826a02078b05756e4c07e380023cc2c4274a # v3.1.0
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.github/workflows/release.yaml

@@ -55,7 +55,7 @@ jobs:
           script/release
 
       - name: Upload release assets
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
+        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
         with:
           files: |
             dist/*.whl
@@ -108,7 +108,7 @@ jobs:
       - name: Tar folder
         run: tar -czf landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz -C landing-page/dist .
       - name: Upload release asset
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
+        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
         with:
           files: landing-page/home_assistant_frontend_landingpage-${{ github.event.release.tag_name }}.tar.gz
 
@@ -137,6 +137,6 @@ jobs:
       - name: Tar folder
         run: tar -czf hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz -C hassio/build .
       - name: Upload release asset
-        uses: softprops/action-gh-release@5be0e66d93ac7ed76da52eca8bb058f665c3a5fe # v2.4.2
+        uses: softprops/action-gh-release@6da8fa9354ddfdc4aeace5fc48d7f679b5214090 # v2.4.1
         with:
           files: hassio/home_assistant_frontend_supervisor-${{ github.event.release.tag_name }}.tar.gz

.gitignore

@@ -5,6 +5,7 @@
 build/
 dist/
 /hass_frontend/
+/logs/dist/
 /translations/
 
 # yarn

build-scripts/bundle.cjs

@@ -327,6 +327,20 @@ module.exports.config = {
     };
   },
 
+  logs({ isProdBuild, latestBuild, isStatsBuild }) {
+    return {
+      name: "logs" + nameSuffix(latestBuild),
+      entry: {
+        entrypoint: path.resolve(paths.logs_dir, "src/entrypoint.ts"),
+      },
+      outputPath: outputPath(paths.logs_output_root, latestBuild),
+      publicPath: publicPath(latestBuild),
+      isProdBuild,
+      latestBuild,
+      isStatsBuild,
+    };
+  },
+
   landingPage({ isProdBuild, latestBuild }) {
     return {
       name: "landing-page" + nameSuffix(latestBuild),

build-scripts/gulp/clean.js

@@ -39,6 +39,13 @@ gulp.task(
   )
 );
 
+gulp.task(
+  "clean-logs",
+  gulp.parallel("clean-translations", async () =>
+    deleteSync([paths.logs_output_root, paths.build_dir])
+  )
+);
+
 gulp.task(
   "clean-landing-page",
   gulp.parallel("clean-translations", async () =>

build-scripts/gulp/entry-html.js

@@ -245,6 +245,24 @@ gulp.task(
   )
 );
 
+const LOGS_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
+
+gulp.task(
+  "gen-pages-logs-dev",
+  genPagesDevTask(LOGS_PAGE_ENTRIES, paths.logs_dir, paths.logs_output_root)
+);
+
+gulp.task(
+  "gen-pages-logs-prod",
+  genPagesProdTask(
+    LOGS_PAGE_ENTRIES,
+    paths.logs_dir,
+    paths.logs_output_root,
+    paths.logs_output_latest,
+    paths.logs_output_es5
+  )
+);
+
 const LANDING_PAGE_PAGE_ENTRIES = { "index.html": ["entrypoint"] };
 
 gulp.task(

build-scripts/gulp/gather-static.js

@@ -202,6 +202,16 @@ gulp.task("copy-static-gallery", async () => {
   copyMdiIcons(paths.gallery_output_static);
 });
 
+gulp.task("copy-static-logs", async () => {
+  // Copy app static files
+  fs.copySync(polyPath("public/static"), paths.logs_output_static);
+
+  copyFonts(paths.logs_output_static);
+  copyTranslations(paths.logs_output_static);
+  copyLocaleData(paths.logs_output_static);
+  copyMdiIcons(paths.logs_output_static);
+});
+
 gulp.task("copy-static-landing-page", async () => {
   // Copy landing-page static files
   fs.copySync(

build-scripts/gulp/index.mjs

@@ -7,6 +7,7 @@ import "./download-translations.js";
 import "./entry-html.js";
 import "./fetch-nightly-translations.js";
 import "./gallery.js";
+import "./logs.js";
 import "./gather-static.js";
 import "./gen-icons-json.js";
 import "./hassio.js";

build-scripts/gulp/logs.js

@@ -0,0 +1,39 @@
+import gulp from "gulp";
+import "./clean.js";
+import "./entry-html.js";
+import "./gather-static.js";
+import "./gen-icons-json.js";
+import "./translations.js";
+import "./rspack.js";
+
+gulp.task(
+  "develop-logs",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "development";
+    },
+    "clean-logs",
+    gulp.parallel(
+      "gen-icons-json",
+      "gen-pages-logs-dev",
+      "build-translations",
+      "build-locale-data"
+    ),
+    "copy-static-logs",
+    "rspack-dev-server-logs"
+  )
+);
+
+gulp.task(
+  "build-logs",
+  gulp.series(
+    async function setEnv() {
+      process.env.NODE_ENV = "production";
+    },
+    "clean-logs",
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
+    "copy-static-logs",
+    "rspack-prod-logs",
+    "gen-pages-logs-prod"
+  )
+);

build-scripts/gulp/rspack.js

@@ -15,6 +15,7 @@ import {
   createGalleryConfig,
   createHassioConfig,
   createLandingPageConfig,
+  createLogsConfig,
 } from "../rspack.cjs";
 
 const bothBuilds = (createConfigFunc, params) => [
@@ -204,6 +205,25 @@ gulp.task("rspack-prod-gallery", () =>
   )
 );
 
+gulp.task("rspack-dev-server-logs", () =>
+  runDevServer({
+    compiler: rspack(
+      createLogsConfig({ isProdBuild: false, latestBuild: true })
+    ),
+    contentBase: paths.logs_output_root,
+    port: 5647,
+  })
+);
+
+gulp.task("rspack-prod-logs", () =>
+  prodBuild(
+    bothBuilds(createLogsConfig, {
+      isProdBuild: true,
+      isStatsBuild: env.isStatsBuild(),
+    })
+  )
+);
+
 gulp.task("rspack-watch-landing-page", () => {
   // This command will run forever because we don't close compiler
   rspack(

build-scripts/paths.cjs

@@ -59,5 +59,11 @@ module.exports = {
   hassio_output_es5: path.resolve(__dirname, "../hassio/build/frontend_es5"),
   hassio_publicPath: "/api/hassio/app",
 
+  logs_dir: path.resolve(__dirname, "../logs"),
+  logs_output_root: path.resolve(__dirname, "../logs/dist"),
+  logs_output_static: path.resolve(__dirname, "../logs/dist/static"),
+  logs_output_latest: path.resolve(__dirname, "../logs/dist/frontend_latest"),
+  logs_output_es5: path.resolve(__dirname, "../logs/dist/frontend_es5"),
+
   translations_src: path.resolve(__dirname, "../src/translations"),
 };

build-scripts/rspack.cjs

@@ -260,6 +260,7 @@ const createRspackConfig = ({
       ),
     },
     experiments: {
+      layers: true,
       outputModule: true,
     },
   };
@@ -301,6 +302,11 @@ const createHassioConfig = ({
 const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
 
+const createLogsConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createRspackConfig(
+    bundle.config.logs({ isProdBuild, latestBuild, isStatsBuild })
+  );
+
 const createLandingPageConfig = ({ isProdBuild, latestBuild }) =>
   createRspackConfig(bundle.config.landingPage({ isProdBuild, latestBuild }));
 
@@ -310,6 +316,7 @@ module.exports = {
   createCastConfig,
   createHassioConfig,
   createGalleryConfig,
+  createLogsConfig,
   createRspackConfig,
   createLandingPageConfig,
 };

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

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

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

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

logs/.dockerignore

@@ -0,0 +1,9 @@
+dist/
+src/
+node_modules/
+*.md
+.git/
+.gitignore
+docker-compose.yaml
+backend/ha-logs-proxy
+backend/README.md

logs/Dockerfile

@@ -0,0 +1,47 @@
+ARG BUILD_FROM
+FROM $BUILD_FROM AS base
+
+# Install dependencies
+RUN apk add --no-cache \
+    bash \
+    jq \
+    curl \
+    go
+
+# Install Home Assistant CLI
+ARG BUILD_ARCH
+ARG CLI_VERSION
+RUN curl -Lso /usr/bin/ha \
+    "https://github.com/home-assistant/cli/releases/download/${CLI_VERSION}/ha_${BUILD_ARCH}" \
+    && chmod a+x /usr/bin/ha
+
+# Build Go backend
+WORKDIR /app
+COPY backend/go.mod backend/go.sum* ./
+RUN go mod download || true
+
+COPY backend/*.go ./
+RUN CGO_ENABLED=0 go build -o ha-logs-proxy .
+
+# Final stage
+FROM $BUILD_FROM
+
+# Install runtime dependencies
+RUN apk add --no-cache \
+    bash \
+    jq \
+    curl
+
+# Copy HA CLI from base
+COPY --from=base /usr/bin/ha /usr/bin/ha
+
+# Copy Go backend
+COPY --from=base /app/ha-logs-proxy /usr/bin/ha-logs-proxy
+
+WORKDIR /root
+
+# Expose port for backend (5642 = LOGB)
+EXPOSE 5642
+
+# Default command
+CMD ["/usr/bin/ha-logs-proxy"]

logs/README.md

@@ -0,0 +1,113 @@
+# Home Assistant CLI Docker Container
+
+A simple multi-architecture Docker container with the Home Assistant CLI installed.
+
+## Development Usage
+
+The CLI container is integrated into the `script/develop-logs` workflow. Both flags are required:
+
+```bash
+# Start dev server with CLI container (requires remote_api add-on)
+script/develop-logs -c http://192.168.1.2 -t your_token_here
+```
+
+When started with credentials, the container runs a Go backend that proxies HA CLI logs commands. The backend API is available at `http://localhost:5642`.
+
+**Frontend Features:**
+- Dropdown menu to select log provider (core, supervisor, host, audio, dns, multicast)
+- Follow mode with WebSocket streaming (`ha core logs --follow`)
+- Manual refresh to fetch latest logs
+- Download logs as text file
+- Line wrapping toggle
+- Auto-scroll to bottom when following
+- Error display with retry
+
+**API Endpoints:**
+
+```bash
+# List all endpoints
+curl http://localhost:5642/api/logs
+
+# Get static logs
+curl http://localhost:5642/api/logs/core
+curl http://localhost:5642/api/logs/supervisor
+
+# Health check
+curl http://localhost:5642/health
+
+# WebSocket streaming (requires websocat or browser)
+websocat ws://localhost:5642/api/logs/core/follow
+```
+
+You can also execute HA CLI commands directly:
+
+```bash
+docker exec -it ha-cli-dev ha info
+docker exec -it ha-cli-dev ha supervisor info
+```
+
+Stop everything with Ctrl+C (both the dev server and backend will stop automatically).
+
+### Getting API Token
+
+1. Install the [remote_api add-on](https://github.com/home-assistant/addons/tree/master/remote_api) in Home Assistant
+2. Check the add-on logs for the generated token
+3. Use the token with the `-t` flag
+
+## Build
+
+### Local Build (Single Architecture)
+
+```bash
+docker build \
+  --build-arg BUILD_FROM=alpine:3.22 \
+  --build-arg BUILD_ARCH=amd64 \
+  --build-arg CLI_VERSION=4.42.0 \
+  -t ha-cli:local \
+  .
+```
+
+### Multi-Architecture Build
+
+The `build.yaml` configuration is designed for use with Home Assistant's build system. For local multi-arch builds, use Docker Buildx:
+
+```bash
+docker buildx build \
+  --platform linux/amd64,linux/arm64,linux/arm/v7 \
+  --build-arg BUILD_FROM=alpine:3.22 \
+  --build-arg CLI_VERSION=4.42.0 \
+  -t ha-cli:latest \
+  .
+```
+
+## Usage
+
+### Run CLI Commands
+
+```bash
+docker run --rm ha-cli:local ha help
+docker run --rm ha-cli:local ha supervisor info
+```
+
+### Interactive Shell
+
+```bash
+docker run -it --rm ha-cli:local
+# Then run: ha <command>
+```
+
+### With Docker Compose
+
+```bash
+docker compose run --rm ha-cli ha help
+```
+
+## Update CLI Version
+
+Edit the `CLI_VERSION` in `build.yaml` or pass it as a build argument:
+
+```bash
+docker build --build-arg CLI_VERSION=4.43.0 ...
+```
+
+Check for latest versions at: https://github.com/home-assistant/cli/releases

logs/backend/.gitignore

@@ -0,0 +1 @@
+ha-logs-proxy

logs/backend/README.md

@@ -0,0 +1,108 @@
+# HA Logs Proxy Backend
+
+A Go backend that proxies Home Assistant CLI logs commands through a secure HTTP API.
+
+## Features
+
+- Only allows `logs` commands (security-restricted)
+- GET endpoints for static logs
+- WebSocket endpoints for streaming logs (follow mode)
+- CORS enabled for frontend integration
+- Simple JSON API
+
+## API Endpoints
+
+### GET /api/logs
+
+List all available endpoints.
+
+### GET /api/logs/core
+
+Get Home Assistant core logs.
+
+### GET /api/logs/supervisor
+
+Get Supervisor logs.
+
+### GET /api/logs/host
+
+Get host system logs.
+
+### GET /api/logs/audio
+
+Get audio logs.
+
+### GET /api/logs/dns
+
+Get DNS logs.
+
+### GET /api/logs/multicast
+
+Get multicast logs.
+
+### GET /health
+
+Health check endpoint.
+
+**Response format (all log endpoints):**
+
+```json
+{
+  "output": "log content here...",
+  "error": "error message if any"
+}
+```
+
+### WS /api/logs/*/follow
+
+WebSocket endpoints for streaming logs in real-time.
+
+Available endpoints:
+- `WS /api/logs/core/follow` - Stream core logs
+- `WS /api/logs/supervisor/follow` - Stream supervisor logs
+- `WS /api/logs/host/follow` - Stream host logs
+- `WS /api/logs/audio/follow` - Stream audio logs
+- `WS /api/logs/dns/follow` - Stream DNS logs
+- `WS /api/logs/multicast/follow` - Stream multicast logs
+
+Each WebSocket message contains a single log line as plain text. The connection streams output from `ha {component} logs --follow` command.
+
+## Running Locally
+
+```bash
+cd backend
+go run main.go
+```
+
+The server starts on port 5642 (LOGB) by default. Override with `PORT` environment variable:
+
+```bash
+PORT=3000 go run main.go
+```
+
+## Building
+
+```bash
+go build -o ha-logs-proxy
+./ha-logs-proxy
+```
+
+## Testing
+
+```bash
+# List endpoints
+curl http://localhost:5642/api/logs
+
+# Get core logs
+curl http://localhost:5642/api/logs/core
+
+# Get supervisor logs
+curl http://localhost:5642/api/logs/supervisor
+
+# Health check
+curl http://localhost:5642/health
+```
+
+## Docker Integration
+
+The backend is designed to run in the same container as the HA CLI, sharing access to the `ha` command.

logs/backend/go.mod

@@ -0,0 +1,5 @@
+module github.com/home-assistant/frontend/logs/backend
+
+go 1.24
+
+require github.com/gorilla/websocket v1.5.3

logs/backend/go.sum

@@ -0,0 +1,2 @@
+github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
+github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=

logs/backend/main.go

@@ -0,0 +1,372 @@
+package main
+
+import (
+	"bufio"
+	"encoding/json"
+	"log"
+	"net/http"
+	"os"
+	"os/exec"
+
+	"github.com/gorilla/websocket"
+)
+
+type LogsResponse struct {
+	Output string `json:"output"`
+	Error  string `json:"error,omitempty"`
+}
+
+var upgrader = websocket.Upgrader{
+	ReadBufferSize:  1024,
+	WriteBufferSize: 1024,
+	CheckOrigin: func(r *http.Request) bool {
+		return true // Allow all origins (CORS)
+	},
+}
+
+func executeHACommand(args []string) (string, error) {
+	cmd := exec.Command("ha", args...)
+	output, err := cmd.CombinedOutput()
+	return string(output), err
+}
+
+func streamHACommandToWS(conn *websocket.Conn, args []string) error {
+	cmd := exec.Command("ha", args...)
+
+	// Get stdout pipe
+	stdout, err := cmd.StdoutPipe()
+	if err != nil {
+		return err
+	}
+
+	// Start command
+	if err := cmd.Start(); err != nil {
+		return err
+	}
+
+	// Read and send output line by line
+	scanner := bufio.NewScanner(stdout)
+	for scanner.Scan() {
+		line := scanner.Text()
+		if err := conn.WriteMessage(websocket.TextMessage, []byte(line)); err != nil {
+			cmd.Process.Kill()
+			return err
+		}
+	}
+
+	// Wait for command to finish
+	if err := cmd.Wait(); err != nil {
+		return err
+	}
+
+	return scanner.Err()
+}
+
+func handleCoreLogs(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodGet {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	// Execute ha core logs command
+	output, err := executeHACommand([]string{"core", "logs"})
+
+	response := LogsResponse{
+		Output: output,
+	}
+
+	if err != nil {
+		response.Error = err.Error()
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+	w.Header().Set("Access-Control-Allow-Methods", "GET")
+
+	if err := json.NewEncoder(w).Encode(response); err != nil {
+		log.Printf("Error encoding response: %v", err)
+	}
+}
+
+func handleSupervisorLogs(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodGet {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	output, err := executeHACommand([]string{"supervisor", "logs"})
+
+	response := LogsResponse{
+		Output: output,
+	}
+
+	if err != nil {
+		response.Error = err.Error()
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+	w.Header().Set("Access-Control-Allow-Methods", "GET")
+
+	json.NewEncoder(w).Encode(response)
+}
+
+func handleHostLogs(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodGet {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	output, err := executeHACommand([]string{"host", "logs"})
+
+	response := LogsResponse{
+		Output: output,
+	}
+
+	if err != nil {
+		response.Error = err.Error()
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+	w.Header().Set("Access-Control-Allow-Methods", "GET")
+
+	json.NewEncoder(w).Encode(response)
+}
+
+func handleAudioLogs(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodGet {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	output, err := executeHACommand([]string{"audio", "logs"})
+
+	response := LogsResponse{
+		Output: output,
+	}
+
+	if err != nil {
+		response.Error = err.Error()
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+	w.Header().Set("Access-Control-Allow-Methods", "GET")
+
+	json.NewEncoder(w).Encode(response)
+}
+
+func handleDNSLogs(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodGet {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	output, err := executeHACommand([]string{"dns", "logs"})
+
+	response := LogsResponse{
+		Output: output,
+	}
+
+	if err != nil {
+		response.Error = err.Error()
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+	w.Header().Set("Access-Control-Allow-Methods", "GET")
+
+	json.NewEncoder(w).Encode(response)
+}
+
+func handleMulticastLogs(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodGet {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	output, err := executeHACommand([]string{"multicast", "logs"})
+
+	response := LogsResponse{
+		Output: output,
+	}
+
+	if err != nil {
+		response.Error = err.Error()
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+	w.Header().Set("Access-Control-Allow-Methods", "GET")
+
+	json.NewEncoder(w).Encode(response)
+}
+
+func handleCoreLogsFollow(w http.ResponseWriter, r *http.Request) {
+	conn, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		log.Printf("WebSocket upgrade failed: %v", err)
+		return
+	}
+	defer conn.Close()
+
+	log.Println("Client connected to core logs follow")
+
+	if err := streamHACommandToWS(conn, []string{"core", "logs", "--follow"}); err != nil {
+		log.Printf("Error streaming core logs: %v", err)
+	}
+
+	log.Println("Client disconnected from core logs follow")
+}
+
+func handleSupervisorLogsFollow(w http.ResponseWriter, r *http.Request) {
+	conn, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		log.Printf("WebSocket upgrade failed: %v", err)
+		return
+	}
+	defer conn.Close()
+
+	log.Println("Client connected to supervisor logs follow")
+
+	if err := streamHACommandToWS(conn, []string{"supervisor", "logs", "--follow"}); err != nil {
+		log.Printf("Error streaming supervisor logs: %v", err)
+	}
+
+	log.Println("Client disconnected from supervisor logs follow")
+}
+
+func handleHostLogsFollow(w http.ResponseWriter, r *http.Request) {
+	conn, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		log.Printf("WebSocket upgrade failed: %v", err)
+		return
+	}
+	defer conn.Close()
+
+	log.Println("Client connected to host logs follow")
+
+	if err := streamHACommandToWS(conn, []string{"host", "logs", "--follow"}); err != nil {
+		log.Printf("Error streaming host logs: %v", err)
+	}
+
+	log.Println("Client disconnected from host logs follow")
+}
+
+func handleAudioLogsFollow(w http.ResponseWriter, r *http.Request) {
+	conn, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		log.Printf("WebSocket upgrade failed: %v", err)
+		return
+	}
+	defer conn.Close()
+
+	log.Println("Client connected to audio logs follow")
+
+	if err := streamHACommandToWS(conn, []string{"audio", "logs", "--follow"}); err != nil {
+		log.Printf("Error streaming audio logs: %v", err)
+	}
+
+	log.Println("Client disconnected from audio logs follow")
+}
+
+func handleDNSLogsFollow(w http.ResponseWriter, r *http.Request) {
+	conn, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		log.Printf("WebSocket upgrade failed: %v", err)
+		return
+	}
+	defer conn.Close()
+
+	log.Println("Client connected to dns logs follow")
+
+	if err := streamHACommandToWS(conn, []string{"dns", "logs", "--follow"}); err != nil {
+		log.Printf("Error streaming dns logs: %v", err)
+	}
+
+	log.Println("Client disconnected from dns logs follow")
+}
+
+func handleMulticastLogsFollow(w http.ResponseWriter, r *http.Request) {
+	conn, err := upgrader.Upgrade(w, r, nil)
+	if err != nil {
+		log.Printf("WebSocket upgrade failed: %v", err)
+		return
+	}
+	defer conn.Close()
+
+	log.Println("Client connected to multicast logs follow")
+
+	if err := streamHACommandToWS(conn, []string{"multicast", "logs", "--follow"}); err != nil {
+		log.Printf("Error streaming multicast logs: %v", err)
+	}
+
+	log.Println("Client disconnected from multicast logs follow")
+}
+
+func listEndpoints(w http.ResponseWriter, r *http.Request) {
+	if r.Method != http.MethodGet {
+		http.Error(w, "Method not allowed", http.StatusMethodNotAllowed)
+		return
+	}
+
+	endpoints := map[string]string{
+		"core":       "/api/logs/core",
+		"supervisor": "/api/logs/supervisor",
+		"host":       "/api/logs/host",
+		"audio":      "/api/logs/audio",
+		"dns":        "/api/logs/dns",
+		"multicast":  "/api/logs/multicast",
+		"health":     "/health",
+	}
+
+	w.Header().Set("Content-Type", "application/json")
+	w.Header().Set("Access-Control-Allow-Origin", "*")
+	json.NewEncoder(w).Encode(endpoints)
+}
+
+func main() {
+	port := os.Getenv("PORT")
+	if port == "" {
+		port = "5642"
+	}
+
+	// Register handlers
+	http.HandleFunc("/api/logs", listEndpoints)
+	http.HandleFunc("/api/logs/core", handleCoreLogs)
+	http.HandleFunc("/api/logs/supervisor", handleSupervisorLogs)
+	http.HandleFunc("/api/logs/host", handleHostLogs)
+	http.HandleFunc("/api/logs/audio", handleAudioLogs)
+	http.HandleFunc("/api/logs/dns", handleDNSLogs)
+	http.HandleFunc("/api/logs/multicast", handleMulticastLogs)
+
+	// WebSocket follow endpoints
+	http.HandleFunc("/api/logs/core/follow", handleCoreLogsFollow)
+	http.HandleFunc("/api/logs/supervisor/follow", handleSupervisorLogsFollow)
+	http.HandleFunc("/api/logs/host/follow", handleHostLogsFollow)
+	http.HandleFunc("/api/logs/audio/follow", handleAudioLogsFollow)
+	http.HandleFunc("/api/logs/dns/follow", handleDNSLogsFollow)
+	http.HandleFunc("/api/logs/multicast/follow", handleMulticastLogsFollow)
+
+	http.HandleFunc("/health", func(w http.ResponseWriter, r *http.Request) {
+		w.WriteHeader(http.StatusOK)
+		w.Write([]byte("OK"))
+	})
+
+	log.Printf("Starting HA Logs Proxy on port %s", port)
+	log.Printf("Available endpoints:")
+	log.Printf("  GET /api/logs - List all endpoints")
+	log.Printf("  GET /api/logs/core - Core logs")
+	log.Printf("  GET /api/logs/supervisor - Supervisor logs")
+	log.Printf("  GET /api/logs/host - Host logs")
+	log.Printf("  GET /api/logs/audio - Audio logs")
+	log.Printf("  GET /api/logs/dns - DNS logs")
+	log.Printf("  GET /api/logs/multicast - Multicast logs")
+	log.Printf("  WS  /api/logs/*/follow - Stream logs (WebSocket)")
+	log.Printf("  GET /health - Health check")
+
+	if err := http.ListenAndServe(":"+port, nil); err != nil {
+		log.Fatalf("Server failed to start: %v", err)
+	}
+}

logs/build.yaml

@@ -0,0 +1,19 @@
+---
+image: ghcr.io/home-assistant/{arch}-hassio-cli
+build_from:
+  aarch64: ghcr.io/home-assistant/aarch64-base:3.22
+  armhf: ghcr.io/home-assistant/armhf-base:3.22
+  armv7: ghcr.io/home-assistant/armv7-base:3.22
+  amd64: ghcr.io/home-assistant/amd64-base:3.22
+  i386: ghcr.io/home-assistant/i386-base:3.22
+args:
+  CLI_VERSION: 4.42.0
+cosign:
+  enabled: true
+  repository_name: home-assistant/cli
+  repository_owner: home-assistant
+labels:
+  org.opencontainers.image.title: Home Assistant CLI
+  org.opencontainers.image.description: Home Assistant CLI for container environments
+  org.opencontainers.image.source: https://github.com/home-assistant/cli
+  org.opencontainers.image.licenses: Apache-2.0

logs/docker-compose.yaml

@@ -0,0 +1,16 @@
+---
+services:
+  ha-cli:
+    build:
+      context: .
+      args:
+        BUILD_FROM: alpine:3.22
+        BUILD_ARCH: amd64
+        CLI_VERSION: 4.42.0
+    image: ha-cli:local
+    ports:
+      - "5642:5642"
+    environment:
+      - PORT=5642
+    stdin_open: true
+    tty: true

logs/src/auto-theme.ts

@@ -0,0 +1,34 @@
+import { darkSemanticColorStyles } from "../../src/resources/theme/color/semantic.globals";
+import { darkColorStyles } from "../../src/resources/theme/color/color.globals";
+
+const mql = matchMedia("(prefers-color-scheme: dark)");
+
+function applyTheme(dark: boolean) {
+  const el = document.documentElement;
+  if (dark) {
+    el.setAttribute("dark", "");
+  } else {
+    el.removeAttribute("dark");
+  }
+}
+
+// Add dark theme styles wrapped in media query
+// This runs after append-ha-style has loaded the base theme
+const styleElement = document.createElement("style");
+styleElement.id = "auto-theme-dark";
+styleElement.textContent = `
+  @media (prefers-color-scheme: dark) {
+    ${darkSemanticColorStyles.cssText}
+    ${darkColorStyles.cssText}
+  }
+`;
+// Append to head to ensure it comes after base styles
+document.head.appendChild(styleElement);
+
+// Apply theme on initial load
+applyTheme(mql.matches);
+
+// Listen for theme changes
+mql.addEventListener("change", (e) => {
+  applyTheme(e.matches);
+});

logs/src/entrypoint.ts

@@ -0,0 +1,8 @@
+import "./logs-app";
+
+// Load base styles first, then apply theme
+import("../../src/resources/append-ha-style").then(() => {
+  import("./auto-theme");
+});
+
+document.body.appendChild(document.createElement("logs-app"));

logs/src/html/index.html.template

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#03a9f4" />
+    <meta name="color-scheme" content="dark light" />
+    <title>Home Assistant Logs</title>
+    <% for (const entry of latestEntryJS) { %>
+      <script type="module" src="<%= entry %>"></script>
+    <% } %>
+    <style>
+      html {
+        background-color: var(--primary-background-color, #fafafa);
+        color: var(--primary-text-color, #212121);
+      }
+      @media (prefers-color-scheme: dark) {
+        html {
+          background-color: var(--primary-background-color, #111111);
+          color: var(--primary-text-color, #e1e1e1);
+        }
+      }
+      body {
+        font-family: Roboto, Noto, sans-serif;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-weight: 400;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body></body>
+</html>

logs/src/logs-app.ts

@@ -0,0 +1,24 @@
+import { LitElement, css, html } from "lit";
+import { customElement } from "lit/decorators";
+import "./logs-viewer";
+
+@customElement("logs-app")
+class LogsApp extends LitElement {
+  render() {
+    return html`<logs-viewer></logs-viewer>`;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      min-height: 100vh;
+      background-color: var(--primary-background-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "logs-app": LogsApp;
+  }
+}

logs/src/logs-viewer.ts

@@ -0,0 +1,538 @@
+import {
+  mdiArrowCollapseDown,
+  mdiChevronDown,
+  mdiCircle,
+  mdiDownload,
+  mdiRefresh,
+  mdiWrap,
+  mdiWrapDisabled,
+} from "@mdi/js";
+import type { CSSResultGroup } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+// eslint-disable-next-line import/extensions
+import { IntersectionController } from "@lit-labs/observers/intersection-controller.js";
+import "../../src/components/ha-ansi-to-html";
+import type { HaAnsiToHtml } from "../../src/components/ha-ansi-to-html";
+import "../../src/components/ha-button";
+import "../../src/components/ha-button-menu";
+import "../../src/components/ha-card";
+import "../../src/components/ha-icon-button";
+import "../../src/components/ha-list-item";
+import "../../src/components/ha-spinner";
+import "../../src/components/ha-svg-icon";
+
+// Data types
+interface LogProvider {
+  key: string;
+  name: string;
+}
+
+@customElement("logs-viewer")
+export class LogsViewer extends LitElement {
+  @property({ type: Boolean }) public narrow = false;
+
+  @state() private _selectedLogProvider?: string;
+
+  @state() private _logProviders: LogProvider[] = [];
+
+  @state() private _loading = false;
+
+  @state() private _wrapLines = true;
+
+  @state() private _error?: string;
+
+  @state() private _newLogsIndicator?: boolean;
+
+  @query(".error-log") private _logElement?: HTMLElement;
+
+  @query("#scroll-top-marker") private _scrollTopMarkerElement?: HTMLElement;
+
+  @query("#scroll-bottom-marker")
+  private _scrollBottomMarkerElement?: HTMLElement;
+
+  @query("ha-ansi-to-html") private _ansiToHtmlElement?: HaAnsiToHtml;
+
+  @state() private _scrolledToBottomController =
+    new IntersectionController<boolean>(this, {
+      callback(this: IntersectionController<boolean>, entries) {
+        return entries[0].isIntersecting;
+      },
+    });
+
+  @state() private _scrolledToTopController =
+    new IntersectionController<boolean>(this, {});
+
+  private _ws: WebSocket | null = null;
+
+  private _apiUrl = `http://${window.location.hostname}:5642`;
+
+  private async _fetchLogs(): Promise<void> {
+    if (!this._selectedLogProvider) {
+      return;
+    }
+
+    this._loading = true;
+    this._error = undefined;
+
+    // Stop any existing websocket
+    this._stopFollowing();
+
+    // Clear existing logs
+    this._ansiToHtmlElement?.clear();
+
+    try {
+      // First, fetch the latest logs
+      const response = await fetch(
+        `${this._apiUrl}/api/logs/${this._selectedLogProvider}`
+      );
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const data = await response.json();
+      if (data.error) {
+        throw new Error(data.error);
+      }
+
+      const logText = data.output || "";
+
+      // Parse and display initial logs
+      if (logText.trim()) {
+        this._ansiToHtmlElement?.parseTextToColoredPre(logText);
+
+        // Add divider line
+        this._ansiToHtmlElement?.parseLineToColoredPre(
+          "--- Live logs start here ---"
+        );
+      }
+
+      this._loading = false;
+
+      // Scroll to bottom after loading
+      this._scrollToBottom();
+
+      // Start streaming
+      this._startFollowing();
+    } catch (err) {
+      this._error = `Error loading logs: ${err}`;
+      this._loading = false;
+      // eslint-disable-next-line
+      console.error("Error fetching logs:", err);
+    }
+  }
+
+  private async _fetchLogProviders(): Promise<void> {
+    try {
+      const response = await fetch(`${this._apiUrl}/api/logs`);
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const providers = await response.json();
+
+      // Define the order (matching backend registration order)
+      const order = ["core", "supervisor", "host", "audio", "dns", "multicast"];
+
+      // Convert object to array of providers, filter out health endpoint, and sort
+      this._logProviders = Object.entries(providers)
+        .filter(([key]) => key !== "health")
+        .map(([key]) => ({
+          key,
+          name: key.charAt(0).toUpperCase() + key.slice(1),
+        }))
+        .sort((a, b) => order.indexOf(a.key) - order.indexOf(b.key));
+
+      // Set default provider once loaded
+      if (this._logProviders.length > 0 && !this._selectedLogProvider) {
+        this._selectedLogProvider = this._logProviders[0].key;
+        await this._fetchLogs();
+      }
+    } catch (err) {
+      this._error = `Failed to load log providers: ${err}`;
+      // eslint-disable-next-line
+      console.error("Error fetching log providers:", err);
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._fetchLogProviders();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._stopFollowing();
+  }
+
+  protected firstUpdated() {
+    this._scrolledToBottomController.observe(this._scrollBottomMarkerElement!);
+    this._scrolledToTopController.observe(this._scrollTopMarkerElement!);
+  }
+
+  protected updated() {
+    if (this._newLogsIndicator && this._scrolledToBottomController.value) {
+      this._newLogsIndicator = false;
+    }
+  }
+
+  private _selectProvider(ev: Event) {
+    const target = ev.currentTarget as any;
+    this._selectedLogProvider = target.provider;
+    this._fetchLogs();
+  }
+
+  private _refresh() {
+    this._fetchLogs();
+  }
+
+  private _toggleLineWrap() {
+    this._wrapLines = !this._wrapLines;
+  }
+
+  private _scrollToBottom(): void {
+    if (this._logElement) {
+      this._newLogsIndicator = false;
+      this._logElement.scrollTo(0, this._logElement.scrollHeight);
+    }
+  }
+
+  private _startFollowing() {
+    if (!this._selectedLogProvider) {
+      return;
+    }
+
+    this._stopFollowing();
+    this._error = undefined;
+
+    const wsProtocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+    const wsUrl = `${wsProtocol}//${window.location.hostname}:5642/api/logs/${this._selectedLogProvider}/follow`;
+
+    try {
+      this._ws = new WebSocket(wsUrl);
+
+      this._ws.onopen = () => {
+        // eslint-disable-next-line
+        console.log("WebSocket connected");
+      };
+
+      this._ws.onmessage = (event) => {
+        const scrolledToBottom = this._scrolledToBottomController.value;
+
+        // Add the new line to the display
+        this._ansiToHtmlElement?.parseLineToColoredPre(event.data);
+
+        // Auto-scroll if user is at bottom
+        if (scrolledToBottom && this._logElement) {
+          this._scrollToBottom();
+        } else {
+          this._newLogsIndicator = true;
+        }
+      };
+
+      this._ws.onerror = (error) => {
+        // eslint-disable-next-line
+        console.error("WebSocket error:", error);
+        this._error = "WebSocket connection error";
+      };
+
+      this._ws.onclose = () => {
+        // eslint-disable-next-line
+        console.log("WebSocket disconnected");
+      };
+    } catch (err) {
+      this._error = `Failed to start following logs: ${err}`;
+      // eslint-disable-next-line
+      console.error("Error starting WebSocket:", err);
+    }
+  }
+
+  private _stopFollowing() {
+    if (this._ws) {
+      this._ws.close();
+      this._ws = null;
+    }
+  }
+
+  private _downloadLogs() {
+    if (!this._selectedLogProvider || !this._ansiToHtmlElement) {
+      return;
+    }
+
+    // Get the text content from the logs
+    const logText =
+      this._ansiToHtmlElement.shadowRoot?.querySelector("pre")?.textContent ||
+      "";
+
+    if (!logText.trim()) {
+      return;
+    }
+
+    // Create blob from log text
+    const blob = new Blob([logText], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+
+    // Create download link and trigger it
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `${this._selectedLogProvider}-logs-${Date.now()}.txt`;
+    document.body.appendChild(a);
+    a.click();
+
+    // Cleanup
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  render() {
+    const currentProvider = this._logProviders.find(
+      (p) => p.key === this._selectedLogProvider
+    );
+
+    return html`
+      <div class="container">
+        <div class="toolbar">
+          <ha-button-menu>
+            <ha-button slot="trigger" appearance="filled">
+              <ha-svg-icon slot="end" .path=${mdiChevronDown}></ha-svg-icon>
+              ${currentProvider?.name || "Select Provider"}
+            </ha-button>
+            ${this._logProviders.map(
+              (provider) => html`
+                <ha-list-item
+                  ?selected=${provider.key === this._selectedLogProvider}
+                  .provider=${provider.key}
+                  @click=${this._selectProvider}
+                >
+                  ${provider.name}
+                </ha-list-item>
+              `
+            )}
+          </ha-button-menu>
+        </div>
+
+        <div class="content">
+          <div class="error-log-intro">
+            <ha-card outlined>
+              <div class="header">
+                <h1 class="card-header">${currentProvider?.name || "Logs"}</h1>
+                <div class="action-buttons">
+                  <ha-icon-button
+                    .path=${mdiDownload}
+                    @click=${this._downloadLogs}
+                    .label=${"Download logs"}
+                    .disabled=${!this._ansiToHtmlElement}
+                  ></ha-icon-button>
+                  <ha-icon-button
+                    .path=${this._wrapLines ? mdiWrapDisabled : mdiWrap}
+                    @click=${this._toggleLineWrap}
+                    .label=${this._wrapLines ? "Full width" : "Wrap lines"}
+                  ></ha-icon-button>
+                  <ha-icon-button
+                    .path=${mdiRefresh}
+                    @click=${this._refresh}
+                    .label=${"Refresh"}
+                    .disabled=${!this._selectedLogProvider}
+                  ></ha-icon-button>
+                </div>
+              </div>
+              <div class="card-content error-log">
+                <div id="scroll-top-marker"></div>
+                ${this._loading
+                  ? html`<div>Loading logs...</div>`
+                  : this._error
+                    ? html`<div class="error">${this._error}</div>`
+                    : nothing}
+                <ha-ansi-to-html
+                  ?wrap-disabled=${!this._wrapLines}
+                ></ha-ansi-to-html>
+                <div id="scroll-bottom-marker"></div>
+              </div>
+              <ha-button
+                class="new-logs-indicator ${classMap({
+                  visible:
+                    (this._newLogsIndicator &&
+                      !this._scrolledToBottomController.value) ||
+                    false,
+                })}"
+                size="small"
+                appearance="filled"
+                @click=${this._scrollToBottom}
+              >
+                <ha-svg-icon
+                  .path=${mdiArrowCollapseDown}
+                  slot="start"
+                ></ha-svg-icon>
+                Scroll down
+                <ha-svg-icon
+                  .path=${mdiArrowCollapseDown}
+                  slot="end"
+                ></ha-svg-icon>
+              </ha-button>
+              ${this._ws && !this._error
+                ? html`<div class="live-indicator">
+                    <ha-svg-icon .path=${mdiCircle}></ha-svg-icon>
+                    Live
+                  </div>`
+                : nothing}
+            </ha-card>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static styles: CSSResultGroup = css`
+    :host {
+      display: block;
+      direction: var(--direction);
+    }
+
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .toolbar {
+      padding: var(--ha-space-2) var(--ha-space-4);
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--ha-space-2);
+    }
+
+    .content {
+      direction: ltr;
+    }
+
+    .error-log-intro {
+      text-align: center;
+      margin: 0 var(--ha-space-4);
+    }
+
+    ha-card {
+      padding-top: var(--ha-space-2);
+      position: relative;
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 var(--ha-space-4);
+    }
+
+    .action-buttons {
+      display: flex;
+      align-items: center;
+      height: 100%;
+    }
+
+    .card-header {
+      color: var(--ha-card-header-color, var(--primary-text-color));
+      font-family: var(--ha-card-header-font-family, inherit);
+      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
+      letter-spacing: -0.012em;
+      line-height: var(--ha-line-height-expanded);
+      display: block;
+      margin-block-start: 0px;
+      font-weight: var(--ha-font-weight-normal);
+      white-space: nowrap;
+      max-width: calc(100% - 150px);
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .error-log {
+      position: relative;
+      font-family: var(--ha-font-family-code);
+      clear: both;
+      text-align: start;
+      padding-top: var(--ha-space-4);
+      padding-bottom: var(--ha-space-4);
+      overflow-y: scroll;
+      min-height: var(--error-log-card-height, calc(100vh - 244px));
+      max-height: var(--error-log-card-height, calc(100vh - 244px));
+      border-top: 1px solid var(--divider-color);
+      direction: ltr;
+    }
+
+    .error-log > div {
+      padding: 0 var(--ha-space-4);
+      overflow: auto;
+    }
+
+    .error {
+      color: var(--error-color);
+      padding: var(--ha-space-4);
+    }
+
+    .new-logs-indicator {
+      overflow: hidden;
+      position: absolute;
+      bottom: var(--ha-space-1);
+      left: var(--ha-space-1);
+      height: 0;
+      transition: height 0.4s ease-out;
+    }
+
+    .new-logs-indicator.visible {
+      height: 32px;
+    }
+
+    @keyframes breathe {
+      from {
+        opacity: 0.8;
+      }
+      to {
+        opacity: 0;
+      }
+    }
+
+    .live-indicator {
+      position: absolute;
+      bottom: 0;
+      inset-inline-end: var(--ha-space-4);
+      border-top-right-radius: var(--ha-space-2);
+      border-top-left-radius: var(--ha-space-2);
+      background-color: var(--primary-color);
+      color: var(--text-primary-color);
+      padding: var(--ha-space-1) var(--ha-space-2);
+      opacity: 0.8;
+    }
+
+    .live-indicator ha-svg-icon {
+      animation: breathe 1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
+      height: 14px;
+      width: 14px;
+    }
+
+    @media all and (max-width: 870px) {
+      .error-log {
+        min-height: var(--error-log-card-height, calc(100vh - 190px));
+        max-height: var(--error-log-card-height, calc(100vh - 190px));
+      }
+
+      ha-button-menu {
+        max-width: 50%;
+      }
+
+      ha-button {
+        max-width: 100%;
+      }
+
+      ha-button::part(label) {
+        overflow: hidden;
+        white-space: nowrap;
+      }
+    }
+
+    ha-list-item[selected] {
+      color: var(--primary-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "logs-viewer": LogsViewer;
+  }
+}

package.json

@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0",
+    "@home-assistant/webawesome": "3.0.0-beta.6.ha.7",
     "@lezer/highlight": "1.2.3",
     "@lit-labs/motion": "1.0.9",
     "@lit-labs/observers": "2.0.6",
@@ -89,8 +89,8 @@
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.9.5",
-    "@vaadin/vaadin-themable-mixin": "24.9.5",
+    "@vaadin/combo-box": "24.9.4",
+    "@vaadin/vaadin-themable-mixin": "24.9.4",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -122,7 +122,7 @@
     "lit": "3.3.1",
     "lit-html": "3.3.1",
     "luxon": "3.7.2",
-    "marked": "17.0.0",
+    "marked": "16.4.1",
     "memoize-one": "6.0.0",
     "node-vibrant": "4.0.3",
     "object-hash": "3.0.0",
@@ -157,8 +157,8 @@
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.0.3",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.3.8",
-    "@rspack/core": "1.6.1",
+    "@rsdoctor/rspack-plugin": "1.3.7",
+    "@rspack/core": "1.6.0",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.22",
@@ -178,7 +178,7 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.8",
+    "@vitest/coverage-v8": "4.0.6",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -217,9 +217,9 @@
     "terser-webpack-plugin": "5.3.14",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.46.4",
+    "typescript-eslint": "8.46.3",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.8",
+    "vitest": "4.0.6",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",
     "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"

script/develop-logs

@@ -0,0 +1,96 @@
+#!/bin/sh
+# Run the logs frontend development server
+
+# Stop on errors
+set -e
+
+cd "$(dirname "$0")/.."
+
+# Parse command line arguments
+SUPERVISOR_ENDPOINT=""
+SUPERVISOR_API_TOKEN=""
+
+while getopts "c:t:h" opt; do
+  case $opt in
+    c)
+      SUPERVISOR_ENDPOINT="$OPTARG"
+      ;;
+    t)
+      SUPERVISOR_API_TOKEN="$OPTARG"
+      ;;
+    h)
+      echo "Usage: $0 -c SUPERVISOR_ENDPOINT -t SUPERVISOR_API_TOKEN"
+      echo ""
+      echo "Options:"
+      echo "  -c  SUPERVISOR_ENDPOINT (e.g., http://192.168.1.2) [required]"
+      echo "  -t  SUPERVISOR_API_TOKEN (from remote_api add-on) [required]"
+      echo "  -h  Show this help message"
+      echo ""
+      echo "Example:"
+      echo "  $0 -c http://192.168.1.2 -t your_token_here"
+      exit 0
+      ;;
+    \?)
+      echo "Invalid option: -$OPTARG" >&2
+      echo "Use -h for help"
+      exit 1
+      ;;
+  esac
+done
+
+# Validate that both -c and -t are provided
+if [ -z "$SUPERVISOR_ENDPOINT" ] || [ -z "$SUPERVISOR_API_TOKEN" ]; then
+  echo "Error: Both -c and -t are required" >&2
+  echo "Use -h for help"
+  exit 1
+fi
+
+# Cleanup function
+cleanup() {
+  echo ""
+  echo "Shutting down..."
+  echo "Stopping HA CLI container..."
+  docker stop ha-cli-dev 2>/dev/null || true
+  exit 0
+}
+
+# Set up trap to cleanup on exit
+trap cleanup INT TERM EXIT
+
+# Run HA CLI container
+echo "Starting HA CLI container..."
+
+# Build the container if needed
+if ! docker images | grep -q "ha-cli:local"; then
+  echo "Building HA CLI container..."
+  (cd logs && docker compose build)
+fi
+
+# Clean up any existing container
+docker stop ha-cli-dev 2>/dev/null || true
+
+# Run the container in background (not detached, so it shares stdout)
+docker run \
+  --name ha-cli-dev \
+  --rm \
+  -p 5642:5642 \
+  -e SUPERVISOR_ENDPOINT="$SUPERVISOR_ENDPOINT" \
+  -e SUPERVISOR_API_TOKEN="$SUPERVISOR_API_TOKEN" \
+  -e PORT=5642 \
+  ha-cli:local &
+
+# Store the docker process ID
+DOCKER_PID=$!
+
+# Wait a moment for container to start
+sleep 2
+echo ""
+echo "HA Logs Backend API: http://localhost:5642"
+echo "  GET  /api/logs - List endpoints"
+echo "  GET  /api/logs/core - Core logs"
+echo "  GET  /api/logs/supervisor - Supervisor logs"
+echo "  GET  /health - Health check"
+echo ""
+
+# Run gulp (this will block until Ctrl+C)
+./node_modules/.bin/gulp develop-logs

src/common/condition/extract.ts

@@ -1,36 +0,0 @@
-import type {
-  Condition,
-  TimeCondition,
-} from "../../panels/lovelace/common/validate-condition";
-
-/**
- * Extract media queries from conditions recursively
- */
-export function extractMediaQueries(conditions: Condition[]): string[] {
-  return conditions.reduce<string[]>((array, c) => {
-    if ("conditions" in c && c.conditions) {
-      array.push(...extractMediaQueries(c.conditions));
-    }
-    if (c.condition === "screen" && c.media_query) {
-      array.push(c.media_query);
-    }
-    return array;
-  }, []);
-}
-
-/**
- * Extract time conditions from conditions recursively
- */
-export function extractTimeConditions(
-  conditions: Condition[]
-): TimeCondition[] {
-  return conditions.reduce<TimeCondition[]>((array, c) => {
-    if ("conditions" in c && c.conditions) {
-      array.push(...extractTimeConditions(c.conditions));
-    }
-    if (c.condition === "time") {
-      array.push(c);
-    }
-    return array;
-  }, []);
-}

src/common/condition/listeners.ts

@@ -1,89 +0,0 @@
-import { listenMediaQuery } from "../dom/media_query";
-import type { HomeAssistant } from "../../types";
-import type { Condition } from "../../panels/lovelace/common/validate-condition";
-import { checkConditionsMet } from "../../panels/lovelace/common/validate-condition";
-import { extractMediaQueries, extractTimeConditions } from "./extract";
-import { calculateNextTimeUpdate } from "./time-calculator";
-
-/** Maximum delay for setTimeout (2^31 - 1 milliseconds, ~24.8 days)
- * Values exceeding this will overflow and execute immediately
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/setTimeout#maximum_delay_value
- */
-const MAX_TIMEOUT_DELAY = 2147483647;
-
-/**
- * Helper to setup media query listeners for conditional visibility
- */
-export function setupMediaQueryListeners(
-  conditions: Condition[],
-  hass: HomeAssistant,
-  addListener: (unsub: () => void) => void,
-  onUpdate: (conditionsMet: boolean) => void
-): void {
-  const mediaQueries = extractMediaQueries(conditions);
-
-  if (mediaQueries.length === 0) return;
-
-  // Optimization for single media query
-  const hasOnlyMediaQuery =
-    conditions.length === 1 &&
-    conditions[0].condition === "screen" &&
-    !!conditions[0].media_query;
-
-  mediaQueries.forEach((mediaQuery) => {
-    const unsub = listenMediaQuery(mediaQuery, (matches) => {
-      if (hasOnlyMediaQuery) {
-        onUpdate(matches);
-      } else {
-        const conditionsMet = checkConditionsMet(conditions, hass);
-        onUpdate(conditionsMet);
-      }
-    });
-    addListener(unsub);
-  });
-}
-
-/**
- * Helper to setup time-based listeners for conditional visibility
- */
-export function setupTimeListeners(
-  conditions: Condition[],
-  hass: HomeAssistant,
-  addListener: (unsub: () => void) => void,
-  onUpdate: (conditionsMet: boolean) => void
-): void {
-  const timeConditions = extractTimeConditions(conditions);
-
-  if (timeConditions.length === 0) return;
-
-  timeConditions.forEach((timeCondition) => {
-    let timeoutId: ReturnType<typeof setTimeout> | undefined;
-
-    const scheduleUpdate = () => {
-      const delay = calculateNextTimeUpdate(hass, timeCondition);
-
-      if (delay === undefined) return;
-
-      // Cap delay to prevent setTimeout overflow
-      const cappedDelay = Math.min(delay, MAX_TIMEOUT_DELAY);
-
-      timeoutId = setTimeout(() => {
-        if (delay <= MAX_TIMEOUT_DELAY) {
-          const conditionsMet = checkConditionsMet(conditions, hass);
-          onUpdate(conditionsMet);
-        }
-        scheduleUpdate();
-      }, cappedDelay);
-    };
-
-    // Register cleanup function once, outside of scheduleUpdate
-    addListener(() => {
-      if (timeoutId !== undefined) {
-        clearTimeout(timeoutId);
-      }
-    });
-
-    scheduleUpdate();
-  });
-}

src/common/condition/time-calculator.ts

@@ -1,73 +0,0 @@
-import { TZDate } from "@date-fns/tz";
-import {
-  startOfDay,
-  addDays,
-  addMinutes,
-  differenceInMilliseconds,
-} from "date-fns";
-import type { HomeAssistant } from "../../types";
-import { TimeZone } from "../../data/translation";
-import { parseTimeString } from "../datetime/check_time";
-import type { TimeCondition } from "../../panels/lovelace/common/validate-condition";
-
-/**
- * Calculate milliseconds until next time boundary for a time condition
- * @param hass Home Assistant object
- * @param timeCondition Time condition to calculate next update for
- * @returns Milliseconds until next boundary, or undefined if no boundaries
- */
-export function calculateNextTimeUpdate(
-  hass: HomeAssistant,
-  { after, before, weekdays }: Omit<TimeCondition, "condition">
-): number | undefined {
-  const timezone =
-    hass.locale.time_zone === TimeZone.server
-      ? hass.config.time_zone
-      : Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-  const now = new TZDate(new Date(), timezone);
-  const updates: Date[] = [];
-
-  // Calculate next occurrence of after time
-  if (after) {
-    let afterDate = parseTimeString(after, timezone);
-    if (afterDate <= now) {
-      // If time has passed today, schedule for tomorrow
-      afterDate = addDays(afterDate, 1);
-    }
-    updates.push(afterDate);
-  }
-
-  // Calculate next occurrence of before time
-  if (before) {
-    let beforeDate = parseTimeString(before, timezone);
-    if (beforeDate <= now) {
-      // If time has passed today, schedule for tomorrow
-      beforeDate = addDays(beforeDate, 1);
-    }
-    updates.push(beforeDate);
-  }
-
-  // If weekdays are specified, check for midnight (weekday transition)
-  if (weekdays && weekdays.length > 0 && weekdays.length < 7) {
-    // Calculate next midnight using startOfDay + addDays
-    const tomorrow = addDays(now, 1);
-    const midnight = startOfDay(tomorrow);
-    updates.push(midnight);
-  }
-
-  if (updates.length === 0) {
-    return undefined;
-  }
-
-  // Find the soonest update time
-  const nextUpdate = updates.reduce((soonest, current) =>
-    current < soonest ? current : soonest
-  );
-
-  // Add 1 minute buffer to ensure we're past the boundary
-  const updateWithBuffer = addMinutes(nextUpdate, 1);
-
-  // Calculate difference in milliseconds
-  return differenceInMilliseconds(updateWithBuffer, now);
-}

src/common/datetime/check_time.ts

@@ -1,131 +0,0 @@
-import { TZDate } from "@date-fns/tz";
-import { isBefore, isAfter, isWithinInterval } from "date-fns";
-import type { HomeAssistant } from "../../types";
-import { TimeZone } from "../../data/translation";
-import { WEEKDAY_MAP } from "./weekday";
-import type { TimeCondition } from "../../panels/lovelace/common/validate-condition";
-
-/**
- * Validate a time string format and value ranges without creating Date objects
- * @param timeString Time string to validate (HH:MM or HH:MM:SS)
- * @returns true if valid, false otherwise
- */
-export function isValidTimeString(timeString: string): boolean {
-  // Reject empty strings
-  if (!timeString || timeString.trim() === "") {
-    return false;
-  }
-
-  const parts = timeString.split(":");
-
-  if (parts.length < 2 || parts.length > 3) {
-    return false;
-  }
-
-  // Ensure each part contains only digits (and optional leading zeros)
-  // This prevents "8:00 AM" from passing validation
-  if (!parts.every((part) => /^\d+$/.test(part))) {
-    return false;
-  }
-
-  const hours = parseInt(parts[0], 10);
-  const minutes = parseInt(parts[1], 10);
-  const seconds = parts.length === 3 ? parseInt(parts[2], 10) : 0;
-
-  if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) {
-    return false;
-  }
-
-  return (
-    hours >= 0 &&
-    hours <= 23 &&
-    minutes >= 0 &&
-    minutes <= 59 &&
-    seconds >= 0 &&
-    seconds <= 59
-  );
-}
-
-/**
- * Parse a time string (HH:MM or HH:MM:SS) and set it on today's date in the given timezone
- *
- * Note: This function assumes the time string has already been validated by
- * isValidTimeString() at configuration time. It does not re-validate at runtime
- * for consistency with other condition types (screen, user, location, etc.)
- *
- * @param timeString The time string to parse (must be pre-validated)
- * @param timezone The timezone to use
- * @returns The Date object
- */
-export const parseTimeString = (timeString: string, timezone: string): Date => {
-  const parts = timeString.split(":");
-  const hours = parseInt(parts[0], 10);
-  const minutes = parseInt(parts[1], 10);
-  const seconds = parts.length === 3 ? parseInt(parts[2], 10) : 0;
-
-  const now = new TZDate(new Date(), timezone);
-  const dateWithTime = new TZDate(
-    now.getFullYear(),
-    now.getMonth(),
-    now.getDate(),
-    hours,
-    minutes,
-    seconds,
-    0,
-    timezone
-  );
-
-  return new Date(dateWithTime.getTime());
-};
-
-/**
- * Check if the current time matches the time condition (after/before/weekday)
- * @param hass Home Assistant object
- * @param timeCondition Time condition to check
- * @returns true if current time matches the condition
- */
-export const checkTimeInRange = (
-  hass: HomeAssistant,
-  { after, before, weekdays }: Omit<TimeCondition, "condition">
-): boolean => {
-  const timezone =
-    hass.locale.time_zone === TimeZone.server
-      ? hass.config.time_zone
-      : Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-  const now = new TZDate(new Date(), timezone);
-
-  // Check weekday condition
-  if (weekdays && weekdays.length > 0) {
-    const currentWeekday = WEEKDAY_MAP[now.getDay()];
-    if (!weekdays.includes(currentWeekday)) {
-      return false;
-    }
-  }
-
-  // Check time conditions
-  if (!after && !before) {
-    return true;
-  }
-
-  const afterDate = after ? parseTimeString(after, timezone) : undefined;
-  const beforeDate = before ? parseTimeString(before, timezone) : undefined;
-
-  if (afterDate && beforeDate) {
-    if (isBefore(beforeDate, afterDate)) {
-      // Crosses midnight (e.g., 22:00 to 06:00)
-      return !isBefore(now, afterDate) || !isAfter(now, beforeDate);
-    }
-    return isWithinInterval(now, { start: afterDate, end: beforeDate });
-  }
-
-  if (afterDate) {
-    return !isBefore(now, afterDate);
-  }
-
-  if (beforeDate) {
-    return !isAfter(now, beforeDate);
-  }
-
-  return true;
-};

src/common/datetime/first_weekday.ts

@@ -1,7 +1,18 @@
 import { getWeekStartByLocale } from "weekstart";
 import type { FrontendLocaleData } from "../../data/translation";
 import { FirstWeekday } from "../../data/translation";
-import { WEEKDAYS_LONG, type WeekdayIndex } from "./weekday";
+
+export const weekdays = [
+  "sunday",
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+] as const;
+
+type WeekdayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
 export const firstWeekdayIndex = (locale: FrontendLocaleData): WeekdayIndex => {
   if (locale.first_weekday === FirstWeekday.language) {
@@ -12,12 +23,12 @@ export const firstWeekdayIndex = (locale: FrontendLocaleData): WeekdayIndex => {
     }
     return (getWeekStartByLocale(locale.language) % 7) as WeekdayIndex;
   }
-  return WEEKDAYS_LONG.includes(locale.first_weekday)
-    ? (WEEKDAYS_LONG.indexOf(locale.first_weekday) as WeekdayIndex)
+  return weekdays.includes(locale.first_weekday)
+    ? (weekdays.indexOf(locale.first_weekday) as WeekdayIndex)
     : 1;
 };
 
 export const firstWeekday = (locale: FrontendLocaleData) => {
   const index = firstWeekdayIndex(locale);
-  return WEEKDAYS_LONG[index];
+  return weekdays[index];
 };

src/common/datetime/weekday.ts

@@ -1,59 +0,0 @@
-export type WeekdayIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-
-export type WeekdayShort =
-  | "sun"
-  | "mon"
-  | "tue"
-  | "wed"
-  | "thu"
-  | "fri"
-  | "sat";
-
-export type WeekdayLong =
-  | "sunday"
-  | "monday"
-  | "tuesday"
-  | "wednesday"
-  | "thursday"
-  | "friday"
-  | "saturday";
-
-export const WEEKDAYS_SHORT = [
-  "sun",
-  "mon",
-  "tue",
-  "wed",
-  "thu",
-  "fri",
-  "sat",
-] as const satisfies readonly WeekdayShort[];
-
-export const WEEKDAYS_LONG = [
-  "sunday",
-  "monday",
-  "tuesday",
-  "wednesday",
-  "thursday",
-  "friday",
-  "saturday",
-] as const satisfies readonly WeekdayLong[];
-
-export const WEEKDAY_MAP = {
-  0: "sun",
-  1: "mon",
-  2: "tue",
-  3: "wed",
-  4: "thu",
-  5: "fri",
-  6: "sat",
-} as const satisfies Record<WeekdayIndex, WeekdayShort>;
-
-export const WEEKDAY_SHORT_TO_LONG = {
-  sun: "sunday",
-  mon: "monday",
-  tue: "tuesday",
-  wed: "wednesday",
-  thu: "thursday",
-  fri: "friday",
-  sat: "saturday",
-} as const satisfies Record<WeekdayShort, WeekdayLong>;

src/common/dom/apply_themes_on_element.ts

@@ -1,6 +1,5 @@
 import type { ThemeVars } from "../../data/ws-themes";
 import { darkColorVariables } from "../../resources/theme/color";
-import { darkSemanticVariables } from "../../resources/theme/semantic.globals";
 import { derivedStyles } from "../../resources/theme/theme";
 import type { HomeAssistant } from "../../types";
 import {
@@ -53,7 +52,7 @@ export const applyThemesOnElement = (
 
   if (themeToApply && darkMode) {
     cacheKey = `${cacheKey}__dark`;
-    themeRules = { ...darkSemanticVariables, ...darkColorVariables };
+    themeRules = { ...darkColorVariables };
   }
 
   if (themeToApply === "default") {

src/common/util/parse-animation-duration.ts

@@ -1,36 +0,0 @@
-/**
- * Parses a CSS duration string (e.g., "300ms", "3s") and returns the duration in milliseconds.
- *
- * @param duration - A CSS duration string (e.g., "300ms", "3s", "0.5s")
- * @returns The duration in milliseconds, or 0 if the input is invalid
- *
- * @example
- * parseAnimationDuration("300ms") // Returns 300
- * parseAnimationDuration("3s")    // Returns 3000
- * parseAnimationDuration("0.5s")  // Returns 500
- * parseAnimationDuration("invalid") // Returns 0
- */
-export const parseAnimationDuration = (duration: string): number => {
-  const trimmed = duration.trim();
-
-  let value: number;
-  let multiplier: number;
-
-  if (trimmed.endsWith("ms")) {
-    value = parseFloat(trimmed.slice(0, -2));
-    multiplier = 1;
-  } else if (trimmed.endsWith("s")) {
-    value = parseFloat(trimmed.slice(0, -1));
-    multiplier = 1000;
-  } else {
-    // No recognized unit, try parsing as number (assume ms)
-    value = parseFloat(trimmed);
-    multiplier = 1;
-  }
-
-  if (!isFinite(value) || value < 0) {
-    return 0;
-  }
-
-  return value * multiplier;
-};

src/common/util/select-unit.ts

@@ -119,8 +119,8 @@ type Thresholds = Record<
 >;
 
 export const DEFAULT_THRESHOLDS: Thresholds = {
-  second: 59, // seconds to minute
-  minute: 59, // minutes to hour
+  second: 45, // seconds to minute
+  minute: 45, // minutes to hour
   hour: 22, // hour to day
   day: 5, // day to week
   week: 4, // week to months

src/common/util/view-transition.ts

@@ -1,30 +0,0 @@
-/**
- * Executes a callback within a View Transition if supported, otherwise runs it directly.
- *
- * @param callback - Function to execute. Can be synchronous or return a Promise. The callback will be passed a boolean indicating whether the view transition is available.
- * @returns Promise that resolves when the transition completes (or immediately if not supported)
- *
- * @example
- * ```typescript
- * // Synchronous callback
- * withViewTransition(() => {
- *   this.large = !this.large;
- * });
- *
- * // Async callback
- * await withViewTransition(async () => {
- *   await this.updateData();
- * });
- * ```
- */
-export const withViewTransition = (
-  callback: (viewTransitionAvailable: boolean) => void | Promise<void>
-): Promise<void> => {
-  if (document.startViewTransition) {
-    return document.startViewTransition(() => callback(true)).finished;
-  }
-
-  // Fallback: Execute callback directly without transition
-  const result = callback(false);
-  return result instanceof Promise ? result : Promise.resolve();
-};

src/components/chart/down-sample.ts

@@ -6,8 +6,7 @@ export function downSampleLineData<
   data: T[] | undefined,
   maxDetails: number,
   minX?: number,
-  maxX?: number,
-  useMean = false
+  maxX?: number
 ): T[] {
   if (!data) {
     return [];
@@ -18,13 +17,15 @@ export function downSampleLineData<
   const min = minX ?? getPointData(data[0]!)[0];
   const max = maxX ?? getPointData(data[data.length - 1]!)[0];
   const step = Math.ceil((max - min) / Math.floor(maxDetails));
-
-  // Group points into frames
   const frames = new Map<
     number,
-    { point: (typeof data)[number]; x: number; y: number }[]
+    {
+      min: { point: (typeof data)[number]; x: number; y: number };
+      max: { point: (typeof data)[number]; x: number; y: number };
+    }
   >();
 
+  // Group points into frames
   for (const point of data) {
     const pointData = getPointData(point);
     if (!Array.isArray(pointData)) continue;
@@ -35,53 +36,28 @@ export function downSampleLineData<
     const frameIndex = Math.floor((x - min) / step);
     const frame = frames.get(frameIndex);
     if (!frame) {
-      frames.set(frameIndex, [{ point, x, y }]);
+      frames.set(frameIndex, { min: { point, x, y }, max: { point, x, y } });
     } else {
-      frame.push({ point, x, y });
+      if (frame.min.y > y) {
+        frame.min = { point, x, y };
+      }
+      if (frame.max.y < y) {
+        frame.max = { point, x, y };
+      }
     }
   }
 
   // Convert frames back to points
   const result: T[] = [];
-
-  if (useMean) {
-    // Use mean values for each frame
-    for (const [_i, framePoints] of frames) {
-      const sumY = framePoints.reduce((acc, p) => acc + p.y, 0);
-      const meanY = sumY / framePoints.length;
-      const sumX = framePoints.reduce((acc, p) => acc + p.x, 0);
-      const meanX = sumX / framePoints.length;
-
-      const firstPoint = framePoints[0].point;
-      const pointData = getPointData(firstPoint);
-      const meanPoint = (
-        Array.isArray(pointData) ? [meanX, meanY] : { value: [meanX, meanY] }
-      ) as T;
-      result.push(meanPoint);
+  for (const [_i, frame] of frames) {
+    // Use min/max points to preserve visual accuracy
+    // The order of the data must be preserved so max may be before min
+    if (frame.min.x > frame.max.x) {
+      result.push(frame.max.point);
     }
-  } else {
-    // Use min/max values for each frame
-    for (const [_i, framePoints] of frames) {
-      let minPoint = framePoints[0];
-      let maxPoint = framePoints[0];
-
-      for (const p of framePoints) {
-        if (p.y < minPoint.y) {
-          minPoint = p;
-        }
-        if (p.y > maxPoint.y) {
-          maxPoint = p;
-        }
-      }
-
-      // The order of the data must be preserved so max may be before min
-      if (minPoint.x > maxPoint.x) {
-        result.push(maxPoint.point);
-      }
-      result.push(minPoint.point);
-      if (minPoint.x < maxPoint.x) {
-        result.push(maxPoint.point);
-      }
+    result.push(frame.min.point);
+    if (frame.min.x < frame.max.x) {
+      result.push(frame.max.point);
     }
   }
 

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

@@ -427,7 +427,6 @@ export class HaChartBase extends LitElement {
                         ...axis.axisPointer?.handle,
                         show: true,
                       },
-                      label: { show: false },
                     },
                   }
                 : axis
@@ -628,10 +627,6 @@ export class HaChartBase extends LitElement {
   }
 
   private _createTheme(style: CSSStyleDeclaration) {
-    const textBorderColor =
-      style.getPropertyValue("--ha-card-background") ||
-      style.getPropertyValue("--card-background-color");
-    const textBorderWidth = 2;
     return {
       color: getAllGraphColors(style),
       backgroundColor: "transparent",
@@ -655,22 +650,22 @@ export class HaChartBase extends LitElement {
       graph: {
         label: {
           color: style.getPropertyValue("--primary-text-color"),
-          textBorderColor,
-          textBorderWidth,
+          textBorderColor: style.getPropertyValue("--primary-background-color"),
+          textBorderWidth: 2,
         },
       },
       pie: {
         label: {
           color: style.getPropertyValue("--primary-text-color"),
-          textBorderColor,
-          textBorderWidth,
+          textBorderColor: style.getPropertyValue("--primary-background-color"),
+          textBorderWidth: 2,
         },
       },
       sankey: {
         label: {
           color: style.getPropertyValue("--primary-text-color"),
-          textBorderColor,
-          textBorderWidth,
+          textBorderColor: style.getPropertyValue("--primary-background-color"),
+          textBorderWidth: 2,
         },
       },
       categoryAxis: {

src/components/chart/ha-network-graph.ts

@@ -2,10 +2,7 @@ import type { EChartsType } from "echarts/core";
 import type { GraphSeriesOption } from "echarts/charts";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators";
-import type {
-  CallbackDataParams,
-  TopLevelFormatterParams,
-} from "echarts/types/dist/shared";
+import type { TopLevelFormatterParams } from "echarts/types/dist/shared";
 import { mdiFormatTextVariant, mdiGoogleCirclesGroup } from "@mdi/js";
 import memoizeOne from "memoize-one";
 import { listenMediaQuery } from "../../common/dom/media_query";
@@ -19,7 +16,6 @@ import { deepEqual } from "../../common/util/deep-equal";
 export interface NetworkNode {
   id: string;
   name?: string;
-  context?: string;
   category?: number;
   value?: number;
   symbolSize?: number;
@@ -192,25 +188,6 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
       label: {
         show: showLabels,
         position: "right",
-        formatter: (params: CallbackDataParams) => {
-          const node = params.data as NetworkNode;
-          if (node.context) {
-            return `{primary|${node.name ?? ""}}\n{secondary|${node.context}}`;
-          }
-          return node.name ?? "";
-        },
-        rich: {
-          primary: {
-            fontSize: 12,
-          },
-          secondary: {
-            fontSize: 12,
-            color: getComputedStyle(document.body).getPropertyValue(
-              "--secondary-text-color"
-            ),
-            lineHeight: 16,
-          },
-        },
       },
       emphasis: {
         focus: isMobile ? "none" : "adjacency",
@@ -248,7 +225,6 @@ export class HaNetworkGraph extends SubscribeMixin(LitElement) {
           ({
             id: node.id,
             name: node.name,
-            context: node.context,
             category: node.category,
             value: node.value,
             symbolSize: node.symbolSize || 30,

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

@@ -62,7 +62,6 @@ class HaDataTableLabels extends LitElement {
         @click=${clickAction ? this._labelClicked : undefined}
         @keydown=${clickAction ? this._labelClicked : undefined}
         style=${color ? `--color: ${color}` : ""}
-        .description=${label.description}
       >
         ${label?.icon
           ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`

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

@@ -197,6 +197,9 @@ export class HaDevicePicker extends LitElement {
     const placeholder =
       this.placeholder ??
       this.hass.localize("ui.components.device-picker.placeholder");
+    const notFoundLabel = this.hass.localize(
+      "ui.components.device-picker.no_match"
+    );
 
     const valueRenderer = this._valueRenderer(this._configEntryLookup);
 
@@ -206,10 +209,7 @@ export class HaDevicePicker extends LitElement {
         .autofocus=${this.autofocus}
         .label=${this.label}
         .searchLabel=${this.searchLabel}
-        .notFoundLabel=${this._notFoundLabel}
-        .emptyLabel=${this.hass.localize(
-          "ui.components.device-picker.no_devices"
-        )}
+        .notFoundLabel=${notFoundLabel}
         .placeholder=${placeholder}
         .value=${this.value}
         .rowRenderer=${this._rowRenderer}
@@ -233,11 +233,6 @@ export class HaDevicePicker extends LitElement {
     this.value = value;
     fireEvent(this, "value-changed", { value });
   }
-
-  private _notFoundLabel = (search: string) =>
-    this.hass.localize("ui.components.device-picker.no_match", {
-      term: html`<b>‘${search}’</b>`,
-    });
 }
 
 declare global {

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

@@ -269,6 +269,9 @@ export class HaEntityPicker extends LitElement {
     const placeholder =
       this.placeholder ??
       this.hass.localize("ui.components.entity.entity-picker.placeholder");
+    const notFoundLabel = this.hass.localize(
+      "ui.components.entity.entity-picker.no_match"
+    );
 
     return html`
       <ha-generic-picker
@@ -279,7 +282,7 @@ export class HaEntityPicker extends LitElement {
         .label=${this.label}
         .helper=${this.helper}
         .searchLabel=${this.searchLabel}
-        .notFoundLabel=${this._notFoundLabel}
+        .notFoundLabel=${notFoundLabel}
         .placeholder=${placeholder}
         .value=${this.addButton ? undefined : this.value}
         .rowRenderer=${this._rowRenderer}
@@ -353,11 +356,6 @@ export class HaEntityPicker extends LitElement {
     fireEvent(this, "value-changed", { value });
     fireEvent(this, "change");
   }
-
-  private _notFoundLabel = (search: string) =>
-    this.hass.localize("ui.components.entity.entity-picker.no_match", {
-      term: html`<b>‘${search}’</b>`,
-    });
 }
 
 declare global {

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

@@ -21,6 +21,7 @@ import "../ha-combo-box-item";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
 import "../ha-icon-button";
+import "../ha-input-helper-text";
 import type {
   PickerComboBoxItem,
   PickerComboBoxSearchFn,
@@ -270,6 +271,7 @@ export class HaStatisticPicker extends LitElement {
         const secondary = [areaName, entityName ? deviceName : undefined]
           .filter(Boolean)
           .join(isRTL ? " ◂ " : " ▸ ");
+        const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");
 
         const sortingPrefix = `${TYPE_ORDER.indexOf("entity")}`;
         output.push({
@@ -277,6 +279,7 @@ export class HaStatisticPicker extends LitElement {
           statistic_id: id,
           primary,
           secondary,
+          a11y_label: a11yLabel,
           stateObj: stateObj,
           type: "entity",
           sorting_label: [sortingPrefix, deviceName, entityName].join("_"),
@@ -455,6 +458,9 @@ export class HaStatisticPicker extends LitElement {
     const placeholder =
       this.placeholder ??
       this.hass.localize("ui.components.statistic-picker.placeholder");
+    const notFoundLabel = this.hass.localize(
+      "ui.components.statistic-picker.no_match"
+    );
 
     return html`
       <ha-generic-picker
@@ -462,10 +468,7 @@ export class HaStatisticPicker extends LitElement {
         .autofocus=${this.autofocus}
         .allowCustomValue=${this.allowCustomEntity}
         .label=${this.label}
-        .notFoundLabel=${this._notFoundLabel}
-        .emptyLabel=${this.hass.localize(
-          "ui.components.statistic-picker.no_statistics"
-        )}
+        .notFoundLabel=${notFoundLabel}
         .placeholder=${placeholder}
         .value=${this.value}
         .rowRenderer=${this._rowRenderer}
@@ -474,7 +477,6 @@ export class HaStatisticPicker extends LitElement {
         .hideClearIcon=${this.hideClearIcon}
         .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
-        .helper=${this.helper}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>
@@ -519,11 +521,6 @@ export class HaStatisticPicker extends LitElement {
     await this.updateComplete;
     await this._picker?.open();
   }
-
-  private _notFoundLabel = (search: string) =>
-    this.hass.localize("ui.components.statistic-picker.no_match", {
-      term: html`<b>‘${search}’</b>`,
-    });
 }
 
 declare global {

src/components/ha-area-picker.ts

@@ -369,10 +369,9 @@ export class HaAreaPicker extends LitElement {
         .autofocus=${this.autofocus}
         .label=${this.label}
         .helper=${this.helper}
-        .notFoundLabel=${this._notFoundLabel}
-        .emptyLabel=${this.hass.localize("ui.components.area-picker.no_areas")}
-        .disabled=${this.disabled}
-        .required=${this.required}
+        .notFoundLabel=${this.hass.localize(
+          "ui.components.area-picker.no_match"
+        )}
         .placeholder=${placeholder}
         .value=${this.value}
         .getItems=${this._getItems}
@@ -426,11 +425,6 @@ export class HaAreaPicker extends LitElement {
     fireEvent(this, "value-changed", { value });
     fireEvent(this, "change");
   }
-
-  private _notFoundLabel = (search: string) =>
-    this.hass.localize("ui.components.area-picker.no_match", {
-      term: html`<b>‘${search}’</b>`,
-    });
 }
 
 declare global {

src/components/ha-dropdown-item.ts

@@ -1,41 +0,0 @@
-import DropdownItem from "@home-assistant/webawesome/dist/components/dropdown-item/dropdown-item";
-import { css, type CSSResultGroup } from "lit";
-import { customElement } from "lit/decorators";
-
-/**
- * Home Assistant dropdown item component
- *
- * @element ha-dropdown-item
- * @extends {DropdownItem}
- *
- * @summary
- * A stylable dropdown item component supporting Home Assistant theming, variants, and appearances based on webawesome dropdown item.
- *
- */
-@customElement("ha-dropdown-item")
-export class HaDropdownItem extends DropdownItem {
-  static get styles(): CSSResultGroup {
-    return [
-      DropdownItem.styles,
-      css`
-        :host {
-          min-height: var(--ha-space-10);
-        }
-
-        #icon ::slotted(*) {
-          color: var(--ha-color-on-neutral-normal);
-        }
-
-        :host([variant="danger"]) #icon ::slotted(*) {
-          color: var(--ha-color-on-danger-quiet);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dropdown-item": HaDropdownItem;
-  }
-}

src/components/ha-dropdown.ts

@@ -1,45 +0,0 @@
-import Dropdown from "@home-assistant/webawesome/dist/components/dropdown/dropdown";
-import { css, type CSSResultGroup } from "lit";
-import { customElement, property } from "lit/decorators";
-
-/**
- * Home Assistant dropdown component
- *
- * @element ha-dropdown
- * @extends {Dropdown}
- *
- * @summary
- * A stylable dropdown component supporting Home Assistant theming, variants, and appearances based on webawesome dropdown.
- *
- */
-@customElement("ha-dropdown")
-export class HaDropdown extends Dropdown {
-  @property({ attribute: false }) dropdownTag = "ha-dropdown";
-
-  @property({ attribute: false }) dropdownItemTag = "ha-dropdown-item";
-
-  static get styles(): CSSResultGroup {
-    return [
-      Dropdown.styles,
-      css`
-        :host {
-          font-size: var(--ha-dropdown-font-size, var(--ha-font-size-m));
-          --wa-color-surface-raised: var(
-            --card-background-color,
-            var(--ha-dialog-surface-background, var(--mdc-theme-surface, #fff)),
-          );
-        }
-
-        #menu {
-          padding: var(--ha-space-1);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dropdown": HaDropdown;
-  }
-}

src/components/ha-filter-labels.ts

@@ -109,10 +109,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
                       .selected=${(this.value || []).includes(label.label_id)}
                       hasMeta
                     >
-                      <ha-label
-                        style=${color ? `--color: ${color}` : ""}
-                        .description=${label.description}
-                      >
+                      <ha-label style=${color ? `--color: ${color}` : ""}>
                         ${label.icon
                           ? html`<ha-icon
                               slot="icon"

src/components/ha-floor-picker.ts

@@ -383,9 +383,8 @@ export class HaFloorPicker extends LitElement {
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .label=${this.label}
-        .notFoundLabel=${this._notFoundLabel}
-        .emptyLabel=${this.hass.localize(
-          "ui.components.floor-picker.no_floors"
+        .notFoundLabel=${this.hass.localize(
+          "ui.components.floor-picker.no_match"
         )}
         .placeholder=${placeholder}
         .value=${this.value}
@@ -445,11 +444,6 @@ export class HaFloorPicker extends LitElement {
     fireEvent(this, "value-changed", { value });
     fireEvent(this, "change");
   }
-
-  private _notFoundLabel = (search: string) =>
-    this.hass.localize("ui.components.floor-picker.no_match", {
-      term: html`<b>‘${search}’</b>`,
-    });
 }
 
 declare global {

src/components/ha-generic-picker.ts

@@ -25,6 +25,9 @@ import "./ha-svg-icon";
 export class HaGenericPicker extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  // eslint-disable-next-line lit/no-native-attributes
+  @property({ type: Boolean }) public autofocus = false;
+
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = false;
@@ -46,11 +49,8 @@ export class HaGenericPicker extends LitElement {
   @property({ attribute: "hide-clear-icon", type: Boolean })
   public hideClearIcon = false;
 
-  @property({ attribute: false })
-  public getItems?: (
-    searchString?: string,
-    section?: string
-  ) => (PickerComboBoxItem | string)[];
+  @property({ attribute: false, type: Array })
+  public getItems?: () => PickerComboBoxItem[];
 
   @property({ attribute: false, type: Array })
   public getAdditionalItems?: (searchString?: string) => PickerComboBoxItem[];
@@ -64,11 +64,8 @@ export class HaGenericPicker extends LitElement {
   @property({ attribute: false })
   public searchFn?: PickerComboBoxSearchFn<PickerComboBoxItem>;
 
-  @property({ attribute: false })
-  public notFoundLabel?: string | ((search: string) => string);
-
-  @property({ attribute: "empty-label" })
-  public emptyLabel?: string;
+  @property({ attribute: "not-found-label", type: String })
+  public notFoundLabel?: string;
 
   @property({ attribute: "popover-placement" })
   public popoverPlacement:
@@ -88,25 +85,6 @@ export class HaGenericPicker extends LitElement {
   /** If set picker shows an add button instead of textbox when value isn't set */
   @property({ attribute: "add-button-label" }) public addButtonLabel?: string;
 
-  /** Section filter buttons for the list, section headers needs to be defined in getItems as strings */
-  @property({ attribute: false }) public sections?: (
-    | {
-        id: string;
-        label: string;
-      }
-    | "separator"
-  )[];
-
-  @property({ attribute: false }) public sectionTitleFunction?: (listInfo: {
-    firstIndex: number;
-    lastIndex: number;
-    firstItem: PickerComboBoxItem | string;
-    secondItem: PickerComboBoxItem | string;
-    itemsCount: number;
-  }) => string | undefined;
-
-  @property({ attribute: "selected-section" }) public selectedSection?: string;
-
   @query(".container") private _containerElement?: HTMLDivElement;
 
   @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
@@ -119,11 +97,6 @@ export class HaGenericPicker extends LitElement {
 
   @state() private _openedNarrow = false;
 
-  static shadowRootOptions = {
-    ...LitElement.shadowRootOptions,
-    delegatesFocus: true,
-  };
-
   private _narrow = false;
 
   // helper to set new value after closing picker, to avoid flicker
@@ -216,19 +189,16 @@ export class HaGenericPicker extends LitElement {
       <ha-picker-combo-box
         .hass=${this.hass}
         .allowCustomValue=${this.allowCustomValue}
-        .label=${this.searchLabel}
+        .label=${this.searchLabel ??
+        (this.hass?.localize("ui.common.search") || "Search")}
         .value=${this.value}
         @value-changed=${this._valueChanged}
         .rowRenderer=${this.rowRenderer}
         .notFoundLabel=${this.notFoundLabel}
-        .emptyLabel=${this.emptyLabel}
         .getItems=${this.getItems}
         .getAdditionalItems=${this.getAdditionalItems}
         .searchFn=${this.searchFn}
         .mode=${dialogMode ? "dialog" : "popover"}
-        .sections=${this.sections}
-        .sectionTitleFunction=${this.sectionTitleFunction}
-        .selectedSection=${this.selectedSection}
       ></ha-picker-combo-box>
     `;
   }

src/components/ha-label-picker.ts

@@ -224,9 +224,8 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .label=${this.label}
-        .notFoundLabel=${this._notFoundLabel}
-        .emptyLabel=${this.hass.localize(
-          "ui.components.label-picker.no_labels"
+        .notFoundLabel=${this.hass.localize(
+          "ui.components.label-picker.no_match"
         )}
         .addButtonLabel=${this.hass.localize("ui.components.label-picker.add")}
         .placeholder=${placeholder}
@@ -289,11 +288,6 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
       fireEvent(this, "change");
     }, 0);
   }
-
-  private _notFoundLabel = (search: string) =>
-    this.hass.localize("ui.components.label-picker.no_match", {
-      term: html`<b>‘${search}’</b>`,
-    });
 }
 
 declare global {

src/components/ha-label.ts

@@ -1,32 +1,17 @@
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { uid } from "../common/util/uid";
-import "./ha-tooltip";
 
 @customElement("ha-label")
 class HaLabel extends LitElement {
   @property({ type: Boolean, reflect: true }) dense = false;
 
-  @property({ attribute: "description" })
-  public description?: string;
-
-  private _elementId = "label-" + uid();
-
   protected render(): TemplateResult {
     return html`
-      <ha-tooltip
-        .for=${this._elementId}
-        .disabled=${!this.description?.trim()}
-      >
-        ${this.description}
-      </ha-tooltip>
-      <div class="container" .id=${this._elementId}>
-        <span class="content">
-          <slot name="icon"></slot>
-          <slot></slot>
-        </span>
-      </div>
+      <span class="content">
+        <slot name="icon"></slot>
+        <slot></slot>
+      </span>
     `;
   }
 
@@ -51,7 +36,9 @@ class HaLabel extends LitElement {
           font-weight: var(--ha-font-weight-medium);
           line-height: var(--ha-line-height-condensed);
           letter-spacing: 0.1px;
+          vertical-align: middle;
           height: 32px;
+          padding: 0 16px;
           border-radius: var(--ha-border-radius-xl);
           color: var(--ha-label-text-color);
           --mdc-icon-size: 12px;
@@ -79,23 +66,14 @@ class HaLabel extends LitElement {
           display: flex;
         }
 
-        .container {
-          display: flex;
-          position: relative;
-          height: 100%;
-          padding: 0 16px;
-        }
-
         span {
           display: inline-flex;
         }
 
         :host([dense]) {
           height: 20px;
-          border-radius: var(--ha-border-radius-md);
-        }
-        :host([dense]) .container {
           padding: 0 12px;
+          border-radius: var(--ha-border-radius-md);
         }
         :host([dense]) ::slotted([slot="icon"]) {
           margin-right: 4px;

src/components/ha-labels-picker.ts

@@ -21,7 +21,6 @@ import "./chips/ha-input-chip";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-label-picker";
 import type { HaLabelPicker } from "./ha-label-picker";
-import "./ha-tooltip";
 
 @customElement("ha-labels-picker")
 export class HaLabelsPicker extends SubscribeMixin(LitElement) {
@@ -143,17 +142,9 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
                   const color = label?.color
                     ? computeCssColor(label.color)
                     : undefined;
-                  const elementId = "label-" + label.label_id;
                   return html`
-                    <ha-tooltip
-                      .for=${elementId}
-                      .disabled=${!label?.description?.trim()}
-                    >
-                      ${label?.description}
-                    </ha-tooltip>
                     <ha-input-chip
                       .item=${label}
-                      .id=${elementId}
                       @remove=${this._removeItem}
                       @click=${this._openDetail}
                       .disabled=${this.disabled}

src/components/ha-language-picker.ts

@@ -125,10 +125,9 @@ export class HaLanguagePicker extends LitElement {
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         popover-placement="bottom-end"
-        .notFoundLabel=${this._notFoundLabel}
-        .emptyLabel=${this.hass?.localize(
-          "ui.components.language-picker.no_languages"
-        ) || "No languages available"}
+        .notFoundLabel=${this.hass?.localize(
+          "ui.components.language-picker.no_match"
+        )}
         .placeholder=${this.label ??
         (this.hass?.localize("ui.components.language-picker.language") ||
           "Language")}
@@ -173,15 +172,6 @@ export class HaLanguagePicker extends LitElement {
     this.value = ev.detail.value;
     fireEvent(this, "value-changed", { value: this.value });
   }
-
-  private _notFoundLabel = (search: string) => {
-    const term = html`<b>‘${search}’</b>`;
-    return this.hass
-      ? this.hass.localize("ui.components.language-picker.no_match", {
-          term,
-        })
-      : html`No languages found for ${term}`;
-  };
 }
 
 declare global {

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

@@ -1,8 +1,7 @@
 import { ListItemEl } from "@material/web/list/internal/listitem/list-item";
 import { styles } from "@material/web/list/internal/listitem/list-item-styles";
-import { css, html, nothing, type TemplateResult } from "lit";
+import { css } from "lit";
 import { customElement } from "lit/decorators";
-import "./ha-ripple";
 
 export const haMdListStyles = [
   styles,
@@ -26,18 +25,6 @@ export const haMdListStyles = [
 @customElement("ha-md-list-item")
 export class HaMdListItem extends ListItemEl {
   static override styles = haMdListStyles;
-
-  protected renderRipple(): TemplateResult | typeof nothing {
-    if (this.type === "text") {
-      return nothing;
-    }
-
-    return html`<ha-ripple
-      part="ripple"
-      for="item"
-      ?disabled=${this.disabled && this.type !== "link"}
-    ></ha-ripple>`;
-  }
 }
 
 declare global {

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

@@ -1,6 +1,6 @@
 import type { LitVirtualizer } from "@lit-labs/virtualizer";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import { mdiMagnify, mdiMinusBoxOutline } from "@mdi/js";
+import { mdiMagnify } from "@mdi/js";
 import Fuse from "fuse.js";
 import { css, html, LitElement, nothing } from "lit";
 import {
@@ -14,12 +14,11 @@ import memoizeOne from "memoize-one";
 import { tinykeys } from "tinykeys";
 import { fireEvent } from "../common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
+import type { LocalizeFunc } from "../common/translations/localize";
 import { HaFuse } from "../resources/fuse";
 import { haStyleScrollbar } from "../resources/styles";
 import { loadVirtualizer } from "../resources/virtualizer";
 import type { HomeAssistant } from "../types";
-import "./chips/ha-chip-set";
-import "./chips/ha-filter-chip";
 import "./ha-combo-box-item";
 import "./ha-icon";
 import "./ha-textfield";
@@ -28,18 +27,28 @@ import type { HaTextField } from "./ha-textfield";
 export interface PickerComboBoxItem {
   id: string;
   primary: string;
+  a11y_label?: string;
   secondary?: string;
   search_labels?: string[];
   sorting_label?: string;
   icon_path?: string;
   icon?: string;
 }
-const NO_ITEMS_AVAILABLE_ID = "___no_items_available___";
+
+// Hack to force empty label to always display empty value by default in the search field
+export interface PickerComboBoxItemWithLabel extends PickerComboBoxItem {
+  a11y_label: string;
+}
+
+const NO_MATCHING_ITEMS_FOUND_ID = "___no_matching_items_found___";
 
 const DEFAULT_ROW_RENDERER: RenderItemFunction<PickerComboBoxItem> = (
   item
 ) => html`
-  <ha-combo-box-item type="button" compact>
+  <ha-combo-box-item
+    .type=${item.id === NO_MATCHING_ITEMS_FOUND_ID ? "text" : "button"}
+    compact
+  >
     ${item.icon
       ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
       : item.icon_path
@@ -78,11 +87,8 @@ export class HaPickerComboBox extends LitElement {
 
   @state() private _listScrolled = false;
 
-  @property({ attribute: false })
-  public getItems?: (
-    searchString?: string,
-    section?: string
-  ) => (PickerComboBoxItem | string)[];
+  @property({ attribute: false, type: Array })
+  public getItems?: () => PickerComboBoxItem[];
 
   @property({ attribute: false, type: Array })
   public getAdditionalItems?: (searchString?: string) => PickerComboBoxItem[];
@@ -90,45 +96,21 @@ export class HaPickerComboBox extends LitElement {
   @property({ attribute: false })
   public rowRenderer?: RenderItemFunction<PickerComboBoxItem>;
 
-  @property({ attribute: false })
-  public notFoundLabel?: string | ((search: string) => string);
-
-  @property({ attribute: "empty-label" })
-  public emptyLabel?: string;
+  @property({ attribute: "not-found-label", type: String })
+  public notFoundLabel?: string;
 
   @property({ attribute: false })
   public searchFn?: PickerComboBoxSearchFn<PickerComboBoxItem>;
 
   @property({ reflect: true }) public mode: "popover" | "dialog" = "popover";
 
-  /** Section filter buttons for the list, section headers needs to be defined in getItems as strings */
-  @property({ attribute: false }) public sections?: (
-    | {
-        id: string;
-        label: string;
-      }
-    | "separator"
-  )[];
-
-  @property({ attribute: false }) public sectionTitleFunction?: (listInfo: {
-    firstIndex: number;
-    lastIndex: number;
-    firstItem: PickerComboBoxItem | string;
-    secondItem: PickerComboBoxItem | string;
-    itemsCount: number;
-  }) => string | undefined;
-
-  @property({ attribute: "selected-section" }) public selectedSection?: string;
-
   @query("lit-virtualizer") private _virtualizerElement?: LitVirtualizer;
 
   @query("ha-textfield") private _searchFieldElement?: HaTextField;
 
-  @state() private _items: (PickerComboBoxItem | string)[] = [];
+  @state() private _items: PickerComboBoxItemWithLabel[] = [];
 
-  @state() private _sectionTitle?: string;
-
-  private _allItems: (PickerComboBoxItem | string)[] = [];
+  private _allItems: PickerComboBoxItemWithLabel[] = [];
 
   private _selectedItemIndex = -1;
 
@@ -139,8 +121,6 @@ export class HaPickerComboBox extends LitElement {
 
   private _removeKeyboardShortcuts?: () => void;
 
-  private _search = "";
-
   protected firstUpdated() {
     this._registerKeyboardShortcuts();
   }
@@ -165,142 +145,74 @@ export class HaPickerComboBox extends LitElement {
         "Search"}
         @input=${this._filterChanged}
       ></ha-textfield>
-      ${this._renderSectionButtons()}
-      ${this.sections?.length
-        ? html`
-            <div class="section-title-wrapper">
-              <div
-                class="section-title ${!this.selectedSection &&
-                this._sectionTitle
-                  ? "show"
-                  : ""}"
-              >
-                ${this._sectionTitle}
-              </div>
-            </div>
-          `
-        : nothing}
       <lit-virtualizer
-        .keyFunction=${this._keyFunction}
+        @scroll=${this._onScrollList}
         tabindex="0"
         scroller
         .items=${this._items}
         .renderItem=${this._renderItem}
         style="min-height: 36px;"
         class=${this._listScrolled ? "scrolled" : ""}
-        @scroll=${this._onScrollList}
         @focus=${this._focusList}
-        @visibilityChanged=${this._visibilityChanged}
       >
       </lit-virtualizer> `;
   }
 
-  private _renderSectionButtons() {
-    if (!this.sections || this.sections.length === 0) {
-      return nothing;
-    }
+  private _defaultNotFoundItem = memoizeOne(
+    (
+      label: this["notFoundLabel"],
+      localize?: LocalizeFunc
+    ): PickerComboBoxItemWithLabel => ({
+      id: NO_MATCHING_ITEMS_FOUND_ID,
+      primary:
+        label ||
+        (localize && localize("ui.components.combo-box.no_match")) ||
+        "No matching items found",
+      icon_path: mdiMagnify,
+      a11y_label:
+        label ||
+        (localize && localize("ui.components.combo-box.no_match")) ||
+        "No matching items found",
+    })
+  );
 
-    return html`
-      <ha-chip-set class="sections">
-        ${this.sections.map((section) =>
-          section === "separator"
-            ? html`<div class="separator"></div>`
-            : html`<ha-filter-chip
-                @click=${this._toggleSection}
-                .section-id=${section.id}
-                .selected=${this.selectedSection === section.id}
-                .label=${section.label}
-              >
-              </ha-filter-chip>`
-        )}
-      </ha-chip-set>
-    `;
-  }
+  private _getAdditionalItems = (searchString?: string) => {
+    const items = this.getAdditionalItems?.(searchString) || [];
 
-  @eventOptions({ passive: true })
-  private _visibilityChanged(ev) {
-    if (
-      this._virtualizerElement &&
-      this.sectionTitleFunction &&
-      this.sections?.length
-    ) {
-      const firstItem = this._virtualizerElement.items[ev.first];
-      const secondItem = this._virtualizerElement.items[ev.first + 1];
-      this._sectionTitle = this.sectionTitleFunction({
-        firstIndex: ev.first,
-        lastIndex: ev.last,
-        firstItem: firstItem as PickerComboBoxItem | string,
-        secondItem: secondItem as PickerComboBoxItem | string,
-        itemsCount: this._virtualizerElement.items.length,
-      });
-    }
-  }
+    return items.map<PickerComboBoxItemWithLabel>((item) => ({
+      ...item,
+      a11y_label: item.a11y_label || item.primary,
+    }));
+  };
 
-  private _getAdditionalItems = (searchString?: string) =>
-    this.getAdditionalItems?.(searchString) || [];
+  private _getItems = (): PickerComboBoxItemWithLabel[] => {
+    const items = this.getItems ? this.getItems() : [];
 
-  private _getItems = () => {
-    let items = [
-      ...(this.getItems
-        ? this.getItems(this._search, this.selectedSection)
-        : []),
-    ];
-
-    if (!this.sections?.length) {
-      items = items.sort((entityA, entityB) =>
+    const sortedItems = items
+      .map<PickerComboBoxItemWithLabel>((item) => ({
+        ...item,
+        a11y_label: item.a11y_label || item.primary,
+      }))
+      .sort((entityA, entityB) =>
         caseInsensitiveStringCompare(
-          (entityA as PickerComboBoxItem).sorting_label!,
-          (entityB as PickerComboBoxItem).sorting_label!,
+          entityA.sorting_label!,
+          entityB.sorting_label!,
           this.hass?.locale.language ?? navigator.language
         )
       );
-    }
 
-    if (!items.length) {
-      items.push(NO_ITEMS_AVAILABLE_ID);
+    if (!sortedItems.length) {
+      sortedItems.push(
+        this._defaultNotFoundItem(this.notFoundLabel, this.hass?.localize)
+      );
     }
 
     const additionalItems = this._getAdditionalItems();
-    items.push(...additionalItems);
-
-    if (this.mode === "dialog") {
-      items.push("padding"); // padding for safe area inset
-    }
-
-    return items;
+    sortedItems.push(...additionalItems);
+    return sortedItems;
   };
 
-  private _renderItem = (item: PickerComboBoxItem | string, index: number) => {
-    if (item === "padding") {
-      return html`<div class="bottom-padding"></div>`;
-    }
-    if (item === NO_ITEMS_AVAILABLE_ID) {
-      return html`
-        <div class="combo-box-row">
-          <ha-combo-box-item type="text" compact>
-            <ha-svg-icon
-              slot="start"
-              .path=${this._search ? mdiMagnify : mdiMinusBoxOutline}
-            ></ha-svg-icon>
-            <span slot="headline"
-              >${this._search
-                ? typeof this.notFoundLabel === "function"
-                  ? this.notFoundLabel(this._search)
-                  : this.notFoundLabel ||
-                    this.hass?.localize("ui.components.combo-box.no_match") ||
-                    "No matching items found"
-                : this.emptyLabel ||
-                  this.hass?.localize("ui.components.combo-box.no_items") ||
-                  "No items available"}</span
-            >
-          </ha-combo-box-item>
-        </div>
-      `;
-    }
-    if (typeof item === "string") {
-      return html`<div class="title">${item}</div>`;
-    }
-
+  private _renderItem = (item: PickerComboBoxItem, index: number) => {
     const renderer = this.rowRenderer || DEFAULT_ROW_RENDERER;
     return html`<div
       id=${`list-item-${index}`}
@@ -309,7 +221,9 @@ export class HaPickerComboBox extends LitElement {
       .index=${index}
       @click=${this._valueSelected}
     >
-      ${renderer(item, index)}
+      ${item.id === NO_MATCHING_ITEMS_FOUND_ID
+        ? DEFAULT_ROW_RENDERER(item, index)
+        : renderer(item, index)}
     </div>`;
   };
 
@@ -328,6 +242,10 @@ export class HaPickerComboBox extends LitElement {
     const value = (ev.currentTarget as any).value as string;
     const newValue = value?.trim();
 
+    if (newValue === NO_MATCHING_ITEMS_FOUND_ID) {
+      return;
+    }
+
     fireEvent(this, "value-changed", { value: newValue });
   };
 
@@ -338,83 +256,51 @@ export class HaPickerComboBox extends LitElement {
   private _filterChanged = (ev: Event) => {
     const textfield = ev.target as HaTextField;
     const searchString = textfield.value.trim();
-    this._search = searchString;
 
-    if (this.sections?.length) {
-      this._items = this._getItems();
-    } else {
-      if (!searchString) {
-        this._items = this._allItems;
-        return;
-      }
-
-      const index = this._fuseIndex(this._allItems as PickerComboBoxItem[]);
-      const fuse = new HaFuse(
-        this._allItems as PickerComboBoxItem[],
-        {
-          shouldSort: false,
-          minMatchCharLength: Math.min(searchString.length, 2),
-        },
-        index
-      );
-
-      const results = fuse.multiTermsSearch(searchString);
-      let filteredItems = [...this._allItems];
-
-      if (results) {
-        const items: (PickerComboBoxItem | string)[] = results.map(
-          (result) => result.item
-        );
-
-        if (!items.length) {
-          filteredItems.push(NO_ITEMS_AVAILABLE_ID);
-        }
-
-        const additionalItems = this._getAdditionalItems();
-        items.push(...additionalItems);
-
-        filteredItems = items;
-      }
-
-      if (this.searchFn) {
-        filteredItems = this.searchFn(
-          searchString,
-          filteredItems as PickerComboBoxItem[],
-          this._allItems as PickerComboBoxItem[]
-        );
-      }
-
-      this._items = filteredItems as PickerComboBoxItem[];
+    if (!searchString) {
+      this._items = this._allItems;
+      return;
     }
 
+    const index = this._fuseIndex(this._allItems);
+    const fuse = new HaFuse(
+      this._allItems,
+      {
+        shouldSort: false,
+        minMatchCharLength: Math.min(searchString.length, 2),
+      },
+      index
+    );
+
+    const results = fuse.multiTermsSearch(searchString);
+    let filteredItems = this._allItems as PickerComboBoxItem[];
+    if (results) {
+      const items = results.map((result) => result.item);
+      if (items.length === 0) {
+        items.push(
+          this._defaultNotFoundItem(this.notFoundLabel, this.hass?.localize)
+        );
+      }
+      const additionalItems = this._getAdditionalItems(searchString);
+      items.push(...additionalItems);
+      filteredItems = items;
+    }
+
+    if (this.searchFn) {
+      filteredItems = this.searchFn(
+        searchString,
+        filteredItems,
+        this._allItems
+      );
+    }
+
+    this._items = filteredItems as PickerComboBoxItemWithLabel[];
     this._selectedItemIndex = -1;
     if (this._virtualizerElement) {
       this._virtualizerElement.scrollTo(0, 0);
     }
   };
 
-  private _toggleSection(ev: Event) {
-    ev.stopPropagation();
-    this._resetSelectedItem();
-    this._sectionTitle = undefined;
-    const section = (ev.target as HTMLElement)["section-id"] as string;
-    if (!section) {
-      return;
-    }
-    if (this.selectedSection === section) {
-      this.selectedSection = undefined;
-    } else {
-      this.selectedSection = section;
-    }
-
-    this._items = this._getItems();
-
-    // Reset scroll position when filter changes
-    if (this._virtualizerElement) {
-      this._virtualizerElement.scrollToIndex(0);
-    }
-  }
-
   private _registerKeyboardShortcuts() {
     this._removeKeyboardShortcuts = tinykeys(this, {
       ArrowUp: this._selectPreviousItem,
@@ -458,7 +344,7 @@ export class HaPickerComboBox extends LitElement {
       return;
     }
 
-    if (typeof items[nextIndex] === "string") {
+    if (items[nextIndex].id === NO_MATCHING_ITEMS_FOUND_ID) {
       // Skip titles, padding and empty search
       if (nextIndex === maxItems) {
         return;
@@ -487,7 +373,7 @@ export class HaPickerComboBox extends LitElement {
         return;
       }
 
-      if (typeof items[nextIndex] === "string") {
+      if (items[nextIndex]?.id === NO_MATCHING_ITEMS_FOUND_ID) {
         // Skip titles, padding and empty search
         if (nextIndex === 0) {
           return;
@@ -509,6 +395,13 @@ export class HaPickerComboBox extends LitElement {
 
     const nextIndex = 0;
 
+    if (
+      (this._virtualizerElement.items[nextIndex] as PickerComboBoxItem)?.id ===
+      NO_MATCHING_ITEMS_FOUND_ID
+    ) {
+      return;
+    }
+
     if (typeof this._virtualizerElement.items[nextIndex] === "string") {
       this._selectedItemIndex = nextIndex + 1;
     } else {
@@ -526,6 +419,13 @@ export class HaPickerComboBox extends LitElement {
 
     const nextIndex = this._virtualizerElement.items.length - 1;
 
+    if (
+      (this._virtualizerElement.items[nextIndex] as PickerComboBoxItem)?.id ===
+      NO_MATCHING_ITEMS_FOUND_ID
+    ) {
+      return;
+    }
+
     if (typeof this._virtualizerElement.items[nextIndex] === "string") {
       this._selectedItemIndex = nextIndex - 1;
     } else {
@@ -553,7 +453,10 @@ export class HaPickerComboBox extends LitElement {
     ev.stopPropagation();
     const firstItem = this._virtualizerElement?.items[0] as PickerComboBoxItem;
 
-    if (this._virtualizerElement?.items.length === 1) {
+    if (
+      this._virtualizerElement?.items.length === 1 &&
+      firstItem.id !== NO_MATCHING_ITEMS_FOUND_ID
+    ) {
       fireEvent(this, "value-changed", {
         value: firstItem.id,
       });
@@ -569,7 +472,7 @@ export class HaPickerComboBox extends LitElement {
     const item = this._virtualizerElement?.items[
       this._selectedItemIndex
     ] as PickerComboBoxItem;
-    if (item) {
+    if (item && item.id !== NO_MATCHING_ITEMS_FOUND_ID) {
       fireEvent(this, "value-changed", { value: item.id });
     }
   };
@@ -581,9 +484,6 @@ export class HaPickerComboBox extends LitElement {
     this._selectedItemIndex = -1;
   }
 
-  private _keyFunction = (item: PickerComboBoxItem | string) =>
-    typeof item === "string" ? item : item.id;
-
   static styles = [
     haStyleScrollbar,
     css`
@@ -658,80 +558,6 @@ export class HaPickerComboBox extends LitElement {
           background-color: var(--ha-color-fill-neutral-normal-hover);
         }
       }
-
-      .sections {
-        display: flex;
-        flex-wrap: nowrap;
-        gap: var(--ha-space-2);
-        padding: var(--ha-space-3) var(--ha-space-3);
-        overflow: auto;
-      }
-
-      :host([mode="dialog"]) .sections {
-        padding: var(--ha-space-3) var(--ha-space-4);
-      }
-
-      .sections ha-filter-chip {
-        flex-shrink: 0;
-        --md-filter-chip-selected-container-color: var(
-          --ha-color-fill-primary-normal-hover
-        );
-        color: var(--primary-color);
-      }
-
-      .sections .separator {
-        height: var(--ha-space-8);
-        width: 0;
-        border: 1px solid var(--ha-color-border-neutral-quiet);
-      }
-
-      .section-title,
-      .title {
-        background-color: var(--ha-color-fill-neutral-quiet-resting);
-        padding: var(--ha-space-1) var(--ha-space-2);
-        font-weight: var(--ha-font-weight-bold);
-        color: var(--secondary-text-color);
-        min-height: var(--ha-space-6);
-        display: flex;
-        align-items: center;
-      }
-
-      .title {
-        width: 100%;
-      }
-
-      :host([mode="dialog"]) .title {
-        padding: var(--ha-space-1) var(--ha-space-4);
-      }
-
-      :host([mode="dialog"]) ha-textfield {
-        padding: 0 var(--ha-space-4);
-      }
-
-      .section-title-wrapper {
-        height: 0;
-        position: relative;
-      }
-
-      .section-title {
-        opacity: 0;
-        position: absolute;
-        top: 1px;
-        width: calc(100% - var(--ha-space-8));
-      }
-
-      .section-title.show {
-        opacity: 1;
-        z-index: 1;
-      }
-
-      .empty-search {
-        display: flex;
-        width: 100%;
-        flex-direction: column;
-        align-items: center;
-        padding: var(--ha-space-3);
-      }
     `,
   ];
 }

src/components/ha-sidebar.ts

@@ -157,9 +157,7 @@ export const computePanels = memoizeOne(
     Object.values(panels).forEach((panel) => {
       if (
         hiddenPanels.includes(panel.url_path) ||
-        (!panel.title && panel.url_path !== defaultPanel) ||
-        (panel.default_visible === false &&
-          !panelsOrder.includes(panel.url_path))
+        (!panel.title && panel.url_path !== defaultPanel)
       ) {
         return;
       }

src/components/ha-target-picker.ts

@@ -1,31 +1,15 @@
 import "@home-assistant/webawesome/dist/components/popover/popover";
-import { consume } from "@lit/context";
 // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import { mdiPlus, mdiTextureBox } from "@mdi/js";
-import Fuse from "fuse.js";
+import { mdiPlaylistPlus } from "@mdi/js";
 import type { HassServiceTarget } from "home-assistant-js-websocket";
-import type { CSSResultGroup, PropertyValues } from "lit";
+import type { CSSResultGroup } from "lit";
 import { LitElement, css, html, nothing, unsafeCSS } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
-import memoizeOne from "memoize-one";
+import { customElement, property, query, state } from "lit/decorators";
 import { ensureArray } from "../common/array/ensure-array";
 import { fireEvent } from "../common/dom/fire_event";
 import { isValidEntityId } from "../common/entity/valid_entity_id";
-import { computeRTL } from "../common/util/compute_rtl";
-import {
-  getAreasAndFloors,
-  type AreaFloorValue,
-  type FloorComboBoxItem,
-} from "../data/area_floor";
-import { getConfigEntries, type ConfigEntry } from "../data/config_entries";
-import { labelsContext } from "../data/context";
-import { getDevices, type DevicePickerItem } from "../data/device_registry";
 import type { HaEntityPickerEntityFilterFunc } from "../data/entity";
-import { getEntities, type EntityComboBoxItem } from "../data/entity_registry";
-import { domainToName } from "../data/integration";
-import { getLabels, type LabelRegistryEntry } from "../data/label_registry";
 import {
   areaMeetsFilter,
   deviceMeetsFilter,
@@ -34,23 +18,18 @@ import {
   type TargetTypeFloorless,
 } from "../data/target";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
-import { isHelperDomain } from "../panels/config/helpers/const";
 import { showHelperDetailDialog } from "../panels/config/helpers/show-dialog-helper-detail";
-import { HaFuse } from "../resources/fuse";
 import type { HomeAssistant } from "../types";
-import { brandsUrl } from "../util/brands-url";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import "./ha-generic-picker";
-import type { PickerComboBoxItem } from "./ha-picker-combo-box";
+import "./ha-bottom-sheet";
+import "./ha-button";
+import "./ha-input-helper-text";
 import "./ha-svg-icon";
-import "./ha-tree-indicator";
 import "./target-picker/ha-target-picker-item-group";
+import "./target-picker/ha-target-picker-selector";
+import type { HaTargetPickerSelector } from "./target-picker/ha-target-picker-selector";
 import "./target-picker/ha-target-picker-value-chip";
 
-const EMPTY_SEARCH = "___EMPTY_SEARCH___";
-const SEPARATOR = "________";
-const CREATE_ID = "___create-new-entity___";
-
 @customElement("ha-target-picker")
 export class HaTargetPicker extends SubscribeMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -89,54 +68,23 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property({ attribute: "add-on-top", type: Boolean }) public addOnTop = false;
 
-  @state() private _selectedSection?: TargetTypeFloorless;
+  @state() private _open = false;
 
-  @state() private _configEntryLookup: Record<string, ConfigEntry> = {};
+  @state() private _addTargetWidth = 0;
 
-  @state()
-  @consume({ context: labelsContext, subscribe: true })
-  private _labelRegistry!: LabelRegistryEntry[];
+  @state() private _narrow = false;
+
+  @state() private _pickerFilter?: TargetTypeFloorless;
+
+  @state() private _pickerWrapperOpen = false;
+
+  @query(".add-target-wrapper") private _addTargetWrapper?: HTMLDivElement;
+
+  @query("ha-target-picker-selector")
+  private _targetPickerSelectorElement?: HaTargetPickerSelector;
 
   private _newTarget?: { type: TargetType; id: string };
 
-  private _getDevicesMemoized = memoizeOne(getDevices);
-
-  private _getLabelsMemoized = memoizeOne(getLabels);
-
-  private _getEntitiesMemoized = memoizeOne(getEntities);
-
-  private _getAreasAndFloorsMemoized = memoizeOne(getAreasAndFloors);
-
-  private get _showEntityId() {
-    return this.hass.userData?.showEntityIdPicker;
-  }
-
-  private _fuseIndexes = {
-    area: memoizeOne((states: FloorComboBoxItem[]) =>
-      this._createFuseIndex(states)
-    ),
-    entity: memoizeOne((states: EntityComboBoxItem[]) =>
-      this._createFuseIndex(states)
-    ),
-    device: memoizeOne((states: DevicePickerItem[]) =>
-      this._createFuseIndex(states)
-    ),
-    label: memoizeOne((states: PickerComboBoxItem[]) =>
-      this._createFuseIndex(states)
-    ),
-  };
-
-  public willUpdate(changedProps: PropertyValues) {
-    super.willUpdate(changedProps);
-
-    if (!this.hasUpdated) {
-      this._loadConfigEntries();
-    }
-  }
-
-  private _createFuseIndex = (states) =>
-    Fuse.createIndex(["search_labels"], states);
-
   protected render() {
     if (this.addOnTop) {
       return html` ${this._renderPicker()} ${this._renderItems()} `;
@@ -341,63 +289,137 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
   }
 
   private _renderPicker() {
-    const sections = [
-      {
-        id: "entity",
-        label: this.hass.localize("ui.components.target-picker.type.entities"),
-      },
-      {
-        id: "device",
-        label: this.hass.localize("ui.components.target-picker.type.devices"),
-      },
-      {
-        id: "area",
-        label: this.hass.localize("ui.components.target-picker.type.areas"),
-      },
-      "separator" as const,
-      {
-        id: "label",
-        label: this.hass.localize("ui.components.target-picker.type.labels"),
-      },
-    ];
-
     return html`
       <div class="add-target-wrapper">
-        <ha-generic-picker
-          .hass=${this.hass}
-          .disabled=${this.disabled}
-          .autofocus=${this.autofocus}
-          .helper=${this.helper}
-          .sections=${sections}
-          .notFoundLabel=${this._noTargetFoundLabel}
-          .emptyLabel=${this.hass.localize(
-            "ui.components.target-picker.no_targets"
-          )}
-          .sectionTitleFunction=${this._sectionTitleFunction}
-          .selectedSection=${this._selectedSection}
-          .rowRenderer=${this._renderRow}
-          .getItems=${this._getItems}
-          @value-changed=${this._targetPicked}
-          .addButtonLabel=${this.hass.localize(
-            "ui.components.target-picker.add_target"
-          )}
-          .getAdditionalItems=${this._getAdditionalItems}
+        <ha-button
+          id="add-target-button"
+          size="small"
+          appearance="filled"
+          @click=${this._showPicker}
         >
-        </ha-generic-picker>
+          <ha-svg-icon .path=${mdiPlaylistPlus} slot="start"></ha-svg-icon>
+          ${this.hass.localize("ui.components.target-picker.add_target")}
+        </ha-button>
+        ${!this._narrow && (this._pickerWrapperOpen || this._open)
+          ? html`
+              <wa-popover
+                .open=${this._pickerWrapperOpen}
+                style="--body-width: ${this._addTargetWidth}px;"
+                without-arrow
+                distance="-4"
+                placement="bottom-start"
+                for="add-target-button"
+                auto-size="vertical"
+                auto-size-padding="16"
+                @wa-after-show=${this._showSelector}
+                @wa-after-hide=${this._hidePicker}
+                trap-focus
+                role="dialog"
+                aria-modal="true"
+                aria-label=${this.hass.localize(
+                  "ui.components.target-picker.add_target"
+                )}
+              >
+                ${this._renderTargetSelector()}
+              </wa-popover>
+            `
+          : this._pickerWrapperOpen || this._open
+            ? html`<ha-bottom-sheet
+                flexcontent
+                .open=${this._pickerWrapperOpen}
+                @wa-after-show=${this._showSelector}
+                @closed=${this._hidePicker}
+                role="dialog"
+                aria-modal="true"
+                aria-label=${this.hass.localize(
+                  "ui.components.target-picker.add_target"
+                )}
+              >
+                ${this._renderTargetSelector(true)}
+              </ha-bottom-sheet>`
+            : nothing}
       </div>
+      ${this.helper
+        ? html`<ha-input-helper-text .disabled=${this.disabled}
+            >${this.helper}</ha-input-helper-text
+          >`
+        : nothing}
     `;
   }
 
-  private _targetPicked(ev: CustomEvent<{ value: string }>) {
-    ev.stopPropagation();
-    const value = ev.detail.value;
-    if (value.startsWith(CREATE_ID)) {
-      this._createNewDomainElement(value.substring(CREATE_ID.length));
-      return;
-    }
+  connectedCallback() {
+    super.connectedCallback();
+    this._handleResize();
+    window.addEventListener("resize", this._handleResize);
+  }
 
-    const [type, id] = ev.detail.value.split(SEPARATOR);
-    this._addTarget(id, type as TargetType);
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("resize", this._handleResize);
+  }
+
+  private _handleResize = () => {
+    this._narrow =
+      window.matchMedia("(max-width: 870px)").matches ||
+      window.matchMedia("(max-height: 500px)").matches;
+  };
+
+  private _showPicker() {
+    this._addTargetWidth = this._addTargetWrapper?.offsetWidth || 0;
+    this._pickerWrapperOpen = true;
+  }
+
+  // wait for drawer animation to finish
+  private _showSelector = () => {
+    this._open = true;
+    requestAnimationFrame(() => {
+      this._targetPickerSelectorElement?.focus();
+    });
+  };
+
+  private _handleUpdatePickerFilter(
+    ev: CustomEvent<TargetTypeFloorless | undefined>
+  ) {
+    this._updatePickerFilter(
+      typeof ev.detail === "string" ? ev.detail : undefined
+    );
+  }
+
+  private _updatePickerFilter = (filter?: TargetTypeFloorless) => {
+    this._pickerFilter = filter;
+  };
+
+  private _hidePicker(ev) {
+    ev.stopPropagation();
+    this._open = false;
+    this._pickerWrapperOpen = false;
+
+    if (this._newTarget) {
+      this._addTarget(this._newTarget.id, this._newTarget.type);
+      this._newTarget = undefined;
+    }
+  }
+
+  private _renderTargetSelector(dialogMode = false) {
+    if (!this._open) {
+      return nothing;
+    }
+    return html`
+      <ha-target-picker-selector
+        .hass=${this.hass}
+        @filter-type-changed=${this._handleUpdatePickerFilter}
+        .filterType=${this._pickerFilter}
+        @target-picked=${this._handleTargetPicked}
+        @create-domain-picked=${this._handleCreateDomain}
+        .targetValue=${this.value}
+        .deviceFilter=${this.deviceFilter}
+        .entityFilter=${this.entityFilter}
+        .includeDomains=${this.includeDomains}
+        .includeDeviceClasses=${this.includeDeviceClasses}
+        .createDomains=${this.createDomains}
+        .mode=${dialogMode ? "dialog" : "popover"}
+      ></ha-target-picker-selector>
+    `;
   }
 
   private _addTarget(id: string, type: TargetType) {
@@ -432,7 +454,26 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       ?.removeAttribute("collapsed");
   }
 
-  private _createNewDomainElement = (domain: string) => {
+  private _handleTargetPicked = async (
+    ev: CustomEvent<{ type: TargetType; id: string }>
+  ) => {
+    ev.stopPropagation();
+
+    this._pickerWrapperOpen = false;
+
+    if (!ev.detail.type || !ev.detail.id) {
+      return;
+    }
+
+    // save new target temporarily to add it after dialog closes
+    this._newTarget = ev.detail;
+  };
+
+  private _handleCreateDomain = (ev: CustomEvent<string>) => {
+    this._pickerWrapperOpen = false;
+
+    const domain = ev.detail;
+
     showHelperDetailDialog(this, {
       domain,
       dialogClosedCallback: (item) => {
@@ -634,459 +675,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     return undefined;
   }
 
-  private _getRowType = (
-    item:
-      | PickerComboBoxItem
-      | (FloorComboBoxItem & { last?: boolean | undefined })
-      | EntityComboBoxItem
-      | DevicePickerItem
-  ) => {
-    if (
-      (item as FloorComboBoxItem).type === "area" ||
-      (item as FloorComboBoxItem).type === "floor"
-    ) {
-      return (item as FloorComboBoxItem).type;
-    }
-
-    if ("domain" in item) {
-      return "device";
-    }
-
-    if ("stateObj" in item) {
-      return "entity";
-    }
-
-    if (item.id === EMPTY_SEARCH) {
-      return "empty";
-    }
-
-    return "label";
-  };
-
-  private _sectionTitleFunction = ({
-    firstIndex,
-    lastIndex,
-    firstItem,
-    secondItem,
-    itemsCount,
-  }: {
-    firstIndex: number;
-    lastIndex: number;
-    firstItem: PickerComboBoxItem | string;
-    secondItem: PickerComboBoxItem | string;
-    itemsCount: number;
-  }) => {
-    if (
-      firstItem === undefined ||
-      secondItem === undefined ||
-      typeof firstItem === "string" ||
-      (typeof secondItem === "string" && secondItem !== "padding") ||
-      (firstIndex === 0 && lastIndex === itemsCount - 1)
-    ) {
-      return undefined;
-    }
-
-    const type = this._getRowType(firstItem as PickerComboBoxItem);
-    const translationType:
-      | "areas"
-      | "entities"
-      | "devices"
-      | "labels"
-      | undefined =
-      type === "area" || type === "floor"
-        ? "areas"
-        : type === "entity"
-          ? "entities"
-          : type && type !== "empty"
-            ? `${type}s`
-            : undefined;
-
-    return translationType
-      ? this.hass.localize(
-          `ui.components.target-picker.type.${translationType}`
-        )
-      : undefined;
-  };
-
-  private _getItems = (searchString: string, section: string) => {
-    this._selectedSection = section as TargetTypeFloorless | undefined;
-
-    return this._getItemsMemoized(
-      this.hass.localize,
-      this.entityFilter,
-      this.deviceFilter,
-      this.includeDomains,
-      this.includeDeviceClasses,
-      this.value,
-      searchString,
-      this._configEntryLookup,
-      this._selectedSection
-    );
-  };
-
-  private _getItemsMemoized = memoizeOne(
-    (
-      localize: HomeAssistant["localize"],
-      entityFilter: this["entityFilter"],
-      deviceFilter: this["deviceFilter"],
-      includeDomains: this["includeDomains"],
-      includeDeviceClasses: this["includeDeviceClasses"],
-      targetValue: this["value"],
-      searchTerm: string,
-      configEntryLookup: Record<string, ConfigEntry>,
-      filterType?: TargetTypeFloorless
-    ) => {
-      const items: (
-        | string
-        | FloorComboBoxItem
-        | EntityComboBoxItem
-        | PickerComboBoxItem
-      )[] = [];
-
-      if (!filterType || filterType === "entity") {
-        let entityItems = this._getEntitiesMemoized(
-          this.hass,
-          includeDomains,
-          undefined,
-          entityFilter,
-          includeDeviceClasses,
-          undefined,
-          undefined,
-          targetValue?.entity_id
-            ? ensureArray(targetValue.entity_id)
-            : undefined,
-          undefined,
-          `entity${SEPARATOR}`
-        );
-
-        if (searchTerm) {
-          entityItems = this._filterGroup(
-            "entity",
-            entityItems,
-            searchTerm,
-            (item: EntityComboBoxItem) =>
-              item.stateObj?.entity_id === searchTerm
-          ) as EntityComboBoxItem[];
-        }
-
-        if (!filterType && entityItems.length) {
-          // show group title
-          items.push(localize("ui.components.target-picker.type.entities"));
-        }
-
-        items.push(...entityItems);
-      }
-
-      if (!filterType || filterType === "device") {
-        let deviceItems = this._getDevicesMemoized(
-          this.hass,
-          configEntryLookup,
-          includeDomains,
-          undefined,
-          includeDeviceClasses,
-          deviceFilter,
-          entityFilter,
-          targetValue?.device_id
-            ? ensureArray(targetValue.device_id)
-            : undefined,
-          undefined,
-          `device${SEPARATOR}`
-        );
-
-        if (searchTerm) {
-          deviceItems = this._filterGroup("device", deviceItems, searchTerm);
-        }
-
-        if (!filterType && deviceItems.length) {
-          // show group title
-          items.push(localize("ui.components.target-picker.type.devices"));
-        }
-
-        items.push(...deviceItems);
-      }
-
-      if (!filterType || filterType === "area") {
-        let areasAndFloors = this._getAreasAndFloorsMemoized(
-          this.hass.states,
-          this.hass.floors,
-          this.hass.areas,
-          this.hass.devices,
-          this.hass.entities,
-          memoizeOne((value: AreaFloorValue): string =>
-            [value.type, value.id].join(SEPARATOR)
-          ),
-          includeDomains,
-          undefined,
-          includeDeviceClasses,
-          deviceFilter,
-          entityFilter,
-          targetValue?.area_id ? ensureArray(targetValue.area_id) : undefined,
-          targetValue?.floor_id ? ensureArray(targetValue.floor_id) : undefined
-        );
-
-        if (searchTerm) {
-          areasAndFloors = this._filterGroup(
-            "area",
-            areasAndFloors,
-            searchTerm
-          ) as FloorComboBoxItem[];
-        }
-
-        if (!filterType && areasAndFloors.length) {
-          // show group title
-          items.push(localize("ui.components.target-picker.type.areas"));
-        }
-
-        items.push(
-          ...areasAndFloors.map((item, index) => {
-            const nextItem = areasAndFloors[index + 1];
-
-            if (
-              !nextItem ||
-              (item.type === "area" && nextItem.type === "floor")
-            ) {
-              return {
-                ...item,
-                last: true,
-              };
-            }
-
-            return item;
-          })
-        );
-      }
-
-      if (!filterType || filterType === "label") {
-        let labels = this._getLabelsMemoized(
-          this.hass,
-          this._labelRegistry,
-          includeDomains,
-          undefined,
-          includeDeviceClasses,
-          deviceFilter,
-          entityFilter,
-          targetValue?.label_id ? ensureArray(targetValue.label_id) : undefined,
-          `label${SEPARATOR}`
-        );
-
-        if (searchTerm) {
-          labels = this._filterGroup("label", labels, searchTerm);
-        }
-
-        if (!filterType && labels.length) {
-          // show group title
-          items.push(localize("ui.components.target-picker.type.labels"));
-        }
-
-        items.push(...labels);
-      }
-
-      return items;
-    }
-  );
-
-  private _filterGroup(
-    type: TargetType,
-    items: (FloorComboBoxItem | PickerComboBoxItem | EntityComboBoxItem)[],
-    searchTerm: string,
-    checkExact?: (
-      item: FloorComboBoxItem | PickerComboBoxItem | EntityComboBoxItem
-    ) => boolean
-  ) {
-    const fuseIndex = this._fuseIndexes[type](items);
-    const fuse = new HaFuse(
-      items,
-      {
-        shouldSort: false,
-        minMatchCharLength: Math.min(searchTerm.length, 2),
-      },
-      fuseIndex
-    );
-
-    const results = fuse.multiTermsSearch(searchTerm);
-    let filteredItems = items;
-    if (results) {
-      filteredItems = results.map((result) => result.item);
-    }
-
-    if (!checkExact) {
-      return filteredItems;
-    }
-
-    // If there is exact match for entity id, put it first
-    const index = filteredItems.findIndex((item) => checkExact(item));
-    if (index === -1) {
-      return filteredItems;
-    }
-
-    const [exactMatch] = filteredItems.splice(index, 1);
-    filteredItems.unshift(exactMatch);
-
-    return filteredItems;
-  }
-
-  private _getAdditionalItems = () => this._getCreateItems(this.createDomains);
-
-  private _getCreateItems = memoizeOne(
-    (createDomains: this["createDomains"]) => {
-      if (!createDomains?.length) {
-        return [];
-      }
-
-      return createDomains.map((domain) => {
-        const primary = this.hass.localize(
-          "ui.components.entity.entity-picker.create_helper",
-          {
-            domain: isHelperDomain(domain)
-              ? this.hass.localize(`ui.panel.config.helpers.types.${domain}`)
-              : domainToName(this.hass.localize, domain),
-          }
-        );
-
-        return {
-          id: CREATE_ID + domain,
-          primary: primary,
-          secondary: this.hass.localize(
-            "ui.components.entity.entity-picker.new_entity"
-          ),
-          icon_path: mdiPlus,
-        } satisfies EntityComboBoxItem;
-      });
-    }
-  );
-
-  private async _loadConfigEntries() {
-    const configEntries = await getConfigEntries(this.hass);
-    this._configEntryLookup = Object.fromEntries(
-      configEntries.map((entry) => [entry.entry_id, entry])
-    );
-  }
-
-  private _renderRow = (
-    item:
-      | PickerComboBoxItem
-      | (FloorComboBoxItem & { last?: boolean | undefined })
-      | EntityComboBoxItem
-      | DevicePickerItem,
-    index: number
-  ) => {
-    if (!item) {
-      return nothing;
-    }
-
-    const type = this._getRowType(item);
-    let hasFloor = false;
-    let rtl = false;
-    let showEntityId = false;
-
-    if (type === "area" || type === "floor") {
-      item.id = item[type]?.[`${type}_id`];
-
-      rtl = computeRTL(this.hass);
-      hasFloor =
-        type === "area" && !!(item as FloorComboBoxItem).area?.floor_id;
-    }
-
-    if (type === "entity") {
-      showEntityId = !!this._showEntityId;
-    }
-
-    return html`
-      <ha-combo-box-item
-        id=${`list-item-${index}`}
-        tabindex="-1"
-        .type=${type === "empty" ? "text" : "button"}
-        class=${type === "empty" ? "empty" : ""}
-        style=${(item as FloorComboBoxItem).type === "area" && hasFloor
-          ? "--md-list-item-leading-space: var(--ha-space-12);"
-          : ""}
-      >
-        ${(item as FloorComboBoxItem).type === "area" && hasFloor
-          ? html`
-              <ha-tree-indicator
-                style=${styleMap({
-                  width: "var(--ha-space-12)",
-                  position: "absolute",
-                  top: "var(--ha-space-0)",
-                  left: rtl ? undefined : "var(--ha-space-1)",
-                  right: rtl ? "var(--ha-space-1)" : undefined,
-                  transform: rtl ? "scaleX(-1)" : "",
-                })}
-                .end=${(
-                  item as FloorComboBoxItem & { last?: boolean | undefined }
-                ).last}
-                slot="start"
-              ></ha-tree-indicator>
-            `
-          : nothing}
-        ${item.icon
-          ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
-          : item.icon_path
-            ? html`<ha-svg-icon
-                slot="start"
-                .path=${item.icon_path}
-              ></ha-svg-icon>`
-            : type === "entity" && (item as EntityComboBoxItem).stateObj
-              ? html`
-                  <state-badge
-                    slot="start"
-                    .stateObj=${(item as EntityComboBoxItem).stateObj}
-                    .hass=${this.hass}
-                  ></state-badge>
-                `
-              : type === "device" && (item as DevicePickerItem).domain
-                ? html`
-                    <img
-                      slot="start"
-                      alt=""
-                      crossorigin="anonymous"
-                      referrerpolicy="no-referrer"
-                      src=${brandsUrl({
-                        domain: (item as DevicePickerItem).domain!,
-                        type: "icon",
-                        darkOptimized: this.hass.themes.darkMode,
-                      })}
-                    />
-                  `
-                : type === "floor"
-                  ? html`<ha-floor-icon
-                      slot="start"
-                      .floor=${(item as FloorComboBoxItem).floor!}
-                    ></ha-floor-icon>`
-                  : type === "area"
-                    ? html`<ha-svg-icon
-                        slot="start"
-                        .path=${item.icon_path || mdiTextureBox}
-                      ></ha-svg-icon>`
-                    : nothing}
-        <span slot="headline">${item.primary}</span>
-        ${item.secondary
-          ? html`<span slot="supporting-text">${item.secondary}</span>`
-          : nothing}
-        ${(item as EntityComboBoxItem).stateObj && showEntityId
-          ? html`
-              <span slot="supporting-text" class="code">
-                ${(item as EntityComboBoxItem).stateObj?.entity_id}
-              </span>
-            `
-          : nothing}
-        ${(item as EntityComboBoxItem).domain_name &&
-        (type !== "entity" || !showEntityId)
-          ? html`
-              <div slot="trailing-supporting-text" class="domain">
-                ${(item as EntityComboBoxItem).domain_name}
-              </div>
-            `
-          : nothing}
-      </ha-combo-box-item>
-    `;
-  };
-
-  private _noTargetFoundLabel = (search: string) =>
-    this.hass.localize("ui.components.target-picker.no_target_found", {
-      term: html`<b>‘${search}’</b>`,
-    });
-
   static get styles(): CSSResultGroup {
     return css`
       .add-target-wrapper {
@@ -1095,8 +683,31 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         margin-top: var(--ha-space-3);
       }
 
-      ha-generic-picker {
-        width: 100%;
+      wa-popover {
+        --wa-space-l: var(--ha-space-0);
+      }
+
+      wa-popover::part(body) {
+        width: min(max(var(--body-width), 336px), 600px);
+        max-width: min(max(var(--body-width), 336px), 600px);
+        max-height: 500px;
+        height: 70vh;
+        overflow: hidden;
+      }
+
+      @media (max-height: 1000px) {
+        wa-popover::part(body) {
+          max-height: 400px;
+        }
+      }
+
+      ha-bottom-sheet {
+        --ha-bottom-sheet-height: 90vh;
+        --ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12));
+        --ha-bottom-sheet-max-height: var(--ha-bottom-sheet-height);
+        --ha-bottom-sheet-max-width: 600px;
+        --ha-bottom-sheet-padding: var(--ha-space-0);
+        --ha-bottom-sheet-surface-background: var(--card-background-color);
       }
 
       ${unsafeCSS(chipStyles)}

src/components/ha-wa-dialog.ts

@@ -1,4 +1,6 @@
-import { css, html, LitElement } from "lit";
+import "@home-assistant/webawesome/dist/components/dialog/dialog";
+import { mdiClose } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
 import {
   customElement,
   eventOptions,
@@ -6,9 +8,6 @@ import {
   query,
   state,
 } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { mdiClose } from "@mdi/js";
-import "@home-assistant/webawesome/dist/components/dialog/dialog";
 import { fireEvent } from "../common/dom/fire_event";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
@@ -32,8 +31,6 @@ export type DialogWidth = "small" | "medium" | "large" | "full";
  *
  * @slot header - Replace the entire header area.
  * @slot headerNavigationIcon - Leading header action (e.g. close/back button).
- * @slot headerTitle - Custom title content (used when header-title is not set).
- * @slot headerSubtitle - Custom subtitle content (used when header-subtitle is not set).
  * @slot headerActionItems - Trailing header actions (e.g. buttons, menus).
  * @slot - Dialog content body.
  * @slot footer - Dialog footer content.
@@ -55,8 +52,8 @@ export type DialogWidth = "small" | "medium" | "large" | "full";
  * @attr {boolean} open - Controls the dialog open state.
  * @attr {("small"|"medium"|"large"|"full")} width - Preferred dialog width preset. Defaults to "medium".
  * @attr {boolean} prevent-scrim-close - Prevents closing the dialog by clicking the scrim/overlay. Defaults to false.
- * @attr {string} header-title - Header title text. If not set, the headerTitle slot is used.
- * @attr {string} header-subtitle - Header subtitle text. If not set, the headerSubtitle slot is used.
+ * @attr {string} header-title - Header title text when no custom title slot is provided.
+ * @attr {string} header-subtitle - Header subtitle text when no custom subtitle slot is provided.
  * @attr {("above"|"below")} header-subtitle-position - Position of the subtitle relative to the title. Defaults to "below".
  * @attr {boolean} flexcontent - Makes the dialog body a flex container for flexible layouts.
  *
@@ -75,12 +72,6 @@ export type DialogWidth = "small" | "medium" | "large" | "full";
 export class HaWaDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: "aria-labelledby" })
-  public ariaLabelledBy?: string;
-
-  @property({ attribute: "aria-describedby" })
-  public ariaDescribedBy?: string;
-
   @property({ type: Boolean, reflect: true })
   public open = false;
 
@@ -90,11 +81,11 @@ export class HaWaDialog extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: "prevent-scrim-close" })
   public preventScrimClose = false;
 
-  @property({ attribute: "header-title" })
-  public headerTitle?: string;
+  @property({ type: String, attribute: "header-title" })
+  public headerTitle = "";
 
-  @property({ attribute: "header-subtitle" })
-  public headerSubtitle?: string;
+  @property({ type: String, attribute: "header-subtitle" })
+  public headerSubtitle = "";
 
   @property({ type: String, attribute: "header-subtitle-position" })
   public headerSubtitlePosition: "above" | "below" = "below";
@@ -126,11 +117,6 @@ export class HaWaDialog extends LitElement {
         .open=${this._open}
         .lightDismiss=${!this.preventScrimClose}
         without-header
-        aria-labelledby=${ifDefined(
-          this.ariaLabelledBy ||
-            (this.headerTitle !== undefined ? "ha-wa-dialog-title" : undefined)
-        )}
-        aria-describedby=${ifDefined(this.ariaDescribedBy)}
         @wa-show=${this._handleShow}
         @wa-after-show=${this._handleAfterShow}
         @wa-after-hide=${this._handleAfterHide}
@@ -147,14 +133,14 @@ export class HaWaDialog extends LitElement {
                 .path=${mdiClose}
               ></ha-icon-button>
             </slot>
-            ${this.headerTitle !== undefined
-              ? html`<span slot="title" class="title" id="ha-wa-dialog-title">
+            ${this.headerTitle
+              ? html`<span slot="title" class="title">
                   ${this.headerTitle}
                 </span>`
-              : html`<slot name="headerTitle" slot="title"></slot>`}
-            ${this.headerSubtitle !== undefined
+              : nothing}
+            ${this.headerSubtitle
               ? html`<span slot="subtitle">${this.headerSubtitle}</span>`
-              : html`<slot name="headerSubtitle" slot="subtitle"></slot>`}
+              : nothing}
             <slot name="headerActionItems" slot="actionItems"></slot>
           </ha-dialog-header>
         </slot>

src/components/target-picker/ha-target-picker-item-row.ts

@@ -545,7 +545,7 @@ export class HaTargetPickerItemRow extends LitElement {
         name: entityName || deviceName || item,
         context,
         stateObject,
-        notFound: !stateObject && item !== "all" && item !== "none",
+        notFound: !stateObject && item !== "all",
       };
     }
 

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

@@ -128,7 +128,9 @@ class HaUserPicker extends LitElement {
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .label=${this.label}
-        .notFoundLabel=${this._notFoundLabel}
+        .notFoundLabel=${this.hass.localize(
+          "ui.components.user-picker.no_match"
+        )}
         .placeholder=${placeholder}
         .value=${this.value}
         .getItems=${this._getItems}
@@ -147,11 +149,6 @@ class HaUserPicker extends LitElement {
     fireEvent(this, "value-changed", { value });
     fireEvent(this, "change");
   }
-
-  private _notFoundLabel = (search: string) =>
-    this.hass.localize("ui.components.user-picker.no_match", {
-      term: html`<b>‘${search}’</b>`,
-    });
 }
 
 declare global {

src/data/automation.ts

@@ -12,7 +12,6 @@ import { CONDITION_BUILDING_BLOCKS } from "./condition";
 import type { DeviceCondition, DeviceTrigger } from "./device_automation";
 import type { Action, Field, MODES } from "./script";
 import { migrateAutomationAction } from "./script";
-import type { WeekdayShort } from "../common/datetime/weekday";
 
 export const AUTOMATION_DEFAULT_MODE: (typeof MODES)[number] = "single";
 export const AUTOMATION_DEFAULT_MAX = 10;
@@ -258,11 +257,13 @@ export interface ZoneCondition extends BaseCondition {
   zone: string;
 }
 
+type Weekday = "sun" | "mon" | "tue" | "wed" | "thu" | "fri" | "sat";
+
 export interface TimeCondition extends BaseCondition {
   condition: "time";
   after?: string;
   before?: string;
-  weekday?: WeekdayShort | WeekdayShort[];
+  weekday?: Weekday | Weekday[];
 }
 
 export interface TemplateCondition extends BaseCondition {

src/data/device_registry.ts

@@ -186,8 +186,7 @@ export const getDevices = (
   deviceFilter?: HaDevicePickerDeviceFilterFunc,
   entityFilter?: HaEntityPickerEntityFilterFunc,
   excludeDevices?: string[],
-  value?: string,
-  idPrefix = ""
+  value?: string
 ): DevicePickerItem[] => {
   const devices = Object.values(hass.devices);
   const entities = Object.values(hass.entities);
@@ -299,7 +298,7 @@ export const getDevices = (
     const domainName = domain ? domainToName(hass.localize, domain) : undefined;
 
     return {
-      id: `${idPrefix}${device.id}`,
+      id: device.id,
       label: "",
       primary:
         deviceName ||

src/data/energy.ts

@@ -102,7 +102,6 @@ export type EnergySolarForecasts = Record<string, EnergySolarForecast>;
 export interface DeviceConsumptionEnergyPreference {
   // This is an ever increasing value
   stat_consumption: string;
-  stat_rate?: string;
   name?: string;
   included_in_stat?: string;
 }
@@ -131,17 +130,11 @@ export interface FlowToGridSourceEnergyPreference {
   number_energy_price: number | null;
 }
 
-export interface GridPowerSourceEnergyPreference {
-  // W meter
-  stat_rate: string;
-}
-
 export interface GridSourceTypeEnergyPreference {
   type: "grid";
 
   flow_from: FlowFromGridSourceEnergyPreference[];
   flow_to: FlowToGridSourceEnergyPreference[];
-  power?: GridPowerSourceEnergyPreference[];
 
   cost_adjustment_day: number;
 }
@@ -150,7 +143,6 @@ export interface SolarSourceTypeEnergyPreference {
   type: "solar";
 
   stat_energy_from: string;
-  stat_rate?: string;
   config_entry_solar_forecast: string[] | null;
 }
 
@@ -158,7 +150,6 @@ export interface BatterySourceTypeEnergyPreference {
   type: "battery";
   stat_energy_from: string;
   stat_energy_to: string;
-  stat_rate?: string;
 }
 export interface GasSourceTypeEnergyPreference {
   type: "gas";
@@ -360,35 +351,6 @@ export const getReferencedStatisticIds = (
   return statIDs;
 };
 
-export const getReferencedStatisticIdsPower = (
-  prefs: EnergyPreferences
-): string[] => {
-  const statIDs: (string | undefined)[] = [];
-
-  for (const source of prefs.energy_sources) {
-    if (source.type === "gas" || source.type === "water") {
-      continue;
-    }
-
-    if (source.type === "solar") {
-      statIDs.push(source.stat_rate);
-      continue;
-    }
-
-    if (source.type === "battery") {
-      statIDs.push(source.stat_rate);
-      continue;
-    }
-
-    if (source.power) {
-      statIDs.push(...source.power.map((p) => p.stat_rate));
-    }
-  }
-  statIDs.push(...prefs.device_consumption.map((d) => d.stat_rate));
-
-  return statIDs.filter(Boolean) as string[];
-};
-
 export const enum CompareMode {
   NONE = "",
   PREVIOUS = "previous",
@@ -436,10 +398,9 @@ const getEnergyData = async (
     "gas",
     "device",
   ]);
-  const powerStatIds = getReferencedStatisticIdsPower(prefs);
   const waterStatIds = getReferencedStatisticIds(prefs, info, ["water"]);
 
-  const allStatIDs = [...energyStatIds, ...waterStatIds, ...powerStatIds];
+  const allStatIDs = [...energyStatIds, ...waterStatIds];
 
   const dayDifference = differenceInDays(end || new Date(), start);
   const period =
@@ -450,8 +411,6 @@ const getEnergyData = async (
       : dayDifference > 2
         ? "day"
         : "hour";
-  const finePeriod =
-    dayDifference > 64 ? "day" : dayDifference > 8 ? "hour" : "5minute";
 
   const statsMetadata: Record<string, StatisticsMetaData> = {};
   const statsMetadataArray = allStatIDs.length
@@ -473,9 +432,6 @@ const getEnergyData = async (
       ? (gasUnit as (typeof VOLUME_UNITS)[number])
       : undefined,
   };
-  const powerUnits: StatisticsUnitConfiguration = {
-    power: "kW",
-  };
   const waterUnit = getEnergyWaterUnit(hass, prefs, statsMetadata);
   const waterUnits: StatisticsUnitConfiguration = {
     volume: waterUnit,
@@ -486,12 +442,6 @@ const getEnergyData = async (
         "change",
       ])
     : {};
-  const _powerStats: Statistics | Promise<Statistics> = powerStatIds.length
-    ? fetchStatistics(hass!, start, end, powerStatIds, finePeriod, powerUnits, [
-        "mean",
-      ])
-    : {};
-
   const _waterStats: Statistics | Promise<Statistics> = waterStatIds.length
     ? fetchStatistics(hass!, start, end, waterStatIds, period, waterUnits, [
         "change",
@@ -598,7 +548,6 @@ const getEnergyData = async (
 
   const [
     energyStats,
-    powerStats,
     waterStats,
     energyStatsCompare,
     waterStatsCompare,
@@ -606,14 +555,13 @@ const getEnergyData = async (
     fossilEnergyConsumptionCompare,
   ] = await Promise.all([
     _energyStats,
-    _powerStats,
     _waterStats,
     _energyStatsCompare,
     _waterStatsCompare,
     _fossilEnergyConsumption,
     _fossilEnergyConsumptionCompare,
   ]);
-  const stats = { ...energyStats, ...waterStats, ...powerStats };
+  const stats = { ...energyStats, ...waterStats };
   if (compare) {
     statsCompare = { ...energyStatsCompare, ...waterStatsCompare };
   }

src/data/entity_registry.ts

@@ -344,8 +344,7 @@ export const getEntities = (
   includeUnitOfMeasurement?: string[],
   includeEntities?: string[],
   excludeEntities?: string[],
-  value?: string,
-  idPrefix = ""
+  value?: string
 ): EntityComboBoxItem[] => {
   let items: EntityComboBoxItem[] = [];
 
@@ -396,9 +395,10 @@ export const getEntities = (
     const secondary = [areaName, entityName ? deviceName : undefined]
       .filter(Boolean)
       .join(isRTL ? " ◂ " : " ▸ ");
+    const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");
 
     return {
-      id: `${idPrefix}${entityId}`,
+      id: entityId,
       primary: primary,
       secondary: secondary,
       domain_name: domainName,
@@ -411,6 +411,7 @@ export const getEntities = (
         friendlyName,
         entityId,
       ].filter(Boolean) as string[],
+      a11y_label: a11yLabel,
       stateObj: stateObj,
     };
   });

src/data/label_registry.ts

@@ -108,8 +108,7 @@ export const getLabels = (
   includeDeviceClasses?: string[],
   deviceFilter?: HaDevicePickerDeviceFilterFunc,
   entityFilter?: HaEntityPickerEntityFilterFunc,
-  excludeLabels?: string[],
-  idPrefix = ""
+  excludeLabels?: string[]
 ): PickerComboBoxItem[] => {
   if (!labels || labels.length === 0) {
     return [];
@@ -263,7 +262,7 @@ export const getLabels = (
   }
 
   const items = outputLabels.map<PickerComboBoxItem>((label) => ({
-    id: `${idPrefix}${label.label_id}`,
+    id: label.label_id,
     primary: label.name,
     secondary: label.description ?? "",
     icon: label.icon || undefined,

src/data/script.ts

@@ -222,7 +222,6 @@ export interface StopAction extends BaseAction {
 
 export interface SequenceAction extends BaseAction {
   sequence: (ManualScriptConfig | Action)[];
-  metadata?: {};
 }
 
 export interface ParallelAction extends BaseAction {
@@ -480,7 +479,6 @@ export const migrateAutomationAction = (
   }
 
   if (typeof action === "object" && action !== null && "sequence" in action) {
-    delete (action as SequenceAction).metadata;
     for (const sequenceAction of (action as SequenceAction).sequence) {
       migrateAutomationAction(sequenceAction);
     }

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

@@ -102,17 +102,6 @@ class DialogEditSidebar extends LitElement {
       this.hass.locale
     );
 
-    // Add default hidden panels that are missing in hidden
-    for (const panel of panels) {
-      if (
-        panel.default_visible === false &&
-        !this._order.includes(panel.url_path) &&
-        !this._hidden.includes(panel.url_path)
-      ) {
-        this._hidden.push(panel.url_path);
-      }
-    }
-
     const items = [
       ...beforeSpacer,
       ...panels.filter((panel) => this._hidden!.includes(panel.url_path)),

src/html/index.html.template

@@ -20,21 +20,6 @@
     <meta name="color-scheme" content="dark light" />
     <%= renderTemplate("_style_base.html.template") %>
     <style>
-      @keyframes fade-out {
-        from {
-          opacity: 1;
-        }
-        to {
-          opacity: 0;
-        }
-      }
-      ::view-transition-group(launch-screen) {
-        animation-duration: var(--ha-animation-base-duration, 350ms);
-        animation-timing-function: ease-out;
-      }
-      ::view-transition-old(launch-screen) {
-        animation: fade-out var(--ha-animation-base-duration, 350ms) ease-out;
-      }
       html {
         background-color: var(--primary-background-color, #fafafa);
         color: var(--primary-text-color, #212121);
@@ -47,29 +32,11 @@
         }
       }
       #ha-launch-screen {
-        position: fixed;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
-        view-transition-name: launch-screen;
-        background-color: var(--primary-background-color, #fafafa);
-        z-index: 100;
-      }
-      @media (prefers-color-scheme: dark) {
-        /* body selector to avoid minification causing bad jinja2 */
-        body #ha-launch-screen {
-          background-color: var(--primary-background-color, #111111);
-        }
-      }
-      #ha-launch-screen.removing {
-        opacity: 0;
       }
       #ha-launch-screen svg {
         width: 112px;

src/layouts/partial-panel-resolver.ts

@@ -35,7 +35,6 @@ const COMPONENTS = {
   light: () => import("../panels/light/ha-panel-light"),
   security: () => import("../panels/security/ha-panel-security"),
   climate: () => import("../panels/climate/ha-panel-climate"),
-  home: () => import("../panels/home/ha-panel-home"),
 };
 
 @customElement("partial-panel-resolver")

src/mixins/conditional-listener-mixin.ts

@@ -1,56 +1,82 @@
 import type { ReactiveElement } from "lit";
+import { listenMediaQuery } from "../common/dom/media_query";
 import type { HomeAssistant } from "../types";
-import {
-  setupMediaQueryListeners,
-  setupTimeListeners,
-} from "../common/condition/listeners";
 import type { Condition } from "../panels/lovelace/common/validate-condition";
+import { checkConditionsMet } from "../panels/lovelace/common/validate-condition";
 
 type Constructor<T> = abstract new (...args: any[]) => T;
 
 /**
- * Base config type that can be used with conditional listeners
+ * Extract media queries from conditions recursively
  */
-export interface ConditionalConfig {
-  visibility?: Condition[];
-  [key: string]: any;
+export function extractMediaQueries(conditions: Condition[]): string[] {
+  return conditions.reduce<string[]>((array, c) => {
+    if ("conditions" in c && c.conditions) {
+      array.push(...extractMediaQueries(c.conditions));
+    }
+    if (c.condition === "screen" && c.media_query) {
+      array.push(c.media_query);
+    }
+    return array;
+  }, []);
+}
+
+/**
+ * Helper to setup media query listeners for conditional visibility
+ */
+export function setupMediaQueryListeners(
+  conditions: Condition[],
+  hass: HomeAssistant,
+  addListener: (unsub: () => void) => void,
+  onUpdate: (conditionsMet: boolean) => void
+): void {
+  const mediaQueries = extractMediaQueries(conditions);
+
+  if (mediaQueries.length === 0) return;
+
+  // Optimization for single media query
+  const hasOnlyMediaQuery =
+    conditions.length === 1 &&
+    conditions[0].condition === "screen" &&
+    !!conditions[0].media_query;
+
+  mediaQueries.forEach((mediaQuery) => {
+    const unsub = listenMediaQuery(mediaQuery, (matches) => {
+      if (hasOnlyMediaQuery) {
+        onUpdate(matches);
+      } else {
+        const conditionsMet = checkConditionsMet(conditions, hass);
+        onUpdate(conditionsMet);
+      }
+    });
+    addListener(unsub);
+  });
 }
 
 /**
  * Mixin to handle conditional listeners for visibility control
  *
- * Provides lifecycle management for listeners that control conditional
- * visibility of components.
+ * Provides lifecycle management for listeners (media queries, time-based, state changes, etc.)
+ * that control conditional visibility of components.
  *
  * Usage:
- * 1. Extend your component with ConditionalListenerMixin<YourConfigType>(ReactiveElement)
- * 2. Ensure component has config.visibility or _config.visibility property with conditions
- * 3. Ensure component has _updateVisibility() or _updateElement() method
- * 4. Override setupConditionalListeners() if custom behavior needed (e.g., filter conditions)
+ * 1. Extend your component with ConditionalListenerMixin(ReactiveElement)
+ * 2. Override setupConditionalListeners() to setup your listeners
+ * 3. Use addConditionalListener() to register unsubscribe functions
+ * 4. Call clearConditionalListeners() and setupConditionalListeners() when config changes
  *
  * The mixin automatically:
  * - Sets up listeners when component connects to DOM
  * - Cleans up listeners when component disconnects from DOM
- * - Handles conditional visibility based on defined conditions
  */
 export const ConditionalListenerMixin = <
-  TConfig extends ConditionalConfig = ConditionalConfig,
+  T extends Constructor<ReactiveElement>,
 >(
-  superClass: Constructor<ReactiveElement>
+  superClass: T
 ) => {
   abstract class ConditionalListenerClass extends superClass {
     private __listeners: (() => void)[] = [];
 
-    protected _config?: TConfig;
-
-    public config?: TConfig;
-
-    public hass?: HomeAssistant;
-
-    protected _updateElement?(config: TConfig): void;
-
-    protected _updateVisibility?(conditionsMet?: boolean): void;
-
     public connectedCallback() {
       super.connectedCallback();
       this.setupConditionalListeners();
@@ -61,72 +87,17 @@ export const ConditionalListenerMixin = <
       this.clearConditionalListeners();
     }
 
-    /**
-     * Clear conditional listeners
-     *
-     * This method is called when the component is disconnected from the DOM.
-     * It clears all the listeners that were set up by the setupConditionalListeners() method.
-     */
     protected clearConditionalListeners(): void {
       this.__listeners.forEach((unsub) => unsub());
       this.__listeners = [];
     }
 
-    /**
-     * Add a conditional listener to the list of listeners
-     *
-     * This method is called when a new listener is added.
-     * It adds the listener to the list of listeners.
-     *
-     * @param unsubscribe - The unsubscribe function to call when the listener is no longer needed
-     * @returns void
-     */
     protected addConditionalListener(unsubscribe: () => void): void {
       this.__listeners.push(unsubscribe);
     }
 
-    /**
-     * Setup conditional listeners for visibility control
-     *
-     * Default implementation:
-     * - Checks config.visibility or _config.visibility for conditions (if not provided)
-     * - Sets up appropriate listeners based on condition types
-     * - Calls _updateVisibility() or _updateElement() when conditions change
-     *
-     * Override this method to customize behavior (e.g., filter conditions first)
-     * and call super.setupConditionalListeners(customConditions) to reuse the base implementation
-     *
-     * @param conditions - Optional conditions array. If not provided, will check config.visibility or _config.visibility
-     */
-    protected setupConditionalListeners(conditions?: Condition[]): void {
-      const config = this.config || this._config;
-      const finalConditions = conditions || config?.visibility;
-
-      if (!finalConditions || !this.hass) {
-        return;
-      }
-
-      const onUpdate = (conditionsMet: boolean) => {
-        if (this._updateVisibility) {
-          this._updateVisibility(conditionsMet);
-        } else if (this._updateElement && config) {
-          this._updateElement(config);
-        }
-      };
-
-      setupMediaQueryListeners(
-        finalConditions,
-        this.hass,
-        (unsub) => this.addConditionalListener(unsub),
-        onUpdate
-      );
-
-      setupTimeListeners(
-        finalConditions,
-        this.hass,
-        (unsub) => this.addConditionalListener(unsub),
-        onUpdate
-      );
+    protected setupConditionalListeners(): void {
+      // Override in subclass
     }
   }
   return ConditionalListenerClass;

src/panels/config/application_credentials/ha-config-application-credentials.ts

@@ -104,6 +104,7 @@ export class HaConfigApplicationCredentials extends LitElement {
           ),
           sortable: true,
           filterable: true,
+          direction: "asc",
         },
         actions: {
           title: "",

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -588,11 +588,7 @@ export default class HaAutomationActionRow extends LitElement {
       ...this._clipboard,
       action: deepClone(this.action),
     };
-    let action = this.action;
-    if ("sequence" in action) {
-      action = { ...this.action, metadata: {} };
-    }
-    copyToClipboard(dump(action));
+    copyToClipboard(dump(this.action));
   }
 
   private _onDisable = () => {

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

@@ -452,10 +452,7 @@ class HaAutomationPicker extends SubscribeMixin(LitElement) {
             .indeterminate=${partial}
             reducedTouchTarget
           ></ha-checkbox>
-          <ha-label
-            style=${color ? `--color: ${color}` : ""}
-            .description=${label.description}
-          >
+          <ha-label style=${color ? `--color: ${color}` : ""}>
             ${label.icon
               ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
               : nothing}

src/panels/config/automation/sidebar/ha-automation-sidebar-trigger.ts

@@ -63,7 +63,8 @@ export default class HaAutomationSidebarTrigger extends LitElement {
 
   protected render() {
     const rowDisabled =
-      "enabled" in this.config.config && this.config.config.enabled === false;
+      this.disabled ||
+      ("enabled" in this.config.config && this.config.config.enabled === false);
     const type = isTriggerList(this.config.config)
       ? "list"
       : this.config.config.trigger;

src/panels/config/backup/ha-config-backup-backups.ts

@@ -372,14 +372,16 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
         clickable
         id="backup_id"
         has-filters
-        .filters=${Object.values(this._filters).filter((filter) =>
-          Array.isArray(filter)
-            ? filter.length
-            : filter &&
-              Object.values(filter).some((val) =>
-                Array.isArray(val) ? val.length : val
-              )
-        ).length}
+        .filters=${
+          Object.values(this._filters).filter((filter) =>
+            Array.isArray(filter)
+              ? filter.length
+              : filter &&
+                Object.values(filter).some((val) =>
+                  Array.isArray(val) ? val.length : val
+                )
+          ).length
+        }
         selectable
         .selected=${this._selected.length}
         .initialGroupColumn=${this._activeGrouping}
@@ -421,28 +423,30 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
         </div>
 
         <div slot="selection-bar">
-          ${!this.narrow
-            ? html`
-                <ha-button
-                  appearance="plain"
-                  @click=${this._deleteSelected}
-                  variant="danger"
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.backup.backups.delete_selected"
-                  )}
-                </ha-button>
-              `
-            : html`
-                <ha-icon-button
-                  .label=${this.hass.localize(
-                    "ui.panel.config.backup.backups.delete_selected"
-                  )}
-                  .path=${mdiDelete}
-                  class="warning"
-                  @click=${this._deleteSelected}
-                ></ha-icon-button>
-              `}
+          ${
+            !this.narrow
+              ? html`
+                  <ha-button
+                    appearance="plain"
+                    @click=${this._deleteSelected}
+                    variant="danger"
+                  >
+                    ${this.hass.localize(
+                      "ui.panel.config.backup.backups.delete_selected"
+                    )}
+                  </ha-button>
+                `
+              : html`
+                  <ha-icon-button
+                    .label=${this.hass.localize(
+                      "ui.panel.config.backup.backups.delete_selected"
+                    )}
+                    .path=${mdiDelete}
+                    class="warning"
+                    @click=${this._deleteSelected}
+                  ></ha-icon-button>
+                `
+          }
         </div>
 
         <ha-filter-states
@@ -455,39 +459,43 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
           expanded
           .narrow=${this.narrow}
         ></ha-filter-states>
-        ${!this._needsOnboarding
-          ? html`
-              <ha-fab
-                slot="fab"
-                ?disabled=${backupInProgress}
-                .label=${this.hass.localize(
-                  "ui.panel.config.backup.backups.new_backup"
-                )}
-                extended
-                @click=${this._newBackup}
-              >
-                ${backupInProgress
-                  ? html`<div slot="icon" class="loading">
-                      <ha-spinner .size=${"small"}></ha-spinner>
-                    </div>`
-                  : html`<ha-svg-icon
-                      slot="icon"
-                      .path=${mdiPlus}
-                    ></ha-svg-icon>`}
-              </ha-fab>
-            `
-          : nothing}
+        ${
+          !this._needsOnboarding
+            ? html`
+                <ha-fab
+                  slot="fab"
+                  ?disabled=${backupInProgress}
+                  .label=${this.hass.localize(
+                    "ui.panel.config.backup.backups.new_backup"
+                  )}
+                  extended
+                  @click=${this._newBackup}
+                >
+                  ${backupInProgress
+                    ? html`<div slot="icon" class="loading">
+                        <ha-spinner .size=${"small"}></ha-spinner>
+                      </div>`
+                    : html`<ha-svg-icon
+                        slot="icon"
+                        .path=${mdiPlus}
+                      ></ha-svg-icon>`}
+                </ha-fab>
+              `
+            : nothing
+        }
       </hass-tabs-subpage-data-table>
       <ha-md-menu id="overflow-menu" positioning="fixed">
-        <ha-md-menu-item .clickAction=${this._downloadBackup}>
-          <ha-svg-icon slot="start" .path=${mdiDownload}></ha-svg-icon>
-          ${this.hass.localize("ui.common.download")}
-        </ha-md-menu-item>
-        <ha-md-menu-item class="warning" .clickAction=${this._deleteBackup}>
-          <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
-          ${this.hass.localize("ui.common.delete")}
-        </ha-md-menu-item>
-      </ha-md-menu>
+          <ha-md-menu-item .clickAction=${this._downloadBackup}>
+              <ha-svg-icon slot="start" .path=${mdiDownload}></ha-svg-icon>
+            ${this.hass.localize("ui.common.download")}
+          </ha-md-menu-item>
+            <ha-md-menu-item class="warning" .clickAction=${this._deleteBackup}>
+              <ha-svg-icon slot="start" .path=${mdiDelete}></ha-svg-icon>
+            ${this.hass.localize("ui.common.delete")}
+            </ha-md-menu-item>
+        </ha-md-menu>
+      >
+      </ha-icon-overflow-menu>
     `;
   }
 
@@ -561,15 +569,15 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
     navigate(`/config/backup/details/${id}`);
   }
 
-  private _downloadBackup = async (ev): Promise<void> => {
+  private async _downloadBackup(ev): Promise<void> {
     const backup = ev.parentElement.anchorElement.backup;
     if (!backup) {
       return;
     }
     downloadBackup(this.hass, this, backup, this.config);
-  };
+  }
 
-  private _deleteBackup = async (ev): Promise<void> => {
+  private async _deleteBackup(ev): Promise<void> {
     const backup = ev.parentElement.anchorElement.backup;
     if (!backup) {
       return;
@@ -601,7 +609,7 @@ class HaConfigBackupBackups extends SubscribeMixin(LitElement) {
       return;
     }
     fireEvent(this, "ha-refresh-backup-info");
-  };
+  }
 
   private async _deleteSelected() {
     const confirm = await showConfirmationDialog(this, {

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -182,11 +182,13 @@ class HaBlueprintOverview extends LitElement {
         sortable: true,
         filterable: true,
         groupable: true,
+        direction: "asc",
       },
       path: {
         title: localize("ui.panel.config.blueprint.overview.headers.file_name"),
         sortable: true,
         filterable: true,
+        direction: "asc",
         flex: 2,
       },
       fullpath: {

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

@@ -1,4 +1,4 @@
-import { mdiPlus, mdiTag } from "@mdi/js";
+import { mdiTag, mdiPlus } from "@mdi/js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { html, LitElement } from "lit";
@@ -194,9 +194,8 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .label=${this.label}
-        .notFoundLabel=${this._notFoundLabel}
-        .emptyLabel=${this.hass.localize(
-          "ui.components.category-picker.no_categories"
+        .notFoundLabel=${this.hass.localize(
+          "ui.components.category-picker.no_match"
         )}
         .placeholder=${placeholder}
         .value=${this.value}
@@ -255,11 +254,6 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
       fireEvent(this, "change");
     }, 0);
   }
-
-  private _notFoundLabel = (search: string) =>
-    this.hass.localize("ui.components.category-picker.no_match", {
-      term: html`<b>‘${search}’</b>`,
-    });
 }
 
 declare global {

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -771,10 +771,7 @@ export class HaConfigDeviceDashboard extends SubscribeMixin(LitElement) {
             .indeterminate=${partial}
             reducedTouchTarget
           ></ha-checkbox>
-          <ha-label
-            style=${color ? `--color: ${color}` : ""}
-            .description=${label.description}
-          >
+          <ha-label style=${color ? `--color: ${color}` : ""}>
             ${label.icon
               ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
               : nothing}

src/panels/config/energy/components/ha-energy-grid-settings.ts

@@ -26,7 +26,6 @@ import type {
   EnergySource,
   FlowFromGridSourceEnergyPreference,
   FlowToGridSourceEnergyPreference,
-  GridPowerSourceEnergyPreference,
   GridSourceTypeEnergyPreference,
 } from "../../../../data/energy";
 import {
@@ -48,7 +47,6 @@ import { documentationUrl } from "../../../../util/documentation-url";
 import {
   showEnergySettingsGridFlowFromDialog,
   showEnergySettingsGridFlowToDialog,
-  showEnergySettingsGridPowerDialog,
 } from "../dialogs/show-dialogs-energy";
 import "./ha-energy-validation-result";
 import { energyCardStyles } from "./styles";
@@ -228,58 +226,6 @@ export class EnergyGridSettings extends LitElement {
             >
           </div>
 
-          <h3>
-            ${this.hass.localize("ui.panel.config.energy.grid.grid_power")}
-          </h3>
-          ${gridSource.power?.map((power) => {
-            const entityState = this.hass.states[power.stat_rate];
-            return html`
-              <div class="row" .source=${power}>
-                ${entityState?.attributes.icon
-                  ? html`<ha-icon
-                      .icon=${entityState.attributes.icon}
-                    ></ha-icon>`
-                  : html`<ha-svg-icon
-                      .path=${mdiTransmissionTower}
-                    ></ha-svg-icon>`}
-                <span class="content"
-                  >${getStatisticLabel(
-                    this.hass,
-                    power.stat_rate,
-                    this.statsMetadata?.[power.stat_rate]
-                  )}</span
-                >
-                <ha-icon-button
-                  .label=${this.hass.localize(
-                    "ui.panel.config.energy.grid.edit_power"
-                  )}
-                  @click=${this._editPowerSource}
-                  .path=${mdiPencil}
-                ></ha-icon-button>
-                <ha-icon-button
-                  .label=${this.hass.localize(
-                    "ui.panel.config.energy.grid.delete_power"
-                  )}
-                  @click=${this._deletePowerSource}
-                  .path=${mdiDelete}
-                ></ha-icon-button>
-              </div>
-            `;
-          })}
-          <div class="row border-bottom">
-            <ha-svg-icon .path=${mdiTransmissionTower}></ha-svg-icon>
-            <ha-button
-              @click=${this._addPowerSource}
-              appearance="filled"
-              size="small"
-            >
-              <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon
-              >${this.hass.localize(
-                "ui.panel.config.energy.grid.add_power"
-              )}</ha-button
-            >
-          </div>
-
           <h3>
             ${this.hass.localize(
               "ui.panel.config.energy.grid.grid_carbon_footprint"
@@ -553,97 +499,6 @@ export class EnergyGridSettings extends LitElement {
     await this._savePreferences(cleanedPreferences);
   }
 
-  private _addPowerSource() {
-    const gridSource = this.preferences.energy_sources.find(
-      (src) => src.type === "grid"
-    ) as GridSourceTypeEnergyPreference | undefined;
-    showEnergySettingsGridPowerDialog(this, {
-      grid_source: gridSource,
-      saveCallback: async (power) => {
-        let preferences: EnergyPreferences;
-        if (!gridSource) {
-          preferences = {
-            ...this.preferences,
-            energy_sources: [
-              ...this.preferences.energy_sources,
-              {
-                ...emptyGridSourceEnergyPreference(),
-                power: [power],
-              },
-            ],
-          };
-        } else {
-          preferences = {
-            ...this.preferences,
-            energy_sources: this.preferences.energy_sources.map((src) =>
-              src.type === "grid"
-                ? { ...src, power: [...(gridSource.power || []), power] }
-                : src
-            ),
-          };
-        }
-        await this._savePreferences(preferences);
-      },
-    });
-  }
-
-  private _editPowerSource(ev) {
-    const origSource: GridPowerSourceEnergyPreference =
-      ev.currentTarget.closest(".row").source;
-    const gridSource = this.preferences.energy_sources.find(
-      (src) => src.type === "grid"
-    ) as GridSourceTypeEnergyPreference | undefined;
-    showEnergySettingsGridPowerDialog(this, {
-      source: { ...origSource },
-      grid_source: gridSource,
-      saveCallback: async (source) => {
-        const power =
-          energySourcesByType(this.preferences).grid![0].power || [];
-
-        const preferences: EnergyPreferences = {
-          ...this.preferences,
-          energy_sources: this.preferences.energy_sources.map((src) =>
-            src.type === "grid"
-              ? {
-                  ...src,
-                  power: power.map((p) => (p === origSource ? source : p)),
-                }
-              : src
-          ),
-        };
-        await this._savePreferences(preferences);
-      },
-    });
-  }
-
-  private async _deletePowerSource(ev) {
-    const sourceToDelete: GridPowerSourceEnergyPreference =
-      ev.currentTarget.closest(".row").source;
-
-    if (
-      !(await showConfirmationDialog(this, {
-        title: this.hass.localize("ui.panel.config.energy.delete_source"),
-      }))
-    ) {
-      return;
-    }
-
-    const power =
-      energySourcesByType(this.preferences).grid![0].power?.filter(
-        (p) => p !== sourceToDelete
-      ) || [];
-
-    const preferences: EnergyPreferences = {
-      ...this.preferences,
-      energy_sources: this.preferences.energy_sources.map((source) =>
-        source.type === "grid" ? { ...source, power } : source
-      ),
-    };
-
-    const cleanedPreferences = this._removeEmptySources(preferences);
-    await this._savePreferences(cleanedPreferences);
-  }
-
   private _removeEmptySources(preferences: EnergyPreferences) {
     // Check if grid sources became an empty type and remove if so
     preferences.energy_sources = preferences.energy_sources.reduce<
@@ -652,8 +507,7 @@ export class EnergyGridSettings extends LitElement {
       if (
         source.type !== "grid" ||
         source.flow_from.length > 0 ||
-        source.flow_to.length > 0 ||
-        (source.power && source.power.length > 0)
+        source.flow_to.length > 0
       ) {
         acc.push(source);
       }

src/panels/config/energy/dialogs/dialog-energy-battery-settings.ts

@@ -18,7 +18,6 @@ import type { HomeAssistant } from "../../../../types";
 import type { EnergySettingsBatteryDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
-const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-battery-settings")
 export class DialogEnergyBatterySettings
@@ -33,14 +32,10 @@ export class DialogEnergyBatterySettings
 
   @state() private _energy_units?: string[];
 
-  @state() private _power_units?: string[];
-
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
-  private _excludeListPower?: string[];
-
   public async showDialog(
     params: EnergySettingsBatteryDialogParams
   ): Promise<void> {
@@ -51,9 +46,6 @@ export class DialogEnergyBatterySettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
-    this._power_units = (
-      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
-    ).units;
     const allSources: string[] = [];
     this._params.battery_sources.forEach((entry) => {
       allSources.push(entry.stat_energy_from);
@@ -64,9 +56,6 @@ export class DialogEnergyBatterySettings
         id !== this._source?.stat_energy_from &&
         id !== this._source?.stat_energy_to
     );
-    this._excludeListPower = this._params.battery_sources
-      .map((entry) => entry.stat_rate)
-      .filter((id) => id && id !== this._source?.stat_rate) as string[];
   }
 
   public closeDialog() {
@@ -83,6 +72,8 @@ export class DialogEnergyBatterySettings
       return nothing;
     }
 
+    const pickableUnit = this._energy_units?.join(", ") || "";
+
     return html`
       <ha-dialog
         open
@@ -94,6 +85,12 @@ export class DialogEnergyBatterySettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        <div>
+          ${this.hass.localize(
+            "ui.panel.config.energy.battery.dialog.entity_para",
+            { unit: pickableUnit }
+          )}
+        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -108,10 +105,6 @@ export class DialogEnergyBatterySettings
             this._source.stat_energy_from,
           ]}
           @value-changed=${this._statisticToChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.energy_helper_into",
-            { unit: this._energy_units?.join(", ") || "" }
-          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
@@ -128,25 +121,6 @@ export class DialogEnergyBatterySettings
             this._source.stat_energy_to,
           ]}
           @value-changed=${this._statisticFromChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.energy_helper_out",
-            { unit: this._energy_units?.join(", ") || "" }
-          )}
-        ></ha-statistic-picker>
-
-        <ha-statistic-picker
-          .hass=${this.hass}
-          .includeUnitClass=${powerUnitClasses}
-          .value=${this._source.stat_rate}
-          .label=${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.power"
-          )}
-          .excludeStatistics=${this._excludeListPower}
-          @value-changed=${this._powerChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.battery.dialog.power_helper",
-            { unit: this._power_units?.join(", ") || "" }
-          )}
         ></ha-statistic-picker>
 
         <ha-button
@@ -176,10 +150,6 @@ export class DialogEnergyBatterySettings
     this._source = { ...this._source!, stat_energy_from: ev.detail.value };
   }
 
-  private _powerChanged(ev: CustomEvent<{ value: string }>) {
-    this._source = { ...this._source!, stat_rate: ev.detail.value };
-  }
-
   private async _save() {
     try {
       await this._params!.saveCallback(this._source!);
@@ -198,11 +168,7 @@ export class DialogEnergyBatterySettings
           --mdc-dialog-max-width: 430px;
         }
         ha-statistic-picker {
-          display: block;
-          margin-bottom: var(--ha-space-4);
-        }
-        ha-statistic-picker:last-of-type {
-          margin-bottom: 0;
+          width: 100%;
         }
       `,
     ];

src/panels/config/energy/dialogs/dialog-energy-device-settings.ts

@@ -21,7 +21,6 @@ import type { HomeAssistant } from "../../../../types";
 import type { EnergySettingsDeviceDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
-const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-device-settings")
 export class DialogEnergyDeviceSettings
@@ -36,14 +35,10 @@ export class DialogEnergyDeviceSettings
 
   @state() private _energy_units?: string[];
 
-  @state() private _power_units?: string[];
-
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
-  private _excludeListPower?: string[];
-
   private _possibleParents: DeviceConsumptionEnergyPreference[] = [];
 
   public async showDialog(
@@ -55,15 +50,9 @@ export class DialogEnergyDeviceSettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
-    this._power_units = (
-      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
-    ).units;
     this._excludeList = this._params.device_consumptions
       .map((entry) => entry.stat_consumption)
       .filter((id) => id !== this._device?.stat_consumption);
-    this._excludeListPower = this._params.device_consumptions
-      .map((entry) => entry.stat_rate)
-      .filter((id) => id && id !== this._device?.stat_rate) as string[];
   }
 
   private _computePossibleParents() {
@@ -104,6 +93,8 @@ export class DialogEnergyDeviceSettings
       return nothing;
     }
 
+    const pickableUnit = this._energy_units?.join(", ") || "";
+
     return html`
       <ha-dialog
         open
@@ -117,6 +108,12 @@ export class DialogEnergyDeviceSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        <div>
+          ${this.hass.localize(
+            "ui.panel.config.energy.device_consumption.dialog.selected_stat_intro",
+            { unit: pickableUnit }
+          )}
+        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -128,28 +125,9 @@ export class DialogEnergyDeviceSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.device_consumption.dialog.selected_stat_intro",
-            { unit: this._energy_units?.join(", ") || "" }
-          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
-        <ha-statistic-picker
-          .hass=${this.hass}
-          .includeUnitClass=${powerUnitClasses}
-          .value=${this._device?.stat_rate}
-          .label=${this.hass.localize(
-            "ui.panel.config.energy.device_consumption.dialog.device_consumption_power"
-          )}
-          .excludeStatistics=${this._excludeListPower}
-          @value-changed=${this._powerStatisticChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.device_consumption.dialog.selected_stat_intro",
-            { unit: this._power_units?.join(", ") || "" }
-          )}
-        ></ha-statistic-picker>
-
         <ha-textfield
           .label=${this.hass.localize(
             "ui.panel.config.energy.device_consumption.dialog.display_name"
@@ -232,20 +210,6 @@ export class DialogEnergyDeviceSettings
     this._computePossibleParents();
   }
 
-  private _powerStatisticChanged(ev: CustomEvent<{ value: string }>) {
-    if (!this._device) {
-      return;
-    }
-    const newDevice = {
-      ...this._device,
-      stat_rate: ev.detail.value,
-    } as DeviceConsumptionEnergyPreference;
-    if (!newDevice.stat_rate) {
-      delete newDevice.stat_rate;
-    }
-    this._device = newDevice;
-  }
-
   private _nameChanged(ev) {
     const newDevice = {
       ...this._device!,
@@ -281,19 +245,15 @@ export class DialogEnergyDeviceSettings
     return [
       haStyleDialog,
       css`
-        ha-statistic-picker {
-          display: block;
-          margin-bottom: var(--ha-space-2);
-        }
         ha-statistic-picker {
           width: 100%;
         }
         ha-select {
-          margin-top: var(--ha-space-4);
+          margin-top: 16px;
           width: 100%;
         }
         ha-textfield {
-          margin-top: var(--ha-space-4);
+          margin-top: 16px;
           width: 100%;
         }
       `,

src/panels/config/energy/dialogs/dialog-energy-grid-flow-settings.ts

@@ -104,6 +104,8 @@ export class DialogEnergyGridFlowSettings
       return nothing;
     }
 
+    const pickableUnit = this._energy_units?.join(", ") || "";
+
     const unitPriceFixed = `${this.hass.config.currency}/kWh`;
 
     const externalSource =
@@ -133,11 +135,19 @@ export class DialogEnergyGridFlowSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-        <p>
-          ${this.hass.localize(
-            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.paragraph`
-          )}
-        </p>
+        <div>
+          <p>
+            ${this.hass.localize(
+              `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.paragraph`
+            )}
+          </p>
+          <p>
+            ${this.hass.localize(
+              `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.entity_para`,
+              { unit: pickableUnit }
+            )}
+          </p>
+        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -153,10 +163,6 @@ export class DialogEnergyGridFlowSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
-          .helper=${this.hass.localize(
-            `ui.panel.config.energy.grid.flow_dialog.${this._params.direction}.entity_para`,
-            { unit: this._energy_units?.join(", ") || "" }
-          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
@@ -355,10 +361,6 @@ export class DialogEnergyGridFlowSettings
         ha-dialog {
           --mdc-dialog-max-width: 430px;
         }
-        ha-statistic-picker {
-          display: block;
-          margin: var(--ha-space-4) 0;
-        }
         ha-formfield {
           display: block;
         }

src/panels/config/energy/dialogs/dialog-energy-grid-power-settings.ts

@@ -1,153 +0,0 @@
-import { mdiTransmissionTower } from "@mdi/js";
-import type { CSSResultGroup } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import "../../../../components/entity/ha-statistic-picker";
-import "../../../../components/ha-dialog";
-import "../../../../components/ha-button";
-import type { GridPowerSourceEnergyPreference } from "../../../../data/energy";
-import { energyStatisticHelpUrl } from "../../../../data/energy";
-import { getSensorDeviceClassConvertibleUnits } from "../../../../data/sensor";
-import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
-import { haStyleDialog } from "../../../../resources/styles";
-import type { HomeAssistant } from "../../../../types";
-import type { EnergySettingsGridPowerDialogParams } from "./show-dialogs-energy";
-
-const powerUnitClasses = ["power"];
-
-@customElement("dialog-energy-grid-power-settings")
-export class DialogEnergyGridPowerSettings
-  extends LitElement
-  implements HassDialog<EnergySettingsGridPowerDialogParams>
-{
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @state() private _params?: EnergySettingsGridPowerDialogParams;
-
-  @state() private _source?: GridPowerSourceEnergyPreference;
-
-  @state() private _power_units?: string[];
-
-  @state() private _error?: string;
-
-  private _excludeListPower?: string[];
-
-  public async showDialog(
-    params: EnergySettingsGridPowerDialogParams
-  ): Promise<void> {
-    this._params = params;
-    this._source = params.source ? { ...params.source } : { stat_rate: "" };
-
-    const initialSourceIdPower = this._source.stat_rate;
-
-    this._power_units = (
-      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
-    ).units;
-
-    this._excludeListPower = [
-      ...(this._params.grid_source?.power?.map((entry) => entry.stat_rate) ||
-        []),
-    ].filter((id) => id && id !== initialSourceIdPower) as string[];
-  }
-
-  public closeDialog() {
-    this._params = undefined;
-    this._source = undefined;
-    this._error = undefined;
-    this._excludeListPower = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-    return true;
-  }
-
-  protected render() {
-    if (!this._params || !this._source) {
-      return nothing;
-    }
-
-    return html`
-      <ha-dialog
-        open
-        .heading=${html`<ha-svg-icon
-            .path=${mdiTransmissionTower}
-            style="--mdc-icon-size: 32px;"
-          ></ha-svg-icon
-          >${this.hass.localize(
-            "ui.panel.config.energy.grid.power_dialog.header"
-          )}`}
-        @closed=${this.closeDialog}
-      >
-        ${this._error ? html`<p class="error">${this._error}</p>` : ""}
-
-        <ha-statistic-picker
-          .hass=${this.hass}
-          .helpMissingEntityUrl=${energyStatisticHelpUrl}
-          .includeUnitClass=${powerUnitClasses}
-          .value=${this._source.stat_rate}
-          .label=${this.hass.localize(
-            "ui.panel.config.energy.grid.power_dialog.power_stat"
-          )}
-          .excludeStatistics=${this._excludeListPower}
-          @value-changed=${this._powerStatisticChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.grid.power_dialog.power_helper",
-            { unit: this._power_units?.join(", ") || "" }
-          )}
-          dialogInitialFocus
-        ></ha-statistic-picker>
-
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        <ha-button
-          @click=${this._save}
-          .disabled=${!this._source.stat_rate}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.save")}
-        </ha-button>
-      </ha-dialog>
-    `;
-  }
-
-  private _powerStatisticChanged(ev: CustomEvent<{ value: string }>) {
-    this._source = {
-      ...this._source!,
-      stat_rate: ev.detail.value,
-    };
-  }
-
-  private async _save() {
-    try {
-      await this._params!.saveCallback(this._source!);
-      this.closeDialog();
-    } catch (err: any) {
-      this._error = err.message;
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyleDialog,
-      css`
-        ha-dialog {
-          --mdc-dialog-max-width: 430px;
-        }
-        ha-statistic-picker {
-          display: block;
-          margin: var(--ha-space-4) 0;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-energy-grid-power-settings": DialogEnergyGridPowerSettings;
-  }
-}

src/panels/config/energy/dialogs/dialog-energy-solar-settings.ts

@@ -28,7 +28,6 @@ import { brandsUrl } from "../../../../util/brands-url";
 import type { EnergySettingsSolarDialogParams } from "./show-dialogs-energy";
 
 const energyUnitClasses = ["energy"];
-const powerUnitClasses = ["power"];
 
 @customElement("dialog-energy-solar-settings")
 export class DialogEnergySolarSettings
@@ -47,14 +46,10 @@ export class DialogEnergySolarSettings
 
   @state() private _energy_units?: string[];
 
-  @state() private _power_units?: string[];
-
   @state() private _error?: string;
 
   private _excludeList?: string[];
 
-  private _excludeListPower?: string[];
-
   public async showDialog(
     params: EnergySettingsSolarDialogParams
   ): Promise<void> {
@@ -67,15 +62,9 @@ export class DialogEnergySolarSettings
     this._energy_units = (
       await getSensorDeviceClassConvertibleUnits(this.hass, "energy")
     ).units;
-    this._power_units = (
-      await getSensorDeviceClassConvertibleUnits(this.hass, "power")
-    ).units;
     this._excludeList = this._params.solar_sources
       .map((entry) => entry.stat_energy_from)
       .filter((id) => id !== this._source?.stat_energy_from);
-    this._excludeListPower = this._params.solar_sources
-      .map((entry) => entry.stat_rate)
-      .filter((id) => id && id !== this._source?.stat_rate) as string[];
   }
 
   public closeDialog() {
@@ -92,6 +81,8 @@ export class DialogEnergySolarSettings
       return nothing;
     }
 
+    const pickableUnit = this._energy_units?.join(", ") || "";
+
     return html`
       <ha-dialog
         open
@@ -103,6 +94,12 @@ export class DialogEnergySolarSettings
         @closed=${this.closeDialog}
       >
         ${this._error ? html`<p class="error">${this._error}</p>` : ""}
+        <div>
+          ${this.hass.localize(
+            "ui.panel.config.energy.solar.dialog.entity_para",
+            { unit: pickableUnit }
+          )}
+        </div>
 
         <ha-statistic-picker
           .hass=${this.hass}
@@ -114,28 +111,9 @@ export class DialogEnergySolarSettings
           )}
           .excludeStatistics=${this._excludeList}
           @value-changed=${this._statisticChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.solar.dialog.entity_para",
-            { unit: this._energy_units?.join(", ") || "" }
-          )}
           dialogInitialFocus
         ></ha-statistic-picker>
 
-        <ha-statistic-picker
-          .hass=${this.hass}
-          .includeUnitClass=${powerUnitClasses}
-          .value=${this._source.stat_rate}
-          .label=${this.hass.localize(
-            "ui.panel.config.energy.solar.dialog.solar_production_power"
-          )}
-          .excludeStatistics=${this._excludeListPower}
-          @value-changed=${this._powerStatisticChanged}
-          .helper=${this.hass.localize(
-            "ui.panel.config.energy.solar.dialog.entity_para",
-            { unit: this._power_units?.join(", ") || "" }
-          )}
-        ></ha-statistic-picker>
-
         <h3>
           ${this.hass.localize(
             "ui.panel.config.energy.solar.dialog.solar_production_forecast"
@@ -289,10 +267,6 @@ export class DialogEnergySolarSettings
     this._source = { ...this._source!, stat_energy_from: ev.detail.value };
   }
 
-  private _powerStatisticChanged(ev: CustomEvent<{ value: string }>) {
-    this._source = { ...this._source!, stat_rate: ev.detail.value };
-  }
-
   private async _save() {
     try {
       if (!this._forecast) {
@@ -313,10 +287,6 @@ export class DialogEnergySolarSettings
         ha-dialog {
           --mdc-dialog-max-width: 430px;
         }
-        ha-statistic-picker {
-          display: block;
-          margin-bottom: var(--ha-space-4);
-        }
         img {
           height: 24px;
           margin-right: 16px;

src/panels/config/energy/dialogs/show-dialogs-energy.ts

@@ -7,7 +7,6 @@ import type {
   FlowFromGridSourceEnergyPreference,
   FlowToGridSourceEnergyPreference,
   GasSourceTypeEnergyPreference,
-  GridPowerSourceEnergyPreference,
   GridSourceTypeEnergyPreference,
   SolarSourceTypeEnergyPreference,
   WaterSourceTypeEnergyPreference,
@@ -42,12 +41,6 @@ export interface EnergySettingsGridFlowToDialogParams {
   saveCallback: (source: FlowToGridSourceEnergyPreference) => Promise<void>;
 }
 
-export interface EnergySettingsGridPowerDialogParams {
-  source?: GridPowerSourceEnergyPreference;
-  grid_source?: GridSourceTypeEnergyPreference;
-  saveCallback: (source: GridPowerSourceEnergyPreference) => Promise<void>;
-}
-
 export interface EnergySettingsSolarDialogParams {
   info: EnergyInfo;
   source?: SolarSourceTypeEnergyPreference;
@@ -159,14 +152,3 @@ export const showEnergySettingsGridFlowToDialog = (
     dialogParams: { ...dialogParams, direction: "to" },
   });
 };
-
-export const showEnergySettingsGridPowerDialog = (
-  element: HTMLElement,
-  dialogParams: EnergySettingsGridPowerDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-energy-grid-power-settings",
-    dialogImport: () => import("./dialog-energy-grid-power-settings"),
-    dialogParams: dialogParams,
-  });
-};

src/panels/config/entities/ha-config-entities.ts

@@ -792,10 +792,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
             .indeterminate=${partial}
             reducedTouchTarget
           ></ha-checkbox>
-          <ha-label
-            style=${color ? `--color: ${color}` : ""}
-            .description=${label.description}
-          >
+          <ha-label style=${color ? `--color: ${color}` : ""}>
             ${label.icon
               ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
               : nothing}

src/panels/config/helpers/ha-config-helpers.ts

@@ -634,10 +634,7 @@ export class HaConfigHelpers extends SubscribeMixin(LitElement) {
             .indeterminate=${partial}
             reducedTouchTarget
           ></ha-checkbox>
-          <ha-label
-            style=${color ? `--color: ${color}` : ""}
-            .description=${label.description}
-          >
+          <ha-label style=${color ? `--color: ${color}` : ""}>
             ${label.icon
               ? html`<ha-icon slot="icon" .icon=${label.icon}></ha-icon>`
               : nothing}

src/panels/config/integrations/integration-panels/bluetooth/bluetooth-network-visualization.ts

@@ -8,7 +8,6 @@ import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { relativeTime } from "../../../../../common/datetime/relative_time";
-import { getDeviceContext } from "../../../../../common/entity/context/get_device_context";
 import { navigate } from "../../../../../common/navigate";
 import { throttle } from "../../../../../common/util/throttle";
 import "../../../../../components/chart/ha-network-graph";
@@ -195,17 +194,11 @@ export class BluetoothNetworkVisualization extends LitElement {
       ];
       const links: NetworkLink[] = [];
       Object.values(scanners).forEach((scanner) => {
-        const scannerDevice = this._sourceDevices[scanner.source] as
-          | DeviceRegistryEntry
-          | undefined;
-        const area = scannerDevice
-          ? getDeviceContext(scannerDevice, this.hass).area
-          : undefined;
+        const scannerDevice = this._sourceDevices[scanner.source];
         nodes.push({
           id: scanner.source,
           name:
             scannerDevice?.name_by_user || scannerDevice?.name || scanner.name,
-          context: area?.name,
           category: 1,
           value: 5,
           symbol: "circle",
@@ -238,16 +231,10 @@ export class BluetoothNetworkVisualization extends LitElement {
           });
           return;
         }
-        const device = this._sourceDevices[node.address] as
-          | DeviceRegistryEntry
-          | undefined;
-        const area = device
-          ? getDeviceContext(device, this.hass).area
-          : undefined;
+        const device = this._sourceDevices[node.address];
         nodes.push({
           id: node.address,
           name: this._getBluetoothDeviceName(node.address),
-          context: area?.name,
           value: device ? 1 : 0,
           category: device ? 2 : 3,
           symbolSize: 20,
@@ -307,20 +294,15 @@ export class BluetoothNetworkVisualization extends LitElement {
       const btDevice = this._data.find((d) => d.address === address);
       if (btDevice) {
         tooltipText = `<b>${name}</b><br><b>${this.hass.localize("ui.panel.config.bluetooth.address")}:</b> ${address}<br><b>${this.hass.localize("ui.panel.config.bluetooth.rssi")}:</b> ${btDevice.rssi}<br><b>${this.hass.localize("ui.panel.config.bluetooth.source")}:</b> ${btDevice.source}<br><b>${this.hass.localize("ui.panel.config.bluetooth.updated")}:</b> ${relativeTime(new Date(btDevice.time * 1000), this.hass.locale)}`;
-        const device = this._sourceDevices[address];
-        if (device) {
-          const area = getDeviceContext(device, this.hass).area;
-          if (area) {
-            tooltipText += `<br><b>${this.hass.localize("ui.panel.config.bluetooth.area")}: </b>${area.name}`;
-          }
-        }
       } else {
         const device = this._sourceDevices[address];
         if (device) {
           tooltipText = `<b>${name}</b><br><b>${this.hass.localize("ui.panel.config.bluetooth.address")}:</b> ${address}`;
-          const area = getDeviceContext(device, this.hass).area;
-          if (area) {
-            tooltipText += `<br><b>${this.hass.localize("ui.panel.config.bluetooth.area")}: </b>${area.name}`;
+          if (device.area_id) {
+            const area = this.hass.areas[device.area_id];
+            if (area) {
+              tooltipText += `<br><b>${this.hass.localize("ui.panel.config.bluetooth.area")}: </b>${area.name}`;
+            }
           }
         }
       }

src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts

@@ -426,10 +426,6 @@ class DialogZHAReconfigureDevice extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-dialog {
-          --mdc-dialog-max-width: 800px;
-        }
-
         .wrapper {
           display: grid;
           grid-template-columns: 3fr 1fr 2fr;

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -19,8 +19,6 @@ import "../../../../../layouts/hass-tabs-subpage";
 import type { HomeAssistant, Route } from "../../../../../types";
 import { formatAsPaddedHex } from "./functions";
 import { zhaTabs } from "./zha-config-dashboard";
-import type { DeviceRegistryEntry } from "../../../../../data/device_registry";
-import { getDeviceContext } from "../../../../../common/entity/context/get_device_context";
 
 @customElement("zha-network-visualization-page")
 export class ZHANetworkVisualizationPage extends LitElement {
@@ -119,11 +117,8 @@ export class ZHANetworkVisualizationPage extends LitElement {
     } else {
       label += `<br><b>${this.hass.localize("ui.panel.config.zha.visualization.device_not_in_db")}</b>`;
     }
-    const haDevice = this.hass.devices[device.device_reg_id] as
-      | DeviceRegistryEntry
-      | undefined;
-    if (haDevice) {
-      const area = getDeviceContext(haDevice, this.hass).area;
+    if (device.area_id) {
+      const area = this.hass.areas[device.area_id];
       if (area) {
         label += `<br><b>${this.hass.localize("ui.panel.config.zha.visualization.area")}: </b>${area.name}`;
       }
@@ -209,17 +204,10 @@ export class ZHANetworkVisualizationPage extends LitElement {
         category = 2; // End Device
       }
 
-      const haDevice = this.hass.devices[device.device_reg_id] as
-        | DeviceRegistryEntry
-        | undefined;
-      const area = haDevice
-        ? getDeviceContext(haDevice, this.hass).area
-        : undefined;
       // Create node
       nodes.push({
         id: device.ieee,
         name: device.user_given_name || device.name || device.ieee,
-        context: area?.name,
         category,
         value: isCoordinator ? 3 : device.device_type === "Router" ? 2 : 1,
         symbolSize: isCoordinator

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-network-visualization.ts

@@ -5,7 +5,6 @@ import type {
 import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { getDeviceContext } from "../../../../../common/entity/context/get_device_context";
 import { navigate } from "../../../../../common/navigate";
 import { debounce } from "../../../../../common/util/debounce";
 import "../../../../../components/chart/ha-network-graph";
@@ -125,7 +124,7 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
       return tip;
     }
     const { id, name } = data as any;
-    const device = this._devices[id] as DeviceRegistryEntry | undefined;
+    const device = this._devices[id];
     const nodeStatus = this._nodeStatuses[id];
     let tip = `${(params as any).marker} ${name}`;
     tip += `<br><b>${this.hass.localize("ui.panel.config.zwave_js.visualization.node_id")}:</b> ${id}`;
@@ -139,12 +138,6 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
         tip += `<br><b>Z-Wave Plus:</b> ${this.hass.localize("ui.panel.config.zwave_js.visualization.version")} ${nodeStatus.zwave_plus_version}`;
       }
     }
-    if (device) {
-      const area = getDeviceContext(device, this.hass).area;
-      if (area) {
-        tip += `<br><b>${this.hass.localize("ui.panel.config.zwave_js.visualization.area")}:</b> ${area.name}`;
-      }
-    }
     return tip;
   };
 
@@ -204,16 +197,10 @@ export class ZWaveJSNetworkVisualization extends SubscribeMixin(LitElement) {
         if (node.is_controller_node) {
           controllerNode = node.node_id;
         }
-        const device = this._devices[node.node_id] as
-          | DeviceRegistryEntry
-          | undefined;
-        const area = device
-          ? getDeviceContext(device, this.hass).area
-          : undefined;
+        const device = this._devices[node.node_id];
         nodes.push({
           id: String(node.node_id),
           name: device?.name_by_user ?? device?.name ?? String(node.node_id),
-          context: area?.name,
           value: node.is_controller_node ? 3 : node.is_routing ? 2 : 1,
           category:
             node.status === NodeStatus.Dead

src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts

@@ -320,9 +320,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
 
       if (this.hass.panels.light) {
         result.push({
-          icon: this.hass.panels.light.icon || "mdi:lamps",
+          icon: "mdi:lamps",
           title: this.hass.localize("panel.light"),
-          show_in_sidebar: true,
+          show_in_sidebar: false,
           mode: "storage",
           url_path: "light",
           filename: "",
@@ -334,9 +334,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
 
       if (this.hass.panels.security) {
         result.push({
-          icon: this.hass.panels.security.icon || "mdi:security",
+          icon: "mdi:security",
           title: this.hass.localize("panel.security"),
-          show_in_sidebar: true,
+          show_in_sidebar: false,
           mode: "storage",
           url_path: "security",
           filename: "",
@@ -348,9 +348,9 @@ export class HaConfigLovelaceDashboards extends LitElement {
 
       if (this.hass.panels.climate) {
         result.push({
-          icon: this.hass.panels.climate.icon || "mdi:home-thermometer",
+          icon: "mdi:home-thermometer",
           title: this.hass.localize("panel.climate"),
-          show_in_sidebar: true,
+          show_in_sidebar: false,
           mode: "storage",
           url_path: "climate",
           filename: "",
@@ -360,20 +360,6 @@ export class HaConfigLovelaceDashboards extends LitElement {
         });
       }
 
-      if (this.hass.panels.home) {
-        result.push({
-          icon: this.hass.panels.home.icon || "mdi:home",
-          title: this.hass.localize("panel.home"),
-          show_in_sidebar: true,
-          mode: "storage",
-          url_path: "home",
-          filename: "",
-          default: false,
-          require_admin: false,
-          type: this._localizeType("built_in"),
-        });
-      }
-
       result.push(
         ...dashboards
           .sort((a, b) =>
@@ -484,18 +470,13 @@ export class HaConfigLovelaceDashboards extends LitElement {
   }
 
   private _canDelete(urlPath: string) {
-    return ![
-      "lovelace",
-      "energy",
-      "light",
-      "security",
-      "climate",
-      "home",
-    ].includes(urlPath);
+    return !["lovelace", "energy", "light", "security", "climate"].includes(
+      urlPath
+    );
   }
 
   private _canEdit(urlPath: string) {
-    return !["light", "security", "climate", "home"].includes(urlPath);
+    return !["light", "security", "climate"].includes(urlPath);
   }
 
   private _handleDelete = async (item: DataTableItem) => {

src/panels/config/repairs/dialog-repairs-issue-subtitle.ts

@@ -41,6 +41,7 @@ class DialogRepairsIssueSubtitle extends LitElement {
     :host {
       display: block;
       font-size: var(--ha-font-size-m);
+      margin-bottom: 8px;
       color: var(--secondary-text-color);
       text-overflow: ellipsis;
       overflow: hidden;

src/panels/config/repairs/dialog-repairs-issue.ts

@@ -1,14 +1,15 @@
-import { mdiOpenInNew } from "@mdi/js";
+import { mdiClose, mdiOpenInNew } 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, state, query } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { isNavigationClick } from "../../../common/dom/is-navigation-click";
 import "../../../components/ha-alert";
-import "../../../components/ha-wa-dialog";
+import "../../../components/ha-md-dialog";
+import type { HaMdDialog } from "../../../components/ha-md-dialog";
 import "../../../components/ha-button";
 import "../../../components/ha-svg-icon";
-import "../../../components/ha-dialog-footer";
+import "../../../components/ha-dialog-header";
 import "./dialog-repairs-issue-subtitle";
 import "../../../components/ha-markdown";
 import type { RepairsIssue } from "../../../data/repairs";
@@ -25,12 +26,11 @@ class DialogRepairsIssue extends LitElement {
 
   @state() private _params?: RepairsIssueDialogParams;
 
-  @state() private _open = false;
+  @query("ha-md-dialog") private _dialog?: HaMdDialog;
 
   public showDialog(params: RepairsIssueDialogParams): void {
     this._params = params;
     this._issue = this._params.issue;
-    this._open = true;
   }
 
   private _dialogClosed() {
@@ -44,7 +44,7 @@ class DialogRepairsIssue extends LitElement {
   }
 
   public closeDialog() {
-    this._open = false;
+    this._dialog?.close();
   }
 
   protected render() {
@@ -62,19 +62,32 @@ class DialogRepairsIssue extends LitElement {
       ) || this.hass!.localize("ui.panel.config.repairs.dialog.title");
 
     return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${dialogTitle}
-        aria-describedby="dialog-repairs-issue-description"
+      <ha-md-dialog
+        open
         @closed=${this._dialogClosed}
+        aria-labelledby="dialog-repairs-issue-title"
+        aria-describedby="dialog-repairs-issue-description"
       >
-        <dialog-repairs-issue-subtitle
-          slot="headerSubtitle"
-          .hass=${this.hass}
-          .issue=${this._issue}
-        ></dialog-repairs-issue-subtitle>
-        <div class="dialog-content">
+        <ha-dialog-header slot="headline">
+          <ha-icon-button
+            slot="navigationIcon"
+            .label=${this.hass.localize("ui.common.close") ?? "Close"}
+            .path=${mdiClose}
+            @click=${this.closeDialog}
+          ></ha-icon-button>
+          <span
+            slot="title"
+            id="dialog-repairs-issue-title"
+            .title=${dialogTitle}
+            >${dialogTitle}</span
+          >
+          <dialog-repairs-issue-subtitle
+            slot="subtitle"
+            .hass=${this.hass}
+            .issue=${this._issue}
+          ></dialog-repairs-issue-subtitle>
+        </ha-dialog-header>
+        <div slot="content" class="dialog-content">
           ${this._issue.breaks_in_ha_version
             ? html`
                 <ha-alert alert-type="warning">
@@ -109,12 +122,8 @@ class DialogRepairsIssue extends LitElement {
               `
             : ""}
         </div>
-        <ha-dialog-footer slot="footer">
-          <ha-button
-            slot="secondaryAction"
-            appearance="plain"
-            @click=${this._ignoreIssue}
-          >
+        <div slot="actions">
+          <ha-button appearance="plain" @click=${this._ignoreIssue}>
             ${this._issue!.ignored
               ? this.hass!.localize("ui.panel.config.repairs.dialog.unignore")
               : this.hass!.localize("ui.panel.config.repairs.dialog.ignore")}
@@ -122,7 +131,6 @@ class DialogRepairsIssue extends LitElement {
           ${this._issue.learn_more_url
             ? html`
                 <ha-button
-                  slot="primaryAction"
                   appearance="filled"
                   rel="noopener noreferrer"
                   href=${learnMoreUrlIsHomeAssistant
@@ -141,8 +149,8 @@ class DialogRepairsIssue extends LitElement {
                 </ha-button>
               `
             : ""}
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+        </div>
+      </ha-md-dialog>
     `;
   }
 
@@ -164,7 +172,7 @@ class DialogRepairsIssue extends LitElement {
         padding-top: 0;
       }
       ha-alert {
-        margin-bottom: var(--ha-space-4);
+        margin-bottom: 16px;
         display: block;
       }
       .dismissed {