Scale small based on date length

Co-authored-by: uptimeZERO_ <pavilionsahota@gmail.com>

.github/copilot-instructions.md

@@ -22,11 +22,13 @@ You are an assistant helping with development of the Home Assistant frontend. Th
 ```bash
 yarn lint          # ESLint + Prettier + TypeScript + Lit
 yarn format        # Auto-fix ESLint + Prettier
-yarn lint:types    # TypeScript compiler
+yarn lint:types    # TypeScript compiler (run WITHOUT file arguments)
 yarn test          # Vitest
 script/develop     # Development server
 ```
 
+> **WARNING:** Never run `tsc` or `yarn lint:types` with file arguments (e.g., `yarn lint:types src/file.ts`). When `tsc` receives file arguments, it ignores `tsconfig.json` and emits `.js` files into `src/`, polluting the codebase. Always run `yarn lint:types` without arguments. For individual file type checking, rely on IDE diagnostics. If `.js` files are accidentally generated, clean up with `git clean -fd src/`.
+
 ### Component Prefixes
 
 - `ha-` - Home Assistant components
@@ -154,7 +156,7 @@ try {
 
 - **Use CSS custom properties**: Leverage the theme system
 - **Use spacing tokens**: Prefer `--ha-space-*` tokens over hardcoded values for consistent spacing
-  - Spacing scale: `--ha-space-0` (0px) through `--ha-space-20` (80px) in 4px increments
+  - Spacing scale: `--ha-space-1` (4px) through `--ha-space-20` (80px) in 4px increments
   - Defined in `src/resources/theme/core.globals.ts`
   - Common values: `--ha-space-2` (8px), `--ha-space-4` (16px), `--ha-space-8` (32px)
 - **Mobile-first responsive**: Design for mobile, enhance for desktop

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@1b168cd39490f61582a9beae412bb7057a6b2c4e # v4.31.8
+        uses: github/codeql-action/init@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
         with:
           languages: ${{ matrix.language }}
 
       # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
       # If this step fails, then you should remove it and run the build manually (see below)
       - name: Autobuild
-        uses: github/codeql-action/autobuild@1b168cd39490f61582a9beae412bb7057a6b2c4e # v4.31.8
+        uses: github/codeql-action/autobuild@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9
 
       # ℹ️ Command-line programs to run using the OS shell.
       # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
       #   make release
 
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@1b168cd39490f61582a9beae412bb7057a6b2c4e # v4.31.8
+        uses: github/codeql-action/analyze@5d4e8d1aca955e8d8589aabd499c5cae939e33c7 # v4.31.9

.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@c45aaa919ef85620af54242a241ac17a8fa35983 # v3.2.1
+        uses: relative-ci/agent-action@3c681926017930047fc03acaa35cd6a44efcbfc3 # v3.2.2
         with:
           key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
           token: ${{ github.token }}

.yarnrc.yml

@@ -1,5 +1,7 @@
 compressionLevel: mixed
 
+npmMinimalAgeGate: "3d"
+
 defaultSemverRangePrefix: ""
 
 enableGlobalCache: false

build-scripts/bundle.cjs

@@ -20,8 +20,6 @@ module.exports.ignorePackages = () => [];
 // Files from NPM packages that we should replace with empty file
 module.exports.emptyPackages = ({ isHassioBuild, isLandingPageBuild }) =>
   [
-    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
-    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
     // Icons in supervisor conflict with icons in HA so we don't load.
     (isHassioBuild || isLandingPageBuild) &&
       require.resolve(

build-scripts/rspack.cjs

@@ -168,12 +168,16 @@ const createRspackConfig = ({
           );
         },
       }),
-      new rspack.NormalModuleReplacementPlugin(
-        new RegExp(
-          bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).join("|")
-        ),
-        path.resolve(paths.root_dir, "src/util/empty.js")
-      ),
+      bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).length
+        ? new rspack.NormalModuleReplacementPlugin(
+            new RegExp(
+              bundle
+                .emptyPackages({ isHassioBuild, isLandingPageBuild })
+                .join("|")
+            ),
+            path.resolve(paths.root_dir, "src/util/empty.js")
+          )
+        : false,
       !isProdBuild && new LogStartCompilePlugin(),
       isProdBuild &&
         new StatsWriterPlugin({
@@ -209,7 +213,9 @@ const createRspackConfig = ({
         "lit/directives/join$": "lit/directives/join.js",
         "lit/directives/repeat$": "lit/directives/repeat.js",
         "lit/directives/live$": "lit/directives/live.js",
-        "lit/directives/keyed$": "lit/directives/keyed.js",
+        "lit/directives/keyed$": latestBuild
+          ? "lit/directives/keyed.js"
+          : path.resolve(__dirname, "../src/common/lit/keyed-es5.ts"),
         "lit/polyfill-support$": "lit/polyfill-support.js",
         "@lit-labs/virtualizer/layouts/grid":
           "@lit-labs/virtualizer/layouts/grid.js",
@@ -217,6 +223,42 @@ const createRspackConfig = ({
           "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js",
         "@lit-labs/observers/resize-controller":
           "@lit-labs/observers/resize-controller.js",
+        "@formatjs/intl-durationformat/should-polyfill$":
+          "@formatjs/intl-durationformat/should-polyfill.js",
+        "@formatjs/intl-durationformat/polyfill-force$":
+          "@formatjs/intl-durationformat/polyfill-force.js",
+        "@formatjs/intl-datetimeformat/should-polyfill":
+          "@formatjs/intl-datetimeformat/should-polyfill.js",
+        "@formatjs/intl-datetimeformat/polyfill-force":
+          "@formatjs/intl-datetimeformat/polyfill-force.js",
+        "@formatjs/intl-displaynames/should-polyfill":
+          "@formatjs/intl-displaynames/should-polyfill.js",
+        "@formatjs/intl-displaynames/polyfill-force":
+          "@formatjs/intl-displaynames/polyfill-force.js",
+        "@formatjs/intl-getcanonicallocales/should-polyfill":
+          "@formatjs/intl-getcanonicallocales/should-polyfill.js",
+        "@formatjs/intl-getcanonicallocales/polyfill-force":
+          "@formatjs/intl-getcanonicallocales/polyfill-force.js",
+        "@formatjs/intl-listformat/should-polyfill":
+          "@formatjs/intl-listformat/should-polyfill.js",
+        "@formatjs/intl-listformat/polyfill-force":
+          "@formatjs/intl-listformat/polyfill-force.js",
+        "@formatjs/intl-locale/should-polyfill":
+          "@formatjs/intl-locale/should-polyfill.js",
+        "@formatjs/intl-locale/polyfill-force":
+          "@formatjs/intl-locale/polyfill-force.js",
+        "@formatjs/intl-numberformat/should-polyfill":
+          "@formatjs/intl-numberformat/should-polyfill.js",
+        "@formatjs/intl-numberformat/polyfill-force":
+          "@formatjs/intl-numberformat/polyfill-force.js",
+        "@formatjs/intl-pluralrules/should-polyfill":
+          "@formatjs/intl-pluralrules/should-polyfill.js",
+        "@formatjs/intl-pluralrules/polyfill-force":
+          "@formatjs/intl-pluralrules/polyfill-force.js",
+        "@formatjs/intl-relativetimeformat/should-polyfill":
+          "@formatjs/intl-relativetimeformat/should-polyfill.js",
+        "@formatjs/intl-relativetimeformat/polyfill-force":
+          "@formatjs/intl-relativetimeformat/polyfill-force.js",
       },
     },
     output: {

cast/src/media/entrypoint.ts

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

cast/src/receiver/entrypoint.ts

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

cast/src/receiver/types.ts

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

eslint.config.mjs

@@ -187,5 +187,11 @@ export default tseslint.config(
       ],
       "no-use-before-define": "off",
     },
+  },
+  {
+    files: ["src/util/recorder-worklet.js"],
+    languageOptions: {
+      globals: globals.audioWorklet,
+    },
   }
 );

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

@@ -40,6 +40,9 @@ const ENTITIES = [
   getEntity("switch", "coffee", "off", {
     friendly_name: "Coffee",
   }),
+  getEntity("number", "number", 5, {
+    friendly_name: "Number",
+  }),
 ];
 
 const DEVICES: DeviceRegistryEntry[] = [
@@ -377,6 +380,33 @@ const SCHEMAS: {
         name: "Constant",
         selector: { constant: { value: true, label: "Yes!" } },
       },
+      choose: {
+        name: "Choose",
+        selector: {
+          choose: {
+            choices: {
+              number: {
+                selector: {
+                  number: {
+                    min: 0,
+                    max: 100,
+                    step: 0.1,
+                  },
+                },
+              },
+              entity: {
+                selector: {
+                  entity: {
+                    filter: {
+                      domain: "number",
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
     },
   },
   {

package.json

@@ -29,36 +29,36 @@
     "@babel/runtime": "7.28.4",
     "@braintree/sanitize-url": "7.1.1",
     "@codemirror/autocomplete": "6.20.0",
-    "@codemirror/commands": "6.10.0",
-    "@codemirror/language": "6.11.3",
+    "@codemirror/commands": "6.10.1",
+    "@codemirror/language": "6.12.1",
     "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.5.11",
-    "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.39.4",
+    "@codemirror/state": "6.5.3",
+    "@codemirror/view": "6.39.9",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.18.2",
-    "@formatjs/intl-displaynames": "6.8.13",
-    "@formatjs/intl-durationformat": "0.7.6",
-    "@formatjs/intl-getcanonicallocales": "2.5.6",
-    "@formatjs/intl-listformat": "7.7.13",
-    "@formatjs/intl-locale": "4.2.13",
-    "@formatjs/intl-numberformat": "8.15.6",
-    "@formatjs/intl-pluralrules": "5.4.6",
-    "@formatjs/intl-relativetimeformat": "11.4.13",
-    "@fullcalendar/core": "6.1.19",
-    "@fullcalendar/daygrid": "6.1.19",
-    "@fullcalendar/interaction": "6.1.19",
-    "@fullcalendar/list": "6.1.19",
-    "@fullcalendar/luxon3": "6.1.19",
-    "@fullcalendar/timegrid": "6.1.19",
+    "@formatjs/intl-datetimeformat": "7.1.2",
+    "@formatjs/intl-displaynames": "7.1.2",
+    "@formatjs/intl-durationformat": "0.9.2",
+    "@formatjs/intl-getcanonicallocales": "3.1.2",
+    "@formatjs/intl-listformat": "8.1.2",
+    "@formatjs/intl-locale": "5.1.2",
+    "@formatjs/intl-numberformat": "9.1.2",
+    "@formatjs/intl-pluralrules": "6.1.2",
+    "@formatjs/intl-relativetimeformat": "12.1.2",
+    "@fullcalendar/core": "6.1.20",
+    "@fullcalendar/daygrid": "6.1.20",
+    "@fullcalendar/interaction": "6.1.20",
+    "@fullcalendar/list": "6.1.20",
+    "@fullcalendar/luxon3": "6.1.20",
+    "@fullcalendar/timegrid": "6.1.20",
     "@home-assistant/webawesome": "3.0.0-ha.2",
     "@lezer/highlight": "1.2.3",
-    "@lit-labs/motion": "1.0.9",
-    "@lit-labs/observers": "2.0.6",
+    "@lit-labs/motion": "1.1.0",
+    "@lit-labs/observers": "2.1.0",
     "@lit-labs/virtualizer": "2.1.1",
     "@lit/context": "1.1.6",
-    "@lit/reactive-element": "2.1.1",
+    "@lit/reactive-element": "2.1.2",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
     "@material/mwc-base": "0.27.0",
@@ -85,12 +85,10 @@
     "@mdi/js": "7.4.47",
     "@mdi/svg": "7.4.47",
     "@replit/codemirror-indentation-markers": "6.5.3",
-    "@swc/helpers": "0.5.17",
+    "@swc/helpers": "0.5.18",
     "@thomasloven/round-slider": "0.6.0",
     "@tsparticles/engine": "3.9.1",
     "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.9.6",
-    "@vaadin/vaadin-themable-mixin": "24.9.6",
     "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -114,13 +112,13 @@
     "hls.js": "1.6.15",
     "home-assistant-js-websocket": "9.6.0",
     "idb-keyval": "6.2.2",
-    "intl-messageformat": "10.7.18",
+    "intl-messageformat": "11.0.9",
     "js-yaml": "4.1.1",
     "leaflet": "1.9.4",
     "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
     "leaflet.markercluster": "1.5.3",
-    "lit": "3.3.1",
-    "lit-html": "3.3.1",
+    "lit": "3.3.2",
+    "lit-html": "3.3.2",
     "luxon": "3.7.2",
     "marked": "17.0.1",
     "memoize-one": "6.0.0",
@@ -152,16 +150,16 @@
     "@babel/helper-define-polyfill-provider": "0.6.5",
     "@babel/plugin-transform-runtime": "7.28.5",
     "@babel/preset-env": "7.28.5",
-    "@bundle-stats/plugin-webpack-filter": "4.21.7",
-    "@lokalise/node-api": "15.4.0",
+    "@bundle-stats/plugin-webpack-filter": "4.21.8",
+    "@lokalise/node-api": "15.6.0",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.0.3",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.3.15",
-    "@rspack/core": "1.6.7",
-    "@rspack/dev-server": "1.1.4",
+    "@rsdoctor/rspack-plugin": "1.4.0",
+    "@rspack/core": "1.7.1",
+    "@rspack/dev-server": "1.1.5",
     "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.22",
+    "@types/chromecast-caf-receiver": "6.0.25",
     "@types/chromecast-caf-sender": "1.0.11",
     "@types/color-name": "2.0.0",
     "@types/culori": "4.0.1",
@@ -178,7 +176,7 @@
     "@types/tar": "6.1.13",
     "@types/ua-parser-js": "0.7.39",
     "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.15",
+    "@vitest/coverage-v8": "4.0.16",
     "babel-loader": "10.0.0",
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
@@ -193,7 +191,7 @@
     "eslint-plugin-unused-imports": "4.3.0",
     "eslint-plugin-wc": "3.0.2",
     "fancy-log": "2.0.0",
-    "fs-extra": "11.3.2",
+    "fs-extra": "11.3.3",
     "glob": "13.0.0",
     "gulp": "5.0.1",
     "gulp-brotli": "3.0.0",
@@ -201,7 +199,7 @@
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "27.3.0",
+    "jsdom": "27.4.0",
     "jszip": "3.10.1",
     "lint-staged": "16.2.7",
     "lit-analyzer": "2.0.3",
@@ -212,26 +210,26 @@
     "prettier": "3.7.4",
     "rspack-manifest-plugin": "5.2.0",
     "serve": "14.2.5",
-    "sinon": "21.0.0",
+    "sinon": "21.0.1",
     "tar": "7.5.2",
     "terser-webpack-plugin": "5.3.16",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.49.0",
-    "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.15",
+    "typescript-eslint": "8.52.0",
+    "vite-tsconfig-paths": "6.0.4",
+    "vitest": "4.0.16",
     "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"
   },
   "resolutions": {
     "@material/mwc-button@^0.25.3": "^0.27.0",
-    "lit": "3.3.1",
-    "lit-html": "3.3.1",
+    "lit": "3.3.2",
+    "lit-html": "3.3.2",
     "clean-css": "5.3.3",
-    "@lit/reactive-element": "2.1.1",
-    "@fullcalendar/daygrid": "6.1.19",
-    "globals": "16.5.0",
+    "@lit/reactive-element": "2.1.2",
+    "@fullcalendar/daygrid": "6.1.20",
+    "globals": "17.0.0",
     "tslib": "2.8.1",
     "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch",
     "glob@^10.2.2": "^10.5.0"

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name         = "home-assistant-frontend"
-version      = "20251203.0"
+version      = "20251229.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"

src/auth/ha-auth-form-string.ts

@@ -38,13 +38,11 @@ export class HaAuthFormString extends HaFormString {
         }
       </style>
       <ha-auth-textfield
-      .type=${
-        !this.isPassword
+        .type=${!this.isPassword
           ? this.stringType
           : this.unmaskedPassword
             ? "text"
-            : "password"
-      }
+            : "password"}
         .label=${this.label}
         .value=${this.data || ""}
         .helper=${this.helper}
@@ -55,18 +53,17 @@ export class HaAuthFormString extends HaFormString {
         .name=${this.schema.name}
         .autocomplete=${this.schema.autocomplete}
         ?autofocus=${this.schema.autofocus}
-        .suffix=${
-          this.isPassword
-            ? // reserve some space for the icon.
-              html`<div style="width: 24px"></div>`
-            : this.schema.description?.suffix
-        }
-        .validationMessage=${this.schema.required ? this.localize?.("ui.panel.page-authorize.form.error_required") : undefined}
+        .suffix=${this.isPassword
+          ? // reserve some space for the icon.
+            html`<div style="width: 24px"></div>`
+          : this.schema.description?.suffix}
+        .validationMessage=${this.schema.required
+          ? this.localize?.("ui.panel.page-authorize.form.error_required")
+          : undefined}
         @input=${this._valueChanged}
         @change=${this._valueChanged}
-        ></ha-auth-textfield>
-        ${this.renderIcon()}
-      </ha-auth-textfield>
+      ></ha-auth-textfield>
+      ${this.renderIcon()}
     `;
   }
 }

src/common/color/compute-color.ts

@@ -1,7 +1,6 @@
 export const THEME_COLORS = new Set([
   "primary",
   "accent",
-  "disabled",
   "red",
   "pink",
   "purple",
@@ -25,6 +24,9 @@ export const THEME_COLORS = new Set([
   "blue-grey",
   "black",
   "white",
+  "primary-text",
+  "secondary-text",
+  "disabled",
 ]);
 
 export function computeCssColor(color: string): string {

src/common/color/palette.ts

@@ -79,7 +79,7 @@ export const generateColorPalette = (
   }
 
   return steps.map((step) => {
-    const name = `color-${label}-${step}`;
+    const name = `ha-color-${label}-${step}`;
 
     // Base color at 50%
     if (step === 50) {

src/common/datetime/calc_date_range.ts

@@ -93,8 +93,8 @@ export const calcDateRange = (
       ];
     case "now-12m":
       return [
-        calcDate(subMonths(today, 12), startOfMonth, hass.locale, hass.config),
-        calcDate(subMonths(today, 1), endOfMonth, hass.locale, hass.config),
+        calcDate(today, subMonths, hass.locale, hass.config, 12),
+        calcDate(today, subMonths, hass.locale, hass.config, 0),
       ];
     case "now-1h":
       return [

src/common/entity/entity_filter.ts

@@ -15,6 +15,7 @@ export interface EntityFilter {
   label?: string | string[];
   entity_category?: EntityCategory | EntityCategory[];
   hidden_platform?: string | string[];
+  hidden_domains?: string | string[];
 }
 
 export type EntityFilterFunc = (entityId: string) => boolean;
@@ -38,6 +39,9 @@ export const generateEntityFilter = (
   const domains = filter.domain
     ? new Set(ensureArray(filter.domain))
     : undefined;
+  const hiddenDomains = filter.hidden_domains
+    ? new Set(ensureArray(filter.hidden_domains))
+    : undefined;
   const deviceClasses = filter.device_class
     ? new Set(ensureArray(filter.device_class))
     : undefined;
@@ -57,12 +61,16 @@ export const generateEntityFilter = (
     if (!stateObj) {
       return false;
     }
-    if (domains) {
+    if (domains || hiddenDomains) {
       const domain = computeDomain(entityId);
-      if (!domains.has(domain)) {
+      if (domains && !domains.has(domain)) {
+        return false;
+      }
+      if (hiddenDomains && hiddenDomains.has(domain)) {
         return false;
       }
     }
+
     if (deviceClasses) {
       const dc = stateObj.attributes.device_class || "none";
       if (!deviceClasses.has(dc)) {

src/common/lit/keyed-es5.ts

@@ -0,0 +1,53 @@
+/**
+ * ES5-compatible implementation of the keyed directive.
+ * Based on lit-html's keyed directive but written to avoid ES5 minification issues.
+ *
+ * This implementation avoids parameter destructuring in the update() method,
+ * which causes Terser with ecma: 5 to generate invalid references like `_k`.
+ *
+ * Used only for ES5 builds (legacy browsers). Modern builds use the original
+ * lit-html keyed directive.
+ *
+ * @see https://github.com/home-assistant/frontend/issues/28732
+ */
+// eslint-disable-next-line import/extensions
+import { directive, Directive } from "lit-html/directive.js";
+// eslint-disable-next-line import/extensions
+import { setCommittedValue } from "lit-html/directive-helpers.js";
+// eslint-disable-next-line lit/no-legacy-imports
+import { nothing } from "lit-html";
+// eslint-disable-next-line import/extensions
+import type { Part } from "lit-html/directive.js";
+
+class KeyedES5 extends Directive {
+  private _key: unknown = nothing;
+
+  render(k: unknown, v: unknown) {
+    this._key = k;
+    return v;
+  }
+
+  update(part: unknown, args: [unknown, unknown]) {
+    const k = args[0];
+    const v = args[1];
+    if (k !== this._key) {
+      // Clear the part before returning a value. The one-arg form of
+      // setCommittedValue sets the value to a sentinel which forces a
+      // commit the next render.
+      setCommittedValue(part as Part);
+      this._key = k;
+    }
+    return v;
+  }
+}
+
+/**
+ * Associates a renderable value with a unique key. When the key changes, the
+ * previous DOM is removed and disposed before rendering the next value, even
+ * if the value - such as a template - is the same.
+ *
+ * This is useful for forcing re-renders of stateful components, or working
+ * with code that expects new data to generate new HTML elements, such as some
+ * animation techniques.
+ */
+export const keyed = directive(KeyedES5);

src/common/navigate.ts

@@ -52,8 +52,10 @@ export const navigate = async (path: string, options?: NavigateOptions) => {
 
   if (__DEMO__) {
     if (replace) {
-      history.replaceState(
-        history.state?.root ? { root: true } : (options?.data ?? null),
+      mainWindow.history.replaceState(
+        mainWindow.history.state?.root
+          ? { root: true }
+          : (options?.data ?? null),
         "",
         `${mainWindow.location.pathname}#${path}`
       );
@@ -61,13 +63,13 @@ export const navigate = async (path: string, options?: NavigateOptions) => {
       mainWindow.location.hash = path;
     }
   } else if (replace) {
-    history.replaceState(
-      history.state?.root ? { root: true } : (options?.data ?? null),
+    mainWindow.history.replaceState(
+      mainWindow.history.state?.root ? { root: true } : (options?.data ?? null),
       "",
       path
     );
   } else {
-    history.pushState(options?.data ?? null, "", path);
+    mainWindow.history.pushState(options?.data ?? null, "", path);
   }
   fireEvent(mainWindow, "location-changed", {
     replace,

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

@@ -21,6 +21,7 @@ import { measureTextWidth } from "../../util/text";
 import { fireEvent } from "../../common/dom/fire_event";
 import { CLIMATE_HVAC_ACTION_TO_MODE } from "../../data/climate";
 import { blankBeforeUnit } from "../../common/translations/blank_before_unit";
+import { filterXSS } from "../../common/util/xss";
 
 const safeParseFloat = (value) => {
   const parsed = parseFloat(value);
@@ -184,7 +185,7 @@ export class StateHistoryChartLine extends LitElement {
           }
 
           if (param.seriesName) {
-            return `${param.marker} ${param.seriesName}: ${value}`;
+            return `${param.marker} ${filterXSS(param.seriesName)}: ${value}`;
           }
           return `${param.marker} ${value}`;
         })

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

@@ -1364,6 +1364,9 @@ export class HaDataTable extends LitElement {
         .mdc-data-table__header-cell > * {
           transition: var(--float-start) 0.2s ease;
         }
+        .mdc-data-table__header-cell--numeric > span {
+          transition: none;
+        }
         .mdc-data-table__header-cell ha-svg-icon {
           top: -3px;
           position: absolute;

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

@@ -1,4 +1,4 @@
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -18,6 +18,7 @@ import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import "../ha-generic-picker";
 import type { HaGenericPicker } from "../ha-generic-picker";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 
 export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
@@ -94,7 +95,30 @@ export class HaDevicePicker extends LitElement {
 
   @state() private _configEntryLookup: Record<string, ConfigEntry> = {};
 
-  private _getDevicesMemoized = memoizeOne(getDevices);
+  private _getDevicesMemoized = memoizeOne(
+    (
+      _devices: HomeAssistant["devices"],
+      configEntryLookup: Record<string, ConfigEntry>,
+      includeDomains?: string[],
+      excludeDomains?: string[],
+      includeDeviceClasses?: string[],
+      deviceFilter?: HaDevicePickerDeviceFilterFunc,
+      entityFilter?: HaEntityPickerEntityFilterFunc,
+      excludeDevices?: string[],
+      value?: string
+    ) =>
+      getDevices(
+        this.hass,
+        configEntryLookup,
+        includeDomains,
+        excludeDomains,
+        includeDeviceClasses,
+        deviceFilter,
+        entityFilter,
+        excludeDevices,
+        value
+      )
+  );
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
     super.firstUpdated(_changedProperties);
@@ -110,7 +134,7 @@ export class HaDevicePicker extends LitElement {
 
   private _getItems = () =>
     this._getDevicesMemoized(
-      this.hass,
+      this.hass.devices,
       this._configEntryLookup,
       this.includeDomains,
       this.excludeDomains,
@@ -162,7 +186,7 @@ export class HaDevicePicker extends LitElement {
     }
   );
 
-  private _rowRenderer: ComboBoxLitRenderer<DevicePickerItem> = (item) => html`
+  private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => html`
     <ha-combo-box-item type="button">
       ${item.domain
         ? html`

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

@@ -61,7 +61,6 @@ class HaDevicesPicker extends LitElement {
         (entityId) => html`
           <div>
             <ha-device-picker
-              allow-custom-entity
               .curValue=${entityId}
               .hass=${this.hass}
               .deviceFilter=${this.deviceFilter}
@@ -79,7 +78,6 @@ class HaDevicesPicker extends LitElement {
       )}
       <div>
         <ha-device-picker
-          allow-custom-entity
           .hass=${this.hass}
           .helper=${this.helper}
           .deviceFilter=${this.deviceFilter}

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

@@ -99,7 +99,6 @@ class HaEntitiesPicker extends LitElement {
             (entityId) => html`
               <div class="entity">
                 <ha-entity-picker
-                  allow-custom-entity
                   .curValue=${entityId}
                   .hass=${this.hass}
                   .includeDomains=${this.includeDomains}
@@ -129,7 +128,6 @@ class HaEntitiesPicker extends LitElement {
       </ha-sortable>
       <div>
         <ha-entity-picker
-          allow-custom-entity
           .hass=${this.hass}
           .includeDomains=${this.includeDomains}
           .excludeDomains=${this.excludeDomains}

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

@@ -1,16 +1,11 @@
-import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
-
-interface AttributeOption {
-  value: string;
-  label: string;
-}
+import "../ha-generic-picker";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";
 
 @customElement("ha-entity-attribute-picker")
 class HaEntityAttributePicker extends LitElement {
@@ -42,51 +37,44 @@ class HaEntityAttributePicker extends LitElement {
 
   @property() public helper?: string;
 
-  @state() private _opened = false;
+  private _getItemsMemoized = memoizeOne(
+    (
+      entityId: string | string[] | undefined,
+      hideAttributes: string[] | undefined,
+      hass: HomeAssistant
+    ): PickerComboBoxItem[] => {
+      const entityIds = entityId ? ensureArray(entityId) : [];
+      const options: PickerComboBoxItem[] = [];
+      const optionsSet = new Set<string>();
 
-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
-
-  protected shouldUpdate(changedProps: PropertyValues) {
-    return !(!changedProps.has("_opened") && this._opened);
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    if (
-      (changedProps.has("_opened") && this._opened) ||
-      changedProps.has("entityId") ||
-      changedProps.has("attribute")
-    ) {
-      const entityIds = this.entityId ? ensureArray(this.entityId) : [];
-      const entitiesOptions = entityIds.map<AttributeOption[]>((entityId) => {
-        const stateObj = this.hass.states[entityId];
+      for (const id of entityIds) {
+        const stateObj = hass.states[id];
         if (!stateObj) {
-          return [];
+          continue;
         }
 
         const attributes = Object.keys(stateObj.attributes).filter(
-          (a) => !this.hideAttributes?.includes(a)
+          (a) => !hideAttributes?.includes(a)
         );
 
-        return attributes.map((a) => ({
-          value: a,
-          label: this.hass.formatEntityAttributeName(stateObj, a),
-        }));
-      });
-
-      const options: AttributeOption[] = [];
-      const optionsSet = new Set<string>();
-      for (const entityOptions of entitiesOptions) {
-        for (const option of entityOptions) {
-          if (!optionsSet.has(option.value)) {
-            optionsSet.add(option.value);
-            options.push(option);
+        for (const attribute of attributes) {
+          if (!optionsSet.has(attribute)) {
+            optionsSet.add(attribute);
+            options.push({
+              id: attribute,
+              primary: hass.formatEntityAttributeName(stateObj, attribute),
+              sorting_label: attribute,
+            });
           }
         }
       }
 
-      (this._comboBox as any).filteredItems = options;
+      return options;
     }
-  }
+  );
+
+  private _getItems = () =>
+    this._getItemsMemoized(this.entityId, this.hideAttributes, this.hass);
 
   protected render() {
     if (!this.hass) {
@@ -94,10 +82,9 @@ class HaEntityAttributePicker extends LitElement {
     }
 
     return html`
-      <ha-combo-box
+      <ha-generic-picker
         .hass=${this.hass}
         .value=${this.value}
-        .autofocus=${this.autofocus}
         .label=${this.label ??
         this.hass.localize(
           "ui.components.entity.entity-attribute-picker.attribute"
@@ -106,38 +93,21 @@ class HaEntityAttributePicker extends LitElement {
         .required=${this.required}
         .helper=${this.helper}
         .allowCustomValue=${this.allowCustomValue}
-        item-id-path="value"
-        item-value-path="value"
-        item-label-path="label"
-        @opened-changed=${this._openedChanged}
+        .getItems=${this._getItems}
         @value-changed=${this._valueChanged}
       >
-      </ha-combo-box>
+      </ha-generic-picker>
     `;
   }
 
-  private get _value() {
-    return this.value || "";
-  }
-
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
   private _valueChanged(ev: ValueChangedEvent<string>) {
     ev.stopPropagation();
     const newValue = ev.detail.value;
-    if (newValue !== this._value) {
-      this._setValue(newValue);
-    }
-  }
-
-  private _setValue(value: string) {
-    this.value = value;
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value });
+    if (newValue !== this.value) {
+      this.value = newValue;
+      fireEvent(this, "value-changed", { value: newValue });
       fireEvent(this, "change");
-    }, 0);
+    }
   }
 }
 

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

@@ -1,15 +1,11 @@
-import "@material/mwc-menu/mwc-menu-surface";
 import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import type { IFuseOptions } from "fuse.js";
-import Fuse from "fuse.js";
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
-import { stopPropagation } from "../../common/dom/stop_propagation";
 import type { EntityNameItem } from "../../common/entity/compute_entity_name_display";
 import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import type { EntityNameType } from "../../common/translations/entity-state";
@@ -18,20 +14,15 @@ import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../chips/ha-assist-chip";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
+import "../ha-combo-box-item";
+import "../ha-generic-picker";
+import type { HaGenericPicker } from "../ha-generic-picker";
 import "../ha-input-helper-text";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";
 import "../ha-sortable";
 
-interface EntityNameOption {
-  primary: string;
-  secondary?: string;
-  field_label: string;
-  value: string;
-}
-
-const rowRenderer: ComboBoxLitRenderer<EntityNameOption> = (item) => html`
-  <ha-combo-box-item type="button">
+const rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => html`
+  <ha-combo-box-item type="button" compact>
     <span slot="headline">${item.primary}</span>
     ${item.secondary
       ? html`<span slot="supporting-text">${item.secondary}</span>`
@@ -79,11 +70,7 @@ export class HaEntityNamePicker extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  @query(".container", true) private _container?: HTMLDivElement;
-
-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
-
-  @state() private _opened = false;
+  @query("ha-generic-picker", true) private _picker?: HaGenericPicker;
 
   private _editIndex?: number;
 
@@ -115,7 +102,7 @@ export class HaEntityNamePicker extends LitElement {
     return options;
   });
 
-  private _getOptions = memoizeOne((entityId?: string) => {
+  private _getItems = memoizeOne((entityId?: string) => {
     if (!entityId) {
       return [];
     }
@@ -124,7 +111,7 @@ export class HaEntityNamePicker extends LitElement {
 
     const items = (
       ["entity", "device", "area", "floor"] as const
-    ).map<EntityNameOption>((name) => {
+    ).map<PickerComboBoxItem>((name) => {
       const stateObj = this.hass.states[entityId];
       const isValid = types.has(name);
       const primary = this.hass.localize(
@@ -137,25 +124,39 @@ export class HaEntityNamePicker extends LitElement {
               `ui.components.entity.entity-name-picker.types.${name}_missing` as LocalizeKeys
             )) || "-";
 
+      const id = formatOptionValue({ type: name });
+
       return {
+        id,
         primary,
         secondary,
-        field_label: primary,
-        value: formatOptionValue({ type: name }),
+        search_labels: {
+          primary,
+          secondary: secondary || null,
+          id,
+        },
+        sorting_label: primary,
       };
     });
 
     return items;
   });
 
-  private _customNameOption = memoizeOne((text: string) => ({
-    primary: this.hass.localize(
-      "ui.components.entity.entity-name-picker.custom_name"
-    ),
-    secondary: `"${text}"`,
-    field_label: text,
-    value: formatOptionValue({ type: "text", text }),
-  }));
+  private _customNameOption = memoizeOne(
+    (text: string): PickerComboBoxItem => ({
+      id: formatOptionValue({ type: "text", text }),
+      primary: this.hass.localize(
+        "ui.components.entity.entity-name-picker.custom_name"
+      ),
+      secondary: `"${text}"`,
+      search_labels: {
+        primary: text,
+        secondary: `"${text}"`,
+        id: formatOptionValue({ type: "text", text }),
+      },
+      sorting_label: text,
+    })
+  );
 
   private _formatItem = (item: EntityNameItem) => {
     if (item.type === "text") {
@@ -171,88 +172,79 @@ export class HaEntityNamePicker extends LitElement {
 
   protected render() {
     const value = this._items;
-    const options = this._getOptions(this.entityId);
     const validTypes = this._validTypes(this.entityId);
 
     return html`
       ${this.label ? html`<label>${this.label}</label>` : nothing}
-      <div class="container">
-        <ha-sortable
-          no-style
-          @item-moved=${this._moveItem}
-          .disabled=${this.disabled}
-          handle-selector="button.primary.action"
-          filter=".add"
-        >
-          <ha-chip-set>
-            ${repeat(
-              this._items,
-              (item) => item,
-              (item: EntityNameItem, idx) => {
-                const label = this._formatItem(item);
-                const isValid = validTypes.has(item.type);
-                return html`
-                  <ha-input-chip
-                    data-idx=${idx}
-                    @remove=${this._removeItem}
-                    @click=${this._editItem}
-                    .label=${label}
-                    .selected=${!this.disabled}
-                    .disabled=${this.disabled}
-                    class=${!isValid ? "invalid" : ""}
-                  >
-                    <ha-svg-icon
-                      slot="icon"
-                      .path=${mdiDragHorizontalVariant}
-                    ></ha-svg-icon>
-                    <span>${label}</span>
-                  </ha-input-chip>
-                `;
-              }
-            )}
-            ${this.disabled
-              ? nothing
-              : html`
-                  <ha-assist-chip
-                    @click=${this._addItem}
-                    .disabled=${this.disabled}
-                    label=${this.hass.localize(
-                      "ui.components.entity.entity-name-picker.add"
-                    )}
-                    class="add"
-                  >
-                    <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-                  </ha-assist-chip>
-                `}
-          </ha-chip-set>
-        </ha-sortable>
-
-        <mwc-menu-surface
-          .open=${this._opened}
-          @closed=${this._onClosed}
-          @opened=${this._onOpened}
-          @input=${stopPropagation}
-          .anchor=${this._container}
-        >
-          <ha-combo-box
-            .hass=${this.hass}
-            .value=${""}
-            .autofocus=${this.autofocus}
+      <ha-generic-picker
+        .hass=${this.hass}
+        .disabled=${this.disabled}
+        .required=${this.required && !value.length}
+        .getItems=${this._getFilteredItems}
+        .rowRenderer=${rowRenderer}
+        .value=${this._getPickerValue()}
+        allow-custom-value
+        .customValueLabel=${this.hass.localize(
+          "ui.components.entity.entity-name-picker.custom_name"
+        )}
+        @value-changed=${this._pickerValueChanged}
+        .searchFn=${this._searchFn}
+        .searchLabel=${this.hass.localize(
+          "ui.components.entity.entity-name-picker.search"
+        )}
+      >
+        <div slot="field" class="container">
+          <ha-sortable
+            no-style
+            @item-moved=${this._moveItem}
             .disabled=${this.disabled}
-            .required=${this.required && !value.length}
-            .items=${options}
-            allow-custom-value
-            item-id-path="value"
-            item-value-path="value"
-            item-label-path="field_label"
-            .renderer=${rowRenderer}
-            @opened-changed=${this._openedChanged}
-            @value-changed=${this._comboBoxValueChanged}
-            @filter-changed=${this._filterChanged}
+            handle-selector="button.primary.action"
+            filter=".add"
           >
-          </ha-combo-box>
-        </mwc-menu-surface>
-      </div>
+            <ha-chip-set>
+              ${repeat(
+                this._items,
+                (item) => item,
+                (item: EntityNameItem, idx) => {
+                  const label = this._formatItem(item);
+                  const isValid = validTypes.has(item.type);
+                  return html`
+                    <ha-input-chip
+                      data-idx=${idx}
+                      @remove=${this._removeItem}
+                      @click=${this._editItem}
+                      .label=${label}
+                      .selected=${!this.disabled}
+                      .disabled=${this.disabled}
+                      class=${!isValid ? "invalid" : ""}
+                    >
+                      <ha-svg-icon
+                        slot="icon"
+                        .path=${mdiDragHorizontalVariant}
+                      ></ha-svg-icon>
+                      <span>${label}</span>
+                    </ha-input-chip>
+                  `;
+                }
+              )}
+              ${this.disabled
+                ? nothing
+                : html`
+                    <ha-assist-chip
+                      @click=${this._addItem}
+                      .disabled=${this.disabled}
+                      label=${this.hass.localize(
+                        "ui.components.entity.entity-name-picker.add"
+                      )}
+                      class="add"
+                    >
+                      <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+                    </ha-assist-chip>
+                  `}
+            </ha-chip-set>
+          </ha-sortable>
+        </div>
+      </ha-generic-picker>
       ${this._renderHelper()}
     `;
   }
@@ -267,32 +259,27 @@ export class HaEntityNamePicker extends LitElement {
       : nothing;
   }
 
-  private _onClosed(ev) {
+  private async _addItem(ev: Event) {
     ev.stopPropagation();
-    this._opened = false;
     this._editIndex = undefined;
+    await this.updateComplete;
+    await this._picker?.open();
   }
 
-  private async _onOpened(ev) {
-    if (!this._opened) {
-      return;
-    }
+  private async _editItem(ev: Event) {
     ev.stopPropagation();
-    this._opened = true;
-    await this._comboBox?.focus();
-    await this._comboBox?.open();
-  }
-
-  private async _addItem(ev) {
-    ev.stopPropagation();
-    this._opened = true;
-  }
-
-  private async _editItem(ev) {
-    ev.stopPropagation();
-    const idx = parseInt(ev.currentTarget.dataset.idx, 10);
+    const idx = parseInt(
+      (ev.currentTarget as HTMLElement).dataset.idx || "",
+      10
+    );
     this._editIndex = idx;
-    this._opened = true;
+    await this.updateComplete;
+    await this._picker?.open();
+    const value = this._items[idx];
+    // Pre-fill the field value when editing a text item
+    if (value.type === "text" && value.text) {
+      this._picker?.setFieldValue(value.text);
+    }
   }
 
   private get _items(): EntityNameItem[] {
@@ -322,78 +309,55 @@ export class HaEntityNamePicker extends LitElement {
     }
   );
 
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    const open = ev.detail.value;
-    if (open) {
-      const options = this._comboBox.items || [];
-
-      const initialItem =
-        this._editIndex != null ? this._items[this._editIndex] : undefined;
-
-      const initialValue = initialItem ? formatOptionValue(initialItem) : "";
-
-      const filteredItems = this._filterSelectedOptions(options, initialValue);
-
-      if (initialItem?.type === "text" && initialItem.text) {
-        filteredItems.push(this._customNameOption(initialItem.text));
-      }
-
-      this._comboBox.filteredItems = filteredItems;
-      this._comboBox.setInputValue(initialValue);
-    } else {
-      this._opened = false;
-      this._comboBox.setInputValue("");
+  private _getPickerValue(): string | undefined {
+    if (this._editIndex != null) {
+      const item = this._items[this._editIndex];
+      return item ? formatOptionValue(item) : undefined;
     }
+    return undefined;
   }
 
-  private _filterSelectedOptions = (
-    options: EntityNameOption[],
-    current?: string
-  ) => {
-    const items = this._items;
+  private _getFilteredItems = (): PickerComboBoxItem[] => {
+    const items = this._getItems(this.entityId);
+    const currentItem =
+      this._editIndex != null ? this._items[this._editIndex] : undefined;
+    const currentValue = currentItem ? formatOptionValue(currentItem) : "";
 
     const excludedValues = new Set(
-      items
+      this._items
         .filter((item) => UNIQUE_TYPES.has(item.type))
         .map((item) => formatOptionValue(item))
     );
 
-    const filteredOptions = options.filter(
-      (option) => !excludedValues.has(option.value) || option.value === current
+    const filteredItems = items.filter(
+      (item) => !excludedValues.has(item.id) || item.id === currentValue
     );
-    return filteredOptions;
-  };
 
-  private _filterChanged(ev: ValueChangedEvent<string>) {
-    const input = ev.detail.value;
-    const filter = input?.toLowerCase() || "";
-    const options = this._comboBox.items || [];
-
-    const currentItem =
-      this._editIndex != null ? this._items[this._editIndex] : undefined;
-
-    const currentValue = currentItem ? formatOptionValue(currentItem) : "";
-
-    let filteredItems = this._filterSelectedOptions(options, currentValue);
-
-    if (!filter) {
-      this._comboBox.filteredItems = filteredItems;
-      return;
+    // When editing an existing text item, include it in the base items
+    if (currentItem?.type === "text" && currentItem.text) {
+      filteredItems.push(this._customNameOption(currentItem.text));
     }
 
-    const fuseOptions: IFuseOptions<EntityNameOption> = {
-      keys: ["primary", "secondary", "value"],
-      isCaseSensitive: false,
-      minMatchCharLength: Math.min(filter.length, 2),
-      threshold: 0.2,
-      ignoreDiacritics: true,
-    };
+    return filteredItems;
+  };
 
-    const fuse = new Fuse(filteredItems, fuseOptions);
-    filteredItems = fuse.search(filter).map((result) => result.item);
-    filteredItems.push(this._customNameOption(input));
-    this._comboBox.filteredItems = filteredItems;
-  }
+  private _searchFn = (
+    searchString: string,
+    filteredItems: PickerComboBoxItem[]
+  ): PickerComboBoxItem[] => {
+    const currentItem =
+      this._editIndex != null ? this._items[this._editIndex] : undefined;
+    const currentId =
+      currentItem?.type === "text" && currentItem.text
+        ? this._customNameOption(currentItem.text).id
+        : undefined;
+
+    // Remove custom name option if search string is present to avoid duplicates
+    if (searchString && currentId) {
+      return filteredItems.filter((item) => item.id !== currentId);
+    }
+    return filteredItems;
+  };
 
   private async _moveItem(ev: CustomEvent) {
     ev.stopPropagation();
@@ -403,25 +367,21 @@ export class HaEntityNamePicker extends LitElement {
     const element = newValue.splice(oldIndex, 1)[0];
     newValue.splice(newIndex, 0, element);
     this._setValue(newValue);
-    await this.updateComplete;
-    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
   }
 
-  private async _removeItem(ev) {
+  private async _removeItem(ev: Event) {
     ev.stopPropagation();
     const value = [...this._items];
-    const idx = parseInt(ev.target.dataset.idx, 10);
+    const idx = parseInt((ev.target as HTMLElement).dataset.idx || "", 10);
     value.splice(idx, 1);
     this._setValue(value);
-    await this.updateComplete;
-    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
   }
 
-  private _comboBoxValueChanged(ev: ValueChangedEvent<string>): void {
+  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
     ev.stopPropagation();
     const value = ev.detail.value;
 
-    if (this.disabled || value === "") {
+    if (this.disabled || !value) {
       return;
     }
 
@@ -431,11 +391,16 @@ export class HaEntityNamePicker extends LitElement {
 
     if (this._editIndex != null) {
       newValue[this._editIndex] = item;
+      this._editIndex = undefined;
     } else {
       newValue.push(item);
     }
 
     this._setValue(newValue);
+
+    if (this._picker) {
+      this._picker.value = undefined;
+    }
   }
 
   private _setValue(value: EntityNameItem[]) {
@@ -497,10 +462,6 @@ export class HaEntityNamePicker extends LitElement {
       order: 1;
     }
 
-    mwc-menu-surface {
-      --mdc-menu-min-width: 100%;
-    }
-
     ha-chip-set {
       padding: var(--ha-space-2) var(--ha-space-2);
     }

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

@@ -1,5 +1,5 @@
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiPlus, mdiShape } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -172,9 +172,9 @@ export class HaEntityPicker extends LitElement {
     return this.showEntityId || this.hass.userData?.showEntityIdPicker;
   }
 
-  private _rowRenderer: ComboBoxLitRenderer<EntityComboBoxItem> = (
+  private _rowRenderer: RenderItemFunction<EntityComboBoxItem> = (
     item,
-    { index }
+    index
   ) => {
     const showEntityId = this._showEntityId;
 
@@ -277,12 +277,13 @@ export class HaEntityPicker extends LitElement {
         .disabled=${this.disabled}
         .autofocus=${this.autofocus}
         .allowCustomValue=${this.allowCustomEntity}
+        .required=${this.required}
         .label=${this.label}
+        .placeholder=${placeholder}
         .helper=${this.helper}
+        .value=${this.addButton ? undefined : this.value}
         .searchLabel=${this.searchLabel}
         .notFoundLabel=${this._notFoundLabel}
-        .placeholder=${placeholder}
-        .value=${this.addButton ? undefined : this.value}
         .rowRenderer=${this._rowRenderer}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
@@ -290,6 +291,7 @@ export class HaEntityPicker extends LitElement {
         .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
         .searchKeys=${entityComboBoxKeys}
+        use-top-label
         .addButtonLabel=${this.addButton
           ? this.hass.localize("ui.components.entity.entity-picker.add")
           : undefined}

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

@@ -1,16 +1,11 @@
-import "@material/mwc-menu/mwc-menu-surface";
 import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import type { IFuseOptions } from "fuse.js";
-import Fuse from "fuse.js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
-import { stopPropagation } from "../../common/dom/stop_propagation";
 import { computeDomain } from "../../common/entity/compute_domain";
 import {
   STATE_DISPLAY_SPECIAL_CONTENT,
@@ -20,21 +15,16 @@ import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../chips/ha-assist-chip";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
+import "../ha-combo-box-item";
+import "../ha-generic-picker";
+import type { HaGenericPicker } from "../ha-generic-picker";
+import "../ha-input-helper-text";
+import {
+  NO_ITEMS_AVAILABLE_ID,
+  type PickerComboBoxItem,
+} from "../ha-picker-combo-box";
 import "../ha-sortable";
 
-interface StateContentOption {
-  primary: string;
-  value: string;
-}
-
-const rowRenderer: ComboBoxLitRenderer<StateContentOption> = (item) => html`
-  <ha-combo-box-item type="button">
-    <span slot="headline">${item.primary}</span>
-  </ha-combo-box-item>
-`;
-
 const HIDDEN_ATTRIBUTES = [
   "access_token",
   "available_modes",
@@ -111,63 +101,88 @@ export class HaStateContentPicker extends LitElement {
 
   @property() public helper?: string;
 
-  @query(".container", true) private _container?: HTMLDivElement;
-
-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
-
-  @state() private _opened = false;
+  @query("ha-generic-picker", true) private _picker?: HaGenericPicker;
 
   private _editIndex?: number;
 
-  private _options = memoizeOne(
+  private _getItems = memoizeOne(
     (entityId?: string, stateObj?: HassEntity, allowName?: boolean) => {
       const domain = entityId ? computeDomain(entityId) : undefined;
-      return [
+      const items: PickerComboBoxItem[] = [
         {
+          id: "state",
           primary: this.hass.localize(
             "ui.components.state-content-picker.state"
           ),
-          value: "state",
+          sorting_label: this.hass.localize(
+            "ui.components.state-content-picker.state"
+          ),
         },
         ...(allowName
           ? [
               {
+                id: "name",
                 primary: this.hass.localize(
                   "ui.components.state-content-picker.name"
                 ),
-                value: "name",
-              },
+                sorting_label: this.hass.localize(
+                  "ui.components.state-content-picker.name"
+                ),
+              } satisfies PickerComboBoxItem,
             ]
           : []),
         {
+          id: "last_changed",
           primary: this.hass.localize(
             "ui.components.state-content-picker.last_changed"
           ),
-          value: "last_changed",
+          sorting_label: this.hass.localize(
+            "ui.components.state-content-picker.last_changed"
+          ),
         },
         {
+          id: "last_updated",
           primary: this.hass.localize(
             "ui.components.state-content-picker.last_updated"
           ),
-          value: "last_updated",
+          sorting_label: this.hass.localize(
+            "ui.components.state-content-picker.last_updated"
+          ),
         },
         ...(domain
           ? STATE_DISPLAY_SPECIAL_CONTENT.filter((content) =>
               STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[domain]?.includes(content)
-            ).map((content) => ({
-              primary: this.hass.localize(
-                `ui.components.state-content-picker.${content}`
-              ),
-              value: content,
-            }))
+            ).map(
+              (content) =>
+                ({
+                  id: content,
+                  primary: this.hass.localize(
+                    `ui.components.state-content-picker.${content}`
+                  ),
+                  sorting_label: this.hass.localize(
+                    `ui.components.state-content-picker.${content}`
+                  ),
+                }) satisfies PickerComboBoxItem
+            )
           : []),
         ...Object.keys(stateObj?.attributes ?? {})
           .filter((a) => !HIDDEN_ATTRIBUTES.includes(a))
-          .map((attribute) => ({
-            primary: this.hass.formatEntityAttributeName(stateObj!, attribute),
-            value: attribute,
-          })),
-      ] satisfies StateContentOption[];
+          .map(
+            (attribute) =>
+              ({
+                id: attribute,
+                primary: this.hass.formatEntityAttributeName(
+                  stateObj!,
+                  attribute
+                ),
+                sorting_label: this.hass.formatEntityAttributeName(
+                  stateObj!,
+                  attribute
+                ),
+              }) satisfies PickerComboBoxItem
+          ),
+      ];
+      return items;
     }
   );
 
@@ -178,122 +193,119 @@ export class HaStateContentPicker extends LitElement {
       ? this.hass.states[this.entityId]
       : undefined;
 
-    const options = this._options(this.entityId, stateObj, this.allowName);
-
     return html`
       ${this.label ? html`<label>${this.label}</label>` : nothing}
-      <div class="container ${this.disabled ? "disabled" : ""}">
-        <ha-sortable
-          no-style
-          @item-moved=${this._moveItem}
-          .disabled=${this.disabled}
-          handle-selector="button.primary.action"
-          filter=".add"
-        >
-          <ha-chip-set>
-            ${repeat(
-              this._value,
-              (item) => item,
-              (item: string, idx) => {
-                const label = options.find((o) => o.value === item)?.primary;
-                const isValid = !!label;
-                return html`
-                  <ha-input-chip
-                    data-idx=${idx}
-                    @remove=${this._removeItem}
-                    @click=${this._editItem}
-                    .label=${label || item}
-                    .selected=${!this.disabled}
-                    .disabled=${this.disabled}
-                    class=${!isValid ? "invalid" : ""}
-                  >
-                    <ha-svg-icon
-                      slot="icon"
-                      .path=${mdiDragHorizontalVariant}
-                    ></ha-svg-icon>
-                  </ha-input-chip>
-                `;
-              }
-            )}
-            ${this.disabled
-              ? nothing
-              : html`
-                  <ha-assist-chip
-                    @click=${this._addItem}
-                    .disabled=${this.disabled}
-                    label=${this.hass.localize(
-                      "ui.components.entity.entity-state-content-picker.add"
-                    )}
-                    class="add"
-                  >
-                    <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-                  </ha-assist-chip>
-                `}
-          </ha-chip-set>
-        </ha-sortable>
-
-        <mwc-menu-surface
-          .open=${this._opened}
-          @closed=${this._onClosed}
-          @opened=${this._onOpened}
-          @input=${stopPropagation}
-          .anchor=${this._container}
-        >
-          <ha-combo-box
-            .hass=${this.hass}
-            .value=${""}
-            .autofocus=${this.autofocus}
-            .disabled=${this.disabled || !this.entityId}
-            .required=${this.required && !value.length}
-            .helper=${this.helper}
-            .items=${options}
-            allow-custom-value
-            item-id-path="value"
-            item-value-path="value"
-            item-label-path="primary"
-            .renderer=${rowRenderer}
-            @opened-changed=${this._openedChanged}
-            @value-changed=${this._comboBoxValueChanged}
-            @filter-changed=${this._filterChanged}
+      <ha-generic-picker
+        .hass=${this.hass}
+        .disabled=${this.disabled}
+        .required=${this.required && !value.length}
+        .value=${this._getPickerValue()}
+        .getItems=${this._getFilteredItems}
+        .getAdditionalItems=${this._getAdditionalItems}
+        .searchFn=${this._searchFn}
+        @value-changed=${this._pickerValueChanged}
+      >
+        <div slot="field" class="container">
+          <ha-sortable
+            no-style
+            @item-moved=${this._moveItem}
+            .disabled=${this.disabled}
+            handle-selector="button.primary.action"
+            filter=".add"
           >
-          </ha-combo-box>
-        </mwc-menu-surface>
-      </div>
+            <ha-chip-set>
+              ${repeat(
+                this._value,
+                (item) => item,
+                (item: string, idx) => {
+                  const label = this._getItemLabel(item, stateObj);
+                  const isValid = !!label;
+                  return html`
+                    <ha-input-chip
+                      data-idx=${idx}
+                      @remove=${this._removeItem}
+                      @click=${this._editItem}
+                      .label=${label || item}
+                      .selected=${!this.disabled}
+                      .disabled=${this.disabled}
+                      class=${!isValid ? "invalid" : ""}
+                    >
+                      <ha-svg-icon
+                        slot="icon"
+                        .path=${mdiDragHorizontalVariant}
+                      ></ha-svg-icon>
+                    </ha-input-chip>
+                  `;
+                }
+              )}
+              ${this.disabled
+                ? nothing
+                : html`
+                    <ha-assist-chip
+                      @click=${this._addItem}
+                      .disabled=${this.disabled}
+                      label=${this.hass.localize(
+                        "ui.components.entity.entity-state-content-picker.add"
+                      )}
+                      class="add"
+                    >
+                      <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+                    </ha-assist-chip>
+                  `}
+            </ha-chip-set>
+          </ha-sortable>
+        </div>
+      </ha-generic-picker>
+      ${this._renderHelper()}
     `;
   }
 
-  private _onClosed(ev) {
+  private _renderHelper() {
+    return this.helper
+      ? html`
+          <ha-input-helper-text .disabled=${this.disabled}>
+            ${this.helper}
+          </ha-input-helper-text>
+        `
+      : nothing;
+  }
+
+  private async _addItem(ev: Event) {
     ev.stopPropagation();
-    this._opened = false;
     this._editIndex = undefined;
+    await this.updateComplete;
+    await this._picker?.open();
   }
 
-  private async _onOpened(ev) {
-    if (!this._opened) {
-      return;
-    }
+  private async _editItem(ev: Event) {
     ev.stopPropagation();
-    this._opened = true;
-    await this._comboBox?.focus();
-    await this._comboBox?.open();
-  }
-
-  private async _addItem(ev) {
-    ev.stopPropagation();
-    this._opened = true;
-  }
-
-  private async _editItem(ev) {
-    ev.stopPropagation();
-    const idx = parseInt(ev.currentTarget.dataset.idx, 10);
+    const idx = parseInt(
+      (ev.currentTarget as HTMLElement).dataset.idx || "",
+      10
+    );
     this._editIndex = idx;
-    this._opened = true;
+    await this.updateComplete;
+    await this._picker?.open();
   }
 
   private get _value() {
     return !this.value ? [] : ensureArray(this.value);
   }
 
+  private _getItemLabel = memoizeOne(
+    (value: string, stateObj?: HassEntity): string | undefined => {
+      const stateObjForItems = this.entityId
+        ? this.hass.states[this.entityId]
+        : stateObj;
+      const items = this._getItems(
+        this.entityId,
+        stateObjForItems,
+        this.allowName
+      );
+      return items.find((item) => item.id === value)?.primary;
+    }
+  );
+
   private _toValue = memoizeOne((value: string[]): typeof this.value => {
     if (value.length === 0) {
       return undefined;
@@ -304,63 +316,81 @@ export class HaStateContentPicker extends LitElement {
     return value;
   });
 
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    const open = ev.detail.value;
-    if (open) {
-      const options = this._comboBox.items || [];
-
-      const initialValue =
-        this._editIndex != null ? this._value[this._editIndex] : "";
-      const filteredItems = this._filterSelectedOptions(options, initialValue);
-
-      this._comboBox.filteredItems = filteredItems;
-      this._comboBox.setInputValue(initialValue);
-    } else {
-      this._opened = false;
+  private _getPickerValue(): string | undefined {
+    if (this._editIndex != null) {
+      return this._value[this._editIndex];
     }
+    return undefined;
   }
 
-  private _filterSelectedOptions = (
-    options: StateContentOption[],
-    current?: string
-  ) => {
+  private _customValueOption = memoizeOne(
+    (text: string): PickerComboBoxItem => ({
+      id: text,
+      primary: this.hass.localize(
+        "ui.components.entity.entity-state-content-picker.custom_attribute"
+      ),
+      secondary: `"${text}"`,
+      search_labels: {
+        primary: text,
+        secondary: `"${text}"`,
+        id: text,
+      },
+      sorting_label: text,
+    })
+  );
+
+  private _getFilteredItems = (): PickerComboBoxItem[] => {
+    const stateObj = this.entityId
+      ? this.hass.states[this.entityId]
+      : undefined;
+    const items = this._getItems(this.entityId, stateObj, this.allowName);
+    const currentValue =
+      this._editIndex != null ? this._value[this._editIndex] : undefined;
+
     const value = this._value;
 
-    return options.filter(
-      (option) => !value.includes(option.value) || option.value === current
-    );
-  };
-
-  private _filterChanged(ev: ValueChangedEvent<string>) {
-    const input = ev.detail.value;
-    const filter = input?.toLowerCase() || "";
-    const options = this._comboBox.items || [];
-
-    const currentValue =
-      this._editIndex != null ? this._value[this._editIndex] : "";
-
-    this._comboBox.filteredItems = this._filterSelectedOptions(
-      options,
-      currentValue
+    const filteredItems = items.filter(
+      (item) => !value.includes(item.id) || item.id === currentValue
     );
 
-    if (!filter) {
-      return;
+    // When editing an existing custom value, include it in the base items
+    if (currentValue && !items.find((item) => item.id === currentValue)) {
+      filteredItems.push(this._customValueOption(currentValue));
     }
 
-    const fuseOptions: IFuseOptions<StateContentOption> = {
-      keys: ["primary", "secondary", "value"],
-      isCaseSensitive: false,
-      minMatchCharLength: Math.min(filter.length, 2),
-      threshold: 0.2,
-      ignoreDiacritics: true,
-    };
+    return filteredItems;
+  };
 
-    const fuse = new Fuse(this._comboBox.filteredItems, fuseOptions);
-    const filteredItems = fuse.search(filter).map((result) => result.item);
+  private _getAdditionalItems = (
+    searchString?: string
+  ): PickerComboBoxItem[] => {
+    const stateObj = this.entityId
+      ? this.hass.states[this.entityId]
+      : undefined;
+    const items = this._getItems(this.entityId, stateObj, this.allowName);
 
-    this._comboBox.filteredItems = filteredItems;
-  }
+    // If the search string does not match with the id of any of the items,
+    // offer to add it as a custom attribute
+    const existingItem = items.find((item) => item.id === searchString);
+    if (searchString && !existingItem) {
+      return [this._customValueOption(searchString)];
+    }
+
+    return [];
+  };
+
+  private _searchFn = (
+    search: string,
+    filteredItems: PickerComboBoxItem[],
+    _allItems: PickerComboBoxItem[]
+  ): PickerComboBoxItem[] => {
+    if (!search) {
+      return filteredItems;
+    }
+
+    // Always exclude NO_ITEMS_AVAILABLE_ID (since custom values are allowed) and currentValue (the custom value being edited)
+    return filteredItems.filter((item) => item.id !== NO_ITEMS_AVAILABLE_ID);
+  };
 
   private async _moveItem(ev: CustomEvent) {
     ev.stopPropagation();
@@ -370,25 +400,21 @@ export class HaStateContentPicker extends LitElement {
     const element = newValue.splice(oldIndex, 1)[0];
     newValue.splice(newIndex, 0, element);
     this._setValue(newValue);
-    await this.updateComplete;
-    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
   }
 
-  private async _removeItem(ev) {
+  private async _removeItem(ev: Event) {
     ev.stopPropagation();
     const value = [...this._value];
-    const idx = parseInt(ev.target.dataset.idx, 10);
+    const idx = parseInt((ev.target as HTMLElement).dataset.idx || "", 10);
     value.splice(idx, 1);
     this._setValue(value);
-    await this.updateComplete;
-    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
   }
 
-  private _comboBoxValueChanged(ev: ValueChangedEvent<string>): void {
+  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
     ev.stopPropagation();
     const value = ev.detail.value;
 
-    if (this.disabled || value === "") {
+    if (this.disabled || !value) {
       return;
     }
 
@@ -396,11 +422,16 @@ export class HaStateContentPicker extends LitElement {
 
     if (this._editIndex != null) {
       newValue[this._editIndex] = value;
+      this._editIndex = undefined;
     } else {
       newValue.push(value);
     }
 
     this._setValue(newValue);
+
+    if (this._picker) {
+      this._picker.value = undefined;
+    }
   }
 
   private _setValue(value: string[]) {
@@ -442,7 +473,7 @@ export class HaStateContentPicker extends LitElement {
         height 180ms ease-in-out,
         background-color 180ms ease-in-out;
     }
-    .container.disabled:after {
+    :host([disabled]) .container:after {
       background-color: var(
         --mdc-text-field-disabled-line-color,
         rgba(0, 0, 0, 0.42)
@@ -462,10 +493,6 @@ export class HaStateContentPicker extends LitElement {
       order: 1;
     }
 
-    mwc-menu-surface {
-      --mdc-menu-min-width: 100%;
-    }
-
     ha-chip-set {
       padding: var(--ha-space-2) var(--ha-space-2);
     }
@@ -486,6 +513,11 @@ export class HaStateContentPicker extends LitElement {
     .sortable-drag {
       cursor: grabbing;
     }
+
+    ha-input-helper-text {
+      display: block;
+      margin: var(--ha-space-2) 0 0;
+    }
   `;
 }
 

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

@@ -1,27 +1,23 @@
-import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { getStates } from "../../common/entity/get_states";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
-
-interface StateOption {
-  value: string;
-  label: string;
-}
+import "../ha-generic-picker";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";
+import type { PickerValueRenderer } from "../ha-picker-field";
 
 @customElement("ha-entity-state-picker")
-class HaEntityStatePicker extends LitElement {
+export class HaEntityStatePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public entityId?: string | string[];
 
   @property() public attribute?: string;
 
-  @property({ attribute: false }) public extraOptions?: any[];
+  @property({ attribute: false }) public extraOptions?: PickerComboBoxItem[];
 
   // eslint-disable-next-line lit/no-native-attributes
   @property({ type: Boolean }) public autofocus = false;
@@ -42,59 +38,82 @@ class HaEntityStatePicker extends LitElement {
 
   @property() public helper?: string;
 
-  @state() private _opened = false;
+  private _getItems = memoizeOne(
+    (
+      hass: HomeAssistant,
+      entityId: string | string[] | undefined,
+      attribute: string | undefined,
+      hideStates: string[] | undefined,
+      extraOptions: PickerComboBoxItem[] | undefined
+    ): PickerComboBoxItem[] => {
+      const entityIds = entityId ? ensureArray(entityId) : [];
 
-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
+      const entitiesOptions = entityIds.map<PickerComboBoxItem[]>(
+        (entityIdItem) => {
+          const stateObj = hass.states[entityIdItem] || {
+            entity_id: entityIdItem,
+            attributes: {},
+          };
 
-  protected shouldUpdate(changedProps: PropertyValues) {
-    return !(!changedProps.has("_opened") && this._opened);
-  }
+          const states = getStates(hass, stateObj, attribute).filter(
+            (s) => !hideStates?.includes(s)
+          );
 
-  protected updated(changedProps: PropertyValues) {
-    if (
-      (changedProps.has("_opened") && this._opened) ||
-      changedProps.has("entityId") ||
-      changedProps.has("attribute") ||
-      changedProps.has("extraOptions")
-    ) {
-      const entityIds = this.entityId ? ensureArray(this.entityId) : [];
+          return states
+            .map((s) => {
+              const primary = attribute
+                ? hass.formatEntityAttributeValue(stateObj, attribute, s)
+                : hass.formatEntityState(stateObj, s);
+              return {
+                id: s,
+                primary,
+                sorting_label: primary,
+              };
+            })
+            .filter((option) => option.id && option.primary);
+        }
+      );
 
-      const entitiesOptions = entityIds.map<StateOption[]>((entityId) => {
-        const stateObj = this.hass.states[entityId] || {
-          entity_id: entityId,
-          attributes: {},
-        };
-
-        const states = getStates(this.hass, stateObj, this.attribute).filter(
-          (s) => !this.hideStates?.includes(s)
-        );
-
-        return states.map((s) => ({
-          value: s,
-          label: this.attribute
-            ? this.hass.formatEntityAttributeValue(stateObj, this.attribute, s)
-            : this.hass.formatEntityState(stateObj, s),
-        }));
-      });
-
-      const options: StateOption[] = [];
+      const options: PickerComboBoxItem[] = [];
       const optionsSet = new Set<string>();
       for (const entityOptions of entitiesOptions) {
         for (const option of entityOptions) {
-          if (!optionsSet.has(option.value)) {
-            optionsSet.add(option.value);
+          if (!optionsSet.has(option.id)) {
+            optionsSet.add(option.id);
             options.push(option);
           }
         }
       }
 
-      if (this.extraOptions) {
-        options.unshift(...this.extraOptions);
+      if (extraOptions) {
+        // Filter out any extraOptions with empty primary or id fields
+        const validExtraOptions = extraOptions.filter(
+          (option) => option.id && option.primary
+        );
+        options.unshift(...validExtraOptions);
       }
 
-      (this._comboBox as any).filteredItems = options;
+      return options;
     }
-  }
+  );
+
+  private _getFilteredItems = (
+    _searchString?: string,
+    _section?: string
+  ): PickerComboBoxItem[] =>
+    this._getItems(
+      this.hass,
+      this.entityId,
+      this.attribute,
+      this.hideStates,
+      this.extraOptions
+    );
+
+  private _valueRenderer: PickerValueRenderer = (value: string) => {
+    const items = this._getFilteredItems();
+    const item = items.find((option) => option.id === value);
+    return html`<span slot="headline">${item?.primary ?? value}</span>`;
+  };
 
   protected render() {
     if (!this.hass) {
@@ -102,48 +121,40 @@ class HaEntityStatePicker extends LitElement {
     }
 
     return html`
-      <ha-combo-box
+      <ha-generic-picker
         .hass=${this.hass}
-        .value=${this._value}
+        .allowCustomValue=${this.allowCustomValue}
+        .disabled=${this.disabled || !this.entityId}
         .autofocus=${this.autofocus}
+        .required=${this.required}
         .label=${this.label ??
         this.hass.localize("ui.components.entity.entity-state-picker.state")}
-        .disabled=${this.disabled || !this.entityId}
-        .required=${this.required}
         .helper=${this.helper}
-        .allowCustomValue=${this.allowCustomValue}
-        item-id-path="value"
-        item-value-path="value"
-        item-label-path="label"
-        @opened-changed=${this._openedChanged}
+        .value=${this.value}
+        .getItems=${this._getFilteredItems}
+        .valueRenderer=${this._valueRenderer}
+        .notFoundLabel=${this.hass.localize("ui.components.combo-box.no_match")}
+        .customValueLabel=${this.hass.localize(
+          "ui.components.entity.entity-state-picker.add_custom_state"
+        )}
         @value-changed=${this._valueChanged}
       >
-      </ha-combo-box>
+      </ha-generic-picker>
     `;
   }
 
-  private get _value() {
-    return this.value || "";
-  }
-
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
   private _valueChanged(ev: ValueChangedEvent<string>) {
     ev.stopPropagation();
     const newValue = ev.detail.value;
-    if (newValue !== this._value) {
+    if (newValue !== this.value) {
       this._setValue(newValue);
     }
   }
 
-  private _setValue(value: string) {
+  private _setValue(value: string | undefined) {
     this.value = value;
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value });
-      fireEvent(this, "change");
-    }, 0);
+    fireEvent(this, "value-changed", { value });
+    fireEvent(this, "change");
   }
 }
 

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

@@ -143,17 +143,19 @@ export class HaEntityToggle extends LitElement {
     // Optimistic update.
     this._isOn = turnOn;
 
-    await this.hass.callService(serviceDomain, service, {
-      entity_id: this.stateObj.entity_id,
-    });
-
-    setTimeout(async () => {
-      // If after 2 seconds we have not received a state update
-      // reset the switch to it's original state.
-      if (this.stateObj === currentState) {
-        this._isOn = isOn(this.stateObj);
-      }
-    }, 2000);
+    try {
+      await this.hass.callService(serviceDomain, service, {
+        entity_id: this.stateObj.entity_id,
+      });
+    } finally {
+      setTimeout(async () => {
+        // If after 2 seconds we have not received a state update
+        // reset the switch to it's original state.
+        if (this.stateObj === currentState) {
+          this._isOn = isOn(this.stateObj);
+        }
+      }, 2000);
+    }
   }
 
   static styles = css`

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

@@ -1,5 +1,5 @@
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiChartLine, mdiHelpCircle, mdiShape } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
@@ -141,6 +141,7 @@ export class HaStatisticPicker extends LitElement {
 
   private async _getStatisticIds() {
     this.statisticIds = await getStatisticIds(this.hass, this.statisticTypes);
+    this._picker?.requestUpdate();
   }
 
   private _getItems = () =>
@@ -177,9 +178,9 @@ export class HaStatisticPicker extends LitElement {
       entitiesOnly?: boolean,
       excludeStatistics?: string[],
       value?: string
-    ): StatisticComboBoxItem[] => {
+    ): StatisticComboBoxItem[] | undefined => {
       if (!statisticIds) {
-        return [];
+        return undefined;
       }
 
       if (includeStatisticsUnitOfMeasurement) {
@@ -424,9 +425,9 @@ export class HaStatisticPicker extends LitElement {
     };
   }
 
-  private _rowRenderer: ComboBoxLitRenderer<StatisticComboBoxItem> = (
+  private _rowRenderer: RenderItemFunction<StatisticComboBoxItem> = (
     item,
-    { index }
+    index
   ) => {
     const showEntityId = this.hass.userData?.showEntityIdPicker;
     return html`
@@ -471,14 +472,15 @@ export class HaStatisticPicker extends LitElement {
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .allowCustomValue=${this.allowCustomEntity}
-        .label=${this.label}
         .disabled=${this.disabled}
+        .label=${this.label}
+        use-top-label
+        .placeholder=${placeholder}
+        .value=${this.value}
         .notFoundLabel=${this._notFoundLabel}
         .emptyLabel=${this.hass.localize(
           "ui.components.statistic-picker.no_statistics"
         )}
-        .placeholder=${placeholder}
-        .value=${this.value}
         .rowRenderer=${this._rowRenderer}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}

src/components/ha-adaptive-dialog.ts

@@ -157,7 +157,13 @@ export class HaAdaptiveDialog extends LitElement {
         .headerSubtitlePosition=${this.headerSubtitlePosition}
         flexcontent
       >
-        <slot name="headerNavigationIcon" slot="headerNavigationIcon"></slot>
+        <slot name="headerNavigationIcon" slot="headerNavigationIcon">
+          <ha-icon-button
+            data-dialog="close"
+            .label=${this.hass.localize("ui.common.close")}
+            .path=${mdiClose}
+          ></ha-icon-button>
+        </slot>
         <slot name="headerTitle" slot="headerTitle"></slot>
         <slot name="headerSubtitle" slot="headerSubtitle"></slot>
         <slot name="headerActionItems" slot="headerActionItems"></slot>

src/components/ha-addon-picker.ts

@@ -1,29 +1,29 @@
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
-import { stringCompare } from "../common/string/compare";
-import type { HassioAddonInfo } from "../data/hassio/addon";
 import { fetchHassioAddonsInfo } from "../data/hassio/addon";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import "./ha-alert";
-import "./ha-combo-box";
-import type { HaComboBox } from "./ha-combo-box";
 import "./ha-combo-box-item";
+import "./ha-generic-picker";
+import type { HaGenericPicker } from "./ha-generic-picker";
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 
-const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`
+const SEARCH_KEYS = [
+  { name: "primary", weight: 10 },
+  { name: "secondary", weight: 8 },
+  { name: "search_labels.description", weight: 6 },
+  { name: "search_labels.repository", weight: 5 },
+];
+
+const rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => html`
   <ha-combo-box-item type="button">
-    <span slot="headline">${item.name}</span>
-    <span slot="supporting-text">${item.slug}</span>
+    <span slot="headline">${item.primary}</span>
+    <span slot="supporting-text">${item.secondary}</span>
     ${item.icon
-      ? html`
-          <img
-            alt=""
-            slot="start"
-            .src="/api/hassio/addons/${item.slug}/icon"
-          />
-        `
+      ? html` <img alt="" slot="start" .src=${item.icon} /> `
       : nothing}
   </ha-combo-box-item>
 `;
@@ -38,22 +38,22 @@ class HaAddonPicker extends LitElement {
 
   @property() public helper?: string;
 
-  @state() private _addons?: HassioAddonInfo[];
+  @state() private _addons?: PickerComboBoxItem[];
 
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = false;
 
-  @query("ha-combo-box") private _comboBox!: HaComboBox;
+  @query("ha-generic-picker") private _genericPicker!: HaGenericPicker;
 
   @state() private _error?: string;
 
   public open() {
-    this._comboBox?.open();
+    this._genericPicker?.open();
   }
 
   public focus() {
-    this._comboBox?.focus();
+    this._genericPicker?.focus();
   }
 
   protected firstUpdated() {
@@ -61,29 +61,34 @@ class HaAddonPicker extends LitElement {
   }
 
   protected render() {
+    const label =
+      this.label === undefined && this.hass
+        ? this.hass.localize("ui.components.addon-picker.addon")
+        : this.label;
+
     if (this._error) {
       return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
     }
     if (!this._addons) {
       return nothing;
     }
+
     return html`
-      <ha-combo-box
+      <ha-generic-picker
         .hass=${this.hass}
-        .label=${this.label === undefined && this.hass
-          ? this.hass.localize("ui.components.addon-picker.addon")
-          : this.label}
-        .value=${this._value}
-        .required=${this.required}
-        .disabled=${this.disabled}
+        .autofocus=${this.autofocus}
+        .label=${label}
+        .valueRenderer=${this._valueRenderer}
         .helper=${this.helper}
-        .renderer=${rowRenderer}
-        .items=${this._addons}
-        item-value-path="slug"
-        item-id-path="slug"
-        item-label-path="name"
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .value=${this.value}
+        .getItems=${this._getItems}
+        .searchKeys=${SEARCH_KEYS}
+        .rowRenderer=${rowRenderer}
         @value-changed=${this._addonChanged}
-      ></ha-combo-box>
+      >
+      </ha-generic-picker>
     `;
   }
 
@@ -93,9 +98,19 @@ class HaAddonPicker extends LitElement {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
         this._addons = addonsInfo.addons
           .filter((addon) => addon.version)
-          .sort((a, b) =>
-            stringCompare(a.name, b.name, this.hass.locale.language)
-          );
+          .map((addon) => ({
+            id: addon.slug,
+            primary: addon.name,
+            secondary: addon.slug,
+            icon: addon.icon
+              ? `/api/hassio/addons/${addon.slug}/icon`
+              : undefined,
+            search_labels: {
+              description: addon.description || null,
+              repository: addon.repository || null,
+            },
+            sorting_label: [addon.name, addon.slug].filter(Boolean).join("_"),
+          }));
       } else {
         this._error = this.hass.localize(
           "ui.components.addon-picker.error.no_supervisor"
@@ -108,6 +123,8 @@ class HaAddonPicker extends LitElement {
     }
   }
 
+  private _getItems = () => this._addons!;
+
   private get _value() {
     return this.value || "";
   }
@@ -128,6 +145,17 @@ class HaAddonPicker extends LitElement {
       fireEvent(this, "change");
     }, 0);
   }
+
+  private _valueRenderer = (itemId: string) => {
+    const item = this._addons!.find((addon) => addon.id === itemId);
+    return html`${item?.icon
+        ? html`<img
+            slot="start"
+            alt=${item.primary ?? "Unknown"}
+            .src=${item.icon}
+          />`
+        : nothing}<span slot="headline">${item?.primary || "Unknown"}</span>`;
+  };
 }
 
 declare global {

src/components/ha-area-picker.ts

@@ -51,9 +51,6 @@ export class HaAreaPicker extends LitElement {
   @property({ type: Boolean, attribute: "no-add" })
   public noAdd = false;
 
-  @property({ type: Boolean, attribute: "show-label" })
-  public showLabel = false;
-
   /**
    * Show only areas with entities from specific domains.
    * @type {Array}
@@ -366,16 +363,19 @@ export class HaAreaPicker extends LitElement {
   };
 
   protected render(): TemplateResult {
-    const placeholder =
-      this.placeholder ?? this.hass.localize("ui.components.area-picker.area");
+    const baseLabel =
+      this.label ?? this.hass.localize("ui.components.area-picker.area");
     const valueRenderer = this._computeValueRenderer(this.hass.areas);
 
-    let showLabel = this.showLabel;
-    if (this.value) {
+    // Only show label if there's no floor
+    let label: string | undefined = baseLabel;
+    if (this.value && baseLabel) {
       const area = this.hass.areas[this.value];
       if (area) {
         const { floor } = getAreaContext(area, this.hass.floors);
-        showLabel = !floor && this.showLabel;
+        if (floor) {
+          label = undefined;
+        }
       }
     }
 
@@ -383,14 +383,12 @@ export class HaAreaPicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         .autofocus=${this.autofocus}
-        .label=${this.label}
+        .label=${label}
         .helper=${this.helper}
         .notFoundLabel=${this._notFoundLabel}
         .emptyLabel=${this.hass.localize("ui.components.area-picker.no_areas")}
         .disabled=${this.disabled}
         .required=${this.required}
-        .placeholder=${placeholder}
-        .showLabel=${showLabel}
         .value=${this.value}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}

src/components/ha-automation-row.ts

@@ -174,12 +174,14 @@ export class HaAutomationRow extends LitElement {
     }
     ::slotted([slot="header"]) {
       flex: 1;
+      min-width: 0;
       overflow-wrap: anywhere;
-      margin: var(--ha-space-0) var(--ha-space-3);
+      margin: 0 var(--ha-space-3);
     }
     .icons {
       display: flex;
       align-items: center;
+      flex-shrink: 0;
     }
     :host([sort-selected]) .row {
       outline: solid;

src/components/ha-bottom-sheet.ts

@@ -241,7 +241,7 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
         }
         slot[name="footer"] {
           display: block;
-          padding: var(--ha-space-0);
+          padding: 0;
         }
         ::slotted([slot="footer"]) {
           display: flex;

src/components/ha-card.ts

@@ -46,14 +46,17 @@ export class HaCard extends LitElement {
       line-height: var(--ha-line-height-expanded);
       padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4);
       display: block;
-      margin-block-start: var(--ha-space-0);
-      margin-block-end: var(--ha-space-0);
+      margin-block-start: 0;
+      margin-block-end: 0;
       font-weight: var(--ha-font-weight-normal);
     }
 
-    :host ::slotted(.card-content:not(:first-child)),
+    :host
+      ::slotted(
+        .card-content:not(:nth-child(1 of .card-content, .card-header))
+      ),
     slot:not(:first-child)::slotted(.card-content) {
-      padding-top: var(--ha-space-0);
+      padding-top: 0;
       margin-top: calc(var(--ha-space-2) * -1);
     }
 

src/components/ha-color-picker.ts

@@ -1,25 +1,24 @@
 import { mdiInvertColorsOff, mdiPalette } from "@mdi/js";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
+import memoizeOne from "memoize-one";
 import { computeCssColor, THEME_COLORS } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
-import { stopPropagation } from "../common/dom/stop_propagation";
 import type { LocalizeKeys } from "../common/translations/localize";
 import type { HomeAssistant } from "../types";
-import "./ha-list-item";
-import "./ha-md-divider";
-import "./ha-select";
-import type { HaSelect } from "./ha-select";
+import "./ha-generic-picker";
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
+import type { PickerValueRenderer } from "./ha-picker-field";
 
 @customElement("ha-color-picker")
 export class HaColorPicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public label?: string;
 
   @property() public helper?: string;
 
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property() public value?: string;
 
   @property({ type: String, attribute: "default_color" })
@@ -33,137 +32,208 @@ export class HaColorPicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @query("ha-select") private _select?: HaSelect;
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    // Refresh layout options when the field is connected to the DOM to ensure current value displayed
-    this._select?.layoutOptions();
-  }
-
-  private _valueSelected(ev) {
-    ev.stopPropagation();
-    if (!this.isConnected) return;
-    const value = ev.target.value;
-    this.value = value === this.defaultColor ? undefined : value;
-    fireEvent(this, "value-changed", {
-      value: this.value,
-    });
-  }
+  @property({ type: Boolean }) public required = false;
 
   render() {
-    const value = this.value || this.defaultColor || "";
-
-    const isCustom = !(
-      THEME_COLORS.has(value) ||
-      value === "none" ||
-      value === "state"
-    );
+    const effectiveValue = this.value ?? this.defaultColor ?? "";
 
     return html`
-      <ha-select
-        .icon=${Boolean(value)}
-        .label=${this.label}
-        .value=${value}
-        .helper=${this.helper}
+      <ha-generic-picker
+        .hass=${this.hass}
         .disabled=${this.disabled}
-        @closed=${stopPropagation}
-        @selected=${this._valueSelected}
-        fixedMenuPosition
-        naturalMenuWidth
-        .clearable=${!this.defaultColor}
-      >
-        ${value
-          ? html`
-              <span slot="icon">
-                ${value === "none"
-                  ? html`
-                      <ha-svg-icon path=${mdiInvertColorsOff}></ha-svg-icon>
-                    `
-                  : value === "state"
-                    ? html`<ha-svg-icon path=${mdiPalette}></ha-svg-icon>`
-                    : this._renderColorCircle(value || "grey")}
-              </span>
-            `
-          : nothing}
-        ${this.includeNone
-          ? html`
-              <ha-list-item value="none" graphic="icon">
-                ${this.hass.localize("ui.components.color-picker.none")}
-                ${this.defaultColor === "none"
-                  ? ` (${this.hass.localize("ui.components.color-picker.default")})`
-                  : nothing}
-                <ha-svg-icon
-                  slot="graphic"
-                  path=${mdiInvertColorsOff}
-                ></ha-svg-icon>
-              </ha-list-item>
-            `
-          : nothing}
-        ${this.includeState
-          ? html`
-              <ha-list-item value="state" graphic="icon">
-                ${this.hass.localize("ui.components.color-picker.state")}
-                ${this.defaultColor === "state"
-                  ? ` (${this.hass.localize("ui.components.color-picker.default")})`
-                  : nothing}
-                <ha-svg-icon slot="graphic" path=${mdiPalette}></ha-svg-icon>
-              </ha-list-item>
-            `
-          : nothing}
-        ${this.includeState || this.includeNone
-          ? html`<ha-md-divider role="separator" tabindex="-1"></ha-md-divider>`
-          : nothing}
-        ${Array.from(THEME_COLORS).map(
-          (color) => html`
-            <ha-list-item .value=${color} graphic="icon">
-              ${this.hass.localize(
-                `ui.components.color-picker.colors.${color}` as LocalizeKeys
-              ) || color}
-              ${this.defaultColor === color
-                ? ` (${this.hass.localize("ui.components.color-picker.default")})`
-                : nothing}
-              <span slot="graphic">${this._renderColorCircle(color)}</span>
-            </ha-list-item>
-          `
+        .required=${this.required}
+        .hideClearIcon=${!this.value && !!this.defaultColor}
+        .label=${this.label}
+        .helper=${this.helper}
+        .value=${effectiveValue}
+        .getItems=${this._getItems}
+        .rowRenderer=${this._rowRenderer}
+        .valueRenderer=${this._valueRenderer}
+        @value-changed=${this._valueChanged}
+        .notFoundLabel=${this.hass.localize(
+          "ui.components.color-picker.no_colors_found"
         )}
-        ${isCustom
-          ? html`
-              <ha-list-item .value=${value} graphic="icon">
-                ${value}
-                <span slot="graphic">${this._renderColorCircle(value)}</span>
-              </ha-list-item>
-            `
-          : nothing}
-      </ha-select>
+        .getAdditionalItems=${this._getAdditionalItems}
+      >
+      </ha-generic-picker>
     `;
   }
 
+  private _getAdditionalItems = (
+    searchString?: string
+  ): PickerComboBoxItem[] => {
+    if (!searchString || searchString.trim() === "") {
+      return [];
+    }
+    const colors = this._getColors(
+      this.includeNone,
+      this.includeState,
+      this.defaultColor,
+      this.value
+    );
+    const exactMatch = colors.find((color) => color.id === searchString);
+    if (exactMatch) {
+      return [];
+    }
+    return [
+      {
+        id: searchString,
+        primary: this.hass.localize("ui.components.color-picker.custom_color"),
+        secondary: searchString,
+      },
+    ];
+  };
+
+  private _getItems = () =>
+    this._getColors(
+      this.includeNone,
+      this.includeState,
+      this.defaultColor,
+      this.value
+    );
+
+  private _getColors = memoizeOne(
+    (
+      includeNone: boolean,
+      includeState: boolean,
+      defaultColor: string | undefined,
+      currentValue: string | undefined
+    ): PickerComboBoxItem[] => {
+      const items: PickerComboBoxItem[] = [];
+
+      const defaultSuffix = this.hass.localize(
+        "ui.components.color-picker.default"
+      );
+
+      const addDefaultSuffix = (label: string, isDefault: boolean) =>
+        isDefault && defaultSuffix ? `${label} (${defaultSuffix})` : label;
+
+      if (includeNone) {
+        const noneLabel =
+          this.hass.localize("ui.components.color-picker.none") || "None";
+        items.push({
+          id: "none",
+          primary: addDefaultSuffix(noneLabel, defaultColor === "none"),
+          icon_path: mdiInvertColorsOff,
+        });
+      }
+
+      if (includeState) {
+        const stateLabel =
+          this.hass.localize("ui.components.color-picker.state") || "State";
+        items.push({
+          id: "state",
+          primary: addDefaultSuffix(stateLabel, defaultColor === "state"),
+          icon_path: mdiPalette,
+        });
+      }
+
+      Array.from(THEME_COLORS).forEach((color) => {
+        const themeLabel =
+          this.hass.localize(
+            `ui.components.color-picker.colors.${color}` as LocalizeKeys
+          ) || color;
+        items.push({
+          id: color,
+          primary: addDefaultSuffix(themeLabel, defaultColor === color),
+        });
+      });
+
+      const isSpecial =
+        currentValue === "none" ||
+        currentValue === "state" ||
+        THEME_COLORS.has(currentValue || "");
+
+      const hasValue = currentValue && currentValue.length > 0;
+
+      if (hasValue && !isSpecial) {
+        items.push({
+          id: currentValue!,
+          primary: currentValue!,
+        });
+      }
+
+      return items;
+    }
+  );
+
+  private _rowRenderer: (
+    item: PickerComboBoxItem,
+    index?: number
+  ) => ReturnType<typeof html> = (item) => html`
+    <ha-combo-box-item type="button" compact>
+      ${item.id === "none"
+        ? html`<ha-svg-icon
+            slot="start"
+            .path=${mdiInvertColorsOff}
+          ></ha-svg-icon>`
+        : item.id === "state"
+          ? html`<ha-svg-icon slot="start" .path=${mdiPalette}></ha-svg-icon>`
+          : html`<span slot="start">
+              ${this._renderColorCircle(item.id)}
+            </span>`}
+      <span slot="headline">${item.primary}</span>
+      ${item.secondary
+        ? html`<span slot="supporting-text">${item.secondary}</span>`
+        : nothing}
+    </ha-combo-box-item>
+  `;
+
+  private _valueRenderer: PickerValueRenderer = (value: string) => {
+    if (value === "none") {
+      return html`
+        <ha-svg-icon slot="start" .path=${mdiInvertColorsOff}></ha-svg-icon>
+        <span slot="headline">
+          ${this.hass.localize("ui.components.color-picker.none")}
+        </span>
+      `;
+    }
+    if (value === "state") {
+      return html`
+        <ha-svg-icon slot="start" .path=${mdiPalette}></ha-svg-icon>
+        <span slot="headline">
+          ${this.hass.localize("ui.components.color-picker.state")}
+        </span>
+      `;
+    }
+
+    return html`
+      <span slot="start">${this._renderColorCircle(value)}</span>
+      <span slot="headline">
+        ${this.hass.localize(
+          `ui.components.color-picker.colors.${value}` as LocalizeKeys
+        ) || value}
+      </span>
+    `;
+  };
+
   private _renderColorCircle(color: string) {
     return html`
       <span
-        class="circle-color"
         style=${styleMap({
           "--circle-color": computeCssColor(color),
+          display: "block",
+          "background-color": "var(--circle-color, var(--divider-color))",
+          border: "1px solid var(--outline-color)",
+          "border-radius": "var(--ha-border-radius-pill)",
+          width: "20px",
+          height: "20px",
+          "box-sizing": "border-box",
         })}
       ></span>
     `;
   }
 
-  static styles = css`
-    .circle-color {
-      display: block;
-      background-color: var(--circle-color, var(--divider-color));
-      border: 1px solid var(--outline-color);
-      border-radius: var(--ha-border-radius-pill);
-      width: 20px;
-      height: 20px;
-      box-sizing: border-box;
-    }
-    ha-select {
-      width: 100%;
-    }
-  `;
+  private _valueChanged(ev: CustomEvent<{ value?: string }>) {
+    ev.stopPropagation();
+    const selected = ev.detail.value;
+    const normalized =
+      selected && selected === this.defaultColor
+        ? undefined
+        : (selected ?? undefined);
+    this.value = normalized;
+    fireEvent(this, "value-changed", { value: this.value });
+  }
 }
 
 declare global {

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

@@ -1,24 +0,0 @@
-import type { PropertyValues } from "lit";
-import { customElement, property } from "lit/decorators";
-import { HaTextField } from "./ha-textfield";
-
-@customElement("ha-combo-box-textfield")
-export class HaComboBoxTextField extends HaTextField {
-  @property({ type: Boolean, attribute: "force-blank-value" })
-  public forceBlankValue = false;
-
-  protected willUpdate(changedProps: PropertyValues): void {
-    super.willUpdate(changedProps);
-    if (changedProps.has("value") || changedProps.has("forceBlankValue")) {
-      if (this.forceBlankValue && this.value) {
-        this.value = "";
-      }
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-combo-box-textfield": HaComboBoxTextField;
-  }
-}

src/components/ha-combo-box.ts

@@ -1,433 +0,0 @@
-import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import { comboBoxRenderer } from "@vaadin/combo-box/lit";
-import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
-import type {
-  ComboBoxDataProvider,
-  ComboBoxLight,
-  ComboBoxLightFilterChangedEvent,
-  ComboBoxLightOpenedChangedEvent,
-  ComboBoxLightValueChangedEvent,
-} from "@vaadin/combo-box/vaadin-combo-box-light";
-import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
-import type { TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
-import { fireEvent } from "../common/dom/fire_event";
-import type { HomeAssistant } from "../types";
-import "./ha-combo-box-item";
-import "./ha-combo-box-textfield";
-import "./ha-icon-button";
-import "./ha-input-helper-text";
-import "./ha-textfield";
-import type { HaTextField } from "./ha-textfield";
-
-registerStyles(
-  "vaadin-combo-box-item",
-  css`
-    :host {
-      padding: 0 !important;
-    }
-    :host([focused]:not([disabled])) {
-      background-color: rgba(var(--rgb-primary-text-color, 0, 0, 0), 0.12);
-    }
-    :host([selected]:not([disabled])) {
-      background-color: transparent;
-      color: var(--mdc-theme-primary);
-      --mdc-ripple-color: var(--mdc-theme-primary);
-      --mdc-theme-text-primary-on-background: var(--mdc-theme-primary);
-    }
-    :host([selected]:not([disabled])):before {
-      background-color: var(--mdc-theme-primary);
-      opacity: 0.12;
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    :host([selected][focused]:not([disabled])):before {
-      opacity: 0.24;
-    }
-    :host(:hover:not([disabled])) {
-      background-color: transparent;
-    }
-    [part="content"] {
-      width: 100%;
-    }
-    [part="checkmark"] {
-      display: none;
-    }
-  `
-);
-
-@customElement("ha-combo-box")
-export class HaComboBox extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
-
-  @property() public label?: string;
-
-  @property() public value?: string;
-
-  @property() public placeholder?: string;
-
-  @property({ attribute: false }) public validationMessage?: string;
-
-  @property() public helper?: string;
-
-  @property({ attribute: "error-message" }) public errorMessage?: string;
-
-  @property({ type: Boolean }) public invalid = false;
-
-  @property({ type: Boolean }) public icon = false;
-
-  @property({ attribute: false }) public items?: any[];
-
-  @property({ attribute: false }) public filteredItems?: any[];
-
-  @property({ attribute: false })
-  public dataProvider?: ComboBoxDataProvider<any>;
-
-  @property({ attribute: "allow-custom-value", type: Boolean })
-  public allowCustomValue = false;
-
-  @property({ attribute: "item-value-path" }) public itemValuePath = "value";
-
-  @property({ attribute: "item-label-path" }) public itemLabelPath = "label";
-
-  @property({ attribute: "item-id-path" }) public itemIdPath?: string;
-
-  @property({ attribute: false }) public renderer?: ComboBoxLitRenderer<any>;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
-  @property({ type: Boolean, reflect: true }) public opened = false;
-
-  @property({ type: Boolean, attribute: "hide-clear-icon" })
-  public hideClearIcon = false;
-
-  @property({ type: Boolean, attribute: "clear-initial-value" })
-  public clearInitialValue = false;
-
-  @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
-
-  @query("ha-combo-box-textfield", true) private _inputElement!: HaTextField;
-
-  @state({ type: Boolean }) private _forceBlankValue = false;
-
-  private _overlayMutationObserver?: MutationObserver;
-
-  private _bodyMutationObserver?: MutationObserver;
-
-  public async open() {
-    await this.updateComplete;
-    this._comboBox?.open();
-  }
-
-  public async focus() {
-    await this.updateComplete;
-    await this._inputElement?.updateComplete;
-    this._inputElement?.focus();
-  }
-
-  public disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this._overlayMutationObserver) {
-      this._overlayMutationObserver.disconnect();
-      this._overlayMutationObserver = undefined;
-    }
-    if (this._bodyMutationObserver) {
-      this._bodyMutationObserver.disconnect();
-      this._bodyMutationObserver = undefined;
-    }
-  }
-
-  public get selectedItem() {
-    return this._comboBox.selectedItem;
-  }
-
-  public setInputValue(value: string) {
-    this._comboBox.value = value;
-  }
-
-  public setTextFieldValue(value: string) {
-    this._inputElement.value = value;
-  }
-
-  protected render(): TemplateResult {
-    return html`
-      <!-- @ts-ignore Tag definition is not included in theme folder -->
-      <vaadin-combo-box-light
-        .itemValuePath=${this.itemValuePath}
-        .itemIdPath=${this.itemIdPath}
-        .itemLabelPath=${this.itemLabelPath}
-        .items=${this.items}
-        .value=${this.value || ""}
-        .filteredItems=${this.filteredItems}
-        .dataProvider=${this.dataProvider}
-        .allowCustomValue=${this.allowCustomValue}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        ${comboBoxRenderer(this.renderer || this._defaultRowRenderer)}
-        @opened-changed=${this._openedChanged}
-        @filter-changed=${this._filterChanged}
-        @value-changed=${this._valueChanged}
-        attr-for-value="value"
-      >
-        <ha-combo-box-textfield
-          label=${ifDefined(this.label)}
-          placeholder=${ifDefined(this.placeholder)}
-          ?disabled=${this.disabled}
-          ?required=${this.required}
-          validationMessage=${ifDefined(this.validationMessage)}
-          .errorMessage=${this.errorMessage}
-          class="input"
-          autocapitalize="none"
-          autocomplete="off"
-          .autocorrect=${false}
-          input-spellcheck="false"
-          .suffix=${html`<div
-            style="width: 28px;"
-            role="none presentation"
-          ></div>`}
-          .icon=${this.icon}
-          .invalid=${this.invalid}
-          .forceBlankValue=${this._forceBlankValue}
-        >
-          <slot name="icon" slot="leadingIcon"></slot>
-        </ha-combo-box-textfield>
-        ${this.value && !this.hideClearIcon
-          ? html`<ha-svg-icon
-              role="button"
-              tabindex="-1"
-              aria-label=${ifDefined(this.hass?.localize("ui.common.clear"))}
-              class=${`clear-button ${this.label ? "" : "no-label"}`}
-              .path=${mdiClose}
-              ?disabled=${this.disabled}
-              @click=${this._clearValue}
-            ></ha-svg-icon>`
-          : ""}
-        <ha-svg-icon
-          role="button"
-          tabindex="-1"
-          aria-label=${ifDefined(this.label)}
-          aria-expanded=${this.opened ? "true" : "false"}
-          class=${`toggle-button ${this.label ? "" : "no-label"}`}
-          .path=${this.opened ? mdiMenuUp : mdiMenuDown}
-          ?disabled=${this.disabled}
-          @click=${this._toggleOpen}
-        ></ha-svg-icon>
-      </vaadin-combo-box-light>
-      ${this._renderHelper()}
-    `;
-  }
-
-  private _renderHelper() {
-    return this.helper
-      ? html`<ha-input-helper-text .disabled=${this.disabled}
-          >${this.helper}</ha-input-helper-text
-        >`
-      : "";
-  }
-
-  private _defaultRowRenderer: ComboBoxLitRenderer<
-    string | Record<string, any>
-  > = (item) => html`
-    <ha-combo-box-item type="button">
-      ${this.itemLabelPath ? item[this.itemLabelPath] : item}
-    </ha-combo-box-item>
-  `;
-
-  private _clearValue(ev: Event) {
-    ev.stopPropagation();
-    fireEvent(this, "value-changed", { value: undefined });
-  }
-
-  private _toggleOpen(ev: Event) {
-    if (this.opened) {
-      this._comboBox?.close();
-      ev.stopPropagation();
-    } else {
-      this._comboBox?.inputElement.focus();
-    }
-  }
-
-  private _openedChanged(ev: ComboBoxLightOpenedChangedEvent) {
-    ev.stopPropagation();
-    const opened = ev.detail.value;
-    // delay this so we can handle click event for toggle button before setting _opened
-    setTimeout(() => {
-      this.opened = opened;
-      fireEvent(this, "opened-changed", { value: ev.detail.value });
-    }, 0);
-
-    if (this.clearInitialValue) {
-      this.setTextFieldValue("");
-      if (opened) {
-        // Wait 100ms to be sure vaddin-combo-box-light already tried to set the value
-        setTimeout(() => {
-          this._forceBlankValue = false;
-        }, 100);
-      } else {
-        this._forceBlankValue = true;
-      }
-    }
-
-    if (opened) {
-      const overlay = document.querySelector<HTMLElement>(
-        "vaadin-combo-box-overlay"
-      );
-
-      if (overlay) {
-        this._removeInert(overlay);
-      }
-      this._observeBody();
-    } else {
-      this._bodyMutationObserver?.disconnect();
-      this._bodyMutationObserver = undefined;
-    }
-  }
-
-  private _observeBody() {
-    if ("MutationObserver" in window && !this._bodyMutationObserver) {
-      this._bodyMutationObserver = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          mutation.addedNodes.forEach((node) => {
-            if (node.nodeName === "VAADIN-COMBO-BOX-OVERLAY") {
-              this._removeInert(node as HTMLElement);
-            }
-          });
-          mutation.removedNodes.forEach((node) => {
-            if (node.nodeName === "VAADIN-COMBO-BOX-OVERLAY") {
-              this._overlayMutationObserver?.disconnect();
-              this._overlayMutationObserver = undefined;
-            }
-          });
-        });
-      });
-
-      this._bodyMutationObserver.observe(document.body, {
-        childList: true,
-      });
-    }
-  }
-
-  private _removeInert(overlay: HTMLElement) {
-    if (overlay.inert) {
-      overlay.inert = false;
-      this._overlayMutationObserver?.disconnect();
-      this._overlayMutationObserver = undefined;
-      return;
-    }
-    if ("MutationObserver" in window && !this._overlayMutationObserver) {
-      this._overlayMutationObserver = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.attributeName === "inert") {
-            const target = mutation.target as HTMLElement;
-            if (target.inert) {
-              this._overlayMutationObserver?.disconnect();
-              this._overlayMutationObserver = undefined;
-              target.inert = false;
-            }
-          }
-        });
-      });
-
-      this._overlayMutationObserver.observe(overlay, {
-        attributes: true,
-      });
-    }
-  }
-
-  private _filterChanged(ev: ComboBoxLightFilterChangedEvent) {
-    ev.stopPropagation();
-    fireEvent(this, "filter-changed", { value: ev.detail.value });
-  }
-
-  private _valueChanged(ev: ComboBoxLightValueChangedEvent) {
-    ev.stopPropagation();
-    if (!this.allowCustomValue) {
-      // @ts-ignore
-      this._comboBox._closeOnBlurIsPrevented = true;
-    }
-    if (!this.opened) {
-      return;
-    }
-    const newValue = ev.detail.value;
-    if (newValue !== this.value) {
-      fireEvent(this, "value-changed", { value: newValue || undefined });
-    }
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      width: 100%;
-    }
-    vaadin-combo-box-light {
-      position: relative;
-    }
-    ha-combo-box-textfield {
-      width: 100%;
-    }
-    ha-combo-box-textfield > ha-icon-button {
-      --mdc-icon-button-size: 24px;
-      padding: 2px;
-      color: var(--secondary-text-color);
-    }
-    ha-svg-icon {
-      color: var(--input-dropdown-icon-color);
-      position: absolute;
-      cursor: pointer;
-    }
-    .toggle-button {
-      right: 12px;
-      top: -10px;
-      inset-inline-start: initial;
-      inset-inline-end: 12px;
-      direction: var(--direction);
-    }
-    :host([opened]) .toggle-button {
-      color: var(--primary-color);
-    }
-    .toggle-button[disabled],
-    .clear-button[disabled] {
-      color: var(--disabled-text-color);
-      pointer-events: none;
-    }
-    .toggle-button.no-label {
-      top: -3px;
-    }
-    .clear-button {
-      --mdc-icon-size: 20px;
-      top: -7px;
-      right: 36px;
-      inset-inline-start: initial;
-      inset-inline-end: 36px;
-      direction: var(--direction);
-    }
-    .clear-button.no-label {
-      top: 0;
-    }
-    ha-input-helper-text {
-      margin-top: 4px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-combo-box": HaComboBox;
-  }
-}
-
-declare global {
-  interface HASSDomEvents {
-    "filter-changed": { value: string };
-    "opened-changed": { value: boolean };
-  }
-}

src/components/ha-config-entry-picker.ts

@@ -57,10 +57,9 @@ class HaConfigEntryPicker extends LitElement {
     return html`
       <ha-generic-picker
         .hass=${this.hass}
-        .placeholder=${this.label === undefined && this.hass
+        .label=${this.label === undefined && this.hass
           ? this.hass.localize("ui.components.config-entry-picker.config_entry")
           : this.label}
-        show-label
         .value=${this.value}
         .required=${this.required}
         .disabled=${this.disabled}

src/components/ha-dialog.ts

@@ -101,14 +101,13 @@ export class HaDialog extends DialogBase {
       }
       .mdc-dialog__container {
         align-items: var(--vertical-align-dialog, center);
-        padding: var(--dialog-container-padding, var(--ha-space-0));
+        padding: var(--dialog-container-padding, 0);
       }
       .mdc-dialog__title {
-        padding: var(--ha-space-4) var(--ha-space-4) var(--ha-space-0)
-          var(--ha-space-4);
+        padding: var(--ha-space-4) var(--ha-space-4) 0 var(--ha-space-4);
       }
       .mdc-dialog__title:has(span) {
-        padding: var(--ha-space-3) var(--ha-space-3) var(--ha-space-0);
+        padding: var(--ha-space-3) var(--ha-space-3) 0;
       }
       .mdc-dialog__title::before {
         content: unset;
@@ -136,7 +135,7 @@ export class HaDialog extends DialogBase {
           --ha-dialog-surface-background,
           var(--mdc-theme-surface, #fff)
         );
-        padding: var(--dialog-surface-padding, var(--ha-space-0));
+        padding: var(--dialog-surface-padding, 0);
       }
       :host([flexContent]) .mdc-dialog .mdc-dialog__content {
         display: flex;
@@ -168,7 +167,7 @@ export class HaDialog extends DialogBase {
       }
       .dialog-actions {
         inset-inline-start: initial !important;
-        inset-inline-end: var(--ha-space-0) !important;
+        inset-inline-end: 0 !important;
         direction: var(--direction);
       }
     `,

src/components/ha-duration-input.ts

@@ -1,9 +1,11 @@
+import { mdiMinusThick, mdiPlusThick } from "@mdi/js";
 import type { TemplateResult } from "lit";
-import { html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-base-time-input";
 import type { TimeChangedEvent } from "./ha-base-time-input";
+import "./ha-button-toggle-group";
 
 export interface HaDurationData {
   days?: number;
@@ -13,6 +15,8 @@ export interface HaDurationData {
   milliseconds?: number;
 }
 
+const FIELDS = ["milliseconds", "seconds", "minutes", "hours", "days"];
+
 @customElement("ha-duration-input")
 class HaDurationInput extends LitElement {
   @property({ attribute: false }) public data?: HaDurationData;
@@ -29,41 +33,80 @@ class HaDurationInput extends LitElement {
   @property({ attribute: "enable-day", type: Boolean })
   public enableDay = false;
 
+  @property({ attribute: "allow-negative", type: Boolean })
+  public allowNegative = false;
+
   @property({ type: Boolean }) public disabled = false;
 
+  private _toggleNegative = false;
+
   protected render(): TemplateResult {
     return html`
-      <ha-base-time-input
-        .label=${this.label}
-        .helper=${this.helper}
-        .required=${this.required}
-        .clearable=${!this.required && this.data !== undefined}
-        .autoValidate=${this.required}
-        .disabled=${this.disabled}
-        errorMessage="Required"
-        enable-second
-        .enableMillisecond=${this.enableMillisecond}
-        .enableDay=${this.enableDay}
-        format="24"
-        .days=${this._days}
-        .hours=${this._hours}
-        .minutes=${this._minutes}
-        .seconds=${this._seconds}
-        .milliseconds=${this._milliseconds}
-        @value-changed=${this._durationChanged}
-        no-hours-limit
-        day-label="dd"
-        hour-label="hh"
-        min-label="mm"
-        sec-label="ss"
-        ms-label="ms"
-      ></ha-base-time-input>
+      <div class="row">
+        ${this.allowNegative
+          ? html`
+              <ha-button-toggle-group
+                size="small"
+                .buttons=${[
+                  { label: "+", iconPath: mdiPlusThick, value: "+" },
+                  { label: "-", iconPath: mdiMinusThick, value: "-" },
+                ]}
+                .active=${this._negative ? "-" : "+"}
+                @value-changed=${this._negativeChanged}
+              ></ha-button-toggle-group>
+            `
+          : nothing}
+        <ha-base-time-input
+          .label=${this.label}
+          .helper=${this.helper}
+          .required=${this.required}
+          .clearable=${!this.required && this.data !== undefined}
+          .autoValidate=${this.required}
+          .disabled=${this.disabled}
+          errorMessage="Required"
+          enable-second
+          .enableMillisecond=${this.enableMillisecond}
+          .enableDay=${this.enableDay}
+          format="24"
+          .days=${this._days}
+          .hours=${this._hours}
+          .minutes=${this._minutes}
+          .seconds=${this._seconds}
+          .milliseconds=${this._milliseconds}
+          @value-changed=${this._durationChanged}
+          no-hours-limit
+          day-label="dd"
+          hour-label="hh"
+          min-label="mm"
+          sec-label="ss"
+          ms-label="ms"
+        ></ha-base-time-input>
+      </div>
     `;
   }
 
+  private get _negative() {
+    return (
+      this._toggleNegative ||
+      (this.data?.days
+        ? this.data.days < 0
+        : this.data?.hours
+          ? this.data.hours < 0
+          : this.data?.minutes
+            ? this.data.minutes < 0
+            : this.data?.seconds
+              ? this.data.seconds < 0
+              : this.data?.milliseconds
+                ? this.data.milliseconds < 0
+                : false)
+    );
+  }
+
   private get _days() {
     return this.data?.days
-      ? Number(this.data.days)
+      ? this.allowNegative
+        ? Math.abs(Number(this.data.days))
+        : Number(this.data.days)
       : this.required || this.data
         ? 0
         : NaN;
@@ -71,7 +114,9 @@ class HaDurationInput extends LitElement {
 
   private get _hours() {
     return this.data?.hours
-      ? Number(this.data.hours)
+      ? this.allowNegative
+        ? Math.abs(Number(this.data.hours))
+        : Number(this.data.hours)
       : this.required || this.data
         ? 0
         : NaN;
@@ -79,7 +124,9 @@ class HaDurationInput extends LitElement {
 
   private get _minutes() {
     return this.data?.minutes
-      ? Number(this.data.minutes)
+      ? this.allowNegative
+        ? Math.abs(Number(this.data.minutes))
+        : Number(this.data.minutes)
       : this.required || this.data
         ? 0
         : NaN;
@@ -87,7 +134,9 @@ class HaDurationInput extends LitElement {
 
   private get _seconds() {
     return this.data?.seconds
-      ? Number(this.data.seconds)
+      ? this.allowNegative
+        ? Math.abs(Number(this.data.seconds))
+        : Number(this.data.seconds)
       : this.required || this.data
         ? 0
         : NaN;
@@ -95,7 +144,9 @@ class HaDurationInput extends LitElement {
 
   private get _milliseconds() {
     return this.data?.milliseconds
-      ? Number(this.data.milliseconds)
+      ? this.allowNegative
+        ? Math.abs(Number(this.data.milliseconds))
+        : Number(this.data.milliseconds)
       : this.required || this.data
         ? 0
         : NaN;
@@ -113,6 +164,14 @@ class HaDurationInput extends LitElement {
       if ("days" in value) value.days ||= 0;
       if ("milliseconds" in value) value.milliseconds ||= 0;
 
+      if (this.allowNegative) {
+        FIELDS.forEach((t) => {
+          if (value[t]) {
+            value[t] = Math.abs(value[t]);
+          }
+        });
+      }
+
       if (!this.enableMillisecond && !value.milliseconds) {
         // @ts-ignore
         delete value.milliseconds;
@@ -135,12 +194,47 @@ class HaDurationInput extends LitElement {
         value.days = (value.days ?? 0) + Math.floor(value.hours / 24);
         value.hours %= 24;
       }
+
+      if (this._negative) {
+        FIELDS.forEach((t) => {
+          if (value[t]) {
+            value[t] = -Math.abs(value[t]);
+          }
+        });
+      }
     }
 
     fireEvent(this, "value-changed", {
       value,
     });
   }
+
+  private _negativeChanged(ev) {
+    ev.stopPropagation();
+    const negative = (ev.detail?.value || ev.target.value) === "-";
+    this._toggleNegative = negative;
+    const value = this.data;
+    if (value) {
+      FIELDS.forEach((t) => {
+        if (value[t]) {
+          value[t] = negative ? -Math.abs(value[t]) : Math.abs(value[t]);
+        }
+      });
+      fireEvent(this, "value-changed", {
+        value,
+      });
+    }
+  }
+
+  static styles = css`
+    .row {
+      display: flex;
+      align-items: center;
+    }
+    ha-button-toggle-group {
+      margin: var(--ha-space-2);
+    }
+  `;
 }
 
 declare global {

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

@@ -0,0 +1,198 @@
+import type { SelectedDetail } from "@material/mwc-list";
+import { mdiFilterVariantRemove } from "@mdi/js";
+import type { CSSResultGroup } from "lit";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import { fireEvent } from "../common/dom/fire_event";
+import { haStyleScrollbar } from "../resources/styles";
+import type { HomeAssistant } from "../types";
+import "./ha-check-list-item";
+import "./ha-expansion-panel";
+import "./ha-icon";
+import "./ha-icon-button";
+import "./ha-label";
+import "./ha-list";
+import "./ha-list-item";
+import "./voice-assistant-brand-icon";
+import { voiceAssistants } from "../data/expose";
+import "../panels/config/voice-assistants/expose/expose-assistant-icon";
+
+@customElement("ha-filter-voice-assistants")
+export class HaFilterVoiceAssistants extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  // the list of selected voiceAssistantIds
+  @property({ attribute: false }) public value: string[] = [];
+
+  @property({ type: Boolean }) public narrow = false;
+
+  @property({ type: Boolean, reflect: true }) public expanded = false;
+
+  @state() private _voiceAssistantOptions: string[] = [];
+
+  @state() private _shouldRender = false;
+
+  protected render() {
+    return html`
+      <ha-expansion-panel
+        left-chevron
+        .expanded=${this.expanded}
+        @expanded-will-change=${this._expandedWillChange}
+        @expanded-changed=${this._expandedChanged}
+      >
+        <div slot="header" class="header">
+          ${this.hass.localize(
+            "ui.panel.config.dashboard.voice_assistants.main"
+          )}
+          ${this.value?.length
+            ? html`<div class="badge">${this.value?.length}</div>
+                <ha-icon-button
+                  .path=${mdiFilterVariantRemove}
+                  @click=${this._clearFilter}
+                ></ha-icon-button>`
+            : nothing}
+        </div>
+        ${this._shouldRender
+          ? html`<ha-list
+              @selected=${this._assistantsSelected}
+              class="ha-scrollbar"
+              multi
+            >
+              ${repeat(
+                this._voiceAssistantOptions,
+                (voiceAssistantId) => voiceAssistantId,
+                (voiceAssistantId) =>
+                  html`<ha-check-list-item
+                    .value=${voiceAssistantId}
+                    .selected=${(this.value || []).includes(voiceAssistantId)}
+                    hasMeta
+                    graphic="icon"
+                  >
+                    <voice-assistant-brand-icon
+                      slot="graphic"
+                      .voiceAssistantId=${voiceAssistantId}
+                      .hass=${this.hass}
+                    >
+                    </voice-assistant-brand-icon>
+                    ${voiceAssistants[voiceAssistantId].name}
+                  </ha-check-list-item>`
+              )}
+            </ha-list> `
+          : nothing}
+      </ha-expansion-panel>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    this._voiceAssistantOptions = Object.keys(voiceAssistants);
+  }
+
+  protected updated(changed) {
+    if (changed.has("expanded") && this.expanded) {
+      setTimeout(() => {
+        if (!this.expanded) return;
+        this.renderRoot.querySelector("ha-list")!.style.height =
+          `${this.clientHeight - 49}px`;
+      }, 300);
+    }
+  }
+
+  private _expandedWillChange(ev) {
+    this._shouldRender = ev.detail.expanded;
+  }
+
+  private _expandedChanged(ev) {
+    this.expanded = ev.detail.expanded;
+  }
+
+  private async _assistantsSelected(
+    ev: CustomEvent<SelectedDetail<Set<number>>>
+  ) {
+    if (!ev.detail.index) {
+      fireEvent(this, "data-table-filter-changed", {
+        value: [],
+        items: undefined,
+      });
+      this.value = [];
+      return;
+    }
+
+    const newvalue: string[] = [];
+    for (const index of ev.detail.index) {
+      newvalue.push(this._voiceAssistantOptions![index]);
+    }
+    this.value = newvalue;
+
+    fireEvent(this, "data-table-filter-changed", {
+      value: this.value,
+      items: undefined,
+    });
+  }
+
+  private _clearFilter(ev) {
+    ev.preventDefault();
+    this.value = [];
+    fireEvent(this, "data-table-filter-changed", {
+      value: undefined,
+      items: undefined,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        :host {
+          position: relative;
+          border-bottom: 1px solid var(--divider-color);
+        }
+        :host([expanded]) {
+          flex: 1;
+          height: 0;
+        }
+        ha-expansion-panel {
+          --ha-card-border-radius: var(--ha-border-radius-square);
+          --expansion-panel-content-padding: 0;
+        }
+        .header {
+          display: flex;
+          align-items: center;
+        }
+        .header ha-icon-button {
+          margin-inline-start: auto;
+          margin-inline-end: 8px;
+        }
+        .badge {
+          display: inline-block;
+          margin-left: 8px;
+          margin-inline-start: 8px;
+          margin-inline-end: initial;
+          min-width: 16px;
+          box-sizing: border-box;
+          border-radius: var(--ha-border-radius-circle);
+          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
+          background-color: var(--primary-color);
+          line-height: var(--ha-line-height-normal);
+          text-align: center;
+          padding: 0px 2px;
+          color: var(--text-primary-color);
+        }
+        .add {
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          left: 0;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-filter-voice-assistants": HaFilterVoiceAssistants;
+  }
+}

src/components/ha-floor-picker.ts

@@ -1,5 +1,5 @@
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiPlus, mdiTextureBox } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { TemplateResult } from "lit";
 import { LitElement, html } from "lit";
@@ -303,7 +303,7 @@ export class HaFloorPicker extends LitElement {
     }
   );
 
-  private _rowRenderer: ComboBoxLitRenderer<FloorComboBoxItem> = (item) => html`
+  private _rowRenderer: RenderItemFunction<FloorComboBoxItem> = (item) => html`
     <ha-combo-box-item type="button" compact>
       ${item.icon_path
         ? html`
@@ -389,14 +389,14 @@ export class HaFloorPicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         .autofocus=${this.autofocus}
+        .disabled=${this.disabled}
         .label=${this.label}
         .helper=${this.helper}
-        .disabled=${this.disabled}
+        .placeholder=${placeholder}
         .notFoundLabel=${this._notFoundLabel}
         .emptyLabel=${this.hass.localize(
           "ui.components.floor-picker.no_floors"
         )}
-        .placeholder=${placeholder}
         .value=${this.value}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}

src/components/ha-form/compute-initial-ha-form-data.ts

@@ -1,5 +1,21 @@
 import type { Selector } from "../../data/selector";
-import type { HaFormSchema } from "./types";
+import type { HaFormData, HaFormSchema } from "./types";
+
+const setDefaultValue = (
+  field: HaFormSchema,
+  value: HaFormData | undefined
+) => {
+  if ("selector" in field && "choose" in field.selector) {
+    const firstChoice = Object.keys(field.selector.choose.choices)[0];
+    if (firstChoice) {
+      return {
+        active_choice: firstChoice,
+        [firstChoice]: value,
+      };
+    }
+  }
+  return value;
+};
 
 export const computeInitialHaFormData = (
   schema: HaFormSchema[] | readonly HaFormSchema[]
@@ -10,9 +26,12 @@ export const computeInitialHaFormData = (
       field.description?.suggested_value !== undefined &&
       field.description?.suggested_value !== null
     ) {
-      data[field.name] = field.description.suggested_value;
+      data[field.name] = setDefaultValue(
+        field,
+        field.description.suggested_value
+      );
     } else if ("default" in field) {
-      data[field.name] = field.default;
+      data[field.name] = setDefaultValue(field, field.default);
     } else if (field.type === "expandable") {
       const expandableData = computeInitialHaFormData(field.schema);
       if (field.required || Object.keys(expandableData).length) {
@@ -108,6 +127,21 @@ export const computeInitialHaFormData = (
         data[field.name] = {};
       } else if ("state" in selector) {
         data[field.name] = selector.state?.multiple ? [] : "";
+      } else if ("choose" in selector) {
+        const firstChoice = Object.keys(selector.choose.choices)[0];
+        if (!firstChoice) {
+          data[field.name] = {};
+        } else {
+          data[field.name] = {
+            active_choice: firstChoice,
+            [firstChoice]: computeInitialHaFormData([
+              {
+                name: firstChoice,
+                selector: selector.choose.choices[firstChoice].selector,
+              },
+            ])[firstChoice],
+          };
+        }
       } else {
         throw new Error(
           `Selector ${Object.keys(selector)[0]} not supported in initial form data`

src/components/ha-generic-picker.ts

@@ -1,14 +1,23 @@
 import "@home-assistant/webawesome/dist/components/popover/popover";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiPlaylistPlus } from "@mdi/js";
-import { css, html, LitElement, nothing, type CSSResultGroup } from "lit";
+import {
+  css,
+  html,
+  LitElement,
+  nothing,
+  type CSSResultGroup,
+  type PropertyValues,
+} from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
-import memoizeOne from "memoize-one";
 import { tinykeys } from "tinykeys";
 import { fireEvent } from "../common/dom/fire_event";
+import { throttle } from "../common/util/throttle";
+import { PickerMixin } from "../mixins/picker-mixin";
 import type { FuseWeightedKey } from "../resources/fuseMultiTerm";
 import type { HomeAssistant } from "../types";
+import { isIosApp } from "../util/is_ios";
 import "./ha-bottom-sheet";
 import "./ha-button";
 import "./ha-combo-box-item";
@@ -20,45 +29,24 @@ import type {
   PickerComboBoxSearchFn,
 } from "./ha-picker-combo-box";
 import "./ha-picker-field";
-import type { PickerValueRenderer } from "./ha-picker-field";
 import "./ha-svg-icon";
 
 @customElement("ha-generic-picker")
-export class HaGenericPicker extends LitElement {
+export class HaGenericPicker extends PickerMixin(LitElement) {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
   @property({ type: Boolean, attribute: "allow-custom-value" })
   public allowCustomValue;
 
-  @property() public value?: string;
-
-  @property() public icon?: string;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property() public placeholder?: string;
-
   @property({ type: String, attribute: "search-label" })
   public searchLabel?: string;
 
-  @property({ attribute: "hide-clear-icon", type: Boolean })
-  public hideClearIcon = false;
-
-  @property({ attribute: "show-label", type: Boolean })
-  public showLabel = false;
-
   /** To prevent lags, getItems needs to be memoized */
   @property({ attribute: false })
   public getItems!: (
     searchString?: string,
     section?: string
-  ) => (PickerComboBoxItem | string)[];
+  ) => (PickerComboBoxItem | string)[] | undefined;
 
   @property({ attribute: false, type: Array })
   public getAdditionalItems?: (searchString?: string) => PickerComboBoxItem[];
@@ -66,9 +54,6 @@ export class HaGenericPicker extends LitElement {
   @property({ attribute: false })
   public rowRenderer?: RenderItemFunction<PickerComboBoxItem>;
 
-  @property({ attribute: false })
-  public valueRenderer?: PickerValueRenderer;
-
   @property({ attribute: false })
   public searchFn?: PickerComboBoxSearchFn<PickerComboBoxItem>;
 
@@ -118,7 +103,11 @@ export class HaGenericPicker extends LitElement {
 
   @property({ attribute: "selected-section" }) public selectedSection?: string;
 
-  @property({ attribute: "unknown-item-text" }) public unknownItemText?: string;
+  @property({ type: Boolean, attribute: "use-top-label" })
+  public useTopLabel = false;
+
+  @property({ attribute: "custom-value-label" })
+  public customValueLabel?: string;
 
   @query(".container") private _containerElement?: HTMLDivElement;
 
@@ -132,6 +121,8 @@ export class HaGenericPicker extends LitElement {
 
   @state() private _openedNarrow = false;
 
+  @state() private _unknownValue = false;
+
   static shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
@@ -148,12 +139,33 @@ export class HaGenericPicker extends LitElement {
 
   private _unsubscribeTinyKeys?: () => void;
 
+  protected willUpdate(changedProperties: PropertyValues) {
+    if (changedProperties.has("value")) {
+      this._setUnknownValue();
+      return;
+    }
+    if (changedProperties.has("hass")) {
+      this._throttleUnknownValue();
+    }
+  }
+
+  public setFieldValue(value: string) {
+    if (this._comboBox) {
+      this._comboBox.setFieldValue(value);
+      return;
+    }
+    // Store initial value to set when opened
+    this._initialFieldValue = value;
+  }
+
   protected render() {
-    return html`
-      ${this.label
-        ? html`<label ?disabled=${this.disabled}>${this.label}</label>`
-        : nothing}
-      <div class="container">
+    // Only show label if it's not a top label and there is a value.
+    const label = this.useTopLabel && this.value ? undefined : this.label;
+
+    return html`<div class="container">
+        ${this.useTopLabel && this.label
+          ? html`<label ?disabled=${this.disabled}>${this.label}</label>`
+          : nothing}
         <div id="picker">
           <slot name="field">
             ${this.addButtonLabel && !this.value
@@ -173,14 +185,16 @@ export class HaGenericPicker extends LitElement {
                   type="button"
                   class=${this._opened ? "opened" : ""}
                   compact
-                  .unknown=${this._unknownValue(this.value, this.getItems())}
+                  .unknown=${this._unknownValue}
                   .unknownItemText=${this.unknownItemText}
                   aria-label=${ifDefined(this.label)}
                   @click=${this.open}
                   @clear=${this._clear}
                   .icon=${this.icon}
-                  .showLabel=${this.showLabel}
+                  .image=${this.image}
+                  .label=${label}
                   .placeholder=${this.placeholder}
+                  .helper=${this.helper}
                   .value=${this.value}
                   .valueRenderer=${this.valueRenderer}
                   .required=${this.required}
@@ -188,46 +202,48 @@ export class HaGenericPicker extends LitElement {
                   .invalid=${this.invalid}
                   .hideClearIcon=${this.hideClearIcon}
                 >
+                  <slot name="start"></slot>
                 </ha-picker-field>`}
           </slot>
         </div>
-        ${!this._openedNarrow && (this._pickerWrapperOpen || this._opened)
-          ? html`
-              <wa-popover
-                .open=${this._pickerWrapperOpen}
-                style="--body-width: ${this._popoverWidth}px;"
-                without-arrow
-                distance="-4"
-                .placement=${this.popoverPlacement}
-                for="picker"
-                auto-size="vertical"
-                auto-size-padding="16"
-                @wa-after-show=${this._dialogOpened}
-                @wa-after-hide=${this._hidePicker}
-                trap-focus
-                role="dialog"
-                aria-modal="true"
-                aria-label=${this.label || "Select option"}
-              >
-                ${this._renderComboBox()}
-              </wa-popover>
-            `
-          : this._pickerWrapperOpen || this._opened
-            ? html`<ha-bottom-sheet
-                flexcontent
-                .open=${this._pickerWrapperOpen}
-                @wa-after-show=${this._dialogOpened}
-                @closed=${this._hidePicker}
-                role="dialog"
-                aria-modal="true"
-                aria-label=${this.label || "Select option"}
-              >
-                ${this._renderComboBox(true)}
-              </ha-bottom-sheet>`
-            : nothing}
+        ${this._pickerWrapperOpen || this._opened
+          ? this._openedNarrow
+            ? html`
+                <ha-bottom-sheet
+                  flexcontent
+                  .open=${this._pickerWrapperOpen}
+                  @wa-after-show=${this._dialogOpened}
+                  @closed=${this._hidePicker}
+                  role="dialog"
+                  aria-modal="true"
+                  aria-label=${this.label || "Select option"}
+                >
+                  ${this._renderComboBox(true)}
+                </ha-bottom-sheet>
+              `
+            : html`
+                <wa-popover
+                  .open=${this._pickerWrapperOpen}
+                  style="--body-width: ${this._popoverWidth}px;"
+                  without-arrow
+                  distance="-4"
+                  .placement=${this.popoverPlacement}
+                  for="picker"
+                  auto-size="vertical"
+                  auto-size-padding="16"
+                  @wa-after-show=${this._dialogOpened}
+                  @wa-after-hide=${this._hidePicker}
+                  trap-focus
+                  role="dialog"
+                  aria-modal="true"
+                  aria-label=${this.label || "Select option"}
+                >
+                  ${this._renderComboBox()}
+                </wa-popover>
+              `
+          : nothing}
       </div>
-      ${this._renderHelper()}
-    `;
+      ${this._renderHelper()}`;
   }
 
   private _renderComboBox(dialogMode = false) {
@@ -236,6 +252,7 @@ export class HaGenericPicker extends LitElement {
     }
     return html`
       <ha-picker-combo-box
+        id="combo-box"
         .hass=${this.hass}
         .allowCustomValue=${this.allowCustomValue}
         .label=${this.searchLabel}
@@ -252,20 +269,34 @@ export class HaGenericPicker extends LitElement {
         .sectionTitleFunction=${this.sectionTitleFunction}
         .selectedSection=${this.selectedSection}
         .searchKeys=${this.searchKeys}
+        .customValueLabel=${this.customValueLabel}
       ></ha-picker-combo-box>
     `;
   }
 
-  private _unknownValue = memoizeOne(
-    (value?: string, items?: (PickerComboBoxItem | string)[]) => {
-      if (value === undefined || value === null || value === "" || !items) {
-        return false;
-      }
-
-      return !items.some(
-        (item) => typeof item !== "string" && item.id === value
-      );
+  private _setUnknownValue = () => {
+    const items = this.getItems();
+    if (
+      this.allowCustomValue ||
+      this.value === undefined ||
+      this.value === null ||
+      this.value === "" ||
+      !items
+    ) {
+      this._unknownValue = false;
+      return;
     }
+
+    this._unknownValue = !items.some(
+      (item) => typeof item !== "string" && item.id === this.value
+    );
+  };
+
+  private _throttleUnknownValue = throttle(
+    this._setUnknownValue,
+    1000,
+    true,
+    false
   );
 
   private _renderHelper() {
@@ -281,9 +312,26 @@ export class HaGenericPicker extends LitElement {
     </ha-input-helper-text>`;
   }
 
+  private _initialFieldValue?: string;
+
   private _dialogOpened = () => {
     this._opened = true;
     requestAnimationFrame(() => {
+      // Set initial field value if needed
+      if (this._initialFieldValue) {
+        this._comboBox?.setFieldValue(this._initialFieldValue);
+        this._initialFieldValue = undefined;
+      }
+      if (this.hass && isIosApp(this.hass)) {
+        this.hass.auth.external!.fireMessage({
+          type: "focus_element",
+          payload: {
+            element_id: "combo-box",
+          },
+        });
+        return;
+      }
+
       this._comboBox?.focus();
     });
   };
@@ -310,7 +358,7 @@ export class HaGenericPicker extends LitElement {
     this._newValue = value;
   }
 
-  private _clear(e) {
+  private _clear(e: CustomEvent) {
     e.stopPropagation();
     this._setValue(undefined);
   }
@@ -365,6 +413,7 @@ export class HaGenericPicker extends LitElement {
         .container {
           position: relative;
           display: block;
+          max-width: 100%;
         }
         label[disabled] {
           color: var(--mdc-text-field-disabled-ink-color, rgba(0, 0, 0, 0.6));
@@ -382,7 +431,7 @@ export class HaGenericPicker extends LitElement {
         }
 
         wa-popover {
-          --wa-space-l: var(--ha-space-0);
+          --wa-space-l: 0;
         }
 
         wa-popover::part(body) {
@@ -407,7 +456,7 @@ export class HaGenericPicker extends LitElement {
           --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-padding: 0;
           --ha-bottom-sheet-surface-background: var(--card-background-color);
           --ha-bottom-sheet-border-radius: var(--ha-border-radius-2xl);
         }

src/components/ha-icon-picker.ts

@@ -113,7 +113,6 @@ export class HaIconPicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         allow-custom-value
-        show-label
         .getItems=${this._getIconPickerItems}
         .helper=${this.helper}
         .disabled=${this.disabled}
@@ -122,15 +121,13 @@ export class HaIconPicker extends LitElement {
         .invalid=${this.invalid}
         .rowRenderer=${rowRenderer}
         .icon=${this._icon}
-        .placeholder=${this.label}
+        .label=${this.label}
         .value=${this._value}
         .searchFn=${this._filterIcons}
-        .notFoundLabel=${this.hass?.localize(
-          "ui.components.icon-picker.no_match"
-        )}
         popover-placement="bottom-start"
         @value-changed=${this._valueChanged}
       >
+        <slot name="start"></slot>
       </ha-generic-picker>
     `;
   }
@@ -173,20 +170,6 @@ export class HaIconPicker extends LitElement {
         }
       }
 
-      // Allow preview for custom icon not in list
-      if (rankedItems.length === 0) {
-        rankedItems.push({
-          item: {
-            id: filter,
-            primary: filter,
-            icon: filter,
-            search_labels: { keyword: filter },
-            sorting_label: filter,
-          },
-          rank: 0,
-        });
-      }
-
       return rankedItems
         .sort((itemA, itemB) => itemA.rank - itemB.rank)
         .map((item) => item.item);

src/components/ha-labels-picker.ts

@@ -140,16 +140,17 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
                 labels,
                 (label) => label?.label_id,
                 (label) => {
-                  const color = label?.color
+                  if (!label) return nothing;
+                  const color = label.color
                     ? computeCssColor(label.color)
                     : undefined;
                   const elementId = "label-" + label.label_id;
                   return html`
                     <ha-tooltip
                       .for=${elementId}
-                      .disabled=${!label?.description?.trim()}
+                      .disabled=${!label.description?.trim()}
                     >
-                      ${label?.description}
+                      ${label.description}
                     </ha-tooltip>
                     <ha-input-chip
                       .item=${label}
@@ -157,11 +158,11 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
                       @remove=${this._removeItem}
                       @click=${this._openDetail}
                       .disabled=${this.disabled}
-                      .label=${label?.name}
+                      .label=${label.name}
                       selected
                       style=${color ? `--color: ${color}` : ""}
                     >
-                      ${label?.icon
+                      ${label.icon
                         ? html`<ha-icon
                             slot="icon"
                             .icon=${label.icon}
@@ -231,7 +232,6 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {
 
   static styles = css`
     ha-chip-set {
-      margin-bottom: 8px;
       background-color: var(--mdc-text-field-fill-color);
       border-bottom: 1px solid var(--ha-color-border-neutral-normal);
       border-top-right-radius: var(--ha-border-radius-sm);

src/components/ha-language-picker.ts

@@ -14,6 +14,12 @@ import "./ha-generic-picker";
 import type { HaGenericPicker } from "./ha-generic-picker";
 import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 
+const SEARCH_KEYS = [
+  { name: "primary", weight: 10 },
+  { name: "secondary", weight: 8 },
+  { name: "search_labels.english", weight: 5 },
+];
+
 export const getLanguageOptions = (
   languages: string[],
   nativeName: boolean,
@@ -22,6 +28,7 @@ export const getLanguageOptions = (
 ): PickerComboBoxItem[] => {
   let options: PickerComboBoxItem[] = [];
 
+  const enLocale = { language: "en" } as FrontendLocaleData;
   if (nativeName) {
     const translations = translationMetadata.translations;
     options = languages.map((lang) => {
@@ -37,16 +44,35 @@ export const getLanguageOptions = (
           primary = lang;
         }
       }
+      const currentLang = formatLanguageCode(
+        lang,
+        locale || ({ language: navigator.language } as FrontendLocaleData)
+      );
+      const englishName = formatLanguageCode(lang, enLocale);
+
+      const secondary = currentLang !== primary ? currentLang : undefined;
+
       return {
         id: lang,
         primary,
+        secondary,
+        search_labels: {
+          english: englishName !== primary ? englishName : null,
+        },
       };
     });
   } else if (locale) {
-    options = languages.map((lang) => ({
-      id: lang,
-      primary: formatLanguageCode(lang, locale),
-    }));
+    options = languages.map((lang) => {
+      const primary = formatLanguageCode(lang, locale);
+      const englishName = formatLanguageCode(lang, enLocale);
+      return {
+        id: lang,
+        primary,
+        search_labels: {
+          english: englishName !== primary ? englishName : null,
+        },
+      };
+    });
   }
 
   if (!noSort && locale) {
@@ -116,6 +142,11 @@ export class HaLanguagePicker extends LitElement {
     > `;
 
   protected render() {
+    const label =
+      this.label ??
+      (this.hass?.localize("ui.components.language-picker.language") ||
+        "Language");
+
     const value =
       this.value ??
       (this.required && !this.disabled ? this._getItems()[0].id : this.value);
@@ -129,15 +160,13 @@ export class HaLanguagePicker extends LitElement {
         .emptyLabel=${this.hass?.localize(
           "ui.components.language-picker.no_languages"
         ) || "No languages available"}
-        .placeholder=${this.label ??
-        (this.hass?.localize("ui.components.language-picker.language") ||
-          "Language")}
-        show-label
+        .label=${label}
         .value=${value}
         .valueRenderer=${this._valueRenderer}
         .disabled=${this.disabled}
         .helper=${this.helper}
         .getItems=${this._getItems}
+        .searchKeys=${SEARCH_KEYS}
         @value-changed=${this._changed}
         hide-clear-icon
       >

src/components/ha-md-dialog.ts

@@ -175,10 +175,10 @@ export class HaMdDialog extends Dialog {
         }
 
         .container {
-          margin-top: var(--safe-area-inset-top, var(--ha-space-0));
-          margin-bottom: var(--safe-area-inset-bottom, var(--ha-space-0));
-          margin-left: var(--safe-area-inset-left, var(--ha-space-0));
-          margin-right: var(--safe-area-inset-right, var(--ha-space-0));
+          margin-top: var(--safe-area-inset-top, 0);
+          margin-bottom: var(--safe-area-inset-bottom, 0);
+          margin-left: var(--safe-area-inset-left, 0);
+          margin-right: var(--safe-area-inset-right, 0);
         }
       }
 

src/components/ha-menu-button.ts

@@ -86,9 +86,11 @@ class HaMenuButton extends LitElement {
       : this.narrow;
 
     const oldShowButton =
-      oldNarrow || oldHass?.dockedSidebar === "always_hidden";
+      oldHass?.kioskMode === false &&
+      (oldNarrow || oldHass?.dockedSidebar === "always_hidden");
     const showButton =
-      this.narrow || this.hass.dockedSidebar === "always_hidden";
+      this.hass.kioskMode === false &&
+      (this.narrow || this.hass.dockedSidebar === "always_hidden");
 
     if (this.hasUpdated && oldShowButton === showButton) {
       return;

src/components/ha-navigation-list.ts

@@ -42,7 +42,11 @@ class HaNavigationList extends LitElement {
                 class=${page.iconColor ? "icon-background" : ""}
                 .style="background-color: ${page.iconColor || "undefined"}"
               >
-                <ha-svg-icon .path=${page.iconPath}></ha-svg-icon>
+                <ha-svg-icon
+                  .path=${page.iconPath}
+                  .secondaryPath=${page.iconSecondaryPath}
+                  .viewBox=${page.iconViewBox}
+                ></ha-svg-icon>
               </div>
               <span slot="headline">${page.name}</span>
               ${this.hasSecondary

src/components/ha-navigation-picker.ts

@@ -1,55 +1,17 @@
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { titleCase } from "../common/string/title-case";
 import { fetchConfig } from "../data/lovelace/config/types";
-import type { LovelaceViewRawConfig } from "../data/lovelace/config/view";
 import { getPanelIcon, getPanelTitle } from "../data/panel";
-import type { HomeAssistant, PanelInfo, ValueChangedEvent } from "../types";
-import "./ha-combo-box";
-import type { HaComboBox } from "./ha-combo-box";
-import "./ha-combo-box-item";
+import type { HomeAssistant, ValueChangedEvent } from "../types";
+import "./ha-generic-picker";
 import "./ha-icon";
-
-interface NavigationItem {
-  path: string;
-  icon: string;
-  title: string;
-}
-
-const DEFAULT_ITEMS: NavigationItem[] = [];
-
-const rowRenderer: ComboBoxLitRenderer<NavigationItem> = (item) => html`
-  <ha-combo-box-item type="button">
-    <ha-icon .icon=${item.icon} slot="start"></ha-icon>
-    <span slot="headline">${item.title || item.path}</span>
-    ${item.title
-      ? html`<span slot="supporting-text">${item.path}</span>`
-      : nothing}
-  </ha-combo-box-item>
-`;
-
-const createViewNavigationItem = (
-  prefix: string,
-  view: LovelaceViewRawConfig,
-  index: number
-) => ({
-  path: `/${prefix}/${view.path ?? index}`,
-  icon: view.icon ?? "mdi:view-compact",
-  title: view.title ?? (view.path ? titleCase(view.path) : `${index}`),
-});
-
-const createPanelNavigationItem = (hass: HomeAssistant, panel: PanelInfo) => ({
-  path: `/${panel.url_path}`,
-  icon: getPanelIcon(panel) || "mdi:view-dashboard",
-  title: getPanelTitle(hass, panel) || "",
-});
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 
 @customElement("ha-navigation-picker")
 export class HaNavigationPicker extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public label?: string;
 
@@ -61,46 +23,51 @@ export class HaNavigationPicker extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
-  @state() private _opened = false;
+  @state() private _loading = true;
 
-  private navigationItemsLoaded = false;
+  protected firstUpdated() {
+    this._loadNavigationItems();
+  }
 
-  private navigationItems: NavigationItem[] = DEFAULT_ITEMS;
+  private _navigationItems: PickerComboBoxItem[] = [];
 
-  @query("ha-combo-box", true) private comboBox!: HaComboBox;
-
-  protected render(): TemplateResult {
+  protected render() {
     return html`
-      <ha-combo-box
+      <ha-generic-picker
         .hass=${this.hass}
-        item-value-path="path"
-        item-label-path="path"
-        .value=${this._value}
+        .value=${this._loading ? undefined : this.value}
         allow-custom-value
-        .filteredItems=${this.navigationItems}
-        .label=${this.label}
+        .placeholder=${this.label}
         .helper=${this.helper}
-        .disabled=${this.disabled}
+        .disabled=${this._loading || this.disabled}
         .required=${this.required}
-        .renderer=${rowRenderer}
-        @opened-changed=${this._openedChanged}
+        .getItems=${this._getItems}
+        .valueRenderer=${this._valueRenderer}
+        .customValueLabel=${this.hass.localize(
+          "ui.components.navigation-picker.add_custom_path"
+        )}
         @value-changed=${this._valueChanged}
-        @filter-changed=${this._filterChanged}
       >
-      </ha-combo-box>
+      </ha-generic-picker>
     `;
   }
 
-  private async _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-    if (this._opened && !this.navigationItemsLoaded) {
-      this._loadNavigationItems();
-    }
-  }
+  private _valueRenderer = (itemId: string) => {
+    const item = this._navigationItems.find((navItem) => navItem.id === itemId);
+    return html`
+      ${item?.icon
+        ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
+        : nothing}
+      <span slot="headline">${item?.primary || itemId}</span>
+      ${item?.primary
+        ? html`<span slot="supporting-text">${itemId}</span>`
+        : nothing}
+    `;
+  };
+
+  private _getItems = () => this._navigationItems;
 
   private async _loadNavigationItems() {
-    this.navigationItemsLoaded = true;
-
     const panels = Object.entries(this.hass!.panels).map(([id, panel]) => ({
       id,
       ...panel,
@@ -124,27 +91,47 @@ export class HaNavigationPicker extends LitElement {
 
     const panelViewConfig = new Map(viewConfigs);
 
-    this.navigationItems = [];
+    this._navigationItems = [];
 
     for (const panel of panels) {
-      this.navigationItems.push(createPanelNavigationItem(this.hass!, panel));
+      const path = `/${panel.url_path}`;
+      const panelTitle = getPanelTitle(this.hass, panel);
+      const primary = panelTitle || path;
+      this._navigationItems.push({
+        id: path,
+        primary,
+        secondary: panelTitle ? path : undefined,
+        icon: getPanelIcon(panel) || "mdi:view-dashboard",
+        sorting_label: [
+          primary.startsWith("/") ? `zzz${primary}` : primary,
+          path,
+        ]
+          .filter(Boolean)
+          .join("_"),
+      });
 
       const config = panelViewConfig.get(panel.id);
 
       if (!config || !("views" in config)) continue;
 
-      config.views.forEach((view, index) =>
-        this.navigationItems.push(
-          createViewNavigationItem(panel.url_path, view, index)
-        )
-      );
+      config.views.forEach((view, index) => {
+        const viewPath = `/${panel.url_path}/${view.path ?? index}`;
+        const viewPrimary =
+          view.title ?? (view.path ? titleCase(view.path) : `${index}`);
+        this._navigationItems.push({
+          id: viewPath,
+          secondary: viewPath,
+          icon: view.icon ?? "mdi:view-compact",
+          primary: viewPrimary,
+          sorting_label: [
+            viewPrimary.startsWith("/") ? `zzz${viewPrimary}` : viewPrimary,
+            viewPath,
+          ].join("_"),
+        });
+      });
     }
 
-    this.comboBox.filteredItems = this.navigationItems;
-  }
-
-  protected shouldUpdate(changedProps: PropertyValues) {
-    return !this._opened || changedProps.has("_opened");
+    this._loading = false;
   }
 
   private _valueChanged(ev: ValueChangedEvent<string>) {
@@ -152,61 +139,18 @@ export class HaNavigationPicker extends LitElement {
     this._setValue(ev.detail.value);
   }
 
-  private _setValue(value: string) {
+  private _setValue(value = "") {
     this.value = value;
     fireEvent(
       this,
       "value-changed",
-      { value: this._value },
+      { value: this.value },
       {
         bubbles: false,
         composed: false,
       }
     );
   }
-
-  private _filterChanged(ev: CustomEvent): void {
-    const filterString = ev.detail.value.toLowerCase();
-    const characterCount = filterString.length;
-    if (characterCount >= 2) {
-      const filteredItems: NavigationItem[] = [];
-
-      this.navigationItems.forEach((item) => {
-        if (
-          item.path.toLowerCase().includes(filterString) ||
-          item.title.toLowerCase().includes(filterString)
-        ) {
-          filteredItems.push(item);
-        }
-      });
-
-      if (filteredItems.length > 0) {
-        this.comboBox.filteredItems = filteredItems;
-      } else {
-        this.comboBox.filteredItems = [];
-      }
-    } else {
-      this.comboBox.filteredItems = this.navigationItems;
-    }
-  }
-
-  private get _value() {
-    return this.value || "";
-  }
-
-  static styles = css`
-    ha-icon,
-    ha-svg-icon {
-      color: var(--primary-text-color);
-      position: relative;
-      bottom: 0px;
-    }
-    *[slot="prefix"] {
-      margin-right: 8px;
-      margin-inline-end: 8px;
-      margin-inline-start: initial;
-    }
-  `;
 }
 
 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, mdiMinusBoxOutline, mdiPlus } from "@mdi/js";
 import Fuse from "fuse.js";
 import { css, html, LitElement, nothing } from "lit";
 import {
@@ -53,7 +53,9 @@ export interface PickerComboBoxItem {
   icon_path?: string;
   icon?: string;
 }
-const NO_ITEMS_AVAILABLE_ID = "___no_items_available___";
+
+export const NO_ITEMS_AVAILABLE_ID = "___no_items_available___";
+const PADDING_ID = "___padding___";
 
 const DEFAULT_ROW_RENDERER: RenderItemFunction<PickerComboBoxItem> = (
   item
@@ -91,6 +93,9 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
   @property({ type: Boolean, attribute: "allow-custom-value" })
   public allowCustomValue;
 
+  @property({ attribute: "custom-value-label" })
+  public customValueLabel?: string;
+
   @property() public label?: string;
 
   @property() public value?: string;
@@ -104,7 +109,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
   public getItems!: (
     searchString?: string,
     section?: string
-  ) => (PickerComboBoxItem | string)[];
+  ) => PickerComboBoxItem[] | undefined;
 
   @property({ attribute: false, type: Array })
   public getAdditionalItems?: (searchString?: string) => PickerComboBoxItem[];
@@ -146,7 +151,13 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
 
   @query("ha-textfield") private _searchFieldElement?: HaTextField;
 
-  @state() private _items: (PickerComboBoxItem | string)[] = [];
+  @state() private _items: PickerComboBoxItem[] = [];
+
+  public setFieldValue(value: string) {
+    if (this._searchFieldElement) {
+      this._searchFieldElement.value = value;
+    }
+  }
 
   protected get scrollableElement(): HTMLElement | null {
     return this._virtualizerElement as HTMLElement | null;
@@ -156,7 +167,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
 
   @state() private _valuePinned = true;
 
-  private _allItems: (PickerComboBoxItem | string)[] = [];
+  private _allItems: PickerComboBoxItem[] = [];
 
   private _selectedItemIndex = -1;
 
@@ -187,10 +198,15 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
   }
 
   protected render() {
+    const searchLabel =
+      this.label ??
+      (this.allowCustomValue
+        ? (this.hass?.localize("ui.components.combo-box.search_or_custom") ??
+          "Search | Add custom value")
+        : (this.hass?.localize("ui.common.search") ?? "Search"));
+
     return html`<ha-textfield
-        .label=${this.label ??
-        this.hass?.localize("ui.common.search") ??
-        "Search"}
+        .label=${searchLabel}
         @input=${this._filterChanged}
       ></ha-textfield>
       ${this._renderSectionButtons()}
@@ -269,8 +285,8 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
       this._sectionTitle = this.sectionTitleFunction({
         firstIndex: ev.first,
         lastIndex: ev.last,
-        firstItem: firstItem as PickerComboBoxItem | string,
-        secondItem: secondItem as PickerComboBoxItem | string,
+        firstItem: firstItem as PickerComboBoxItem,
+        secondItem: secondItem as PickerComboBoxItem,
         itemsCount: this._virtualizerElement.items.length,
       });
     }
@@ -285,7 +301,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     this.getAdditionalItems?.(searchString) || [];
 
   private _getItems = () => {
-    let items = [...this.getItems(this._search, this.selectedSection)];
+    let items = [...(this.getItems(this._search, this.selectedSection) || [])];
 
     if (!this.sections?.length) {
       items = items.sort((entityA, entityB) => {
@@ -314,28 +330,28 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
       });
     }
 
-    if (!items.length) {
-      items.push(NO_ITEMS_AVAILABLE_ID);
+    if (!items.length && !this.allowCustomValue) {
+      items.push({ id: NO_ITEMS_AVAILABLE_ID, primary: "" });
     }
 
     const additionalItems = this._getAdditionalItems();
     items.push(...additionalItems);
 
     if (this.mode === "dialog") {
-      items.push("padding"); // padding for safe area inset
+      items.push({ id: PADDING_ID, primary: "" }); // padding for safe area inset
     }
 
     return items;
   };
 
-  private _renderItem = (item: PickerComboBoxItem | string, index: number) => {
+  private _renderItem = (item: PickerComboBoxItem, index: number) => {
     if (!item) {
       return nothing;
     }
-    if (item === "padding") {
+    if (item.id === PADDING_ID) {
       return html`<div class="bottom-padding"></div>`;
     }
-    if (item === NO_ITEMS_AVAILABLE_ID) {
+    if (item.id === NO_ITEMS_AVAILABLE_ID) {
       return html`
         <div class="combo-box-row">
           <ha-combo-box-item type="text" compact>
@@ -410,41 +426,48 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
         return;
       }
 
-      const index = this._fuseIndex(
-        this._allItems as PickerComboBoxItem[],
-        this.searchKeys
-      );
+      const index = this._fuseIndex(this._allItems, this.searchKeys);
 
       let filteredItems = multiTermSortedSearch<PickerComboBoxItem>(
-        this._allItems as PickerComboBoxItem[],
+        this._allItems,
         searchString,
         this.searchKeys || DEFAULT_SEARCH_KEYS,
         (item) => item.id,
         index
-      ) as (PickerComboBoxItem | string)[];
+      );
 
-      if (!filteredItems.length) {
-        filteredItems.push(NO_ITEMS_AVAILABLE_ID);
+      if (!filteredItems.length && !this.allowCustomValue) {
+        filteredItems.push({ id: NO_ITEMS_AVAILABLE_ID, primary: "" });
       }
 
-      const additionalItems = this._getAdditionalItems();
+      const additionalItems = this._getAdditionalItems(searchString);
       filteredItems.push(...additionalItems);
 
       if (this.searchFn) {
         filteredItems = this.searchFn(
           searchString,
-          filteredItems as PickerComboBoxItem[],
-          this._allItems as PickerComboBoxItem[]
+          filteredItems,
+          this._allItems
         );
       }
 
-      this._items = filteredItems as PickerComboBoxItem[];
+      if (this.allowCustomValue && searchString) {
+        filteredItems.push({
+          id: searchString,
+          primary:
+            this.customValueLabel ??
+            this.hass?.localize("ui.components.combo-box.add_custom_item") ??
+            "Add custom item",
+          secondary: `"${searchString}"`,
+          icon_path: mdiPlus,
+        });
+      }
+
+      this._items = filteredItems;
     }
 
     this._selectedItemIndex = -1;
-    if (this._virtualizerElement) {
-      this._virtualizerElement.scrollTo(0, 0);
-    }
+    this._valuePinned = true;
   };
 
   private _toggleSection(ev: Event) {
@@ -639,7 +662,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     typeof item === "string" ? item : item?.id;
 
   private _getInitialSelectedIndex() {
-    if (!this._virtualizerElement || !this.value) {
+    if (!this._virtualizerElement || this._search || !this.value) {
       return 0;
     }
 
@@ -770,7 +793,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
         .section-title,
         .title {
           background-color: var(--ha-color-fill-neutral-quiet-resting);
-          padding: var(--ha-space-1) var(--ha-space-2);
+          padding: var(--ha-space-2) var(--ha-space-3);
           font-weight: var(--ha-font-weight-bold);
           color: var(--secondary-text-color);
           min-height: var(--ha-space-6);

src/components/ha-picker-field.ts

@@ -9,13 +9,15 @@ import {
   type TemplateResult,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import { localizeContext } from "../data/context";
+import { PickerMixin } from "../mixins/picker-mixin";
 import type { HomeAssistant } from "../types";
 import "./ha-combo-box-item";
 import type { HaComboBoxItem } from "./ha-combo-box-item";
-import "./ha-icon-button";
 import "./ha-icon";
+import "./ha-icon-button";
 
 declare global {
   interface HASSDomEvents {
@@ -26,32 +28,7 @@ declare global {
 export type PickerValueRenderer = (value: string) => TemplateResult<1>;
 
 @customElement("ha-picker-field")
-export class HaPickerField extends LitElement {
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
-  @property() public value?: string;
-
-  @property() public icon?: string;
-
-  @property() public helper?: string;
-
-  @property() public placeholder?: string;
-
-  @property({ type: Boolean, reflect: true }) public unknown = false;
-
-  @property({ attribute: "unknown-item-text" }) public unknownItemText?: string;
-
-  @property({ attribute: "hide-clear-icon", type: Boolean })
-  public hideClearIcon = false;
-
-  @property({ attribute: "show-label", type: Boolean })
-  public showLabel = false;
-
-  @property({ attribute: false })
-  public valueRenderer?: PickerValueRenderer;
-
+export class HaPickerField extends PickerMixin(LitElement) {
   @property({ type: Boolean, reflect: true }) public invalid = false;
 
   @query("ha-combo-box-item", true) public item!: HaComboBoxItem;
@@ -66,31 +43,48 @@ export class HaPickerField extends LitElement {
   }
 
   protected render() {
-    const hasValue = !!this.value?.length;
+    const hasValue = !!this.value;
 
     const showClearIcon =
       !!this.value && !this.required && !this.disabled && !this.hideClearIcon;
 
+    const placeholderText = this.placeholder ?? this.label;
+
     const overlineLabel =
-      this.showLabel && hasValue && this.placeholder
-        ? html`<span slot="overline">${this.placeholder}</span>`
+      this.label && hasValue
+        ? html`<span slot="overline"
+            >${this.label}${this.required ? " *" : ""}</span
+          >`
         : nothing;
 
     const headlineContent = hasValue
       ? this.valueRenderer
         ? this.valueRenderer(this.value ?? "")
         : html`<span slot="headline">${this.value}</span>`
-      : this.placeholder
+      : placeholderText
         ? html`<span slot="headline" class="placeholder">
-            ${this.placeholder}
+            ${placeholderText}${this.required ? " *" : ""}
           </span>`
         : nothing;
 
     return html`
-      <ha-combo-box-item .disabled=${this.disabled} type="button" compact>
-        ${this.icon
-          ? html`<ha-icon slot="start" .icon=${this.icon}></ha-icon>`
-          : nothing}
+      <ha-combo-box-item
+        aria-label=${ifDefined(this.label || this.placeholder)}
+        .disabled=${this.disabled}
+        type="button"
+        compact
+      >
+        ${this.image
+          ? html`<img
+              alt=${this.label ?? ""}
+              slot="start"
+              .src=${this.image}
+              crossorigin="anonymous"
+              referrerpolicy="no-referrer"
+            />`
+          : this.icon
+            ? html`<ha-icon slot="start" .icon=${this.icon}></ha-icon>`
+            : html`<slot name="start"></slot>`}
         ${overlineLabel}${headlineContent}
         ${this.unknown
           ? html`<div slot="supporting-text" class="unknown">
@@ -117,7 +111,7 @@ export class HaPickerField extends LitElement {
     `;
   }
 
-  private _clear(e) {
+  private _clear(e: CustomEvent) {
     e.stopPropagation();
     fireEvent(this, "clear");
   }
@@ -200,7 +194,10 @@ export class HaPickerField extends LitElement {
 
         .placeholder {
           color: var(--secondary-text-color);
-          padding: 0 8px;
+        }
+
+        :host([invalid]) .placeholder {
+          color: var(--mdc-theme-error, var(--error-color, #b00020));
         }
 
         .unknown {

src/components/ha-section-title.ts

@@ -10,7 +10,7 @@ class HaSectionTitle extends LitElement {
   static styles = css`
     :host {
       background-color: var(--ha-color-fill-neutral-quiet-resting);
-      padding: var(--ha-space-1) var(--ha-space-2);
+      padding: var(--ha-space-2) var(--ha-space-3);
       font-weight: var(--ha-font-weight-bold);
       color: var(--secondary-text-color);
       min-height: var(--ha-space-6);

src/components/ha-selector/ha-selector-addon.ts

@@ -28,7 +28,6 @@ export class HaAddonSelector extends LitElement {
       .helper=${this.helper}
       .disabled=${this.disabled}
       .required=${this.required}
-      allow-custom-entity
     ></ha-addon-picker>`;
   }
 

src/components/ha-selector/ha-selector-choose.ts

@@ -0,0 +1,214 @@
+import type { PropertyValues } from "lit";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../common/dom/fire_event";
+import { isTemplate } from "../../common/string/has-template";
+import type { ChooseSelector, Selector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
+import "../ha-button-toggle-group";
+import "./ha-selector";
+
+@customElement("ha-selector-choose")
+export class HaChooseSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: ChooseSelector;
+
+  @property() public value?: any;
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ attribute: false })
+  public localizeValue?: (key: string) => string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  @state() public _activeChoice?: string;
+
+  protected willUpdate(changedProperties: PropertyValues): void {
+    if (
+      changedProperties.has("selector") &&
+      (!this._activeChoice ||
+        !(this._activeChoice in this.selector.choose.choices))
+    ) {
+      this._setActiveChoice();
+    }
+    if (
+      changedProperties.has("value") &&
+      changedProperties.get("value")?.active_choice &&
+      changedProperties.get("value")?.active_choice !== this._activeChoice
+    ) {
+      this._setActiveChoice();
+    }
+  }
+
+  protected render() {
+    if (!this._activeChoice) {
+      return nothing;
+    }
+
+    const selector = this._selector(this._activeChoice);
+    const value = this._value(this._activeChoice);
+
+    return html`<div class="multi-header">
+        <span>${this.label}${this.required ? "*" : ""}</span>
+        <ha-button-toggle-group
+          size="small"
+          .buttons=${this._toggleButtons(
+            this.selector.choose.choices,
+            this.selector.choose.translation_key,
+            this.hass.localize
+          )}
+          .active=${this._activeChoice}
+          @value-changed=${this._choiceChanged}
+        ></ha-button-toggle-group>
+      </div>
+      <ha-selector
+        .hass=${this.hass}
+        .selector=${selector}
+        .value=${value}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        @value-changed=${this._handleValueChanged}
+        .helper=${this.helper}
+      ></ha-selector>`;
+  }
+
+  private _toggleButtons = memoizeOne(
+    (
+      choices: ChooseSelector["choose"]["choices"],
+      translationKey?: string,
+      _localize?: HomeAssistant["localize"]
+    ) =>
+      Object.keys(choices).map((choice) => ({
+        label:
+          this.localizeValue && translationKey
+            ? this.localizeValue(`${translationKey}.choices.${choice}`)
+            : choice,
+        value: choice,
+      }))
+  );
+
+  private _choiceChanged(ev) {
+    ev.stopPropagation();
+    const value =
+      typeof this.value === "object"
+        ? this.value
+        : {
+            [this._activeChoice!]: this.value,
+          };
+    this._activeChoice = ev.detail?.value || ev.target.value;
+    fireEvent(this, "value-changed", {
+      value: {
+        ...value,
+        active_choice: this._activeChoice,
+      },
+    });
+  }
+
+  private _handleValueChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    const value = typeof this.value === "object" ? this.value : {};
+    fireEvent(this, "value-changed", {
+      value: {
+        ...value,
+        [this._activeChoice!]: ev.detail.value,
+        active_choice: this._activeChoice,
+      },
+    });
+  }
+
+  private _selector(choice?: string): Selector {
+    const choices = this.selector.choose.choices;
+
+    choice = choice || this.value?.active_choice;
+
+    if (choice && choice in choices) {
+      return choices[choice].selector;
+    }
+
+    return choices[Object.keys(choices)[0]].selector;
+  }
+
+  private _value(choice?: string): any {
+    if (!this.value) {
+      return undefined;
+    }
+    return typeof this.value === "object"
+      ? this.value[choice || this.value.active_choice]
+      : this.value;
+  }
+
+  private _setActiveChoice() {
+    if (this.value) {
+      if (typeof this.value === "object") {
+        if (this.value.active_choice in this.selector.choose.choices) {
+          this._activeChoice = this.value.active_choice;
+          return;
+        }
+      } else {
+        const typeofValue = typeof this.value;
+        const selectorTypes = Object.values(this.selector.choose.choices).map(
+          (choice) => Object.keys(choice.selector)[0]
+        );
+        if (typeofValue === "number" && selectorTypes.includes("number")) {
+          this._activeChoice = Object.keys(this.selector.choose.choices)[
+            selectorTypes.indexOf("number")
+          ];
+          return;
+        }
+        if (
+          typeofValue === "string" &&
+          isTemplate(this.value) &&
+          selectorTypes.includes("template")
+        ) {
+          this._activeChoice = Object.keys(this.selector.choose.choices)[
+            selectorTypes.indexOf("template")
+          ];
+          return;
+        }
+        if (
+          typeofValue === "string" &&
+          this.value.includes(".") &&
+          selectorTypes.includes("entity")
+        ) {
+          this._activeChoice = Object.keys(this.selector.choose.choices)[
+            selectorTypes.indexOf("entity")
+          ];
+          return;
+        }
+        if (typeofValue === "string" && selectorTypes.includes("text")) {
+          this._activeChoice = Object.keys(this.selector.choose.choices)[
+            selectorTypes.indexOf("text")
+          ];
+          return;
+        }
+      }
+    }
+    this._activeChoice = Object.keys(this.selector.choose.choices)[0];
+  }
+
+  static styles = css`
+    .multi-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--ha-space-2);
+    }
+    ha-button-toggle-group {
+      display: block;
+      justify-self: end;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-choose": HaChooseSelector;
+  }
+}

src/components/ha-selector/ha-selector-config-entry.ts

@@ -29,7 +29,6 @@ export class HaConfigEntrySelector extends LitElement {
       .disabled=${this.disabled}
       .required=${this.required}
       .integration=${this.selector.config_entry?.integration}
-      allow-custom-entity
     ></ha-config-entry-picker>`;
   }
 

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

@@ -107,7 +107,6 @@ export class HaDeviceSelector extends LitElement {
           .placeholder=${this.placeholder}
           .disabled=${this.disabled}
           .required=${this.required}
-          allow-custom-entity
         ></ha-device-picker>
       `;
     }

src/components/ha-selector/ha-selector-duration.ts

@@ -1,3 +1,4 @@
+import memoizeOne from "memoize-one";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { DurationSelector } from "../../data/selector";
@@ -11,7 +12,10 @@ export class HaTimeDuration extends LitElement {
 
   @property({ attribute: false }) public selector!: DurationSelector;
 
-  @property({ attribute: false }) public value?: HaDurationData;
+  @property({ attribute: false }) public value?:
+    | HaDurationData
+    | string
+    | number;
 
   @property() public label?: string;
 
@@ -21,16 +25,47 @@ export class HaTimeDuration extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
+  private _data = memoizeOne(
+    (value?: HaDurationData | string | number): HaDurationData | undefined => {
+      if (typeof value === "number") {
+        return { seconds: value };
+      }
+      if (typeof value === "string") {
+        const negative = value.trim()[0] === "-";
+        const parts = value
+          .split(":")
+          .map((p) => (negative && p ? -Math.abs(Number(p)) : Number(p)));
+
+        if (parts.length === 1) {
+          return { seconds: parts[0] };
+        }
+        if (parts.length === 2) {
+          return { hours: parts[0], minutes: parts[1] };
+        }
+        if (parts.length === 3) {
+          return {
+            hours: parts[0],
+            minutes: parts[1],
+            seconds: parts[2],
+          };
+        }
+        return undefined;
+      }
+      return value;
+    }
+  );
+
   protected render() {
     return html`
       <ha-duration-input
         .label=${this.label}
         .helper=${this.helper}
-        .data=${this.value}
+        .data=${this._data(this.value)}
         .disabled=${this.disabled}
         .required=${this.required}
         .enableDay=${this.selector.duration?.enable_day}
         .enableMillisecond=${this.selector.duration?.enable_millisecond}
+        .allowNegative=${this.selector.duration?.allow_negative}
       ></ha-duration-input>
     `;
   }

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

@@ -66,15 +66,14 @@ export class HaEntitySelector extends LitElement {
         .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
+        .placeholder=${this.placeholder}
         .helper=${this.helper}
         .includeEntities=${this.selector.entity?.include_entities}
         .excludeEntities=${this.selector.entity?.exclude_entities}
         .entityFilter=${this._filterEntities}
         .createDomains=${this._createDomains}
-        .placeholder=${this.placeholder}
         .disabled=${this.disabled}
         .required=${this.required}
-        allow-custom-entity
       ></ha-entity-picker>`;
     }
 
@@ -83,13 +82,13 @@ export class HaEntitySelector extends LitElement {
         .hass=${this.hass}
         .value=${this.value}
         .label=${this.label}
+        .placeholder=${this.placeholder}
         .helper=${this.helper}
         .includeEntities=${this.selector.entity.include_entities}
         .excludeEntities=${this.selector.entity.exclude_entities}
         .reorder=${this.selector.entity.reorder ?? false}
         .entityFilter=${this._filterEntities}
         .createDomains=${this._createDomains}
-        .placeholder=${this.placeholder}
         .disabled=${this.disabled}
         .required=${this.required}
       ></ha-entities-picker>

src/components/ha-selector/ha-selector-icon.ts

@@ -52,7 +52,7 @@ export class HaIconSelector extends LitElement {
         ${!placeholder && stateObj
           ? html`
               <ha-state-icon
-                slot="fallback"
+                slot="start"
                 .hass=${this.hass}
                 .stateObj=${stateObj}
               ></ha-state-icon>

src/components/ha-selector/ha-selector-select.ts

@@ -1,7 +1,8 @@
 import { mdiDragHorizontalVariant } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
@@ -11,9 +12,8 @@ import type { HomeAssistant } from "../../types";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
 import "../ha-checkbox";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
 import "../ha-formfield";
+import "../ha-generic-picker";
 import "../ha-input-helper-text";
 import "../ha-list-item";
 import "../ha-radio";
@@ -40,8 +40,6 @@ export class HaSelectSelector extends LitElement {
 
   @property({ type: Boolean }) public required = true;
 
-  @query("ha-combo-box", true) private comboBox!: HaComboBox;
-
   private _itemMoved(ev: CustomEvent): void {
     ev.stopPropagation();
     const { oldIndex, newIndex } = ev.detail;
@@ -59,15 +57,8 @@ export class HaSelectSelector extends LitElement {
     });
   }
 
-  private _filter = "";
-
   protected render() {
-    const options =
-      this.selector.select?.options?.map((option) =>
-        typeof option === "object"
-          ? (option as SelectOption)
-          : ({ value: option, label: option } as SelectOption)
-      ) || [];
+    const options = this._getOptions(this.selector);
 
     const translationKey = this.selector.select?.translation_key;
 
@@ -165,10 +156,6 @@ export class HaSelectSelector extends LitElement {
       const value =
         !this.value || this.value === "" ? [] : ensureArray(this.value);
 
-      const optionItems = options.filter(
-        (option) => !option.disabled && !value?.includes(option.value)
-      );
-
       return html`
         ${value?.length
           ? html`
@@ -212,50 +199,33 @@ export class HaSelectSelector extends LitElement {
             `
           : nothing}
 
-        <ha-combo-box
-          item-value-path="value"
-          item-label-path="label"
+        <ha-generic-picker
           .hass=${this.hass}
-          .label=${this.label}
           .helper=${this.helper}
           .disabled=${this.disabled}
           .required=${this.required && !value.length}
           .value=${""}
-          .items=${optionItems}
+          .addButtonLabel=${this.label}
+          .getItems=${this._getItems(options, value, true)}
           .allowCustomValue=${this.selector.select.custom_value ?? false}
-          @filter-changed=${this._filterChanged}
           @value-changed=${this._comboBoxValueChanged}
-          @opened-changed=${this._openedChanged}
-        ></ha-combo-box>
+        ></ha-generic-picker>
       `;
     }
 
     if (this.selector.select?.custom_value) {
-      if (
-        this.value !== undefined &&
-        !Array.isArray(this.value) &&
-        !options.find((option) => option.value === this.value)
-      ) {
-        options.unshift({ value: this.value, label: this.value });
-      }
-
-      const optionItems = options.filter((option) => !option.disabled);
-
       return html`
-        <ha-combo-box
-          item-value-path="value"
-          item-label-path="label"
+        <ha-generic-picker
           .hass=${this.hass}
           .label=${this.label}
           .helper=${this.helper}
           .disabled=${this.disabled}
           .required=${this.required}
-          .items=${optionItems}
-          .value=${this.value}
-          @filter-changed=${this._filterChanged}
+          .getItems=${this._getItems(options)}
+          .value=${this.value as string | undefined}
           @value-changed=${this._comboBoxValueChanged}
-          @opened-changed=${this._openedChanged}
-        ></ha-combo-box>
+          allow-custom-value
+        ></ha-generic-picker>
       `;
     }
 
@@ -274,7 +244,7 @@ export class HaSelectSelector extends LitElement {
       >
         ${options.map(
           (item: SelectOption) => html`
-            <ha-list-item .value=${item.value} .disabled=${item.disabled}
+            <ha-list-item .value=${item.value} .disabled=${!!item.disabled}
               >${item.label}</ha-list-item
             >
           `
@@ -291,6 +261,30 @@ export class HaSelectSelector extends LitElement {
       : "";
   }
 
+  private _getOptions = memoizeOne(
+    (selector: SelectSelector) =>
+      selector.select?.options?.map((option) =>
+        typeof option === "object"
+          ? (option as SelectOption)
+          : ({ value: option, label: option } as SelectOption)
+      ) || []
+  );
+
+  private _getItems = memoizeOne(
+    (options: SelectOption[], value?: string[], multiple = false) => {
+      const filteredOptions = options.filter((option) =>
+        !option.disabled && !multiple ? true : !value?.includes(option.value)
+      );
+
+      return () =>
+        filteredOptions.map((option) => ({
+          id: option.value,
+          primary: option.label,
+          sorting_label: option.label,
+        }));
+    }
+  );
+
   private get _mode(): "list" | "dropdown" | "box" {
     return (
       this.selector.select?.mode ||
@@ -355,8 +349,6 @@ export class HaSelectSelector extends LitElement {
     fireEvent(this, "value-changed", {
       value,
     });
-    await this.updateComplete;
-    this._filterChanged();
   }
 
   private _comboBoxValueChanged(ev: CustomEvent): void {
@@ -374,49 +366,17 @@ export class HaSelectSelector extends LitElement {
       return;
     }
 
-    const currentValue =
-      !this.value || this.value === "" ? [] : ensureArray(this.value);
+    const currentValue = !this.value ? [] : ensureArray(this.value);
 
     if (newValue !== undefined && currentValue.includes(newValue)) {
       return;
     }
 
-    setTimeout(() => {
-      this._filterChanged();
-      this.comboBox.setInputValue("");
-    }, 0);
-
     fireEvent(this, "value-changed", {
       value: [...currentValue, newValue],
     });
   }
 
-  private _openedChanged(ev?: CustomEvent): void {
-    if (ev?.detail.value) {
-      this._filterChanged();
-    }
-  }
-
-  private _filterChanged(ev?: CustomEvent): void {
-    this._filter = ev?.detail.value || "";
-
-    const filteredItems = this.comboBox.items?.filter((item) => {
-      const label = item.label || item.value;
-      return label.toLowerCase().includes(this._filter?.toLowerCase());
-    });
-
-    if (
-      this._filter &&
-      this.selector.select?.custom_value &&
-      filteredItems &&
-      !filteredItems.some((item) => (item.label || item.value) === this._filter)
-    ) {
-      filteredItems.unshift({ label: this._filter, value: this._filter });
-    }
-
-    this.comboBox.filteredItems = filteredItems;
-  }
-
   static styles = css`
     :host {
       position: relative;

src/components/ha-selector/ha-selector-state.ts

@@ -1,12 +1,17 @@
 import type { HassServiceTarget } from "home-assistant-js-websocket";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import type { StateSelector } from "../../data/selector";
-import { extractFromTarget } from "../../data/target";
+import memoizeOne from "memoize-one";
+import {
+  resolveEntityIDs,
+  type StateSelector,
+  type TargetSelector,
+} from "../../data/selector";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../types";
 import "../entity/ha-entity-state-picker";
 import "../entity/ha-entity-states-picker";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";
 
 @customElement("ha-selector-state")
 export class HaSelectorState extends SubscribeMixin(LitElement) {
@@ -28,16 +33,33 @@ export class HaSelectorState extends SubscribeMixin(LitElement) {
     filter_attribute?: string;
     filter_entity?: string | string[];
     filter_target?: HassServiceTarget;
+    target_selector?: TargetSelector;
   };
 
   @state() private _entityIds?: string | string[];
 
+  private _convertExtraOptions = memoizeOne(
+    (
+      extraOptions?: { label: string; value: any }[]
+    ): PickerComboBoxItem[] | undefined => {
+      if (!extraOptions) {
+        return undefined;
+      }
+      return extraOptions.map((option) => ({
+        id: option.value,
+        primary: option.label,
+        sorting_label: option.label,
+      }));
+    }
+  );
+
   willUpdate(changedProps) {
     if (changedProps.has("selector") || changedProps.has("context")) {
       this._resolveEntityIds(
         this.selector.state?.entity_id,
         this.context?.filter_entity,
-        this.context?.filter_target
+        this.context?.filter_target,
+        this.context?.target_selector
       ).then((entityIds) => {
         this._entityIds = entityIds;
       });
@@ -45,6 +67,9 @@ export class HaSelectorState extends SubscribeMixin(LitElement) {
   }
 
   protected render() {
+    const extraOptions = this._convertExtraOptions(
+      this.selector.state?.extra_options
+    );
     if (this.selector.state?.multiple) {
       return html`
         <ha-entity-states-picker
@@ -52,7 +77,7 @@ export class HaSelectorState extends SubscribeMixin(LitElement) {
           .entityId=${this._entityIds}
           .attribute=${this.selector.state?.attribute ||
           this.context?.filter_attribute}
-          .extraOptions=${this.selector.state?.extra_options}
+          .extraOptions=${extraOptions}
           .value=${this.value}
           .label=${this.label}
           .helper=${this.helper}
@@ -69,7 +94,7 @@ export class HaSelectorState extends SubscribeMixin(LitElement) {
         .entityId=${this._entityIds}
         .attribute=${this.selector.state?.attribute ||
         this.context?.filter_attribute}
-        .extraOptions=${this.selector.state?.extra_options}
+        .extraOptions=${extraOptions}
         .value=${this.value}
         .label=${this.label}
         .helper=${this.helper}
@@ -84,7 +109,8 @@ export class HaSelectorState extends SubscribeMixin(LitElement) {
   private async _resolveEntityIds(
     selectorEntityId: string | string[] | undefined,
     contextFilterEntity: string | string[] | undefined,
-    contextFilterTarget: HassServiceTarget | undefined
+    contextFilterTarget: HassServiceTarget | undefined,
+    contextTargetSelector: TargetSelector | undefined
   ): Promise<string | string[] | undefined> {
     if (selectorEntityId !== undefined) {
       return selectorEntityId;
@@ -93,8 +119,14 @@ export class HaSelectorState extends SubscribeMixin(LitElement) {
       return contextFilterEntity;
     }
     if (contextFilterTarget !== undefined) {
-      const result = await extractFromTarget(this.hass, contextFilterTarget);
-      return result.referenced_entities;
+      return resolveEntityIDs(
+        this.hass,
+        contextFilterTarget,
+        this.hass.entities,
+        this.hass.devices,
+        this.hass.areas,
+        contextTargetSelector
+      );
     }
     return undefined;
   }

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

@@ -18,6 +18,7 @@ const LOAD_ELEMENTS = {
   attribute: () => import("./ha-selector-attribute"),
   assist_pipeline: () => import("./ha-selector-assist-pipeline"),
   boolean: () => import("./ha-selector-boolean"),
+  choose: () => import("./ha-selector-choose"),
   color_rgb: () => import("./ha-selector-color-rgb"),
   condition: () => import("./ha-selector-condition"),
   config_entry: () => import("./ha-selector-config-entry"),

src/components/ha-service-control.ts

@@ -726,6 +726,7 @@ export class HaServiceControl extends LitElement {
               : undefined}
             .placeholder=${dataField.default}
             .localizeValue=${this._localizeValueCallback}
+            .required=${dataField.required}
           ></ha-selector>
         </ha-settings-row>`
       : "";

src/components/ha-service-picker.ts

@@ -1,5 +1,5 @@
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiRoomService } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { html, LitElement, nothing, type TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -56,9 +56,9 @@ class HaServicePicker extends LitElement {
     getServiceIcons(this.hass);
   }
 
-  private _rowRenderer: ComboBoxLitRenderer<ServiceComboBoxItem> = (
+  private _rowRenderer: RenderItemFunction<ServiceComboBoxItem> = (
     item,
-    { index }
+    index
   ) => html`
     <ha-combo-box-item type="button" .borderTop=${index !== 0}>
       <ha-service-icon
@@ -135,7 +135,6 @@ class HaServicePicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         .autofocus=${this.autofocus}
-        allow-custom-value
         .notFoundLabel=${this.hass.localize(
           "ui.components.service-picker.no_match"
         )}

src/components/ha-sidebar.ts

@@ -52,8 +52,6 @@ import "./ha-spinner";
 import "./ha-svg-icon";
 import "./user/ha-user-badge";
 
-const SUPPORT_SCROLL_IF_NEEDED = "scrollIntoViewIfNeeded" in document.body;
-
 const SORT_VALUE_URL_PATHS = {
   energy: 1,
   map: 2,
@@ -344,17 +342,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     }
 
     this._calculateCounts();
-
-    if (!SUPPORT_SCROLL_IF_NEEDED) {
-      return;
-    }
-    if (oldHass?.panelUrl !== this.hass.panelUrl) {
-      const selectedEl = this.shadowRoot!.querySelector(".selected");
-      if (selectedEl) {
-        // @ts-ignore
-        selectedEl.scrollIntoViewIfNeeded();
-      }
-    }
   }
 
   private _calculateCounts = throttle(() => {
@@ -681,7 +668,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     tooltip.style.display = "block";
     tooltip.style.position = "fixed";
     tooltip.style.top = `${top}px`;
-    tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, var(--ha-space-0)))`;
+    tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, 0px))`;
   }
 
   private _hideTooltip() {
@@ -720,14 +707,10 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           background-color: var(--sidebar-background-color);
           width: 100%;
           box-sizing: border-box;
-          padding-bottom: calc(
-            14px + var(--safe-area-inset-bottom, var(--ha-space-0))
-          );
+          padding-bottom: calc(14px + var(--safe-area-inset-bottom, 0px));
         }
         .menu {
-          height: calc(
-            var(--header-height) + var(--safe-area-inset-top, var(--ha-space-0))
-          );
+          height: calc(var(--header-height) + var(--safe-area-inset-top, 0px));
           box-sizing: border-box;
           display: flex;
           padding: 0 var(--ha-space-1);
@@ -746,16 +729,16 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           font-size: var(--ha-font-size-xl);
           align-items: center;
           padding-left: calc(
-            var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0))
+            var(--ha-space-1) + var(--safe-area-inset-left, 0px)
           );
           padding-inline-start: calc(
-            var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0))
+            var(--ha-space-1) + var(--safe-area-inset-left, 0px)
           );
           padding-inline-end: initial;
-          padding-top: var(--safe-area-inset-top, var(--ha-space-0));
+          padding-top: var(--safe-area-inset-top, 0px);
         }
         :host([expanded]) .menu {
-          width: calc(256px + var(--safe-area-inset-left, var(--ha-space-0)));
+          width: calc(256px + var(--safe-area-inset-left, 0px));
         }
         :host([narrow][expanded]) .menu {
           width: 100%;
@@ -771,8 +754,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           display: none;
         }
         :host([narrow]) .title {
-          margin: var(--ha-space-0);
-          padding: var(--ha-space-0) var(--ha-space-4);
+          margin: 0;
+          padding: 0 var(--ha-space-4);
         }
         :host([expanded]) .title {
           display: initial;
@@ -784,16 +767,13 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         ha-fade-in,
         ha-md-list {
           height: calc(
-            100% - var(--header-height) - var(
-                --safe-area-inset-top,
-                var(--ha-space-0)
-              ) -
+            100% - var(--header-height) - var(--safe-area-inset-top, 0px) -
               132px
           );
         }
 
         ha-fade-in {
-          padding: var(--ha-space-1) var(--ha-space-0);
+          padding: var(--ha-space-1) 0;
           box-sizing: border-box;
           display: flex;
           justify-content: center;
@@ -803,7 +783,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
         ha-md-list {
           overflow-x: hidden;
           background: none;
-          margin-left: var(--safe-area-inset-left, var(--ha-space-0));
+          margin-left: var(--safe-area-inset-left, 0px);
         }
 
         ha-md-list-item {
@@ -825,7 +805,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           width: 248px;
         }
         :host([narrow][expanded]) ha-md-list-item {
-          width: calc(240px - var(--safe-area-inset-left, var(--ha-space-0)));
+          width: calc(240px - var(--safe-area-inset-left, 0px));
         }
 
         ha-md-list-item.selected {
@@ -898,7 +878,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           border-radius: var(--ha-border-radius-md);
           font-size: 0.65em;
           line-height: var(--ha-line-height-expanded);
-          padding: var(--ha-space-0) var(--ha-space-1);
+          padding: 0 var(--ha-space-1);
         }
 
         ha-md-list-item.user {

src/components/ha-slider.ts

@@ -57,6 +57,7 @@ export class HaSlider extends Slider {
         #thumb {
           border: none;
           background-color: var(--ha-slider-thumb-color, var(--primary-color));
+          overflow: hidden;
         }
 
         #thumb:after {

src/components/ha-tab.ts

@@ -21,7 +21,7 @@ export class HaTab extends LitElement {
         aria-label=${ifDefined(this.name)}
         @keydown=${this._handleKeyDown}
       >
-        ${this.narrow ? html`<slot name="icon"></slot>` : ""}
+        <slot name="icon"></slot>
         <span class="name">${this.name}</span>
         <ha-ripple></ha-ripple>
       </div>
@@ -50,6 +50,11 @@ export class HaTab extends LitElement {
       outline: none;
     }
 
+    :host(:not([narrow])) div {
+      flex-direction: row;
+      gap: var(--ha-space-2);
+    }
+
     .name {
       white-space: nowrap;
       overflow: hidden;
@@ -76,6 +81,14 @@ export class HaTab extends LitElement {
       padding: 0 4px;
     }
 
+    ::slotted([slot="icon"]) {
+      margin-bottom: var(--ha-space-1);
+    }
+
+    :host(:not([narrow])) ::slotted([slot="icon"]) {
+      margin-bottom: 0;
+    }
+
     div:focus-visible:before {
       position: absolute;
       display: block;

src/components/ha-target-picker.ts

@@ -988,7 +988,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
                 style=${styleMap({
                   width: "var(--ha-space-12)",
                   position: "absolute",
-                  top: "var(--ha-space-0)",
+                  top: "0",
                   left: rtl ? undefined : "var(--ha-space-1)",
                   right: rtl ? "var(--ha-space-1)" : undefined,
                   transform: rtl ? "scaleX(-1)" : "",
@@ -1092,7 +1092,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
         z-index: 2;
       }
       .mdc-chip-set {
-        padding: var(--ha-space-1) var(--ha-space-0);
+        padding: var(--ha-space-1) 0;
         gap: var(--ha-space-2);
       }
 

src/components/ha-wa-dialog.ts

@@ -1,4 +1,5 @@
 import "@home-assistant/webawesome/dist/components/dialog/dialog";
+import type WaDialog from "@home-assistant/webawesome/dist/components/dialog/dialog";
 import { mdiClose } from "@mdi/js";
 import { css, html, LitElement } from "lit";
 import {
@@ -49,7 +50,6 @@ export type DialogWidth = "small" | "medium" | "large" | "full";
  * @cssprop --ha-dialog-hide-duration - Hide animation duration.
  * @cssprop --ha-dialog-surface-background - Dialog background color.
  * @cssprop --ha-dialog-border-radius - Border radius of the dialog surface.
- * @cssprop --dialog-z-index - Z-index for the dialog.
  * @cssprop --dialog-surface-margin-top - Top margin for the dialog surface.
  *
  * @attr {boolean} open - Controls the dialog open state.
@@ -114,6 +114,8 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
   @state()
   private _bodyScrolled = false;
 
+  private _escapePressed = false;
+
   protected get scrollableElement(): HTMLElement | null {
     return this.bodyContainer;
   }
@@ -139,6 +141,8 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
             (this.headerTitle !== undefined ? "ha-wa-dialog-title" : undefined)
         )}
         aria-describedby=${ifDefined(this.ariaDescribedBy)}
+        @keydown=${this._handleKeyDown}
+        @wa-hide=${this._handleHide}
         @wa-show=${this._handleShow}
         @wa-after-show=${this._handleAfterShow}
         @wa-after-hide=${this._handleAfterHide}
@@ -184,6 +188,22 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
     await this.updateComplete;
 
     requestAnimationFrame(() => {
+      // temporary disabled because of issues with focus in iOS app, can be reenabled in 2026.2.0
+      // if (isIosApp(this.hass)) {
+      //   const element = this.querySelector("[autofocus]");
+      //   if (element !== null) {
+      //     if (!element.id) {
+      //       element.id = "ha-wa-dialog-autofocus";
+      //     }
+      //     this.hass.auth.external!.fireMessage({
+      //       type: "focus_element",
+      //       payload: {
+      //         element_id: element.id,
+      //       },
+      //     });
+      //   }
+      //   return;
+      // }
       (this.querySelector("[autofocus]") as HTMLElement | null)?.focus();
     });
   };
@@ -192,9 +212,11 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
     fireEvent(this, "after-show");
   };
 
-  private _handleAfterHide = () => {
-    this._open = false;
-    fireEvent(this, "closed");
+  private _handleAfterHide = (ev: CustomEvent<{ source: Element }>) => {
+    if (ev.eventPhase === Event.AT_TARGET) {
+      this._open = false;
+      fireEvent(this, "closed");
+    }
   };
 
   public disconnectedCallback(): void {
@@ -207,6 +229,23 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
     this._bodyScrolled = (ev.target as HTMLDivElement).scrollTop > 0;
   }
 
+  private _handleKeyDown(ev: KeyboardEvent) {
+    if (ev.key === "Escape") {
+      this._escapePressed = true;
+    }
+  }
+
+  private _handleHide(ev: CustomEvent<{ source: Element }>) {
+    if (
+      this.preventScrimClose &&
+      this._escapePressed &&
+      ev.detail.source === (ev.target as WaDialog).dialog
+    ) {
+      ev.preventDefault();
+    }
+    this._escapePressed = false;
+  }
+
   static get styles() {
     return [
       ...super.styles,
@@ -235,6 +274,12 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
           );
           max-width: var(--ha-dialog-max-width, var(--safe-width));
         }
+        @media (prefers-reduced-motion: reduce) {
+          wa-dialog {
+            --show-duration: 0ms;
+            --hide-duration: 0ms;
+          }
+        }
 
         :host([width="small"]) wa-dialog {
           --width: min(var(--ha-dialog-width-sm, 320px), var(--full-width));
@@ -249,6 +294,7 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
         }
 
         wa-dialog::part(dialog) {
+          color: var(--primary-text-color);
           min-width: var(--width, var(--full-width));
           max-width: var(--width, var(--full-width));
           max-height: var(
@@ -260,15 +306,15 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
           /* Used to offset the dialog from the safe areas when space is limited */
           transform: translate(
             calc(
-              var(--safe-area-offset-left, var(--ha-space-0)) - var(
+              var(--safe-area-offset-left, 0px) - var(
                   --safe-area-offset-right,
-                  var(--ha-space-0)
+                  0px
                 )
             ),
             calc(
-              var(--safe-area-offset-top, var(--ha-space-0)) - var(
+              var(--safe-area-offset-top, 0px) - var(
                   --safe-area-offset-bottom,
-                  var(--ha-space-0)
+                  0px
                 )
             )
           );
@@ -279,7 +325,7 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
 
         @media all and (max-width: 450px), all and (max-height: 500px) {
           :host([type="standard"]) {
-            --ha-dialog-border-radius: var(--ha-space-0);
+            --ha-dialog-border-radius: 0;
 
             wa-dialog {
               /* Make the container fill the whole screen width and not the safe width */
@@ -366,7 +412,7 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
         }
 
         wa-dialog::part(footer) {
-          padding: var(--ha-space-0);
+          padding: 0;
         }
 
         ::slotted([slot="footer"]) {

src/components/map/ha-map.ts

@@ -24,6 +24,7 @@ import { setupLeafletMap } from "../../common/dom/setup-leaflet-map";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { DecoratedMarker } from "../../common/map/decorated_marker";
+import { filterXSS } from "../../common/util/xss";
 import type { HomeAssistant, ThemeMode } from "../../types";
 import { isTouch } from "../../util/is_touch";
 import "../ha-icon-button";
@@ -381,7 +382,7 @@ export class HaMap extends ReactiveElement {
         this.hass.config
       );
     }
-    return `${path.name}<br>${formattedTime}`;
+    return `${filterXSS(path.name ?? "")}<br>${formattedTime}`;
   }
 
   private _drawPaths(): void {
@@ -549,7 +550,7 @@ export class HaMap extends ReactiveElement {
           iconHTML = el.outerHTML;
         } else {
           const el = document.createElement("span");
-          el.innerHTML = title;
+          el.textContent = title;
           iconHTML = el.outerHTML;
         }
 

src/components/media-player/dialog-media-manage.ts

@@ -1,13 +1,17 @@
 import { animate } from "@lit-labs/motion";
 
-import { mdiClose, mdiDelete } from "@mdi/js";
+import {
+  mdiClose,
+  mdiDelete,
+  mdiCheckboxBlankOutline,
+  mdiCheckboxMarkedOutline,
+} from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
-import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { deleteImage, getIdFromUrl } from "../../data/image_upload";
 import type { MediaPlayerItem } from "../../data/media-player";
 import { MediaClassBrowserSettings } from "../../data/media-player";
@@ -18,12 +22,13 @@ import {
   removeLocalMedia,
 } from "../../data/media_source";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
-import { haStyleDialog, haStyleDialogFixedTop } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "../ha-button";
 import "../ha-check-list-item";
-import "../ha-dialog";
+import "../ha-wa-dialog";
 import "../ha-dialog-header";
+import "../ha-dialog-footer";
+import "../ha-icon-button";
 import "../ha-list";
 import "../ha-spinner";
 import "../ha-svg-icon";
@@ -46,14 +51,24 @@ class DialogMediaManage extends LitElement {
 
   @state() private _selected = new Set<number>();
 
+  @state() private _open = false;
+
+  @state() private _filteredChildren: MediaPlayerItem[] = [];
+
   private _filesChanged = false;
 
   public showDialog(params: MediaManageDialogParams): void {
     this._params = params;
     this._refreshMedia();
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed(): void {
     if (this._filesChanged && this._params!.onClose) {
       this._params!.onClose();
     }
@@ -65,88 +80,68 @@ class DialogMediaManage extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
+  protected willUpdate() {
+    this._filteredChildren =
+      this._currentItem?.children?.filter((child) => !child.can_expand) || [];
+    if (this._filteredChildren.length === 0 && this._selected.size !== 0) {
+      // When running delete all, sometimes the list can throw off a spurious
+      // select event that makes it think that 1 item is still selected. Clear selected
+      // if nothing can be selected.
+      this._selected = new Set();
+    }
+  }
+
   protected render() {
     if (!this._params) {
       return nothing;
     }
 
-    const children =
-      this._currentItem?.children?.filter((child) => !child.can_expand) || [];
-
     let fileIndex = 0;
 
     return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        hideActions
-        flexContent
-        .heading=${this._params.currentItem.title}
-        @closed=${this.closeDialog}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        ?prevent-scrim-close=${this._uploading || this._deleting}
+        @closed=${this._dialogClosed}
       >
-        <ha-dialog-header slot="heading">
+        <ha-dialog-header slot="header">
+          ${!(this._uploading || this._deleting)
+            ? html`<slot name="headerNavigationIcon" slot="navigationIcon">
+                <ha-icon-button
+                  data-dialog="close"
+                  .label=${this.hass?.localize("ui.common.close") ?? "Close"}
+                  .path=${mdiClose}
+                ></ha-icon-button
+              ></slot>`
+            : nothing}
+          <span class="title" slot="title" id="dialog-box-title">
+            ${this.hass.localize(
+              "ui.components.media-browser.file_management.title"
+            )}
+          </span>
           ${this._selected.size === 0
-            ? html`
-                <span slot="title">
-                  ${this.hass.localize(
-                    "ui.components.media-browser.file_management.title"
-                  )}
-                </span>
-
-                <ha-media-upload-button
-                  .disabled=${this._deleting}
-                  .hass=${this.hass}
-                  .currentItem=${this._params.currentItem}
-                  @uploading=${this._startUploading}
-                  @media-refresh=${this._doneUploading}
-                  slot="actionItems"
-                ></ha-media-upload-button>
-                ${this._uploading
-                  ? ""
-                  : html`
-                      <ha-icon-button
-                        .label=${this.hass.localize("ui.common.close")}
-                        .path=${mdiClose}
-                        dialogAction="close"
-                        slot="navigationIcon"
-                        dir=${computeRTLDirection(this.hass)}
-                      ></ha-icon-button>
-                    `}
-              `
-            : html`
-                <ha-button
-                  variant="danger"
-                  slot="navigationIcon"
-                  .disabled=${this._deleting}
-                  @click=${this._handleDelete}
-                >
-                  <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
-                  ${this.hass.localize(
-                    `ui.components.media-browser.file_management.${
-                      this._deleting ? "deleting" : "delete"
-                    }`,
-                    { count: this._selected.size }
-                  )}
-                </ha-button>
-
-                ${this._deleting
-                  ? ""
-                  : html`
-                      <ha-button
-                        slot="actionItems"
-                        @click=${this._handleDeselectAll}
-                      >
-                        <ha-svg-icon
-                          .path=${mdiClose}
-                          slot="start"
-                        ></ha-svg-icon>
-                        ${this.hass.localize(
-                          `ui.components.media-browser.file_management.deselect_all`
-                        )}
-                      </ha-button>
-                    `}
-              `}
+            ? html`<ha-media-upload-button
+                .hass=${this.hass}
+                .currentItem=${this._params.currentItem}
+                @uploading=${this._startUploading}
+                @media-refresh=${this._doneUploading}
+                slot="actionItems"
+              ></ha-media-upload-button>`
+            : html`<ha-button
+                variant="danger"
+                slot="actionItems"
+                .disabled=${this._deleting}
+                @click=${this._handleDelete}
+              >
+                <ha-svg-icon .path=${mdiDelete} slot="start"></ha-svg-icon>
+                ${this.hass.localize(
+                  `ui.components.media-browser.file_management.${
+                    this._deleting ? "deleting" : "delete"
+                  }`,
+                  { count: this._selected.size }
+                )}
+              </ha-button>`}
         </ha-dialog-header>
         ${!this._currentItem
           ? html`
@@ -154,7 +149,7 @@ class DialogMediaManage extends LitElement {
                 <ha-spinner></ha-spinner>
               </div>
             `
-          : !children.length
+          : !this._filteredChildren.length
             ? html`<div class="no-items">
                 <p>
                   ${this.hass.localize(
@@ -170,9 +165,38 @@ class DialogMediaManage extends LitElement {
                   : ""}
               </div>`
             : html`
+                <div class="buttons" slot="footer">
+                  <ha-button
+                    appearance="filled"
+                    @click=${this._handleDeselectAll}
+                    .disabled=${this._selected.size === 0}
+                  >
+                    <ha-svg-icon
+                      .path=${mdiCheckboxBlankOutline}
+                      slot="start"
+                    ></ha-svg-icon>
+                    ${this.hass.localize(
+                      `ui.components.media-browser.file_management.deselect_all`
+                    )}
+                  </ha-button>
+                  <ha-button
+                    appearance="filled"
+                    @click=${this._handleSelectAll}
+                    .disabled=${this._selected.size ===
+                    this._filteredChildren.length}
+                  >
+                    <ha-svg-icon
+                      .path=${mdiCheckboxMarkedOutline}
+                      slot="start"
+                    ></ha-svg-icon>
+                    ${this.hass.localize(
+                      `ui.components.media-browser.file_management.select_all`
+                    )}
+                  </ha-button>
+                </div>
                 <ha-list multi @selected=${this._handleSelected}>
                   ${repeat(
-                    children,
+                    this._filteredChildren,
                     (item) => item.media_content_id,
                     (item) => {
                       const icon = html`
@@ -220,7 +244,7 @@ class DialogMediaManage extends LitElement {
               )}
             </ha-tip>`
           : nothing}
-      </ha-dialog>
+      </ha-wa-dialog>
     `;
   }
 
@@ -244,6 +268,10 @@ class DialogMediaManage extends LitElement {
     }
   }
 
+  private _handleSelectAll() {
+    this._selected = new Set([...Array(this._filteredChildren.length).keys()]);
+  }
+
   private async _handleDelete() {
     if (
       !(await showConfirmationDialog(this, {
@@ -304,23 +332,10 @@ class DialogMediaManage extends LitElement {
 
   static get styles(): CSSResultGroup {
     return [
-      haStyleDialog,
-      haStyleDialogFixedTop,
       css`
-        ha-dialog {
-          --dialog-z-index: 9;
+        ha-wa-dialog {
           --dialog-content-padding: 0;
         }
-
-        @media (min-width: 800px) {
-          ha-dialog {
-            --mdc-dialog-max-width: 800px;
-            --mdc-dialog-max-height: calc(
-              100vh - var(--ha-space-18) - var(--safe-area-inset-y)
-            );
-          }
-        }
-
         ha-dialog-header ha-media-upload-button,
         ha-dialog-header ha-button {
           --mdc-theme-primary: var(--primary-text-color);
@@ -338,7 +353,11 @@ class DialogMediaManage extends LitElement {
           justify-content: center;
           align-items: center;
         }
-
+        .buttons {
+          display: flex;
+          justify-content: center;
+          width: 100%;
+        }
         .no-items {
           text-align: center;
           padding: 16px;

src/components/media-player/dialog-media-player-browse.ts

@@ -1,7 +1,6 @@
 import type { ActionDetail } from "@material/mwc-list";
 import {
   mdiAlphaABoxOutline,
-  mdiArrowLeft,
   mdiClose,
   mdiDotsVertical,
   mdiGrid,
@@ -21,9 +20,10 @@ import type {
 } from "../../data/media-player";
 import { haStyleDialog, haStyleDialogFixedTop } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
-import "../ha-dialog";
+import "../ha-wa-dialog";
 import "../ha-dialog-header";
 import "../ha-list-item";
+import "../ha-icon-button-arrow-prev";
 import "./ha-media-manage-button";
 import "./ha-media-player-browse";
 import type {
@@ -44,6 +44,8 @@ class DialogMediaPlayerBrowse extends LitElement {
 
   @state() _preferredLayout: MediaPlayerLayoutType = "auto";
 
+  @state() private _open = false;
+
   @query("ha-media-player-browse") private _browser!: HaMediaPlayerBrowse;
 
   public showDialog(params: MediaPlayerBrowseDialogParams): void {
@@ -54,9 +56,11 @@ class DialogMediaPlayerBrowse extends LitElement {
         media_content_type: undefined,
       },
     ];
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
     this._params = undefined;
     this._navigateIds = undefined;
     this._currentItem = undefined;
@@ -71,28 +75,20 @@ class DialogMediaPlayerBrowse extends LitElement {
     }
 
     return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        hideActions
-        flexContent
-        .heading=${!this._currentItem
-          ? this.hass.localize(
-              "ui.components.media-browser.media-player-browser"
-            )
-          : this._currentItem.title}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        flexcontent
         @closed=${this.closeDialog}
         @opened=${this._dialogOpened}
       >
-        <ha-dialog-header show-border slot="heading">
+        <ha-dialog-header show-border slot="header">
           ${this._navigateIds.length > (this._params.minimumNavigateLevel ?? 1)
             ? html`
-                <ha-icon-button
+                <ha-icon-button-arrow-prev
                   slot="navigationIcon"
-                  .path=${mdiArrowLeft}
                   @click=${this._goBack}
-                ></ha-icon-button>
+                ></ha-icon-button-arrow-prev>
               `
             : nothing}
           <span slot="title">
@@ -153,7 +149,7 @@ class DialogMediaPlayerBrowse extends LitElement {
           <ha-icon-button
             .label=${this.hass.localize("ui.common.close")}
             .path=${mdiClose}
-            dialogAction="close"
+            data-dialog="close"
             slot="actionItems"
           ></ha-icon-button>
         </ha-dialog-header>
@@ -173,7 +169,7 @@ class DialogMediaPlayerBrowse extends LitElement {
           @media-picked=${this._mediaPicked}
           @media-browsed=${this._mediaBrowsed}
         ></ha-media-player-browse>
-      </ha-dialog>
+      </ha-wa-dialog>
     `;
   }
 
@@ -225,8 +221,7 @@ class DialogMediaPlayerBrowse extends LitElement {
       haStyleDialog,
       haStyleDialogFixedTop,
       css`
-        ha-dialog {
-          --dialog-z-index: 9;
+        ha-wa-dialog {
           --dialog-content-padding: 0;
         }
 
@@ -241,9 +236,9 @@ class DialogMediaPlayerBrowse extends LitElement {
         }
 
         @media (min-width: 800px) {
-          ha-dialog {
-            --mdc-dialog-max-width: 800px;
-            --mdc-dialog-max-height: calc(
+          ha-wa-dialog {
+            --ha-dialog-max-width: 800px;
+            --ha-dialog-max-height: calc(
               100vh - var(--ha-space-18) - var(--safe-area-inset-y)
             );
           }

src/components/media-player/ha-media-player-toggle.ts

@@ -1,14 +1,15 @@
 import { type CSSResultGroup, LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
-import { mdiSpeaker } from "@mdi/js";
+import { mdiSpeaker, mdiSpeakerPause, mdiSpeakerPlay } from "@mdi/js";
+import memoizeOne from "memoize-one";
 
 import type { HomeAssistant } from "../../types";
-import { computeStateName } from "../../common/entity/compute_state_name";
+import { computeEntityNameList } from "../../common/entity/compute_entity_name_display";
+import { computeRTL } from "../../common/util/compute_rtl";
 import { fireEvent } from "../../common/dom/fire_event";
 
 import "../ha-switch";
 import "../ha-svg-icon";
-import type { MediaPlayerEntity } from "../../data/media-player";
 
 @customElement("ha-media-player-toggle")
 class HaMediaPlayerToggle extends LitElement {
@@ -20,15 +21,61 @@ class HaMediaPlayerToggle extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  private _computeDisplayData = memoizeOne(
+    (
+      entityId: string,
+      entities: HomeAssistant["entities"],
+      devices: HomeAssistant["devices"],
+      areas: HomeAssistant["areas"],
+      floors: HomeAssistant["floors"],
+      isRTL: boolean,
+      stateObj: HomeAssistant["states"][string]
+    ) => {
+      const [entityName, deviceName, areaName] = computeEntityNameList(
+        stateObj,
+        [{ type: "entity" }, { type: "device" }, { type: "area" }],
+        entities,
+        devices,
+        areas,
+        floors
+      );
+
+      const primary = entityName || deviceName || entityId;
+      const secondary = [areaName, entityName ? deviceName : undefined]
+        .filter(Boolean)
+        .join(isRTL ? " ◂ " : " ▸ ");
+
+      return { primary, secondary };
+    }
+  );
+
   protected render() {
     const stateObj = this.hass.states[this.entityId];
+
+    let icon = mdiSpeaker;
+    if (stateObj.state === "playing") {
+      icon = mdiSpeakerPlay;
+    } else if (stateObj.state === "paused") {
+      icon = mdiSpeakerPause;
+    }
+
+    const isRTL = computeRTL(this.hass);
+
+    const { primary, secondary } = this._computeDisplayData(
+      this.entityId,
+      this.hass.entities,
+      this.hass.devices,
+      this.hass.areas,
+      this.hass.floors,
+      isRTL,
+      stateObj
+    );
+
     return html`<div class="list-item">
-      <ha-svg-icon .path=${mdiSpeaker}></ha-svg-icon>
+      <ha-svg-icon .path=${icon}></ha-svg-icon>
       <div class="info">
-        <div class="main-text">${computeStateName(stateObj)}</div>
-        <div class="secondary-text">
-          ${this._formatSecondaryText(stateObj as MediaPlayerEntity)}
-        </div>
+        <div class="main-text">${primary}</div>
+        <div class="secondary-text">${secondary}</div>
       </div>
       <ha-switch
         .disabled=${this.disabled}
@@ -38,16 +85,6 @@ class HaMediaPlayerToggle extends LitElement {
     </div>`;
   }
 
-  private _formatSecondaryText(stateObj: MediaPlayerEntity): string {
-    if (stateObj.state !== "playing") {
-      return this.hass.localize("ui.card.media_player.idle");
-    }
-
-    return [stateObj.attributes.media_title, stateObj.attributes.media_artist]
-      .filter((segment) => segment)
-      .join(" · ");
-  }
-
   static get styles(): CSSResultGroup {
     return [
       css`

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

@@ -89,7 +89,7 @@ export class HaTargetPickerItemGroup extends LitElement {
   static styles = css`
     :host {
       display: block;
-      --expansion-panel-content-padding: var(--ha-space-0);
+      --expansion-panel-content-padding: 0;
     }
     ha-expansion-panel::part(summary) {
       background-color: var(--ha-color-fill-neutral-quiet-resting);
@@ -101,7 +101,7 @@ export class HaTargetPickerItemGroup extends LitElement {
       min-height: unset;
     }
     ha-md-list {
-      padding: var(--ha-space-0);
+      padding: 0;
     }
   `;
 }

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

@@ -605,8 +605,8 @@ export class HaTargetPickerItemRow extends LitElement {
     buttonLinkStyle,
     css`
       :host {
-        --md-list-item-top-space: var(--ha-space-0);
-        --md-list-item-bottom-space: var(--ha-space-0);
+        --md-list-item-top-space: 0;
+        --md-list-item-bottom-space: 0;
         --md-list-item-leading-space: var(--ha-space-2);
         --md-list-item-trailing-space: var(--ha-space-2);
         --md-list-item-two-line-container-height: 56px;

src/components/target-picker/ha-target-picker-value-chip.ts

@@ -278,8 +278,8 @@ export class HaTargetPickerValueChip extends LitElement {
       direction: var(--direction);
     }
     .expand-btn {
-      margin-right: var(--ha-space-0);
-      margin-inline-end: var(--ha-space-0);
+      margin-right: 0;
+      margin-inline-end: 0;
       margin-inline-start: initial;
     }
     .mdc-chip.area:not(.add),

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

@@ -1,4 +1,4 @@
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import type { TemplateResult } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -73,7 +73,7 @@ class HaUserPicker extends LitElement {
     `;
   };
 
-  private _rowRenderer: ComboBoxLitRenderer<UserComboBoxItem> = (item) => {
+  private _rowRenderer: RenderItemFunction<UserComboBoxItem> = (item) => {
     const user = item.user;
     if (!user) {
       return html`<ha-combo-box-item type="button" compact>
@@ -132,9 +132,9 @@ class HaUserPicker extends LitElement {
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .label=${this.label}
-        .notFoundLabel=${this._notFoundLabel}
         .placeholder=${placeholder}
         .value=${this.value}
+        .notFoundLabel=${this._notFoundLabel}
         .getItems=${this._getItems}
         .valueRenderer=${this._valueRenderer}
         .rowRenderer=${this._rowRenderer}

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

@@ -0,0 +1,51 @@
+import { customElement, property } from "lit/decorators";
+import type { CSSResultGroup } from "lit";
+import { LitElement, css, html } from "lit";
+import { haStyle } from "../resources/styles";
+import type { HomeAssistant } from "../types";
+import { voiceAssistants } from "../data/expose";
+import { brandsUrl } from "../util/brands-url";
+
+@customElement("voice-assistant-brand-icon")
+export class VoiceAssistantBrandicon extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public voiceAssistantId!: string;
+
+  protected render() {
+    return html`
+      <img
+        class="logo"
+        alt=${voiceAssistants[this.voiceAssistantId].name}
+        src=${brandsUrl({
+          domain: voiceAssistants[this.voiceAssistantId].domain,
+          type: "icon",
+          darkOptimized: this.hass.themes?.darkMode,
+        })}
+        crossorigin="anonymous"
+        referrerpolicy="no-referrer"
+      />
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .logo {
+          position: relative;
+          height: 24px;
+          margin-right: 16px;
+          margin-inline-end: 16px;
+          margin-inline-start: initial;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "voice-assistant-brand-icon": VoiceAssistantBrandicon;
+  }
+}

src/data/config_entries.ts

@@ -96,6 +96,22 @@ export interface ConfigEntryUpdate {
   entry: ConfigEntry;
 }
 
+export const subscribeAndProcessConfigEntries = (
+  hass: HomeAssistant,
+  callbackFunction: (entries: ConfigEntry[]) => void,
+  filters?: {
+    type?: IntegrationType[];
+    domain?: string;
+  }
+): Promise<UnsubscribeFunc> => {
+  const stream = new ConfigEntryStream();
+  const processCallback = (messages: ConfigEntryUpdate[]) => {
+    callbackFunction(stream.processMessage(messages));
+  };
+
+  return subscribeConfigEntries(hass, processCallback, filters);
+};
+
 export const subscribeConfigEntries = (
   hass: HomeAssistant,
   callbackFunction: (message: ConfigEntryUpdate[]) => void,
@@ -110,10 +126,9 @@ export const subscribeConfigEntries = (
   if (filters && filters.type) {
     params.type_filter = filters.type;
   }
-  return hass.connection.subscribeMessage<ConfigEntryUpdate[]>(
-    (message) => callbackFunction(message),
-    params
-  );
+  return hass.connection.subscribeMessage<ConfigEntryUpdate[]>((message) => {
+    callbackFunction(message);
+  }, params);
 };
 
 export const getConfigEntries = (
@@ -206,3 +221,29 @@ export const sortConfigEntries = (
   );
   return [primaryEntry, ...otherEntries];
 };
+
+export class ConfigEntryStream {
+  private _entries: ConfigEntry[] = [];
+
+  processMessage(message: ConfigEntryUpdate[]) {
+    message.forEach((configEntry) => {
+      if (configEntry.type === null || configEntry.type === "added") {
+        this._entries.push(configEntry.entry);
+        return;
+      }
+      if (configEntry.type === "removed") {
+        this._entries = this._entries.filter(
+          (entry) => entry.entry_id !== configEntry.entry.entry_id
+        );
+        return;
+      }
+      if (configEntry.type === "updated") {
+        const newEntry = configEntry.entry;
+        this._entries = this._entries.map((entry) =>
+          entry.entry_id === newEntry.entry_id ? newEntry : entry
+        );
+      }
+    });
+    return this._entries;
+  }
+}

src/data/context.ts

@@ -1,6 +1,7 @@
 import { createContext } from "@lit/context";
 import type { HassConfig } from "home-assistant-js-websocket";
 import type { HomeAssistant } from "../types";
+import type { ConfigEntry } from "./config_entries";
 import type { EntityRegistryEntry } from "./entity/entity_registry";
 import type { LabelRegistryEntry } from "./label/label_registry";
 
@@ -30,3 +31,6 @@ export const fullEntitiesContext =
 export const floorsContext = createContext<HomeAssistant["floors"]>("floors");
 
 export const labelsContext = createContext<LabelRegistryEntry[]>("labels");
+
+export const configEntriesContext =
+  createContext<ConfigEntry[]>("configEntries");

src/data/energy.ts

@@ -449,16 +449,9 @@ const getEnergyData = async (
   const allStatIDs = [...energyStatIds, ...waterStatIds, ...powerStatIds];
 
   const dayDifference = differenceInDays(end || new Date(), start);
-  const period =
-    isFirstDayOfMonth(start) &&
-    (!end || isLastDayOfMonth(end)) &&
-    dayDifference > 35
-      ? "month"
-      : dayDifference > 2
-        ? "day"
-        : "hour";
-  const finePeriod =
-    dayDifference > 64 ? "day" : dayDifference > 8 ? "hour" : "5minute";
+
+  const period = getSuggestedPeriod(start, end);
+  const finePeriod = getSuggestedPeriod(start, end, true);
 
   const statsMetadata: Record<string, StatisticsMetaData> = {};
   const statsMetadataArray = allStatIDs.length
@@ -589,7 +582,7 @@ const getEnergyData = async (
       consumptionStatIDs,
       co2SignalEntity,
       end,
-      dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour"
+      period
     );
     if (compare) {
       _fossilEnergyConsumptionCompare = getFossilEnergyConsumption(
@@ -598,7 +591,7 @@ const getEnergyData = async (
         consumptionStatIDs,
         co2SignalEntity,
         endCompare,
-        dayDifference > 35 ? "month" : dayDifference > 2 ? "day" : "hour"
+        period
       );
     }
   }
@@ -1427,3 +1420,22 @@ export const formatPowerShort = (
     units[unitIndex]
   );
 };
+
+export function getSuggestedPeriod(
+  start: Date,
+  end?: Date,
+  fine = false
+): "5minute" | "hour" | "day" | "month" {
+  const dayDifference = differenceInDays(end || new Date(), start);
+
+  if (fine) {
+    return dayDifference > 64 ? "day" : dayDifference > 8 ? "hour" : "5minute";
+  }
+  return isFirstDayOfMonth(start) &&
+    (!end || isLastDayOfMonth(end)) &&
+    dayDifference > 35
+    ? "month"
+    : dayDifference > 2
+      ? "day"
+      : "hour";
+}

src/data/entity/entity_attributes.ts

@@ -69,6 +69,7 @@ export const DOMAIN_ATTRIBUTES_UNITS = {
     current_humidity: "%",
     min_humidity: "%",
     max_humidity: "%",
+    target_humidity_step: "%",
   },
   light: {
     color_temp: "mired",

src/data/error_log.ts

@@ -1,10 +1,12 @@
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { atLeastVersion } from "../common/config/version";
 import type { HomeAssistant } from "../types";
+import type { HassioAddonInfo } from "./hassio/addon";
 
 export interface LogProvider {
   key: string;
   name: string;
+  addon?: HassioAddonInfo;
 }
 
 export const fetchErrorLog = (hass: HomeAssistant) =>

src/data/expose.ts

@@ -1,4 +1,6 @@
 import type { HomeAssistant } from "../types";
+import type { EntityRegistryEntry } from "./entity/entity_registry";
+import { entityRegistryByEntityId } from "./entity/entity_registry";
 
 export const voiceAssistants = {
   conversation: { domain: "assist_pipeline", name: "Assist" },
@@ -52,3 +54,13 @@ export const listExposedEntities = (hass: HomeAssistant) =>
   hass.callWS<{ exposed_entities: Record<string, ExposeEntitySettings> }>({
     type: "homeassistant/expose_entity/list",
   });
+
+export const getEntityVoiceAssistantsIds = (
+  entityRegistry: EntityRegistryEntry[],
+  entityId: string
+) => {
+  const entity = entityRegistryByEntityId(entityRegistry)[entityId];
+  return Object.keys(voiceAssistants).filter(
+    (vaKey) => entity?.options?.[vaKey]?.should_expose
+  );
+};

src/data/humidifier.ts

@@ -16,6 +16,7 @@ export type HumidifierEntity = HassEntityBase & {
     mode?: string;
     action?: HumidifierAction;
     available_modes?: string[];
+    target_humidity_step?: number;
   };
 };
 

src/data/lovelace/config/action.ts

@@ -52,6 +52,9 @@ export interface BaseActionConfig {
 
 export interface ConfirmationRestrictionConfig {
   text?: string;
+  title?: string;
+  confirm_text?: string;
+  dismiss_text?: string;
   exemptions?: RestrictionConfig[];
 }
 

src/data/lovelace/config/view.ts

@@ -49,6 +49,7 @@ export interface LovelaceBaseViewConfig {
   title?: string;
   path?: string;
   icon?: string;
+  show_icon_and_title?: boolean;
   theme?: string;
   panel?: boolean;
   background?: string | LovelaceViewBackgroundConfig;

src/data/recorder.ts

@@ -16,6 +16,8 @@ export interface RecorderInfo {
 
 export type StatisticType = "change" | "state" | "sum" | "min" | "max" | "mean";
 
+export type StatisticPeriod = "5minute" | "hour" | "day" | "week" | "month";
+
 export type Statistics = Record<string, StatisticValue[]>;
 
 export interface StatisticValue {
@@ -174,7 +176,7 @@ export const fetchStatistics = (
   startTime: Date,
   endTime?: Date,
   statistic_ids?: string[],
-  period: "5minute" | "hour" | "day" | "week" | "month" = "hour",
+  period: StatisticPeriod = "hour",
   units?: StatisticsUnitConfiguration,
   types?: StatisticsTypes
 ) =>

src/data/selector.ts

@@ -27,6 +27,7 @@ export type Selector =
   | AttributeSelector
   | BooleanSelector
   | ButtonToggleSelector
+  | ChooseSelector
   | ColorRGBSelector
   | ColorTempSelector
   | ConditionSelector
@@ -116,6 +117,13 @@ export interface ButtonToggleSelector {
   } | null;
 }
 
+export interface ChooseSelector {
+  choose: {
+    choices: Record<string, { selector: Selector }>;
+    translation_key?: string;
+  };
+}
+
 export interface ColorRGBSelector {
   color_rgb: {} | null;
 }
@@ -213,6 +221,7 @@ export interface DurationSelector {
   duration: {
     enable_day?: boolean;
     enable_millisecond?: boolean;
+    allow_negative?: boolean;
   } | null;
 }
 
@@ -921,13 +930,13 @@ export const resolveEntityIDs = (
   targetPickerValue: HassServiceTarget,
   entities: HomeAssistant["entities"],
   devices: HomeAssistant["devices"],
-  areas: HomeAssistant["areas"]
+  areas: HomeAssistant["areas"],
+  targetSelector: TargetSelector = { target: {} }
 ): string[] => {
   if (!targetPickerValue) {
     return [];
   }
 
-  const targetSelector = { target: {} };
   const targetEntities = new Set(ensureArray(targetPickerValue.entity_id));
   const targetDevices = new Set(ensureArray(targetPickerValue.device_id));
   const targetAreas = new Set(ensureArray(targetPickerValue.area_id));

src/data/update.ts

@@ -44,14 +44,27 @@ export const updateUsesProgress = (entity: UpdateEntity): boolean =>
   supportsFeature(entity, UpdateEntityFeature.PROGRESS) &&
   entity.attributes.update_percentage !== null;
 
+export const updateAvailable = (
+  entity: UpdateEntity,
+  showSkipped = false
+): boolean =>
+  entity.state === BINARY_STATE_ON ||
+  (showSkipped && Boolean(entity.attributes.skipped_version));
+
 export const updateCanInstall = (
   entity: UpdateEntity,
   showSkipped = false
 ): boolean =>
-  (entity.state === BINARY_STATE_ON ||
-    (showSkipped && Boolean(entity.attributes.skipped_version))) &&
+  updateAvailable(entity, showSkipped) &&
   supportsFeature(entity, UpdateEntityFeature.INSTALL);
 
+export const updateCanNotInstall = (
+  entity: UpdateEntity,
+  showSkipped = false
+): boolean =>
+  updateAvailable(entity, showSkipped) &&
+  !supportsFeature(entity, UpdateEntityFeature.INSTALL);
+
 export const latestVersionIsSkipped = (entity: UpdateEntity): boolean =>
   !!(
     entity.attributes.latest_version &&
@@ -108,13 +121,17 @@ export const filterUpdateEntities = (
     );
   });
 
-export const filterUpdateEntitiesWithInstall = (
+export const filterUpdateEntitiesParameterized = (
   entities: HassEntities,
-  showSkipped = false
+  showSkipped = false,
+  showNotInstallable = false
 ) =>
-  filterUpdateEntities(entities).filter((entity) =>
-    updateCanInstall(entity, showSkipped)
-  );
+  filterUpdateEntities(entities).filter((entity) => {
+    if (showNotInstallable) {
+      return updateCanNotInstall(entity, showSkipped);
+    }
+    return updateCanInstall(entity, showSkipped);
+  });
 
 export const checkForEntityUpdates = async (
   element: HTMLElement,

src/dialogs/image-cropper-dialog/image-cropper-dialog.ts

@@ -5,14 +5,20 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
 import { css, html, LitElement, nothing, unsafeCSS } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button";
-import "../../components/ha-dialog";
+import "../../components/ha-dialog-footer";
+import "../../components/ha-wa-dialog";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import type { HassDialog } from "../make-dialog-manager";
 import type { HaImageCropperDialogParams } from "./show-image-cropper-dialog";
 
 @customElement("image-cropper-dialog")
-export class HaImagecropperDialog extends LitElement {
+export class HaImagecropperDialog
+  extends LitElement
+  implements HassDialog<HaImageCropperDialogParams>
+{
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @state() private _params?: HaImageCropperDialogParams;
@@ -30,12 +36,17 @@ export class HaImagecropperDialog extends LitElement {
     this._open = true;
   }
 
-  public closeDialog() {
+  public closeDialog(): boolean {
     this._open = false;
-    this._params = undefined;
     this._cropper?.destroy();
     this._cropper = undefined;
     this._isTargetAspectRatio = false;
+    return true;
+  }
+
+  private _dialogClosed(): void {
+    this._params = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected updated(changedProperties: PropertyValues) {
@@ -78,41 +89,54 @@ export class HaImagecropperDialog extends LitElement {
     return Math.abs(targetWidth - imageData.naturalWidth) <= 1;
   }
 
-  protected render(): TemplateResult {
-    return html`<ha-dialog
-      @closed=${this.closeDialog}
-      scrimClickAction
-      escapeKeyAction
-      .open=${this._open}
-    >
-      <div
-        class="container ${classMap({
-          round: Boolean(this._params?.options.round),
-        })}"
-      >
-        <img alt=${this.hass.localize("ui.dialogs.image_cropper.crop_image")} />
-      </div>
-      <ha-button
-        appearance="plain"
-        slot="primaryAction"
-        @click=${this.closeDialog}
-      >
-        ${this.hass.localize("ui.common.cancel")}
-      </ha-button>
-      ${this._isTargetAspectRatio
-        ? html`<ha-button
-            appearance="plain"
-            slot="primaryAction"
-            @click=${this._useOriginal}
-          >
-            ${this.hass.localize("ui.dialogs.image_cropper.use_original")}
-          </ha-button>`
-        : nothing}
+  protected render(): TemplateResult | typeof nothing {
+    if (!this._params) {
+      return nothing;
+    }
 
-      <ha-button slot="primaryAction" @click=${this._cropImage}>
-        ${this.hass.localize("ui.dialogs.image_cropper.crop")}
-      </ha-button>
-    </ha-dialog>`;
+    return html`
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
+          "ui.dialogs.image_cropper.crop_image"
+        )}
+        @closed=${this._dialogClosed}
+      >
+        <div
+          class="container ${classMap({
+            round: Boolean(this._params?.options.round),
+          })}"
+        >
+          <img
+            alt=${this.hass.localize("ui.dialogs.image_cropper.crop_image")}
+          />
+        </div>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this.closeDialog}
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          ${this._isTargetAspectRatio
+            ? html`
+                <ha-button
+                  slot="secondaryAction"
+                  appearance="plain"
+                  @click=${this._useOriginal}
+                >
+                  ${this.hass.localize("ui.dialogs.image_cropper.use_original")}
+                </ha-button>
+              `
+            : nothing}
+          <ha-button slot="primaryAction" @click=${this._cropImage}>
+            ${this.hass.localize("ui.dialogs.image_cropper.crop")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
+    `;
   }
 
   private _cropImage() {

src/dialogs/more-info/components/ha-more-info-control-select-container.ts

@@ -37,8 +37,8 @@ export class HaMoreInfoControlSelectContainer extends LitElement {
       overflow: auto;
       -ms-overflow-style: none; /* IE and Edge */
       scrollbar-width: none; /* Firefox */
-      margin: -2px -24px;
-      padding: 2px 24px;
+      margin: -2px calc(var(--ha-space-6) * -1);
+      padding: 2px var(--ha-space-6);
     }
     .controls-scroll::-webkit-scrollbar {
       display: none;

src/dialogs/more-info/components/ha-more-info-state-header.ts

@@ -84,8 +84,8 @@ export class HaMoreInfoStateHeader extends LitElement {
       font-weight: var(--ha-font-weight-medium);
       line-height: var(--ha-line-height-normal);
       letter-spacing: 0.1px;
-      padding: 4px 0;
-      margin-bottom: 20px;
+      padding: var(--ha-space-1) 0;
+      margin-bottom: var(--ha-space-5);
       cursor: pointer;
       user-select: none;
       -webkit-user-select: none;

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

@@ -268,14 +268,14 @@ class DialogLightColorFavorite extends LitElement {
           flex-direction: column;
           align-items: center;
           justify-content: center;
-          padding: 24px;
+          padding: var(--ha-space-6);
           flex: 1;
         }
         .modes {
           display: flex;
           flex-direction: row;
           justify-content: flex-end;
-          padding: 0 24px;
+          padding: 0 var(--ha-space-6);
         }
         .wheel {
           width: 30px;