Review

* Switch energy now chart to watts

* Add kW

* Scale formatted value based on powers of 1000

1000 W -> 1 kW
W → kW → MW → GW → TW

* Explainers

* Use 3 dp for kW+ and 0 for W

* Add non-integer test

.github/workflows/ci.yaml

@@ -37,7 +37,7 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-pages
       - name: Setup lint cache
-        uses: actions/cache@0057852bfaa89a56745cba8c7296529d2fc39830 # v4.3.0
+        uses: actions/cache@9255dc7a253b0ccc959486e2bca901246202afeb # v5.0.1
         with:
           path: |
             node_modules/.cache/prettier
@@ -89,7 +89,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: frontend-bundle-stats
           path: build/stats/*.json
@@ -113,7 +113,7 @@ jobs:
         env:
           IS_TEST: "true"
       - name: Upload bundle stats
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: supervisor-bundle-stats
           path: build/stats/*.json

.github/workflows/codeql-analysis.yml

@@ -36,14 +36,14 @@ jobs:
 
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
+        uses: github/codeql-action/init@1b168cd39490f61582a9beae412bb7057a6b2c4e # v4.31.8
         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@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
+        uses: github/codeql-action/autobuild@1b168cd39490f61582a9beae412bb7057a6b2c4e # v4.31.8
 
       # ℹ️ 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@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
+        uses: github/codeql-action/analyze@1b168cd39490f61582a9beae412bb7057a6b2c4e # v4.31.8

.github/workflows/lock.yml

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

.github/workflows/nightly.yaml

@@ -57,14 +57,14 @@ jobs:
         run: tar -czvf translations.tar.gz translations
 
       - name: Upload build artifacts
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@330a01c490aca151604b8cf639adc76d48f6c5d4 # v5.0.0
+        uses: actions/upload-artifact@b7c566a772e6b6bfb58ed0dc250532a479d7789f # v6.0.0
         with:
           name: translations
           path: translations.tar.gz

.gitignore

@@ -56,4 +56,5 @@ test/coverage/
 
 # AI tooling
 .claude
+.cursor
 

.nvmrc

@@ -1 +1 @@
-22.21.1
+24.12.0

demo/src/stubs/device_registry.ts

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

demo/src/stubs/entity_registry.ts

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

demo/src/stubs/label_registry.ts

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

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

@@ -142,7 +142,7 @@ export class DemoAutomationDescribeAction extends LitElement {
         <div class="action">
           <span>
             ${this._action
-              ? describeAction(this.hass, [], [], {}, this._action)
+              ? describeAction(this.hass, [], this._action)
               : "<invalid YAML>"}
           </span>
           <ha-yaml-editor
@@ -155,7 +155,7 @@ export class DemoAutomationDescribeAction extends LitElement {
         ${ACTIONS.map(
           (conf) => html`
             <div class="action">
-              <span>${describeAction(this.hass, [], [], {}, conf as any)}</span>
+              <span>${describeAction(this.hass, [], conf as any)}</span>
               <pre>${dump(conf)}</pre>
             </div>
           `

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

@@ -11,11 +11,11 @@ import { computeInitialHaFormData } from "../../../../src/components/ha-form/com
 import "../../../../src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
-import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {

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

@@ -13,9 +13,9 @@ import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
 import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
 import type { BlueprintInput } from "../../../../src/data/blueprint";
-import type { DeviceRegistryEntry } from "../../../../src/data/device_registry";
+import type { DeviceRegistryEntry } from "../../../../src/data/device/device_registry";
 import type { FloorRegistryEntry } from "../../../../src/data/floor_registry";
-import type { LabelRegistryEntry } from "../../../../src/data/label_registry";
+import type { LabelRegistryEntry } from "../../../../src/data/label/label_registry";
 import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";

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

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

package.json

@@ -34,7 +34,7 @@
     "@codemirror/legacy-modes": "6.5.2",
     "@codemirror/search": "6.5.11",
     "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.38.8",
+    "@codemirror/view": "6.39.4",
     "@date-fns/tz": "1.4.1",
     "@egjs/hammerjs": "2.0.17",
     "@formatjs/intl-datetimeformat": "6.18.2",
@@ -52,7 +52,7 @@
     "@fullcalendar/list": "6.1.19",
     "@fullcalendar/luxon3": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
-    "@home-assistant/webawesome": "3.0.0-ha.1",
+    "@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",
@@ -135,7 +135,7 @@
     "stacktrace-js": "2.0.2",
     "superstruct": "2.0.2",
     "tinykeys": "3.0.0",
-    "ua-parser-js": "2.0.6",
+    "ua-parser-js": "2.0.7",
     "vue": "2.7.16",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
@@ -157,8 +157,8 @@
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.0.3",
     "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.3.12",
-    "@rspack/core": "1.6.6",
+    "@rsdoctor/rspack-plugin": "1.3.15",
+    "@rspack/core": "1.6.7",
     "@rspack/dev-server": "1.1.4",
     "@types/babel__plugin-transform-runtime": "7.9.5",
     "@types/chromecast-caf-receiver": "6.0.22",
@@ -183,7 +183,7 @@
     "babel-plugin-template-html-minifier": "4.1.0",
     "browserslist-useragent-regexp": "4.1.3",
     "del": "8.0.1",
-    "eslint": "9.39.1",
+    "eslint": "9.39.2",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-webpack": "0.13.10",
@@ -201,7 +201,7 @@
     "gulp-rename": "2.1.0",
     "html-minifier-terser": "7.2.0",
     "husky": "9.1.7",
-    "jsdom": "27.2.0",
+    "jsdom": "27.3.0",
     "jszip": "3.10.1",
     "lint-staged": "16.2.7",
     "lit-analyzer": "2.0.3",
@@ -214,10 +214,10 @@
     "serve": "14.2.5",
     "sinon": "21.0.0",
     "tar": "7.5.2",
-    "terser-webpack-plugin": "5.3.15",
+    "terser-webpack-plugin": "5.3.16",
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.48.1",
+    "typescript-eslint": "8.49.0",
     "vite-tsconfig-paths": "5.1.4",
     "vitest": "4.0.15",
     "webpack-stats-plugin": "1.1.3",
@@ -238,6 +238,6 @@
   },
   "packageManager": "yarn@4.12.0",
   "volta": {
-    "node": "22.21.1"
+    "node": "24.12.0"
   }
 }

src/common/entity/compute_attribute_display.ts

@@ -3,8 +3,8 @@ import {
   DOMAIN_ATTRIBUTES_FORMATERS,
   DOMAIN_ATTRIBUTES_UNITS,
   TEMPERATURE_ATTRIBUTES,
-} from "../../data/entity_attributes";
-import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
+} from "../../data/entity/entity_attributes";
+import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import type { FrontendLocaleData } from "../../data/translation";
 import type { WeatherEntity } from "../../data/weather";
 import { getWeatherUnit } from "../../data/weather";

src/common/entity/compute_device_name.ts

@@ -1,12 +1,12 @@
 import memoizeOne from "memoize-one";
-import type { DeviceRegistryEntry } from "../../data/device_registry";
+import type { DeviceRegistryEntry } from "../../data/device/device_registry";
 import type {
   EntityRegistryDisplayEntry,
   EntityRegistryEntry,
-} from "../../data/entity_registry";
+} from "../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../types";
-import { computeStateName } from "./compute_state_name";
 import { getDuplicates } from "../string/get_duplicates";
+import { computeStateName } from "./compute_state_name";
 
 export const computeDeviceName = (
   device: DeviceRegistryEntry

src/common/entity/compute_entity_name.ts

@@ -2,7 +2,7 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import type {
   EntityRegistryDisplayEntry,
   EntityRegistryEntry,
-} from "../../data/entity_registry";
+} from "../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../types";
 import { computeDeviceName } from "./compute_device_name";
 import { computeStateName } from "./compute_state_name";

src/common/entity/compute_state_display.ts

@@ -1,12 +1,12 @@
 import type { HassConfig, HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
-import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
+import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
+import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import type { FrontendLocaleData } from "../../data/translation";
 import { TimeZone } from "../../data/translation";
 import type { HomeAssistant } from "../../types";
-import { DURATION_UNITS, formatDuration } from "../datetime/format_duration";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
+import { DURATION_UNITS, formatDuration } from "../datetime/format_duration";
 import { formatTime } from "../datetime/format_time";
 import {
   formatNumber,

src/common/entity/context/get_device_context.ts

@@ -1,5 +1,5 @@
 import type { AreaRegistryEntry } from "../../../data/area_registry";
-import type { DeviceRegistryEntry } from "../../../data/device_registry";
+import type { DeviceRegistryEntry } from "../../../data/device/device_registry";
 import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import type { HomeAssistant } from "../../../types";
 

src/common/entity/context/get_entity_context.ts

@@ -1,11 +1,11 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import type { AreaRegistryEntry } from "../../../data/area_registry";
-import type { DeviceRegistryEntry } from "../../../data/device_registry";
+import type { DeviceRegistryEntry } from "../../../data/device/device_registry";
 import type {
   EntityRegistryDisplayEntry,
   EntityRegistryEntry,
   ExtEntityRegistryEntry,
-} from "../../../data/entity_registry";
+} from "../../../data/entity/entity_registry";
 import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import type { HomeAssistant } from "../../../types";
 

src/common/entity/delete_entity.ts

@@ -1,14 +1,14 @@
-import type { HomeAssistant } from "../../types";
-import type { IntegrationManifest } from "../../data/integration";
-import { computeDomain } from "./compute_domain";
-import { HELPERS_CRUD } from "../../data/helpers_crud";
-import type { Helper } from "../../panels/config/helpers/const";
-import { isHelperDomain } from "../../panels/config/helpers/const";
-import { isComponentLoaded } from "../config/is_component_loaded";
-import type { EntityRegistryEntry } from "../../data/entity_registry";
-import { removeEntityRegistryEntry } from "../../data/entity_registry";
 import type { ConfigEntry } from "../../data/config_entries";
 import { deleteConfigEntry } from "../../data/config_entries";
+import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
+import { removeEntityRegistryEntry } from "../../data/entity/entity_registry";
+import { HELPERS_CRUD } from "../../data/helpers_crud";
+import type { IntegrationManifest } from "../../data/integration";
+import type { Helper } from "../../panels/config/helpers/const";
+import { isHelperDomain } from "../../panels/config/helpers/const";
+import type { HomeAssistant } from "../../types";
+import { isComponentLoaded } from "../config/is_component_loaded";
+import { computeDomain } from "./compute_domain";
 
 export const isDeletableEntity = (
   hass: HomeAssistant,

src/common/entity/get_states.ts

@@ -1,9 +1,9 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { computeStateDomain } from "./compute_state_domain";
-import { UNAVAILABLE_STATES } from "../../data/entity";
+import { UNAVAILABLE_STATES } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
-import { computeDomain } from "./compute_domain";
 import { stringCompare } from "../string/compare";
+import { computeDomain } from "./compute_domain";
+import { computeStateDomain } from "./compute_state_domain";
 
 export const FIXED_DOMAIN_STATES = {
   alarm_control_panel: [

src/common/entity/group_entities.ts

@@ -1,7 +1,7 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { computeStateDomain } from "./compute_state_domain";
-import { isUnavailableState, UNAVAILABLE } from "../../data/entity";
+import { isUnavailableState, UNAVAILABLE } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
+import { computeStateDomain } from "./compute_state_domain";
 
 export const computeGroupEntitiesState = (states: HassEntity[]): string => {
   if (!states.length) {

src/common/entity/state_active.ts

@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { isUnavailableState, OFF, UNAVAILABLE } from "../../data/entity";
+import { isUnavailableState, OFF, UNAVAILABLE } from "../../data/entity/entity";
 import { computeDomain } from "./compute_domain";
 
 export function stateActive(stateObj: HassEntity, state?: string): boolean {

src/common/entity/state_card_type.ts

@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE } from "../../data/entity";
+import { UNAVAILABLE } from "../../data/entity/entity";
 import type { HomeAssistant } from "../../types";
 import { DOMAINS_WITH_CARD } from "../const";
 import { canToggleState } from "./can_toggle_state";

src/common/entity/state_color.ts

@@ -1,6 +1,6 @@
 /** Return a color representing a state. */
 import type { HassEntity } from "home-assistant-js-websocket";
-import { UNAVAILABLE } from "../../data/entity";
+import { UNAVAILABLE } from "../../data/entity/entity";
 import type { GroupEntity } from "../../data/group";
 import { computeGroupDomain } from "../../data/group";
 import { computeCssVariable } from "../../resources/css-variables";

src/common/navigate.ts

@@ -17,25 +17,36 @@ export interface NavigateOptions {
 // max time to wait for dialogs to close before navigating
 const DIALOG_WAIT_TIMEOUT = 500;
 
-export const navigate = async (
-  path: string,
-  options?: NavigateOptions,
-  timestamp = Date.now()
-) => {
+/**
+ * Ensures all dialogs are closed before navigation.
+ * Returns true if navigation can proceed, false if a dialog refused to close.
+ */
+const ensureDialogsClosed = async (timestamp: number): Promise<boolean> => {
   const { history } = mainWindow;
-  if (history.state?.dialog && Date.now() - timestamp < DIALOG_WAIT_TIMEOUT) {
-    const closed = await closeAllDialogs();
-    if (!closed) {
-      // eslint-disable-next-line no-console
-      console.warn("Navigation blocked, because dialog refused to close");
-      return false;
-    }
-    return new Promise<boolean>((resolve) => {
-      // need to wait for history state to be updated in case a dialog was closed
-      setTimeout(() => {
-        navigate(path, options, timestamp).then(resolve);
-      });
-    });
+
+  if (!history.state?.dialog || Date.now() - timestamp >= DIALOG_WAIT_TIMEOUT) {
+    return true;
+  }
+
+  const closed = await closeAllDialogs();
+  if (!closed) {
+    // eslint-disable-next-line no-console
+    console.warn("Navigation blocked, because dialog refused to close");
+    return false;
+  }
+
+  // wait for history state to be updated after dialog closed
+  await new Promise<void>((resolve) => {
+    setTimeout(resolve);
+  });
+
+  return ensureDialogsClosed(timestamp);
+};
+
+export const navigate = async (path: string, options?: NavigateOptions) => {
+  const canProceed = await ensureDialogsClosed(Date.now());
+  if (!canProceed) {
+    return false;
   }
   const replace = options?.replace || false;
 
@@ -68,10 +79,14 @@ export const navigate = async (
  * Navigate back in history, with fallback to a default path if no history exists.
  * This prevents a user from getting stuck when they navigate directly to a page with no history.
  */
-export const goBack = (fallbackPath?: string) => {
-  const { history } = mainWindow;
+export const goBack = async (fallbackPath?: string): Promise<void> => {
+  const canProceed = await ensureDialogsClosed(Date.now());
+  if (!canProceed) {
+    return;
+  }
 
   // Check if we have history to go back to
+  const { history } = mainWindow;
   if (history.length > 1) {
     history.back();
     return;

src/common/number/format_number.ts

@@ -2,7 +2,7 @@ import type {
   HassEntity,
   HassEntityAttributeBase,
 } from "home-assistant-js-websocket";
-import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
+import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import type { FrontendLocaleData } from "../../data/translation";
 import { NumberFormat } from "../../data/translation";
 import { round } from "./round";

src/common/util/view-transition.ts

@@ -1,30 +1,45 @@
 /**
- * Executes a callback within a View Transition if supported, otherwise runs it directly.
+ * Executes a synchronous callback within a View Transition if supported, otherwise runs it directly.
  *
- * @param callback - Function to execute. Can be synchronous or return a Promise. The callback will be passed a boolean indicating whether the view transition is available.
+ * @param callback - Synchronous function to execute. The callback will be passed a boolean indicating whether the view transition is available.
  * @returns Promise that resolves when the transition completes (or immediately if not supported)
  *
  * @example
  * ```typescript
- * // Synchronous callback
  * withViewTransition(() => {
  *   this.large = !this.large;
  * });
- *
- * // Async callback
- * await withViewTransition(async () => {
- *   await this.updateData();
- * });
  * ```
  */
 export const withViewTransition = (
-  callback: (viewTransitionAvailable: boolean) => void | Promise<void>
+  callback: (viewTransitionAvailable: boolean) => void
 ): Promise<void> => {
-  if (document.startViewTransition) {
-    return document.startViewTransition(() => callback(true)).finished;
+  if (!document.startViewTransition) {
+    callback(false);
+    return Promise.resolve();
   }
 
-  // Fallback: Execute callback directly without transition
-  const result = callback(false);
-  return result instanceof Promise ? result : Promise.resolve();
+  let callbackInvoked = false;
+
+  try {
+    // View Transitions require DOM updates to happen synchronously within
+    // the callback. Execute the callback immediately (synchronously).
+    const transition = document.startViewTransition(() => {
+      callbackInvoked = true;
+      callback(true);
+    });
+    return transition.finished;
+  } catch (err) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      "View transition failed, falling back to direct execution.",
+      err
+    );
+    // Make sure the callback is invoked exactly once.
+    if (!callbackInvoked) {
+      callback(false);
+      return Promise.resolve();
+    }
+    return Promise.reject(err);
+  }
 };

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

@@ -0,0 +1,207 @@
+import type { EChartsType } from "echarts/core";
+import type { SunburstSeriesOption } from "echarts/types/dist/echarts";
+import type { CallbackDataParams } from "echarts/types/src/util/types";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { getGraphColorByIndex } from "../../common/color/colors";
+import { filterXSS } from "../../common/util/xss";
+import type { ECOption } from "../../resources/echarts/echarts";
+import type { HomeAssistant } from "../../types";
+import "./ha-chart-base";
+
+// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/consistent-type-imports
+let SunburstChart: typeof import("echarts/lib/chart/sunburst/install");
+
+export interface SunburstNode {
+  id: string;
+  name?: string;
+  value: number;
+  itemStyle?: {
+    color?: string;
+  };
+  children?: SunburstNode[];
+}
+
+@customElement("ha-sunburst-chart")
+export class HaSunburstChart extends LitElement {
+  public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public data?: SunburstNode;
+
+  @property({ type: String, attribute: false }) public valueFormatter?: (
+    value: number
+  ) => string;
+
+  public chart?: EChartsType;
+
+  constructor() {
+    super();
+    if (!SunburstChart) {
+      import("echarts/lib/chart/sunburst/install").then((module) => {
+        SunburstChart = module;
+        this.requestUpdate();
+      });
+    }
+  }
+
+  render() {
+    if (!SunburstChart || !this.data) {
+      return nothing;
+    }
+
+    const options = {
+      tooltip: {
+        trigger: "item",
+        formatter: this._renderTooltip,
+        appendTo: document.body,
+      },
+    } as ECOption;
+
+    return html`<ha-chart-base
+      .data=${this._createData(this.data)}
+      .options=${options}
+      height="100%"
+      .extraComponents=${[SunburstChart]}
+    ></ha-chart-base>`;
+  }
+
+  private _renderTooltip = (params: CallbackDataParams) => {
+    const data = params.data as { name: string; value: number };
+    const value = this.valueFormatter
+      ? this.valueFormatter(data.value)
+      : data.value;
+    return `${params.marker} ${filterXSS(data.name)}<br>${value}`;
+  };
+
+  private _createData = memoizeOne(
+    (data: SunburstNode): SunburstSeriesOption => {
+      const computedStyles = getComputedStyle(this);
+
+      // Transform to echarts format (uses 'name' instead of 'id')
+      const transformNode = (
+        node: SunburstNode,
+        index: number,
+        depth: number,
+        parentColor?: string
+      ) => {
+        const result = {
+          ...node,
+          name: node.name || node.id,
+        };
+
+        if (depth > 0 && !node.itemStyle?.color) {
+          // Don't assign color to root node
+          result.itemStyle = {
+            color: parentColor ?? getGraphColorByIndex(index, computedStyles),
+          };
+        }
+
+        if (node.children && node.children.length > 0) {
+          result.children = node.children.map((child, i) =>
+            transformNode(child, i, depth + 1, result.itemStyle?.color)
+          );
+        }
+
+        return result;
+      };
+
+      const transformedData = transformNode(data, 0, 0);
+
+      return {
+        type: "sunburst",
+        data: transformedData.children || [transformedData],
+        radius: [0, "90%"],
+        sort: undefined, // Keep original order
+        label: {
+          show: false,
+          align: "center",
+          rotate: "radial",
+          minAngle: 15,
+          hideOverlap: true,
+        },
+        emphasis: {
+          focus: "ancestor",
+          label: {
+            show: false,
+          },
+        },
+        itemStyle: {
+          borderRadius: 2,
+        },
+        levels: this._generateLevels(this._getMaxDepth(data)),
+      } as SunburstSeriesOption;
+    }
+  );
+
+  private _getMaxDepth(node: SunburstNode, currentDepth = 0): number {
+    if (!node.children || node.children.length === 0) {
+      return currentDepth;
+    }
+    return Math.max(
+      ...node.children.map((child) =>
+        this._getMaxDepth(child, currentDepth + 1)
+      )
+    );
+  }
+
+  private _generateLevels(depth: number): SunburstSeriesOption["levels"] {
+    const levels: SunburstSeriesOption["levels"] = [];
+
+    // Root level (center) - transparent, small fixed size
+    const rootRadius = 15;
+    const outerRadius = 95;
+    const availableRadius = outerRadius - rootRadius;
+
+    levels.push({
+      r0: "0%",
+      r: `${rootRadius}%`,
+      itemStyle: {
+        color: "transparent",
+      },
+    });
+
+    if (depth === 0) {
+      return levels;
+    }
+
+    // Distribute remaining radius among data levels using weighted distribution
+    // First level gets most space, each subsequent level gets progressively smaller
+    const weights = Array.from({ length: depth }, (_, i) => depth - i);
+    const totalWeight = weights.reduce((sum, w) => sum + w, 0);
+
+    let currentRadius = rootRadius;
+    for (let i = 0; i < depth; i++) {
+      const levelRadius = (weights[i] / totalWeight) * availableRadius;
+      const r0 = currentRadius;
+      const r = currentRadius + levelRadius;
+      currentRadius = r;
+
+      levels.push({
+        r0: `${r0}%`,
+        r: `${r}%`,
+        // Show labels only on first level
+        ...(i === 0 ? { label: { show: true } } : {}),
+      });
+    }
+
+    return levels;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      flex: 1;
+    }
+    ha-chart-base {
+      width: 100%;
+      height: 100%;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-sunburst-chart": HaSunburstChart;
+  }
+}

src/components/chart/statistics-chart.ts

@@ -184,17 +184,11 @@ export class StatisticsChart extends LitElement {
   }
 
   private _datasetHidden(ev: CustomEvent) {
-    if (!this._legendData) {
-      return;
-    }
     this._hiddenStats.add(ev.detail.id);
     this.requestUpdate("_hiddenStats");
   }
 
   private _datasetUnhidden(ev: CustomEvent) {
-    if (!this._legendData) {
-      return;
-    }
     this._hiddenStats.delete(ev.detail.id);
     this.requestUpdate("_hiddenStats");
   }
@@ -521,7 +515,9 @@ export class StatisticsChart extends LitElement {
                   `ui.components.statistics_charts.statistic_types.${type}`
                 ),
             symbol: "none",
-            sampling: "minmax",
+            // minmax sampling operates independently per series, breaking stacking alignment
+            // https://github.com/apache/echarts/issues/11879
+            sampling: band && drawBands ? "lttb" : "minmax",
             animationDurationUpdate: 0,
             lineStyle: {
               width: 1.5,
@@ -539,10 +535,17 @@ export class StatisticsChart extends LitElement {
           if (band && this.chartType === "line") {
             series.stack = `band-${statistic_id}`;
             series.stackStrategy = "all";
-            if (drawBands && type === bandTop) {
-              (series as LineSeriesOption).areaStyle = {
-                color: color + "3F",
-              };
+            if (this._hiddenStats.has(`${statistic_id}-${bandBottom}`)) {
+              // changing the stackOrder forces echarts to render the stacked series that are not hidden #28472
+              series.stackOrder = "seriesDesc";
+              (series as LineSeriesOption).areaStyle = undefined;
+            } else {
+              series.stackOrder = "seriesAsc";
+              if (drawBands && type === bandTop) {
+                (series as LineSeriesOption).areaStyle = {
+                  color: color + "3F",
+                };
+              }
             }
           }
           if (!this.hideLegend) {
@@ -586,7 +589,8 @@ export class StatisticsChart extends LitElement {
           } else if (
             type === bandTop &&
             this.chartType === "line" &&
-            drawBands
+            drawBands &&
+            !this._hiddenStats.has(`${statistic_id}-${bandBottom}`)
           ) {
             const top = stat[bandTop] || 0;
             val.push(Math.abs(top - (stat[bandBottom] || 0)));

src/components/chart/timeline-color.ts

@@ -3,11 +3,11 @@ import { getGraphColorByIndex } from "../../common/color/colors";
 import { hex2rgb, lab2hex, rgb2lab } from "../../common/color/convert-color";
 import { labBrighten } from "../../common/color/lab";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { stateColorProperties } from "../../common/entity/state_color";
-import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
-import { computeCssValue } from "../../resources/css-variables";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { FIXED_DOMAIN_STATES } from "../../common/entity/get_states";
+import { stateColorProperties } from "../../common/entity/state_color";
+import { UNAVAILABLE, UNKNOWN } from "../../data/entity/entity";
+import { computeCssValue } from "../../resources/css-variables";
 
 const DOMAIN_STATE_SHADES: Record<string, Record<string, number>> = {
   media_player: {

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

@@ -6,7 +6,7 @@ import { computeCssColor } from "../../common/color/compute-color";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import { stringCompare } from "../../common/string/compare";
-import type { LabelRegistryEntry } from "../../data/label_registry";
+import type { LabelRegistryEntry } from "../../data/label/label_registry";
 import "../chips/ha-chip-set";
 import "../ha-dropdown";
 import "../ha-dropdown-item";

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

@@ -16,8 +16,10 @@ import memoizeOne from "memoize-one";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stringCompare } from "../../common/string/compare";
+import type { LocalizeFunc } from "../../common/translations/localize";
 import { debounce } from "../../common/util/debounce";
 import { groupBy } from "../../common/util/group-by";
+import { nextRender } from "../../common/util/render-status";
 import { haStyleScrollbar } from "../../resources/styles";
 import { loadVirtualizer } from "../../resources/virtualizer";
 import type { HomeAssistant } from "../../types";
@@ -26,8 +28,6 @@ import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-svg-icon";
 import "../search-input";
 import { filterData, sortData } from "./sort-filter";
-import type { LocalizeFunc } from "../../common/translations/localize";
-import { nextRender } from "../../common/util/render-status";
 
 export interface RowClickedEvent {
   id: string;

src/components/data-table/sort-filter-worker.ts

@@ -1,9 +1,9 @@
 import { expose } from "comlink";
-import Fuse from "fuse.js";
+import Fuse, { type FuseOptionKey } from "fuse.js";
 import memoizeOne from "memoize-one";
 import { ipCompare, stringCompare } from "../../common/string/compare";
 import { stripDiacritics } from "../../common/string/strip-diacritics";
-import { HaFuse } from "../../resources/fuse";
+import { multiTermSearch } from "../../resources/fuseMultiTerm";
 import type {
   ClonedDataTableColumnData,
   DataTableRowData,
@@ -11,9 +11,10 @@ import type {
   SortingDirection,
 } from "./ha-data-table";
 
-const fuseIndex = memoizeOne(
-  (data: DataTableRowData[], columns: SortableColumnContainer) => {
+const getSearchKeys = memoizeOne(
+  (columns: SortableColumnContainer): FuseOptionKey<DataTableRowData>[] => {
     const searchKeys = new Set<string>();
+
     Object.entries(columns).forEach(([key, column]) => {
       if (column.filterable) {
         searchKeys.add(
@@ -23,10 +24,15 @@ const fuseIndex = memoizeOne(
         );
       }
     });
-    return Fuse.createIndex([...searchKeys], data);
+    return Array.from(searchKeys);
   }
 );
 
+const fuseIndex = memoizeOne(
+  (data: DataTableRowData[], keys: FuseOptionKey<DataTableRowData>[]) =>
+    Fuse.createIndex(keys, data)
+);
+
 const filterData = (
   data: DataTableRowData[],
   columns: SortableColumnContainer,
@@ -38,21 +44,13 @@ const filterData = (
     return data;
   }
 
-  const index = fuseIndex(data, columns);
+  const keys = getSearchKeys(columns);
 
-  const fuse = new HaFuse(
-    data,
-    { shouldSort: false, minMatchCharLength: 1 },
-    index
-  );
+  const index = fuseIndex(data, keys);
 
-  const searchResults = fuse.multiTermsSearch(filter);
-
-  if (searchResults) {
-    return searchResults.map((result) => result.item);
-  }
-
-  return data;
+  return multiTermSearch<DataTableRowData>(data, filter, keys, index, {
+    threshold: 0.2, // reduce fuzzy matches in data tables
+  });
 };
 
 const sortData = (

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

@@ -1,9 +1,9 @@
 import { customElement } from "lit/decorators";
-import type { DeviceAction } from "../../data/device_automation";
+import type { DeviceAction } from "../../data/device/device_automation";
 import {
   fetchDeviceActions,
   localizeDeviceAutomationAction,
-} from "../../data/device_automation";
+} from "../../data/device/device_automation";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-action-picker")

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

@@ -2,17 +2,17 @@ import { consume } from "@lit/context";
 import { css, html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import { stopPropagation } from "../../common/dom/stop_propagation";
 import { fullEntitiesContext } from "../../data/context";
-import type { DeviceAutomation } from "../../data/device_automation";
+import type { DeviceAutomation } from "../../data/device/device_automation";
 import {
   deviceAutomationsEqual,
   sortDeviceAutomations,
-} from "../../data/device_automation";
-import type { EntityRegistryEntry } from "../../data/entity_registry";
+} from "../../data/device/device_automation";
+import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
 import type { HomeAssistant } from "../../types";
-import "../ha-md-select-option";
 import "../ha-md-select";
-import { stopPropagation } from "../../common/dom/stop_propagation";
+import "../ha-md-select-option";
 
 const NO_AUTOMATION_KEY = "NO_AUTOMATION";
 const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";

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

@@ -1,9 +1,9 @@
 import { customElement } from "lit/decorators";
-import type { DeviceCondition } from "../../data/device_automation";
+import type { DeviceCondition } from "../../data/device/device_automation";
 import {
   fetchDeviceConditions,
   localizeDeviceAutomationCondition,
-} from "../../data/device_automation";
+} from "../../data/device/device_automation";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-condition-picker")

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

@@ -9,10 +9,11 @@ import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { getDeviceContext } from "../../common/entity/context/get_device_context";
 import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
 import {
+  deviceComboBoxKeys,
   getDevices,
   type DevicePickerItem,
-  type DeviceRegistryEntry,
-} from "../../data/device_registry";
+} from "../../data/device/device_picker";
+import type { DeviceRegistryEntry } from "../../data/device/device_registry";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";
 import "../ha-generic-picker";
@@ -216,6 +217,10 @@ export class HaDevicePicker extends LitElement {
         .getItems=${this._getItems}
         .hideClearIcon=${this.hideClearIcon}
         .valueRenderer=${valueRenderer}
+        .searchKeys=${deviceComboBoxKeys}
+        .unknownItemText=${this.hass.localize(
+          "ui.components.device-picker.unknown"
+        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

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

@@ -1,9 +1,9 @@
 import { customElement } from "lit/decorators";
-import type { DeviceTrigger } from "../../data/device_automation";
+import type { DeviceTrigger } from "../../data/device/device_automation";
 import {
   fetchDeviceTriggers,
   localizeDeviceAutomationTrigger,
-} from "../../data/device_automation";
+} from "../../data/device/device_automation";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-trigger-picker")

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

@@ -4,7 +4,7 @@ import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-sortable";
 import "./ha-entity-picker";
@@ -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-picker.ts

@@ -7,11 +7,12 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { computeEntityNameList } from "../../common/entity/compute_entity_name_display";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import { computeRTL } from "../../common/util/compute_rtl";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import {
+  entityComboBoxKeys,
   getEntities,
   type EntityComboBoxItem,
-} from "../../data/entity_registry";
+} from "../../data/entity/entity_picker";
 import { domainToName } from "../../data/integration";
 import {
   isHelperDomain,
@@ -227,7 +228,7 @@ export class HaEntityPicker extends LitElement {
       if (!createDomains?.length) {
         return [];
       }
-
+      this.hass.loadFragmentTranslation("config");
       return createDomains.map((domain) => {
         const primary = localize(
           "ui.components.entity.entity-picker.create_helper",
@@ -235,7 +236,7 @@ export class HaEntityPicker extends LitElement {
             domain: isHelperDomain(domain)
               ? localize(
                   `ui.panel.config.helpers.types.${domain as HelperDomain}`
-                )
+                ) || domain
               : domainToName(localize, domain),
           }
         );
@@ -288,10 +289,14 @@ export class HaEntityPicker extends LitElement {
         .hideClearIcon=${this.hideClearIcon}
         .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
-        @value-changed=${this._valueChanged}
+        .searchKeys=${entityComboBoxKeys}
         .addButtonLabel=${this.addButton
           ? this.hass.localize("ui.components.entity.entity-picker.add")
           : undefined}
+        .unknownItemText=${this.hass.localize(
+          "ui.components.entity.entity-picker.unknown"
+        )}
+        @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>
     `;

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

@@ -6,7 +6,11 @@ import { customElement, property, state } from "lit/decorators";
 import { STATES_OFF } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { UNAVAILABLE, UNKNOWN, isUnavailableState } from "../../data/entity";
+import {
+  UNAVAILABLE,
+  UNKNOWN,
+  isUnavailableState,
+} from "../../data/entity/entity";
 import { forwardHaptic } from "../../data/haptics";
 import type { HomeAssistant } from "../../types";
 import "../ha-formfield";

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

@@ -14,8 +14,12 @@ import {
   getNumberFormatOptions,
   isNumericState,
 } from "../../common/number/format_number";
-import { isUnavailableState, UNAVAILABLE, UNKNOWN } from "../../data/entity";
-import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
+import {
+  isUnavailableState,
+  UNAVAILABLE,
+  UNKNOWN,
+} from "../../data/entity/entity";
+import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import { timerTimeRemaining } from "../../data/timer";
 import type { HomeAssistant } from "../../types";
 import "../ha-label-badge";

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

@@ -38,9 +38,21 @@ type StatisticItemType = "entity" | "external" | "no_state";
 interface StatisticComboBoxItem extends PickerComboBoxItem {
   statistic_id?: string;
   stateObj?: HassEntity;
+  domainName?: string;
   type?: StatisticItemType;
 }
 
+const SEARCH_KEYS = [
+  { name: "label", weight: 10 },
+  { name: "search_labels.entityName", weight: 10 },
+  { name: "search_labels.friendlyName", weight: 9 },
+  { name: "search_labels.deviceName", weight: 8 },
+  { name: "search_labels.areaName", weight: 6 },
+  { name: "search_labels.domainName", weight: 4 },
+  { name: "statisticId", weight: 3 },
+  { name: "id", weight: 2 },
+];
+
 @customElement("ha-statistic-picker")
 export class HaStatisticPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -233,7 +245,6 @@ export class HaStatisticPicker extends LitElement {
                 ),
                 type,
                 sorting_label: [sortingPrefix, label].join("_"),
-                search_labels: [label, id],
                 icon_path: mdiShape,
               });
             } else if (type === "external") {
@@ -246,7 +257,7 @@ export class HaStatisticPicker extends LitElement {
                 secondary: domainName,
                 type,
                 sorting_label: [sortingPrefix, label].join("_"),
-                search_labels: [label, domainName, id],
+                search_labels: { label, domainName },
                 icon_path: mdiChartLine,
               });
             }
@@ -280,13 +291,12 @@ export class HaStatisticPicker extends LitElement {
           stateObj: stateObj,
           type: "entity",
           sorting_label: [sortingPrefix, deviceName, entityName].join("_"),
-          search_labels: [
-            entityName,
-            deviceName,
-            areaName,
+          search_labels: {
+            entityName: entityName || null,
+            deviceName: deviceName || null,
+            areaName: areaName || null,
             friendlyName,
-            id,
-          ].filter(Boolean) as string[],
+          },
         });
       });
 
@@ -361,13 +371,13 @@ export class HaStatisticPicker extends LitElement {
         stateObj: stateObj,
         type: "entity",
         sorting_label: [sortingPrefix, deviceName, entityName].join("_"),
-        search_labels: [
-          entityName,
-          deviceName,
-          areaName,
+        search_labels: {
+          entityName: entityName || null,
+          deviceName: deviceName || null,
+          areaName: areaName || null,
           friendlyName,
           statisticId,
-        ].filter(Boolean) as string[],
+        },
       };
     }
 
@@ -394,7 +404,7 @@ export class HaStatisticPicker extends LitElement {
           secondary: domainName,
           type: "external",
           sorting_label: [sortingPrefix, label].join("_"),
-          search_labels: [label, domainName, statisticId],
+          search_labels: { label, domainName, statisticId },
           icon_path: mdiChartLine,
         };
       }
@@ -409,7 +419,7 @@ export class HaStatisticPicker extends LitElement {
       secondary: this.hass.localize("ui.components.statistic-picker.no_state"),
       type: "no_state",
       sorting_label: [sortingPrefix, label].join("_"),
-      search_labels: [label, statisticId],
+      search_labels: { label, statisticId },
       icon_path: mdiShape,
     };
   }
@@ -475,6 +485,10 @@ export class HaStatisticPicker extends LitElement {
         .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
         .helper=${this.helper}
+        .searchKeys=${SEARCH_KEYS}
+        .unknownItemText=${this.hass.localize(
+          "ui.components.statistic-picker.unknown"
+        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

src/components/ha-area-floor-picker.ts

@@ -1,270 +0,0 @@
-import { 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, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../common/dom/fire_event";
-import { computeAreaName } from "../common/entity/compute_area_name";
-import { computeFloorName } from "../common/entity/compute_floor_name";
-import { computeRTL } from "../common/util/compute_rtl";
-import {
-  getAreasAndFloors,
-  type AreaFloorValue,
-  type FloorComboBoxItem,
-} from "../data/area_floor";
-import type { HomeAssistant, ValueChangedEvent } from "../types";
-import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import "./ha-combo-box-item";
-import "./ha-floor-icon";
-import "./ha-generic-picker";
-import type { HaGenericPicker } from "./ha-generic-picker";
-import "./ha-icon-button";
-import type { PickerValueRenderer } from "./ha-picker-field";
-import "./ha-svg-icon";
-import "./ha-tree-indicator";
-
-const SEPARATOR = "________";
-
-@customElement("ha-area-floor-picker")
-export class HaAreaFloorPicker extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public label?: string;
-
-  @property({ attribute: false }) public value?: AreaFloorValue;
-
-  @property() public helper?: string;
-
-  @property() public placeholder?: string;
-
-  @property({ type: String, attribute: "search-label" })
-  public searchLabel?: string;
-
-  /**
-   * Show only areas with entities from specific domains.
-   * @type {Array}
-   * @attr include-domains
-   */
-  @property({ type: Array, attribute: "include-domains" })
-  public includeDomains?: string[];
-
-  /**
-   * Show no areas with entities of these domains.
-   * @type {Array}
-   * @attr exclude-domains
-   */
-  @property({ type: Array, attribute: "exclude-domains" })
-  public excludeDomains?: string[];
-
-  /**
-   * Show only areas with entities of these device classes.
-   * @type {Array}
-   * @attr include-device-classes
-   */
-  @property({ type: Array, attribute: "include-device-classes" })
-  public includeDeviceClasses?: string[];
-
-  /**
-   * List of areas to be excluded.
-   * @type {Array}
-   * @attr exclude-areas
-   */
-  @property({ type: Array, attribute: "exclude-areas" })
-  public excludeAreas?: string[];
-
-  /**
-   * List of floors to be excluded.
-   * @type {Array}
-   * @attr exclude-floors
-   */
-  @property({ type: Array, attribute: "exclude-floors" })
-  public excludeFloors?: string[];
-
-  @property({ attribute: false })
-  public deviceFilter?: HaDevicePickerDeviceFilterFunc;
-
-  @property({ attribute: false })
-  public entityFilter?: (entity: HassEntity) => boolean;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
-  @query("ha-generic-picker") private _picker?: HaGenericPicker;
-
-  public async open() {
-    await this.updateComplete;
-    await this._picker?.open();
-  }
-
-  private _valueRenderer: PickerValueRenderer = (value: string) => {
-    const item = this._parseValue(value);
-
-    const area = item.type === "area" && this.hass.areas[value];
-
-    if (area) {
-      const areaName = computeAreaName(area);
-      return html`
-        ${area.icon
-          ? html`<ha-icon slot="start" .icon=${area.icon}></ha-icon>`
-          : html`<ha-svg-icon
-              slot="start"
-              .path=${mdiTextureBox}
-            ></ha-svg-icon>`}
-        <slot name="headline">${areaName}</slot>
-      `;
-    }
-
-    const floor = item.type === "floor" && this.hass.floors[value];
-
-    if (floor) {
-      const floorName = computeFloorName(floor);
-      return html`
-        <ha-floor-icon slot="start" .floor=${floor}></ha-floor-icon>
-        <span slot="headline">${floorName}</span>
-      `;
-    }
-
-    return html`
-      <ha-svg-icon slot="start" .path=${mdiTextureBox}></ha-svg-icon>
-      <span slot="headline">${value}</span>
-    `;
-  };
-
-  private _rowRenderer: ComboBoxLitRenderer<FloorComboBoxItem> = (
-    item,
-    { index },
-    combobox
-  ) => {
-    const nextItem = combobox.filteredItems?.[index + 1];
-    const isLastArea =
-      !nextItem ||
-      nextItem.type === "floor" ||
-      (nextItem.type === "area" && !nextItem.area?.floor_id);
-
-    const rtl = computeRTL(this.hass);
-
-    const hasFloor = item.type === "area" && item.area?.floor_id;
-
-    return html`
-      <ha-combo-box-item
-        type="button"
-        style=${item.type === "area" && hasFloor
-          ? "--md-list-item-leading-space: 48px;"
-          : ""}
-      >
-        ${item.type === "area" && hasFloor
-          ? html`
-              <ha-tree-indicator
-                style=${styleMap({
-                  width: "48px",
-                  position: "absolute",
-                  top: "0px",
-                  left: rtl ? undefined : "4px",
-                  right: rtl ? "4px" : undefined,
-                  transform: rtl ? "scaleX(-1)" : "",
-                })}
-                .end=${isLastArea}
-                slot="start"
-              ></ha-tree-indicator>
-            `
-          : nothing}
-        ${item.type === "floor" && item.floor
-          ? html`<ha-floor-icon
-              slot="start"
-              .floor=${item.floor}
-            ></ha-floor-icon>`
-          : item.icon
-            ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
-            : html`<ha-svg-icon
-                slot="start"
-                .path=${item.icon_path || mdiTextureBox}
-              ></ha-svg-icon>`}
-        ${item.primary}
-      </ha-combo-box-item>
-    `;
-  };
-
-  private _getAreasAndFloorsMemoized = memoizeOne(getAreasAndFloors);
-
-  private _getItems = () =>
-    this._getAreasAndFloorsMemoized(
-      this.hass.states,
-      this.hass.floors,
-      this.hass.areas,
-      this.hass.devices,
-      this.hass.entities,
-      this._formatValue,
-      this.includeDomains,
-      this.excludeDomains,
-      this.includeDeviceClasses,
-      this.deviceFilter,
-      this.entityFilter,
-      this.excludeAreas,
-      this.excludeFloors
-    );
-
-  private _formatValue = memoizeOne((value: AreaFloorValue): string =>
-    [value.type, value.id].join(SEPARATOR)
-  );
-
-  private _parseValue = memoizeOne((value: string): AreaFloorValue => {
-    const [type, id] = value.split(SEPARATOR);
-
-    return { id, type: type as "floor" | "area" };
-  });
-
-  protected render(): TemplateResult {
-    const placeholder =
-      this.placeholder ?? this.hass.localize("ui.components.area-picker.area");
-
-    const value = this.value ? this._formatValue(this.value) : undefined;
-
-    return html`
-      <ha-generic-picker
-        .hass=${this.hass}
-        .autofocus=${this.autofocus}
-        .label=${this.label}
-        .searchLabel=${this.searchLabel}
-        .notFoundLabel=${this.hass.localize(
-          "ui.components.area-picker.no_match"
-        )}
-        .placeholder=${placeholder}
-        .value=${value}
-        .getItems=${this._getItems}
-        .valueRenderer=${this._valueRenderer}
-        .rowRenderer=${this._rowRenderer}
-        @value-changed=${this._valueChanged}
-      >
-      </ha-generic-picker>
-    `;
-  }
-
-  private _valueChanged(ev: ValueChangedEvent<string>) {
-    ev.stopPropagation();
-    const value = ev.detail.value;
-
-    if (!value) {
-      this._setValue(undefined);
-      return;
-    }
-
-    const selected = this._parseValue(value);
-    this._setValue(selected);
-  }
-
-  private _setValue(value?: AreaFloorValue) {
-    this.value = value;
-    fireEvent(this, "value-changed", { value });
-    fireEvent(this, "change");
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-area-floor-picker": HaAreaFloorPicker;
-  }
-}

src/components/ha-area-picker.ts

@@ -13,9 +13,9 @@ import { createAreaRegistryEntry } from "../data/area_registry";
 import type {
   DeviceEntityDisplayLookup,
   DeviceRegistryEntry,
-} from "../data/device_registry";
-import { getDeviceEntityDisplayLookup } from "../data/device_registry";
-import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
+} from "../data/device/device_registry";
+import { getDeviceEntityDisplayLookup } from "../data/device/device_registry";
+import type { EntityRegistryDisplayEntry } from "../data/entity/entity_registry";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { showAreaRegistryDetailDialog } from "../panels/config/areas/show-dialog-area-registry-detail";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
@@ -30,6 +30,12 @@ import "./ha-svg-icon";
 
 const ADD_NEW_ID = "___ADD_NEW___";
 
+const SEARCH_KEYS = [
+  { name: "search_labels.areaName", weight: 10 },
+  { name: "search_labels.aliases", weight: 8 },
+  { name: "search_labels.floorName", weight: 6 },
+  { name: "search_labels.id", weight: 3 },
+];
 @customElement("ha-area-picker")
 export class HaAreaPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -45,6 +51,9 @@ 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}
@@ -290,13 +299,12 @@ export class HaAreaPicker extends LitElement {
           secondary: floorName,
           icon: area.icon || undefined,
           icon_path: area.icon ? undefined : mdiTextureBox,
-          sorting_label: areaName,
-          search_labels: [
-            areaName,
-            floorName,
-            area.area_id,
-            ...area.aliases,
-          ].filter((v): v is string => Boolean(v)),
+          search_labels: {
+            areaName: areaName || null,
+            floorName: floorName || null,
+            id: area.area_id,
+            aliases: area.aliases.join(" "),
+          },
         };
       });
 
@@ -360,9 +368,17 @@ export class HaAreaPicker extends LitElement {
   protected render(): TemplateResult {
     const placeholder =
       this.placeholder ?? this.hass.localize("ui.components.area-picker.area");
-
     const valueRenderer = this._computeValueRenderer(this.hass.areas);
 
+    let showLabel = this.showLabel;
+    if (this.value) {
+      const area = this.hass.areas[this.value];
+      if (area) {
+        const { floor } = getAreaContext(area, this.hass.floors);
+        showLabel = !floor && this.showLabel;
+      }
+    }
+
     return html`
       <ha-generic-picker
         .hass=${this.hass}
@@ -374,11 +390,16 @@ export class HaAreaPicker extends LitElement {
         .disabled=${this.disabled}
         .required=${this.required}
         .placeholder=${placeholder}
+        .showLabel=${showLabel}
         .value=${this.value}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
         .valueRenderer=${valueRenderer}
         .addButtonLabel=${this.addButtonLabel}
+        .searchKeys=${SEARCH_KEYS}
+        .unknownItemText=${this.hass.localize(
+          "ui.components.area-picker.unknown"
+        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

src/components/ha-assist-chat.ts

@@ -659,7 +659,7 @@ export class HaAssistChat extends LitElement {
       --markdown-table-border-color: var(--divider-color);
       --markdown-code-background-color: var(--primary-background-color);
       --markdown-code-text-color: var(--primary-text-color);
-      --markdown-list-indent: 1rem;
+      --markdown-list-indent: 1.15em;
       &:not(:has(ha-markdown-element)) {
         min-height: 1lh;
         min-width: 1lh;

src/components/ha-attributes.ts

@@ -3,15 +3,15 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeAttributeNameDisplay } from "../common/entity/compute_attribute_display";
+import { computeStateDomain } from "../common/entity/compute_state_domain";
 import {
   STATE_ATTRIBUTES,
   STATE_ATTRIBUTES_DOMAIN_CLASS,
-} from "../data/entity_attributes";
+} from "../data/entity/entity_attributes";
 import { haStyle } from "../resources/styles";
 import type { HomeAssistant } from "../types";
 import "./ha-attribute-value";
 import "./ha-expansion-panel";
-import { computeStateDomain } from "../common/entity/compute_state_domain";
 
 @customElement("ha-attributes")
 class HaAttributes extends LitElement {

src/components/ha-automation-row.ts

@@ -52,7 +52,9 @@ export class HaAutomationRow extends LitElement {
           <slot name="leading-icon"></slot>
         </div>
         <slot class="header" name="header"></slot>
-        <slot name="icons"></slot>
+        <div class="icons">
+          <slot name="icons"></slot>
+        </div>
       </div>
     `;
   }
@@ -118,12 +120,11 @@ export class HaAutomationRow extends LitElement {
     }
     .row {
       display: flex;
-      padding: var(--ha-space-0) var(--ha-space-2);
+      padding: 0 var(--ha-space-3);
       min-height: 48px;
-      align-items: center;
+      align-items: flex-start;
       cursor: pointer;
       overflow: hidden;
-      font-weight: var(--ha-font-weight-medium);
       outline: none;
       border-radius: var(--ha-card-border-radius, var(--ha-border-radius-lg));
     }
@@ -140,11 +141,15 @@ export class HaAutomationRow extends LitElement {
       background-color: var(--ha-color-fill-neutral-loud-resting);
       border-radius: var(--ha-border-radius-md);
       padding: var(--ha-space-1);
+      margin-top: 10px;
       display: flex;
       justify-content: center;
       align-items: center;
       transform: rotate(45deg);
     }
+    .leading-icon-wrapper {
+      padding-top: var(--ha-space-3);
+    }
     ::slotted([slot="leading-icon"]) {
       color: var(--ha-color-on-neutral-quiet);
     }
@@ -172,6 +177,10 @@ export class HaAutomationRow extends LitElement {
       overflow-wrap: anywhere;
       margin: var(--ha-space-0) var(--ha-space-3);
     }
+    .icons {
+      display: flex;
+      align-items: center;
+    }
     :host([sort-selected]) .row {
       outline: solid;
       outline-color: rgba(var(--rgb-accent-color), 0.6);

src/components/ha-climate-state.ts

@@ -3,7 +3,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import type { ClimateEntity } from "../data/climate";
 import { CLIMATE_PRESET_NONE } from "../data/climate";
-import { isUnavailableState, OFF } from "../data/entity";
+import { isUnavailableState, OFF } from "../data/entity/entity";
 import type { HomeAssistant } from "../types";
 
 @customElement("ha-climate-state")

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

@@ -20,6 +20,17 @@ export class HaComboBoxItem extends HaMdListItem {
       [slot="start"] {
         --state-icon-color: var(--secondary-text-color);
       }
+      [slot="overline"] {
+        /* mimicing a floating label of mdc-select */
+        line-height: 1.15rem;
+        font-size: calc(var(--mdc-typography-subtitle1-font-size, 1rem) * 0.75);
+        font-weight: var(--mdc-typography-subtitle1-font-weight, 400);
+        font-family: var(
+          --mdc-typography-subtitle1-font-family,
+          var(--mdc-typography-font-family)
+        );
+        color: var(--mdc-select-label-ink-color, rgba(0, 0, 0, 0.6));
+      }
       [slot="headline"] {
         line-height: var(--ha-line-height-normal);
         font-size: var(--ha-font-size-m);

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

@@ -9,14 +9,14 @@ import type { ConfigEntry, SubEntry } from "../data/config_entries";
 import { getConfigEntry, getSubEntries } from "../data/config_entries";
 import type { Agent } from "../data/conversation";
 import { listAgents } from "../data/conversation";
+import { getExtendedEntityRegistryEntry } from "../data/entity/entity_registry";
 import { fetchIntegrationManifest } from "../data/integration";
 import { showOptionsFlowDialog } from "../dialogs/config-flow/show-dialog-options-flow";
+import { showSubConfigFlowDialog } from "../dialogs/config-flow/show-dialog-sub-config-flow";
 import type { HomeAssistant } from "../types";
 import "./ha-list-item";
 import "./ha-select";
 import type { HaSelect } from "./ha-select";
-import { getExtendedEntityRegistryEntry } from "../data/entity_registry";
-import { showSubConfigFlowDialog } from "../dialogs/config-flow/show-dialog-sub-config-flow";
 
 const NONE = "__NONE_OPTION__";
 

src/components/ha-domain-icon.ts

@@ -47,6 +47,7 @@ export class HaDomainIcon extends LitElement {
       if (icn) {
         return html`<ha-icon .icon=${icn}></ha-icon>`;
       }
+
       return this._renderFallback();
     });
 

src/components/ha-dropdown-item.ts

@@ -1,6 +1,9 @@
 import DropdownItem from "@home-assistant/webawesome/dist/components/dropdown-item/dropdown-item";
-import { css, type CSSResultGroup } from "lit";
+import "@home-assistant/webawesome/dist/components/icon/icon";
+import { css, type CSSResultGroup, html } from "lit";
 import { customElement } from "lit/decorators";
+import "./ha-svg-icon";
+import { mdiCheckboxBlankOutline, mdiCheckboxMarked } from "@mdi/js";
 
 /**
  * Home Assistant dropdown item component
@@ -14,6 +17,16 @@ import { customElement } from "lit/decorators";
  */
 @customElement("ha-dropdown-item")
 export class HaDropdownItem extends DropdownItem {
+  protected renderCheckboxIcon() {
+    return html`
+      <ha-svg-icon
+        id="check"
+        part="checkmark"
+        .path=${this.checked ? mdiCheckboxMarked : mdiCheckboxBlankOutline}
+      ></ha-svg-icon>
+    `;
+  }
+
   static get styles(): CSSResultGroup {
     return [
       DropdownItem.styles,
@@ -22,6 +35,10 @@ export class HaDropdownItem extends DropdownItem {
           min-height: var(--ha-space-10);
         }
 
+        #check {
+          visibility: visible;
+        }
+
         #icon ::slotted(*) {
           color: var(--ha-color-on-neutral-normal);
         }

src/components/ha-filter-labels.ts

@@ -10,8 +10,8 @@ import { computeCssColor } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import { navigate } from "../common/navigate";
 import { stringCompare } from "../common/string/compare";
-import type { LabelRegistryEntry } from "../data/label_registry";
-import { subscribeLabelRegistry } from "../data/label_registry";
+import type { LabelRegistryEntry } from "../data/label/label_registry";
+import { subscribeLabelRegistry } from "../data/label/label_registry";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";

src/components/ha-floor-picker.ts

@@ -12,9 +12,9 @@ import { updateAreaRegistryEntry } from "../data/area_registry";
 import type {
   DeviceEntityDisplayLookup,
   DeviceRegistryEntry,
-} from "../data/device_registry";
-import { getDeviceEntityDisplayLookup } from "../data/device_registry";
-import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
+} from "../data/device/device_registry";
+import { getDeviceEntityDisplayLookup } from "../data/device/device_registry";
+import type { EntityRegistryDisplayEntry } from "../data/entity/entity_registry";
 import {
   createFloorRegistryEntry,
   getFloorAreaLookup,
@@ -35,6 +35,12 @@ import "./ha-svg-icon";
 
 const ADD_NEW_ID = "___ADD_NEW___";
 
+const SEARCH_KEYS = [
+  { name: "search_labels.floorName", weight: 10 },
+  { name: "search_labels.aliases", weight: 8 },
+  { name: "search_labels.floor_id", weight: 3 },
+];
+
 interface FloorComboBoxItem extends PickerComboBoxItem {
   floor?: FloorRegistryEntry;
 }
@@ -285,10 +291,11 @@ export class HaFloorPicker extends LitElement {
           id: floor.floor_id,
           primary: floorName,
           floor: floor,
-          sorting_label: floor.level?.toString() || "zzzzz",
-          search_labels: [floorName, floor.floor_id, ...floor.aliases].filter(
-            (v): v is string => Boolean(v)
-          ),
+          search_labels: {
+            floorName,
+            floor_id: floor.floor_id,
+            aliases: floor.aliases.join(" "),
+          },
         };
       });
 
@@ -393,6 +400,10 @@ export class HaFloorPicker extends LitElement {
         .getAdditionalItems=${this._getAdditionalItems}
         .valueRenderer=${valueRenderer}
         .rowRenderer=${this._rowRenderer}
+        .searchKeys=${SEARCH_KEYS}
+        .unknownItemText=${this.hass.localize(
+          "ui.components.floor-picker.unknown"
+        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

src/components/ha-generic-picker.ts

@@ -4,8 +4,10 @@ import { mdiPlaylistPlus } from "@mdi/js";
 import { css, html, LitElement, nothing, type CSSResultGroup } 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 type { FuseWeightedKey } from "../resources/fuseMultiTerm";
 import type { HomeAssistant } from "../types";
 import "./ha-bottom-sheet";
 import "./ha-button";
@@ -46,8 +48,12 @@ export class HaGenericPicker extends LitElement {
   @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?: (
+  public getItems!: (
     searchString?: string,
     section?: string
   ) => (PickerComboBoxItem | string)[];
@@ -64,6 +70,9 @@ export class HaGenericPicker extends LitElement {
   @property({ attribute: false })
   public searchFn?: PickerComboBoxSearchFn<PickerComboBoxItem>;
 
+  @property({ attribute: false })
+  public searchKeys?: FuseWeightedKey[];
+
   @property({ attribute: false })
   public notFoundLabel?: string | ((search: string) => string);
 
@@ -107,6 +116,11 @@ export class HaGenericPicker extends LitElement {
 
   @property({ attribute: "selected-section" }) public selectedSection?: string;
 
+  @property({ attribute: "unknown-item-text" }) public unknownItemText?: string;
+
+  @property({ attribute: "custom-value-label" })
+  public customValueLabel?: string;
+
   @query(".container") private _containerElement?: HTMLDivElement;
 
   @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
@@ -156,10 +170,17 @@ export class HaGenericPicker extends LitElement {
                   type="button"
                   class=${this._opened ? "opened" : ""}
                   compact
+                  .unknown=${this._unknownValue(
+                    this.allowCustomValue,
+                    this.value,
+                    this.getItems()
+                  )}
+                  .unknownItemText=${this.unknownItemText}
                   aria-label=${ifDefined(this.label)}
                   @click=${this.open}
                   @clear=${this._clear}
                   .placeholder=${this.placeholder}
+                  .showLabel=${this.showLabel}
                   .value=${this.value}
                   .required=${this.required}
                   .disabled=${this.disabled}
@@ -229,10 +250,34 @@ export class HaGenericPicker extends LitElement {
         .sections=${this.sections}
         .sectionTitleFunction=${this.sectionTitleFunction}
         .selectedSection=${this.selectedSection}
+        .searchKeys=${this.searchKeys}
+        .customValueLabel=${this.customValueLabel}
       ></ha-picker-combo-box>
     `;
   }
 
+  private _unknownValue = memoizeOne(
+    (
+      allowCustomValue: boolean,
+      value?: string,
+      items?: (PickerComboBoxItem | string)[]
+    ) => {
+      if (
+        allowCustomValue ||
+        value === undefined ||
+        value === null ||
+        value === "" ||
+        !items
+      ) {
+        return false;
+      }
+
+      return !items.some(
+        (item) => typeof item !== "string" && item.id === value
+      );
+    }
+  );
+
   private _renderHelper() {
     return this.helper
       ? html`<ha-input-helper-text .disabled=${this.disabled}
@@ -344,7 +389,10 @@ export class HaGenericPicker extends LitElement {
 
         wa-popover::part(body) {
           width: max(var(--body-width), 250px);
-          max-width: max(var(--body-width), 250px);
+          max-width: var(
+            --ha-generic-picker-max-width,
+            max(var(--body-width), 250px)
+          );
           max-height: 500px;
           height: 70vh;
           overflow: hidden;

src/components/ha-humidifier-state.ts

@@ -1,7 +1,7 @@
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { isUnavailableState, OFF } from "../data/entity";
+import { isUnavailableState, OFF } from "../data/entity/entity";
 import type { HumidifierEntity } from "../data/humidifier";
 import type { HomeAssistant } from "../types";
 

src/components/ha-label-picker.ts

@@ -11,12 +11,12 @@ import {
 } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
-import type { LabelRegistryEntry } from "../data/label_registry";
+import { getLabels, labelComboBoxKeys } from "../data/label/label_picker";
 import {
   createLabelRegistryEntry,
-  getLabels,
   subscribeLabelRegistry,
-} from "../data/label_registry";
+  type LabelRegistryEntry,
+} from "../data/label/label_registry";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { showLabelDetailDialog } from "../panels/config/labels/show-dialog-label-detail";
@@ -237,6 +237,7 @@ export class HaLabelPicker extends SubscribeMixin(LitElement) {
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
         .valueRenderer=${valueRenderer}
+        .searchKeys=${labelComboBoxKeys}
         @value-changed=${this._valueChanged}
       >
         <slot .slot=${this._slotNodes?.length ? "field" : undefined}></slot>

src/components/ha-labels-picker.ts

@@ -8,11 +8,11 @@ import memoizeOne from "memoize-one";
 import { computeCssColor } from "../common/color/compute-color";
 import { fireEvent } from "../common/dom/fire_event";
 import { stringCompare } from "../common/string/compare";
-import type { LabelRegistryEntry } from "../data/label_registry";
+import type { LabelRegistryEntry } from "../data/label/label_registry";
 import {
   subscribeLabelRegistry,
   updateLabelRegistryEntry,
-} from "../data/label_registry";
+} from "../data/label/label_registry";
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { showLabelDetailDialog } from "../panels/config/labels/show-dialog-label-detail";
 import type { HomeAssistant, ValueChangedEvent } from "../types";

src/components/ha-language-picker.ts

@@ -40,14 +40,12 @@ export const getLanguageOptions = (
       return {
         id: lang,
         primary,
-        search_labels: [primary],
       };
     });
   } else if (locale) {
     options = languages.map((lang) => ({
       id: lang,
       primary: formatLanguageCode(lang, locale),
-      search_labels: [formatLanguageCode(lang, locale)],
     }));
   }
 
@@ -134,6 +132,7 @@ export class HaLanguagePicker extends LitElement {
         .placeholder=${this.label ??
         (this.hass?.localize("ui.components.language-picker.language") ||
           "Language")}
+        show-label
         .value=${value}
         .valueRenderer=${this._valueRenderer}
         .disabled=${this.disabled}

src/components/ha-markdown.ts

@@ -74,9 +74,6 @@ export class HaMarkdown extends LitElement {
       background-color: var(--markdown-image-background-color);
       border-radius: var(--markdown-image-border-radius);
       max-width: 100%;
-      height: auto;
-      width: auto;
-      transition: height 0.2s ease-in-out;
     }
     p:first-child > img:first-child {
       vertical-align: top;
@@ -84,8 +81,7 @@ export class HaMarkdown extends LitElement {
     p:first-child > img:last-child {
       vertical-align: top;
     }
-    :host > ul,
-    :host > ol {
+    ha-markdown-element > :is(ol, ul) {
       padding-inline-start: var(--markdown-list-indent, revert);
     }
     li {
@@ -136,6 +132,18 @@ export class HaMarkdown extends LitElement {
       border-bottom: none;
       margin: var(--ha-space-4) 0;
     }
+    table[role="presentation"] {
+      --markdown-table-border-collapse: separate;
+      --markdown-table-border-width: attr(border, 0);
+      --markdown-table-padding-inline: 0;
+      --markdown-table-padding-block: 0;
+      th {
+        vertical-align: attr(align, center);
+      }
+      td {
+        vertical-align: attr(align, left);
+      }
+    }
     table {
       border-collapse: var(--markdown-table-border-collapse, collapse);
     }
@@ -143,14 +151,15 @@ export class HaMarkdown extends LitElement {
       overflow: auto;
     }
     th {
-      text-align: start;
+      text-align: var(--markdown-table-text-align, start);
     }
     td,
     th {
       border-width: var(--markdown-table-border-width, 1px);
       border-style: var(--markdown-table-border-style, solid);
       border-color: var(--markdown-table-border-color, var(--divider-color));
-      padding: 0.25em 0.5em;
+      padding-inline: var(--markdown-table-padding-inline, 0.5em);
+      padding-block: var(--markdown-table-padding-block, 0.25em);
     }
     blockquote {
       border-left: 4px solid var(--divider-color);

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,46 @@ 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 primary = getPanelTitle(this.hass, panel) || path;
+      this._navigationItems.push({
+        id: path,
+        primary,
+        secondary: primary ? 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 +138,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 {
@@ -15,7 +15,10 @@ import { tinykeys } from "tinykeys";
 import { fireEvent } from "../common/dom/fire_event";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { ScrollableFadeMixin } from "../mixins/scrollable-fade-mixin";
-import { HaFuse } from "../resources/fuse";
+import {
+  multiTermSortedSearch,
+  type FuseWeightedKey,
+} from "../resources/fuseMultiTerm";
 import { haStyleScrollbar } from "../resources/styles";
 import { loadVirtualizer } from "../resources/virtualizer";
 import type { HomeAssistant } from "../types";
@@ -26,11 +29,26 @@ import "./ha-icon";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
+export const DEFAULT_SEARCH_KEYS: FuseWeightedKey[] = [
+  {
+    name: "primary",
+    weight: 10,
+  },
+  {
+    name: "secondary",
+    weight: 7,
+  },
+  {
+    name: "id",
+    weight: 3,
+  },
+];
+
 export interface PickerComboBoxItem {
   id: string;
   primary: string;
   secondary?: string;
-  search_labels?: string[];
+  search_labels?: Record<string, string | null>;
   sorting_label?: string;
   icon_path?: string;
   icon?: string;
@@ -73,14 +91,20 @@ 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;
 
+  @property({ attribute: false })
+  public searchKeys?: FuseWeightedKey[];
+
   @state() private _listScrolled = false;
 
   @property({ attribute: false })
-  public getItems?: (
+  public getItems!: (
     searchString?: string,
     section?: string
   ) => (PickerComboBoxItem | string)[];
@@ -133,6 +157,8 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
 
   @state() private _sectionTitle?: string;
 
+  @state() private _valuePinned = true;
+
   private _allItems: (PickerComboBoxItem | string)[] = [];
 
   private _selectedItemIndex = -1;
@@ -164,10 +190,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()}
@@ -194,6 +225,15 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
           .renderItem=${this._renderItem}
           style="min-height: 36px;"
           class=${this._listScrolled ? "scrolled" : ""}
+          .layout=${this.value && this._valuePinned
+            ? {
+                pin: {
+                  index: this._getInitialSelectedIndex(),
+                  block: "center",
+                },
+              }
+            : undefined}
+          @unpinned=${this._handleUnpinned}
           @scroll=${this._onScrollList}
           @focus=${this._focusList}
           @visibilityChanged=${this._visibilityChanged}
@@ -244,24 +284,42 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     }
   }
 
+  @eventOptions({ passive: true })
+  private _handleUnpinned() {
+    this._valuePinned = false;
+  }
+
   private _getAdditionalItems = (searchString?: string) =>
     this.getAdditionalItems?.(searchString) || [];
 
   private _getItems = () => {
-    let items = [
-      ...(this.getItems
-        ? this.getItems(this._search, this.selectedSection)
-        : []),
-    ];
+    let items = [...this.getItems(this._search, this.selectedSection)];
 
     if (!this.sections?.length) {
-      items = items.sort((entityA, entityB) =>
-        caseInsensitiveStringCompare(
-          (entityA as PickerComboBoxItem).sorting_label!,
-          (entityB as PickerComboBoxItem).sorting_label!,
+      items = items.sort((entityA, entityB) => {
+        const sortLabelA =
+          typeof entityA === "string" ? entityA : entityA.sorting_label;
+        const sortLabelB =
+          typeof entityB === "string" ? entityB : entityB.sorting_label;
+
+        if (!sortLabelA || !sortLabelB) {
+          return 0;
+        }
+
+        if (!sortLabelB) {
+          return -1;
+        }
+
+        if (!sortLabelA) {
+          return 1;
+        }
+
+        return caseInsensitiveStringCompare(
+          sortLabelA,
+          sortLabelB,
           this.hass?.locale.language ?? navigator.language
-        )
-      );
+        );
+      });
     }
 
     if (!items.length) {
@@ -279,6 +337,9 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
   };
 
   private _renderItem = (item: PickerComboBoxItem | string, index: number) => {
+    if (!item) {
+      return nothing;
+    }
     if (item === "padding") {
       return html`<div class="bottom-padding"></div>`;
     }
@@ -339,8 +400,9 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     fireEvent(this, "value-changed", { value: newValue });
   };
 
-  private _fuseIndex = memoizeOne((states: PickerComboBoxItem[]) =>
-    Fuse.createIndex(["search_labels"], states)
+  private _fuseIndex = memoizeOne(
+    (states: PickerComboBoxItem[], searchKeys?: FuseWeightedKey[]) =>
+      Fuse.createIndex(searchKeys || DEFAULT_SEARCH_KEYS, states)
   );
 
   private _filterChanged = (ev: Event) => {
@@ -356,34 +418,26 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
         return;
       }
 
-      const index = this._fuseIndex(this._allItems as PickerComboBoxItem[]);
-      const fuse = new HaFuse(
+      const index = this._fuseIndex(
         this._allItems as PickerComboBoxItem[],
-        {
-          shouldSort: false,
-          minMatchCharLength: Math.min(searchString.length, 2),
-        },
-        index
+        this.searchKeys
       );
 
-      const results = fuse.multiTermsSearch(searchString);
-      let filteredItems = [...this._allItems];
+      let filteredItems = multiTermSortedSearch<PickerComboBoxItem>(
+        this._allItems as PickerComboBoxItem[],
+        searchString,
+        this.searchKeys || DEFAULT_SEARCH_KEYS,
+        (item) => item.id,
+        index
+      ) as (PickerComboBoxItem | string)[];
 
-      if (results) {
-        const items: (PickerComboBoxItem | string)[] = results.map(
-          (result) => result.item
-        );
-
-        if (!items.length) {
-          filteredItems.push(NO_ITEMS_AVAILABLE_ID);
-        }
-
-        const additionalItems = this._getAdditionalItems();
-        items.push(...additionalItems);
-
-        filteredItems = items;
+      if (!filteredItems.length) {
+        filteredItems.push(NO_ITEMS_AVAILABLE_ID);
       }
 
+      const additionalItems = this._getAdditionalItems();
+      filteredItems.push(...additionalItems);
+
       if (this.searchFn) {
         filteredItems = this.searchFn(
           searchString,
@@ -392,13 +446,23 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
         );
       }
 
+      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 as PickerComboBoxItem[];
     }
 
     this._selectedItemIndex = -1;
-    if (this._virtualizerElement) {
-      this._virtualizerElement.scrollTo(0, 0);
-    }
+    this._valuePinned = true;
   };
 
   private _toggleSection(ev: Event) {
@@ -590,7 +654,25 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
   }
 
   private _keyFunction = (item: PickerComboBoxItem | string) =>
-    typeof item === "string" ? item : item.id;
+    typeof item === "string" ? item : item?.id;
+
+  private _getInitialSelectedIndex() {
+    if (!this._virtualizerElement || this._search || !this.value) {
+      return 0;
+    }
+
+    const index = this._virtualizerElement.items.findIndex(
+      (item) =>
+        typeof item !== "string" &&
+        (item as PickerComboBoxItem).id === this.value
+    );
+
+    if (index === -1) {
+      return 0;
+    }
+
+    return index;
+  }
 
   static get styles() {
     return [

src/components/ha-picker-field.ts

@@ -1,3 +1,4 @@
+import { consume } from "@lit/context";
 import { mdiClose, mdiMenuDown } from "@mdi/js";
 import {
   css,
@@ -7,8 +8,10 @@ import {
   type CSSResultGroup,
   type TemplateResult,
 } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { localizeContext } from "../data/context";
+import type { HomeAssistant } from "../types";
 import "./ha-combo-box-item";
 import type { HaComboBoxItem } from "./ha-combo-box-item";
 import "./ha-icon-button";
@@ -33,14 +36,25 @@ export class HaPickerField extends LitElement {
 
   @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;
 
   @query("ha-combo-box-item", true) public item!: HaComboBoxItem;
 
+  @state()
+  @consume({ context: localizeContext, subscribe: true })
+  private localize!: HomeAssistant["localize"];
+
   public async focus() {
     await this.updateComplete;
     await this.item?.focus();
@@ -49,18 +63,27 @@ export class HaPickerField extends LitElement {
   protected render() {
     const showClearIcon =
       !!this.value && !this.required && !this.disabled && !this.hideClearIcon;
+    const placeholder = this.showLabel
+      ? html`<span slot="overline">${this.placeholder}</span>`
+      : nothing;
 
     return html`
       <ha-combo-box-item .disabled=${this.disabled} type="button" compact>
         ${this.value
           ? this.valueRenderer
-            ? this.valueRenderer(this.value)
-            : html`<slot name="headline">${this.value}</slot>`
+            ? html`${placeholder}${this.valueRenderer(this.value)}`
+            : html`${placeholder}<span slot="headline">${this.value}</span>`
           : html`
               <span slot="headline" class="placeholder">
                 ${this.placeholder}
               </span>
             `}
+        ${this.unknown
+          ? html`<div slot="supporting-text" class="unknown">
+              ${this.unknownItemText ||
+              this.localize("ui.components.combo-box.unknown_item")}
+            </div>`
+          : nothing}
         ${showClearIcon
           ? html`
               <ha-icon-button
@@ -142,6 +165,10 @@ export class HaPickerField extends LitElement {
           background-color: var(--mdc-theme-primary);
         }
 
+        :host([unknown]) ha-combo-box-item {
+          background-color: var(--ha-color-fill-warning-quiet-resting);
+        }
+
         .clear {
           margin: 0 -8px;
           --mdc-icon-button-size: 32px;
@@ -156,6 +183,10 @@ export class HaPickerField extends LitElement {
           color: var(--secondary-text-color);
           padding: 0 8px;
         }
+
+        .unknown {
+          color: var(--ha-color-on-warning-normal);
+        }
       `,
     ];
   }

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

@@ -7,7 +7,7 @@ import { fullEntitiesContext } from "../../data/context";
 import {
   subscribeEntityRegistry,
   type EntityRegistryEntry,
-} from "../../data/entity_registry";
+} from "../../data/entity/entity_registry";
 import type { Action } from "../../data/script";
 import { migrateAutomationAction } from "../../data/script";
 import type { ActionSelector } from "../../data/selector";

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-area.ts

@@ -4,14 +4,14 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
-import type { DeviceRegistryEntry } from "../../data/device_registry";
-import { getDeviceIntegrationLookup } from "../../data/device_registry";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { EntitySources } from "../../data/entity_sources";
-import { fetchEntitySourcesWithCache } from "../../data/entity_sources";
-import type { AreaSelector } from "../../data/selector";
 import type { ConfigEntry } from "../../data/config_entries";
 import { getConfigEntries } from "../../data/config_entries";
+import type { DeviceRegistryEntry } from "../../data/device/device_registry";
+import { getDeviceIntegrationLookup } from "../../data/device/device_registry";
+import type { EntitySources } from "../../data/entity/entity_sources";
+import { fetchEntitySourcesWithCache } from "../../data/entity/entity_sources";
+import type { AreaSelector } from "../../data/selector";
 import {
   filterSelectorDevices,
   filterSelectorEntities,

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

@@ -5,13 +5,13 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { DeviceRegistryEntry } from "../../data/device_registry";
-import { getDeviceIntegrationLookup } from "../../data/device_registry";
-import type { EntitySources } from "../../data/entity_sources";
-import { fetchEntitySourcesWithCache } from "../../data/entity_sources";
-import type { DeviceSelector } from "../../data/selector";
 import type { ConfigEntry } from "../../data/config_entries";
 import { getConfigEntries } from "../../data/config_entries";
+import type { DeviceRegistryEntry } from "../../data/device/device_registry";
+import { getDeviceIntegrationLookup } from "../../data/device/device_registry";
+import type { EntitySources } from "../../data/entity/entity_sources";
+import { fetchEntitySourcesWithCache } from "../../data/entity/entity_sources";
+import type { DeviceSelector } from "../../data/selector";
 import {
   filterSelectorDevices,
   filterSelectorEntities,
@@ -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-entity.ts

@@ -4,12 +4,12 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { EntitySources } from "../../data/entity_sources";
-import { fetchEntitySourcesWithCache } from "../../data/entity_sources";
+import type { EntitySources } from "../../data/entity/entity_sources";
+import { fetchEntitySourcesWithCache } from "../../data/entity/entity_sources";
 import type { EntitySelector } from "../../data/selector";
 import {
-  filterSelectorEntities,
   computeCreateDomains,
+  filterSelectorEntities,
 } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
 import "../entity/ha-entities-picker";
@@ -74,7 +74,6 @@ export class HaEntitySelector extends LitElement {
         .placeholder=${this.placeholder}
         .disabled=${this.disabled}
         .required=${this.required}
-        allow-custom-entity
       ></ha-entity-picker>`;
     }
 

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

@@ -4,14 +4,14 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
-import type { DeviceRegistryEntry } from "../../data/device_registry";
-import { getDeviceIntegrationLookup } from "../../data/device_registry";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { EntitySources } from "../../data/entity_sources";
-import { fetchEntitySourcesWithCache } from "../../data/entity_sources";
-import type { FloorSelector } from "../../data/selector";
 import type { ConfigEntry } from "../../data/config_entries";
 import { getConfigEntries } from "../../data/config_entries";
+import type { DeviceRegistryEntry } from "../../data/device/device_registry";
+import { getDeviceIntegrationLookup } from "../../data/device/device_registry";
+import type { EntitySources } from "../../data/entity/entity_sources";
+import { fetchEntitySourcesWithCache } from "../../data/entity/entity_sources";
+import type { FloorSelector } from "../../data/selector";
 import {
   filterSelectorDevices,
   filterSelectorEntities,

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

@@ -7,15 +7,15 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
-import type { DeviceRegistryEntry } from "../../data/device_registry";
-import { getDeviceIntegrationLookup } from "../../data/device_registry";
-import type { EntitySources } from "../../data/entity_sources";
-import { fetchEntitySourcesWithCache } from "../../data/entity_sources";
+import type { DeviceRegistryEntry } from "../../data/device/device_registry";
+import { getDeviceIntegrationLookup } from "../../data/device/device_registry";
+import type { EntitySources } from "../../data/entity/entity_sources";
+import { fetchEntitySourcesWithCache } from "../../data/entity/entity_sources";
 import type { TargetSelector } from "../../data/selector";
 import {
+  computeCreateDomains,
   filterSelectorDevices,
   filterSelectorEntities,
-  computeCreateDomains,
 } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
 import "../ha-target-picker";

src/components/ha-service-picker.ts

@@ -21,6 +21,13 @@ interface ServiceComboBoxItem extends PickerComboBoxItem {
   service_id?: string;
 }
 
+const SEARCH_KEYS = [
+  { name: "search_labels.name", weight: 10 },
+  { name: "search_labels.description", weight: 8 },
+  { name: "search_labels.domainName", weight: 6 },
+  { name: "search_labels.serviceId", weight: 3 },
+];
+
 @customElement("ha-service-picker")
 class HaServicePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -128,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"
         )}
@@ -141,6 +147,10 @@ class HaServicePicker extends LitElement {
           this.hass.localize,
           this.hass.services
         )}
+        .searchKeys=${SEARCH_KEYS}
+        .unknownItemText=${this.hass.localize(
+          "ui.components.service-picker.unknown"
+        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>
@@ -194,9 +204,7 @@ class HaServicePicker extends LitElement {
               secondary: description,
               domain_name: domainName,
               service_id: serviceId,
-              search_labels: [serviceId, domainName, name, description].filter(
-                Boolean
-              ),
+              search_labels: { serviceId, domainName, name, description },
               sorting_label: serviceId,
             });
           }

src/components/ha-target-picker.ts

@@ -13,19 +13,30 @@ import memoizeOne from "memoize-one";
 import { ensureArray } from "../common/array/ensure-array";
 import { fireEvent } from "../common/dom/fire_event";
 import { isValidEntityId } from "../common/entity/valid_entity_id";
+import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { computeRTL } from "../common/util/compute_rtl";
 import {
+  areaFloorComboBoxKeys,
   getAreasAndFloors,
   type AreaFloorValue,
   type FloorComboBoxItem,
-} from "../data/area_floor";
+} from "../data/area_floor_picker";
 import { getConfigEntries, type ConfigEntry } from "../data/config_entries";
 import { labelsContext } from "../data/context";
-import { getDevices, type DevicePickerItem } from "../data/device_registry";
-import type { HaEntityPickerEntityFilterFunc } from "../data/entity";
-import { getEntities, type EntityComboBoxItem } from "../data/entity_registry";
+import {
+  deviceComboBoxKeys,
+  getDevices,
+  type DevicePickerItem,
+} from "../data/device/device_picker";
+import type { HaEntityPickerEntityFilterFunc } from "../data/entity/entity";
+import {
+  entityComboBoxKeys,
+  getEntities,
+  type EntityComboBoxItem,
+} from "../data/entity/entity_picker";
 import { domainToName } from "../data/integration";
-import { getLabels, type LabelRegistryEntry } from "../data/label_registry";
+import { getLabels, labelComboBoxKeys } from "../data/label/label_picker";
+import type { LabelRegistryEntry } from "../data/label/label_registry";
 import {
   areaMeetsFilter,
   deviceMeetsFilter,
@@ -37,7 +48,11 @@ import {
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { isHelperDomain } from "../panels/config/helpers/const";
 import { showHelperDetailDialog } from "../panels/config/helpers/show-dialog-helper-detail";
-import { HaFuse } from "../resources/fuse";
+import {
+  multiTermSearch,
+  multiTermSortedSearch,
+  type FuseWeightedKey,
+} from "../resources/fuseMultiTerm";
 import type { HomeAssistant } from "../types";
 import { brandsUrl } from "../util/brands-url";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
@@ -113,16 +128,16 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   private _fuseIndexes = {
     area: memoizeOne((states: FloorComboBoxItem[]) =>
-      this._createFuseIndex(states)
+      this._createFuseIndex(states, areaFloorComboBoxKeys)
     ),
     entity: memoizeOne((states: EntityComboBoxItem[]) =>
-      this._createFuseIndex(states)
+      this._createFuseIndex(states, entityComboBoxKeys)
     ),
     device: memoizeOne((states: DevicePickerItem[]) =>
-      this._createFuseIndex(states)
+      this._createFuseIndex(states, deviceComboBoxKeys)
     ),
     label: memoizeOne((states: PickerComboBoxItem[]) =>
-      this._createFuseIndex(states)
+      this._createFuseIndex(states, labelComboBoxKeys)
     ),
   };
 
@@ -134,8 +149,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _createFuseIndex = (states) =>
-    Fuse.createIndex(["search_labels"], states);
+  private _createFuseIndex = (states, keys: FuseWeightedKey[]) =>
+    Fuse.createIndex(keys, states);
 
   protected render() {
     if (this.addOnTop) {
@@ -728,15 +743,14 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             : undefined,
           undefined,
           `entity${SEPARATOR}`
-        );
+        ).sort(this._sortBySortingLabel);
 
         if (searchTerm) {
           entityItems = this._filterGroup(
             "entity",
             entityItems,
             searchTerm,
-            (item: EntityComboBoxItem) =>
-              item.stateObj?.entity_id === searchTerm
+            entityComboBoxKeys
           ) as EntityComboBoxItem[];
         }
 
@@ -762,10 +776,15 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
             : undefined,
           undefined,
           `device${SEPARATOR}`
-        );
+        ).sort(this._sortBySortingLabel);
 
         if (searchTerm) {
-          deviceItems = this._filterGroup("device", deviceItems, searchTerm);
+          deviceItems = this._filterGroup(
+            "device",
+            deviceItems,
+            searchTerm,
+            deviceComboBoxKeys
+          );
         }
 
         if (!filterType && deviceItems.length) {
@@ -799,7 +818,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           areasAndFloors = this._filterGroup(
             "area",
             areasAndFloors,
-            searchTerm
+            searchTerm,
+            areaFloorComboBoxKeys,
+            false
           ) as FloorComboBoxItem[];
         }
 
@@ -841,10 +862,15 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
           entityFilter,
           targetValue?.label_id ? ensureArray(targetValue.label_id) : undefined,
           `label${SEPARATOR}`
-        );
+        ).sort(this._sortBySortingLabel);
 
         if (searchTerm) {
-          labels = this._filterGroup("label", labels, searchTerm);
+          labels = this._filterGroup(
+            "label",
+            labels,
+            searchTerm,
+            labelComboBoxKeys
+          );
         }
 
         if (!filterType && labels.length) {
@@ -863,40 +889,24 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     type: TargetType,
     items: (FloorComboBoxItem | PickerComboBoxItem | EntityComboBoxItem)[],
     searchTerm: string,
-    checkExact?: (
-      item: FloorComboBoxItem | PickerComboBoxItem | EntityComboBoxItem
-    ) => boolean
+    weightedKeys: FuseWeightedKey[],
+    sort = true
   ) {
     const fuseIndex = this._fuseIndexes[type](items);
-    const fuse = new HaFuse(
-      items,
-      {
-        shouldSort: false,
-        minMatchCharLength: Math.min(searchTerm.length, 2),
-      },
-      fuseIndex
-    );
 
-    const results = fuse.multiTermsSearch(searchTerm);
-    let filteredItems = items;
-    if (results) {
-      filteredItems = results.map((result) => result.item);
+    if (sort) {
+      return multiTermSortedSearch(
+        items,
+        searchTerm,
+        weightedKeys,
+        (item) => item.id,
+        fuseIndex
+      );
     }
 
-    if (!checkExact) {
-      return filteredItems;
-    }
-
-    // If there is exact match for entity id, put it first
-    const index = filteredItems.findIndex((item) => checkExact(item));
-    if (index === -1) {
-      return filteredItems;
-    }
-
-    const [exactMatch] = filteredItems.splice(index, 1);
-    filteredItems.unshift(exactMatch);
-
-    return filteredItems;
+    return multiTermSearch(items, searchTerm, weightedKeys, fuseIndex, {
+      ignoreLocation: true,
+    });
   }
 
   private _getAdditionalItems = () => this._getCreateItems(this.createDomains);
@@ -952,10 +962,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     let hasFloor = false;
     let rtl = false;
     let showEntityId = false;
-
     if (type === "area" || type === "floor") {
-      item.id = item[type]?.[`${type}_id`];
-
       rtl = computeRTL(this.hass);
       hasFloor =
         type === "area" && !!(item as FloorComboBoxItem).area?.floor_id;
@@ -1061,6 +1068,13 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
       term: html`<b>‘${search}’</b>`,
     });
 
+  private _sortBySortingLabel = (entityA, entityB) =>
+    caseInsensitiveStringCompare(
+      (entityA as PickerComboBoxItem).sorting_label!,
+      (entityB as PickerComboBoxItem).sorting_label!,
+      this.hass?.locale.language ?? navigator.language
+    );
+
   static get styles(): CSSResultGroup {
     return css`
       .add-target-wrapper {

src/components/ha-toast.ts

@@ -13,6 +13,7 @@ export class HaToast extends Snackbar {
       }
 
       .mdc-snackbar {
+        z-index: 10;
         margin: 8px;
         right: calc(8px + var(--safe-area-inset-right));
         bottom: calc(8px + var(--safe-area-inset-bottom));

src/components/map/ha-entity-marker.ts

@@ -68,8 +68,8 @@ class HaEntityMarker extends LitElement {
       text-align: center;
       align-items: center;
       box-sizing: border-box;
-      width: 48px;
-      height: 48px;
+      width: var(--ha-marker-size, 48px);
+      height: var(--ha-marker-size, 48px);
       font-size: var(--ha-marker-font-size, var(--ha-font-size-xl));
       border-radius: var(--ha-marker-border-radius, 50%);
       border: 1px solid var(--ha-marker-color, var(--primary-color));

src/components/map/ha-map.ts

@@ -560,10 +560,11 @@ export class HaMap extends ReactiveElement {
           radius,
         });
 
+        const markerIconSize = this._getMarkerSize(computedStyles) / 2;
         const marker = new DecoratedMarker([latitude, longitude], circle, {
           icon: Leaflet.divIcon({
             html: iconHTML,
-            iconSize: [24, 24],
+            iconSize: [markerIconSize, markerIconSize],
             className,
           }),
           interactive: this.interactiveZones,
@@ -618,10 +619,11 @@ export class HaMap extends ReactiveElement {
       }
 
       // create marker with the icon
+      const markerSize = this._getMarkerSize(computedStyles);
       const marker = new DecoratedMarker([latitude, longitude], undefined, {
         icon: Leaflet.divIcon({
           html: entityMarker,
-          iconSize: [48, 48],
+          iconSize: [markerSize, markerSize],
           className: "",
         }),
         title: title,
@@ -657,6 +659,13 @@ export class HaMap extends ReactiveElement {
     this._mapZones.forEach((marker) => map.addLayer(marker));
   }
 
+  private _getMarkerSize(computedStyles: CSSStyleDeclaration): number {
+    const markerSizeVarValue =
+      computedStyles.getPropertyValue("--ha-marker-size");
+    const parsed = parseFloat(markerSizeVarValue);
+    return Number.isNaN(parsed) ? 48 : parsed;
+  }
+
   private async _attachObserver(): Promise<void> {
     if (!this._resizeObserver) {
       this._resizeObserver = new ResizeObserver(() => {
@@ -739,14 +748,19 @@ export class HaMap extends ReactiveElement {
       text-align: center;
     }
 
+    ha-icon {
+      --mdc-icon-size: calc(var(--ha-marker-size, 48px) / 2);
+    }
+
     .marker-cluster div {
       background-clip: padding-box;
       background-color: var(--primary-color);
       border: 3px solid rgba(var(--rgb-primary-color), 0.2);
-      width: 32px;
-      height: 32px;
-      border-radius: var(--ha-border-radius-2xl);
+      width: calc(var(--ha-marker-size, 48px) * 0.667);
+      height: calc(var(--ha-marker-size, 48px) * 0.667);
+      border-radius: 50%;
       text-align: center;
+      align-content: center;
       color: var(--text-primary-color);
       font-size: var(--ha-font-size-m);
     }

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

@@ -7,7 +7,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { supportsFeature } from "../../common/entity/supports-feature";
-import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
+import type { EntityRegistryDisplayEntry } from "../../data/entity/entity_registry";
 import { extractApiErrorMessage } from "../../data/hassio/common";
 import {
   type MediaPlayerEntity,

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

@@ -17,7 +17,7 @@ import { until } from "lit/directives/until";
 import { fireEvent } from "../../common/dom/fire_event";
 import { slugify } from "../../common/string/slugify";
 import { debounce } from "../../common/util/debounce";
-import { isUnavailableState } from "../../data/entity";
+import { isUnavailableState } from "../../data/entity/entity";
 import type {
   MediaPickedEvent,
   MediaPlayerBrowseAction,

src/components/target-picker/dialog/show-dialog-target-details.ts

@@ -1,5 +1,5 @@
 import { fireEvent } from "../../../common/dom/fire_event";
-import type { HaEntityPickerEntityFilterFunc } from "../../../data/entity";
+import type { HaEntityPickerEntityFilterFunc } from "../../../data/entity/entity";
 import type { TargetType } from "../../../data/target";
 import type { HaDevicePickerDeviceFilterFunc } from "../../device/ha-device-picker";
 

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

@@ -1,6 +1,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { TargetType, TargetTypeFloorless } from "../../data/target";
 import type { HomeAssistant } from "../../types";
 import type { HaDevicePickerDeviceFilterFunc } from "../device/ha-device-picker";

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

@@ -23,11 +23,11 @@ import { computeRTL } from "../../common/util/compute_rtl";
 import type { AreaRegistryEntry } from "../../data/area_registry";
 import { getConfigEntry } from "../../data/config_entries";
 import { labelsContext } from "../../data/context";
-import type { DeviceRegistryEntry } from "../../data/device_registry";
-import type { HaEntityPickerEntityFilterFunc } from "../../data/entity";
+import type { DeviceRegistryEntry } from "../../data/device/device_registry";
+import type { HaEntityPickerEntityFilterFunc } from "../../data/entity/entity";
 import type { FloorRegistryEntry } from "../../data/floor_registry";
 import { domainToName } from "../../data/integration";
-import type { LabelRegistryEntry } from "../../data/label_registry";
+import type { LabelRegistryEntry } from "../../data/label/label_registry";
 import {
   areaMeetsFilter,
   deviceMeetsFilter,

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

@@ -23,7 +23,7 @@ import { slugify } from "../../common/string/slugify";
 import { getConfigEntry } from "../../data/config_entries";
 import { labelsContext } from "../../data/context";
 import { domainToName } from "../../data/integration";
-import type { LabelRegistryEntry } from "../../data/label_registry";
+import type { LabelRegistryEntry } from "../../data/label/label_registry";
 import type { TargetType } from "../../data/target";
 import type { HomeAssistant } from "../../types";
 import { brandsUrl } from "../../util/brands-url";

src/components/trace/ha-trace-blueprint-config.ts

@@ -17,6 +17,7 @@ export class HaTraceBlueprintConfig extends LitElement {
     return html`
       <ha-code-editor
         .value=${dump(this.trace.blueprint_inputs || "").trimRight()}
+        .hass=${this.hass}
         read-only
         dir="ltr"
       ></ha-code-editor>

src/components/trace/ha-trace-config.ts

@@ -17,6 +17,7 @@ export class HaTraceConfig extends LitElement {
     return html`
       <ha-code-editor
         .value=${dump(this.trace.config).trimRight()}
+        .hass=${this.hass}
         read-only
         dir="ltr"
       ></ha-code-editor>

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

@@ -1,14 +1,16 @@
-import { dump } from "js-yaml";
 import { consume } from "@lit/context";
+import { dump } from "js-yaml";
 import type { CSSResultGroup, TemplateResult } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
-import "../ha-code-editor";
-import "../ha-icon-button";
-import "./hat-logbook-note";
+import { describeCondition, describeTrigger } from "../../data/automation_i18n";
+import { fullEntitiesContext, labelsContext } from "../../data/context";
+import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
+import type { LabelRegistryEntry } from "../../data/label/label_registry";
 import type { LogbookEntry } from "../../data/logbook";
+import { describeAction } from "../../data/script_i18n";
 import type {
   ActionTraceStep,
   ChooseActionTraceStep,
@@ -16,19 +18,12 @@ import type {
 } from "../../data/trace";
 import { getDataFromPath } from "../../data/trace";
 import "../../panels/logbook/ha-logbook-renderer";
-import { traceTabStyles } from "./trace-tab-styles";
 import type { HomeAssistant } from "../../types";
+import "../ha-code-editor";
+import "../ha-icon-button";
+import "./hat-logbook-note";
 import type { NodeInfo } from "./hat-script-graph";
-import { describeCondition, describeTrigger } from "../../data/automation_i18n";
-import type { EntityRegistryEntry } from "../../data/entity_registry";
-import type { LabelRegistryEntry } from "../../data/label_registry";
-import type { FloorRegistryEntry } from "../../data/floor_registry";
-import {
-  floorsContext,
-  fullEntitiesContext,
-  labelsContext,
-} from "../../data/context";
-import { describeAction } from "../../data/script_i18n";
+import { traceTabStyles } from "./trace-tab-styles";
 
 const TRACE_PATH_TABS = [
   "step_config",
@@ -63,10 +58,6 @@ export class HaTracePathDetails extends LitElement {
   @consume({ context: labelsContext, subscribe: true })
   _labelReg!: LabelRegistryEntry[];
 
-  @state()
-  @consume({ context: floorsContext, subscribe: true })
-  _floorReg!: Record<string, FloorRegistryEntry>;
-
   protected render(): TemplateResult {
     return html`
       <div class="padded-box trace-info">
@@ -193,8 +184,6 @@ export class HaTracePathDetails extends LitElement {
                           ${describeAction(
                             this.hass,
                             this._entityReg,
-                            this._labelReg,
-                            this._floorReg,
                             currentDetail
                           )}
                         </h2>`
@@ -278,6 +267,7 @@ export class HaTracePathDetails extends LitElement {
     return config
       ? html`<ha-code-editor
           .value=${dump(config).trimEnd()}
+          .hass=${this.hass}
           read-only
           dir="ltr"
         ></ha-code-editor>`

src/components/trace/hat-trace-timeline.ts

@@ -15,19 +15,13 @@ import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_tim
 import { relativeTime } from "../../common/datetime/relative_time";
 import { fireEvent } from "../../common/dom/fire_event";
 import { toggleAttribute } from "../../common/dom/toggle_attribute";
-import {
-  floorsContext,
-  fullEntitiesContext,
-  labelsContext,
-} from "../../data/context";
-import type { EntityRegistryEntry } from "../../data/entity_registry";
-import type { FloorRegistryEntry } from "../../data/floor_registry";
-import type { LabelRegistryEntry } from "../../data/label_registry";
+import { fullEntitiesContext } from "../../data/context";
+import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
 import type { LogbookEntry } from "../../data/logbook";
 import type {
   ChooseAction,
-  Option,
   IfAction,
+  Option,
   ParallelAction,
   RepeatAction,
   SequenceAction,
@@ -197,8 +191,6 @@ class ActionRenderer {
   constructor(
     private hass: HomeAssistant,
     private entityReg: EntityRegistryEntry[],
-    private labelReg: LabelRegistryEntry[],
-    private floorReg: Record<string, FloorRegistryEntry>,
     private entries: TemplateResult[],
     private trace: AutomationTraceExtended,
     private logbookRenderer: LogbookRenderer,
@@ -313,14 +305,7 @@ class ActionRenderer {
 
     this._renderEntry(
       path,
-      describeAction(
-        this.hass,
-        this.entityReg,
-        this.labelReg,
-        this.floorReg,
-        data,
-        actionType
-      ),
+      describeAction(this.hass, this.entityReg, data, actionType),
       undefined,
       data.enabled === false
     );
@@ -485,13 +470,7 @@ class ActionRenderer {
 
     const name =
       repeatConfig.alias ||
-      describeAction(
-        this.hass,
-        this.entityReg,
-        this.labelReg,
-        this.floorReg,
-        repeatConfig
-      );
+      describeAction(this.hass, this.entityReg, repeatConfig);
 
     this._renderEntry(repeatPath, name, undefined, disabled);
 
@@ -585,14 +564,7 @@ class ActionRenderer {
     this._renderEntry(
       sequencePath,
       sequenceConfig.alias ||
-        describeAction(
-          this.hass,
-          this.entityReg,
-          this.labelReg,
-          this.floorReg,
-          sequenceConfig,
-          "sequence"
-        ),
+        describeAction(this.hass, this.entityReg, sequenceConfig, "sequence"),
       undefined,
       sequenceConfig.enabled === false
     );
@@ -683,14 +655,6 @@ export class HaAutomationTracer extends LitElement {
   @consume({ context: fullEntitiesContext, subscribe: true })
   _entityReg!: EntityRegistryEntry[];
 
-  @state()
-  @consume({ context: labelsContext, subscribe: true })
-  _labelReg!: LabelRegistryEntry[];
-
-  @state()
-  @consume({ context: floorsContext, subscribe: true })
-  _floorReg!: Record<string, FloorRegistryEntry>;
-
   protected render() {
     if (!this.trace) {
       return nothing;
@@ -707,8 +671,6 @@ export class HaAutomationTracer extends LitElement {
     const actionRenderer = new ActionRenderer(
       this.hass,
       this._entityReg,
-      this._labelReg,
-      this._floorReg,
       entries,
       this.trace,
       logbookRenderer,

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

@@ -17,6 +17,12 @@ interface UserComboBoxItem extends PickerComboBoxItem {
   user?: User;
 }
 
+const SEARCH_KEYS = [
+  { name: "primary", weight: 10 },
+  { name: "search_labels.username", weight: 6 },
+  { name: "id", weight: 3 },
+];
+
 @customElement("ha-user-picker")
 class HaUserPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -109,9 +115,7 @@ class HaUserPicker extends LitElement {
         id: user.id,
         primary: user.name,
         domain_name: user.name,
-        search_labels: [user.name, user.id, user.username].filter(
-          Boolean
-        ) as string[],
+        search_labels: { username: user.username },
         sorting_label: user.name,
         user,
       }));
@@ -134,6 +138,10 @@ class HaUserPicker extends LitElement {
         .getItems=${this._getItems}
         .valueRenderer=${this._valueRenderer}
         .rowRenderer=${this._rowRenderer}
+        .searchKeys=${SEARCH_KEYS}
+        .unknownItemText=${this.hass.localize(
+          "ui.components.user-picker.unknown"
+        )}
         @value-changed=${this._valueChanged}
       >
       </ha-generic-picker>

src/data/alarm_control_panel.ts

@@ -13,7 +13,7 @@ import type {
 import { supportsFeature } from "../common/entity/supports-feature";
 import { showEnterCodeDialog } from "../dialogs/enter-code/show-enter-code-dialog";
 import type { HomeAssistant } from "../types";
-import { getExtendedEntityRegistryEntry } from "./entity_registry";
+import { getExtendedEntityRegistryEntry } from "./entity/entity_registry";
 
 export const FORMAT_TEXT = "text";
 export const FORMAT_NUMBER = "number";

src/data/area_floor_picker.ts

@@ -4,15 +4,16 @@ import { computeDomain } from "../common/entity/compute_domain";
 import { computeFloorName } from "../common/entity/compute_floor_name";
 import type { HaDevicePickerDeviceFilterFunc } from "../components/device/ha-device-picker";
 import type { PickerComboBoxItem } from "../components/ha-picker-combo-box";
+import type { FuseWeightedKey } from "../resources/fuseMultiTerm";
 import type { HomeAssistant } from "../types";
 import type { AreaRegistryEntry } from "./area_registry";
 import {
   getDeviceEntityDisplayLookup,
   type DeviceEntityDisplayLookup,
   type DeviceRegistryEntry,
-} from "./device_registry";
-import type { HaEntityPickerEntityFilterFunc } from "./entity";
-import type { EntityRegistryDisplayEntry } from "./entity_registry";
+} from "./device/device_registry";
+import type { HaEntityPickerEntityFilterFunc } from "./entity/entity";
+import type { EntityRegistryDisplayEntry } from "./entity/entity_registry";
 import type { FloorRegistryEntry } from "./floor_registry";
 
 export interface FloorComboBoxItem extends PickerComboBoxItem {
@@ -26,7 +27,8 @@ export interface FloorNestedComboBoxItem extends PickerComboBoxItem {
   areas: FloorComboBoxItem[];
 }
 
-export interface UnassignedAreasFloorComboBoxItem extends PickerComboBoxItem {
+export interface UnassignedAreasFloorComboBoxItem {
+  id: undefined;
   areas: FloorComboBoxItem[];
 }
 
@@ -98,6 +100,29 @@ export const getAreasAndFloors = (
     excludeFloors
   ) as FloorComboBoxItem[];
 
+export const areaFloorComboBoxKeys: FuseWeightedKey[] = [
+  {
+    name: "search_labels.name",
+    weight: 10,
+  },
+  {
+    name: "search_labels.aliases",
+    weight: 8,
+  },
+  {
+    name: "search_labels.floorName",
+    weight: 6,
+  },
+  {
+    name: "search_labels.relatedAreas",
+    weight: 4,
+  },
+  {
+    name: "search_labels.id",
+    weight: 3,
+  },
+];
+
 const getAreasAndFloorsItems = (
   states: HomeAssistant["states"],
   haFloors: HomeAssistant["floors"],
@@ -304,12 +329,12 @@ const getAreasAndFloorsItems = (
       primary: floorName,
       floor: floor,
       icon: floor.icon || undefined,
-      search_labels: [
-        floor.floor_id,
-        floorName,
-        ...floor.aliases,
-        ...areaSearchLabels,
-      ],
+      search_labels: {
+        id: floor.floor_id,
+        name: floorName || null,
+        aliases: floor.aliases.join(", ") || null,
+        relatedAreas: areaSearchLabels.join(" ") || null,
+      },
     };
 
     items.push(floorItem);
@@ -322,11 +347,12 @@ const getAreasAndFloorsItems = (
         primary: areaName || area.area_id,
         area: area,
         icon: area.icon || undefined,
-        search_labels: [
-          area.area_id,
-          ...(areaName ? [areaName] : []),
-          ...area.aliases,
-        ],
+        search_labels: {
+          id: area.area_id,
+          name: areaName || null,
+          aliases: area.aliases.join(", ") || null,
+          floorName: floorName || null,
+        },
       };
     });
 
@@ -339,19 +365,24 @@ const getAreasAndFloorsItems = (
 
   const unassignedAreaItems = hierarchy.areas.map((areaId) => {
     const area = haAreas[areaId];
-    const areaName = computeAreaName(area) || area.area_id;
+    const areaName = computeAreaName(area);
     return {
       id: formatId({ id: area.area_id, type: "area" }),
       type: "area" as const,
-      primary: areaName,
+      primary: areaName || area.area_id,
       area: area,
       icon: area.icon || undefined,
-      search_labels: [area.area_id, areaName, ...area.aliases],
+      search_labels: {
+        id: area.area_id,
+        name: areaName || null,
+        aliases: area.aliases.join(", ") || null,
+      },
     };
   });
 
   if (nested && unassignedAreaItems.length) {
     items.push({
+      id: undefined,
       areas: unassignedAreaItems,
     } as UnassignedAreasFloorComboBoxItem);
   } else {

src/data/area_registry.ts

@@ -1,9 +1,9 @@
 import type { HomeAssistant } from "../types";
-import type { DeviceRegistryEntry } from "./device_registry";
+import type { DeviceRegistryEntry } from "./device/device_registry";
 import type {
   EntityRegistryDisplayEntry,
   EntityRegistryEntry,
-} from "./entity_registry";
+} from "./entity/entity_registry";
 import type { RegistryEntry } from "./registry";
 
 export { subscribeAreaRegistry } from "./ws-area_registry";

src/data/assist_satellite.ts

@@ -1,7 +1,7 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { HomeAssistant } from "../types";
 import { supportsFeature } from "../common/entity/supports-feature";
-import { UNAVAILABLE } from "./entity";
+import type { HomeAssistant } from "../types";
+import { UNAVAILABLE } from "./entity/entity";
 
 export const enum AssistSatelliteEntityFeature {
   ANNOUNCE = 1,

src/data/automation.ts

@@ -12,7 +12,10 @@ import type { Context, HomeAssistant } from "../types";
 import type { BlueprintInput } from "./blueprint";
 import type { ConditionDescription } from "./condition";
 import { CONDITION_BUILDING_BLOCKS } from "./condition";
-import type { DeviceCondition, DeviceTrigger } from "./device_automation";
+import type {
+  DeviceCondition,
+  DeviceTrigger,
+} from "./device/device_automation";
 import type { Action, Field, MODES } from "./script";
 import { migrateAutomationAction } from "./script";
 import type { TriggerDescription } from "./trigger";

src/data/automation_i18n.ts

@@ -26,12 +26,15 @@ import type {
   Trigger,
 } from "./automation";
 import { getConditionDomain, getConditionObjectId } from "./condition";
-import type { DeviceCondition, DeviceTrigger } from "./device_automation";
+import type {
+  DeviceCondition,
+  DeviceTrigger,
+} from "./device/device_automation";
 import {
   localizeDeviceAutomationCondition,
   localizeDeviceAutomationTrigger,
-} from "./device_automation";
-import type { EntityRegistryEntry } from "./entity_registry";
+} from "./device/device_automation";
+import type { EntityRegistryEntry } from "./entity/entity_registry";
 import type { FrontendLocaleData } from "./translation";
 import { getTriggerDomain, getTriggerObjectId, isTriggerList } from "./trigger";
 

src/data/calendar.ts

@@ -2,7 +2,7 @@ import { getColorByIndex } from "../common/color/colors";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
 import type { HomeAssistant } from "../types";
-import { isUnavailableState } from "./entity";
+import { isUnavailableState } from "./entity/entity";
 
 export interface Calendar {
   entity_id: string;

src/data/context.ts

@@ -1,8 +1,8 @@
 import { createContext } from "@lit/context";
 import type { HassConfig } from "home-assistant-js-websocket";
 import type { HomeAssistant } from "../types";
-import type { EntityRegistryEntry } from "./entity_registry";
-import type { LabelRegistryEntry } from "./label_registry";
+import type { EntityRegistryEntry } from "./entity/entity_registry";
+import type { LabelRegistryEntry } from "./label/label_registry";
 
 export const connectionContext =
   createContext<HomeAssistant["connection"]>("connection");

src/data/cover.ts

@@ -5,7 +5,7 @@ import type {
 import { stateActive } from "../common/entity/state_active";
 import { supportsFeature } from "../common/entity/supports-feature";
 import type { HomeAssistant } from "../types";
-import { UNAVAILABLE } from "./entity";
+import { UNAVAILABLE } from "./entity/entity";
 
 export const enum CoverEntityFeature {
   OPEN = 1,