Refactor icon loading

Ensure grid options always return an object (#25760 )
Fix alerts refresh on device page (#25748 )
2026-07-28 08:56:19 +00:00 · 2025-06-12 17:33:31 +02:00 · 2025-06-12 10:44:20 +03:00 · 2025-06-12 09:40:36 +02:00 · 2025-06-12 07:29:58 +00:00 · 2025-06-11 14:15:50 +00:00
559 changed files with 17019 additions and 9063 deletions
@@ -108,9 +108,9 @@ body:
      render: yaml
  - type: textarea
    attributes:
-      label: Javascript errors shown in your browser console/inspector
+      label: JavaScript errors shown in your browser console/inspector
      description: >
-        If you come across any Javascript or other error logs, e.g., in your
+        If you come across any JavaScript or other error logs, e.g., in your
        browser console/inspector please provide them.
      render: txt
  - type: textarea
@@ -17,7 +17,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Send bundle stats and build information to RelativeCI
-        uses: relative-ci/agent-action@v2.2.0
+        uses: relative-ci/agent-action@v3.0.0
        with:
          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
          token: ${{ github.token }}
@@ -1 +1 @@
-yarn run lint-staged --relative --shell "/bin/bash"
+yarn run lint-staged --relative
@@ -1,18 +0,0 @@
-diff --git a/dist/hls.light.mjs b/dist/hls.light.mjs
-index eed9d788fafdb159975e1a2eb08ac88ba9c9ac33..ace881935e6665946f1c8110ebd2f739cde4427e 100644
--- a/dist/hls.light.mjs
-+++ b/dist/hls.light.mjs
-@@ -20523,9 +20523,9 @@ class Hls {
- }
- Hls.defaultConfig = void 0;
- 
-var KeySystemFormats = empty.KeySystemFormats;
-var KeySystems = empty.KeySystems;
-var SubtitleStreamController = empty.SubtitleStreamController;
-var TimelineController = empty.TimelineController;
-+var KeySystemFormats = empty;
-+var KeySystems = empty;
-+var SubtitleStreamController = empty;
-+var TimelineController = empty;
- export { AbrController, AttrList, Cues as AudioStreamController, Cues as AudioTrackController, BasePlaylistController, BaseSegment, BaseStreamController, BufferController, Cues as CMCDController, CapLevelController, ChunkMetadata, ContentSteeringController, DateRange, Cues as EMEController, ErrorActionFlags, ErrorController, ErrorDetails, ErrorTypes, Events, FPSController, Fragment, Hls, HlsSkip, HlsUrlParameters, KeySystemFormats, KeySystems, Level, LevelDetails, LevelKey, LoadStats, MetadataSchema, NetworkErrorAction, Part, PlaylistLevelType, SubtitleStreamController, Cues as SubtitleTrackController, TimelineController, Hls as default, getMediaSource, isMSESupported, isSupported };
- //# sourceMappingURL=hls.light.mjs.map
@@ -6,4 +6,4 @@ enableGlobalCache: false

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.9.1.cjs
+yarnPath: .yarn/releases/yarn-4.9.2.cjs
@@ -88,7 +88,7 @@ class HcLayout extends LitElement {
      font-family: var(--ha-card-header-font-family, inherit);
      font-size: var(--ha-card-header-font-size, var(--ha-font-size-2xl));
      letter-spacing: -0.012em;
-      line-height: var(--ha-line-height-normal);
+      line-height: var(--ha-line-height-condensed);
      padding: 24px 16px 16px;
      display: block;
      margin: 0;
@@ -113,7 +113,7 @@ class HcLayout extends LitElement {
    }

    :host ::slotted(.section-header) {
-      font-weight: var(--ha-font-weight-semibold);
+      font-weight: var(--ha-font-weight-medium);
      padding: 4px 16px;
      text-transform: uppercase;
    }
@@ -50,7 +50,7 @@
        font-family: Roboto, Noto, sans-serif;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
-        font-weight: var(--ha-font-weight-normal);
+        font-weight: 400;
        height: 100vh;
        margin: 0;
        padding: 0;
@@ -68,7 +68,7 @@
      }
      #ha-launch-screen .ha-launch-screen-spacer-top {
        flex: 1;
-        margin-top: calc( 2 * max(env(safe-area-inset-bottom), 48px) + 46px );
+        margin-top: calc( 2 * max(var(--safe-area-inset-bottom), 48px) + 46px );
        padding-top: 48px;
      }
      #ha-launch-screen .ha-launch-screen-spacer-bottom {
@@ -76,7 +76,7 @@
        padding-top: 48px;
      }
      .ohf-logo {
-        margin: max(env(safe-area-inset-bottom), 48px) 0;
+        margin: max(var(--safe-area-inset-bottom), 48px) 0;
        display: flex;
        flex-direction: column;
        align-items: center;
@@ -1,7 +1,30 @@
 import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";

+let changeFunction;
+
 export const mockFrontend = (hass: MockHomeAssistant) => {
  hass.mockWS("frontend/get_user_data", () => ({
    value: null,
  }));
+  hass.mockWS("frontend/set_user_data", ({ key, value }) => {
+    if (key === "sidebar") {
+      changeFunction?.({
+        value: {
+          panelOrder: value.panelOrder || [],
+          hiddenPanels: value.hiddenPanels || [],
+        },
+      });
+    }
+  });
+  hass.mockWS("frontend/subscribe_user_data", (_msg, _hass, onChange) => {
+    changeFunction = onChange;
+    onChange?.({
+      value: {
+        panelOrder: [],
+        hiddenPanels: [],
+      },
+    });
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  });
 };
@@ -37,8 +37,8 @@ class PageDescription extends HaMarkdown {
        border-bottom: 1px solid var(--secondary-background-color);
      }
      .title {
-        font-size: var(--ha-font-size-5xl);
-        line-height: var(--ha-line-height-normal);
+        font-size: 42px;
+        line-height: var(--ha-line-height-condensed);
        padding-bottom: 8px;
      }
      .subtitle {
@@ -1,5 +1,5 @@
 import "./ha-gallery";

-import("../../src/resources/ha-style");
+import("../../src/resources/append-ha-style");

 document.body.appendChild(document.createElement("ha-gallery"));
@@ -251,7 +251,7 @@ class HaGallery extends LitElement {

      .page-footer .header {
        font-size: var(--ha-font-size-l);
-        font-weight: var(--ha-font-weight-semibold);
+        font-weight: var(--ha-font-weight-medium);
        line-height: var(--ha-line-height-normal);
        text-align: center;
      }
@@ -0,0 +1,65 @@
+---
+title: Badge
+subtitle: Lovelace dashboard badge
+---
+
+<style>
+  .wrapper {
+    display: flex;
+    gap: 24px;
+  }
+</style>
+
+# Badge `<ha-badge>`
+
+The badge component is a small component that displays a number or status information. It is used in the lovelace dashboard on the top.
+
+## Implementation
+
+### Example Usage
+
+<div class="wrapper">
+  <ha-badge>
+    simple badge
+  </ha-badge>
+
+  <ha-badge label="Info">
+    With a label
+  </ha-badge>
+
+  <ha-badge type="button">
+    Type button
+  </ha-badge>
+</div>
+
+```html
+<ha-badge> simple badge </ha-badge>
+
+<ha-badge label="Info"> With a label </ha-badge>
+
+<ha-badge type="button"> Type button </ha-badge>
+```
+
+### API
+
+**Slots**
+
+- default slot is the content of the badge
+  - no default
+- `icon` set the icon of the badge
+  - no default
+
+**Properties/Attributes**
+
+| Name     | Type                    | Default     | Description                                                  |
+| -------- | ----------------------- | ----------- | ------------------------------------------------------------ |
+| type     | `"badge"` or `"button"` | `"badge"`   | If it's button it shows a ripple effect                      |
+| label    | string                  | `undefined` | Text label for the badge, only visible if `iconOnly = false` |
+| iconOnly | boolean                 | `false`     | Only show label                                              |
+
+**CSS Custom Properties**
+
+- `--ha-badge-size` (default `36px`)
+- `--ha-badge-border-radius` (default `calc(var(--ha-badge-size, 36px) / 2)`)
+- `--ha-badge-font-size` (default `var(--ha-font-size-s)`)
+- `--ha-badge-icon-size` (default `18px`)
@@ -0,0 +1,129 @@
+import { mdiButtonCursor, mdiHome } from "@mdi/js";
+import type { TemplateResult } from "lit";
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
+import "../../../../src/components/ha-badge";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-svg-icon";
+import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
+
+const badges: {
+  type?: "badge" | "button";
+  label?: string;
+  iconOnly?: boolean;
+  slot?: TemplateResult;
+  iconSlot?: TemplateResult;
+}[] = [
+  {
+    slot: html`<span>Badge</span>`,
+  },
+  {
+    type: "badge",
+    label: "Badge",
+    iconSlot: html`<ha-svg-icon slot="icon" .path=${mdiHome}></ha-svg-icon>`,
+    slot: html`<span>Badge</span>`,
+  },
+  {
+    type: "button",
+    label: "Button",
+    iconSlot: html`<ha-svg-icon
+      slot="icon"
+      .path=${mdiButtonCursor}
+    ></ha-svg-icon>`,
+    slot: html`<span>Button</span>`,
+  },
+  {
+    type: "button",
+    label: "Label only",
+    iconSlot: html`<ha-svg-icon
+      slot="icon"
+      .path=${mdiButtonCursor}
+    ></ha-svg-icon>`,
+  },
+  {
+    type: "button",
+    label: "Label",
+    slot: html`<span>Button no label</span>`,
+  },
+  {
+    label: "Icon only",
+    iconOnly: true,
+    iconSlot: html`<ha-svg-icon
+      slot="icon"
+      .path=${mdiHomeAssistant}
+    ></ha-svg-icon>`,
+  },
+];
+
+@customElement("demo-components-ha-badge")
+export class DemoHaBadge extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-badge ${mode} demo">
+              <div class="card-content">
+                ${badges.map(
+                  (badge) => html`
+                    <ha-badge
+                      .type=${badge.type || undefined}
+                      .label=${badge.label}
+                      .iconOnly=${badge.iconOnly || false}
+                    >
+                      ${badge.iconSlot} ${badge.slot}
+                    </ha-badge>
+                  `
+                )}
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+    }
+    ha-card {
+      margin: 24px auto;
+    }
+    .card-content {
+      display: flex;
+      gap: 24px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-badge": DemoHaBadge;
+  }
+}
@@ -105,7 +105,7 @@ export class DemoHaHsColorPicker extends LitElement {
      width: 400px;
    }
    .value {
-      font-size: var(--ha-font-size-2xl);
+      font-size: var(--ha-font-size-xl);
      font-weight: var(--ha-font-weight-bold);
      margin: 0 0 12px 0;
    }
@@ -1,6 +1,7 @@
 import type { TemplateResult } from "lit";
-import { html, css, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
+import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
 import "../../../../src/components/ha-bar";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-spinner";
@@ -11,29 +12,66 @@ export class DemoHaSpinner extends LitElement {
  @property({ attribute: false }) hass!: HomeAssistant;

  protected render(): TemplateResult {
-    return html`<ha-card header="Basic spinner">
-        <div class="card-content">
-          <ha-spinner></ha-spinner></div
-      ></ha-card>
-      <ha-card header="Different spinner sizes">
-        <div class="card-content">
-          <ha-spinner size="tiny"></ha-spinner>
-          <ha-spinner size="small"></ha-spinner>
-          <ha-spinner size="medium"></ha-spinner>
-          <ha-spinner size="large"></ha-spinner></div
-      ></ha-card>
-      <ha-card header="Spinner with an aria-label">
-        <div class="card-content">
-          <ha-spinner aria-label="Doing something..."></ha-spinner>
-          <ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner></div
-      ></ha-card>`;
+    return html`
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-badge ${mode} demo">
+              <div class="card-content">
+                <ha-spinner></ha-spinner>
+                <ha-spinner size="tiny"></ha-spinner>
+                <ha-spinner size="small"></ha-spinner>
+                <ha-spinner size="medium"></ha-spinner>
+                <ha-spinner size="large"></ha-spinner>
+                <ha-spinner aria-label="Doing something..."></ha-spinner>
+                <ha-spinner .ariaLabel=${"Doing something..."}></ha-spinner>
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
  }

  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+    .dark,
+    .light {
+      display: block;
+      background-color: var(--primary-background-color);
+      padding: 0 50px;
+      margin: 16px;
+      border-radius: 8px;
+    }
    ha-card {
-      max-width: 600px;
      margin: 24px auto;
    }
+    .card-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 24px;
+    }
  `;
 }

@@ -1285,7 +1285,7 @@ class HassioAddonInfo extends LitElement {
        }
        .addon-version {
          float: var(--float-end);
-          font-size: var(--ha-font-size-m);
+          font-size: var(--ha-font-size-l);
          vertical-align: middle;
        }
        .errors {
@@ -132,9 +132,9 @@ class HassioDashboard extends LitElement {
        }
        ha-fab.non-tabs {
          position: fixed;
-          right: calc(16px + env(safe-area-inset-right));
-          bottom: calc(16px + env(safe-area-inset-bottom));
-          inset-inline-end: calc(16px + env(safe-area-inset-right));
+          right: calc(16px + var(--safe-area-inset-right));
+          bottom: calc(16px + var(--safe-area-inset-bottom));
+          inset-inline-end: calc(16px + var(--safe-area-inset-right));
          inset-inline-start: initial;
          z-index: 1;
        }
@@ -131,7 +131,7 @@ export class HassioUpdate extends LitElement {
        }
        .update-heading {
          font-size: var(--ha-font-size-l);
-          font-weight: var(--ha-font-weight-semibold);
+          font-weight: var(--ha-font-weight-medium);
          margin-bottom: 0.5em;
          color: var(--primary-text-color);
        }
@@ -169,11 +169,11 @@ class HassioHardwareDialog extends LitElement {
        pre {
          padding: 16px;
          overflow: auto;
-          line-height: var(--ha-line-height-normal);
+          line-height: 1.45;
          font-family: var(--ha-font-family-code);
        }
        code {
-          font-size: 85%;
+          font-size: var(--ha-font-size-s);
          padding: 0.2em 0.4em;
        }
        search-input {
@@ -610,7 +610,7 @@ export class DialogHassioNetwork
          display: flex;
          justify-content: space-between;
          padding: 8px;
-          padding-bottom: max(env(safe-area-inset-bottom), 8px);
+          padding-bottom: max(var(--safe-area-inset-bottom), 8px);
          background-color: var(--mdc-theme-surface, #fff);
        }
        .warning {
@@ -1,3 +1,8 @@
+import {
+  haFontFamilyBody,
+  haFontSmoothing,
+  haMozOsxFontSmoothing,
+} from "../../src/resources/theme/typography.globals";
 import "./hassio-main";

 import("../../src/resources/append-ha-style");
@@ -5,9 +10,9 @@ import("../../src/resources/append-ha-style");
 const styleEl = document.createElement("style");
 styleEl.textContent = `
 body {
-  font-family: Roboto, sans-serif;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
+  font-family: ${haFontFamilyBody};
+  -moz-osx-font-smoothing: ${haMozOsxFontSmoothing};
+  -webkit-font-smoothing: ${haFontSmoothing};
  font-weight: var(--ha-font-weight-normal);
  margin: 0;
  padding: 0;
@@ -354,7 +354,7 @@ class HassioIngressView extends LitElement {

    .main-title {
      margin: var(--margin-title);
-      line-height: var(--ha-line-height-normal);
+      line-height: var(--ha-line-height-condensed);
      flex-grow: 1;
    }

@@ -14,6 +14,7 @@ export const hassioStyle = css`
    margin-bottom: 8px;
    font-family: var(--ha-font-family-body);
    -webkit-font-smoothing: var(--ha-font-smoothing);
+    -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
    font-size: var(--ha-font-size-2xl);
    font-weight: var(--ha-font-weight-normal);
    line-height: var(--ha-line-height-condensed);
@@ -1,3 +1,3 @@
 import "./ha-landing-page";

-import("../../src/resources/ha-style");
+import("../../src/resources/append-ha-style");
@@ -4,7 +4,7 @@ export default {
    "prettier --cache --write",
    "lit-analyzer --quiet",
  ],
-  "*.{json,css,md,markdown,html,y?aml}": "prettier --cache --write",
+  "*.{json,css,md,markdown,html,ya?ml}": "prettier --cache --write",
  "translations/*/*.json": (files) =>
    'printf "%s\n" "Translation files should not be added or modified here. Instead, make the necessary modifications in src/translations/en.json. Other languages are managed externally. Please see https://developers.home-assistant.io/docs/translations/ for details." ' +
    files.join(" ") +
@@ -26,15 +26,15 @@
  "license": "Apache-2.0",
  "type": "module",
  "dependencies": {
-    "@babel/runtime": "7.27.0",
+    "@babel/runtime": "7.27.6",
    "@braintree/sanitize-url": "7.1.1",
    "@codemirror/autocomplete": "6.18.6",
    "@codemirror/commands": "6.8.1",
-    "@codemirror/language": "6.11.0",
+    "@codemirror/language": "6.11.1",
    "@codemirror/legacy-modes": "6.5.1",
-    "@codemirror/search": "6.5.10",
+    "@codemirror/search": "6.5.11",
    "@codemirror/state": "6.5.2",
-    "@codemirror/view": "6.36.6",
+    "@codemirror/view": "6.37.1",
    "@egjs/hammerjs": "2.0.17",
    "@formatjs/intl-datetimeformat": "6.18.0",
    "@formatjs/intl-displaynames": "6.8.11",
@@ -89,17 +89,17 @@
    "@thomasloven/round-slider": "0.6.0",
    "@tsparticles/engine": "3.8.1",
    "@tsparticles/preset-links": "3.2.0",
-    "@vaadin/combo-box": "24.7.4",
-    "@vaadin/vaadin-themable-mixin": "24.7.4",
+    "@vaadin/combo-box": "24.7.8",
+    "@vaadin/vaadin-themable-mixin": "24.7.8",
    "@vibrant/color": "4.0.0",
    "@vue/web-component-wrapper": "1.3.0",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
    "@webcomponents/webcomponentsjs": "2.8.0",
    "app-datepicker": "5.1.1",
-    "barcode-detector": "3.0.1",
+    "barcode-detector": "3.0.4",
    "color-name": "2.0.0",
    "comlink": "4.4.2",
-    "core-js": "3.41.0",
+    "core-js": "3.42.0",
    "cropperjs": "1.6.2",
    "date-fns": "4.1.0",
    "date-fns-tz": "3.2.0",
@@ -111,9 +111,9 @@
    "fuse.js": "7.1.0",
    "google-timezones-json": "1.2.0",
    "gulp-zopfli-green": "6.0.2",
-    "hls.js": "patch:hls.js@npm%3A1.5.7#~/.yarn/patches/hls.js-npm-1.5.7-f5bbd3d060.patch",
+    "hls.js": "1.6.5",
    "home-assistant-js-websocket": "9.5.0",
-    "idb-keyval": "6.2.1",
+    "idb-keyval": "6.2.2",
    "intl-messageformat": "10.7.16",
    "js-yaml": "4.1.0",
    "leaflet": "1.9.4",
@@ -122,7 +122,7 @@
    "lit": "3.3.0",
    "lit-html": "3.3.0",
    "luxon": "3.6.1",
-    "marked": "15.0.11",
+    "marked": "15.0.12",
    "memoize-one": "6.0.0",
    "node-vibrant": "4.0.3",
    "object-hash": "3.0.0",
@@ -131,13 +131,12 @@
    "qrcode": "1.5.4",
    "roboto-fontface": "0.10.0",
    "rrule": "2.8.1",
-    "sortablejs": "patch:sortablejs@npm%3A1.15.3#~/.yarn/patches/sortablejs-npm-1.15.3-3235a8f83b.patch",
+    "sortablejs": "patch:sortablejs@npm%3A1.15.6#~/.yarn/patches/sortablejs-npm-1.15.6-3235a8f83b.patch",
    "stacktrace-js": "2.0.2",
    "superstruct": "2.0.2",
    "tinykeys": "3.0.0",
    "ua-parser-js": "2.0.3",
    "vis-data": "7.1.9",
-    "vis-network": "9.1.9",
    "vue": "2.7.16",
    "vue2-daterange-picker": "0.6.8",
    "weekstart": "2.0.0",
@@ -150,27 +149,27 @@
    "xss": "1.0.15"
  },
  "devDependencies": {
-    "@babel/core": "7.26.10",
+    "@babel/core": "7.27.4",
    "@babel/helper-define-polyfill-provider": "0.6.4",
-    "@babel/plugin-transform-runtime": "7.26.10",
-    "@babel/preset-env": "7.26.9",
-    "@bundle-stats/plugin-webpack-filter": "4.19.1",
-    "@lokalise/node-api": "14.4.0",
-    "@octokit/auth-oauth-device": "7.1.5",
-    "@octokit/plugin-retry": "7.2.1",
-    "@octokit/rest": "21.1.1",
-    "@rsdoctor/rspack-plugin": "1.0.2",
-    "@rspack/cli": "1.3.7",
-    "@rspack/core": "1.3.7",
+    "@babel/plugin-transform-runtime": "7.27.4",
+    "@babel/preset-env": "7.27.2",
+    "@bundle-stats/plugin-webpack-filter": "4.20.2",
+    "@lokalise/node-api": "14.8.0",
+    "@octokit/auth-oauth-device": "8.0.1",
+    "@octokit/plugin-retry": "8.0.1",
+    "@octokit/rest": "22.0.0",
+    "@rsdoctor/rspack-plugin": "1.1.3",
+    "@rspack/cli": "1.3.12",
+    "@rspack/core": "1.3.12",
    "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.21",
+    "@types/chromecast-caf-receiver": "6.0.22",
    "@types/chromecast-caf-sender": "1.0.11",
    "@types/color-name": "2.0.0",
    "@types/glob": "8.1.0",
    "@types/html-minifier-terser": "7.0.2",
    "@types/js-yaml": "4.0.9",
-    "@types/leaflet": "1.9.17",
-    "@types/leaflet-draw": "1.0.11",
+    "@types/leaflet": "1.9.18",
+    "@types/leaflet-draw": "1.0.12",
    "@types/leaflet.markercluster": "1.5.5",
    "@types/lodash.merge": "4.6.9",
    "@types/luxon": "3.6.2",
@@ -180,24 +179,24 @@
    "@types/tar": "6.1.13",
    "@types/ua-parser-js": "0.7.39",
    "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "3.1.2",
+    "@vitest/coverage-v8": "3.2.2",
    "babel-loader": "10.0.0",
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.3",
    "del": "8.0.0",
-    "eslint": "9.25.1",
+    "eslint": "9.28.0",
    "eslint-config-airbnb-base": "15.0.0",
-    "eslint-config-prettier": "10.1.2",
+    "eslint-config-prettier": "10.1.5",
    "eslint-import-resolver-webpack": "0.13.10",
    "eslint-plugin-import": "2.31.0",
    "eslint-plugin-lit": "2.1.1",
    "eslint-plugin-lit-a11y": "4.1.4",
    "eslint-plugin-unused-imports": "4.1.4",
-    "eslint-plugin-wc": "3.0.0",
+    "eslint-plugin-wc": "3.0.1",
    "fancy-log": "2.0.0",
    "fs-extra": "11.3.0",
    "glob": "11.0.2",
-    "gulp": "5.0.0",
+    "gulp": "5.0.1",
    "gulp-brotli": "3.0.0",
    "gulp-json-transform": "0.5.0",
    "gulp-rename": "2.0.0",
@@ -205,7 +204,7 @@
    "husky": "9.1.7",
    "jsdom": "26.1.0",
    "jszip": "3.10.1",
-    "lint-staged": "15.5.1",
+    "lint-staged": "16.1.0",
    "lit-analyzer": "2.0.3",
    "lodash.merge": "4.6.2",
    "lodash.template": "4.5.0",
@@ -219,9 +218,9 @@
    "terser-webpack-plugin": "5.3.14",
    "ts-lit-plugin": "2.0.2",
    "typescript": "5.8.3",
-    "typescript-eslint": "8.31.0",
+    "typescript-eslint": "8.33.1",
    "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.1.2",
+    "vitest": "3.2.2",
    "webpack-stats-plugin": "1.1.3",
    "webpackbar": "7.0.0",
    "workbox-build": "patch:workbox-build@npm%3A7.1.1#~/.yarn/patches/workbox-build-npm-7.1.1-a854f3faae.patch"
@@ -233,9 +232,9 @@
    "clean-css": "5.3.3",
    "@lit/reactive-element": "2.1.0",
    "@fullcalendar/daygrid": "6.1.17",
-    "globals": "16.0.0",
+    "globals": "16.2.0",
    "tslib": "2.8.1",
    "@material/mwc-list@^0.27.0": "patch:@material/mwc-list@npm%3A0.27.0#~/.yarn/patches/@material-mwc-list-npm-0.27.0-5344fc9de4.patch"
  },
-  "packageManager": "yarn@4.9.1"
+  "packageManager": "yarn@4.9.2"
 }
@@ -1,13 +1,13 @@
 <svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M76.9105 39.4999C77.739 39.4999 78.4105 38.8283 78.4105 37.9999C78.4105 37.1715 77.739 36.4999 76.9105 36.4999V39.4999ZM37.5 39.4999L76.9105 39.4999V36.4999L37.5 36.4999L37.5 39.4999Z" fill="#00AFFF" fill-opacity="0.3"/>
+<path d="M76.9105 39.4999C77.739 39.4999 78.4105 38.8284 78.4105 37.9999C78.4105 37.1715 77.739 36.4999 76.9105 36.4999V39.4999ZM37.5 37.9999L37.5 39.4999L76.9105 39.4999V37.9999V36.4999L37.5 36.4999L37.5 37.9999Z" fill="#00AFFF" fill-opacity="0.3"/>
 <path d="M30.8239 22.3365L38.8239 38.8365L30.3239 50.3365" stroke="black" stroke-opacity="0.12" stroke-width="3" stroke-linecap="round"/>
-<mask id="mask0_1110_23734" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
+<mask id="mask0_2_779" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
 <path d="M45.75 42.075C45.75 42.4462 45.4462 42.75 45.075 42.75H32.925C32.5538 42.75 32.25 42.4462 32.25 42.075V36.675C32.25 36.3037 32.4649 35.7851 32.7276 35.5224L38.5224 29.7275C38.7851 29.4649 39.2143 29.4649 39.477 29.7275L45.2724 35.523C45.5351 35.7857 45.75 36.3043 45.75 36.6755V42.075Z" fill="black"/>
 </mask>
-<g mask="url(#mask0_1110_23734)">
-<rect x="30" y="27" width="18" height="18" fill="#212121"/>
+<g mask="url(#mask0_2_779)">
+<rect x="30" y="27" width="18" height="18" fill="#00AFFF"/>
 </g>
-<path d="M82 37.9999C82 36.343 83.3431 34.9999 85 34.9999C86.6569 34.9999 88 36.343 88 37.9999C88 39.6567 86.6569 40.9999 85 40.9999C83.3431 40.9999 82 39.6567 82 37.9999Z" stroke="#00AFFF" stroke-width="2"/>
+<path d="M85 34.9999C86.6569 34.9999 88 36.343 88 37.9999C88 39.6567 86.6569 40.9999 85 40.9999C83.3431 40.9999 82 39.6567 82 37.9999C82 36.343 83.3431 34.9999 85 34.9999Z" stroke="#00AFFF" stroke-width="2"/>
 <rect x="23" y="11" width="8" height="8" rx="4" fill="black" fill-opacity="0.32"/>
 <rect x="22" y="52" width="8" height="8" rx="4" fill="black" fill-opacity="0.32"/>
 <path d="M21.5715 19.5C17.4983 23.801 15 29.6087 15 36C15 41.9085 17.1351 47.3183 20.6759 51.5" stroke="black" stroke-opacity="0.12" stroke-width="3" stroke-linecap="round"/>
@@ -1,19 +1,19 @@
 <svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M63.1358 38.5084C63.9608 38.4334 64.5688 37.7037 64.4938 36.8787C64.4188 36.0537 63.6892 35.4457 62.8642 35.5207L63.1358 38.5084ZM46.6358 40.0084L63.1358 38.5084L62.8642 35.5207L46.3642 37.0207L46.6358 40.0084Z" fill="#00AFFF" fill-opacity="0.3"/>
-<path d="M38.5 22L45.9722 37.4115C46.2967 38.0807 46.223 38.8747 45.781 39.4728L38 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<circle cx="47" cy="36" r="34" fill="white"/>
-<circle cx="47" cy="36" r="33.5" stroke="black" stroke-opacity="0.12"/>
-<path d="M41.8777 12.5216C43.4905 12.1798 45.1631 12 46.8777 12C58.2401 12 67.7582 19.8959 70.2445 30.5M40 59C42.1788 59.6506 44.4874 60 46.8777 60C56.9498 60 65.5728 53.7955 69.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<path d="M38.5 22L45.9722 37.4115C46.2967 38.0807 46.223 38.8747 45.781 39.4728L38 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<mask id="mask0_1110_23775" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="38" y="27" width="18" height="18">
-<path d="M53.75 42.075C53.75 42.4462 53.4462 42.75 53.075 42.75H40.925C40.5538 42.75 40.25 42.4462 40.25 42.075V36.675C40.25 36.3037 40.4649 35.7851 40.7276 35.5224L46.5224 29.7275C46.7851 29.4649 47.2143 29.4649 47.477 29.7275L53.2724 35.523C53.5351 35.7857 53.75 36.3043 53.75 36.6755V42.075Z" fill="black"/>
+<path d="M55.1358 38.5084C55.9608 38.4334 56.5688 37.7038 56.4938 36.8788C56.4188 36.0538 55.6892 35.4457 54.8642 35.5207L55.1358 38.5084ZM38.5 38.5146L38.6358 40.0084L55.1358 38.5084L55 37.0146L54.8642 35.5207L38.3642 37.0207L38.5 38.5146Z" fill="#00AFFF" fill-opacity="0.3"/>
+<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<circle cx="39" cy="36" r="34" fill="white"/>
+<circle cx="39" cy="36" r="33.5" stroke="black" stroke-opacity="0.12"/>
+<path d="M33.8777 12.5216C35.4905 12.1798 37.1631 12 38.8777 12C50.2401 12 59.7582 19.8959 62.2445 30.5M32 59C34.1788 59.6506 36.4874 60 38.8777 60C48.9498 60 57.5728 53.7955 61.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<mask id="mask0_2_810" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
+<path d="M45.75 42.075C45.75 42.4462 45.4463 42.75 45.075 42.75H32.925C32.5538 42.75 32.25 42.4462 32.25 42.075V36.675C32.25 36.3037 32.4649 35.7851 32.7276 35.5224L38.5224 29.7275C38.7851 29.4649 39.2143 29.4649 39.477 29.7275L45.2724 35.523C45.5351 35.7857 45.75 36.3043 45.75 36.6755V42.075Z" fill="black"/>
 </mask>
-<g mask="url(#mask0_1110_23775)">
-<rect x="38" y="27" width="18" height="18" fill="#212121"/>
+<g mask="url(#mask0_2_810)">
+<rect x="30" y="27" width="18" height="18" fill="#00AFFF"/>
 </g>
-<path d="M63.5 39.4999C64.3284 39.4999 65 38.8283 65 37.9999C65 37.1715 64.3284 36.4999 63.5 36.4999L63.5 39.4999ZM49.5 39.4999L63.5 39.4999L63.5 36.4999L49.5 36.4999L49.5 39.4999Z" fill="#00AFFF" fill-opacity="0.3"/>
-<rect x="31" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
-<rect x="30" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
-<path d="M29.5715 19.5C25.4983 23.801 23 29.6087 23 36C23 41.9085 25.1351 47.3183 28.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<path d="M68 37.9999C68 36.343 69.3431 34.9999 71 34.9999C72.6569 34.9999 74 36.343 74 37.9999C74 39.6567 72.6569 40.9999 71 40.9999C69.3431 40.9999 68 39.6567 68 37.9999Z" stroke="#00AFFF" stroke-width="2"/>
+<path d="M55.5 39.4999C56.3284 39.4999 57 38.8283 57 37.9999C57 37.1715 56.3284 36.4999 55.5 36.4999L55.5 39.4999ZM41.5 37.9999L41.5 39.4999L55.5 39.4999L55.5 37.9999L55.5 36.4999L41.5 36.4999L41.5 37.9999Z" fill="#00AFFF" fill-opacity="0.3"/>
+<rect x="23" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
+<rect x="22" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
+<path d="M21.5715 19.5C17.4983 23.801 15 29.6087 15 36C15 41.9085 17.1351 47.3183 20.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M63 34.9999C64.6569 34.9999 66 36.343 66 37.9999C66 39.6567 64.6569 40.9999 63 40.9999C61.3431 40.9999 60 39.6567 60 37.9999C60 36.343 61.3431 34.9999 63 34.9999Z" stroke="#00AFFF" stroke-width="2"/>
 </svg>
@@ -1,19 +1,18 @@
 <svg width="94" height="72" viewBox="0 0 94 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M63.1358 38.5084C63.9608 38.4334 64.5688 37.7037 64.4938 36.8787C64.4188 36.0537 63.6892 35.4457 62.8642 35.5207L63.1358 38.5084ZM46.6358 40.0084L63.1358 38.5084L62.8642 35.5207L46.3642 37.0207L46.6358 40.0084Z" fill="#00AFFF" fill-opacity="0.3"/>
-<path d="M38.5 22L45.9722 37.4115C46.2967 38.0807 46.223 38.8747 45.781 39.4728L38 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<circle cx="47" cy="36" r="34" fill="#1C1C1C"/>
-<circle cx="47" cy="36" r="33.5" stroke="white" stroke-opacity="0.24"/>
-<path d="M41.8777 12.5216C43.4905 12.1798 45.1631 12 46.8777 12C58.2401 12 67.7582 19.8959 70.2445 30.5M40 59C42.1788 59.6506 44.4874 60 46.8777 60C56.9498 60 65.5728 53.7955 69.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<path d="M38.5 22L45.9722 37.4115C46.2967 38.0807 46.223 38.8747 45.781 39.4728L38 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<mask id="mask0_1180_4965" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="38" y="27" width="18" height="18">
-<path d="M53.75 42.075C53.75 42.4462 53.4462 42.75 53.075 42.75H40.925C40.5538 42.75 40.25 42.4462 40.25 42.075V36.675C40.25 36.3037 40.4649 35.7851 40.7276 35.5224L46.5224 29.7275C46.7851 29.4649 47.2143 29.4649 47.477 29.7275L53.2724 35.523C53.5351 35.7857 53.75 36.3043 53.75 36.6755V42.075Z" fill="black"/>
+<path d="M55.1358 38.5084C55.9608 38.4334 56.5688 37.7038 56.4938 36.8788C56.4188 36.0538 55.6892 35.4457 54.8642 35.5207L55.1358 38.5084ZM38.5 38.5146L38.6358 40.0084L55.1358 38.5084L55 37.0146L54.8642 35.5207L38.3642 37.0207L38.5 38.5146Z" fill="#00AFFF" fill-opacity="0.3"/>
+<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<circle cx="39" cy="36" r="33.5" stroke="white" stroke-opacity="0.24"/>
+<path d="M33.8777 12.5216C35.4905 12.1798 37.1631 12 38.8777 12C50.2401 12 59.7582 19.8959 62.2445 30.5M32 59C34.1788 59.6506 36.4874 60 38.8777 60C48.9498 60 57.5728 53.7955 61.1332 45" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M30.5 22L37.9722 37.4115C38.2967 38.0807 38.223 38.8747 37.781 39.4728L30 50" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<mask id="mask0_2_810" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="27" width="18" height="18">
+<path d="M45.75 42.075C45.75 42.4462 45.4463 42.75 45.075 42.75H32.925C32.5538 42.75 32.25 42.4462 32.25 42.075V36.675C32.25 36.3037 32.4649 35.7851 32.7276 35.5224L38.5224 29.7275C38.7851 29.4649 39.2143 29.4649 39.477 29.7275L45.2724 35.523C45.5351 35.7857 45.75 36.3043 45.75 36.6755V42.075Z" fill="black"/>
 </mask>
-<g mask="url(#mask0_1180_4965)">
-<rect x="38" y="27" width="18" height="18" fill="#00AFFF"/>
+<g mask="url(#mask0_2_810)">
+<rect x="30" y="27" width="18" height="18" fill="#00AFFF"/>
 </g>
-<path d="M63.5 39.4999C64.3284 39.4999 65 38.8283 65 37.9999C65 37.1715 64.3284 36.4999 63.5 36.4999L63.5 39.4999ZM49.5 39.4999L63.5 39.4999L63.5 36.4999L49.5 36.4999L49.5 39.4999Z" fill="#00AFFF" fill-opacity="0.3"/>
-<rect x="31" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
-<rect x="30" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
-<path d="M29.5715 19.5C25.4983 23.801 23 29.6087 23 36C23 41.9085 25.1351 47.3183 28.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
-<path d="M68 37.9999C68 36.343 69.3431 34.9999 71 34.9999C72.6569 34.9999 74 36.343 74 37.9999C74 39.6567 72.6569 40.9999 71 40.9999C69.3431 40.9999 68 39.6567 68 37.9999Z" stroke="#00AFFF" stroke-width="2"/>
+<path d="M55.5 39.4999C56.3284 39.4999 57 38.8283 57 37.9999C57 37.1715 56.3284 36.4999 55.5 36.4999L55.5 39.4999ZM41.5 37.9999L41.5 39.4999L55.5 39.4999L55.5 37.9999L55.5 36.4999L41.5 36.4999L41.5 37.9999Z" fill="#00AFFF" fill-opacity="0.3"/>
+<rect x="23" y="11" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
+<rect x="22" y="52" width="8" height="8" rx="4" fill="#00AFFF" fill-opacity="0.6"/>
+<path d="M21.5715 19.5C17.4983 23.801 15 29.6087 15 36C15 41.9085 17.1351 47.3183 20.6759 51.5" stroke="#00AFFF" stroke-opacity="0.3" stroke-width="3" stroke-linecap="round" stroke-linejoin="bevel"/>
+<path d="M63 34.9999C64.6569 34.9999 66 36.343 66 37.9999C66 39.6567 64.6569 40.9999 63 40.9999C61.3431 40.9999 60 39.6567 60 37.9999C60 36.343 61.3431 34.9999 63 34.9999Z" stroke="#00AFFF" stroke-width="2"/>
 </svg>
@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"

 [project]
 name         = "home-assistant-frontend"
-version      = "20250326.0"
+version      = "20250430.0"
 license      = "Apache-2.0"
 license-files = ["LICENSE*"]
 description  = "The Home Assistant frontend"
@@ -101,7 +101,7 @@ export class HaAuthFlow extends LitElement {
        a.forgot-password {
          color: var(--primary-color);
          text-decoration: none;
-          font-size: var(--ha-font-size-s);
+          font-size: 0.875rem;
        }
        .space-between {
          display: flex;
@@ -9,6 +9,7 @@ import type { LitElement } from "lit";
 */
 export interface DragScrollControllerConfig {
  selector: string;
+  enabled?: boolean;
 }

 export class DragScrollController implements ReactiveController {
@@ -28,19 +29,47 @@ export class DragScrollController implements ReactiveController {

  private _scrollContainer?: HTMLElement | null;

+  private _enabled = true;
+
+  public get enabled(): boolean {
+    return this._enabled;
+  }
+
+  public set enabled(value: boolean) {
+    if (value === this._enabled) {
+      return;
+    }
+    this._enabled = value;
+    if (this._enabled) {
+      this._attach();
+    } else {
+      this._detach();
+    }
+    this._host.requestUpdate();
+  }
+
  constructor(
    host: ReactiveControllerHost & LitElement,
-    { selector }: DragScrollControllerConfig
+    { selector, enabled }: DragScrollControllerConfig
  ) {
    this._selector = selector;
    this._host = host;
+    this.enabled = enabled ?? true;
    host.addController(this);
  }

  hostUpdated() {
-    if (this._scrollContainer) {
+    if (!this.enabled || this._scrollContainer) {
      return;
    }
+    this._attach();
+  }
+
+  hostDisconnected() {
+    this._detach();
+  }
+
+  private _attach() {
    this._scrollContainer = this._host.renderRoot?.querySelector(
      this._selector
    );
@@ -49,9 +78,18 @@ export class DragScrollController implements ReactiveController {
    }
  }

-  hostDisconnected() {
+  private _detach() {
    window.removeEventListener("mousemove", this._mouseMove);
    window.removeEventListener("mouseup", this._mouseUp);
+    if (this._scrollContainer) {
+      this._scrollContainer.removeEventListener("mousedown", this._mouseDown);
+      this._scrollContainer = undefined;
+    }
+    this.scrolled = false;
+    this.scrolling = false;
+    this.mouseIsDown = false;
+    this.scrollStartX = 0;
+    this.scrollLeft = 0;
  }

  private _mouseDown = (event: MouseEvent) => {
@@ -1,6 +1,5 @@
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { ReactiveElement } from "lit";
-import type { InternalPropertyDeclaration } from "lit/decorators";
+import type { ReactiveElement } from "lit";

 type Callback = (oldValue: any, newValue: any) => void;

@@ -108,7 +107,6 @@ export function storage(options: {
  storage?: "localStorage" | "sessionStorage";
  subscribe?: boolean;
  state?: boolean;
-  stateOptions?: InternalPropertyDeclaration;
  serializer?: (value: any) => any;
  deserializer?: (value: any) => any;
 }) {
@@ -174,7 +172,7 @@ export function storage(options: {
      performUpdate.call(this);
    };

-    if (options.state && options.subscribe) {
+    if (options.subscribe) {
      const connectedCallback = proto.connectedCallback;
      const disconnectedCallback = proto.disconnectedCallback;

@@ -192,12 +190,6 @@ export function storage(options: {
        el.__unbsubLocalStorage = undefined;
      };
    }
-    if (options.state) {
-      ReactiveElement.createProperty(propertyKey, {
-        noAccessor: true,
-        ...options.stateOptions,
-      });
-    }

    const descriptor = Object.getOwnPropertyDescriptor(proto, propertyKey);
    let newDescriptor: PropertyDescriptor;
@@ -1,10 +1,4 @@
-import {
-  ReactiveElement,
-  type PropertyDeclaration,
-  type PropertyValues,
-} from "lit";
-import { shallowEqual } from "../util/shallow-equal";
-
+import type { ReactiveElement, PropertyValues } from "lit";
 /**
 * Transform function type.
 */
@@ -23,7 +17,6 @@ type ReactiveTransformElement = ReactiveElement & {
 export function transform<T, V>(config: {
  transformer: Transformer<T, V>;
  watch?: PropertyKey[];
-  propertyOptions?: PropertyDeclaration;
 }) {
  return <ElemClass extends ReactiveElement>(
    proto: ElemClass,
@@ -84,11 +77,6 @@ export function transform<T, V>(config: {
        curWatch.add(propertyKey);
      });
    }
-    ReactiveElement.createProperty(propertyKey, {
-      noAccessor: true,
-      hasChanged: (v: any, o: any) => !shallowEqual(v, o),
-      ...config.propertyOptions,
-    });

    const descriptor = Object.getOwnPropertyDescriptor(proto, propertyKey);
    let newDescriptor: PropertyDescriptor;
@@ -0,0 +1,36 @@
+export const canOverrideAlphanumericInput = (composedPath: EventTarget[]) => {
+  if (
+    composedPath.some(
+      (el) =>
+        "tagName" in el &&
+        (el.tagName === "HA-MENU" || el.tagName === "HA-CODE-EDITOR")
+    )
+  ) {
+    return false;
+  }
+
+  const el = composedPath[0] as Element;
+
+  if (el.tagName === "TEXTAREA") {
+    return false;
+  }
+
+  if (el.parentElement?.tagName === "HA-SELECT") {
+    return false;
+  }
+
+  if (el.tagName !== "INPUT") {
+    return true;
+  }
+
+  switch ((el as HTMLInputElement).type) {
+    case "button":
+    case "checkbox":
+    case "hidden":
+    case "radio":
+    case "range":
+      return true;
+    default:
+      return false;
+  }
+};
@@ -6,34 +6,15 @@ interface AreaContext {
  area: AreaRegistryEntry | null;
  floor: FloorRegistryEntry | null;
 }
-
-/**
- * Retrieves the context of a specific area, including its associated area registry entry
- * and floor registry entry, if available.
- *
- * @param areaId - The unique identifier of the area to retrieve context for.
- * @param hass - The Home Assistant instance containing area and floor registry data.
- * @returns An object containing the area registry entry and the associated floor registry entry,
- *          or `null` values if the area or floor is not found.
- */
 export const getAreaContext = (
-  areaId: string,
+  area: AreaRegistryEntry,
  hass: HomeAssistant
 ): AreaContext => {
-  const area = (hass.areas[areaId] as AreaRegistryEntry | undefined) || null;
-
-  if (!area) {
-    return {
-      area: null,
-      floor: null,
-    };
-  }
-
-  const floorId = area?.floor_id;
-  const floor = floorId ? hass.floors[floorId] : null;
+  const floorId = area.floor_id;
+  const floor = floorId ? hass.floors[floorId] : undefined;

  return {
    area: area,
-    floor: floor,
+    floor: floor || null,
  };
 };
@@ -0,0 +1,26 @@
+import type { AreaRegistryEntry } from "../../../data/area_registry";
+import type { DeviceRegistryEntry } from "../../../data/device_registry";
+import type { FloorRegistryEntry } from "../../../data/floor_registry";
+import type { HomeAssistant } from "../../../types";
+
+interface DeviceContext {
+  device: DeviceRegistryEntry;
+  area: AreaRegistryEntry | null;
+  floor: FloorRegistryEntry | null;
+}
+
+export const getDeviceContext = (
+  device: DeviceRegistryEntry,
+  hass: HomeAssistant
+): DeviceContext => {
+  const areaId = device.area_id;
+  const area = areaId ? hass.areas[areaId] : undefined;
+  const floorId = area?.floor_id;
+  const floor = floorId ? hass.floors[floorId] : undefined;
+
+  return {
+    device: device,
+    area: area || null,
+    floor: floor || null,
+  };
+};
@@ -1,6 +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 { EntityRegistryDisplayEntry } from "../../../data/entity_registry";
+import type {
+  EntityRegistryDisplayEntry,
+  EntityRegistryEntry,
+  ExtEntityRegistryEntry,
+} from "../../../data/entity_registry";
 import type { FloorRegistryEntry } from "../../../data/floor_registry";
 import type { HomeAssistant } from "../../../types";

@@ -11,27 +16,15 @@ interface EntityContext {
  floor: FloorRegistryEntry | null;
 }

-/**
- * Retrieves the context of an entity, including its associated device, area, and floor.
- *
- * @param entityId - The unique identifier of the entity to retrieve the context for.
- * @param hass - The Home Assistant object containing the registry data for entities, devices, areas, and floors.
- * @returns An object containing the entity, its associated device, area, and floor, or `null` for each if not found.
- *
- * The returned `EntityContext` object includes:
- * - `entity`: The entity registry entry, or `null` if the entity is not found.
- * - `device`: The device registry entry associated with the entity, or `null` if not found.
- * - `area`: The area registry entry associated with the entity or device, or `null` if not found.
- * - `floor`: The floor registry entry associated with the area, or `null` if not found.
- */
 export const getEntityContext = (
-  entityId: string,
+  stateObj: HassEntity,
  hass: HomeAssistant
 ): EntityContext => {
-  const entity =
-    (hass.entities[entityId] as EntityRegistryDisplayEntry | undefined) || null;
+  const entry = hass.entities[stateObj.entity_id] as
+    | EntityRegistryDisplayEntry
+    | undefined;

-  if (!entity) {
+  if (!entry) {
    return {
      entity: null,
      device: null,
@@ -39,18 +32,28 @@ export const getEntityContext = (
      floor: null,
    };
  }
+  return getEntityEntryContext(entry, hass);
+};

-  const deviceId = entity?.device_id;
-  const device = deviceId ? hass.devices[deviceId] : null;
-  const areaId = entity?.area_id || device?.area_id;
-  const area = areaId ? hass.areas[areaId] : null;
+export const getEntityEntryContext = (
+  entry:
+    | EntityRegistryDisplayEntry
+    | EntityRegistryEntry
+    | ExtEntityRegistryEntry,
+  hass: HomeAssistant
+): EntityContext => {
+  const entity = hass.entities[entry.entity_id];
+  const deviceId = entry?.device_id;
+  const device = deviceId ? hass.devices[deviceId] : undefined;
+  const areaId = entry?.area_id || device?.area_id;
+  const area = areaId ? hass.areas[areaId] : undefined;
  const floorId = area?.floor_id;
-  const floor = floorId ? hass.floors[floorId] : null;
+  const floor = floorId ? hass.floors[floorId] : undefined;

  return {
    entity: entity,
-    device: device,
-    area: area,
-    floor: floor,
+    device: device || null,
+    area: area || null,
+    floor: floor || null,
  };
 };
@@ -60,7 +60,7 @@ export const generateEntityFilter = (
      }
    }

-    const { area, floor, device, entity } = getEntityContext(entityId, hass);
+    const { area, floor, device, entity } = getEntityContext(stateObj, hass);

    if (entity && entity.hidden) {
      return false;
@@ -1,18 +0,0 @@
-import type { AreaRegistryEntry } from "../../data/area_registry";
-import type { FloorRegistryEntry } from "../../data/floor_registry";
-import type { HomeAssistant } from "../../types";
-
-interface AreaContext {
-  floor: FloorRegistryEntry | null;
-}
-export const getAreaContext = (
-  area: AreaRegistryEntry,
-  hass: HomeAssistant
-): AreaContext => {
-  const floorId = area.floor_id;
-  const floor = floorId ? hass.floors[floorId] : null;
-
-  return {
-    floor: floor,
-  };
-};
@@ -1,24 +0,0 @@
-import type { AreaRegistryEntry } from "../../data/area_registry";
-import type { DeviceRegistryEntry } from "../../data/device_registry";
-import type { FloorRegistryEntry } from "../../data/floor_registry";
-import type { HomeAssistant } from "../../types";
-
-interface DeviceContext {
-  area: AreaRegistryEntry | null;
-  floor: FloorRegistryEntry | null;
-}
-
-export const getDeviceContext = (
-  device: DeviceRegistryEntry,
-  hass: HomeAssistant
-): DeviceContext => {
-  const areaId = device.area_id;
-  const area = areaId ? hass.areas[areaId] : null;
-  const floorId = area?.floor_id;
-  const floor = floorId ? hass.floors[floorId] : null;
-
-  return {
-    area: area,
-    floor: floor,
-  };
-};
@@ -1,55 +0,0 @@
-import type { HassEntity } from "home-assistant-js-websocket";
-import type { AreaRegistryEntry } from "../../data/area_registry";
-import type { DeviceRegistryEntry } from "../../data/device_registry";
-import type {
-  EntityRegistryDisplayEntry,
-  EntityRegistryEntry,
-  ExtEntityRegistryEntry,
-} from "../../data/entity_registry";
-import type { FloorRegistryEntry } from "../../data/floor_registry";
-import type { HomeAssistant } from "../../types";
-
-interface EntityContext {
-  device: DeviceRegistryEntry | null;
-  area: AreaRegistryEntry | null;
-  floor: FloorRegistryEntry | null;
-}
-
-export const getEntityContext = (
-  stateObj: HassEntity,
-  hass: HomeAssistant
-): EntityContext => {
-  const entry = hass.entities[stateObj.entity_id] as
-    | EntityRegistryDisplayEntry
-    | undefined;
-
-  if (!entry) {
-    return {
-      device: null,
-      area: null,
-      floor: null,
-    };
-  }
-  return getEntityEntryContext(entry, hass);
-};
-
-export const getEntityEntryContext = (
-  entry:
-    | EntityRegistryDisplayEntry
-    | EntityRegistryEntry
-    | ExtEntityRegistryEntry,
-  hass: HomeAssistant
-): EntityContext => {
-  const deviceId = entry?.device_id;
-  const device = deviceId ? hass.devices[deviceId] : null;
-  const areaId = entry?.area_id || device?.area_id;
-  const area = areaId ? hass.areas[areaId] : null;
-  const floorId = area?.floor_id;
-  const floor = floorId ? hass.floors[floorId] : null;
-
-  return {
-    device: device,
-    area: area,
-    floor: floor,
-  };
-};
@@ -2,7 +2,6 @@ import type { HassEntity } from "home-assistant-js-websocket";
 import { computeStateDomain } from "./compute_state_domain";
 import { updateIcon } from "./update_icon";
 import { deviceTrackerIcon } from "./device_tracker_icon";
-import { batteryIcon } from "./battery_icon";

 export const stateIcon = (
  stateObj: HassEntity,
@@ -10,17 +9,10 @@ export const stateIcon = (
 ): string | undefined => {
  const domain = computeStateDomain(stateObj);
  const compareState = state ?? stateObj.state;
-  const dc = stateObj.attributes.device_class;
  switch (domain) {
    case "update":
      return updateIcon(stateObj, compareState);

-    case "sensor":
-      if (dc === "battery") {
-        return batteryIcon(stateObj, compareState);
-      }
-      break;
-
    case "device_tracker":
      return deviceTrackerIcon(stateObj, compareState);

@@ -0,0 +1,4 @@
+const validServiceId = /^(\w+)\.(\w+)$/;
+
+export const isValidServiceId = (actionId: string) =>
+  validServiceId.test(actionId);
@@ -96,7 +96,7 @@ const customGenerator = (colors: Swatch[]) => {
    // eslint-disable-next-line no-console
    console.log(
      "%cPicked colors",
-      `color: ${foregroundColor}; background-color: ${backgroundColor.hex}; font-weight: var(--ha-font-weight-bold); padding: 16px;`
+      `color: ${foregroundColor}; background-color: ${backgroundColor.hex}; font-weight: bold; padding: 16px;`
    );
    colors.forEach((color) => logColor(color));
    // eslint-disable-next-line no-console
@@ -1,9 +1,19 @@
 // https://gist.github.com/hagemann/382adfc57adbd5af078dc93feef01fe1
 export const slugify = (value: string, delimiter = "_") => {
  const a =
-    "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìıİłḿñńǹňôöòóœøōõőṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·";
-  const b = `aaaaaaaaaacccddeeeeeeeegghiiiiiiiilmnnnnoooooooooprrsssssttuuuuuuuuuwxyyzzz${delimiter}`;
+    "àáâäæãåāăąабçćčđďдèéêëēėęěеёэфğǵгḧхîïíīįìıİийкłлḿмñńǹňнôöòóœøōõőоṕпŕřрßśšşșсťțтûüùúūǘůűųувẃẍÿýыžźżз·";
+  const b = `aaaaaaaaaaabcccdddeeeeeeeeeeefggghhiiiiiiiiijkllmmnnnnnoooooooooopprrrsssssstttuuuuuuuuuuvwxyyyzzzz${delimiter}`;
  const p = new RegExp(a.split("").join("|"), "g");
+  const complex_cyrillic = {
+    ж: "zh",
+    х: "kh",
+    ц: "ts",
+    ч: "ch",
+    ш: "sh",
+    щ: "shch",
+    ю: "iu",
+    я: "ia",
+  };

  let slugified;

@@ -14,6 +24,7 @@ export const slugify = (value: string, delimiter = "_") => {
      .toString()
      .toLowerCase()
      .replace(p, (c) => b.charAt(a.indexOf(c))) // Replace special characters
+      .replace(/[а-я]/g, (c) => complex_cyrillic[c] || "") // Replace some cyrillic characters
      .replace(/(\d),(?=\d)/g, "$1") // Remove Commas between numbers
      .replace(/[^a-z0-9]+/g, delimiter) // Replace all non-word characters
      .replace(new RegExp(`(${delimiter})\\1+`, "g"), "$1") // Replace multiple delimiters with single delimiter
@@ -2,7 +2,7 @@ import type { CSSResult } from "lit";

 const _extractCssVars = (
  cssString: string,
-  condition: (string) => boolean = () => true
+  condition: (string: string) => boolean = () => true
 ) => {
  const variables: Record<string, string> = {};

@@ -0,0 +1,14 @@
+import { html } from "lit";
+import type { LocalizeFunc } from "./localize";
+
+const MARKDOWN_SUPPORT_URL = "https://commonmark.org/help/";
+
+export const supportsMarkdownHelper = (localize: LocalizeFunc) =>
+  localize("ui.common.supports_markdown", {
+    markdown_help_link: html`<a
+      href=${MARKDOWN_SUPPORT_URL}
+      target="_blank"
+      rel="noreferrer"
+      >${localize("ui.common.markdown")}</a
+    >`,
+  });
@@ -0,0 +1,72 @@
+import type { LineSeriesOption } from "echarts";
+
+export function downSampleLineData(
+  data: LineSeriesOption["data"],
+  chartWidth: number,
+  minX?: number,
+  maxX?: number
+) {
+  if (!data || data.length < 10) {
+    return data;
+  }
+  const width = chartWidth * window.devicePixelRatio;
+  if (data.length <= width) {
+    return data;
+  }
+  const min = minX ?? getPointData(data[0]!)[0];
+  const max = maxX ?? getPointData(data[data.length - 1]!)[0];
+  const step = Math.floor((max - min) / width);
+  const frames = new Map<
+    number,
+    {
+      min: { point: (typeof data)[number]; x: number; y: number };
+      max: { point: (typeof data)[number]; x: number; y: number };
+    }
+  >();
+
+  // Group points into frames
+  for (const point of data) {
+    const pointData = getPointData(point);
+    if (!Array.isArray(pointData)) continue;
+    const x = Number(pointData[0]);
+    const y = Number(pointData[1]);
+    if (isNaN(x) || isNaN(y)) continue;
+
+    const frameIndex = Math.floor((x - min) / step);
+    const frame = frames.get(frameIndex);
+    if (!frame) {
+      frames.set(frameIndex, { min: { point, x, y }, max: { point, x, y } });
+    } else {
+      if (frame.min.y > y) {
+        frame.min = { point, x, y };
+      }
+      if (frame.max.y < y) {
+        frame.max = { point, x, y };
+      }
+    }
+  }
+
+  // Convert frames back to points
+  const result: typeof data = [];
+  for (const [_i, frame] of frames) {
+    // Use min/max points to preserve visual accuracy
+    // The order of the data must be preserved so max may be before min
+    if (frame.min.x > frame.max.x) {
+      result.push(frame.max.point);
+    }
+    result.push(frame.min.point);
+    if (frame.min.x < frame.max.x) {
+      result.push(frame.max.point);
+    }
+  }
+
+  return result;
+}
+
+function getPointData(point: NonNullable<LineSeriesOption["data"]>[number]) {
+  const pointData =
+    point && typeof point === "object" && "value" in point
+      ? point.value
+      : point;
+  return pointData as number[];
+}
@@ -27,6 +27,7 @@ import "../ha-icon-button";
 import { formatTimeLabel } from "./axis-label";
 import { ensureArray } from "../../common/array/ensure-array";
 import "../chips/ha-assist-chip";
+import { downSampleLineData } from "./down-sample";

 export const MIN_TIME_BETWEEN_UPDATES = 60 * 5 * 1000;
 const LEGEND_OVERFLOW_LIMIT = 10;
@@ -48,7 +49,8 @@ export class HaChartBase extends LitElement {
  @property({ attribute: "expand-legend", type: Boolean })
  public expandLegend?: boolean;

-  @property({ attribute: false }) public extraComponents?: any[];
+  // extraComponents is not reactive and should not trigger updates
+  public extraComponents?: any[];

  @state()
  @consume({ context: themesContext, subscribe: true })
@@ -106,48 +108,49 @@ export class HaChartBase extends LitElement {
      })
    );

-    // Add keyboard event listeners
-    const handleKeyDown = (ev: KeyboardEvent) => {
-      if (
-        !this._modifierPressed &&
-        ((isMac && ev.key === "Meta") || (!isMac && ev.key === "Control"))
-      ) {
-        this._modifierPressed = true;
-        if (!this.options?.dataZoom) {
-          this._setChartOptions({ dataZoom: this._getDataZoomConfig() });
+    if (!this.options?.dataZoom) {
+      // Add keyboard event listeners
+      const handleKeyDown = (ev: KeyboardEvent) => {
+        if (
+          !this._modifierPressed &&
+          ((isMac && ev.key === "Meta") || (!isMac && ev.key === "Control"))
+        ) {
+          this._modifierPressed = true;
+          if (!this.options?.dataZoom) {
+            this._setChartOptions({ dataZoom: this._getDataZoomConfig() });
+          }
+          // drag to zoom
+          this.chart?.dispatchAction({
+            type: "takeGlobalCursor",
+            key: "dataZoomSelect",
+            dataZoomSelectActive: true,
+          });
        }
-        // drag to zoom
-        this.chart?.dispatchAction({
-          type: "takeGlobalCursor",
-          key: "dataZoomSelect",
-          dataZoomSelectActive: true,
-        });
-      }
-    };
+      };

-    const handleKeyUp = (ev: KeyboardEvent) => {
-      if (
-        this._modifierPressed &&
-        ((isMac && ev.key === "Meta") || (!isMac && ev.key === "Control"))
-      ) {
-        this._modifierPressed = false;
-        if (!this.options?.dataZoom) {
-          this._setChartOptions({ dataZoom: this._getDataZoomConfig() });
+      const handleKeyUp = (ev: KeyboardEvent) => {
+        if (
+          this._modifierPressed &&
+          ((isMac && ev.key === "Meta") || (!isMac && ev.key === "Control"))
+        ) {
+          this._modifierPressed = false;
+          if (!this.options?.dataZoom) {
+            this._setChartOptions({ dataZoom: this._getDataZoomConfig() });
+          }
+          this.chart?.dispatchAction({
+            type: "takeGlobalCursor",
+            key: "dataZoomSelect",
+            dataZoomSelectActive: false,
+          });
        }
-        this.chart?.dispatchAction({
-          type: "takeGlobalCursor",
-          key: "dataZoomSelect",
-          dataZoomSelectActive: false,
-        });
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    window.addEventListener("keyup", handleKeyUp);
-    this._listeners.push(
-      () => window.removeEventListener("keydown", handleKeyDown),
-      () => window.removeEventListener("keyup", handleKeyUp)
-    );
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      window.addEventListener("keyup", handleKeyUp);
+      this._listeners.push(
+        () => window.removeEventListener("keydown", handleKeyDown),
+        () => window.removeEventListener("keyup", handleKeyUp)
+      );
+    }
  }

  protected firstUpdated() {
@@ -191,16 +194,19 @@ export class HaChartBase extends LitElement {
          <div class="chart"></div>
        </div>
        ${this._renderLegend()}
-        ${this._isZoomed
-          ? html`<ha-icon-button
-              class="zoom-reset"
-              .path=${mdiRestart}
-              @click=${this._handleZoomReset}
-              title=${this.hass.localize(
-                "ui.components.history_charts.zoom_reset"
-              )}
-            ></ha-icon-button>`
-          : nothing}
+        <div class="chart-controls">
+          ${this._isZoomed
+            ? html`<ha-icon-button
+                class="zoom-reset"
+                .path=${mdiRestart}
+                @click=${this._handleZoomReset}
+                title=${this.hass.localize(
+                  "ui.components.history_charts.zoom_reset"
+                )}
+              ></ha-icon-button>`
+            : nothing}
+          <slot name="button"></slot>
+        </div>
      </div>
    `;
  }
@@ -210,15 +216,15 @@ export class HaChartBase extends LitElement {
      return nothing;
    }
    const legend = ensureArray(this.options.legend)[0] as LegendComponentOption;
-    if (!legend.show) {
+    if (!legend.show || legend.type !== "custom") {
      return nothing;
    }
    const datasets = ensureArray(this.data);
-    const items = (legend.data ||
-      datasets
+    const items: LegendComponentOption["data"] =
+      legend.data ||
+      ((datasets
        .filter((d) => (d.data as any[])?.length && (d.id || d.name))
-        .map((d) => d.name ?? d.id) ||
-      []) as string[];
+        .map((d) => d.name ?? d.id) || []) as string[]);

    const isMobile = window.matchMedia(
      "all and (max-width: 450px), all and (max-height: 500px)"
@@ -233,20 +239,32 @@ export class HaChartBase extends LitElement {
      })}
    >
      <ul>
-        ${items.map((item: string, index: number) => {
+        ${items.map((item, index) => {
          if (!this.expandLegend && index >= overflowLimit) {
            return nothing;
          }
-          const dataset = datasets.find(
-            (d) => d.id === item || d.name === item
-          );
-          const color = dataset?.color as string;
-          const borderColor = dataset?.itemStyle?.borderColor as string;
+          let itemStyle: Record<string, any> = {};
+          let name = "";
+          if (typeof item === "string") {
+            name = item;
+            const dataset = datasets.find(
+              (d) => d.id === item || d.name === item
+            );
+            itemStyle = {
+              color: dataset?.color as string,
+              ...(dataset?.itemStyle as { borderColor?: string }),
+            };
+          } else {
+            name = item.name ?? "";
+            itemStyle = item.itemStyle ?? {};
+          }
+          const color = itemStyle?.color as string;
+          const borderColor = itemStyle?.borderColor as string;
          return html`<li
-            .name=${item}
+            .name=${name}
            @click=${this._legendClick}
-            class=${classMap({ hidden: this._hiddenDatasets.has(item) })}
-            .title=${item}
+            class=${classMap({ hidden: this._hiddenDatasets.has(name) })}
+            .title=${name}
          >
            <div
              class="bullet"
@@ -255,7 +273,7 @@ export class HaChartBase extends LitElement {
                borderColor: borderColor || color,
              })}
            ></div>
-            <div class="label">${item}</div>
+            <div class="label">${name}</div>
          </li>`;
        })}
        ${items.length > overflowLimit
@@ -315,7 +333,9 @@ export class HaChartBase extends LitElement {
      this.chart.on("click", (e: ECElementEvent) => {
        fireEvent(this, "chart-click", e);
      });
-      this.chart.getZr().on("dblclick", this._handleClickZoom);
+      if (!this.options?.dataZoom) {
+        this.chart.getZr().on("dblclick", this._handleClickZoom);
+      }
      if (this._isTouchDevice) {
        this.chart.getZr().on("click", (e: ECElementEvent) => {
          if (!e.zrByTouch) {
@@ -380,9 +400,9 @@ export class HaChartBase extends LitElement {
        if (axis.type !== "time" || axis.show === false) {
          return axis;
        }
-        if (axis.max && axis.min) {
+        if (axis.min) {
          this._minutesDifference = differenceInMinutes(
-            axis.max as Date,
+            (axis.max as Date) || new Date(),
            axis.min as Date
          );
        }
@@ -410,6 +430,12 @@ export class HaChartBase extends LitElement {
        } as XAXisOption;
      });
    }
+    let legend = this.options?.legend;
+    if (legend) {
+      legend = ensureArray(legend).map((l) =>
+        l.type === "custom" ? { show: false } : l
+      );
+    }
    const options = {
      animation: !this._reducedMotion,
      darkMode: this._themes.darkMode ?? false,
@@ -424,7 +450,7 @@ export class HaChartBase extends LitElement {
        iconStyle: { opacity: 0 },
      },
      ...this.options,
-      legend: { show: false },
+      legend,
      xAxis,
    };

@@ -468,6 +494,13 @@ export class HaChartBase extends LitElement {
        smooth: false,
      },
      bar: { itemStyle: { barBorderWidth: 1.5 } },
+      graph: {
+        label: {
+          color: style.getPropertyValue("--primary-text-color"),
+          textBorderColor: style.getPropertyValue("--primary-background-color"),
+          textBorderWidth: 2,
+        },
+      },
      categoryAxis: {
        axisLine: { show: false },
        axisTick: { show: false },
@@ -600,12 +633,50 @@ export class HaChartBase extends LitElement {
  }

  private _getSeries() {
-    if (!Array.isArray(this.data)) {
-      return this.data;
-    }
-    return this.data.filter(
-      (d) => !this._hiddenDatasets.has(String(d.name ?? d.id))
-    );
+    const xAxis = (this.options?.xAxis?.[0] ?? this.options?.xAxis) as
+      | XAXisOption
+      | undefined;
+    const yAxis = (this.options?.yAxis?.[0] ?? this.options?.yAxis) as
+      | YAXisOption
+      | undefined;
+    const series = ensureArray(this.data)
+      .filter((d) => !this._hiddenDatasets.has(String(d.name ?? d.id)))
+      .map((s) => {
+        if (s.type === "line") {
+          if (yAxis?.type === "log") {
+            // set <=0 values to null so they render as gaps on a log graph
+            return {
+              ...s,
+              data: s.data?.map((v) =>
+                Array.isArray(v)
+                  ? [
+                      v[0],
+                      typeof v[1] !== "number" || v[1] > 0 ? v[1] : null,
+                      ...v.slice(2),
+                    ]
+                  : v
+              ),
+            };
+          }
+          if (s.sampling === "minmax") {
+            const minX =
+              xAxis?.min && typeof xAxis.min === "number"
+                ? xAxis.min
+                : undefined;
+            const maxX =
+              xAxis?.max && typeof xAxis.max === "number"
+                ? xAxis.max
+                : undefined;
+            return {
+              ...s,
+              sampling: undefined,
+              data: downSampleLineData(s.data, this.clientWidth, minX, maxX),
+            };
+          }
+        }
+        return s;
+      });
+    return series;
  }

  private _getDefaultHeight() {
@@ -705,16 +776,26 @@ export class HaChartBase extends LitElement {
      height: 100%;
      width: 100%;
    }
-    .zoom-reset {
+    .chart-controls {
      position: absolute;
      top: 16px;
      right: 4px;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .chart-controls ha-icon-button,
+    .chart-controls ::slotted(ha-icon-button) {
      background: var(--card-background-color);
      border-radius: 4px;
      --mdc-icon-button-size: 32px;
      color: var(--primary-color);
      border: 1px solid var(--divider-color);
    }
+    .chart-controls ha-icon-button.inactive,
+    .chart-controls ::slotted(ha-icon-button.inactive) {
+      color: var(--state-inactive-color);
+    }
    .chart-legend {
      max-height: 60%;
      overflow-y: auto;
@@ -0,0 +1,299 @@
+import type { EChartsType } from "echarts/core";
+import type { GraphSeriesOption } from "echarts/charts";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import type { TopLevelFormatterParams } from "echarts/types/dist/shared";
+import { mdiFormatTextVariant, mdiGoogleCirclesGroup } from "@mdi/js";
+import memoizeOne from "memoize-one";
+import { listenMediaQuery } from "../../common/dom/media_query";
+import type { ECOption } from "../../resources/echarts";
+import "./ha-chart-base";
+import type { HaChartBase } from "./ha-chart-base";
+import type { HomeAssistant } from "../../types";
+
+export interface NetworkNode {
+  id: string;
+  name?: string;
+  category?: number;
+  label?: string;
+  value?: number;
+  symbolSize?: number;
+  symbol?: string;
+  itemStyle?: {
+    color?: string;
+    borderColor?: string;
+    borderWidth?: number;
+  };
+  fixed?: boolean;
+  /**
+   * Distance from the center, where 0 is the center and 1 is the edge
+   */
+  polarDistance?: number;
+}
+
+export interface NetworkLink {
+  source: string;
+  target: string;
+  value?: number;
+  reverseValue?: number;
+  lineStyle?: {
+    width?: number;
+    color?: string;
+    type?: "solid" | "dashed" | "dotted";
+  };
+  symbolSize?: number | number[];
+  symbol?: string;
+  label?: {
+    show?: boolean;
+    formatter?: string;
+  };
+  ignoreForceLayout?: boolean;
+}
+
+export interface NetworkData {
+  nodes: NetworkNode[];
+  links: NetworkLink[];
+  categories?: { name: string; symbol: string }[];
+}
+
+// eslint-disable-next-line @typescript-eslint/naming-convention, @typescript-eslint/consistent-type-imports
+let GraphChart: typeof import("echarts/lib/chart/graph/install");
+
+@customElement("ha-network-graph")
+export class HaNetworkGraph extends LitElement {
+  public chart?: EChartsType;
+
+  @property({ attribute: false }) public data!: NetworkData;
+
+  @property({ attribute: false }) public tooltipFormatter?: (
+    params: TopLevelFormatterParams
+  ) => string;
+
+  public hass!: HomeAssistant;
+
+  @state() private _reducedMotion = false;
+
+  @state() private _physicsEnabled = true;
+
+  @state() private _showLabels = true;
+
+  private _listeners: (() => void)[] = [];
+
+  private _nodePositions: Record<string, { x: number; y: number }> = {};
+
+  @query("ha-chart-base") private _baseChart?: HaChartBase;
+
+  constructor() {
+    super();
+    if (!GraphChart) {
+      import("echarts/lib/chart/graph/install").then((module) => {
+        GraphChart = module;
+        this.requestUpdate();
+      });
+    }
+  }
+
+  public async connectedCallback() {
+    super.connectedCallback();
+    this._listeners.push(
+      listenMediaQuery("(prefers-reduced-motion)", (matches) => {
+        if (this._reducedMotion !== matches) {
+          this._reducedMotion = matches;
+        }
+      })
+    );
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    while (this._listeners.length) {
+      this._listeners.pop()!();
+    }
+  }
+
+  protected render() {
+    if (!GraphChart) {
+      return nothing;
+    }
+    return html`<ha-chart-base
+      .hass=${this.hass}
+      .data=${this._getSeries(
+        this.data,
+        this._physicsEnabled,
+        this._reducedMotion,
+        this._showLabels
+      )}
+      .options=${this._createOptions(this.data?.categories)}
+      height="100%"
+      .extraComponents=${[GraphChart]}
+    >
+      <slot name="button" slot="button"></slot>
+      <ha-icon-button
+        slot="button"
+        class=${this._physicsEnabled ? "active" : "inactive"}
+        .path=${mdiGoogleCirclesGroup}
+        @click=${this._togglePhysics}
+        label=${this.hass.localize(
+          "ui.panel.config.common.graph.toggle_physics"
+        )}
+      ></ha-icon-button>
+      <ha-icon-button
+        slot="button"
+        class=${this._showLabels ? "active" : "inactive"}
+        .path=${mdiFormatTextVariant}
+        @click=${this._toggleLabels}
+        label=${this.hass.localize(
+          "ui.panel.config.common.graph.toggle_labels"
+        )}
+      ></ha-icon-button>
+    </ha-chart-base>`;
+  }
+
+  private _createOptions = memoizeOne(
+    (categories?: NetworkData["categories"]): ECOption => ({
+      tooltip: {
+        trigger: "item",
+        confine: true,
+        formatter: this.tooltipFormatter,
+      },
+      legend: {
+        show: !!categories?.length,
+        data: categories?.map((category) => ({
+          ...category,
+          icon: category.symbol,
+        })),
+        top: 8,
+      },
+      dataZoom: {
+        type: "inside",
+        filterMode: "none",
+      },
+    })
+  );
+
+  private _getSeries = memoizeOne(
+    (
+      data: NetworkData,
+      physicsEnabled: boolean,
+      reducedMotion: boolean,
+      showLabels: boolean
+    ) => {
+      const containerWidth = this.clientWidth;
+      const containerHeight = this.clientHeight;
+      return [
+        {
+          id: "network",
+          type: "graph",
+          layout: physicsEnabled ? "force" : "none",
+          draggable: true,
+          roam: true,
+          selectedMode: "single",
+          label: {
+            show: showLabels,
+            position: "right",
+          },
+          emphasis: {
+            focus: "adjacency",
+          },
+          force: {
+            repulsion: [400, 600],
+            edgeLength: [200, 300],
+            gravity: 0.1,
+            layoutAnimation: !reducedMotion && data.nodes.length < 100,
+          },
+          edgeSymbol: ["none", "arrow"],
+          edgeSymbolSize: 10,
+          data: data.nodes.map((node) => {
+            const echartsNode: NonNullable<GraphSeriesOption["data"]>[number] =
+              {
+                id: node.id,
+                name: node.name,
+                category: node.category,
+                value: node.value,
+                symbolSize: node.symbolSize || 30,
+                symbol: node.symbol || "circle",
+                itemStyle: node.itemStyle || {},
+                fixed: node.fixed,
+              };
+            if (this._nodePositions[node.id]) {
+              echartsNode.x = this._nodePositions[node.id].x;
+              echartsNode.y = this._nodePositions[node.id].y;
+            } else if (typeof node.polarDistance === "number") {
+              // set the position of the node at polarDistance from the center in a random direction
+              const angle = Math.random() * 2 * Math.PI;
+              echartsNode.x =
+                containerWidth / 2 +
+                ((Math.cos(angle) * containerWidth) / 2) * node.polarDistance;
+              echartsNode.y =
+                containerHeight / 2 +
+                ((Math.sin(angle) * containerHeight) / 2) * node.polarDistance;
+              this._nodePositions[node.id] = {
+                x: echartsNode.x,
+                y: echartsNode.y,
+              };
+            }
+            return echartsNode;
+          }),
+          links: data.links.map((link) => ({
+            ...link,
+            value: link.reverseValue
+              ? Math.max(link.value ?? 0, link.reverseValue)
+              : link.value,
+            // remove arrow for bidirectional links
+            symbolSize: link.reverseValue ? 1 : link.symbolSize, // 0 doesn't work
+          })),
+          categories: data.categories || [],
+        },
+      ] as any;
+    }
+  );
+
+  private _togglePhysics() {
+    if (this._baseChart?.chart) {
+      this._baseChart.chart
+        // @ts-ignore private method but no other way to get the graph positions
+        .getModel()
+        .getSeriesByIndex(0)
+        .getGraph()
+        .eachNode((node: any) => {
+          const layout = node.getLayout();
+          if (layout) {
+            this._nodePositions[node.id] = {
+              x: layout[0],
+              y: layout[1],
+            };
+          }
+        });
+    }
+    this._physicsEnabled = !this._physicsEnabled;
+  }
+
+  private _toggleLabels() {
+    this._showLabels = !this._showLabels;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+      position: relative;
+    }
+    ha-chart-base {
+      height: 100%;
+      --chart-max-height: 100%;
+    }
+
+    ha-icon-button,
+    ::slotted(ha-icon-button) {
+      margin-right: 12px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-network-graph": HaNetworkGraph;
+  }
+  interface HASSDomEvents {
+    "node-selected": { id: string };
+  }
+}
@@ -105,7 +105,42 @@ export class HaSankeyChart extends LitElement {

  private _createData = memoizeOne((data: SankeyChartData, width = 0) => {
    const filteredNodes = data.nodes.filter((n) => n.value > 0);
-    const indexes = [...new Set(filteredNodes.map((n) => n.index))];
+    const indexes = [...new Set(filteredNodes.map((n) => n.index))].sort();
+    const depthMap = new Map<number, number>();
+    const sections: Node[][] = [];
+    indexes.forEach((index, i) => {
+      depthMap.set(index, i);
+      const nodesWithIndex = filteredNodes.filter((n) => n.index === index);
+      if (nodesWithIndex.length > 0) {
+        sections.push(
+          sections.length > 0
+            ? nodesWithIndex.sort((a, b) => {
+                // sort by the order of their parents in the previous section with orphans at the end
+                const aParentIndex = this._findParentIndex(
+                  a.id,
+                  data.links,
+                  sections
+                );
+                const bParentIndex = this._findParentIndex(
+                  b.id,
+                  data.links,
+                  sections
+                );
+                if (aParentIndex === bParentIndex) {
+                  return 0;
+                }
+                if (aParentIndex === -1) {
+                  return 1;
+                }
+                if (bParentIndex === -1) {
+                  return -1;
+                }
+                return aParentIndex - bParentIndex;
+              })
+            : nodesWithIndex
+        );
+      }
+    });
    const links = this._processLinks(filteredNodes, data.links);
    const sectionWidth = width / indexes.length;
    const labelSpace = sectionWidth - NODE_SIZE - LABEL_DISTANCE;
@@ -113,13 +148,13 @@ export class HaSankeyChart extends LitElement {
    return {
      id: "sankey",
      type: "sankey",
-      nodes: filteredNodes.map((node) => ({
+      nodes: sections.flat().map((node) => ({
        id: node.id,
        value: node.value,
        itemStyle: {
          color: node.color,
        },
-        depth: node.index,
+        depth: depthMap.get(node.index),
      })),
      links,
      draggable: false,
@@ -223,6 +258,23 @@ export class HaSankeyChart extends LitElement {
    return links;
  }

+  private _findParentIndex(id: string, links: Link[], sections: Node[][]) {
+    const parent = links.find((l) => l.target === id)?.source;
+    if (!parent) {
+      return -1;
+    }
+    let offset = 0;
+    for (let i = sections.length - 1; i >= 0; i--) {
+      const section = sections[i];
+      const index = section.findIndex((n) => n.id === parent);
+      if (index !== -1) {
+        return offset + index;
+      }
+      offset += section.length;
+    }
+    return -1;
+  }
+
  static styles = css`
    :host {
      display: block;
@@ -82,6 +82,8 @@ export class StateHistoryChartLine extends LitElement {

  private _chartTime: Date = new Date();

+  private _previousYAxisLabelValue = 0;
+
  protected render() {
    return html`
      <ha-chart-base
@@ -227,14 +229,20 @@ export class StateHistoryChartLine extends LitElement {
          minYAxis = ({ min }) => Math.min(min, this.minYAxis!);
        }
      } else if (this.logarithmicScale) {
-        minYAxis = ({ min }) => Math.floor(min > 0 ? min * 0.95 : min * 1.05);
+        minYAxis = ({ min }) => {
+          const value = min > 0 ? min * 0.95 : min * 1.05;
+          return Math.abs(value) < 1 ? value : Math.floor(value);
+        };
      }
      if (typeof maxYAxis === "number") {
        if (this.fitYData) {
          maxYAxis = ({ max }) => Math.max(max, this.maxYAxis!);
        }
      } else if (this.logarithmicScale) {
-        maxYAxis = ({ max }) => Math.ceil(max > 0 ? max * 1.05 : max * 0.95);
+        maxYAxis = ({ max }) => {
+          const value = max > 0 ? max * 1.05 : max * 0.95;
+          return Math.abs(value) < 1 ? value : Math.ceil(value);
+        };
      }
      this._chartOptions = {
        xAxis: {
@@ -258,35 +266,11 @@ export class StateHistoryChartLine extends LitElement {
          },
          axisLabel: {
            margin: 5,
-            formatter: (value: number) => {
-              const formatOptions =
-                value >= 1 || value <= -1
-                  ? undefined
-                  : {
-                      // show the first significant digit for tiny values
-                      maximumFractionDigits: Math.max(
-                        2,
-                        -Math.floor(Math.log10(Math.abs(value % 1 || 1)))
-                      ),
-                    };
-              const label = formatNumber(
-                value,
-                this.hass.locale,
-                formatOptions
-              );
-              const width = measureTextWidth(label, 12) + 5;
-              if (width > this._yWidth) {
-                this._yWidth = width;
-                fireEvent(this, "y-width-changed", {
-                  value: this._yWidth,
-                  chartIndex: this.chartIndex,
-                });
-              }
-              return label;
-            },
+            formatter: this._formatYAxisLabel,
          },
        } as YAXisOption,
        legend: {
+          type: "custom",
          show: this.showNames,
        },
        grid: {
@@ -744,14 +728,41 @@ export class StateHistoryChartLine extends LitElement {
    this._visualMap = visualMap.length > 0 ? visualMap : undefined;
  }

+  private _formatYAxisLabel = (value: number) => {
+    const formatOptions =
+      value >= 1 || value <= -1
+        ? undefined
+        : {
+            // show the first significant digit for tiny values
+            maximumFractionDigits: Math.max(
+              2,
+              // use the difference to the previous value to determine the number of significant digits #25526
+              -Math.floor(
+                Math.log10(Math.abs(value - this._previousYAxisLabelValue || 1))
+              )
+            ),
+          };
+    const label = formatNumber(value, this.hass.locale, formatOptions);
+    const width = measureTextWidth(label, 12) + 5;
+    if (width > this._yWidth) {
+      this._yWidth = width;
+      fireEvent(this, "y-width-changed", {
+        value: this._yWidth,
+        chartIndex: this.chartIndex,
+      });
+    }
+    this._previousYAxisLabelValue = value;
+    return label;
+  };
+
  private _clampYAxis(value?: number | ((values: any) => number)) {
    if (this.logarithmicScale) {
      // log(0) is -Infinity, so we need to set a minimum value
      if (typeof value === "number") {
-        return Math.max(value, 0.1);
+        return Math.max(value, Number.EPSILON);
      }
      if (typeof value === "function") {
-        return (values: any) => Math.max(value(values), 0.1);
+        return (values: any) => Math.max(value(values), Number.EPSILON);
      }
    }
    return value;
@@ -293,7 +293,7 @@ export class StateHistoryCharts extends LitElement {

    .info {
      text-align: center;
-      line-height: var(--ha-line-height-expanded);
+      line-height: 60px;
      color: var(--secondary-text-color);
    }

@@ -241,14 +241,20 @@ export class StatisticsChart extends LitElement {
        minYAxis = ({ min }) => Math.min(min, this.minYAxis!);
      }
    } else if (this.logarithmicScale) {
-      minYAxis = ({ min }) => Math.floor(min > 0 ? min * 0.95 : min * 1.05);
+      minYAxis = ({ min }) => {
+        const value = min > 0 ? min * 0.95 : min * 1.05;
+        return Math.abs(value) < 1 ? value : Math.floor(value);
+      };
    }
    if (typeof maxYAxis === "number") {
      if (this.fitYData) {
        maxYAxis = ({ max }) => Math.max(max, this.maxYAxis!);
      }
    } else if (this.logarithmicScale) {
-      maxYAxis = ({ max }) => Math.ceil(max > 0 ? max * 1.05 : max * 0.95);
+      maxYAxis = ({ max }) => {
+        const value = max > 0 ? max * 1.05 : max * 0.95;
+        return Math.abs(value) < 1 ? value : Math.ceil(value);
+      };
    }
    const endTime = this.endTime ?? new Date();
    let startTime = this.startTime;
@@ -308,6 +314,7 @@ export class StatisticsChart extends LitElement {
        },
      },
      legend: {
+        type: "custom",
        show: !this.hideLegend,
        data: this._legendData,
      },
@@ -618,10 +625,10 @@ export class StatisticsChart extends LitElement {
    if (this.logarithmicScale) {
      // log(0) is -Infinity, so we need to set a minimum value
      if (typeof value === "number") {
-        return Math.max(value, 0.1);
+        return Math.max(value, Number.EPSILON);
      }
      if (typeof value === "function") {
-        return (values: any) => Math.max(value(values), 0.1);
+        return (values: any) => Math.max(value(values), Number.EPSILON);
      }
    }
    return value;
@@ -634,7 +641,7 @@ export class StatisticsChart extends LitElement {
    }
    .info {
      text-align: center;
-      line-height: var(--ha-line-height-expanded);
+      line-height: 60px;
      color: var(--secondary-text-color);
    }
  `;
@@ -60,7 +60,7 @@ export class HaAssistChip extends AssistChip {
        opacity: var(--ha-assist-chip-active-container-opacity);
      }
      .label {
-        font-family: Roboto, sans-serif;
+        font-family: var(--ha-font-family-body);
      }
    `,
  ];
@@ -164,6 +164,8 @@ export class HaDataTable extends LitElement {

  @state() private _collapsedGroups: string[] = [];

+  @state() private _lastSelectedRowId: string | null = null;
+
  private _checkableRowsCount?: number;

  private _checkedRows: string[] = [];
@@ -187,6 +189,7 @@ export class HaDataTable extends LitElement {

  public clearSelection(): void {
    this._checkedRows = [];
+    this._lastSelectedRowId = null;
    this._checkedRowsChanged();
  }

@@ -194,6 +197,7 @@ export class HaDataTable extends LitElement {
    this._checkedRows = this._filteredData
      .filter((data) => data.selectable !== false)
      .map((data) => data[this.id]);
+    this._lastSelectedRowId = null;
    this._checkedRowsChanged();
  }

@@ -207,6 +211,7 @@ export class HaDataTable extends LitElement {
        this._checkedRows.push(id);
      }
    });
+    this._lastSelectedRowId = null;
    this._checkedRowsChanged();
  }

@@ -217,6 +222,7 @@ export class HaDataTable extends LitElement {
        this._checkedRows.splice(index, 1);
      }
    });
+    this._lastSelectedRowId = null;
    this._checkedRowsChanged();
  }

@@ -261,6 +267,7 @@ export class HaDataTable extends LitElement {
          if (this.columns[columnId].direction) {
            this.sortDirection = this.columns[columnId].direction!;
            this.sortColumn = columnId;
+            this._lastSelectedRowId = null;

            fireEvent(this, "sorting-changed", {
              column: columnId,
@@ -286,6 +293,7 @@ export class HaDataTable extends LitElement {

    if (properties.has("filter")) {
      this._debounceSearch(this.filter);
+      this._lastSelectedRowId = null;
    }

    if (properties.has("data")) {
@@ -296,9 +304,11 @@ export class HaDataTable extends LitElement {

    if (!this.hasUpdated && this.initialCollapsedGroups) {
      this._collapsedGroups = this.initialCollapsedGroups;
+      this._lastSelectedRowId = null;
      fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
    } else if (properties.has("groupColumn")) {
      this._collapsedGroups = [];
+      this._lastSelectedRowId = null;
      fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
    }

@@ -312,6 +322,14 @@ export class HaDataTable extends LitElement {
      this._sortFilterData();
    }

+    if (
+      properties.has("_filter") ||
+      properties.has("sortColumn") ||
+      properties.has("sortDirection")
+    ) {
+      this._lastSelectedRowId = null;
+    }
+
    if (properties.has("selectable") || properties.has("hiddenColumns")) {
      this._filteredData = [...this._filteredData];
    }
@@ -542,7 +560,7 @@ export class HaDataTable extends LitElement {
              >
                <ha-checkbox
                  class="mdc-data-table__row-checkbox"
-                  @change=${this._handleRowCheckboxClick}
+                  @click=${this._handleRowCheckboxClicked}
                  .rowId=${row[this.id]}
                  .disabled=${row.selectable === false}
                  .checked=${this._checkedRows.includes(String(row[this.id]))}
@@ -603,7 +621,7 @@ export class HaDataTable extends LitElement {
                          .map(
                            ([key2, column2], i) =>
                              html`${i !== 0
-                                ? " ⸱ "
+                                ? " · "
                                : nothing}${column2.template
                                ? column2.template(row)
                                : row[key2]}`
@@ -722,8 +740,10 @@ export class HaDataTable extends LitElement {
            }, {});
          const groupedItems: DataTableRowData[] = [];
          Object.entries(sorted).forEach(([groupName, rows]) => {
+            const collapsed = collapsedGroups.includes(groupName);
            groupedItems.push({
              append: true,
+              selectable: false,
              content: html`<div
                class="mdc-data-table__cell group-header"
                role="cell"
@@ -732,9 +752,10 @@ export class HaDataTable extends LitElement {
              >
                <ha-icon-button
                  .path=${mdiChevronUp}
-                  class=${collapsedGroups.includes(groupName)
-                    ? "collapsed"
-                    : ""}
+                  .label=${this.hass.localize(
+                    `ui.components.data-table.${collapsed ? "expand" : "collapse"}`
+                  )}
+                  class=${collapsed ? "collapsed" : ""}
                >
                </ha-icon-button>
                ${groupName === UNDEFINED_GROUP_KEY
@@ -750,7 +771,7 @@ export class HaDataTable extends LitElement {
        }

        if (appendRow) {
-          items.push({ append: true, content: appendRow });
+          items.push({ append: true, selectable: false, content: appendRow });
        }

        if (hasFab) {
@@ -800,23 +821,84 @@ export class HaDataTable extends LitElement {
      this._checkedRows = [];
      this._checkedRowsChanged();
    }
+    this._lastSelectedRowId = null;
  }

-  private _handleRowCheckboxClick = (ev: Event) => {
+  private _handleRowCheckboxClicked = (ev: Event) => {
    const checkbox = ev.currentTarget as HaCheckbox;
    const rowId = (checkbox as any).rowId;

-    if (checkbox.checked) {
-      if (this._checkedRows.includes(rowId)) {
-        return;
+    const groupedData = this._groupData(
+      this._filteredData,
+      this.localizeFunc || this.hass.localize,
+      this.appendRow,
+      this.hasFab,
+      this.groupColumn,
+      this.groupOrder,
+      this._collapsedGroups
+    );
+
+    if (
+      groupedData.find((data) => data[this.id] === rowId)?.selectable === false
+    ) {
+      return;
+    }
+
+    const rowIndex = groupedData.findIndex((data) => data[this.id] === rowId);
+
+    if (
+      ev instanceof MouseEvent &&
+      ev.shiftKey &&
+      this._lastSelectedRowId !== null
+    ) {
+      const lastSelectedRowIndex = groupedData.findIndex(
+        (data) => data[this.id] === this._lastSelectedRowId
+      );
+
+      if (lastSelectedRowIndex > -1 && rowIndex > -1) {
+        this._checkedRows = [
+          ...this._checkedRows,
+          ...this._selectRange(groupedData, lastSelectedRowIndex, rowIndex),
+        ];
+      }
+    } else if (!checkbox.checked) {
+      if (!this._checkedRows.includes(rowId)) {
+        this._checkedRows = [...this._checkedRows, rowId];
      }
-      this._checkedRows = [...this._checkedRows, rowId];
    } else {
      this._checkedRows = this._checkedRows.filter((row) => row !== rowId);
    }
+
+    if (rowIndex > -1) {
+      this._lastSelectedRowId = rowId;
+    }
    this._checkedRowsChanged();
  };

+  private _selectRange(
+    groupedData: DataTableRowData[],
+    startIndex: number,
+    endIndex: number
+  ) {
+    const start = Math.min(startIndex, endIndex);
+    const end = Math.max(startIndex, endIndex);
+
+    const checkedRows: string[] = [];
+
+    for (let i = start; i <= end; i++) {
+      const row = groupedData[i];
+      if (
+        row &&
+        row.selectable !== false &&
+        !this._checkedRows.includes(row[this.id])
+      ) {
+        checkedRows.push(row[this.id]);
+      }
+    }
+
+    return checkedRows;
+  }
+
  private _handleRowClick = (ev: Event) => {
    if (
      ev
@@ -858,6 +940,7 @@ export class HaDataTable extends LitElement {
    if (this.filter) {
      return;
    }
+    this._lastSelectedRowId = null;
    this._debounceSearch(ev.detail.value);
  }

@@ -894,11 +977,13 @@ export class HaDataTable extends LitElement {
    } else {
      this._collapsedGroups = [...this._collapsedGroups, groupName];
    }
+    this._lastSelectedRowId = null;
    fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
  };

  public expandAllGroups() {
    this._collapsedGroups = [];
+    this._lastSelectedRowId = null;
    fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
  }

@@ -916,6 +1001,7 @@ export class HaDataTable extends LitElement {
      delete grouped.undefined;
    }
    this._collapsedGroups = Object.keys(grouped);
+    this._lastSelectedRowId = null;
    fireEvent(this, "collapsed-changed", { value: this._collapsedGroups });
  }

@@ -928,10 +1014,10 @@ export class HaDataTable extends LitElement {
          height: 100%;
        }
        .mdc-data-table__content {
-          font-family: Roboto, sans-serif;
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          font-size: var(--ha-font-size-s);
+          font-family: var(--ha-font-family-body);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+          -webkit-font-smoothing: var(--ha-font-smoothing);
+          font-size: 0.875rem;
          line-height: var(--ha-line-height-condensed);
          font-weight: var(--ha-font-weight-normal);
          letter-spacing: 0.0178571429em;
@@ -1048,11 +1134,11 @@ export class HaDataTable extends LitElement {
        }

        .mdc-data-table__cell {
-          font-family: Roboto, sans-serif;
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
-          font-size: var(--ha-font-size-s);
-          line-height: var(--ha-line-height-normal);
+          font-family: var(--ha-font-family-body);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+          -webkit-font-smoothing: var(--ha-font-smoothing);
+          font-size: 0.875rem;
+          line-height: var(--ha-line-height-condensed);
          font-weight: var(--ha-font-weight-normal);
          letter-spacing: 0.0178571429em;
          text-decoration: inherit;
@@ -1170,12 +1256,12 @@ export class HaDataTable extends LitElement {
        }

        .mdc-data-table__header-cell {
-          font-family: Roboto, sans-serif;
-          -moz-osx-font-smoothing: grayscale;
-          -webkit-font-smoothing: antialiased;
+          font-family: var(--ha-font-family-body);
+          -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+          -webkit-font-smoothing: var(--ha-font-smoothing);
          font-size: var(--ha-font-size-s);
          line-height: var(--ha-line-height-normal);
-          font-weight: var(--ha-font-weight-semibold);
+          font-weight: var(--ha-font-weight-medium);
          letter-spacing: 0.0071428571em;
          text-decoration: inherit;
          text-transform: inherit;
@@ -1199,7 +1285,7 @@ export class HaDataTable extends LitElement {
          padding-inline-start: 12px;
          padding-inline-end: initial;
          width: 100%;
-          font-weight: var(--ha-font-weight-semibold);
+          font-weight: var(--ha-font-weight-medium);
          display: flex;
          align-items: center;
          cursor: pointer;
@@ -12,6 +12,7 @@ import type { EntityRegistryEntry } from "../../data/entity_registry";
 import type { HomeAssistant } from "../../types";
 import "../ha-list-item";
 import "../ha-select";
+import { stopPropagation } from "../../common/dom/stop_propagation";

 const NO_AUTOMATION_KEY = "NO_AUTOMATION";
 const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
@@ -103,6 +104,7 @@ export abstract class HaDeviceAutomationPicker<
        .label=${this.label}
        .value=${value}
        @selected=${this._automationChanged}
+        @closed=${stopPropagation}
        .disabled=${this._automations.length === 0}
      >
        ${value === NO_AUTOMATION_KEY
@@ -1,33 +1,28 @@
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { PropertyValues, TemplateResult } from "lit";
-import { LitElement, html, nothing } from "lit";
+import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
-import { computeDeviceNameDisplay } from "../../common/entity/compute_device_name";
+import { computeAreaName } from "../../common/entity/compute_area_name";
+import {
+  computeDeviceName,
+  computeDeviceNameDisplay,
+} from "../../common/entity/compute_device_name";
 import { computeDomain } from "../../common/entity/compute_domain";
-import { stringCompare } from "../../common/string/compare";
-import type { ScorableTextItem } from "../../common/string/filter/sequence-matching";
-import { fuzzyFilterSort } from "../../common/string/filter/sequence-matching";
-import type {
-  DeviceEntityDisplayLookup,
-  DeviceRegistryEntry,
+import { getDeviceContext } from "../../common/entity/context/get_device_context";
+import { getConfigEntries, type ConfigEntry } from "../../data/config_entries";
+import {
+  getDeviceEntityDisplayLookup,
+  type DeviceEntityDisplayLookup,
+  type DeviceRegistryEntry,
 } from "../../data/device_registry";
-import { getDeviceEntityDisplayLookup } from "../../data/device_registry";
-import type { EntityRegistryDisplayEntry } from "../../data/entity_registry";
-import type { HomeAssistant, ValueChangedEvent } from "../../types";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
-import "../ha-combo-box-item";
-
-interface Device {
-  name: string;
-  area: string;
-  id: string;
-}
-
-type ScorableDevice = ScorableTextItem & Device;
+import { domainToName } from "../../data/integration";
+import type { HomeAssistant } from "../../types";
+import { brandsUrl } from "../../util/brands-url";
+import "../ha-generic-picker";
+import type { HaGenericPicker } from "../ha-generic-picker";
+import type { PickerComboBoxItem } from "../ha-picker-combo-box";

 export type HaDevicePickerDeviceFilterFunc = (
  device: DeviceRegistryEntry
@@ -35,25 +30,35 @@ export type HaDevicePickerDeviceFilterFunc = (

 export type HaDevicePickerEntityFilterFunc = (entity: HassEntity) => boolean;

-const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`
-  <ha-combo-box-item type="button">
-    <span slot="headline">${item.name}</span>
-    ${item.area
-      ? html`<span slot="supporting-text">${item.area}</span>`
-      : nothing}
-  </ha-combo-box-item>
-`;
+interface DevicePickerItem extends PickerComboBoxItem {
+  domain?: string;
+  domain_name?: string;
+}

@customElement("ha-device-picker")
 export class HaDevicePicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

+  // eslint-disable-next-line lit/no-native-attributes
+  @property({ type: Boolean }) public autofocus = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
  @property() public label?: string;

  @property() public value?: string;

  @property() public helper?: string;

+  @property() public placeholder?: string;
+
+  @property({ type: String, attribute: "search-label" })
+  public searchLabel?: string;
+
+  @property({ attribute: false, type: Array }) public createDomains?: string[];
+
  /**
   * Show only devices with entities from specific domains.
   * @type {Array}
@@ -92,38 +97,52 @@ export class HaDevicePicker extends LitElement {
  @property({ attribute: false })
  public entityFilter?: HaDevicePickerEntityFilterFunc;

-  @property({ type: Boolean }) public disabled = false;
+  @property({ attribute: "hide-clear-icon", type: Boolean })
+  public hideClearIcon = false;

-  @property({ type: Boolean }) public required = false;
+  @query("ha-generic-picker") private _picker?: HaGenericPicker;

-  @state() private _opened?: boolean;
+  @state() private _configEntryLookup: Record<string, ConfigEntry> = {};

-  @query("ha-combo-box", true) public comboBox!: HaComboBox;
+  protected firstUpdated(_changedProperties: PropertyValues): void {
+    super.firstUpdated(_changedProperties);
+    this._loadConfigEntries();
+  }

-  private _init = false;
+  private async _loadConfigEntries() {
+    const configEntries = await getConfigEntries(this.hass);
+    this._configEntryLookup = Object.fromEntries(
+      configEntries.map((entry) => [entry.entry_id, entry])
+    );
+  }
+
+  private _getItems = () =>
+    this._getDevices(
+      this.hass.devices,
+      this.hass.entities,
+      this._configEntryLookup,
+      this.includeDomains,
+      this.excludeDomains,
+      this.includeDeviceClasses,
+      this.deviceFilter,
+      this.entityFilter,
+      this.excludeDevices
+    );

  private _getDevices = memoizeOne(
    (
-      devices: DeviceRegistryEntry[],
-      areas: HomeAssistant["areas"],
-      entities: EntityRegistryDisplayEntry[],
+      haDevices: HomeAssistant["devices"],
+      haEntities: HomeAssistant["entities"],
+      configEntryLookup: Record<string, ConfigEntry>,
      includeDomains: this["includeDomains"],
      excludeDomains: this["excludeDomains"],
      includeDeviceClasses: this["includeDeviceClasses"],
      deviceFilter: this["deviceFilter"],
      entityFilter: this["entityFilter"],
      excludeDevices: this["excludeDevices"]
-    ): ScorableDevice[] => {
-      if (!devices.length) {
-        return [
-          {
-            id: "no_devices",
-            area: "",
-            name: this.hass.localize("ui.components.device-picker.no_devices"),
-            strings: [],
-          },
-        ];
-      }
+    ): DevicePickerItem[] => {
+      const devices = Object.values(haDevices);
+      const entities = Object.values(haEntities);

      let deviceEntityLookup: DeviceEntityDisplayLookup = {};

@@ -214,133 +233,158 @@ export class HaDevicePicker extends LitElement {
        );
      }

-      const outputDevices = inputDevices.map((device) => {
-        const name = computeDeviceNameDisplay(
+      const outputDevices = inputDevices.map<DevicePickerItem>((device) => {
+        const deviceName = computeDeviceNameDisplay(
          device,
          this.hass,
          deviceEntityLookup[device.id]
        );

+        const { area } = getDeviceContext(device, this.hass);
+
+        const areaName = area ? computeAreaName(area) : undefined;
+
+        const configEntry = device.primary_config_entry
+          ? configEntryLookup?.[device.primary_config_entry]
+          : undefined;
+
+        const domain = configEntry?.domain;
+        const domainName = domain
+          ? domainToName(this.hass.localize, domain)
+          : undefined;
+
        return {
          id: device.id,
-          name:
-            name ||
+          label: "",
+          primary:
+            deviceName ||
            this.hass.localize("ui.components.device-picker.unnamed_device"),
-          area:
-            device.area_id && areas[device.area_id]
-              ? areas[device.area_id].name
-              : this.hass.localize("ui.components.device-picker.no_area"),
-          strings: [name || ""],
+          secondary: areaName,
+          domain: configEntry?.domain,
+          domain_name: domainName,
+          search_labels: [deviceName, areaName, domain, domainName].filter(
+            Boolean
+          ) as string[],
+          sorting_label: deviceName || "zzz",
        };
      });
-      if (!outputDevices.length) {
-        return [
-          {
-            id: "no_devices",
-            area: "",
-            name: this.hass.localize("ui.components.device-picker.no_match"),
-            strings: [],
-          },
-        ];
-      }
-      if (outputDevices.length === 1) {
-        return outputDevices;
-      }
-      return outputDevices.sort((a, b) =>
-        stringCompare(a.name || "", b.name || "", this.hass.locale.language)
-      );
+
+      return outputDevices;
    }
  );

-  public async open() {
-    await this.updateComplete;
-    await this.comboBox?.open();
-  }
+  private _valueRenderer = memoizeOne(
+    (configEntriesLookup: Record<string, ConfigEntry>) => (value: string) => {
+      const deviceId = value;
+      const device = this.hass.devices[deviceId];

-  public async focus() {
-    await this.updateComplete;
-    await this.comboBox?.focus();
-  }
+      if (!device) {
+        return html`<span slot="headline">${deviceId}</span>`;
+      }

-  protected updated(changedProps: PropertyValues) {
-    if (
-      (!this._init && this.hass) ||
-      (this._init && changedProps.has("_opened") && this._opened)
-    ) {
-      this._init = true;
-      const devices = this._getDevices(
-        Object.values(this.hass.devices),
-        this.hass.areas,
-        Object.values(this.hass.entities),
-        this.includeDomains,
-        this.excludeDomains,
-        this.includeDeviceClasses,
-        this.deviceFilter,
-        this.entityFilter,
-        this.excludeDevices
-      );
-      this.comboBox.items = devices;
-      this.comboBox.filteredItems = devices;
+      const { area } = getDeviceContext(device, this.hass);
+
+      const deviceName = device ? computeDeviceName(device) : undefined;
+      const areaName = area ? computeAreaName(area) : undefined;
+
+      const primary = deviceName;
+      const secondary = areaName;
+
+      const configEntry = device.primary_config_entry
+        ? configEntriesLookup[device.primary_config_entry]
+        : undefined;
+
+      return html`
+        ${configEntry
+          ? html`<img
+              slot="start"
+              alt=""
+              crossorigin="anonymous"
+              referrerpolicy="no-referrer"
+              src=${brandsUrl({
+                domain: configEntry.domain,
+                type: "icon",
+                darkOptimized: this.hass.themes?.darkMode,
+              })}
+            />`
+          : nothing}
+        <span slot="headline">${primary}</span>
+        <span slot="supporting-text">${secondary}</span>
+      `;
    }
-  }
+  );
+
+  private _rowRenderer: ComboBoxLitRenderer<DevicePickerItem> = (item) => html`
+    <ha-combo-box-item type="button">
+      ${item.domain
+        ? html`
+            <img
+              slot="start"
+              alt=""
+              crossorigin="anonymous"
+              referrerpolicy="no-referrer"
+              src=${brandsUrl({
+                domain: item.domain,
+                type: "icon",
+                darkOptimized: this.hass.themes.darkMode,
+              })}
+            />
+          `
+        : nothing}
+
+      <span slot="headline">${item.primary}</span>
+      ${item.secondary
+        ? html`<span slot="supporting-text">${item.secondary}</span>`
+        : nothing}
+      ${item.domain_name
+        ? html`
+            <div slot="trailing-supporting-text" class="domain">
+              ${item.domain_name}
+            </div>
+          `
+        : nothing}
+    </ha-combo-box-item>
+  `;
+
+  protected render() {
+    const placeholder =
+      this.placeholder ??
+      this.hass.localize("ui.components.device-picker.placeholder");
+    const notFoundLabel = this.hass.localize(
+      "ui.components.device-picker.no_match"
+    );
+
+    const valueRenderer = this._valueRenderer(this._configEntryLookup);

-  protected render(): TemplateResult {
    return html`
-      <ha-combo-box
+      <ha-generic-picker
        .hass=${this.hass}
-        .label=${this.label === undefined && this.hass
-          ? this.hass.localize("ui.components.device-picker.device")
-          : this.label}
-        .value=${this._value}
-        .helper=${this.helper}
-        .renderer=${rowRenderer}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        item-id-path="id"
-        item-value-path="id"
-        item-label-path="name"
-        @opened-changed=${this._openedChanged}
-        @value-changed=${this._deviceChanged}
-        @filter-changed=${this._filterChanged}
-      ></ha-combo-box>
+        .autofocus=${this.autofocus}
+        .label=${this.label}
+        .searchLabel=${this.searchLabel}
+        .notFoundLabel=${notFoundLabel}
+        .placeholder=${placeholder}
+        .value=${this.value}
+        .rowRenderer=${this._rowRenderer}
+        .getItems=${this._getItems}
+        .hideClearIcon=${this.hideClearIcon}
+        .valueRenderer=${valueRenderer}
+        @value-changed=${this._valueChanged}
+      >
+      </ha-generic-picker>
    `;
  }

-  private get _value() {
-    return this.value || "";
+  public async open() {
+    await this.updateComplete;
+    await this._picker?.open();
  }

-  private _filterChanged(ev: CustomEvent): void {
-    const target = ev.target as HaComboBox;
-    const filterString = ev.detail.value.toLowerCase();
-    target.filteredItems = filterString.length
-      ? fuzzyFilterSort<ScorableDevice>(filterString, target.items || [])
-      : target.items;
-  }
-
-  private _deviceChanged(ev: ValueChangedEvent<string>) {
+  private _valueChanged(ev) {
    ev.stopPropagation();
-    let newValue = ev.detail.value;
-
-    if (newValue === "no_devices") {
-      newValue = "";
-    }
-
-    if (newValue !== this._value) {
-      this._setValue(newValue);
-    }
-  }
-
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
-  private _setValue(value: string) {
+    const value = ev.detail.value;
    this.value = value;
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value });
-      fireEvent(this, "change");
-    }, 0);
+    fireEvent(this, "value-changed", { value });
  }
 }

@@ -1,7 +1,7 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { ValueChangedEvent, HomeAssistant } from "../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "./ha-device-picker";
 import type {
  HaDevicePickerDeviceFilterFunc,
@@ -8,7 +8,7 @@ import "./ha-entity-picker";
 import type { HaEntityPickerEntityFilterFunc } from "./ha-entity-picker";

@customElement("ha-entities-picker")
-class HaEntitiesPickerLight extends LitElement {
+class HaEntitiesPicker extends LitElement {
  @property({ attribute: false }) public hass?: HomeAssistant;

  @property({ type: Array }) public value?: string[];
@@ -17,6 +17,10 @@ class HaEntitiesPickerLight extends LitElement {

  @property({ type: Boolean }) public required = false;

+  @property() public label?: string;
+
+  @property() public placeholder?: string;
+
  @property() public helper?: string;

  /**
@@ -67,11 +71,6 @@ class HaEntitiesPickerLight extends LitElement {
  @property({ type: Array, attribute: "exclude-entities" })
  public excludeEntities?: string[];

-  @property({ attribute: "picked-entity-label" })
-  public pickedEntityLabel?: string;
-
-  @property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
-
  @property({ attribute: false })
  public entityFilter?: HaEntityPickerEntityFilterFunc;

@@ -84,6 +83,7 @@ class HaEntitiesPickerLight extends LitElement {

    const currentEntities = this._currentEntities;
    return html`
+      ${this.label ? html`<label>${this.label}</label>` : nothing}
      ${currentEntities.map(
        (entityId) => html`
          <div>
@@ -99,7 +99,6 @@ class HaEntitiesPickerLight extends LitElement {
              .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
              .entityFilter=${this.entityFilter}
              .value=${entityId}
-              .label=${this.pickedEntityLabel}
              .disabled=${this.disabled}
              .createDomains=${this.createDomains}
              @value-changed=${this._entityChanged}
@@ -121,7 +120,7 @@ class HaEntitiesPickerLight extends LitElement {
          .includeDeviceClasses=${this.includeDeviceClasses}
          .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
          .entityFilter=${this.entityFilter}
-          .label=${this.pickEntityLabel}
+          .placeholder=${this.placeholder}
          .helper=${this.helper}
          .disabled=${this.disabled}
          .createDomains=${this.createDomains}
@@ -198,11 +197,15 @@ class HaEntitiesPickerLight extends LitElement {
    div {
      margin-top: 8px;
    }
+    label {
+      display: block;
+      margin: 0 0 8px;
+    }
  `;
 }

 declare global {
  interface HTMLElementTagNameMap {
-    "ha-entities-picker": HaEntitiesPickerLight;
+    "ha-entities-picker": HaEntitiesPicker;
  }
 }
@@ -73,16 +73,20 @@ class HaEntityAttributePicker extends LitElement {
      return nothing;
    }

+    const stateObj = this.hass.states[this.entityId!] as HassEntity | undefined;
+
    return html`
      <ha-combo-box
        .hass=${this.hass}
        .value=${this.value
-          ? computeAttributeNameDisplay(
-              this.hass.localize,
-              this.hass.states[this.entityId!],
-              this.hass.entities,
-              this.value
-            )
+          ? stateObj
+            ? computeAttributeNameDisplay(
+                this.hass.localize,
+                stateObj,
+                this.hass.entities,
+                this.value
+              )
+            : this.value
          : ""}
        .autofocus=${this.autofocus}
        .label=${this.label ??
@@ -1,11 +1,8 @@
-import { mdiMagnify, mdiPlus } from "@mdi/js";
+import { mdiPlus, mdiShape } from "@mdi/js";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import Fuse from "fuse.js";
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { PropertyValues, TemplateResult } from "lit";
-import { html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
+import { html, LitElement, nothing, type PropertyValues } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeAreaName } from "../../common/entity/compute_area_name";
@@ -13,65 +10,36 @@ import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeEntityName } from "../../common/entity/compute_entity_name";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { getEntityContext } from "../../common/entity/get_entity_context";
-import { caseInsensitiveStringCompare } from "../../common/string/compare";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
+import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { domainToName } from "../../data/integration";
-import type { HelperDomain } from "../../panels/config/helpers/const";
-import { isHelperDomain } from "../../panels/config/helpers/const";
+import {
+  isHelperDomain,
+  type HelperDomain,
+} from "../../panels/config/helpers/const";
 import { showHelperDetailDialog } from "../../panels/config/helpers/show-dialog-helper-detail";
-import { HaFuse } from "../../resources/fuse";
-import type { HomeAssistant, ValueChangedEvent } from "../../types";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
+import type { HomeAssistant } from "../../types";
 import "../ha-combo-box-item";
-import "../ha-icon-button";
+import "../ha-generic-picker";
+import type { HaGenericPicker } from "../ha-generic-picker";
+import type {
+  PickerComboBoxItem,
+  PickerComboBoxSearchFn,
+} from "../ha-picker-combo-box";
+import type { PickerValueRenderer } from "../ha-picker-field";
 import "../ha-svg-icon";
 import "./state-badge";

-const FAKE_ENTITY: HassEntity = {
-  entity_id: "",
-  state: "",
-  last_changed: "",
-  last_updated: "",
-  context: { id: "", user_id: null, parent_id: null },
-  attributes: {},
-};
-
-interface EntityPickerItem extends HassEntity {
-  label: string;
-  primary: string;
-  secondary?: string;
-  translated_domain?: string;
-  show_entity_id?: boolean;
-  entity_name?: string;
-  area_name?: string;
-  device_name?: string;
-  friendly_name?: string;
-  sorting_label?: string;
-  icon_path?: string;
+interface EntityComboBoxItem extends PickerComboBoxItem {
+  domain_name?: string;
+  stateObj?: HassEntity;
 }

 export type HaEntityPickerEntityFilterFunc = (entity: HassEntity) => boolean;

 const CREATE_ID = "___create-new-entity___";

-const DOMAIN_STYLE = styleMap({
-  fontSize: "12px",
-  fontWeight: "400",
-  lineHeight: "18px",
-  alignSelf: "flex-end",
-  maxWidth: "30%",
-  textOverflow: "ellipsis",
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-});
-
-const ENTITY_ID_STYLE = styleMap({
-  fontFamily: "var(--code-font-family, monospace)",
-  fontSize: "11px",
-});
-
@customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -86,12 +54,20 @@ export class HaEntityPicker extends LitElement {
  @property({ type: Boolean, attribute: "allow-custom-entity" })
  public allowCustomEntity;

+  @property({ type: Boolean, attribute: "show-entity-id" })
+  public showEntityId = false;
+
  @property() public label?: string;

  @property() public value?: string;

  @property() public helper?: string;

+  @property() public placeholder?: string;
+
+  @property({ type: String, attribute: "search-label" })
+  public searchLabel?: string;
+
  @property({ attribute: false, type: Array }) public createDomains?: string[];

  /**
@@ -148,66 +124,151 @@ export class HaEntityPicker extends LitElement {
  @property({ attribute: "hide-clear-icon", type: Boolean })
  public hideClearIcon = false;

-  @property({ attribute: "item-label-path" }) public itemLabelPath = "label";
-
-  @state() private _opened = false;
-
-  @query("ha-combo-box", true) public comboBox!: HaComboBox;
-
-  public async open() {
-    await this.updateComplete;
-    await this.comboBox?.open();
-  }
-
-  public async focus() {
-    await this.updateComplete;
-    await this.comboBox?.focus();
-  }
-
-  private _initialItems = false;
-
-  private _items: EntityPickerItem[] = [];
+  @query("ha-generic-picker") private _picker?: HaGenericPicker;

  protected firstUpdated(changedProperties: PropertyValues): void {
    super.firstUpdated(changedProperties);
+    // Load title translations so it is available when the combo-box opens
    this.hass.loadBackendTranslation("title");
  }

-  private _rowRenderer: ComboBoxLitRenderer<EntityPickerItem> = (
+  private _valueRenderer: PickerValueRenderer = (value) => {
+    const entityId = value || "";
+
+    const stateObj = this.hass.states[entityId];
+
+    if (!stateObj) {
+      return html`
+        <ha-svg-icon
+          slot="start"
+          .path=${mdiShape}
+          style="margin: 0 4px"
+        ></ha-svg-icon>
+        <span slot="headline">${entityId}</span>
+      `;
+    }
+
+    const { area, device } = getEntityContext(stateObj, this.hass);
+
+    const entityName = computeEntityName(stateObj, this.hass);
+    const deviceName = device ? computeDeviceName(device) : undefined;
+    const areaName = area ? computeAreaName(area) : undefined;
+
+    const isRTL = computeRTL(this.hass);
+
+    const primary = entityName || deviceName || entityId;
+    const secondary = [areaName, entityName ? deviceName : undefined]
+      .filter(Boolean)
+      .join(isRTL ? " ◂ " : " ▸ ");
+
+    return html`
+      <state-badge
+        .hass=${this.hass}
+        .stateObj=${stateObj}
+        slot="start"
+      ></state-badge>
+      <span slot="headline">${primary}</span>
+      <span slot="supporting-text">${secondary}</span>
+    `;
+  };
+
+  private get _showEntityId() {
+    return this.showEntityId || this.hass.userData?.showEntityIdPicker;
+  }
+
+  private _rowRenderer: ComboBoxLitRenderer<EntityComboBoxItem> = (
    item,
    { index }
-  ) => html`
-    <ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
-      ${item.icon_path
-        ? html`<ha-svg-icon slot="start" .path=${item.icon_path}></ha-svg-icon>`
-        : html`
-            <state-badge
-              slot="start"
-              .stateObj=${item}
-              .hass=${this.hass}
-            ></state-badge>
-          `}
+  ) => {
+    const showEntityId = this._showEntityId;

-      <span slot="headline">${item.primary} </span>
-      ${item.secondary
-        ? html`<span slot="supporting-text">${item.secondary}</span>`
-        : nothing}
-      ${item.entity_id && item.show_entity_id
-        ? html`<span slot="supporting-text" style=${ENTITY_ID_STYLE}
-            >${item.entity_id}</span
-          >`
-        : nothing}
-      ${item.translated_domain && !item.show_entity_id
-        ? html`<div slot="trailing-supporting-text" style=${DOMAIN_STYLE}>
-            ${item.translated_domain}
-          </div>`
-        : nothing}
-    </ha-combo-box-item>
-  `;
+    return html`
+      <ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
+        ${item.icon_path
+          ? html`
+              <ha-svg-icon
+                slot="start"
+                style="margin: 0 4px"
+                .path=${item.icon_path}
+              ></ha-svg-icon>
+            `
+          : html`
+              <state-badge
+                slot="start"
+                .stateObj=${item.stateObj}
+                .hass=${this.hass}
+              ></state-badge>
+            `}
+        <span slot="headline">${item.primary}</span>
+        ${item.secondary
+          ? html`<span slot="supporting-text">${item.secondary}</span>`
+          : nothing}
+        ${item.stateObj && showEntityId
+          ? html`
+              <span slot="supporting-text" class="code">
+                ${item.stateObj.entity_id}
+              </span>
+            `
+          : nothing}
+        ${item.domain_name && !showEntityId
+          ? html`
+              <div slot="trailing-supporting-text" class="domain">
+                ${item.domain_name}
+              </div>
+            `
+          : nothing}
+      </ha-combo-box-item>
+    `;
+  };

-  private _getItems = memoizeOne(
+  private _getAdditionalItems = () =>
+    this._getCreateItems(this.hass.localize, this.createDomains);
+
+  private _getCreateItems = memoizeOne(
+    (
+      localize: this["hass"]["localize"],
+      createDomains: this["createDomains"]
+    ) => {
+      if (!createDomains?.length) {
+        return [];
+      }
+
+      return createDomains.map((domain) => {
+        const primary = localize(
+          "ui.components.entity.entity-picker.create_helper",
+          {
+            domain: isHelperDomain(domain)
+              ? localize(
+                  `ui.panel.config.helpers.types.${domain as HelperDomain}`
+                )
+              : domainToName(localize, domain),
+          }
+        );
+
+        return {
+          id: CREATE_ID + domain,
+          primary: primary,
+          secondary: localize("ui.components.entity.entity-picker.new_entity"),
+          icon_path: mdiPlus,
+        } satisfies EntityComboBoxItem;
+      });
+    }
+  );
+
+  private _getItems = () =>
+    this._getEntities(
+      this.hass,
+      this.includeDomains,
+      this.excludeDomains,
+      this.entityFilter,
+      this.includeDeviceClasses,
+      this.includeUnitOfMeasurement,
+      this.includeEntities,
+      this.excludeEntities
+    );
+
+  private _getEntities = memoizeOne(
    (
-      _opened: boolean,
      hass: this["hass"],
      includeDomains: this["includeDomains"],
      excludeDomains: this["excludeDomains"],
@@ -215,58 +276,12 @@ export class HaEntityPicker extends LitElement {
      includeDeviceClasses: this["includeDeviceClasses"],
      includeUnitOfMeasurement: this["includeUnitOfMeasurement"],
      includeEntities: this["includeEntities"],
-      excludeEntities: this["excludeEntities"],
-      createDomains: this["createDomains"]
-    ): EntityPickerItem[] => {
-      let states: EntityPickerItem[] = [];
+      excludeEntities: this["excludeEntities"]
+    ): EntityComboBoxItem[] => {
+      let items: EntityComboBoxItem[] = [];

-      if (!hass) {
-        return [];
-      }
      let entityIds = Object.keys(hass.states);

-      const createItems = createDomains?.length
-        ? createDomains.map((domain) => {
-            const primary = hass.localize(
-              "ui.components.entity.entity-picker.create_helper",
-              {
-                domain: isHelperDomain(domain)
-                  ? hass.localize(
-                      `ui.panel.config.helpers.types.${domain as HelperDomain}`
-                    )
-                  : domainToName(hass.localize, domain),
-              }
-            );
-
-            return {
-              ...FAKE_ENTITY,
-              entity_id: CREATE_ID + domain,
-              primary: primary,
-              label: primary,
-              secondary: this.hass.localize(
-                "ui.components.entity.entity-picker.new_entity"
-              ),
-              icon_path: mdiPlus,
-            };
-          })
-        : [];
-
-      if (!entityIds.length) {
-        return [
-          {
-            ...FAKE_ENTITY,
-            primary: this.hass!.localize(
-              "ui.components.entity.entity-picker.no_entities"
-            ),
-            label: this.hass!.localize(
-              "ui.components.entity.entity-picker.no_entities"
-            ),
-            icon_path: mdiMagnify,
-          },
-          ...createItems,
-        ];
-      }
-
      if (includeEntities) {
        entityIds = entityIds.filter((entityId) =>
          includeEntities.includes(entityId)
@@ -293,180 +308,149 @@ export class HaEntityPicker extends LitElement {

      const isRTL = computeRTL(this.hass);

-      states = entityIds
-        .map<EntityPickerItem>((entityId) => {
-          const stateObj = hass!.states[entityId];
+      items = entityIds.map<EntityComboBoxItem>((entityId) => {
+        const stateObj = hass!.states[entityId];

-          const { area, device } = getEntityContext(stateObj, hass);
+        const { area, device } = getEntityContext(stateObj, hass);

-          const friendlyName = computeStateName(stateObj); // Keep this for search
-          const entityName = computeEntityName(stateObj, hass);
-          const deviceName = device ? computeDeviceName(device) : undefined;
-          const areaName = area ? computeAreaName(area) : undefined;
+        const friendlyName = computeStateName(stateObj); // Keep this for search
+        const entityName = computeEntityName(stateObj, hass);
+        const deviceName = device ? computeDeviceName(device) : undefined;
+        const areaName = area ? computeAreaName(area) : undefined;

-          const primary = entityName || deviceName || entityId;
-          const secondary = [areaName, entityName ? deviceName : undefined]
-            .filter(Boolean)
-            .join(isRTL ? " ◂ " : " ▸ ");
-
-          const translatedDomain = domainToName(
-            this.hass.localize,
-            computeDomain(entityId)
-          );
-
-          return {
-            ...hass!.states[entityId],
-            primary: primary,
-            secondary:
-              secondary ||
-              this.hass.localize("ui.components.device-picker.no_area"),
-            label: friendlyName,
-            translated_domain: translatedDomain,
-            sorting_label: [deviceName, entityName].filter(Boolean).join("-"),
-            entity_name: entityName || deviceName,
-            area_name: areaName,
-            device_name: deviceName,
-            friendly_name: friendlyName,
-            show_entity_id: hass.userData?.showEntityIdPicker,
-          };
-        })
-        .sort((entityA, entityB) =>
-          caseInsensitiveStringCompare(
-            entityA.sorting_label!,
-            entityB.sorting_label!,
-            this.hass.locale.language
-          )
+        const domainName = domainToName(
+          this.hass.localize,
+          computeDomain(entityId)
        );

+        const primary = entityName || deviceName || entityId;
+        const secondary = [areaName, entityName ? deviceName : undefined]
+          .filter(Boolean)
+          .join(isRTL ? " ◂ " : " ▸ ");
+        const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");
+
+        return {
+          id: entityId,
+          primary: primary,
+          secondary: secondary,
+          domain_name: domainName,
+          sorting_label: [deviceName, entityName].filter(Boolean).join("_"),
+          search_labels: [
+            entityName,
+            deviceName,
+            areaName,
+            domainName,
+            friendlyName,
+            entityId,
+          ].filter(Boolean) as string[],
+          a11y_label: a11yLabel,
+          stateObj: stateObj,
+        };
+      });
+
      if (includeDeviceClasses) {
-        states = states.filter(
-          (stateObj) =>
+        items = items.filter(
+          (item) =>
            // We always want to include the entity of the current value
-            stateObj.entity_id === this.value ||
-            (stateObj.attributes.device_class &&
-              includeDeviceClasses.includes(stateObj.attributes.device_class))
+            item.id === this.value ||
+            (item.stateObj?.attributes.device_class &&
+              includeDeviceClasses.includes(
+                item.stateObj.attributes.device_class
+              ))
        );
      }

      if (includeUnitOfMeasurement) {
-        states = states.filter(
-          (stateObj) =>
+        items = items.filter(
+          (item) =>
            // We always want to include the entity of the current value
-            stateObj.entity_id === this.value ||
-            (stateObj.attributes.unit_of_measurement &&
+            item.id === this.value ||
+            (item.stateObj?.attributes.unit_of_measurement &&
              includeUnitOfMeasurement.includes(
-                stateObj.attributes.unit_of_measurement
+                item.stateObj.attributes.unit_of_measurement
              ))
        );
      }

      if (entityFilter) {
-        states = states.filter(
-          (stateObj) =>
+        items = items.filter(
+          (item) =>
            // We always want to include the entity of the current value
-            stateObj.entity_id === this.value || entityFilter!(stateObj)
+            item.id === this.value ||
+            (item.stateObj && entityFilter!(item.stateObj))
        );
      }

-      if (!states.length) {
-        return [
-          {
-            ...FAKE_ENTITY,
-            primary: this.hass!.localize(
-              "ui.components.entity.entity-picker.no_match"
-            ),
-            label: this.hass!.localize(
-              "ui.components.entity.entity-picker.no_match"
-            ),
-            icon_path: mdiMagnify,
-          },
-          ...createItems,
-        ];
-      }
-
-      if (createItems?.length) {
-        states.push(...createItems);
-      }
-
-      return states;
+      return items;
    }
  );

-  protected shouldUpdate(changedProps: PropertyValues) {
-    if (
-      changedProps.has("value") ||
-      changedProps.has("label") ||
-      changedProps.has("disabled")
-    ) {
-      return true;
-    }
-    return !(!changedProps.has("_opened") && this._opened);
-  }
+  protected render() {
+    const placeholder =
+      this.placeholder ??
+      this.hass.localize("ui.components.entity.entity-picker.placeholder");
+    const notFoundLabel = this.hass.localize(
+      "ui.components.entity.entity-picker.no_match"
+    );

-  public willUpdate(changedProps: PropertyValues) {
-    if (!this._initialItems || (changedProps.has("_opened") && this._opened)) {
-      this._items = this._getItems(
-        this._opened,
-        this.hass,
-        this.includeDomains,
-        this.excludeDomains,
-        this.entityFilter,
-        this.includeDeviceClasses,
-        this.includeUnitOfMeasurement,
-        this.includeEntities,
-        this.excludeEntities,
-        this.createDomains
-      );
-      if (this._initialItems) {
-        this.comboBox.filteredItems = this._items;
-      }
-      this._initialItems = true;
-    }
-
-    if (changedProps.has("createDomains") && this.createDomains?.length) {
-      this.hass.loadFragmentTranslation("config");
-    }
-  }
-
-  protected render(): TemplateResult {
    return html`
-      <ha-combo-box
-        item-value-path="entity_id"
-        .itemLabelPath=${this.itemLabelPath}
+      <ha-generic-picker
        .hass=${this.hass}
-        .value=${this._value}
-        .label=${this.label === undefined
-          ? this.hass.localize("ui.components.entity.entity-picker.entity")
-          : this.label}
-        .helper=${this.helper}
-        .allowCustomValue=${this.allowCustomEntity}
-        .filteredItems=${this._items}
-        .renderer=${this._rowRenderer}
-        .required=${this.required}
        .disabled=${this.disabled}
+        .autofocus=${this.autofocus}
+        .allowCustomValue=${this.allowCustomEntity}
+        .label=${this.label}
+        .helper=${this.helper}
+        .searchLabel=${this.searchLabel}
+        .notFoundLabel=${notFoundLabel}
+        .placeholder=${placeholder}
+        .value=${this.value}
+        .rowRenderer=${this._rowRenderer}
+        .getItems=${this._getItems}
+        .getAdditionalItems=${this._getAdditionalItems}
        .hideClearIcon=${this.hideClearIcon}
-        @opened-changed=${this._openedChanged}
+        .searchFn=${this._searchFn}
+        .valueRenderer=${this._valueRenderer}
        @value-changed=${this._valueChanged}
-        @filter-changed=${this._filterChanged}
      >
-      </ha-combo-box>
+      </ha-generic-picker>
    `;
  }

-  private get _value() {
-    return this.value || "";
+  private _searchFn: PickerComboBoxSearchFn<EntityComboBoxItem> = (
+    search,
+    filteredItems
+  ) => {
+    // If there is exact match for entity id, put it first
+    const index = filteredItems.findIndex(
+      (item) => item.stateObj?.entity_id === search
+    );
+    if (index === -1) {
+      return filteredItems;
+    }
+
+    const [exactMatch] = filteredItems.splice(index, 1);
+    filteredItems.unshift(exactMatch);
+    return filteredItems;
+  };
+
+  public async open() {
+    await this.updateComplete;
+    await this._picker?.open();
  }

-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
-  private _valueChanged(ev: ValueChangedEvent<string | undefined>) {
+  private _valueChanged(ev) {
    ev.stopPropagation();
-    const newValue = ev.detail.value?.trim();
+    const value = ev.detail.value;
+
+    if (!value) {
+      this._setValue(undefined);
+      return;
+    }
+
+    if (value.startsWith(CREATE_ID)) {
+      const domain = value.substring(CREATE_ID.length);

-    if (newValue && newValue.startsWith(CREATE_ID)) {
-      const domain = newValue.substring(CREATE_ID.length);
      showHelperDetailDialog(this, {
        domain,
        dialogClosedCallback: (item) => {
@@ -476,48 +460,18 @@ export class HaEntityPicker extends LitElement {
      return;
    }

-    if (newValue !== this._value) {
-      this._setValue(newValue);
+    if (!isValidEntityId(value)) {
+      return;
    }
-  }

-  private _fuseIndex = memoizeOne((states: EntityPickerItem[]) =>
-    Fuse.createIndex(
-      [
-        "entity_name",
-        "device_name",
-        "area_name",
-        "translated_domain",
-        "friendly_name", // for backwards compatibility
-        "entity_id", // for technical search
-      ],
-      states
-    )
-  );
-
-  private _filterChanged(ev: CustomEvent): void {
-    if (!this._opened) return;
-
-    const target = ev.target as HaComboBox;
-    const filterString = ev.detail.value.trim().toLowerCase() as string;
-
-    const index = this._fuseIndex(this._items);
-    const fuse = new HaFuse(this._items, {}, index);
-
-    const results = fuse.multiTermsSearch(filterString);
-    if (results) {
-      target.filteredItems = results.map((result) => result.item);
-    } else {
-      target.filteredItems = this._items;
-    }
+    this._setValue(value);
  }

  private _setValue(value: string | undefined) {
    this.value = value;
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value });
-      fireEvent(this, "change");
-    }, 0);
+
+    fireEvent(this, "value-changed", { value });
+    fireEvent(this, "change");
  }
 }

@@ -267,7 +267,7 @@ export class HaStateLabelBadge extends LitElement {
      cursor: pointer;
    }
    .big {
-      font-size: 70%;
+      font-size: var(--ha-font-size-xs);
    }
    ha-label-badge {
      --ha-label-badge-color: var(--label-badge-red);
@@ -1,11 +1,8 @@
-import { mdiChartLine } from "@mdi/js";
+import { mdiChartLine, mdiHelpCircle, mdiShape } from "@mdi/js";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import Fuse from "fuse.js";
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { PropertyValues, TemplateResult } from "lit";
-import { html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
-import { styleMap } from "lit/directives/style-map";
+import { html, LitElement, nothing, type PropertyValues } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -13,53 +10,60 @@ import { computeAreaName } from "../../common/entity/compute_area_name";
 import { computeDeviceName } from "../../common/entity/compute_device_name";
 import { computeEntityName } from "../../common/entity/compute_entity_name";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { getEntityContext } from "../../common/entity/get_entity_context";
-import { caseInsensitiveStringCompare } from "../../common/string/compare";
+import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { domainToName } from "../../data/integration";
-import type { StatisticsMetaData } from "../../data/recorder";
-import { getStatisticIds, getStatisticLabel } from "../../data/recorder";
-import { HaFuse } from "../../resources/fuse";
+import {
+  getStatisticIds,
+  getStatisticLabel,
+  type StatisticsMetaData,
+} from "../../data/recorder";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
+import { documentationUrl } from "../../util/documentation-url";
 import "../ha-combo-box-item";
+import "../ha-generic-picker";
+import type { HaGenericPicker } from "../ha-generic-picker";
+import "../ha-icon-button";
+import "../ha-input-helper-text";
+import type {
+  PickerComboBoxItem,
+  PickerComboBoxSearchFn,
+} from "../ha-picker-combo-box";
+import type { PickerValueRenderer } from "../ha-picker-field";
 import "../ha-svg-icon";
 import "./state-badge";

-type StatisticItemType = "entity" | "external" | "no_state";
-
-interface StatisticItem {
-  id: string;
-  label: string;
-  primary: string;
-  secondary?: string;
-  show_entity_id?: boolean;
-  entity_name?: string;
-  area_name?: string;
-  device_name?: string;
-  friendly_name?: string;
-  sorting_label?: string;
-  state?: HassEntity;
-  type?: StatisticItemType;
-  iconPath?: string;
-}
-
 const TYPE_ORDER = ["entity", "external", "no_state"] as StatisticItemType[];

-const ENTITY_ID_STYLE = styleMap({
-  fontFamily: "var(--code-font-family, monospace)",
-  fontSize: "11px",
-});
+const MISSING_ID = "___missing-entity___";
+
+type StatisticItemType = "entity" | "external" | "no_state";
+
+interface StatisticComboBoxItem extends PickerComboBoxItem {
+  statistic_id?: string;
+  stateObj?: HassEntity;
+  type?: StatisticItemType;
+}

@customElement("ha-statistic-picker")
 export class HaStatisticPicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

+  // eslint-disable-next-line lit/no-native-attributes
+  @property({ type: Boolean }) public autofocus = false;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
  @property() public label?: string;

  @property() public value?: string;

+  @property() public helper?: string;
+
+  @property() public placeholder?: string;
+
  @property({ attribute: "statistic-types" })
  public statisticTypes?: "mean" | "sum";

@@ -69,7 +73,8 @@ export class HaStatisticPicker extends LitElement {
  @property({ attribute: false, type: Array })
  public statisticIds?: StatisticsMetaData[];

-  @property({ type: Boolean }) public disabled = false;
+  @property({ attribute: false }) public helpMissingEntityUrl =
+    "/more-info/statistics/";

  /**
   * Show only statistics natively stored with these units of measurements.
@@ -112,79 +117,61 @@ export class HaStatisticPicker extends LitElement {
  @property({ type: Array, attribute: "exclude-statistics" })
  public excludeStatistics?: string[];

-  @property({ attribute: false }) public helpMissingEntityUrl =
-    "/more-info/statistics/";
+  @property({ attribute: "hide-clear-icon", type: Boolean })
+  public hideClearIcon = false;

-  @state() private _opened = false;
+  @query("ha-generic-picker") private _picker?: HaGenericPicker;

-  @query("ha-combo-box", true) public comboBox!: HaComboBox;
-
-  private _initialItems = false;
-
-  private _items: StatisticItem[] = [];
-
-  protected firstUpdated(changedProperties: PropertyValues): void {
-    super.firstUpdated(changedProperties);
-    this.hass.loadBackendTranslation("title");
+  public willUpdate(changedProps: PropertyValues) {
+    if (
+      (!this.hasUpdated && !this.statisticIds) ||
+      changedProps.has("statisticTypes")
+    ) {
+      this._getStatisticIds();
+    }
  }

-  private _rowRenderer: ComboBoxLitRenderer<StatisticItem> = (
-    item,
-    { index }
-  ) => html`
-    <ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
-      ${!item.state
-        ? html`<ha-svg-icon
-            style="margin: 0 4px"
-            slot="start"
-            .path=${item.iconPath}
-          ></ha-svg-icon>`
-        : html`
-            <state-badge
-              slot="start"
-              .stateObj=${item.state}
-              .hass=${this.hass}
-            ></state-badge>
-          `}
+  private async _getStatisticIds() {
+    this.statisticIds = await getStatisticIds(this.hass, this.statisticTypes);
+  }

-      <span slot="headline">${item.primary} </span>
-      ${item.secondary
-        ? html`<span slot="supporting-text">${item.secondary}</span>`
-        : nothing}
-      ${item.id && item.show_entity_id
-        ? html`
-            <span slot="supporting-text" style=${ENTITY_ID_STYLE}>
-              ${item.id}
-            </span>
-          `
-        : nothing}
-    </ha-combo-box-item>
-  `;
+  private _getItems = () =>
+    this._getStatisticsItems(
+      this.hass,
+      this.statisticIds,
+      this.includeStatisticsUnitOfMeasurement,
+      this.includeUnitClass,
+      this.includeDeviceClass,
+      this.entitiesOnly,
+      this.excludeStatistics,
+      this.value
+    );

-  private _getItems = memoizeOne(
+  private _getAdditionalItems(): StatisticComboBoxItem[] {
+    return [
+      {
+        id: MISSING_ID,
+        primary: this.hass.localize(
+          "ui.components.statistic-picker.missing_entity"
+        ),
+        icon_path: mdiHelpCircle,
+      },
+    ];
+  }
+
+  private _getStatisticsItems = memoizeOne(
    (
-      _opened: boolean,
-      hass: this["hass"],
-      statisticIds: StatisticsMetaData[],
+      hass: HomeAssistant,
+      statisticIds?: StatisticsMetaData[],
      includeStatisticsUnitOfMeasurement?: string | string[],
      includeUnitClass?: string | string[],
      includeDeviceClass?: string | string[],
      entitiesOnly?: boolean,
      excludeStatistics?: string[],
      value?: string
-    ): StatisticItem[] => {
-      if (!statisticIds.length) {
-        return [
-          {
-            id: "",
-            label: this.hass.localize(
-              "ui.components.statistic-picker.no_statistics"
-            ),
-            primary: this.hass.localize(
-              "ui.components.statistic-picker.no_statistics"
-            ),
-          },
-        ];
+    ): StatisticComboBoxItem[] => {
+      if (!statisticIds) {
+        return [];
      }

      if (includeStatisticsUnitOfMeasurement) {
@@ -218,7 +205,8 @@ export class HaStatisticPicker extends LitElement {

      const isRTL = computeRTL(this.hass);

-      const output: StatisticItem[] = [];
+      const output: StatisticComboBoxItem[] = [];
+
      statisticIds.forEach((meta) => {
        if (
          excludeStatistics &&
@@ -227,8 +215,9 @@ export class HaStatisticPicker extends LitElement {
        ) {
          return;
        }
-        const entityState = this.hass.states[meta.statistic_id];
-        if (!entityState) {
+        const stateObj = this.hass.states[meta.statistic_id];
+
+        if (!stateObj) {
          if (!entitiesOnly) {
            const id = meta.statistic_id;
            const label = getStatisticLabel(this.hass, meta.statistic_id, meta);
@@ -238,6 +227,7 @@ export class HaStatisticPicker extends LitElement {
                ? "external"
                : "no_state";

+            const sortingPrefix = `${TYPE_ORDER.indexOf(type)}`;
            if (type === "no_state") {
              output.push({
                id,
@@ -245,21 +235,23 @@ export class HaStatisticPicker extends LitElement {
                secondary: this.hass.localize(
                  "ui.components.statistic-picker.no_state"
                ),
-                label,
                type,
-                sorting_label: label,
+                sorting_label: [sortingPrefix, label].join("_"),
+                search_labels: [label, id],
+                icon_path: mdiShape,
              });
            } else if (type === "external") {
              const domain = id.split(":")[0];
              const domainName = domainToName(this.hass.localize, domain);
              output.push({
                id,
+                statistic_id: id,
                primary: label,
                secondary: domainName,
-                label,
                type,
-                sorting_label: label,
-                iconPath: mdiChartLine,
+                sorting_label: [sortingPrefix, label].join("_"),
+                search_labels: [label, domainName, id],
+                icon_path: mdiChartLine,
              });
            }
          }
@@ -267,10 +259,10 @@ export class HaStatisticPicker extends LitElement {
        }
        const id = meta.statistic_id;

-        const { area, device } = getEntityContext(entityState, hass);
+        const { area, device } = getEntityContext(stateObj, hass);

-        const friendlyName = computeStateName(entityState); // Keep this for search
-        const entityName = computeEntityName(entityState, hass);
+        const friendlyName = computeStateName(stateObj); // Keep this for search
+        const entityName = computeEntityName(stateObj, hass);
        const deviceName = device ? computeDeviceName(device) : undefined;
        const areaName = area ? computeAreaName(area) : undefined;

@@ -278,203 +270,254 @@ export class HaStatisticPicker extends LitElement {
        const secondary = [areaName, entityName ? deviceName : undefined]
          .filter(Boolean)
          .join(isRTL ? " ◂ " : " ▸ ");
+        const a11yLabel = [deviceName, entityName].filter(Boolean).join(" - ");

+        const sortingPrefix = `${TYPE_ORDER.indexOf("entity")}`;
        output.push({
          id,
+          statistic_id: id,
          primary,
          secondary,
-          label: friendlyName,
-          state: entityState,
+          a11y_label: a11yLabel,
+          stateObj: stateObj,
          type: "entity",
-          sorting_label: [deviceName, entityName].join("_"),
-          entity_name: entityName || deviceName,
-          area_name: areaName,
-          device_name: deviceName,
-          friendly_name: friendlyName,
-          show_entity_id: hass.userData?.showEntityIdPicker,
+          sorting_label: [sortingPrefix, deviceName, entityName].join("_"),
+          search_labels: [
+            entityName,
+            deviceName,
+            areaName,
+            friendlyName,
+            id,
+          ].filter(Boolean) as string[],
        });
      });

-      if (!output.length) {
-        return [
-          {
-            id: "",
-            primary: this.hass.localize(
-              "ui.components.statistic-picker.no_match"
-            ),
-            label: this.hass.localize(
-              "ui.components.statistic-picker.no_match"
-            ),
-          },
-        ];
-      }
-
-      if (output.length > 1) {
-        output.sort((a, b) => {
-          const aPrefix = TYPE_ORDER.indexOf(a.type || "no_state");
-          const bPrefix = TYPE_ORDER.indexOf(b.type || "no_state");
-
-          return caseInsensitiveStringCompare(
-            `${aPrefix}_${a.sorting_label || ""}`,
-            `${bPrefix}_${b.sorting_label || ""}`,
-            this.hass.locale.language
-          );
-        });
-      }
-
-      output.push({
-        id: "__missing",
-        primary: this.hass.localize(
-          "ui.components.statistic-picker.missing_entity"
-        ),
-        label: this.hass.localize(
-          "ui.components.statistic-picker.missing_entity"
-        ),
-      });
-
      return output;
    }
  );

-  public async open() {
-    await this.updateComplete;
-    await this.comboBox?.open();
-  }
-
-  public async focus() {
-    await this.updateComplete;
-    await this.comboBox?.focus();
-  }
-
-  protected shouldUpdate(changedProps: PropertyValues) {
-    if (
-      changedProps.has("value") ||
-      changedProps.has("label") ||
-      changedProps.has("disabled")
-    ) {
-      return true;
-    }
-    return !(!changedProps.has("_opened") && this._opened);
-  }
-
-  public willUpdate(changedProps: PropertyValues) {
-    if (
-      (!this.hasUpdated && !this.statisticIds) ||
-      changedProps.has("statisticTypes")
-    ) {
-      this._getStatisticIds();
-    }
-
-    if (
-      this.statisticIds &&
-      (!this._initialItems || (changedProps.has("_opened") && this._opened))
-    ) {
-      this._items = this._getItems(
-        this._opened,
-        this.hass,
-        this.statisticIds!,
-        this.includeStatisticsUnitOfMeasurement,
-        this.includeUnitClass,
-        this.includeDeviceClass,
-        this.entitiesOnly,
-        this.excludeStatistics,
-        this.value
-      );
-      if (this._initialItems) {
-        this.comboBox.filteredItems = this._items;
+  private _statisticMetaData = memoizeOne(
+    (statisticId: string, statisticIds: StatisticsMetaData[]) => {
+      if (!statisticIds) {
+        return undefined;
      }
-      this._initialItems = true;
+      return statisticIds.find(
+        (statistic) => statistic.statistic_id === statisticId
+      );
    }
-  }
+  );

-  protected render(): TemplateResult | typeof nothing {
-    if (this._items.length === 0) {
-      return nothing;
-    }
+  private _valueRenderer: PickerValueRenderer = (value) => {
+    const statisticId = value;
+
+    const item = this._computeItem(statisticId);

    return html`
-      <ha-combo-box
+      ${item.stateObj
+        ? html`
+            <state-badge
+              .hass=${this.hass}
+              .stateObj=${item.stateObj}
+              slot="start"
+            ></state-badge>
+          `
+        : item.icon_path
+          ? html`
+              <ha-svg-icon slot="start" .path=${item.icon_path}></ha-svg-icon>
+            `
+          : nothing}
+      <span slot="headline">${item.primary}</span>
+      ${item.secondary
+        ? html`<span slot="supporting-text">${item.secondary}</span>`
+        : nothing}
+    `;
+  };
+
+  private _computeItem(statisticId: string): StatisticComboBoxItem {
+    const stateObj = this.hass.states[statisticId];
+
+    if (stateObj) {
+      const { area, device } = getEntityContext(stateObj, this.hass);
+
+      const entityName = computeEntityName(stateObj, this.hass);
+      const deviceName = device ? computeDeviceName(device) : undefined;
+      const areaName = area ? computeAreaName(area) : undefined;
+
+      const isRTL = computeRTL(this.hass);
+
+      const primary = entityName || deviceName || statisticId;
+      const secondary = [areaName, entityName ? deviceName : undefined]
+        .filter(Boolean)
+        .join(isRTL ? " ◂ " : " ▸ ");
+      const friendlyName = computeStateName(stateObj); // Keep this for search
+
+      const sortingPrefix = `${TYPE_ORDER.indexOf("entity")}`;
+      return {
+        id: statisticId,
+        statistic_id: statisticId,
+        primary,
+        secondary,
+        stateObj: stateObj,
+        type: "entity",
+        sorting_label: [sortingPrefix, deviceName, entityName].join("_"),
+        search_labels: [
+          entityName,
+          deviceName,
+          areaName,
+          friendlyName,
+          statisticId,
+        ].filter(Boolean) as string[],
+      };
+    }
+
+    const statistic = this.statisticIds
+      ? this._statisticMetaData(statisticId, this.statisticIds)
+      : undefined;
+
+    if (statistic) {
+      const type =
+        statisticId.includes(":") && !statisticId.includes(".")
+          ? "external"
+          : "no_state";
+
+      if (type === "external") {
+        const sortingPrefix = `${TYPE_ORDER.indexOf("external")}`;
+        const label = getStatisticLabel(this.hass, statisticId, statistic);
+        const domain = statisticId.split(":")[0];
+        const domainName = domainToName(this.hass.localize, domain);
+
+        return {
+          id: statisticId,
+          statistic_id: statisticId,
+          primary: label,
+          secondary: domainName,
+          type: "external",
+          sorting_label: [sortingPrefix, label].join("_"),
+          search_labels: [label, domainName, statisticId],
+          icon_path: mdiChartLine,
+        };
+      }
+    }
+
+    const sortingPrefix = `${TYPE_ORDER.indexOf("external")}`;
+    const label = getStatisticLabel(this.hass, statisticId, statistic);
+
+    return {
+      id: statisticId,
+      primary: label,
+      secondary: this.hass.localize("ui.components.statistic-picker.no_state"),
+      type: "no_state",
+      sorting_label: [sortingPrefix, label].join("_"),
+      search_labels: [label, statisticId],
+      icon_path: mdiShape,
+    };
+  }
+
+  private _rowRenderer: ComboBoxLitRenderer<StatisticComboBoxItem> = (
+    item,
+    { index }
+  ) => {
+    const showEntityId = this.hass.userData?.showEntityIdPicker;
+    return html`
+      <ha-combo-box-item type="button" compact .borderTop=${index !== 0}>
+        ${item.icon_path
+          ? html`
+              <ha-svg-icon
+                style="margin: 0 4px"
+                slot="start"
+                .path=${item.icon_path}
+              ></ha-svg-icon>
+            `
+          : item.stateObj
+            ? html`
+                <state-badge
+                  slot="start"
+                  .stateObj=${item.stateObj}
+                  .hass=${this.hass}
+                ></state-badge>
+              `
+            : nothing}
+        <span slot="headline">${item.primary} </span>
+        ${item.secondary || item.type
+          ? html`<span slot="supporting-text"
+              >${item.secondary} - ${item.type}</span
+            >`
+          : nothing}
+        ${item.statistic_id && showEntityId
+          ? html`<span slot="supporting-text" class="code">
+              ${item.statistic_id}
+            </span>`
+          : nothing}
+      </ha-combo-box-item>
+    `;
+  };
+
+  protected render() {
+    const placeholder =
+      this.placeholder ??
+      this.hass.localize("ui.components.statistic-picker.placeholder");
+    const notFoundLabel = this.hass.localize(
+      "ui.components.statistic-picker.no_match"
+    );
+
+    return html`
+      <ha-generic-picker
        .hass=${this.hass}
-        .label=${this.label === undefined && this.hass
-          ? this.hass.localize("ui.components.statistic-picker.statistic")
-          : this.label}
-        .value=${this._value}
-        .renderer=${this._rowRenderer}
-        .disabled=${this.disabled}
+        .autofocus=${this.autofocus}
        .allowCustomValue=${this.allowCustomEntity}
-        .filteredItems=${this._items}
-        item-value-path="id"
-        item-id-path="id"
-        item-label-path="label"
-        @opened-changed=${this._openedChanged}
-        @value-changed=${this._statisticChanged}
-        @filter-changed=${this._filterChanged}
-      ></ha-combo-box>
+        .label=${this.label}
+        .notFoundLabel=${notFoundLabel}
+        .placeholder=${placeholder}
+        .value=${this.value}
+        .rowRenderer=${this._rowRenderer}
+        .getItems=${this._getItems}
+        .getAdditionalItems=${this._getAdditionalItems}
+        .hideClearIcon=${this.hideClearIcon}
+        .searchFn=${this._searchFn}
+        .valueRenderer=${this._valueRenderer}
+        @value-changed=${this._valueChanged}
+      >
+      </ha-generic-picker>
    `;
  }

-  private async _getStatisticIds() {
-    this.statisticIds = await getStatisticIds(this.hass, this.statisticTypes);
-  }
+  private _searchFn: PickerComboBoxSearchFn<StatisticComboBoxItem> = (
+    search,
+    filteredItems
+  ) => {
+    // If there is exact match for entity id or statistic id, put it first
+    const index = filteredItems.findIndex(
+      (item) =>
+        item.stateObj?.entity_id === search || item.statistic_id === search
+    );
+    if (index === -1) {
+      return filteredItems;
+    }

-  private get _value() {
-    return this.value || "";
-  }
+    const [exactMatch] = filteredItems.splice(index, 1);
+    filteredItems.unshift(exactMatch);
+    return filteredItems;
+  };

-  private _statisticChanged(ev: ValueChangedEvent<string>) {
+  private _valueChanged(ev: ValueChangedEvent<string>) {
    ev.stopPropagation();
-    let newValue = ev.detail.value;
-    if (newValue === "__missing") {
-      newValue = "";
+    const value = ev.detail.value;
+
+    if (value === MISSING_ID) {
+      window.open(
+        documentationUrl(this.hass, this.helpMissingEntityUrl),
+        "_blank"
+      );
+      return;
    }

-    if (newValue !== this._value) {
-      this._setValue(newValue);
-    }
-  }
-
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
-  private _fuseIndex = memoizeOne((states: StatisticItem[]) =>
-    Fuse.createIndex(
-      [
-        "label",
-        "entity_name",
-        "device_name",
-        "area_name",
-        "friendly_name", // for backwards compatibility
-        "id", // for technical search
-      ],
-      states
-    )
-  );
-
-  private _filterChanged(ev: CustomEvent): void {
-    if (!this._opened) return;
-
-    const target = ev.target as HaComboBox;
-    const filterString = ev.detail.value.trim().toLowerCase() as string;
-
-    const index = this._fuseIndex(this._items);
-    const fuse = new HaFuse(this._items, {}, index);
-
-    const results = fuse.multiTermsSearch(filterString);
-
-    if (results) {
-      target.filteredItems = results.map((result) => result.item);
-    } else {
-      target.filteredItems = this._items;
-    }
-  }
-
-  private _setValue(value: string) {
    this.value = value;
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value });
-      fireEvent(this, "change");
-    }, 0);
+    fireEvent(this, "value-changed", { value });
+  }
+
+  public async open() {
+    await this.updateComplete;
+    await this._picker?.open();
  }
 }

@@ -16,11 +16,11 @@ class HaStatisticsPicker extends LitElement {
  @property({ attribute: "statistic-types" })
  public statisticTypes?: "mean" | "sum";

-  @property({ attribute: "picked-statistic-label" })
-  public pickedStatisticLabel?: string;
+  @property({ type: String })
+  public label?: string;

-  @property({ attribute: "pick-statistic-label" })
-  public pickStatisticLabel?: string;
+  @property({ type: String })
+  public placeholder?: string;

  @property({ type: Boolean, attribute: "allow-custom-entity" })
  public allowCustomEntity;
@@ -82,6 +82,7 @@ class HaStatisticsPicker extends LitElement {
      : this.statisticTypes;

    return html`
+      ${this.label ? html`<label>${this.label}</label>` : nothing}
      ${repeat(
        this._currentStatistics,
        (statisticId) => statisticId,
@@ -96,7 +97,6 @@ class HaStatisticsPicker extends LitElement {
              .value=${statisticId}
              .statisticTypes=${includeStatisticTypesCurrent}
              .statisticIds=${this.statisticIds}
-              .label=${this.pickedStatisticLabel}
              .excludeStatistics=${this.value}
              .allowCustomEntity=${this.allowCustomEntity}
              @value-changed=${this._statisticChanged}
@@ -113,7 +113,7 @@ class HaStatisticsPicker extends LitElement {
          .includeDeviceClass=${this.includeDeviceClass}
          .statisticTypes=${this.statisticTypes}
          .statisticIds=${this.statisticIds}
-          .label=${this.pickStatisticLabel}
+          .placeholder=${this.placeholder}
          .excludeStatistics=${this.value}
          .allowCustomEntity=${this.allowCustomEntity}
          @value-changed=${this._addStatistic}
@@ -181,6 +181,10 @@ class HaStatisticsPicker extends LitElement {
      width: 100%;
      margin-top: 8px;
    }
+    label {
+      display: block;
+      margin-bottom: 0 0 8px;
+    }
  `;
 }

@@ -108,7 +108,7 @@ class StateInfo extends LitElement {

    .name.in-dialog,
    :host([secondary-line]) .name {
-      line-height: var(--ha-line-height-normal);
+      line-height: var(--ha-line-height-condensed);
    }

    .time-ago,
@@ -1,16 +1,16 @@
 import { mdiTextureBox } from "@mdi/js";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { PropertyValues, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, html, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+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 { computeDomain } from "../common/entity/compute_domain";
+import { computeFloorName } from "../common/entity/compute_floor_name";
 import { stringCompare } from "../common/string/compare";
-import type { ScorableTextItem } from "../common/string/filter/sequence-matching";
-import { fuzzyFilterSort } from "../common/string/filter/sequence-matching";
 import { computeRTL } from "../common/util/compute_rtl";
 import type { AreaRegistryEntry } from "../data/area_registry";
 import type {
@@ -19,29 +19,33 @@ import type {
 } from "../data/device_registry";
 import { getDeviceEntityDisplayLookup } from "../data/device_registry";
 import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
-import type { FloorRegistryEntry } from "../data/floor_registry";
-import { getFloorAreaLookup } from "../data/floor_registry";
+import {
+  getFloorAreaLookup,
+  type FloorRegistryEntry,
+} from "../data/floor_registry";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import "./ha-combo-box";
-import type { HaComboBox } from "./ha-combo-box";
 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 { PickerComboBoxItem } from "./ha-picker-combo-box";
+import type { PickerValueRenderer } from "./ha-picker-field";
 import "./ha-svg-icon";
 import "./ha-tree-indicator";

-type ScorableAreaFloorEntry = ScorableTextItem & FloorAreaEntry;
+const SEPARATOR = "________";

-interface FloorAreaEntry {
-  id: string | null;
-  name: string;
-  icon: string | null;
-  strings: string[];
+interface FloorComboBoxItem extends PickerComboBoxItem {
+  type: "floor" | "area";
+  floor?: FloorRegistryEntry;
+  area?: AreaRegistryEntry;
+}
+
+interface AreaFloorValue {
+  id: string;
  type: "floor" | "area";
-  level: number | null;
-  hasFloor?: boolean;
-  lastArea?: boolean;
 }

@customElement("ha-area-floor-picker")
@@ -50,12 +54,15 @@ export class HaAreaFloorPicker extends LitElement {

  @property() public label?: string;

-  @property() public value?: 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}
@@ -106,66 +113,53 @@ export class HaAreaFloorPicker extends LitElement {

  @property({ type: Boolean }) public required = false;

-  @state() private _opened?: boolean;
-
-  @query("ha-combo-box", true) public comboBox!: HaComboBox;
-
-  private _init = false;
+  @query("ha-generic-picker") private _picker?: HaGenericPicker;

  public async open() {
    await this.updateComplete;
-    await this.comboBox?.open();
+    await this._picker?.open();
  }

-  public async focus() {
-    await this.updateComplete;
-    await this.comboBox?.focus();
-  }
+  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>
+      `;
+    }

-  private _rowRenderer: ComboBoxLitRenderer<FloorAreaEntry> = (item) => {
-    const rtl = computeRTL(this.hass);
    return html`
-      <ha-combo-box-item
-        type="button"
-        style=${item.type === "area" && item.hasFloor
-          ? "--md-list-item-leading-space: 48px;"
-          : ""}
-      >
-        ${item.type === "area" && item.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=${item.lastArea}
-                slot="start"
-              ></ha-tree-indicator>
-            `
-          : nothing}
-        ${item.type === "floor"
-          ? html`<ha-floor-icon slot="start" .floor=${item}></ha-floor-icon>`
-          : item.icon
-            ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
-            : html`<ha-svg-icon
-                slot="start"
-                .path=${mdiTextureBox}
-              ></ha-svg-icon>`}
-        ${item.name}
-      </ha-combo-box-item>
+      <ha-svg-icon slot="start" .path=${mdiTextureBox}></ha-svg-icon>
+      <span slot="headline">${value}</span>
    `;
  };

-  private _getAreas = memoizeOne(
+  private _getAreasAndFloors = memoizeOne(
    (
-      floors: FloorRegistryEntry[],
-      areas: AreaRegistryEntry[],
-      devices: DeviceRegistryEntry[],
-      entities: EntityRegistryDisplayEntry[],
+      haFloors: HomeAssistant["floors"],
+      haAreas: HomeAssistant["areas"],
+      haDevices: HomeAssistant["devices"],
+      haEntities: HomeAssistant["entities"],
      includeDomains: this["includeDomains"],
      excludeDomains: this["excludeDomains"],
      includeDeviceClasses: this["includeDeviceClasses"],
@@ -173,19 +167,11 @@ export class HaAreaFloorPicker extends LitElement {
      entityFilter: this["entityFilter"],
      excludeAreas: this["excludeAreas"],
      excludeFloors: this["excludeFloors"]
-    ): FloorAreaEntry[] => {
-      if (!areas.length && !floors.length) {
-        return [
-          {
-            id: "no_areas",
-            type: "area",
-            name: this.hass.localize("ui.components.area-picker.no_areas"),
-            icon: null,
-            strings: [],
-            level: null,
-          },
-        ];
-      }
+    ): FloorComboBoxItem[] => {
+      const floors = Object.values(haFloors);
+      const areas = Object.values(haAreas);
+      const devices = Object.values(haDevices);
+      const entities = Object.values(haEntities);

      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
      let inputDevices: DeviceRegistryEntry[] | undefined;
@@ -326,19 +312,6 @@ export class HaAreaFloorPicker extends LitElement {
        );
      }

-      if (!outputAreas.length) {
-        return [
-          {
-            id: "no_areas",
-            type: "area",
-            name: this.hass.localize("ui.components.area-picker.no_match"),
-            icon: null,
-            strings: [],
-            level: null,
-          },
-        ];
-      }
-
      const floorAreaLookup = getFloorAreaLookup(outputAreas);
      const unassisgnedAreas = Object.values(outputAreas).filter(
        (area) => !area.floor_id || !floorAreaLookup[area.floor_id]
@@ -360,151 +333,186 @@ export class HaAreaFloorPicker extends LitElement {
          return stringCompare(floorA.name, floorB.name);
        });

-      const output: FloorAreaEntry[] = [];
+      const items: FloorComboBoxItem[] = [];

      floorAreaEntries.forEach(([floor, floorAreas]) => {
        if (floor) {
-          output.push({
-            id: floor.floor_id,
+          const floorName = computeFloorName(floor);
+
+          const areaSearchLabels = floorAreas
+            .map((area) => {
+              const areaName = computeAreaName(area) || area.area_id;
+              return [area.area_id, areaName, ...area.aliases];
+            })
+            .flat();
+
+          items.push({
+            id: this._formatValue({ id: floor.floor_id, type: "floor" }),
            type: "floor",
-            name: floor.name,
-            icon: floor.icon,
-            strings: [floor.floor_id, ...floor.aliases, floor.name],
-            level: floor.level,
+            primary: floorName,
+            floor: floor,
+            search_labels: [
+              floor.floor_id,
+              floorName,
+              ...floor.aliases,
+              ...areaSearchLabels,
+            ],
          });
        }
-        output.push(
-          ...floorAreas.map((area, index, array) => ({
-            id: area.area_id,
-            type: "area" as const,
-            name: area.name,
-            icon: area.icon,
-            strings: [area.area_id, ...area.aliases, area.name],
-            hasFloor: true,
-            level: null,
-            lastArea: index === array.length - 1,
-          }))
+        items.push(
+          ...floorAreas.map((area) => {
+            const areaName = computeAreaName(area) || area.area_id;
+            return {
+              id: this._formatValue({ id: area.area_id, type: "area" }),
+              type: "area" as const,
+              primary: areaName,
+              area: area,
+              icon: area.icon || undefined,
+              search_labels: [area.area_id, areaName, ...area.aliases],
+            };
+          })
        );
      });

-      if (!output.length && !unassisgnedAreas.length) {
-        output.push({
-          id: "no_areas",
-          type: "area",
-          name: this.hass.localize(
-            "ui.components.area-picker.unassigned_areas"
-          ),
-          icon: null,
-          strings: [],
-          level: null,
-        });
-      }
-
-      output.push(
-        ...unassisgnedAreas.map((area) => ({
-          id: area.area_id,
-          type: "area" as const,
-          name: area.name,
-          icon: area.icon,
-          strings: [area.area_id, ...area.aliases, area.name],
-          level: null,
-        }))
+      items.push(
+        ...unassisgnedAreas.map((area) => {
+          const areaName = computeAreaName(area) || area.area_id;
+          return {
+            id: this._formatValue({ id: area.area_id, type: "area" }),
+            type: "area" as const,
+            primary: areaName,
+            icon: area.icon || undefined,
+            search_labels: [area.area_id, areaName, ...area.aliases],
+          };
+        })
      );

-      return output;
+      return items;
    }
  );

-  protected updated(changedProps: PropertyValues) {
-    if (
-      (!this._init && this.hass) ||
-      (this._init && changedProps.has("_opened") && this._opened)
-    ) {
-      this._init = true;
-      const areas = this._getAreas(
-        Object.values(this.hass.floors),
-        Object.values(this.hass.areas),
-        Object.values(this.hass.devices),
-        Object.values(this.hass.entities),
-        this.includeDomains,
-        this.excludeDomains,
-        this.includeDeviceClasses,
-        this.deviceFilter,
-        this.entityFilter,
-        this.excludeAreas,
-        this.excludeFloors
-      );
-      this.comboBox.items = areas;
-      this.comboBox.filteredItems = areas;
-    }
-  }
+  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 _getItems = () =>
+    this._getAreasAndFloors(
+      this.hass.floors,
+      this.hass.areas,
+      this.hass.devices,
+      this.hass.entities,
+      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-combo-box
+      <ha-generic-picker
        .hass=${this.hass}
-        .helper=${this.helper}
-        item-value-path="id"
-        item-id-path="id"
-        item-label-path="name"
-        .value=${this._value}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .label=${this.label === undefined && this.hass
-          ? this.hass.localize("ui.components.area-picker.area")
-          : this.label}
-        .placeholder=${this.placeholder
-          ? this.hass.areas[this.placeholder]?.name
-          : undefined}
-        .renderer=${this._rowRenderer}
-        @filter-changed=${this._filterChanged}
-        @opened-changed=${this._openedChanged}
-        @value-changed=${this._areaChanged}
+        .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-combo-box>
+      </ha-generic-picker>
    `;
  }

-  private _filterChanged(ev: CustomEvent): void {
-    const target = ev.target as HaComboBox;
-    const filterString = ev.detail.value;
-    if (!filterString) {
-      this.comboBox.filteredItems = this.comboBox.items;
-      return;
-    }
-
-    const filteredItems = fuzzyFilterSort<ScorableAreaFloorEntry>(
-      filterString,
-      target.items || []
-    );
-
-    this.comboBox.filteredItems = filteredItems;
-  }
-
-  private get _value() {
-    return this.value || "";
-  }
-
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
-  private async _areaChanged(ev: ValueChangedEvent<string>) {
+  private _valueChanged(ev: ValueChangedEvent<string>) {
    ev.stopPropagation();
-    const newValue = ev.detail.value;
+    const value = ev.detail.value;

-    if (newValue === "no_areas") {
+    if (!value) {
+      this._setValue(undefined);
      return;
    }

-    const selected = this.comboBox.selectedItem;
+    const selected = this._parseValue(value);
+    this._setValue(selected);
+  }

-    fireEvent(this, "value-changed", {
-      value: {
-        id: selected.id,
-        type: selected.type,
-      },
-    });
+  private _setValue(value?: AreaFloorValue) {
+    this.value = value;
+    fireEvent(this, "value-changed", { value });
+    fireEvent(this, "change");
  }
 }

@@ -1,15 +1,14 @@
-import { mdiTextureBox } from "@mdi/js";
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import { mdiPlus, mdiTextureBox } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { PropertyValues, TemplateResult } from "lit";
-import { LitElement, html } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import type { TemplateResult } from "lit";
+import { LitElement, html, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
+import { computeAreaName } from "../common/entity/compute_area_name";
 import { computeDomain } from "../common/entity/compute_domain";
-import type { ScorableTextItem } from "../common/string/filter/sequence-matching";
-import { fuzzyFilterSort } from "../common/string/filter/sequence-matching";
-import type { AreaRegistryEntry } from "../data/area_registry";
+import { computeFloorName } from "../common/entity/compute_floor_name";
+import { getAreaContext } from "../common/entity/context/get_area_context";
 import { createAreaRegistryEntry } from "../data/area_registry";
 import type {
  DeviceEntityDisplayLookup,
@@ -21,26 +20,15 @@ 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";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import "./ha-combo-box";
-import type { HaComboBox } from "./ha-combo-box";
 import "./ha-combo-box-item";
+import "./ha-generic-picker";
+import type { HaGenericPicker } from "./ha-generic-picker";
 import "./ha-icon-button";
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
+import type { PickerValueRenderer } from "./ha-picker-field";
 import "./ha-svg-icon";

-type ScorableAreaRegistryEntry = ScorableTextItem & AreaRegistryEntry;
-
-const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (item) => html`
-  <ha-combo-box-item type="button">
-    ${item.icon
-      ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
-      : html`<ha-svg-icon slot="start" .path=${mdiTextureBox}></ha-svg-icon>`}
-    ${item.name}
-  </ha-combo-box-item>
-`;
-
 const ADD_NEW_ID = "___ADD_NEW___";
-const NO_ITEMS_ID = "___NO_ITEMS___";
-const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";

@customElement("ha-area-picker")
 export class HaAreaPicker extends LitElement {
@@ -99,41 +87,68 @@ export class HaAreaPicker extends LitElement {

  @property({ type: Boolean }) public required = false;

-  @state() private _opened?: boolean;
-
-  @query("ha-combo-box", true) public comboBox!: HaComboBox;
-
-  private _suggestion?: string;
-
-  private _init = false;
+  @query("ha-generic-picker") private _picker?: HaGenericPicker;

  public async open() {
    await this.updateComplete;
-    await this.comboBox?.open();
+    await this._picker?.open();
  }

-  public async focus() {
-    await this.updateComplete;
-    await this.comboBox?.focus();
-  }
+  // Recompute value renderer when the areas change
+  private _computeValueRenderer = memoizeOne(
+    (_haAreas: HomeAssistant["areas"]): PickerValueRenderer =>
+      (value) => {
+        const area = this.hass.areas[value];
+
+        if (!area) {
+          return html`
+            <ha-svg-icon slot="start" .path=${mdiTextureBox}></ha-svg-icon>
+            <span slot="headline">${area}</span>
+          `;
+        }
+
+        const { floor } = getAreaContext(area, this.hass);
+
+        const areaName = area ? computeAreaName(area) : undefined;
+        const floorName = floor ? computeFloorName(floor) : undefined;
+
+        const icon = area.icon;
+
+        return html`
+          ${icon
+            ? html`<ha-icon slot="start" .icon=${icon}></ha-icon>`
+            : html`<ha-svg-icon
+                slot="start"
+                .path=${mdiTextureBox}
+              ></ha-svg-icon>`}
+          <span slot="headline">${areaName}</span>
+          ${floorName
+            ? html`<span slot="supporting-text">${floorName}</span>`
+            : nothing}
+        `;
+      }
+  );

  private _getAreas = memoizeOne(
    (
-      areas: AreaRegistryEntry[],
-      devices: DeviceRegistryEntry[],
-      entities: EntityRegistryDisplayEntry[],
+      haAreas: HomeAssistant["areas"],
+      haDevices: HomeAssistant["devices"],
+      haEntities: HomeAssistant["entities"],
      includeDomains: this["includeDomains"],
      excludeDomains: this["excludeDomains"],
      includeDeviceClasses: this["includeDeviceClasses"],
      deviceFilter: this["deviceFilter"],
      entityFilter: this["entityFilter"],
-      noAdd: this["noAdd"],
      excludeAreas: this["excludeAreas"]
-    ): AreaRegistryEntry[] => {
+    ): PickerComboBoxItem[] => {
      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
      let inputDevices: DeviceRegistryEntry[] | undefined;
      let inputEntities: EntityRegistryDisplayEntry[] | undefined;

+      const areas = Object.values(haAreas);
+      const devices = Object.values(haDevices);
+      const entities = Object.values(haEntities);
+
      if (
        includeDomains ||
        excludeDomains ||
@@ -263,225 +278,147 @@ export class HaAreaPicker extends LitElement {
        );
      }

-      if (!outputAreas.length) {
-        outputAreas = [
-          {
-            area_id: NO_ITEMS_ID,
-            floor_id: null,
-            name: this.hass.localize("ui.components.area-picker.no_areas"),
-            picture: null,
-            icon: null,
-            aliases: [],
-            labels: [],
-            temperature_entity_id: null,
-            humidity_entity_id: null,
-            created_at: 0,
-            modified_at: 0,
-          },
-        ];
-      }
+      const items = outputAreas.map<PickerComboBoxItem>((area) => {
+        const { floor } = getAreaContext(area, this.hass);
+        const floorName = floor ? computeFloorName(floor) : undefined;
+        const areaName = computeAreaName(area);
+        return {
+          id: area.area_id,
+          primary: areaName || area.area_id,
+          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)),
+        };
+      });

-      return noAdd
-        ? outputAreas
-        : [
-            ...outputAreas,
-            {
-              area_id: ADD_NEW_ID,
-              floor_id: null,
-              name: this.hass.localize("ui.components.area-picker.add_new"),
-              picture: null,
-              icon: "mdi:plus",
-              aliases: [],
-              labels: [],
-              temperature_entity_id: null,
-              humidity_entity_id: null,
-              created_at: 0,
-              modified_at: 0,
-            },
-          ];
+      return items;
    }
  );

-  protected updated(changedProps: PropertyValues) {
-    if (
-      (!this._init && this.hass) ||
-      (this._init && changedProps.has("_opened") && this._opened)
-    ) {
-      this._init = true;
-      const areas = this._getAreas(
-        Object.values(this.hass.areas),
-        Object.values(this.hass.devices),
-        Object.values(this.hass.entities),
-        this.includeDomains,
-        this.excludeDomains,
-        this.includeDeviceClasses,
-        this.deviceFilter,
-        this.entityFilter,
-        this.noAdd,
-        this.excludeAreas
-      ).map((area) => ({
-        ...area,
-        strings: [area.area_id, ...area.aliases, area.name],
-      }));
-      this.comboBox.items = areas;
-      this.comboBox.filteredItems = areas;
+  private _getItems = () =>
+    this._getAreas(
+      this.hass.areas,
+      this.hass.devices,
+      this.hass.entities,
+      this.includeDomains,
+      this.excludeDomains,
+      this.includeDeviceClasses,
+      this.deviceFilter,
+      this.entityFilter,
+      this.excludeAreas
+    );
+
+  private _allAreaNames = memoizeOne(
+    (areas: HomeAssistant["areas"]) =>
+      Object.values(areas)
+        .map((area) => computeAreaName(area)?.toLowerCase())
+        .filter(Boolean) as string[]
+  );
+
+  private _getAdditionalItems = (
+    searchString?: string
+  ): PickerComboBoxItem[] => {
+    if (this.noAdd) {
+      return [];
    }
-  }
+
+    const allAreas = this._allAreaNames(this.hass.areas);
+
+    if (searchString && !allAreas.includes(searchString.toLowerCase())) {
+      return [
+        {
+          id: ADD_NEW_ID + searchString,
+          primary: this.hass.localize(
+            "ui.components.area-picker.add_new_sugestion",
+            {
+              name: searchString,
+            }
+          ),
+          icon_path: mdiPlus,
+        },
+      ];
+    }
+
+    return [
+      {
+        id: ADD_NEW_ID,
+        primary: this.hass.localize("ui.components.area-picker.add_new"),
+        icon_path: mdiPlus,
+      },
+    ];
+  };

  protected render(): TemplateResult {
+    const placeholder =
+      this.placeholder ?? this.hass.localize("ui.components.area-picker.area");
+
+    const valueRenderer = this._computeValueRenderer(this.hass.areas);
+
    return html`
-      <ha-combo-box
+      <ha-generic-picker
        .hass=${this.hass}
-        .helper=${this.helper}
-        item-value-path="area_id"
-        item-id-path="area_id"
-        item-label-path="name"
-        .value=${this._value}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .label=${this.label === undefined && this.hass
-          ? this.hass.localize("ui.components.area-picker.area")
-          : this.label}
-        .placeholder=${this.placeholder
-          ? this.hass.areas[this.placeholder]?.name
-          : undefined}
-        .renderer=${rowRenderer}
-        @filter-changed=${this._filterChanged}
-        @opened-changed=${this._openedChanged}
-        @value-changed=${this._areaChanged}
+        .autofocus=${this.autofocus}
+        .label=${this.label}
+        .notFoundLabel=${this.hass.localize(
+          "ui.components.area-picker.no_match"
+        )}
+        .placeholder=${placeholder}
+        .value=${this.value}
+        .getItems=${this._getItems}
+        .getAdditionalItems=${this._getAdditionalItems}
+        .valueRenderer=${valueRenderer}
+        @value-changed=${this._valueChanged}
      >
-      </ha-combo-box>
+      </ha-generic-picker>
    `;
  }

-  private _filterChanged(ev: CustomEvent): void {
-    const target = ev.target as HaComboBox;
-    const filterString = ev.detail.value;
-    if (!filterString) {
-      this.comboBox.filteredItems = this.comboBox.items;
-      return;
-    }
-
-    const filteredItems = fuzzyFilterSort<ScorableAreaRegistryEntry>(
-      filterString,
-      target.items?.filter(
-        (item) => ![NO_ITEMS_ID, ADD_NEW_ID].includes(item.label_id)
-      ) || []
-    );
-    if (filteredItems.length === 0) {
-      if (!this.noAdd) {
-        this.comboBox.filteredItems = [
-          {
-            area_id: NO_ITEMS_ID,
-            floor_id: null,
-            name: this.hass.localize("ui.components.area-picker.no_match"),
-            icon: null,
-            picture: null,
-            labels: [],
-            aliases: [],
-            temperature_entity_id: null,
-            humidity_entity_id: null,
-            created_at: 0,
-            modified_at: 0,
-          },
-        ] as AreaRegistryEntry[];
-      } else {
-        this._suggestion = filterString;
-        this.comboBox.filteredItems = [
-          {
-            area_id: ADD_NEW_SUGGESTION_ID,
-            floor_id: null,
-            name: this.hass.localize(
-              "ui.components.area-picker.add_new_sugestion",
-              { name: this._suggestion }
-            ),
-            icon: "mdi:plus",
-            picture: null,
-            labels: [],
-            aliases: [],
-            temperature_entity_id: null,
-            humidity_entity_id: null,
-            created_at: 0,
-            modified_at: 0,
-          },
-        ] as AreaRegistryEntry[];
-      }
-    } else {
-      this.comboBox.filteredItems = filteredItems;
-    }
-  }
-
-  private get _value() {
-    return this.value || "";
-  }
-
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
-  private _areaChanged(ev: ValueChangedEvent<string>) {
+  private _valueChanged(ev: ValueChangedEvent<string>) {
    ev.stopPropagation();
-    let newValue = ev.detail.value;
+    const value = ev.detail.value;

-    if (newValue === NO_ITEMS_ID) {
-      newValue = "";
-      this.comboBox.setInputValue("");
+    if (!value) {
+      this._setValue(undefined);
      return;
    }

-    if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
-      if (newValue !== this._value) {
-        this._setValue(newValue);
-      }
-      return;
+    if (value.startsWith(ADD_NEW_ID)) {
+      this.hass.loadFragmentTranslation("config");
+
+      const suggestedName = value.substring(ADD_NEW_ID.length);
+
+      showAreaRegistryDetailDialog(this, {
+        suggestedName: suggestedName,
+        createEntry: async (values) => {
+          try {
+            const area = await createAreaRegistryEntry(this.hass, values);
+            this._setValue(area.area_id);
+          } catch (err: any) {
+            showAlertDialog(this, {
+              title: this.hass.localize(
+                "ui.components.area-picker.failed_create_area"
+              ),
+              text: err.message,
+            });
+          }
+        },
+      });
    }

-    (ev.target as any).value = this._value;
-
-    this.hass.loadFragmentTranslation("config");
-
-    showAreaRegistryDetailDialog(this, {
-      suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
-      createEntry: async (values) => {
-        try {
-          const area = await createAreaRegistryEntry(this.hass, values);
-          const areas = [...Object.values(this.hass.areas), area];
-          this.comboBox.filteredItems = this._getAreas(
-            areas,
-            Object.values(this.hass.devices)!,
-            Object.values(this.hass.entities)!,
-            this.includeDomains,
-            this.excludeDomains,
-            this.includeDeviceClasses,
-            this.deviceFilter,
-            this.entityFilter,
-            this.noAdd,
-            this.excludeAreas
-          );
-          await this.updateComplete;
-          await this.comboBox.updateComplete;
-          this._setValue(area.area_id);
-        } catch (err: any) {
-          showAlertDialog(this, {
-            title: this.hass.localize(
-              "ui.components.area-picker.failed_create_area"
-            ),
-            text: err.message,
-          });
-        }
-      },
-    });
-
-    this._suggestion = undefined;
-    this.comboBox.setInputValue("");
+    this._setValue(value);
  }

  private _setValue(value?: string) {
    this.value = value;
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value });
-      fireEvent(this, "change");
-    }, 0);
+    fireEvent(this, "value-changed", { value });
+    fireEvent(this, "change");
  }
 }

@@ -44,7 +44,7 @@ export class HaAreasDisplayEditor extends LitElement {
    );

    const items: DisplayItem[] = areas.map((area) => {
-      const { floor } = getAreaContext(area.area_id, this.hass!);
+      const { floor } = getAreaContext(area, this.hass!);
      return {
        value: area.area_id,
        label: area.name,
@@ -5,8 +5,11 @@ import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import type { HomeAssistant } from "../types";
 import {
+  type PipelineRunEvent,
  runAssistPipeline,
  type AssistPipeline,
+  type ConversationChatLogAssistantDelta,
+  type ConversationChatLogToolResultDelta,
 } from "../data/assist_pipeline";
 import { supportsFeature } from "../common/entity/supports-feature";
 import { ConversationEntityFeature } from "../data/conversation";
@@ -90,7 +93,7 @@ export class HaAssistChat extends LitElement {
    super.disconnectedCallback();
    this._audioRecorder?.close();
    this._audioRecorder = undefined;
-    this._audio?.pause();
+    this._unloadAudio();
    this._conversation = [];
    this._conversationId = null;
  }
@@ -109,25 +112,24 @@ export class HaAssistChat extends LitElement {
    const supportsSTT = this.pipeline?.stt_engine && !this.disableSpeech;

    return html`
-      ${controlHA
-        ? nothing
-        : html`
-            <ha-alert>
-              ${this.hass.localize(
-                "ui.dialogs.voice_command.conversation_no_control"
-              )}
-            </ha-alert>
-          `}
-      <div class="messages">
-        <div class="messages-container" id="scroll-container">
-          ${this._conversation!.map(
-            // New lines matter for messages
-            // prettier-ignore
-            (message) => html`
+      <div class="messages" id="scroll-container">
+        ${controlHA
+          ? nothing
+          : html`
+              <ha-alert>
+                ${this.hass.localize(
+                  "ui.dialogs.voice_command.conversation_no_control"
+                )}
+              </ha-alert>
+            `}
+        <div class="spacer"></div>
+        ${this._conversation!.map(
+          // New lines matter for messages
+          // prettier-ignore
+          (message) => html`
                <div class="message ${classMap({ error: !!message.error, [message.who]: true })}">${message.text}</div>
              `
-          )}
-        </div>
+        )}
      </div>
      <div class="input" slot="primaryAction">
        <ha-textfield
@@ -273,8 +275,8 @@ export class HaAssistChat extends LitElement {
  }

  private async _startListening() {
+    this._unloadAudio();
    this._processing = true;
-    this._audio?.pause();
    if (!this._audioRecorder) {
      this._audioRecorder = new AudioRecorder((audio) => {
        if (this._audioBuffer) {
@@ -293,27 +295,36 @@ export class HaAssistChat extends LitElement {
    await this._audioRecorder.start();

    this._addMessage(userMessage);
-    this.requestUpdate("_audioRecorder");

-    let continueConversation = false;
-    let hassMessage = {
-      who: "hass",
-      text: "…",
-      error: false,
-    };
-    let currentDeltaRole = "";
-    // To make sure the answer is placed at the right user text, we add it before we process it
+    const hassMessageProcesser = this._createAddHassMessageProcessor();
+
    try {
      const unsub = await runAssistPipeline(
        this.hass,
-        (event) => {
+        (event: PipelineRunEvent) => {
          if (event.type === "run-start") {
            this._stt_binary_handler_id =
              event.data.runner_data.stt_binary_handler_id;
+            this._audio = new Audio(event.data.tts_output!.url);
+            this._audio.play();
+            this._audio.addEventListener("ended", () => {
+              this._unloadAudio();
+              if (hassMessageProcesser.continueConversation) {
+                this._startListening();
+              }
+            });
+            this._audio.addEventListener("pause", this._unloadAudio);
+            this._audio.addEventListener("canplaythrough", () =>
+              this._audio?.play()
+            );
+            this._audio.addEventListener("error", () => {
+              this._unloadAudio();
+              showAlertDialog(this, { title: "Error playing audio." });
+            });
          }

          // When we start STT stage, the WS has a binary handler
-          if (event.type === "stt-start" && this._audioBuffer) {
+          else if (event.type === "stt-start" && this._audioBuffer) {
            // Send the buffer over the WS to the STT engine.
            for (const buffer of this._audioBuffer) {
              this._sendAudioChunk(buffer);
@@ -322,91 +333,26 @@ export class HaAssistChat extends LitElement {
          }

          // Stop recording if the server is done with STT stage
-          if (event.type === "stt-end") {
+          else if (event.type === "stt-end") {
            this._stt_binary_handler_id = undefined;
            this._stopListening();
            userMessage.text = event.data.stt_output.text;
            this.requestUpdate("_conversation");
-            // To make sure the answer is placed at the right user text, we add it before we process it
-            this._addMessage(hassMessage);
-          }
-
-          if (event.type === "intent-progress") {
-            const delta = event.data.chat_log_delta;
-
-            // new message
-            if (delta.role) {
-              // If currentDeltaRole exists, it means we're receiving our
-              // second or later message. Let's add it to the chat.
-              if (currentDeltaRole && delta.role && hassMessage.text !== "…") {
-                // Remove progress indicator of previous message
-                hassMessage.text = hassMessage.text.substring(
-                  0,
-                  hassMessage.text.length - 1
-                );
-
-                hassMessage = {
-                  who: "hass",
-                  text: "…",
-                  error: false,
-                };
-                this._addMessage(hassMessage);
-              }
-              currentDeltaRole = delta.role;
-            }
-
-            if (
-              currentDeltaRole === "assistant" &&
-              "content" in delta &&
-              delta.content
-            ) {
-              hassMessage.text =
-                hassMessage.text.substring(0, hassMessage.text.length - 1) +
-                delta.content +
-                "…";
-              this.requestUpdate("_conversation");
-            }
-          }
-
-          if (event.type === "intent-end") {
-            this._conversationId = event.data.intent_output.conversation_id;
-            continueConversation =
-              event.data.intent_output.continue_conversation;
-            const plain = event.data.intent_output.response.speech?.plain;
-            if (plain) {
-              hassMessage.text = plain.speech;
-            }
-            this.requestUpdate("_conversation");
-          }
-
-          if (event.type === "tts-end") {
-            const url = event.data.tts_output.url;
-            this._audio = new Audio(url);
-            this._audio.play();
-            this._audio.addEventListener("ended", () => {
-              this._unloadAudio();
-              if (continueConversation) {
-                this._startListening();
-              }
-            });
-            this._audio.addEventListener("pause", this._unloadAudio);
-            this._audio.addEventListener("canplaythrough", this._playAudio);
-            this._audio.addEventListener("error", this._audioError);
-          }
-
-          if (event.type === "run-end") {
+            // Add the response message placeholder to the chat when we know the STT is done
+            hassMessageProcesser.addMessage();
+          } else if (event.type.startsWith("intent-")) {
+            hassMessageProcesser.processEvent(event);
+          } else if (event.type === "run-end") {
            this._stt_binary_handler_id = undefined;
            unsub();
-          }
-
-          if (event.type === "error") {
+          } else if (event.type === "error") {
+            this._unloadAudio();
            this._stt_binary_handler_id = undefined;
            if (userMessage.text === "…") {
              userMessage.text = event.data.message;
              userMessage.error = true;
            } else {
-              hassMessage.text = event.data.message;
-              hassMessage.error = true;
+              hassMessageProcesser.setError(event.data.message);
            }
            this._stopListening();
            this.requestUpdate("_conversation");
@@ -464,90 +410,33 @@ export class HaAssistChat extends LitElement {
    this.hass.connection.socket!.send(data);
  }

-  private _playAudio = () => {
-    this._audio?.play();
-  };
-
-  private _audioError = () => {
-    showAlertDialog(this, { title: "Error playing audio." });
-    this._audio?.removeAttribute("src");
-  };
-
  private _unloadAudio = () => {
-    this._audio?.removeAttribute("src");
+    if (!this._audio) {
+      return;
+    }
+    this._audio.pause();
+    this._audio.removeAttribute("src");
    this._audio = undefined;
  };

  private async _processText(text: string) {
+    this._unloadAudio();
    this._processing = true;
-    this._audio?.pause();
    this._addMessage({ who: "user", text });
-    let hassMessage = {
-      who: "hass",
-      text: "…",
-      error: false,
-    };
-    let currentDeltaRole = "";
-    // To make sure the answer is placed at the right user text, we add it before we process it
-    this._addMessage(hassMessage);
+    const hassMessageProcesser = this._createAddHassMessageProcessor();
+    hassMessageProcesser.addMessage();
    try {
      const unsub = await runAssistPipeline(
        this.hass,
        (event) => {
-          if (event.type === "intent-progress") {
-            const delta = event.data.chat_log_delta;
-
-            // new message and previous message has content
-            if (delta.role) {
-              // If currentDeltaRole exists, it means we're receiving our
-              // second or later message. Let's add it to the chat.
-              if (
-                currentDeltaRole &&
-                delta.role === "assistant" &&
-                hassMessage.text !== "…"
-              ) {
-                // Remove progress indicator of previous message
-                hassMessage.text = hassMessage.text.substring(
-                  0,
-                  hassMessage.text.length - 1
-                );
-
-                hassMessage = {
-                  who: "hass",
-                  text: "…",
-                  error: false,
-                };
-                this._addMessage(hassMessage);
-              }
-              currentDeltaRole = delta.role;
-            }
-
-            if (
-              currentDeltaRole === "assistant" &&
-              "content" in delta &&
-              delta.content
-            ) {
-              hassMessage.text =
-                hassMessage.text.substring(0, hassMessage.text.length - 1) +
-                delta.content +
-                "…";
-              this.requestUpdate("_conversation");
-            }
+          if (event.type.startsWith("intent-")) {
+            hassMessageProcesser.processEvent(event);
          }
-
          if (event.type === "intent-end") {
-            this._conversationId = event.data.intent_output.conversation_id;
-            const plain = event.data.intent_output.response.speech?.plain;
-            if (plain) {
-              hassMessage.text = plain.speech;
-            }
-            this.requestUpdate("_conversation");
            unsub();
          }
          if (event.type === "error") {
-            hassMessage.text = event.data.message;
-            hassMessage.error = true;
-            this.requestUpdate("_conversation");
+            hassMessageProcesser.setError(event.data.message);
            unsub();
          }
        },
@@ -560,20 +449,126 @@ export class HaAssistChat extends LitElement {
        }
      );
    } catch {
-      hassMessage.text = this.hass.localize("ui.dialogs.voice_command.error");
-      hassMessage.error = true;
-      this.requestUpdate("_conversation");
+      hassMessageProcesser.setError(
+        this.hass.localize("ui.dialogs.voice_command.error")
+      );
    } finally {
      this._processing = false;
    }
  }

+  private _createAddHassMessageProcessor() {
+    let currentDeltaRole = "";
+
+    const progressToNextMessage = () => {
+      if (progress.hassMessage.text === "…") {
+        return;
+      }
+      progress.hassMessage.text = progress.hassMessage.text.substring(
+        0,
+        progress.hassMessage.text.length - 1
+      );
+
+      progress.hassMessage = {
+        who: "hass",
+        text: "…",
+        error: false,
+      };
+      this._addMessage(progress.hassMessage);
+    };
+
+    const isAssistantDelta = (
+      _delta: any
+    ): _delta is Partial<ConversationChatLogAssistantDelta> =>
+      currentDeltaRole === "assistant";
+
+    const isToolResult = (
+      _delta: any
+    ): _delta is ConversationChatLogToolResultDelta =>
+      currentDeltaRole === "tool_result";
+
+    const tools: Record<
+      string,
+      ConversationChatLogAssistantDelta["tool_calls"][0]
+    > = {};
+
+    const progress = {
+      continueConversation: false,
+      hassMessage: {
+        who: "hass",
+        text: "…",
+        error: false,
+      },
+      addMessage: () => {
+        this._addMessage(progress.hassMessage);
+      },
+      setError: (error: string) => {
+        progressToNextMessage();
+        progress.hassMessage.text = error;
+        progress.hassMessage.error = true;
+        this.requestUpdate("_conversation");
+      },
+      processEvent: (event: PipelineRunEvent) => {
+        if (event.type === "intent-progress" && event.data.chat_log_delta) {
+          const delta = event.data.chat_log_delta;
+
+          // new message
+          if (delta.role) {
+            progressToNextMessage();
+            currentDeltaRole = delta.role;
+          }
+
+          if (isAssistantDelta(delta)) {
+            if (delta.content) {
+              progress.hassMessage.text =
+                progress.hassMessage.text.substring(
+                  0,
+                  progress.hassMessage.text.length - 1
+                ) +
+                delta.content +
+                "…";
+              this.requestUpdate("_conversation");
+            }
+            if (delta.tool_calls) {
+              for (const toolCall of delta.tool_calls) {
+                tools[toolCall.id] = toolCall;
+              }
+            }
+          } else if (isToolResult(delta)) {
+            if (tools[delta.tool_call_id]) {
+              delete tools[delta.tool_call_id];
+            }
+          }
+        } else if (event.type === "intent-end") {
+          this._conversationId = event.data.intent_output.conversation_id;
+          progress.continueConversation =
+            event.data.intent_output.continue_conversation;
+          const response =
+            event.data.intent_output.response.speech?.plain.speech;
+          if (!response) {
+            return;
+          }
+          if (event.data.intent_output.response.response_type === "error") {
+            progress.setError(response);
+          } else {
+            progress.hassMessage.text = response;
+            this.requestUpdate("_conversation");
+          }
+        }
+      },
+    };
+    return progress;
+  }
+
  static styles = css`
    :host {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
+    ha-alert {
+      margin-bottom: 8px;
+    }
    ha-textfield {
      display: block;
    }
@@ -581,17 +576,14 @@ export class HaAssistChat extends LitElement {
      flex: 1;
      display: block;
      box-sizing: border-box;
-      position: relative;
-    }
-    .messages-container {
-      position: absolute;
-      bottom: 0px;
-      right: 0px;
-      left: 0px;
-      padding: 0px 10px 16px;
-      box-sizing: border-box;
      overflow-y: auto;
      max-height: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: 0 12px 16px;
+    }
+    .spacer {
+      flex: 1;
    }
    .message {
      white-space: pre-line;
@@ -601,6 +593,9 @@ export class HaAssistChat extends LitElement {
      padding: 8px;
      border-radius: 15px;
    }
+    .message:last-child {
+      margin-bottom: 0;
+    }

    @media all and (max-width: 450px), all and (max-height: 500px) {
      .message {
@@ -619,7 +614,7 @@ export class HaAssistChat extends LitElement {
      margin-left: 24px;
      margin-inline-start: 24px;
      margin-inline-end: initial;
-      float: var(--float-end);
+      align-self: flex-end;
      text-align: right;
      border-bottom-right-radius: 0px;
      background-color: var(--chat-background-color-user, var(--primary-color));
@@ -631,7 +626,7 @@ export class HaAssistChat extends LitElement {
      margin-right: 24px;
      margin-inline-end: 24px;
      margin-inline-start: initial;
-      float: var(--float-start);
+      align-self: flex-start;
      border-bottom-left-radius: 0px;
      background-color: var(
        --chat-background-color-hass,
@@ -97,21 +97,21 @@ export class HaBadge extends LitElement {
    .label {
      font-size: var(--ha-font-size-xs);
      font-style: normal;
-      font-weight: var(--ha-font-weight-semibold);
-      line-height: var(--ha-line-height-condensed);
+      font-weight: var(--ha-font-weight-medium);
+      line-height: 10px;
      letter-spacing: 0.1px;
      color: var(--secondary-text-color);
    }
    .content {
-      font-size: var(--ha-font-size-badge, var(--ha-font-size-s));
+      font-size: var(--ha-badge-font-size, var(--ha-font-size-s));
      font-style: normal;
-      font-weight: var(--ha-font-weight-semibold);
-      line-height: var(--ha-line-height-normal);
+      font-weight: var(--ha-font-weight-medium);
+      line-height: var(--ha-line-height-condensed);
      letter-spacing: 0.1px;
      color: var(--primary-text-color);
    }
    ::slotted([slot="icon"]) {
-      --mdc-icon-size: var(--ha-icon-size-badge, 18px);
+      --mdc-icon-size: var(--ha-badge-icon-size, 18px);
      color: var(--badge-color);
      line-height: 0;
      margin-left: -4px;
@@ -81,27 +81,27 @@ export class HaBaseTimeInput extends LitElement {
  /**
   * Label for the day input
   */
-  @property({ attribute: false }) dayLabel = "";
+  @property({ type: String, attribute: "day-label" }) dayLabel = "";

  /**
   * Label for the hour input
   */
-  @property({ attribute: false }) hourLabel = "";
+  @property({ type: String, attribute: "hour-label" }) hourLabel = "";

  /**
   * Label for the min input
   */
-  @property({ attribute: false }) minLabel = "";
+  @property({ type: String, attribute: "min-label" }) minLabel = "";

  /**
   * Label for the sec input
   */
-  @property({ attribute: false }) secLabel = "";
+  @property({ type: String, attribute: "sec-label" }) secLabel = "";

  /**
   * Label for the milli sec input
   */
-  @property({ attribute: false }) millisecLabel = "";
+  @property({ type: String, attribute: "ms-label" }) millisecLabel = "";

  /**
   * show the sec field
@@ -342,7 +342,7 @@ export class HaBaseTimeInput extends LitElement {
      padding-right: 3px;
    }
    ha-textfield {
-      width: 55px;
+      width: 60px;
      flex-grow: 1;
      text-align: center;
      --mdc-shape-small: 0;
@@ -381,16 +381,16 @@ export class HaBaseTimeInput extends LitElement {
      border-bottom-width: 1px;
    }
    label {
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: var(--ha-moz-osx-font-smoothing);
+      -webkit-font-smoothing: var(--ha-font-smoothing);
      font-family: var(
        --mdc-typography-body2-font-family,
-        var(--mdc-typography-font-family, Roboto, sans-serif)
+        var(--mdc-typography-font-family, var(--ha-font-family-body))
      );
      font-size: var(--mdc-typography-body2-font-size, var(--ha-font-size-s));
      line-height: var(
        --mdc-typography-body2-line-height,
-        var(--ha-line-height-normal)
+        var(--ha-line-height-condensed)
      );
      font-weight: var(
        --mdc-typography-body2-font-weight,
@@ -409,7 +409,7 @@ export class HaBaseTimeInput extends LitElement {
    }
    ha-input-helper-text {
      padding-top: 8px;
-      line-height: var(--ha-line-height-normal);
+      line-height: var(--ha-line-height-condensed);
    }
  `;
 }
@@ -59,7 +59,7 @@ export class HaBigNumber extends LitElement {
      css`
        :host {
          font-size: 57px;
-          line-height: var(--ha-line-height-condensed);
+          line-height: 1.12;
          letter-spacing: -0.25px;
        }
        .value {
@@ -87,7 +87,7 @@ export class HaBigNumber extends LitElement {
        }
        .value .decimal {
          font-size: 0.42em;
-          line-height: var(--ha-line-height-condensed);
+          line-height: 1.33;
          min-height: 1.33em;
        }
        .value .unit {
@@ -17,6 +17,9 @@ export class HaComboBoxItem extends HaMdListItem {
      :host([border-top]) md-item {
        border-top: 1px solid var(--divider-color);
      }
+      [slot="start"] {
+        --state-icon-color: var(--secondary-text-color);
+      }
      [slot="headline"] {
        line-height: var(--ha-line-height-normal);
        font-size: var(--ha-font-size-m);
@@ -32,6 +35,20 @@ export class HaComboBoxItem extends HaMdListItem {
        width: 32px;
        height: 32px;
      }
+      ::slotted(.code) {
+        font-family: var(--ha-font-family-code);
+        font-size: var(--ha-font-size-xs);
+      }
+      ::slotted(.domain) {
+        font-size: var(--ha-font-size-s);
+        font-weight: var(--ha-font-weight-normal);
+        line-height: var(--ha-line-height-normal);
+        align-self: flex-end;
+        max-width: 30%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
    `,
  ];
 }
@@ -0,0 +1,24 @@
+import type { PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
+import { HaTextField } from "./ha-textfield";
+
+@customElement("ha-combo-box-textfield")
+export class HaComboBoxTextField extends HaTextField {
+  @property({ type: Boolean, attribute: "disable-set-value" })
+  public disableSetValue = false;
+
+  protected willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
+    if (changedProps.has("value")) {
+      if (this.disableSetValue) {
+        this.value = changedProps.get("value") as string;
+      }
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-combo-box-textfield": HaComboBoxTextField;
+  }
+}
@@ -12,11 +12,12 @@ import type {
 import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
 import type { HomeAssistant } from "../types";
 import "./ha-combo-box-item";
+import "./ha-combo-box-textfield";
 import "./ha-icon-button";
 import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
@@ -108,9 +109,14 @@ export class HaComboBox extends LitElement {
  @property({ type: Boolean, attribute: "hide-clear-icon" })
  public hideClearIcon = false;

+  @property({ type: Boolean, attribute: "clear-initial-value" })
+  public clearInitialValue = false;
+
  @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;

-  @query("ha-textfield", true) private _inputElement!: HaTextField;
+  @query("ha-combo-box-textfield", true) private _inputElement!: HaTextField;
+
+  @state({ type: Boolean }) private _disableSetValue = false;

  private _overlayMutationObserver?: MutationObserver;

@@ -147,6 +153,10 @@ export class HaComboBox extends LitElement {
    this._comboBox.value = value;
  }

+  public setTextFieldValue(value: string) {
+    this._inputElement.value = value;
+  }
+
  protected render(): TemplateResult {
    return html`
      <!-- @ts-ignore Tag definition is not included in theme folder -->
@@ -167,7 +177,7 @@ export class HaComboBox extends LitElement {
        @value-changed=${this._valueChanged}
        attr-for-value="value"
      >
-        <ha-textfield
+        <ha-combo-box-textfield
          label=${ifDefined(this.label)}
          placeholder=${ifDefined(this.placeholder)}
          ?disabled=${this.disabled}
@@ -187,9 +197,10 @@ export class HaComboBox extends LitElement {
          .invalid=${this.invalid}
          .helper=${this.helper}
          helperPersistent
+          .disableSetValue=${this._disableSetValue}
        >
          <slot name="icon" slot="leadingIcon"></slot>
-        </ha-textfield>
+        </ha-combo-box-textfield>
        ${this.value && !this.hideClearIcon
          ? html`<ha-svg-icon
              role="button"
@@ -242,8 +253,20 @@ export class HaComboBox extends LitElement {
    // delay this so we can handle click event for toggle button before setting _opened
    setTimeout(() => {
      this.opened = opened;
+      fireEvent(this, "opened-changed", { value: ev.detail.value });
    }, 0);
-    fireEvent(this, "opened-changed", { value: ev.detail.value });
+
+    if (this.clearInitialValue) {
+      this.setTextFieldValue("");
+      if (opened) {
+        // Wait 100ms to be sure vaddin-combo-box-light already tried to set the value
+        setTimeout(() => {
+          this._disableSetValue = false;
+        }, 100);
+      } else {
+        this._disableSetValue = true;
+      }
+    }

    if (opened) {
      const overlay = document.querySelector<HTMLElement>(
@@ -322,8 +345,10 @@ export class HaComboBox extends LitElement {
      // @ts-ignore
      this._comboBox._closeOnBlurIsPrevented = true;
    }
+    if (!this.opened) {
+      return;
+    }
    const newValue = ev.detail.value;
-
    if (newValue !== this.value) {
      fireEvent(this, "value-changed", { value: newValue || undefined });
    }
@@ -338,10 +363,10 @@ export class HaComboBox extends LitElement {
      position: relative;
      --vaadin-combo-box-overlay-max-height: calc(45vh - 56px);
    }
-    ha-textfield {
+    ha-combo-box-textfield {
      width: 100%;
    }
-    ha-textfield > ha-icon-button {
+    ha-combo-box-textfield > ha-icon-button {
      --mdc-icon-button-size: 24px;
      padding: 2px;
      color: var(--secondary-text-color);
@@ -58,8 +58,8 @@ export class HaControlButton extends LitElement {
      padding: var(--control-button-padding);
      box-sizing: border-box;
      line-height: inherit;
-      font-family: Roboto;
-      font-weight: var(--ha-font-weight-semibold);
+      font-family: var(--ha-font-family-body);
+      font-weight: var(--ha-font-weight-medium);
      outline: none;
      overflow: hidden;
      background: none;
@@ -194,7 +194,7 @@ export class HaControlNumberButton extends LitElement {
      color: var(--primary-text-color);
      -webkit-tap-highlight-color: transparent;
      font-style: normal;
-      font-weight: var(--ha-font-weight-semibold);
+      font-weight: var(--ha-font-weight-medium);
      transition: color 180ms ease-in-out;
    }
    :host([disabled]) {
@@ -180,7 +180,7 @@ export class HaControlSelectMenu extends SelectBase {
        --mdc-icon-size: 20px;
        --ha-ripple-color: var(--secondary-text-color);
        font-size: var(--ha-font-size-m);
-        line-height: var(--ha-line-height-condensed);
+        line-height: 1.4;
        width: auto;
        color: var(--primary-text-color);
        -webkit-tap-highlight-color: transparent;
@@ -207,7 +207,7 @@ export class HaControlSelect extends LitElement {
      outline: none;
      transition: box-shadow 180ms ease-in-out;
      font-style: normal;
-      font-weight: var(--ha-font-weight-semibold);
+      font-weight: var(--ha-font-weight-medium);
      color: var(--primary-text-color);
      user-select: none;
      -webkit-tap-highlight-color: transparent;
@@ -54,12 +54,12 @@ export class HaDialogHeader extends LitElement {
        }
        .header-title {
          font-size: var(--ha-font-size-xl);
-          line-height: var(--ha-line-height-normal);
+          line-height: var(--ha-line-height-condensed);
          font-weight: var(--ha-font-weight-normal);
        }
        .header-subtitle {
          font-size: var(--ha-font-size-m);
-          line-height: var(--ha-line-height-condensed);
+          line-height: 20px;
          color: var(--secondary-text-color);
        }
        @media all and (min-width: 450px) and (min-height: 500px) {
@@ -86,11 +86,11 @@ export class HaDialog extends DialogBase {
        );
        --mdc-dialog-box-shadow: var(--dialog-box-shadow, none);
        --mdc-typography-headline6-font-weight: var(--ha-font-weight-normal);
-        --mdc-typography-headline6-font-size: var(--ha-font-size-xl);
+        --mdc-typography-headline6-font-size: 1.574rem;
      }
      .mdc-dialog__actions {
        justify-content: var(--justify-action-buttons, flex-end);
-        padding-bottom: max(env(safe-area-inset-bottom), 24px);
+        padding: 12px 24px max(var(--safe-area-inset-bottom), 12px) 24px;
      }
      .mdc-dialog__actions span:nth-child(1) {
        flex: var(--secondary-action-button-flex, unset);
@@ -107,9 +107,6 @@ export class HaDialog extends DialogBase {
      .mdc-dialog__title:has(span) {
        padding: 12px 12px 0;
      }
-      .mdc-dialog__actions {
-        padding: 12px 24px 12px 24px;
-      }
      .mdc-dialog__title::before {
        content: unset;
      }
@@ -120,7 +117,7 @@ export class HaDialog extends DialogBase {
      :host([hideactions]) .mdc-dialog .mdc-dialog__content {
        padding-bottom: max(
          var(--dialog-content-padding, 24px),
-          env(safe-area-inset-bottom)
+          var(--safe-area-inset-bottom)
        );
      }
      .mdc-dialog .mdc-dialog__surface {
@@ -52,11 +52,11 @@ class HaDurationInput extends LitElement {
        .milliseconds=${this._milliseconds}
        @value-changed=${this._durationChanged}
        no-hours-limit
-        dayLabel="dd"
-        hourLabel="hh"
-        minLabel="mm"
-        secLabel="ss"
-        millisecLabel="ms"
+        day-label="dd"
+        hour-label="hh"
+        min-label="mm"
+        sec-label="ss"
+        ms-label="ms"
      ></ha-base-time-input>
    `;
  }
@@ -188,7 +188,7 @@ export class HaExpansionPanel extends LitElement {
      align-items: center;
      cursor: pointer;
      overflow: hidden;
-      font-weight: var(--ha-font-weight-semibold);
+      font-weight: var(--ha-font-weight-medium);
      outline: none;
    }
    #summary.noCollapse {
@@ -202,6 +202,7 @@ export class HaExpansionPanel extends LitElement {
    .header,
    ::slotted([slot="header"]) {
      flex: 1;
+      overflow-wrap: anywhere;
    }

    .container {
@@ -324,7 +324,7 @@ export class HaFileUpload extends LitElement {
      box-sizing: border-box;
    }
    .header {
-      font-weight: var(--ha-font-weight-semibold);
+      font-weight: var(--ha-font-weight-medium);
    }
    .progress {
      color: var(--secondary-text-color);
@@ -208,8 +208,8 @@ export class HaFilterBlueprints extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
          line-height: var(--ha-line-height-normal);
          text-align: center;
@@ -303,8 +303,8 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
          line-height: var(--ha-line-height-normal);
          text-align: center;
@@ -232,8 +232,8 @@ export class HaFilterDevices extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
          line-height: var(--ha-line-height-normal);
          text-align: center;
@@ -189,8 +189,8 @@ export class HaFilterDomains extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
          line-height: var(--ha-line-height-normal);
          text-align: center;
@@ -246,8 +246,8 @@ export class HaFilterEntities extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
          line-height: var(--ha-line-height-normal);
          text-align: center;
@@ -303,8 +303,8 @@ export class HaFilterFloorAreas extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
          line-height: var(--ha-line-height-normal);
          text-align: center;
@@ -195,8 +195,8 @@ export class HaFilterIntegrations extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
          line-height: var(--ha-line-height-normal);
          text-align: center;
@@ -233,8 +233,8 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
          line-height: var(--ha-line-height-normal);
          text-align: center;
@@ -177,8 +177,8 @@ export class HaFilterStates extends LitElement {
          min-width: 16px;
          box-sizing: border-box;
          border-radius: 50%;
-          font-weight: var(--ha-font-weight-normal);
          font-size: var(--ha-font-size-xs);
+          font-weight: var(--ha-font-weight-normal);
          background-color: var(--primary-color);
          line-height: var(--ha-line-height-normal);
          text-align: center;
@@ -1,14 +1,13 @@
+import { mdiPlus, mdiTextureBox } from "@mdi/js";
 import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { HassEntity } from "home-assistant-js-websocket";
-import type { PropertyValues, TemplateResult } from "lit";
+import type { TemplateResult } from "lit";
 import { LitElement, html } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
-import type { ScorableTextItem } from "../common/string/filter/sequence-matching";
-import { fuzzyFilterSort } from "../common/string/filter/sequence-matching";
-import type { AreaRegistryEntry } from "../data/area_registry";
+import { computeFloorName } from "../common/entity/compute_floor_name";
 import { updateAreaRegistryEntry } from "../data/area_registry";
 import type {
  DeviceEntityDisplayLookup,
@@ -16,33 +15,29 @@ import type {
 } from "../data/device_registry";
 import { getDeviceEntityDisplayLookup } from "../data/device_registry";
 import type { EntityRegistryDisplayEntry } from "../data/entity_registry";
-import type { FloorRegistryEntry } from "../data/floor_registry";
 import {
  createFloorRegistryEntry,
  getFloorAreaLookup,
+  type FloorRegistryEntry,
 } from "../data/floor_registry";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { showFloorRegistryDetailDialog } from "../panels/config/areas/show-dialog-floor-registry-detail";
 import type { HomeAssistant, ValueChangedEvent } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import "./ha-combo-box";
-import type { HaComboBox } from "./ha-combo-box";
 import "./ha-combo-box-item";
 import "./ha-floor-icon";
+import "./ha-generic-picker";
+import type { HaGenericPicker } from "./ha-generic-picker";
 import "./ha-icon-button";
-
-type ScorableFloorRegistryEntry = ScorableTextItem & FloorRegistryEntry;
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
+import type { PickerValueRenderer } from "./ha-picker-field";
+import "./ha-svg-icon";

 const ADD_NEW_ID = "___ADD_NEW___";
-const NO_FLOORS_ID = "___NO_FLOORS___";
-const ADD_NEW_SUGGESTION_ID = "___ADD_NEW_SUGGESTION___";

-const rowRenderer: ComboBoxLitRenderer<FloorRegistryEntry> = (item) => html`
-  <ha-combo-box-item type="button">
-    <ha-floor-icon slot="start" .floor=${item}></ha-floor-icon>
-    ${item.name}
-  </ha-combo-box-item>
-`;
+interface FloorComboBoxItem extends PickerComboBoxItem {
+  floor?: FloorRegistryEntry;
+}

@customElement("ha-floor-picker")
 export class HaFloorPicker extends LitElement {
@@ -88,7 +83,7 @@ export class HaFloorPicker extends LitElement {
   * @type {Array}
   * @attr exclude-floors
   */
-  @property({ type: Array, attribute: "exclude-floor" })
+  @property({ type: Array, attribute: "exclude-floors" })
  public excludeFloors?: string[];

  @property({ attribute: false })
@@ -101,38 +96,53 @@ export class HaFloorPicker extends LitElement {

  @property({ type: Boolean }) public required = false;

-  @state() private _opened?: boolean;
-
-  @query("ha-combo-box", true) public comboBox!: HaComboBox;
-
-  private _suggestion?: string;
-
-  private _init = false;
+  @query("ha-generic-picker") private _picker?: HaGenericPicker;

  public async open() {
    await this.updateComplete;
-    await this.comboBox?.open();
+    await this._picker?.open();
  }

-  public async focus() {
-    await this.updateComplete;
-    await this.comboBox?.focus();
-  }
+  // Recompute value renderer when the areas change
+  private _computeValueRenderer = memoizeOne(
+    (_haAreas: HomeAssistant["floors"]): PickerValueRenderer =>
+      (value) => {
+        const floor = this.hass.floors[value];
+
+        if (!floor) {
+          return html`
+            <ha-svg-icon slot="start" .path=${mdiTextureBox}></ha-svg-icon>
+            <span slot="headline">${floor}</span>
+          `;
+        }
+
+        const floorName = floor ? computeFloorName(floor) : undefined;
+
+        return html`
+          <ha-floor-icon slot="start" .floor=${floor}></ha-floor-icon>
+          <span slot="headline">${floorName}</span>
+        `;
+      }
+  );

  private _getFloors = memoizeOne(
    (
-      floors: FloorRegistryEntry[],
-      areas: AreaRegistryEntry[],
-      devices: DeviceRegistryEntry[],
-      entities: EntityRegistryDisplayEntry[],
+      haFloors: HomeAssistant["floors"],
+      haAreas: HomeAssistant["areas"],
+      haDevices: HomeAssistant["devices"],
+      haEntities: HomeAssistant["entities"],
      includeDomains: this["includeDomains"],
      excludeDomains: this["excludeDomains"],
      includeDeviceClasses: this["includeDeviceClasses"],
      deviceFilter: this["deviceFilter"],
      entityFilter: this["entityFilter"],
-      noAdd: this["noAdd"],
      excludeFloors: this["excludeFloors"]
-    ): FloorRegistryEntry[] => {
+    ): FloorComboBoxItem[] => {
+      const floors = Object.values(haFloors);
+      const areas = Object.values(haAreas);
+      const devices = Object.values(haDevices);
+      const entities = Object.values(haEntities);
+
      let deviceEntityLookup: DeviceEntityDisplayLookup = {};
      let inputDevices: DeviceRegistryEntry[] | undefined;
      let inputEntities: EntityRegistryDisplayEntry[] | undefined;
@@ -269,216 +279,169 @@ export class HaFloorPicker extends LitElement {
        );
      }

-      if (!outputFloors.length) {
-        outputFloors = [
-          {
-            floor_id: NO_FLOORS_ID,
-            name: this.hass.localize("ui.components.floor-picker.no_floors"),
-            icon: null,
-            level: null,
-            aliases: [],
-            created_at: 0,
-            modified_at: 0,
-          },
-        ];
-      }
+      const items = outputFloors.map<FloorComboBoxItem>((floor) => {
+        const floorName = computeFloorName(floor);
+        return {
+          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)
+          ),
+        };
+      });

-      return noAdd
-        ? outputFloors
-        : [
-            ...outputFloors,
-            {
-              floor_id: ADD_NEW_ID,
-              name: this.hass.localize("ui.components.floor-picker.add_new"),
-              icon: "mdi:plus",
-              level: null,
-              aliases: [],
-              created_at: 0,
-              modified_at: 0,
-            },
-          ];
+      return items;
    }
  );

-  protected updated(changedProps: PropertyValues) {
-    if (
-      (!this._init && this.hass) ||
-      (this._init && changedProps.has("_opened") && this._opened)
-    ) {
-      this._init = true;
-      const floors = this._getFloors(
-        Object.values(this.hass.floors),
-        Object.values(this.hass.areas),
-        Object.values(this.hass.devices),
-        Object.values(this.hass.entities),
-        this.includeDomains,
-        this.excludeDomains,
-        this.includeDeviceClasses,
-        this.deviceFilter,
-        this.entityFilter,
-        this.noAdd,
-        this.excludeFloors
-      ).map((floor) => ({
-        ...floor,
-        strings: [floor.floor_id, floor.name, ...floor.aliases],
-      }));
-      this.comboBox.items = floors;
-      this.comboBox.filteredItems = floors;
+  private _rowRenderer: ComboBoxLitRenderer<FloorComboBoxItem> = (item) => html`
+    <ha-combo-box-item type="button" compact>
+      ${item.icon_path
+        ? html`
+            <ha-svg-icon
+              slot="start"
+              style="margin: 0 4px"
+              .path=${item.icon_path}
+            ></ha-svg-icon>
+          `
+        : html`
+            <ha-floor-icon
+              slot="start"
+              .floor=${item.floor}
+              style="margin: 0 4px"
+            ></ha-floor-icon>
+          `}
+      <span slot="headline">${item.primary}</span>
+    </ha-combo-box-item>
+  `;
+
+  private _getItems = () =>
+    this._getFloors(
+      this.hass.floors,
+      this.hass.areas,
+      this.hass.devices,
+      this.hass.entities,
+      this.includeDomains,
+      this.excludeDomains,
+      this.includeDeviceClasses,
+      this.deviceFilter,
+      this.entityFilter,
+      this.excludeFloors
+    );
+
+  private _allFloorNames = memoizeOne(
+    (floors: HomeAssistant["floors"]) =>
+      Object.values(floors)
+        .map((floor) => computeFloorName(floor)?.toLowerCase())
+        .filter(Boolean) as string[]
+  );
+
+  private _getAdditionalItems = (
+    searchString?: string
+  ): PickerComboBoxItem[] => {
+    if (this.noAdd) {
+      return [];
    }
-  }
+
+    const allFloors = this._allFloorNames(this.hass.floors);
+
+    if (searchString && !allFloors.includes(searchString.toLowerCase())) {
+      return [
+        {
+          id: ADD_NEW_ID + searchString,
+          primary: this.hass.localize(
+            "ui.components.floor-picker.add_new_sugestion",
+            {
+              name: searchString,
+            }
+          ),
+          icon_path: mdiPlus,
+        },
+      ];
+    }
+
+    return [
+      {
+        id: ADD_NEW_ID,
+        primary: this.hass.localize("ui.components.floor-picker.add_new"),
+        icon_path: mdiPlus,
+      },
+    ];
+  };

  protected render(): TemplateResult {
+    const placeholder =
+      this.placeholder ??
+      this.hass.localize("ui.components.floor-picker.floor");
+
+    const valueRenderer = this._computeValueRenderer(this.hass.floors);
+
    return html`
-      <ha-combo-box
+      <ha-generic-picker
        .hass=${this.hass}
-        .helper=${this.helper}
-        item-value-path="floor_id"
-        item-id-path="floor_id"
-        item-label-path="name"
-        .value=${this._value}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        .label=${this.label === undefined && this.hass
-          ? this.hass.localize("ui.components.floor-picker.floor")
-          : this.label}
-        .placeholder=${this.placeholder
-          ? this.hass.floors[this.placeholder]?.name
-          : undefined}
-        .renderer=${rowRenderer}
-        @filter-changed=${this._filterChanged}
-        @opened-changed=${this._openedChanged}
-        @value-changed=${this._floorChanged}
+        .autofocus=${this.autofocus}
+        .label=${this.label}
+        .notFoundLabel=${this.hass.localize(
+          "ui.components.floor-picker.no_match"
+        )}
+        .placeholder=${placeholder}
+        .value=${this.value}
+        .getItems=${this._getItems}
+        .getAdditionalItems=${this._getAdditionalItems}
+        .valueRenderer=${valueRenderer}
+        .rowRenderer=${this._rowRenderer}
+        @value-changed=${this._valueChanged}
      >
-      </ha-combo-box>
+      </ha-generic-picker>
    `;
  }

-  private _filterChanged(ev: CustomEvent): void {
-    const target = ev.target as HaComboBox;
-    const filterString = ev.detail.value;
-    if (!filterString) {
-      this.comboBox.filteredItems = this.comboBox.items;
-      return;
-    }
-
-    const filteredItems = fuzzyFilterSort<ScorableFloorRegistryEntry>(
-      filterString,
-      target.items?.filter(
-        (item) => ![NO_FLOORS_ID, ADD_NEW_ID].includes(item.label_id)
-      ) || []
-    );
-    if (filteredItems.length === 0) {
-      if (this.noAdd) {
-        this.comboBox.filteredItems = [
-          {
-            floor_id: NO_FLOORS_ID,
-            name: this.hass.localize("ui.components.floor-picker.no_match"),
-            icon: null,
-            level: null,
-            aliases: [],
-            created_at: 0,
-            modified_at: 0,
-          },
-        ] as FloorRegistryEntry[];
-      } else {
-        this._suggestion = filterString;
-        this.comboBox.filteredItems = [
-          {
-            floor_id: ADD_NEW_SUGGESTION_ID,
-            name: this.hass.localize(
-              "ui.components.floor-picker.add_new_sugestion",
-              { name: this._suggestion }
-            ),
-            icon: "mdi:plus",
-            level: null,
-            aliases: [],
-            created_at: 0,
-            modified_at: 0,
-          },
-        ] as FloorRegistryEntry[];
-      }
-    } else {
-      this.comboBox.filteredItems = filteredItems;
-    }
-  }
-
-  private get _value() {
-    return this.value || "";
-  }
-
-  private _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
-  private _floorChanged(ev: ValueChangedEvent<string>) {
+  private _valueChanged(ev: ValueChangedEvent<string>) {
    ev.stopPropagation();
-    let newValue = ev.detail.value;
+    const value = ev.detail.value;

-    if (newValue === NO_FLOORS_ID) {
-      newValue = "";
-      this.comboBox.setInputValue("");
+    if (!value) {
+      this._setValue(undefined);
      return;
    }

-    if (![ADD_NEW_SUGGESTION_ID, ADD_NEW_ID].includes(newValue)) {
-      if (newValue !== this._value) {
-        this._setValue(newValue);
-      }
-      return;
-    }
+    if (value.startsWith(ADD_NEW_ID)) {
+      this.hass.loadFragmentTranslation("config");

-    (ev.target as any).value = this._value;
+      const suggestedName = value.substring(ADD_NEW_ID.length);

-    this.hass.loadFragmentTranslation("config");
-
-    showFloorRegistryDetailDialog(this, {
-      suggestedName: newValue === ADD_NEW_SUGGESTION_ID ? this._suggestion : "",
-      createEntry: async (values, addedAreas) => {
-        try {
-          const floor = await createFloorRegistryEntry(this.hass, values);
-          addedAreas.forEach((areaId) => {
-            updateAreaRegistryEntry(this.hass, areaId, {
-              floor_id: floor.floor_id,
+      showFloorRegistryDetailDialog(this, {
+        suggestedName: suggestedName,
+        createEntry: async (values, addedAreas) => {
+          try {
+            const floor = await createFloorRegistryEntry(this.hass, values);
+            addedAreas.forEach((areaId) => {
+              updateAreaRegistryEntry(this.hass, areaId, {
+                floor_id: floor.floor_id,
+              });
            });
-          });
-          const floors = [...Object.values(this.hass.floors), floor];
-          this.comboBox.filteredItems = this._getFloors(
-            floors,
-            Object.values(this.hass.areas)!,
-            Object.values(this.hass.devices)!,
-            Object.values(this.hass.entities)!,
-            this.includeDomains,
-            this.excludeDomains,
-            this.includeDeviceClasses,
-            this.deviceFilter,
-            this.entityFilter,
-            this.noAdd,
-            this.excludeFloors
-          );
-          await this.updateComplete;
-          await this.comboBox.updateComplete;
-          this._setValue(floor.floor_id);
-        } catch (err: any) {
-          showAlertDialog(this, {
-            title: this.hass.localize(
-              "ui.components.floor-picker.failed_create_floor"
-            ),
-            text: err.message,
-          });
-        }
-      },
-    });
+            this._setValue(floor.floor_id);
+          } catch (err: any) {
+            showAlertDialog(this, {
+              title: this.hass.localize(
+                "ui.components.floor-picker.failed_create_floor"
+              ),
+              text: err.message,
+            });
+          }
+        },
+      });
+    }

-    this._suggestion = undefined;
-    this.comboBox.setInputValue("");
+    this._setValue(value);
  }

  private _setValue(value?: string) {
    this.value = value;
-    setTimeout(() => {
-      fireEvent(this, "value-changed", { value });
-      fireEvent(this, "change");
-    }, 0);
+    fireEvent(this, "value-changed", { value });
+    fireEvent(this, "change");
  }
 }

@@ -70,7 +70,7 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
      padding-top: 4px;
      box-sizing: border-box;
      color: var(--secondary-text-color);
-      font-size: var(--ha-font-size-s);
+      font-size: 0.875rem;
      font-weight: var(
        --mdc-typography-body2-font-weight,
        var(--ha-font-weight-normal)
@@ -20,7 +20,7 @@ export class HaFormConstant extends LitElement implements HaFormElement {
      display: block;
    }
    .label {
-      font-weight: var(--ha-font-weight-semibold);
+      font-weight: var(--ha-font-weight-medium);
    }
  `;
 }
--- a/Show More
+++ b/Show More