Add iOS-specific autofocus handling in HaWaDialog

2025-12-23 00:17:27 +00:00 · 2025-12-18 13:26:47 +01:00
115 changed files with 2907 additions and 2620 deletions
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -154,7 +154,7 @@ try {

 - **Use CSS custom properties**: Leverage the theme system
 - **Use spacing tokens**: Prefer `--ha-space-*` tokens over hardcoded values for consistent spacing
-  - Spacing scale: `--ha-space-1` (4px) through `--ha-space-20` (80px) in 4px increments
+  - Spacing scale: `--ha-space-0` (0px) through `--ha-space-20` (80px) in 4px increments
  - Defined in `src/resources/theme/core.globals.ts`
  - Common values: `--ha-space-2` (8px), `--ha-space-4` (16px), `--ha-space-8` (32px)
 - **Mobile-first responsive**: Design for mobile, enhance for desktop
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@@ -1,7 +1,5 @@
 compressionLevel: mixed

-npmMinimalAgeGate: "3d"
-
 defaultSemverRangePrefix: ""

 enableGlobalCache: false
--- a/build-scripts/bundle.cjs
+++ b/build-scripts/bundle.cjs
@@ -20,6 +20,8 @@ module.exports.ignorePackages = () => [];
 // Files from NPM packages that we should replace with empty file
 module.exports.emptyPackages = ({ isHassioBuild, isLandingPageBuild }) =>
  [
+    require.resolve("@vaadin/vaadin-material-styles/typography.js"),
+    require.resolve("@vaadin/vaadin-material-styles/font-icons.js"),
    // Icons in supervisor conflict with icons in HA so we don't load.
    (isHassioBuild || isLandingPageBuild) &&
      require.resolve(
--- a/build-scripts/rspack.cjs
+++ b/build-scripts/rspack.cjs
@@ -168,16 +168,12 @@ const createRspackConfig = ({
          );
        },
      }),
-      bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).length
-        ? new rspack.NormalModuleReplacementPlugin(
+      new rspack.NormalModuleReplacementPlugin(
        new RegExp(
-              bundle
-                .emptyPackages({ isHassioBuild, isLandingPageBuild })
-                .join("|")
+          bundle.emptyPackages({ isHassioBuild, isLandingPageBuild }).join("|")
        ),
        path.resolve(paths.root_dir, "src/util/empty.js")
-          )
-        : false,
+      ),
      !isProdBuild && new LogStartCompilePlugin(),
      isProdBuild &&
        new StatsWriterPlugin({
@@ -221,42 +217,6 @@ const createRspackConfig = ({
          "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js",
        "@lit-labs/observers/resize-controller":
          "@lit-labs/observers/resize-controller.js",
-        "@formatjs/intl-durationformat/should-polyfill$":
-          "@formatjs/intl-durationformat/should-polyfill.js",
-        "@formatjs/intl-durationformat/polyfill-force$":
-          "@formatjs/intl-durationformat/polyfill-force.js",
-        "@formatjs/intl-datetimeformat/should-polyfill":
-          "@formatjs/intl-datetimeformat/should-polyfill.js",
-        "@formatjs/intl-datetimeformat/polyfill-force":
-          "@formatjs/intl-datetimeformat/polyfill-force.js",
-        "@formatjs/intl-displaynames/should-polyfill":
-          "@formatjs/intl-displaynames/should-polyfill.js",
-        "@formatjs/intl-displaynames/polyfill-force":
-          "@formatjs/intl-displaynames/polyfill-force.js",
-        "@formatjs/intl-getcanonicallocales/should-polyfill":
-          "@formatjs/intl-getcanonicallocales/should-polyfill.js",
-        "@formatjs/intl-getcanonicallocales/polyfill-force":
-          "@formatjs/intl-getcanonicallocales/polyfill-force.js",
-        "@formatjs/intl-listformat/should-polyfill":
-          "@formatjs/intl-listformat/should-polyfill.js",
-        "@formatjs/intl-listformat/polyfill-force":
-          "@formatjs/intl-listformat/polyfill-force.js",
-        "@formatjs/intl-locale/should-polyfill":
-          "@formatjs/intl-locale/should-polyfill.js",
-        "@formatjs/intl-locale/polyfill-force":
-          "@formatjs/intl-locale/polyfill-force.js",
-        "@formatjs/intl-numberformat/should-polyfill":
-          "@formatjs/intl-numberformat/should-polyfill.js",
-        "@formatjs/intl-numberformat/polyfill-force":
-          "@formatjs/intl-numberformat/polyfill-force.js",
-        "@formatjs/intl-pluralrules/should-polyfill":
-          "@formatjs/intl-pluralrules/should-polyfill.js",
-        "@formatjs/intl-pluralrules/polyfill-force":
-          "@formatjs/intl-pluralrules/polyfill-force.js",
-        "@formatjs/intl-relativetimeformat/should-polyfill":
-          "@formatjs/intl-relativetimeformat/should-polyfill.js",
-        "@formatjs/intl-relativetimeformat/polyfill-force":
-          "@formatjs/intl-relativetimeformat/polyfill-force.js",
      },
    },
    output: {
--- a/cast/src/media/entrypoint.ts
+++ b/cast/src/media/entrypoint.ts
@@ -5,19 +5,17 @@ const castContext = framework.CastReceiverContext.getInstance();
 const playerManager = castContext.getPlayerManager();

 playerManager.setMessageInterceptor(
-  "LOAD" as framework.messages.MessageType.LOAD,
+  framework.messages.MessageType.LOAD,
  (loadRequestData) => {
    const media = loadRequestData.media;
    // Special handling if it came from Google Assistant
    if (media.entity) {
      media.contentId = media.entity;
-      media.streamType = "LIVE" as framework.messages.StreamType.LIVE;
+      media.streamType = framework.messages.StreamType.LIVE;
      media.contentType = "application/vnd.apple.mpegurl";
      // @ts-ignore
-      // type definition is wrong, should be "FMP4" instead of "fmp4"
-      // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.messages#.HlsVideoSegmentFormat
      media.hlsVideoSegmentFormat =
-        "FMP4" as framework.messages.HlsVideoSegmentFormat.FMP4;
+        framework.messages.HlsVideoSegmentFormat.FMP4;
    }
    return loadRequestData;
  }
--- a/cast/src/receiver/entrypoint.ts
+++ b/cast/src/receiver/entrypoint.ts
@@ -1,9 +1,10 @@
+import { framework } from "./cast_framework";
 import { CAST_NS } from "../../../src/cast/const";
 import type { HassMessage } from "../../../src/cast/receiver_messages";
 import "../../../src/resources/custom-card-support";
 import { castContext } from "./cast_context";
-import { framework } from "./cast_framework";
 import { HcMain } from "./layout/hc-main";
+import type { ReceivedMessage } from "./types";

 const lovelaceController = new HcMain();
 document.body.append(lovelaceController);
@@ -39,8 +40,7 @@ const playDummyMedia = (viewTitle?: string) => {
  loadRequestData.media.contentId =
    "https://cast.home-assistant.io/images/google-nest-hub.png";
  loadRequestData.media.contentType = "image/jpeg";
-  loadRequestData.media.streamType =
-    "NONE" as framework.messages.StreamType.NONE;
+  loadRequestData.media.streamType = framework.messages.StreamType.NONE;
  const metadata = new framework.messages.GenericMediaMetadata();
  metadata.title = viewTitle;
  loadRequestData.media.metadata = metadata;
@@ -89,30 +89,31 @@ const showMediaPlayer = () => {
 const options = new framework.CastReceiverOptions();
 options.disableIdleTimeout = true;
 options.customNamespaces = {
-  // type definition is wrong, should be "JSON" instead of "json"
-  // https://developers.google.com/cast/docs/reference/web_receiver/cast.framework.system#.MessageType
-  [CAST_NS]: "JSON" as framework.system.MessageType.JSON,
+  [CAST_NS]: framework.system.MessageType.JSON,
 };

-castContext.addCustomMessageListener(CAST_NS, (ev) => {
+castContext.addCustomMessageListener(
+  CAST_NS,
+  // @ts-ignore
+  (ev: ReceivedMessage<HassMessage>) => {
    // We received a show Lovelace command, stop media from playing, hide media player and show Lovelace controller
    if (
-    playerManager.getPlayerState() !==
-    ("IDLE" as framework.messages.PlayerState.IDLE)
+      playerManager.getPlayerState() !== framework.messages.PlayerState.IDLE
    ) {
      playerManager.stop();
    } else {
      showLovelaceController();
    }
-  const msg = ev.data as HassMessage;
+    const msg = ev.data;
    msg.senderId = ev.senderId;
    lovelaceController.processIncomingMessage(msg);
-});
+  }
+);

 const playerManager = castContext.getPlayerManager();

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

 playerManager.addEventListener(
-  "MEDIA_STATUS" as framework.events.EventType.MEDIA_STATUS,
+  framework.events.EventType.MEDIA_STATUS,
  (event) => {
    if (
-      event.mediaStatus?.playerState ===
-        ("IDLE" as framework.messages.PlayerState.IDLE) &&
+      event.mediaStatus?.playerState === framework.messages.PlayerState.IDLE &&
      event.mediaStatus?.idleReason &&
      event.mediaStatus?.idleReason !==
-        ("INTERRUPTED" as framework.messages.IdleReason.INTERRUPTED)
+        framework.messages.IdleReason.INTERRUPTED
    ) {
      // media finished or stopped, return to default Lovelace
      showLovelaceController();
--- a/cast/src/receiver/types.ts
+++ b/cast/src/receiver/types.ts
@@ -0,0 +1,6 @@
+export interface ReceivedMessage<T> {
+  gj: boolean;
+  data: T;
+  senderId: string;
+  type: "message";
+}
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -40,9 +40,6 @@ const ENTITIES = [
  getEntity("switch", "coffee", "off", {
    friendly_name: "Coffee",
  }),
-  getEntity("number", "number", 5, {
-    friendly_name: "Number",
-  }),
 ];

 const DEVICES: DeviceRegistryEntry[] = [
@@ -380,33 +377,6 @@ const SCHEMAS: {
        name: "Constant",
        selector: { constant: { value: true, label: "Yes!" } },
      },
-      choose: {
-        name: "Choose",
-        selector: {
-          choose: {
-            choices: {
-              number: {
-                selector: {
-                  number: {
-                    min: 0,
-                    max: 100,
-                    step: 0.1,
-                  },
-                },
-              },
-              entity: {
-                selector: {
-                  entity: {
-                    filter: {
-                      domain: "number",
-                    },
-                  },
-                },
-              },
-            },
-          },
-        },
-      },
    },
  },
  {
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
    "@babel/runtime": "7.28.4",
    "@braintree/sanitize-url": "7.1.1",
    "@codemirror/autocomplete": "6.20.0",
-    "@codemirror/commands": "6.10.1",
+    "@codemirror/commands": "6.10.0",
    "@codemirror/language": "6.11.3",
    "@codemirror/legacy-modes": "6.5.2",
    "@codemirror/search": "6.5.11",
@@ -37,15 +37,15 @@
    "@codemirror/view": "6.39.4",
    "@date-fns/tz": "1.4.1",
    "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "7.0.2",
-    "@formatjs/intl-displaynames": "7.0.2",
-    "@formatjs/intl-durationformat": "0.8.2",
-    "@formatjs/intl-getcanonicallocales": "3.0.2",
-    "@formatjs/intl-listformat": "8.0.2",
-    "@formatjs/intl-locale": "5.0.2",
-    "@formatjs/intl-numberformat": "9.0.3",
-    "@formatjs/intl-pluralrules": "6.0.2",
-    "@formatjs/intl-relativetimeformat": "12.0.3",
+    "@formatjs/intl-datetimeformat": "6.18.2",
+    "@formatjs/intl-displaynames": "6.8.13",
+    "@formatjs/intl-durationformat": "0.7.6",
+    "@formatjs/intl-getcanonicallocales": "2.5.6",
+    "@formatjs/intl-listformat": "7.7.13",
+    "@formatjs/intl-locale": "4.2.13",
+    "@formatjs/intl-numberformat": "8.15.6",
+    "@formatjs/intl-pluralrules": "5.4.6",
+    "@formatjs/intl-relativetimeformat": "11.4.13",
    "@fullcalendar/core": "6.1.19",
    "@fullcalendar/daygrid": "6.1.19",
    "@fullcalendar/interaction": "6.1.19",
@@ -89,6 +89,8 @@
    "@thomasloven/round-slider": "0.6.0",
    "@tsparticles/engine": "3.9.1",
    "@tsparticles/preset-links": "3.2.0",
+    "@vaadin/combo-box": "24.9.6",
+    "@vaadin/vaadin-themable-mixin": "24.9.6",
    "@vibrant/color": "4.0.0",
    "@vue/web-component-wrapper": "1.3.0",
    "@webcomponents/scoped-custom-element-registry": "0.0.10",
@@ -112,7 +114,7 @@
    "hls.js": "1.6.15",
    "home-assistant-js-websocket": "9.6.0",
    "idb-keyval": "6.2.2",
-    "intl-messageformat": "11.0.2",
+    "intl-messageformat": "10.7.18",
    "js-yaml": "4.1.1",
    "leaflet": "1.9.4",
    "leaflet-draw": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch",
@@ -151,15 +153,15 @@
    "@babel/plugin-transform-runtime": "7.28.5",
    "@babel/preset-env": "7.28.5",
    "@bundle-stats/plugin-webpack-filter": "4.21.7",
-    "@lokalise/node-api": "15.5.0",
+    "@lokalise/node-api": "15.4.0",
    "@octokit/auth-oauth-device": "8.0.3",
    "@octokit/plugin-retry": "8.0.3",
    "@octokit/rest": "22.0.1",
-    "@rsdoctor/rspack-plugin": "1.3.16",
-    "@rspack/core": "1.6.8",
+    "@rsdoctor/rspack-plugin": "1.3.15",
+    "@rspack/core": "1.6.7",
    "@rspack/dev-server": "1.1.4",
    "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.25",
+    "@types/chromecast-caf-receiver": "6.0.22",
    "@types/chromecast-caf-sender": "1.0.11",
    "@types/color-name": "2.0.0",
    "@types/culori": "4.0.1",
@@ -176,7 +178,7 @@
    "@types/tar": "6.1.13",
    "@types/ua-parser-js": "0.7.39",
    "@types/webspeechapi": "0.0.29",
-    "@vitest/coverage-v8": "4.0.16",
+    "@vitest/coverage-v8": "4.0.15",
    "babel-loader": "10.0.0",
    "babel-plugin-template-html-minifier": "4.1.0",
    "browserslist-useragent-regexp": "4.1.3",
@@ -191,7 +193,7 @@
    "eslint-plugin-unused-imports": "4.3.0",
    "eslint-plugin-wc": "3.0.2",
    "fancy-log": "2.0.0",
-    "fs-extra": "11.3.3",
+    "fs-extra": "11.3.2",
    "glob": "13.0.0",
    "gulp": "5.0.1",
    "gulp-brotli": "3.0.0",
@@ -215,9 +217,9 @@
    "terser-webpack-plugin": "5.3.16",
    "ts-lit-plugin": "2.0.2",
    "typescript": "5.9.3",
-    "typescript-eslint": "8.50.0",
-    "vite-tsconfig-paths": "6.0.3",
-    "vitest": "4.0.16",
+    "typescript-eslint": "8.49.0",
+    "vite-tsconfig-paths": "6.0.1",
+    "vitest": "4.0.15",
    "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"
--- a/src/components/device/ha-device-picker.ts
+++ b/src/components/device/ha-device-picker.ts
@@ -1,4 +1,4 @@
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -162,7 +162,7 @@ export class HaDevicePicker extends LitElement {
    }
  );

-  private _rowRenderer: RenderItemFunction<DevicePickerItem> = (item) => html`
+  private _rowRenderer: ComboBoxLitRenderer<DevicePickerItem> = (item) => html`
    <ha-combo-box-item type="button">
      ${item.domain
        ? html`
--- a/src/components/entity/ha-entity-attribute-picker.ts
+++ b/src/components/entity/ha-entity-attribute-picker.ts
@@ -1,11 +1,16 @@
+import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
+import { customElement, property, query, state } from "lit/decorators";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
-import "../ha-generic-picker";
-import type { PickerComboBoxItem } from "../ha-picker-combo-box";
+import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
+
+interface AttributeOption {
+  value: string;
+  label: string;
+}

@customElement("ha-entity-attribute-picker")
 class HaEntityAttributePicker extends LitElement {
@@ -37,44 +42,51 @@ class HaEntityAttributePicker extends LitElement {

  @property() public helper?: string;

-  private _getItemsMemoized = memoizeOne(
-    (
-      entityId: string | string[] | undefined,
-      hideAttributes: string[] | undefined,
-      hass: HomeAssistant
-    ): PickerComboBoxItem[] => {
-      const entityIds = entityId ? ensureArray(entityId) : [];
-      const options: PickerComboBoxItem[] = [];
-      const optionsSet = new Set<string>();
+  @state() private _opened = false;

-      for (const id of entityIds) {
-        const stateObj = hass.states[id];
+  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
+
+  protected shouldUpdate(changedProps: PropertyValues) {
+    return !(!changedProps.has("_opened") && this._opened);
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    if (
+      (changedProps.has("_opened") && this._opened) ||
+      changedProps.has("entityId") ||
+      changedProps.has("attribute")
+    ) {
+      const entityIds = this.entityId ? ensureArray(this.entityId) : [];
+      const entitiesOptions = entityIds.map<AttributeOption[]>((entityId) => {
+        const stateObj = this.hass.states[entityId];
        if (!stateObj) {
-          continue;
+          return [];
        }

        const attributes = Object.keys(stateObj.attributes).filter(
-          (a) => !hideAttributes?.includes(a)
+          (a) => !this.hideAttributes?.includes(a)
        );

-        for (const attribute of attributes) {
-          if (!optionsSet.has(attribute)) {
-            optionsSet.add(attribute);
-            options.push({
-              id: attribute,
-              primary: hass.formatEntityAttributeName(stateObj, attribute),
-              sorting_label: attribute,
+        return attributes.map((a) => ({
+          value: a,
+          label: this.hass.formatEntityAttributeName(stateObj, a),
+        }));
      });
+
+      const options: AttributeOption[] = [];
+      const optionsSet = new Set<string>();
+      for (const entityOptions of entitiesOptions) {
+        for (const option of entityOptions) {
+          if (!optionsSet.has(option.value)) {
+            optionsSet.add(option.value);
+            options.push(option);
          }
        }
      }

-      return options;
+      (this._comboBox as any).filteredItems = options;
+    }
  }
-  );
-
-  private _getItems = () =>
-    this._getItemsMemoized(this.entityId, this.hideAttributes, this.hass);

  protected render() {
    if (!this.hass) {
@@ -82,9 +94,10 @@ class HaEntityAttributePicker extends LitElement {
    }

    return html`
-      <ha-generic-picker
+      <ha-combo-box
        .hass=${this.hass}
        .value=${this.value}
+        .autofocus=${this.autofocus}
        .label=${this.label ??
        this.hass.localize(
          "ui.components.entity.entity-attribute-picker.attribute"
@@ -93,22 +106,39 @@ class HaEntityAttributePicker extends LitElement {
        .required=${this.required}
        .helper=${this.helper}
        .allowCustomValue=${this.allowCustomValue}
-        .getItems=${this._getItems}
+        item-id-path="value"
+        item-value-path="value"
+        item-label-path="label"
+        @opened-changed=${this._openedChanged}
        @value-changed=${this._valueChanged}
      >
-      </ha-generic-picker>
+      </ha-combo-box>
    `;
  }

+  private get _value() {
+    return this.value || "";
+  }
+
+  private _openedChanged(ev: ValueChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+  }
+
  private _valueChanged(ev: ValueChangedEvent<string>) {
    ev.stopPropagation();
    const newValue = ev.detail.value;
-    if (newValue !== this.value) {
-      this.value = newValue;
-      fireEvent(this, "value-changed", { value: newValue });
-      fireEvent(this, "change");
+    if (newValue !== this._value) {
+      this._setValue(newValue);
    }
  }
+
+  private _setValue(value: string) {
+    this.value = value;
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+      fireEvent(this, "change");
+    }, 0);
+  }
 }

 declare global {
--- a/src/components/entity/ha-entity-name-picker.ts
+++ b/src/components/entity/ha-entity-name-picker.ts
@@ -1,11 +1,15 @@
+import "@material/mwc-menu/mwc-menu-surface";
 import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { IFuseOptions } from "fuse.js";
+import Fuse from "fuse.js";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
+import { stopPropagation } from "../../common/dom/stop_propagation";
 import type { EntityNameItem } from "../../common/entity/compute_entity_name_display";
 import { getEntityContext } from "../../common/entity/context/get_entity_context";
 import type { EntityNameType } from "../../common/translations/entity-state";
@@ -14,18 +18,20 @@ import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../chips/ha-assist-chip";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
-import "../ha-combo-box-item";
-import "../ha-generic-picker";
-import type { HaGenericPicker } from "../ha-generic-picker";
+import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
 import "../ha-input-helper-text";
-import {
-  NO_ITEMS_AVAILABLE_ID,
-  type PickerComboBoxItem,
-} from "../ha-picker-combo-box";
 import "../ha-sortable";

-const rowRenderer: RenderItemFunction<PickerComboBoxItem> = (item) => html`
-  <ha-combo-box-item type="button" compact>
+interface EntityNameOption {
+  primary: string;
+  secondary?: string;
+  field_label: string;
+  value: string;
+}
+
+const rowRenderer: ComboBoxLitRenderer<EntityNameOption> = (item) => html`
+  <ha-combo-box-item type="button">
    <span slot="headline">${item.primary}</span>
    ${item.secondary
      ? html`<span slot="supporting-text">${item.secondary}</span>`
@@ -73,7 +79,11 @@ export class HaEntityNamePicker extends LitElement {

  @property({ type: Boolean, reflect: true }) public disabled = false;

-  @query("ha-generic-picker", true) private _picker?: HaGenericPicker;
+  @query(".container", true) private _container?: HTMLDivElement;
+
+  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
+
+  @state() private _opened = false;

  private _editIndex?: number;

@@ -105,7 +115,7 @@ export class HaEntityNamePicker extends LitElement {
    return options;
  });

-  private _getItems = memoizeOne((entityId?: string) => {
+  private _getOptions = memoizeOne((entityId?: string) => {
    if (!entityId) {
      return [];
    }
@@ -114,7 +124,7 @@ export class HaEntityNamePicker extends LitElement {

    const items = (
      ["entity", "device", "area", "floor"] as const
-    ).map<PickerComboBoxItem>((name) => {
+    ).map<EntityNameOption>((name) => {
      const stateObj = this.hass.states[entityId];
      const isValid = types.has(name);
      const primary = this.hass.localize(
@@ -127,39 +137,25 @@ export class HaEntityNamePicker extends LitElement {
              `ui.components.entity.entity-name-picker.types.${name}_missing` as LocalizeKeys
            )) || "-";

-      const id = formatOptionValue({ type: name });
-
      return {
-        id,
        primary,
        secondary,
-        search_labels: {
-          primary,
-          secondary: secondary || null,
-          id,
-        },
-        sorting_label: primary,
+        field_label: primary,
+        value: formatOptionValue({ type: name }),
      };
    });

    return items;
  });

-  private _customNameOption = memoizeOne(
-    (text: string): PickerComboBoxItem => ({
-      id: formatOptionValue({ type: "text", text }),
+  private _customNameOption = memoizeOne((text: string) => ({
    primary: this.hass.localize(
      "ui.components.entity.entity-name-picker.custom_name"
    ),
    secondary: `"${text}"`,
-      search_labels: {
-        primary: text,
-        secondary: `"${text}"`,
-        id: formatOptionValue({ type: "text", text }),
-      },
-      sorting_label: text,
-    })
-  );
+    field_label: text,
+    value: formatOptionValue({ type: "text", text }),
+  }));

  private _formatItem = (item: EntityNameItem) => {
    if (item.type === "text") {
@@ -175,29 +171,12 @@ export class HaEntityNamePicker extends LitElement {

  protected render() {
    const value = this._items;
+    const options = this._getOptions(this.entityId);
    const validTypes = this._validTypes(this.entityId);

    return html`
      ${this.label ? html`<label>${this.label}</label>` : nothing}
-      <ha-generic-picker
-        .hass=${this.hass}
-        .disabled=${this.disabled}
-        .required=${this.required && !value.length}
-        .getItems=${this._getFilteredItems}
-        .getAdditionalItems=${this._getAdditionalItems}
-        .rowRenderer=${rowRenderer}
-        .searchFn=${this._searchFn}
-        .notFoundLabel=${this.hass.localize(
-          "ui.components.entity.entity-name-picker.no_match"
-        )}
-        .value=${this._getPickerValue()}
-        allow-custom-value
-        .customValueLabel=${this.hass.localize(
-          "ui.components.entity.entity-name-picker.custom_name"
-        )}
-        @value-changed=${this._pickerValueChanged}
-      >
-        <div slot="field" class="container">
+      <div class="container">
        <ha-sortable
          no-style
          @item-moved=${this._moveItem}
@@ -247,8 +226,33 @@ export class HaEntityNamePicker extends LitElement {
                `}
          </ha-chip-set>
        </ha-sortable>
+
+        <mwc-menu-surface
+          .open=${this._opened}
+          @closed=${this._onClosed}
+          @opened=${this._onOpened}
+          @input=${stopPropagation}
+          .anchor=${this._container}
+        >
+          <ha-combo-box
+            .hass=${this.hass}
+            .value=${""}
+            .autofocus=${this.autofocus}
+            .disabled=${this.disabled}
+            .required=${this.required && !value.length}
+            .items=${options}
+            allow-custom-value
+            item-id-path="value"
+            item-value-path="value"
+            item-label-path="field_label"
+            .renderer=${rowRenderer}
+            @opened-changed=${this._openedChanged}
+            @value-changed=${this._comboBoxValueChanged}
+            @filter-changed=${this._filterChanged}
+          >
+          </ha-combo-box>
+        </mwc-menu-surface>
      </div>
-      </ha-generic-picker>
      ${this._renderHelper()}
    `;
  }
@@ -263,22 +267,32 @@ export class HaEntityNamePicker extends LitElement {
      : nothing;
  }

-  private async _addItem(ev: Event) {
+  private _onClosed(ev) {
    ev.stopPropagation();
+    this._opened = false;
    this._editIndex = undefined;
-    await this.updateComplete;
-    await this._picker?.open();
  }

-  private async _editItem(ev: Event) {
+  private async _onOpened(ev) {
+    if (!this._opened) {
+      return;
+    }
    ev.stopPropagation();
-    const idx = parseInt(
-      (ev.currentTarget as HTMLElement).dataset.idx || "",
-      10
-    );
+    this._opened = true;
+    await this._comboBox?.focus();
+    await this._comboBox?.open();
+  }
+
+  private async _addItem(ev) {
+    ev.stopPropagation();
+    this._opened = true;
+  }
+
+  private async _editItem(ev) {
+    ev.stopPropagation();
+    const idx = parseInt(ev.currentTarget.dataset.idx, 10);
    this._editIndex = idx;
-    await this.updateComplete;
-    await this._picker?.open();
+    this._opened = true;
  }

  private get _items(): EntityNameItem[] {
@@ -308,80 +322,78 @@ export class HaEntityNamePicker extends LitElement {
    }
  );

-  private _getPickerValue(): string | undefined {
-    if (this._editIndex != null) {
-      const item = this._items[this._editIndex];
-      return item ? formatOptionValue(item) : undefined;
-    }
-    return undefined;
+  private _openedChanged(ev: ValueChangedEvent<boolean>) {
+    const open = ev.detail.value;
+    if (open) {
+      const options = this._comboBox.items || [];
+
+      const initialItem =
+        this._editIndex != null ? this._items[this._editIndex] : undefined;
+
+      const initialValue = initialItem ? formatOptionValue(initialItem) : "";
+
+      const filteredItems = this._filterSelectedOptions(options, initialValue);
+
+      if (initialItem?.type === "text" && initialItem.text) {
+        filteredItems.push(this._customNameOption(initialItem.text));
      }

-  private _getFilteredItems = (
-    searchString?: string,
-    _section?: string
-  ): PickerComboBoxItem[] => {
-    const items = this._getItems(this.entityId);
-    const currentItem =
-      this._editIndex != null ? this._items[this._editIndex] : undefined;
-    const currentValue = currentItem ? formatOptionValue(currentItem) : "";
+      this._comboBox.filteredItems = filteredItems;
+      this._comboBox.setInputValue(initialValue);
+    } else {
+      this._opened = false;
+      this._comboBox.setInputValue("");
+    }
+  }
+
+  private _filterSelectedOptions = (
+    options: EntityNameOption[],
+    current?: string
+  ) => {
+    const items = this._items;

    const excludedValues = new Set(
-      this._items
+      items
        .filter((item) => UNIQUE_TYPES.has(item.type))
        .map((item) => formatOptionValue(item))
    );

-    const filteredItems = items.filter(
-      (item) => !excludedValues.has(item.id) || item.id === currentValue
+    const filteredOptions = options.filter(
+      (option) => !excludedValues.has(option.value) || option.value === current
    );
-
-    // When editing an existing text item, include it in the base items
-    if (currentItem?.type === "text" && currentItem.text && !searchString) {
-      filteredItems.push(this._customNameOption(currentItem.text));
-    }
-
-    return filteredItems;
+    return filteredOptions;
  };

-  private _getAdditionalItems = (
-    searchString?: string
-  ): PickerComboBoxItem[] => {
-    if (!searchString) {
-      return [];
-    }
+  private _filterChanged(ev: ValueChangedEvent<string>) {
+    const input = ev.detail.value;
+    const filter = input?.toLowerCase() || "";
+    const options = this._comboBox.items || [];

    const currentItem =
      this._editIndex != null ? this._items[this._editIndex] : undefined;

-    // Don't add if it's the same as the current item being edited
-    if (
-      currentItem?.type === "text" &&
-      currentItem.text &&
-      currentItem.text === searchString
-    ) {
-      return [];
+    const currentValue = currentItem ? formatOptionValue(currentItem) : "";
+
+    let filteredItems = this._filterSelectedOptions(options, currentValue);
+
+    if (!filter) {
+      this._comboBox.filteredItems = filteredItems;
+      return;
    }

-    // Always return custom name option when there's a search string
-    // This prevents "No matching items found" from showing
-    return [this._customNameOption(searchString)];
+    const fuseOptions: IFuseOptions<EntityNameOption> = {
+      keys: ["primary", "secondary", "value"],
+      isCaseSensitive: false,
+      minMatchCharLength: Math.min(filter.length, 2),
+      threshold: 0.2,
+      ignoreDiacritics: true,
    };

-  private _searchFn = (
-    search: string,
-    filteredItems: PickerComboBoxItem[],
-    _allItems: PickerComboBoxItem[]
-  ): PickerComboBoxItem[] => {
-    // Remove NO_ITEMS_AVAILABLE_ID if we have additional items (custom name option)
-    // This prevents "No matching items found" from showing when custom values are allowed
-    const hasAdditionalItems = this._getAdditionalItems(search).length > 0;
-    if (hasAdditionalItems) {
-      return filteredItems.filter(
-        (item) => typeof item !== "string" || item !== NO_ITEMS_AVAILABLE_ID
-      );
+    const fuse = new Fuse(filteredItems, fuseOptions);
+    filteredItems = fuse.search(filter).map((result) => result.item);
+    filteredItems.push(this._customNameOption(input));
+    this._comboBox.filteredItems = filteredItems;
  }
-    return filteredItems;
-  };

  private async _moveItem(ev: CustomEvent) {
    ev.stopPropagation();
@@ -391,21 +403,25 @@ export class HaEntityNamePicker extends LitElement {
    const element = newValue.splice(oldIndex, 1)[0];
    newValue.splice(newIndex, 0, element);
    this._setValue(newValue);
+    await this.updateComplete;
+    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
  }

-  private async _removeItem(ev: Event) {
+  private async _removeItem(ev) {
    ev.stopPropagation();
    const value = [...this._items];
-    const idx = parseInt((ev.target as HTMLElement).dataset.idx || "", 10);
+    const idx = parseInt(ev.target.dataset.idx, 10);
    value.splice(idx, 1);
    this._setValue(value);
+    await this.updateComplete;
+    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
  }

-  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
+  private _comboBoxValueChanged(ev: ValueChangedEvent<string>): void {
    ev.stopPropagation();
    const value = ev.detail.value;

-    if (this.disabled || !value) {
+    if (this.disabled || value === "") {
      return;
    }

@@ -415,16 +431,11 @@ export class HaEntityNamePicker extends LitElement {

    if (this._editIndex != null) {
      newValue[this._editIndex] = item;
-      this._editIndex = undefined;
    } else {
      newValue.push(item);
    }

    this._setValue(newValue);
-
-    if (this._picker) {
-      this._picker.value = undefined;
-    }
  }

  private _setValue(value: EntityNameItem[]) {
@@ -486,6 +497,10 @@ export class HaEntityNamePicker extends LitElement {
      order: 1;
    }

+    mwc-menu-surface {
+      --mdc-menu-min-width: 100%;
+    }
+
    ha-chip-set {
      padding: var(--ha-space-2) var(--ha-space-2);
    }
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@@ -1,5 +1,5 @@
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiPlus, mdiShape } from "@mdi/js";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -172,9 +172,9 @@ export class HaEntityPicker extends LitElement {
    return this.showEntityId || this.hass.userData?.showEntityIdPicker;
  }

-  private _rowRenderer: RenderItemFunction<EntityComboBoxItem> = (
+  private _rowRenderer: ComboBoxLitRenderer<EntityComboBoxItem> = (
    item,
-    index
+    { index }
  ) => {
    const showEntityId = this._showEntityId;

--- a/src/components/entity/ha-entity-state-content-picker.ts
+++ b/src/components/entity/ha-entity-state-content-picker.ts
@@ -1,11 +1,16 @@
+import "@material/mwc-menu/mwc-menu-surface";
 import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
+import type { IFuseOptions } from "fuse.js";
+import Fuse from "fuse.js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
+import { stopPropagation } from "../../common/dom/stop_propagation";
 import { computeDomain } from "../../common/entity/compute_domain";
 import {
  STATE_DISPLAY_SPECIAL_CONTENT,
@@ -15,13 +20,21 @@ import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../chips/ha-assist-chip";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
-import "../ha-combo-box-item";
-import "../ha-generic-picker";
-import type { HaGenericPicker } from "../ha-generic-picker";
-import "../ha-input-helper-text";
-import type { PickerComboBoxItem } from "../ha-picker-combo-box";
+import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
 import "../ha-sortable";

+interface StateContentOption {
+  primary: string;
+  value: string;
+}
+
+const rowRenderer: ComboBoxLitRenderer<StateContentOption> = (item) => html`
+  <ha-combo-box-item type="button">
+    <span slot="headline">${item.primary}</span>
+  </ha-combo-box-item>
+`;
+
 const HIDDEN_ATTRIBUTES = [
  "access_token",
  "available_modes",
@@ -98,88 +111,63 @@ export class HaStateContentPicker extends LitElement {

  @property() public helper?: string;

-  @query("ha-generic-picker", true) private _picker?: HaGenericPicker;
+  @query(".container", true) private _container?: HTMLDivElement;
+
+  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
+
+  @state() private _opened = false;

  private _editIndex?: number;

-  private _getItems = memoizeOne(
+  private _options = memoizeOne(
    (entityId?: string, stateObj?: HassEntity, allowName?: boolean) => {
      const domain = entityId ? computeDomain(entityId) : undefined;
-      const items: PickerComboBoxItem[] = [
+      return [
        {
-          id: "state",
          primary: this.hass.localize(
            "ui.components.state-content-picker.state"
          ),
-          sorting_label: this.hass.localize(
-            "ui.components.state-content-picker.state"
-          ),
+          value: "state",
        },
        ...(allowName
          ? [
              {
-                id: "name",
                primary: this.hass.localize(
                  "ui.components.state-content-picker.name"
                ),
-                sorting_label: this.hass.localize(
-                  "ui.components.state-content-picker.name"
-                ),
-              } satisfies PickerComboBoxItem,
+                value: "name",
+              },
            ]
          : []),
        {
-          id: "last_changed",
          primary: this.hass.localize(
            "ui.components.state-content-picker.last_changed"
          ),
-          sorting_label: this.hass.localize(
-            "ui.components.state-content-picker.last_changed"
-          ),
+          value: "last_changed",
        },
        {
-          id: "last_updated",
          primary: this.hass.localize(
            "ui.components.state-content-picker.last_updated"
          ),
-          sorting_label: this.hass.localize(
-            "ui.components.state-content-picker.last_updated"
-          ),
+          value: "last_updated",
        },
        ...(domain
          ? STATE_DISPLAY_SPECIAL_CONTENT.filter((content) =>
              STATE_DISPLAY_SPECIAL_CONTENT_DOMAINS[domain]?.includes(content)
-            ).map(
-              (content) =>
-                ({
-                  id: content,
+            ).map((content) => ({
              primary: this.hass.localize(
                `ui.components.state-content-picker.${content}`
              ),
-                  sorting_label: this.hass.localize(
-                    `ui.components.state-content-picker.${content}`
-                  ),
-                }) satisfies PickerComboBoxItem
-            )
+              value: content,
+            }))
          : []),
        ...Object.keys(stateObj?.attributes ?? {})
          .filter((a) => !HIDDEN_ATTRIBUTES.includes(a))
-          .map(
-            (attribute) =>
-              ({
-                id: attribute,
-                primary: this.hass.formatEntityAttributeName(
-                  stateObj!,
-                  attribute
-                ),
-                sorting_label: this.hass.formatEntityAttributeName(
-                  stateObj!,
-                  attribute
-                ),
-              }) satisfies PickerComboBoxItem
-          ),
-      ];
-      return items;
+          .map((attribute) => ({
+            primary: this.hass.formatEntityAttributeName(stateObj!, attribute),
+            value: attribute,
+          })),
+      ] satisfies StateContentOption[];
    }
  );

@@ -190,23 +178,11 @@ export class HaStateContentPicker extends LitElement {
      ? this.hass.states[this.entityId]
      : undefined;

+    const options = this._options(this.entityId, stateObj, this.allowName);
+
    return html`
      ${this.label ? html`<label>${this.label}</label>` : nothing}
-      <ha-generic-picker
-        .hass=${this.hass}
-        .disabled=${this.disabled}
-        .required=${this.required && !value.length}
-        .value=${this._getPickerValue()}
-        .getItems=${this._getFilteredItems}
-        .getAdditionalItems=${this._getAdditionalItems}
-        .notFoundLabel=${this.hass.localize("ui.components.combo-box.no_match")}
-        allow-custom-value
-        .customValueLabel=${this.hass.localize(
-          "ui.components.entity.entity-state-content-picker.custom_state"
-        )}
-        @value-changed=${this._pickerValueChanged}
-      >
-        <div slot="field" class="container">
+      <div class="container ${this.disabled ? "disabled" : ""}">
        <ha-sortable
          no-style
          @item-moved=${this._moveItem}
@@ -219,7 +195,7 @@ export class HaStateContentPicker extends LitElement {
              this._value,
              (item) => item,
              (item: string, idx) => {
-                  const label = this._getItemLabel(item, stateObj);
+                const label = options.find((o) => o.value === item)?.primary;
                const isValid = !!label;
                return html`
                  <ha-input-chip
@@ -255,58 +231,69 @@ export class HaStateContentPicker extends LitElement {
                `}
          </ha-chip-set>
        </ha-sortable>
+
+        <mwc-menu-surface
+          .open=${this._opened}
+          @closed=${this._onClosed}
+          @opened=${this._onOpened}
+          @input=${stopPropagation}
+          .anchor=${this._container}
+        >
+          <ha-combo-box
+            .hass=${this.hass}
+            .value=${""}
+            .autofocus=${this.autofocus}
+            .disabled=${this.disabled || !this.entityId}
+            .required=${this.required && !value.length}
+            .helper=${this.helper}
+            .items=${options}
+            allow-custom-value
+            item-id-path="value"
+            item-value-path="value"
+            item-label-path="primary"
+            .renderer=${rowRenderer}
+            @opened-changed=${this._openedChanged}
+            @value-changed=${this._comboBoxValueChanged}
+            @filter-changed=${this._filterChanged}
+          >
+          </ha-combo-box>
+        </mwc-menu-surface>
      </div>
-      </ha-generic-picker>
-      ${this._renderHelper()}
    `;
  }

-  private _renderHelper() {
-    return this.helper
-      ? html`
-          <ha-input-helper-text .disabled=${this.disabled}>
-            ${this.helper}
-          </ha-input-helper-text>
-        `
-      : nothing;
-  }
-
-  private async _addItem(ev: Event) {
+  private _onClosed(ev) {
    ev.stopPropagation();
+    this._opened = false;
    this._editIndex = undefined;
-    await this.updateComplete;
-    await this._picker?.open();
  }

-  private async _editItem(ev: Event) {
+  private async _onOpened(ev) {
+    if (!this._opened) {
+      return;
+    }
    ev.stopPropagation();
-    const idx = parseInt(
-      (ev.currentTarget as HTMLElement).dataset.idx || "",
-      10
-    );
+    this._opened = true;
+    await this._comboBox?.focus();
+    await this._comboBox?.open();
+  }
+
+  private async _addItem(ev) {
+    ev.stopPropagation();
+    this._opened = true;
+  }
+
+  private async _editItem(ev) {
+    ev.stopPropagation();
+    const idx = parseInt(ev.currentTarget.dataset.idx, 10);
    this._editIndex = idx;
-    await this.updateComplete;
-    await this._picker?.open();
+    this._opened = true;
  }

  private get _value() {
    return !this.value ? [] : ensureArray(this.value);
  }

-  private _getItemLabel = memoizeOne(
-    (value: string, stateObj?: HassEntity): string | undefined => {
-      const stateObjForItems = this.entityId
-        ? this.hass.states[this.entityId]
-        : stateObj;
-      const items = this._getItems(
-        this.entityId,
-        stateObjForItems,
-        this.allowName
-      );
-      return items.find((item) => item.id === value)?.primary;
-    }
-  );
-
  private _toValue = memoizeOne((value: string[]): typeof this.value => {
    if (value.length === 0) {
      return undefined;
@@ -317,88 +304,64 @@ export class HaStateContentPicker extends LitElement {
    return value;
  });

-  private _getPickerValue(): string | undefined {
-    if (this._editIndex != null) {
-      return this._value[this._editIndex];
+  private _openedChanged(ev: ValueChangedEvent<boolean>) {
+    const open = ev.detail.value;
+    if (open) {
+      const options = this._comboBox.items || [];
+
+      const initialValue =
+        this._editIndex != null ? this._value[this._editIndex] : "";
+      const filteredItems = this._filterSelectedOptions(options, initialValue);
+
+      this._comboBox.filteredItems = filteredItems;
+      this._comboBox.setInputValue(initialValue);
+    } else {
+      this._opened = false;
    }
-    return undefined;
  }

-  private _customValueOption = memoizeOne(
-    (text: string): PickerComboBoxItem => ({
-      id: text,
-      primary: this.hass.localize(
-        "ui.components.entity.entity-state-content-picker.custom_state"
-      ),
-      secondary: `"${text}"`,
-      search_labels: {
-        primary: text,
-        secondary: `"${text}"`,
-        id: text,
-      },
-      sorting_label: text,
-    })
-  );
-
-  private _getFilteredItems = (
-    searchString?: string,
-    _section?: string
-  ): PickerComboBoxItem[] => {
-    const stateObj = this.entityId
-      ? this.hass.states[this.entityId]
-      : undefined;
-    const items = this._getItems(this.entityId, stateObj, this.allowName);
-    const currentValue =
-      this._editIndex != null ? this._value[this._editIndex] : undefined;
-
+  private _filterSelectedOptions = (
+    options: StateContentOption[],
+    current?: string
+  ) => {
    const value = this._value;

-    const filteredItems = items.filter(
-      (item) => !value.includes(item.id) || item.id === currentValue
+    return options.filter(
+      (option) => !value.includes(option.value) || option.value === current
    );
-
-    // When editing an existing custom value, include it in the base items
-    if (
-      currentValue &&
-      !items.find((item) => item.id === currentValue) &&
-      !searchString
-    ) {
-      filteredItems.push(this._customValueOption(currentValue));
-    }
-
-    return filteredItems;
  };

-  private _getAdditionalItems = (
-    searchString?: string
-  ): PickerComboBoxItem[] => {
-    if (!searchString) {
-      return [];
-    }
+  private _filterChanged(ev: ValueChangedEvent<string>) {
+    const input = ev.detail.value;
+    const filter = input?.toLowerCase() || "";
+    const options = this._comboBox.items || [];

    const currentValue =
-      this._editIndex != null ? this._value[this._editIndex] : undefined;
+      this._editIndex != null ? this._value[this._editIndex] : "";

-    // Don't add if it's the same as the current item being edited
-    if (currentValue && currentValue === searchString) {
-      return [];
+    this._comboBox.filteredItems = this._filterSelectedOptions(
+      options,
+      currentValue
+    );
+
+    if (!filter) {
+      return;
    }

-    // Check if the search string matches an existing item
-    const stateObj = this.entityId
-      ? this.hass.states[this.entityId]
-      : undefined;
-    const items = this._getItems(this.entityId, stateObj, this.allowName);
-    const existingItem = items.find((item) => item.id === searchString);
-
-    // Only return custom value option if it doesn't match an existing item
-    if (!existingItem) {
-      return [this._customValueOption(searchString)];
-    }
-
-    return [];
+    const fuseOptions: IFuseOptions<StateContentOption> = {
+      keys: ["primary", "secondary", "value"],
+      isCaseSensitive: false,
+      minMatchCharLength: Math.min(filter.length, 2),
+      threshold: 0.2,
+      ignoreDiacritics: true,
    };

+    const fuse = new Fuse(this._comboBox.filteredItems, fuseOptions);
+    const filteredItems = fuse.search(filter).map((result) => result.item);
+
+    this._comboBox.filteredItems = filteredItems;
+  }
+
  private async _moveItem(ev: CustomEvent) {
    ev.stopPropagation();
    const { oldIndex, newIndex } = ev.detail;
@@ -407,21 +370,25 @@ export class HaStateContentPicker extends LitElement {
    const element = newValue.splice(oldIndex, 1)[0];
    newValue.splice(newIndex, 0, element);
    this._setValue(newValue);
+    await this.updateComplete;
+    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
  }

-  private async _removeItem(ev: Event) {
+  private async _removeItem(ev) {
    ev.stopPropagation();
    const value = [...this._value];
-    const idx = parseInt((ev.target as HTMLElement).dataset.idx || "", 10);
+    const idx = parseInt(ev.target.dataset.idx, 10);
    value.splice(idx, 1);
    this._setValue(value);
+    await this.updateComplete;
+    this._filterChanged({ detail: { value: "" } } as ValueChangedEvent<string>);
  }

-  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
+  private _comboBoxValueChanged(ev: ValueChangedEvent<string>): void {
    ev.stopPropagation();
    const value = ev.detail.value;

-    if (this.disabled || !value) {
+    if (this.disabled || value === "") {
      return;
    }

@@ -429,16 +396,11 @@ export class HaStateContentPicker extends LitElement {

    if (this._editIndex != null) {
      newValue[this._editIndex] = value;
-      this._editIndex = undefined;
    } else {
      newValue.push(value);
    }

    this._setValue(newValue);
-
-    if (this._picker) {
-      this._picker.value = undefined;
-    }
  }

  private _setValue(value: string[]) {
@@ -480,7 +442,7 @@ export class HaStateContentPicker extends LitElement {
        height 180ms ease-in-out,
        background-color 180ms ease-in-out;
    }
-    :host([disabled]) .container:after {
+    .container.disabled:after {
      background-color: var(
        --mdc-text-field-disabled-line-color,
        rgba(0, 0, 0, 0.42)
@@ -500,6 +462,10 @@ export class HaStateContentPicker extends LitElement {
      order: 1;
    }

+    mwc-menu-surface {
+      --mdc-menu-min-width: 100%;
+    }
+
    ha-chip-set {
      padding: var(--ha-space-2) var(--ha-space-2);
    }
@@ -520,11 +486,6 @@ export class HaStateContentPicker extends LitElement {
    .sortable-drag {
      cursor: grabbing;
    }
-
-    ha-input-helper-text {
-      display: block;
-      margin: var(--ha-space-2) 0 0;
-    }
  `;
 }

--- a/src/components/entity/ha-entity-state-picker.ts
+++ b/src/components/entity/ha-entity-state-picker.ts
@@ -1,22 +1,27 @@
+import type { PropertyValues } from "lit";
 import { LitElement, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
-import memoizeOne from "memoize-one";
+import { customElement, property, query, state } from "lit/decorators";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { getStates } from "../../common/entity/get_states";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
-import "../ha-generic-picker";
-import type { PickerComboBoxItem } from "../ha-picker-combo-box";
+import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
+
+interface StateOption {
+  value: string;
+  label: string;
+}

@customElement("ha-entity-state-picker")
-export class HaEntityStatePicker extends LitElement {
+class HaEntityStatePicker extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public entityId?: string | string[];

  @property() public attribute?: string;

-  @property({ attribute: false }) public extraOptions?: PickerComboBoxItem[];
+  @property({ attribute: false }) public extraOptions?: any[];

  // eslint-disable-next-line lit/no-native-attributes
  @property({ type: Boolean }) public autofocus = false;
@@ -37,76 +42,59 @@ export class HaEntityStatePicker extends LitElement {

  @property() public helper?: string;

-  private _getItems = memoizeOne(
-    (
-      hass: HomeAssistant,
-      entityId: string | string[] | undefined,
-      attribute: string | undefined,
-      hideStates: string[] | undefined,
-      extraOptions: PickerComboBoxItem[] | undefined
-    ): PickerComboBoxItem[] => {
-      const entityIds = entityId ? ensureArray(entityId) : [];
+  @state() private _opened = false;

-      const entitiesOptions = entityIds.map<PickerComboBoxItem[]>(
-        (entityIdItem) => {
-          const stateObj = hass.states[entityIdItem] || {
-            entity_id: entityIdItem,
+  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
+
+  protected shouldUpdate(changedProps: PropertyValues) {
+    return !(!changedProps.has("_opened") && this._opened);
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    if (
+      (changedProps.has("_opened") && this._opened) ||
+      changedProps.has("entityId") ||
+      changedProps.has("attribute") ||
+      changedProps.has("extraOptions")
+    ) {
+      const entityIds = this.entityId ? ensureArray(this.entityId) : [];
+
+      const entitiesOptions = entityIds.map<StateOption[]>((entityId) => {
+        const stateObj = this.hass.states[entityId] || {
+          entity_id: entityId,
          attributes: {},
        };

-          const states = getStates(hass, stateObj, attribute).filter(
-            (s) => !hideStates?.includes(s)
+        const states = getStates(this.hass, stateObj, this.attribute).filter(
+          (s) => !this.hideStates?.includes(s)
        );

-          return states
-            .map((s) => {
-              const primary = attribute
-                ? hass.formatEntityAttributeValue(stateObj, attribute, s)
-                : hass.formatEntityState(stateObj, s);
-              return {
-                id: s,
-                primary,
-                sorting_label: primary,
-              };
-            })
-            .filter((option) => option.id && option.primary);
-        }
-      );
+        return states.map((s) => ({
+          value: s,
+          label: this.attribute
+            ? this.hass.formatEntityAttributeValue(stateObj, this.attribute, s)
+            : this.hass.formatEntityState(stateObj, s),
+        }));
+      });

-      const options: PickerComboBoxItem[] = [];
+      const options: StateOption[] = [];
      const optionsSet = new Set<string>();
      for (const entityOptions of entitiesOptions) {
        for (const option of entityOptions) {
-          if (!optionsSet.has(option.id)) {
-            optionsSet.add(option.id);
+          if (!optionsSet.has(option.value)) {
+            optionsSet.add(option.value);
            options.push(option);
          }
        }
      }

-      if (extraOptions) {
-        // Filter out any extraOptions with empty primary or id fields
-        const validExtraOptions = extraOptions.filter(
-          (option) => option.id && option.primary
-        );
-        options.unshift(...validExtraOptions);
+      if (this.extraOptions) {
+        options.unshift(...this.extraOptions);
      }

-      return options;
+      (this._comboBox as any).filteredItems = options;
+    }
  }
-  );
-
-  private _getFilteredItems = (
-    _searchString?: string,
-    _section?: string
-  ): PickerComboBoxItem[] =>
-    this._getItems(
-      this.hass,
-      this.entityId,
-      this.attribute,
-      this.hideStates,
-      this.extraOptions
-    );

  protected render() {
    if (!this.hass) {
@@ -114,39 +102,48 @@ export class HaEntityStatePicker extends LitElement {
    }

    return html`
-      <ha-generic-picker
+      <ha-combo-box
        .hass=${this.hass}
-        .allowCustomValue=${this.allowCustomValue}
-        .disabled=${this.disabled || !this.entityId}
+        .value=${this._value}
        .autofocus=${this.autofocus}
-        .required=${this.required}
        .label=${this.label ??
        this.hass.localize("ui.components.entity.entity-state-picker.state")}
+        .disabled=${this.disabled || !this.entityId}
+        .required=${this.required}
        .helper=${this.helper}
-        .value=${this.value}
-        .getItems=${this._getFilteredItems}
-        .notFoundLabel=${this.hass.localize("ui.components.combo-box.no_match")}
-        .customValueLabel=${this.hass.localize(
-          "ui.components.entity.entity-state-picker.add_custom_state"
-        )}
+        .allowCustomValue=${this.allowCustomValue}
+        item-id-path="value"
+        item-value-path="value"
+        item-label-path="label"
+        @opened-changed=${this._openedChanged}
        @value-changed=${this._valueChanged}
      >
-      </ha-generic-picker>
+      </ha-combo-box>
    `;
  }

+  private get _value() {
+    return this.value || "";
+  }
+
+  private _openedChanged(ev: ValueChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+  }
+
  private _valueChanged(ev: ValueChangedEvent<string>) {
    ev.stopPropagation();
    const newValue = ev.detail.value;
-    if (newValue !== this.value) {
+    if (newValue !== this._value) {
      this._setValue(newValue);
    }
  }

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

--- a/src/components/entity/ha-statistic-picker.ts
+++ b/src/components/entity/ha-statistic-picker.ts
@@ -1,5 +1,5 @@
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiChartLine, mdiHelpCircle, mdiShape } from "@mdi/js";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, nothing, type PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
@@ -424,9 +424,9 @@ export class HaStatisticPicker extends LitElement {
    };
  }

-  private _rowRenderer: RenderItemFunction<StatisticComboBoxItem> = (
+  private _rowRenderer: ComboBoxLitRenderer<StatisticComboBoxItem> = (
    item,
-    index
+    { index }
  ) => {
    const showEntityId = this.hass.userData?.showEntityIdPicker;
    return html`
@@ -473,7 +473,6 @@ export class HaStatisticPicker extends LitElement {
        .allowCustomValue=${this.allowCustomEntity}
        .disabled=${this.disabled}
        .label=${this.label}
-        use-top-label
        .placeholder=${placeholder}
        .value=${this.value}
        .notFoundLabel=${this._notFoundLabel}
--- a/src/components/ha-adaptive-dialog.ts
+++ b/src/components/ha-adaptive-dialog.ts
@@ -157,13 +157,7 @@ export class HaAdaptiveDialog extends LitElement {
        .headerSubtitlePosition=${this.headerSubtitlePosition}
        flexcontent
      >
-        <slot name="headerNavigationIcon" slot="headerNavigationIcon">
-          <ha-icon-button
-            data-dialog="close"
-            .label=${this.hass.localize("ui.common.close")}
-            .path=${mdiClose}
-          ></ha-icon-button>
-        </slot>
+        <slot name="headerNavigationIcon" slot="headerNavigationIcon"></slot>
        <slot name="headerTitle" slot="headerTitle"></slot>
        <slot name="headerSubtitle" slot="headerSubtitle"></slot>
        <slot name="headerActionItems" slot="headerActionItems"></slot>
--- a/src/components/ha-automation-row.ts
+++ b/src/components/ha-automation-row.ts
@@ -175,7 +175,7 @@ export class HaAutomationRow extends LitElement {
    ::slotted([slot="header"]) {
      flex: 1;
      overflow-wrap: anywhere;
-      margin: 0 var(--ha-space-3);
+      margin: var(--ha-space-0) var(--ha-space-3);
    }
    .icons {
      display: flex;
--- a/src/components/ha-bottom-sheet.ts
+++ b/src/components/ha-bottom-sheet.ts
@@ -241,7 +241,7 @@ export class HaBottomSheet extends ScrollableFadeMixin(LitElement) {
        }
        slot[name="footer"] {
          display: block;
-          padding: 0;
+          padding: var(--ha-space-0);
        }
        ::slotted([slot="footer"]) {
          display: flex;
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -46,14 +46,14 @@ export class HaCard extends LitElement {
      line-height: var(--ha-line-height-expanded);
      padding: var(--ha-space-3) var(--ha-space-4) var(--ha-space-4);
      display: block;
-      margin-block-start: 0;
-      margin-block-end: 0;
+      margin-block-start: var(--ha-space-0);
+      margin-block-end: var(--ha-space-0);
      font-weight: var(--ha-font-weight-normal);
    }

    :host ::slotted(.card-content:not(:first-child)),
    slot:not(:first-child)::slotted(.card-content) {
-      padding-top: 0;
+      padding-top: var(--ha-space-0);
      margin-top: calc(var(--ha-space-2) * -1);
    }

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

-  private _rowRenderer: RenderItemFunction<FloorComboBoxItem> = (item) => html`
+  private _rowRenderer: ComboBoxLitRenderer<FloorComboBoxItem> = (item) => html`
    <ha-combo-box-item type="button" compact>
      ${item.icon_path
        ? html`
--- a/src/components/ha-generic-picker.ts
+++ b/src/components/ha-generic-picker.ts
@@ -393,7 +393,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
        }

        wa-popover {
-          --wa-space-l: 0;
+          --wa-space-l: var(--ha-space-0);
        }

        wa-popover::part(body) {
@@ -418,7 +418,7 @@ export class HaGenericPicker extends PickerMixin(LitElement) {
          --ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12));
          --ha-bottom-sheet-max-height: var(--ha-bottom-sheet-height);
          --ha-bottom-sheet-max-width: 600px;
-          --ha-bottom-sheet-padding: 0;
+          --ha-bottom-sheet-padding: var(--ha-space-0);
          --ha-bottom-sheet-surface-background: var(--card-background-color);
          --ha-bottom-sheet-border-radius: var(--ha-border-radius-2xl);
        }
--- a/src/components/ha-labels-picker.ts
+++ b/src/components/ha-labels-picker.ts
@@ -231,6 +231,7 @@ export class HaLabelsPicker extends SubscribeMixin(LitElement) {

  static styles = css`
    ha-chip-set {
+      margin-bottom: 8px;
      background-color: var(--mdc-text-field-fill-color);
      border-bottom: 1px solid var(--ha-color-border-neutral-normal);
      border-top-right-radius: var(--ha-border-radius-sm);
--- a/src/components/ha-language-picker.ts
+++ b/src/components/ha-language-picker.ts
@@ -14,12 +14,6 @@ import "./ha-generic-picker";
 import type { HaGenericPicker } from "./ha-generic-picker";
 import type { PickerComboBoxItem } from "./ha-picker-combo-box";

-const SEARCH_KEYS = [
-  { name: "primary", weight: 10 },
-  { name: "search_labels.browser", weight: 8 },
-  { name: "search_labels.english", weight: 5 },
-];
-
 export const getLanguageOptions = (
  languages: string[],
  nativeName: boolean,
@@ -28,7 +22,6 @@ export const getLanguageOptions = (
 ): PickerComboBoxItem[] => {
  let options: PickerComboBoxItem[] = [];

-  const enLocale = { language: "en" } as FrontendLocaleData;
  if (nativeName) {
    const translations = translationMetadata.translations;
    options = languages.map((lang) => {
@@ -44,33 +37,16 @@ export const getLanguageOptions = (
          primary = lang;
        }
      }
-      const currentLang = formatLanguageCode(
-        lang,
-        locale || ({ language: navigator.language } as FrontendLocaleData)
-      );
-      const englishName = formatLanguageCode(lang, enLocale);
      return {
        id: lang,
        primary,
-        secondary: currentLang !== primary ? currentLang : undefined,
-        search_labels: {
-          browser: currentLang !== primary ? currentLang : null,
-          english: englishName !== primary ? englishName : null,
-        },
      };
    });
  } else if (locale) {
-    options = languages.map((lang) => {
-      const primary = formatLanguageCode(lang, locale);
-      const englishName = formatLanguageCode(lang, enLocale);
-      return {
+    options = languages.map((lang) => ({
      id: lang,
-        primary,
-        search_labels: {
-          english: englishName !== primary ? englishName : null,
-        },
-      };
-    });
+      primary: formatLanguageCode(lang, locale),
+    }));
  }

  if (!noSort && locale) {
@@ -164,7 +140,6 @@ export class HaLanguagePicker extends LitElement {
        .disabled=${this.disabled}
        .helper=${this.helper}
        .getItems=${this._getItems}
-        .searchKeys=${SEARCH_KEYS}
        @value-changed=${this._changed}
        hide-clear-icon
      >
--- a/src/components/ha-md-dialog.ts
+++ b/src/components/ha-md-dialog.ts
@@ -175,10 +175,10 @@ export class HaMdDialog extends Dialog {
        }

        .container {
-          margin-top: var(--safe-area-inset-top, 0);
-          margin-bottom: var(--safe-area-inset-bottom, 0);
-          margin-left: var(--safe-area-inset-left, 0);
-          margin-right: var(--safe-area-inset-right, 0);
+          margin-top: var(--safe-area-inset-top, var(--ha-space-0));
+          margin-bottom: var(--safe-area-inset-bottom, var(--ha-space-0));
+          margin-left: var(--safe-area-inset-left, var(--ha-space-0));
+          margin-right: var(--safe-area-inset-right, var(--ha-space-0));
        }
      }

--- a/src/components/ha-picker-combo-box.ts
+++ b/src/components/ha-picker-combo-box.ts
@@ -53,8 +53,7 @@ export interface PickerComboBoxItem {
  icon_path?: string;
  icon?: string;
 }
-
-export const NO_ITEMS_AVAILABLE_ID = "___no_items_available___";
+const NO_ITEMS_AVAILABLE_ID = "___no_items_available___";

 const DEFAULT_ROW_RENDERER: RenderItemFunction<PickerComboBoxItem> = (
  item
--- a/src/components/ha-picker-field.ts
+++ b/src/components/ha-picker-field.ts
@@ -11,13 +11,13 @@ import {
 import { customElement, property, query, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import { fireEvent } from "../common/dom/fire_event";
-import { localizeContext } from "../data/context";
 import { PickerMixin } from "../mixins/picker-mixin";
+import { localizeContext } from "../data/context";
 import type { HomeAssistant } from "../types";
 import "./ha-combo-box-item";
 import type { HaComboBoxItem } from "./ha-combo-box-item";
-import "./ha-icon";
 import "./ha-icon-button";
+import "./ha-icon";

 declare global {
  interface HASSDomEvents {
@@ -194,10 +194,7 @@ export class HaPickerField extends PickerMixin(LitElement) {

        .placeholder {
          color: var(--secondary-text-color);
-        }
-
-        :host([invalid]) .placeholder {
-          color: var(--mdc-theme-error, var(--error-color, #b00020));
+          padding: 0 8px;
        }

        .unknown {
--- a/src/components/ha-selector/ha-selector-choose.ts
+++ b/src/components/ha-selector/ha-selector-choose.ts
@@ -1,202 +0,0 @@
-import type { PropertyValues } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../common/dom/fire_event";
-import { isTemplate } from "../../common/string/has-template";
-import type { ChooseSelector, Selector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
-import "../ha-button-toggle-group";
-import "./ha-selector";
-
-@customElement("ha-selector-choose")
-export class HaChooseSelector extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ attribute: false }) public selector!: ChooseSelector;
-
-  @property() public value?: any;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ attribute: false })
-  public localizeValue?: (key: string) => string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = true;
-
-  @state() public _activeChoice?: string;
-
-  protected willUpdate(changedProperties: PropertyValues): void {
-    if (
-      changedProperties.has("selector") &&
-      (!this._activeChoice ||
-        !(this._activeChoice in this.selector.choose.choices))
-    ) {
-      this._setActiveChoice();
-    }
-  }
-
-  protected render() {
-    if (!this._activeChoice) {
-      return nothing;
-    }
-
-    const selector = this._selector(this._activeChoice);
-    const value = this._value(this._activeChoice);
-
-    return html`<div class="multi-header">
-        <span>${this.label}${this.required ? "*" : ""}</span>
-        <ha-button-toggle-group
-          size="small"
-          .buttons=${this._toggleButtons(
-            this.selector.choose.choices,
-            this.selector.choose.translation_key
-          )}
-          .active=${this._activeChoice}
-          @value-changed=${this._choiceChanged}
-        ></ha-button-toggle-group>
-      </div>
-      <ha-selector
-        .hass=${this.hass}
-        .selector=${selector}
-        .value=${value}
-        .disabled=${this.disabled}
-        .required=${this.required}
-        @value-changed=${this._handleValueChanged}
-        .helper=${this.helper}
-      ></ha-selector>`;
-  }
-
-  private _toggleButtons = memoizeOne(
-    (choices: ChooseSelector["choose"]["choices"], translationKey?: string) =>
-      Object.keys(choices).map((choice) => ({
-        label:
-          this.localizeValue && translationKey
-            ? this.localizeValue(`${translationKey}.choices.${choice}`)
-            : choice,
-        value: choice,
-      }))
-  );
-
-  private _choiceChanged(ev) {
-    ev.stopPropagation();
-    const value =
-      typeof this.value === "object"
-        ? this.value
-        : {
-            [this._activeChoice!]: this.value,
-          };
-    this._activeChoice = ev.detail?.value || ev.target.value;
-    fireEvent(this, "value-changed", {
-      value: {
-        ...value,
-        active_choice: this._activeChoice,
-      },
-    });
-  }
-
-  private _handleValueChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    const value = typeof this.value === "object" ? this.value : {};
-    fireEvent(this, "value-changed", {
-      value: {
-        ...value,
-        [this._activeChoice!]: ev.detail.value,
-        active_choice: this._activeChoice,
-      },
-    });
-  }
-
-  private _selector(choice?: string): Selector {
-    const choices = this.selector.choose.choices;
-
-    choice = choice || this.value?.active_choice;
-
-    if (choice && choice in choices) {
-      return choices[choice].selector;
-    }
-
-    return choices[Object.keys(choices)[0]].selector;
-  }
-
-  private _value(choice?: string): any {
-    if (!this.value) {
-      return undefined;
-    }
-    return typeof this.value === "object"
-      ? this.value[choice || this.value.active_choice]
-      : this.value;
-  }
-
-  private _setActiveChoice() {
-    if (this.value) {
-      if (typeof this.value === "object") {
-        if (this.value.active_choice in this.selector.choose.choices) {
-          this._activeChoice = this.value.active_choice;
-          return;
-        }
-      } else {
-        const typeofValue = typeof this.value;
-        const selectorTypes = Object.values(this.selector.choose.choices).map(
-          (choice) => Object.keys(choice.selector)[0]
-        );
-        if (typeofValue === "number" && selectorTypes.includes("number")) {
-          this._activeChoice = Object.keys(this.selector.choose.choices)[
-            selectorTypes.indexOf("number")
-          ];
-          return;
-        }
-        if (
-          typeofValue === "string" &&
-          isTemplate(this.value) &&
-          selectorTypes.includes("template")
-        ) {
-          this._activeChoice = Object.keys(this.selector.choose.choices)[
-            selectorTypes.indexOf("template")
-          ];
-          return;
-        }
-        if (
-          typeofValue === "string" &&
-          this.value.includes(".") &&
-          selectorTypes.includes("entity")
-        ) {
-          this._activeChoice = Object.keys(this.selector.choose.choices)[
-            selectorTypes.indexOf("entity")
-          ];
-          return;
-        }
-        if (typeofValue === "string" && selectorTypes.includes("text")) {
-          this._activeChoice = Object.keys(this.selector.choose.choices)[
-            selectorTypes.indexOf("text")
-          ];
-          return;
-        }
-      }
-    }
-    this._activeChoice = Object.keys(this.selector.choose.choices)[0];
-  }
-
-  static styles = css`
-    .multi-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: var(--ha-space-2);
-    }
-    ha-button-toggle-group {
-      display: block;
-      justify-self: end;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-choose": HaChooseSelector;
-  }
-}
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -1,8 +1,7 @@
 import { mdiDragHorizontalVariant } from "@mdi/js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
-import memoizeOne from "memoize-one";
 import { ensureArray } from "../../common/array/ensure-array";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
@@ -12,8 +11,9 @@ import type { HomeAssistant } from "../../types";
 import "../chips/ha-chip-set";
 import "../chips/ha-input-chip";
 import "../ha-checkbox";
+import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
 import "../ha-formfield";
-import "../ha-generic-picker";
 import "../ha-input-helper-text";
 import "../ha-list-item";
 import "../ha-radio";
@@ -40,6 +40,8 @@ export class HaSelectSelector extends LitElement {

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

+  @query("ha-combo-box", true) private comboBox!: HaComboBox;
+
  private _itemMoved(ev: CustomEvent): void {
    ev.stopPropagation();
    const { oldIndex, newIndex } = ev.detail;
@@ -57,8 +59,15 @@ export class HaSelectSelector extends LitElement {
    });
  }

+  private _filter = "";
+
  protected render() {
-    const options = this._getOptions(this.selector);
+    const options =
+      this.selector.select?.options?.map((option) =>
+        typeof option === "object"
+          ? (option as SelectOption)
+          : ({ value: option, label: option } as SelectOption)
+      ) || [];

    const translationKey = this.selector.select?.translation_key;

@@ -156,6 +165,10 @@ export class HaSelectSelector extends LitElement {
      const value =
        !this.value || this.value === "" ? [] : ensureArray(this.value);

+      const optionItems = options.filter(
+        (option) => !option.disabled && !value?.includes(option.value)
+      );
+
      return html`
        ${value?.length
          ? html`
@@ -199,33 +212,50 @@ export class HaSelectSelector extends LitElement {
            `
          : nothing}

-        <ha-generic-picker
+        <ha-combo-box
+          item-value-path="value"
+          item-label-path="label"
          .hass=${this.hass}
+          .label=${this.label}
          .helper=${this.helper}
          .disabled=${this.disabled}
          .required=${this.required && !value.length}
          .value=${""}
-          .addButtonLabel=${this.label}
-          .getItems=${this._getItems(options, value, true)}
+          .items=${optionItems}
          .allowCustomValue=${this.selector.select.custom_value ?? false}
+          @filter-changed=${this._filterChanged}
          @value-changed=${this._comboBoxValueChanged}
-        ></ha-generic-picker>
+          @opened-changed=${this._openedChanged}
+        ></ha-combo-box>
      `;
    }

    if (this.selector.select?.custom_value) {
+      if (
+        this.value !== undefined &&
+        !Array.isArray(this.value) &&
+        !options.find((option) => option.value === this.value)
+      ) {
+        options.unshift({ value: this.value, label: this.value });
+      }
+
+      const optionItems = options.filter((option) => !option.disabled);
+
      return html`
-        <ha-generic-picker
+        <ha-combo-box
+          item-value-path="value"
+          item-label-path="label"
          .hass=${this.hass}
          .label=${this.label}
          .helper=${this.helper}
          .disabled=${this.disabled}
          .required=${this.required}
-          .getItems=${this._getItems(options)}
-          .value=${this.value as string | undefined}
+          .items=${optionItems}
+          .value=${this.value}
+          @filter-changed=${this._filterChanged}
          @value-changed=${this._comboBoxValueChanged}
-          allow-custom-value
-        ></ha-generic-picker>
+          @opened-changed=${this._openedChanged}
+        ></ha-combo-box>
      `;
    }

@@ -244,7 +274,7 @@ export class HaSelectSelector extends LitElement {
      >
        ${options.map(
          (item: SelectOption) => html`
-            <ha-list-item .value=${item.value} .disabled=${!!item.disabled}
+            <ha-list-item .value=${item.value} .disabled=${item.disabled}
              >${item.label}</ha-list-item
            >
          `
@@ -261,30 +291,6 @@ export class HaSelectSelector extends LitElement {
      : "";
  }

-  private _getOptions = memoizeOne(
-    (selector: SelectSelector) =>
-      selector.select?.options?.map((option) =>
-        typeof option === "object"
-          ? (option as SelectOption)
-          : ({ value: option, label: option } as SelectOption)
-      ) || []
-  );
-
-  private _getItems = memoizeOne(
-    (options: SelectOption[], value?: string[], multiple = false) => {
-      const filteredOptions = options.filter((option) =>
-        !option.disabled && !multiple ? true : !value?.includes(option.value)
-      );
-
-      return () =>
-        filteredOptions.map((option) => ({
-          id: option.value,
-          primary: option.label,
-          sorting_label: option.label,
-        }));
-    }
-  );
-
  private get _mode(): "list" | "dropdown" | "box" {
    return (
      this.selector.select?.mode ||
@@ -349,6 +355,8 @@ export class HaSelectSelector extends LitElement {
    fireEvent(this, "value-changed", {
      value,
    });
+    await this.updateComplete;
+    this._filterChanged();
  }

  private _comboBoxValueChanged(ev: CustomEvent): void {
@@ -366,17 +374,49 @@ export class HaSelectSelector extends LitElement {
      return;
    }

-    const currentValue = !this.value ? [] : ensureArray(this.value);
+    const currentValue =
+      !this.value || this.value === "" ? [] : ensureArray(this.value);

    if (newValue !== undefined && currentValue.includes(newValue)) {
      return;
    }

+    setTimeout(() => {
+      this._filterChanged();
+      this.comboBox.setInputValue("");
+    }, 0);
+
    fireEvent(this, "value-changed", {
      value: [...currentValue, newValue],
    });
  }

+  private _openedChanged(ev?: CustomEvent): void {
+    if (ev?.detail.value) {
+      this._filterChanged();
+    }
+  }
+
+  private _filterChanged(ev?: CustomEvent): void {
+    this._filter = ev?.detail.value || "";
+
+    const filteredItems = this.comboBox.items?.filter((item) => {
+      const label = item.label || item.value;
+      return label.toLowerCase().includes(this._filter?.toLowerCase());
+    });
+
+    if (
+      this._filter &&
+      this.selector.select?.custom_value &&
+      filteredItems &&
+      !filteredItems.some((item) => (item.label || item.value) === this._filter)
+    ) {
+      filteredItems.unshift({ label: this._filter, value: this._filter });
+    }
+
+    this.comboBox.filteredItems = filteredItems;
+  }
+
  static styles = css`
    :host {
      position: relative;
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -18,7 +18,6 @@ const LOAD_ELEMENTS = {
  attribute: () => import("./ha-selector-attribute"),
  assist_pipeline: () => import("./ha-selector-assist-pipeline"),
  boolean: () => import("./ha-selector-boolean"),
-  choose: () => import("./ha-selector-choose"),
  color_rgb: () => import("./ha-selector-color-rgb"),
  condition: () => import("./ha-selector-condition"),
  config_entry: () => import("./ha-selector-config-entry"),
--- a/src/components/ha-service-control.ts
+++ b/src/components/ha-service-control.ts
@@ -726,7 +726,6 @@ export class HaServiceControl extends LitElement {
              : undefined}
            .placeholder=${dataField.default}
            .localizeValue=${this._localizeValueCallback}
-            .required=${dataField.required}
          ></ha-selector>
        </ha-settings-row>`
      : "";
--- a/src/components/ha-service-picker.ts
+++ b/src/components/ha-service-picker.ts
@@ -1,5 +1,5 @@
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
 import { mdiRoomService } from "@mdi/js";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import { html, LitElement, nothing, type TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -56,9 +56,9 @@ class HaServicePicker extends LitElement {
    getServiceIcons(this.hass);
  }

-  private _rowRenderer: RenderItemFunction<ServiceComboBoxItem> = (
+  private _rowRenderer: ComboBoxLitRenderer<ServiceComboBoxItem> = (
    item,
-    index
+    { index }
  ) => html`
    <ha-combo-box-item type="button" .borderTop=${index !== 0}>
      <ha-service-icon
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -681,7 +681,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
    tooltip.style.display = "block";
    tooltip.style.position = "fixed";
    tooltip.style.top = `${top}px`;
-    tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, 0px))`;
+    tooltip.style.left = `calc(${item.offsetLeft + item.clientWidth + 8}px + var(--safe-area-inset-left, var(--ha-space-0)))`;
  }

  private _hideTooltip() {
@@ -720,10 +720,14 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          background-color: var(--sidebar-background-color);
          width: 100%;
          box-sizing: border-box;
-          padding-bottom: calc(14px + var(--safe-area-inset-bottom, 0px));
+          padding-bottom: calc(
+            14px + var(--safe-area-inset-bottom, var(--ha-space-0))
+          );
        }
        .menu {
-          height: calc(var(--header-height) + var(--safe-area-inset-top, 0px));
+          height: calc(
+            var(--header-height) + var(--safe-area-inset-top, var(--ha-space-0))
+          );
          box-sizing: border-box;
          display: flex;
          padding: 0 var(--ha-space-1);
@@ -742,16 +746,16 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          font-size: var(--ha-font-size-xl);
          align-items: center;
          padding-left: calc(
-            var(--ha-space-1) + var(--safe-area-inset-left, 0px)
+            var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0))
          );
          padding-inline-start: calc(
-            var(--ha-space-1) + var(--safe-area-inset-left, 0px)
+            var(--ha-space-1) + var(--safe-area-inset-left, var(--ha-space-0))
          );
          padding-inline-end: initial;
-          padding-top: var(--safe-area-inset-top, 0px);
+          padding-top: var(--safe-area-inset-top, var(--ha-space-0));
        }
        :host([expanded]) .menu {
-          width: calc(256px + var(--safe-area-inset-left, 0px));
+          width: calc(256px + var(--safe-area-inset-left, var(--ha-space-0)));
        }
        :host([narrow][expanded]) .menu {
          width: 100%;
@@ -767,8 +771,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          display: none;
        }
        :host([narrow]) .title {
-          margin: 0;
-          padding: 0 var(--ha-space-4);
+          margin: var(--ha-space-0);
+          padding: var(--ha-space-0) var(--ha-space-4);
        }
        :host([expanded]) .title {
          display: initial;
@@ -780,13 +784,16 @@ class HaSidebar extends SubscribeMixin(LitElement) {
        ha-fade-in,
        ha-md-list {
          height: calc(
-            100% - var(--header-height) - var(--safe-area-inset-top, 0px) -
+            100% - var(--header-height) - var(
+                --safe-area-inset-top,
+                var(--ha-space-0)
+              ) -
              132px
          );
        }

        ha-fade-in {
-          padding: var(--ha-space-1) 0;
+          padding: var(--ha-space-1) var(--ha-space-0);
          box-sizing: border-box;
          display: flex;
          justify-content: center;
@@ -796,7 +803,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
        ha-md-list {
          overflow-x: hidden;
          background: none;
-          margin-left: var(--safe-area-inset-left, 0px);
+          margin-left: var(--safe-area-inset-left, var(--ha-space-0));
        }

        ha-md-list-item {
@@ -818,7 +825,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          width: 248px;
        }
        :host([narrow][expanded]) ha-md-list-item {
-          width: calc(240px - var(--safe-area-inset-left, 0px));
+          width: calc(240px - var(--safe-area-inset-left, var(--ha-space-0)));
        }

        ha-md-list-item.selected {
@@ -891,7 +898,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
          border-radius: var(--ha-border-radius-md);
          font-size: 0.65em;
          line-height: var(--ha-line-height-expanded);
-          padding: 0 var(--ha-space-1);
+          padding: var(--ha-space-0) var(--ha-space-1);
        }

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

--- a/src/components/ha-wa-dialog.ts
+++ b/src/components/ha-wa-dialog.ts
@@ -13,6 +13,7 @@ import { fireEvent } from "../common/dom/fire_event";
 import { ScrollableFadeMixin } from "../mixins/scrollable-fade-mixin";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant } from "../types";
+import { isIosApp } from "../util/is_ios";
 import "./ha-dialog-header";
 import "./ha-icon-button";

@@ -184,6 +185,21 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
    await this.updateComplete;

    requestAnimationFrame(() => {
+      if (isIosApp(this.hass)) {
+        const element = this.querySelector("[autofocus]");
+        if (element !== null) {
+          if (!element.id) {
+            element.id = "ha-wa-dialog-autofocus";
+          }
+          this.hass.auth.external!.fireMessage({
+            type: "focus_element",
+            payload: {
+              element_id: element.id,
+            },
+          });
+        }
+        return;
+      }
      (this.querySelector("[autofocus]") as HTMLElement | null)?.focus();
    });
  };
@@ -266,15 +282,15 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
          /* Used to offset the dialog from the safe areas when space is limited */
          transform: translate(
            calc(
-              var(--safe-area-offset-left, 0px) - var(
+              var(--safe-area-offset-left, var(--ha-space-0)) - var(
                  --safe-area-offset-right,
-                  0px
+                  var(--ha-space-0)
                )
            ),
            calc(
-              var(--safe-area-offset-top, 0px) - var(
+              var(--safe-area-offset-top, var(--ha-space-0)) - var(
                  --safe-area-offset-bottom,
-                  0px
+                  var(--ha-space-0)
                )
            )
          );
@@ -285,7 +301,7 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {

        @media all and (max-width: 450px), all and (max-height: 500px) {
          :host([type="standard"]) {
-            --ha-dialog-border-radius: 0;
+            --ha-dialog-border-radius: var(--ha-space-0);

            wa-dialog {
              /* Make the container fill the whole screen width and not the safe width */
@@ -372,7 +388,7 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
        }

        wa-dialog::part(footer) {
-          padding: 0;
+          padding: var(--ha-space-0);
        }

        ::slotted([slot="footer"]) {
--- a/src/components/media-player/dialog-media-manage.ts
+++ b/src/components/media-player/dialog-media-manage.ts
@@ -1,17 +1,13 @@
 import { animate } from "@lit-labs/motion";

-import {
-  mdiClose,
-  mdiDelete,
-  mdiCheckboxBlankOutline,
-  mdiCheckboxMarkedOutline,
-} from "@mdi/js";
+import { mdiClose, mdiDelete } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
+import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { deleteImage, getIdFromUrl } from "../../data/image_upload";
 import type { MediaPlayerItem } from "../../data/media-player";
 import { MediaClassBrowserSettings } from "../../data/media-player";
@@ -22,13 +18,12 @@ import {
  removeLocalMedia,
 } from "../../data/media_source";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
+import { haStyleDialog, haStyleDialogFixedTop } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "../ha-button";
 import "../ha-check-list-item";
-import "../ha-wa-dialog";
+import "../ha-dialog";
 import "../ha-dialog-header";
-import "../ha-dialog-footer";
-import "../ha-icon-button";
 import "../ha-list";
 import "../ha-spinner";
 import "../ha-svg-icon";
@@ -51,24 +46,14 @@ class DialogMediaManage extends LitElement {

  @state() private _selected = new Set<number>();

-  @state() private _open = false;
-
-  @state() private _filteredChildren: MediaPlayerItem[] = [];
-
  private _filesChanged = false;

  public showDialog(params: MediaManageDialogParams): void {
    this._params = params;
    this._refreshMedia();
-    this._open = true;
  }

  public closeDialog() {
-    this._open = false;
-    return true;
-  }
-
-  private _dialogClosed(): void {
    if (this._filesChanged && this._params!.onClose) {
      this._params!.onClose();
    }
@@ -80,57 +65,59 @@ class DialogMediaManage extends LitElement {
    fireEvent(this, "dialog-closed", { dialog: this.localName });
  }

-  protected willUpdate() {
-    this._filteredChildren =
-      this._currentItem?.children?.filter((child) => !child.can_expand) || [];
-    if (this._filteredChildren.length === 0 && this._selected.size !== 0) {
-      // When running delete all, sometimes the list can throw off a spurious
-      // select event that makes it think that 1 item is still selected. Clear selected
-      // if nothing can be selected.
-      this._selected = new Set();
-    }
-  }
-
  protected render() {
    if (!this._params) {
      return nothing;
    }

+    const children =
+      this._currentItem?.children?.filter((child) => !child.can_expand) || [];
+
    let fileIndex = 0;

    return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        ?prevent-scrim-close=${this._uploading || this._deleting}
-        @closed=${this._dialogClosed}
+      <ha-dialog
+        open
+        scrimClickAction
+        escapeKeyAction
+        hideActions
+        flexContent
+        .heading=${this._params.currentItem.title}
+        @closed=${this.closeDialog}
      >
-        <ha-dialog-header slot="header">
-          ${!(this._uploading || this._deleting)
-            ? html`<slot name="headerNavigationIcon" slot="navigationIcon">
-                <ha-icon-button
-                  data-dialog="close"
-                  .label=${this.hass?.localize("ui.common.close") ?? "Close"}
-                  .path=${mdiClose}
-                ></ha-icon-button
-              ></slot>`
-            : nothing}
-          <span class="title" slot="title" id="dialog-box-title">
+        <ha-dialog-header slot="heading">
+          ${this._selected.size === 0
+            ? html`
+                <span slot="title">
                  ${this.hass.localize(
                    "ui.components.media-browser.file_management.title"
                  )}
                </span>
-          ${this._selected.size === 0
-            ? html`<ha-media-upload-button
+
+                <ha-media-upload-button
+                  .disabled=${this._deleting}
                  .hass=${this.hass}
                  .currentItem=${this._params.currentItem}
                  @uploading=${this._startUploading}
                  @media-refresh=${this._doneUploading}
                  slot="actionItems"
-              ></ha-media-upload-button>`
-            : html`<ha-button
+                ></ha-media-upload-button>
+                ${this._uploading
+                  ? ""
+                  : html`
+                      <ha-icon-button
+                        .label=${this.hass.localize("ui.common.close")}
+                        .path=${mdiClose}
+                        dialogAction="close"
+                        slot="navigationIcon"
+                        dir=${computeRTLDirection(this.hass)}
+                      ></ha-icon-button>
+                    `}
+              `
+            : html`
+                <ha-button
                  variant="danger"
-                slot="actionItems"
+                  slot="navigationIcon"
                  .disabled=${this._deleting}
                  @click=${this._handleDelete}
                >
@@ -141,7 +128,25 @@ class DialogMediaManage extends LitElement {
                    }`,
                    { count: this._selected.size }
                  )}
-              </ha-button>`}
+                </ha-button>
+
+                ${this._deleting
+                  ? ""
+                  : html`
+                      <ha-button
+                        slot="actionItems"
+                        @click=${this._handleDeselectAll}
+                      >
+                        <ha-svg-icon
+                          .path=${mdiClose}
+                          slot="start"
+                        ></ha-svg-icon>
+                        ${this.hass.localize(
+                          `ui.components.media-browser.file_management.deselect_all`
+                        )}
+                      </ha-button>
+                    `}
+              `}
        </ha-dialog-header>
        ${!this._currentItem
          ? html`
@@ -149,7 +154,7 @@ class DialogMediaManage extends LitElement {
                <ha-spinner></ha-spinner>
              </div>
            `
-          : !this._filteredChildren.length
+          : !children.length
            ? html`<div class="no-items">
                <p>
                  ${this.hass.localize(
@@ -165,38 +170,9 @@ class DialogMediaManage extends LitElement {
                  : ""}
              </div>`
            : html`
-                <div class="buttons" slot="footer">
-                  <ha-button
-                    appearance="filled"
-                    @click=${this._handleDeselectAll}
-                    .disabled=${this._selected.size === 0}
-                  >
-                    <ha-svg-icon
-                      .path=${mdiCheckboxBlankOutline}
-                      slot="start"
-                    ></ha-svg-icon>
-                    ${this.hass.localize(
-                      `ui.components.media-browser.file_management.deselect_all`
-                    )}
-                  </ha-button>
-                  <ha-button
-                    appearance="filled"
-                    @click=${this._handleSelectAll}
-                    .disabled=${this._selected.size ===
-                    this._filteredChildren.length}
-                  >
-                    <ha-svg-icon
-                      .path=${mdiCheckboxMarkedOutline}
-                      slot="start"
-                    ></ha-svg-icon>
-                    ${this.hass.localize(
-                      `ui.components.media-browser.file_management.select_all`
-                    )}
-                  </ha-button>
-                </div>
                <ha-list multi @selected=${this._handleSelected}>
                  ${repeat(
-                    this._filteredChildren,
+                    children,
                    (item) => item.media_content_id,
                    (item) => {
                      const icon = html`
@@ -244,7 +220,7 @@ class DialogMediaManage extends LitElement {
              )}
            </ha-tip>`
          : nothing}
-      </ha-wa-dialog>
+      </ha-dialog>
    `;
  }

@@ -268,10 +244,6 @@ class DialogMediaManage extends LitElement {
    }
  }

-  private _handleSelectAll() {
-    this._selected = new Set([...Array(this._filteredChildren.length).keys()]);
-  }
-
  private async _handleDelete() {
    if (
      !(await showConfirmationDialog(this, {
@@ -332,10 +304,23 @@ class DialogMediaManage extends LitElement {

  static get styles(): CSSResultGroup {
    return [
+      haStyleDialog,
+      haStyleDialogFixedTop,
      css`
-        ha-wa-dialog {
+        ha-dialog {
+          --dialog-z-index: 9;
          --dialog-content-padding: 0;
        }
+
+        @media (min-width: 800px) {
+          ha-dialog {
+            --mdc-dialog-max-width: 800px;
+            --mdc-dialog-max-height: calc(
+              100vh - var(--ha-space-18) - var(--safe-area-inset-y)
+            );
+          }
+        }
+
        ha-dialog-header ha-media-upload-button,
        ha-dialog-header ha-button {
          --mdc-theme-primary: var(--primary-text-color);
@@ -353,11 +338,7 @@ class DialogMediaManage extends LitElement {
          justify-content: center;
          align-items: center;
        }
-        .buttons {
-          display: flex;
-          justify-content: center;
-          width: 100%;
-        }
+
        .no-items {
          text-align: center;
          padding: 16px;
--- a/src/components/target-picker/ha-target-picker-item-group.ts
+++ b/src/components/target-picker/ha-target-picker-item-group.ts
@@ -89,7 +89,7 @@ export class HaTargetPickerItemGroup extends LitElement {
  static styles = css`
    :host {
      display: block;
-      --expansion-panel-content-padding: 0;
+      --expansion-panel-content-padding: var(--ha-space-0);
    }
    ha-expansion-panel::part(summary) {
      background-color: var(--ha-color-fill-neutral-quiet-resting);
@@ -101,7 +101,7 @@ export class HaTargetPickerItemGroup extends LitElement {
      min-height: unset;
    }
    ha-md-list {
-      padding: 0;
+      padding: var(--ha-space-0);
    }
  `;
 }
--- a/src/components/target-picker/ha-target-picker-item-row.ts
+++ b/src/components/target-picker/ha-target-picker-item-row.ts
@@ -605,8 +605,8 @@ export class HaTargetPickerItemRow extends LitElement {
    buttonLinkStyle,
    css`
      :host {
-        --md-list-item-top-space: 0;
-        --md-list-item-bottom-space: 0;
+        --md-list-item-top-space: var(--ha-space-0);
+        --md-list-item-bottom-space: var(--ha-space-0);
        --md-list-item-leading-space: var(--ha-space-2);
        --md-list-item-trailing-space: var(--ha-space-2);
        --md-list-item-two-line-container-height: 56px;
--- a/src/components/target-picker/ha-target-picker-value-chip.ts
+++ b/src/components/target-picker/ha-target-picker-value-chip.ts
@@ -278,8 +278,8 @@ export class HaTargetPickerValueChip extends LitElement {
      direction: var(--direction);
    }
    .expand-btn {
-      margin-right: 0;
-      margin-inline-end: 0;
+      margin-right: var(--ha-space-0);
+      margin-inline-end: var(--ha-space-0);
      margin-inline-start: initial;
    }
    .mdc-chip.area:not(.add),
--- a/src/components/user/ha-user-picker.ts
+++ b/src/components/user/ha-user-picker.ts
@@ -1,4 +1,4 @@
-import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
+import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
 import type { TemplateResult } from "lit";
 import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -73,7 +73,7 @@ class HaUserPicker extends LitElement {
    `;
  };

-  private _rowRenderer: RenderItemFunction<UserComboBoxItem> = (item) => {
+  private _rowRenderer: ComboBoxLitRenderer<UserComboBoxItem> = (item) => {
    const user = item.user;
    if (!user) {
      return html`<ha-combo-box-item type="button" compact>
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -27,7 +27,6 @@ export type Selector =
  | AttributeSelector
  | BooleanSelector
  | ButtonToggleSelector
-  | ChooseSelector
  | ColorRGBSelector
  | ColorTempSelector
  | ConditionSelector
@@ -117,13 +116,6 @@ export interface ButtonToggleSelector {
  } | null;
 }

-export interface ChooseSelector {
-  choose: {
-    choices: Record<string, { selector: Selector }>;
-    translation_key?: string;
-  };
-}
-
 export interface ColorRGBSelector {
  color_rgb: {} | null;
 }
--- a/src/dialogs/more-info/components/ha-more-info-control-select-container.ts
+++ b/src/dialogs/more-info/components/ha-more-info-control-select-container.ts
@@ -37,8 +37,8 @@ export class HaMoreInfoControlSelectContainer extends LitElement {
      overflow: auto;
      -ms-overflow-style: none; /* IE and Edge */
      scrollbar-width: none; /* Firefox */
-      margin: -2px calc(var(--ha-space-6) * -1);
-      padding: 2px var(--ha-space-6);
+      margin: -2px -24px;
+      padding: 2px 24px;
    }
    .controls-scroll::-webkit-scrollbar {
      display: none;
--- a/src/dialogs/more-info/components/ha-more-info-state-header.ts
+++ b/src/dialogs/more-info/components/ha-more-info-state-header.ts
@@ -84,8 +84,8 @@ export class HaMoreInfoStateHeader extends LitElement {
      font-weight: var(--ha-font-weight-medium);
      line-height: var(--ha-line-height-normal);
      letter-spacing: 0.1px;
-      padding: var(--ha-space-1) 0;
-      margin-bottom: var(--ha-space-5);
+      padding: 4px 0;
+      margin-bottom: 20px;
      cursor: pointer;
      user-select: none;
      -webkit-user-select: none;
--- a/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts
+++ b/src/dialogs/more-info/components/lights/dialog-light-color-favorite.ts
@@ -268,14 +268,14 @@ class DialogLightColorFavorite extends LitElement {
          flex-direction: column;
          align-items: center;
          justify-content: center;
-          padding: var(--ha-space-6);
+          padding: 24px;
          flex: 1;
        }
        .modes {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
-          padding: 0 var(--ha-space-6);
+          padding: 0 24px;
        }
        .wheel {
          width: 30px;
--- a/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts
+++ b/src/dialogs/more-info/components/lights/ha-more-info-light-favorite-colors.ts
@@ -254,14 +254,14 @@ export class HaMoreInfoLightFavoriteColors extends LitElement {
      display: flex;
      align-items: center;
      justify-content: center;
-      margin: calc(var(--ha-space-2) * -1);
+      margin: -8px;
      flex-wrap: wrap;
      max-width: 250px;
      user-select: none;
    }

    .container > * {
-      margin: var(--ha-space-2);
+      margin: 8px;
    }

    .color {
--- a/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
+++ b/src/dialogs/more-info/components/lights/light-color-rgb-picker.ts
@@ -515,7 +515,7 @@ class LightRgbColorPicker extends LitElement {
        hr {
          border-color: var(--divider-color);
          border-bottom: none;
-          margin: var(--ha-space-4) 0;
+          margin: 16px 0;
        }
      `,
    ];
--- a/src/dialogs/more-info/components/more-info-control-style.ts
+++ b/src/dialogs/more-info/components/more-info-control-style.ts
@@ -15,22 +15,22 @@ export const moreInfoControlStyle = css`
  }

  .controls:not(:last-child) {
-    margin-bottom: var(--ha-space-6);
+    margin-bottom: 24px;
  }

  .controls > *:not(:last-child) {
-    margin-bottom: var(--ha-space-6);
+    margin-bottom: 24px;
  }

  .buttons {
    display: flex;
    align-items: center;
    justify-content: center;
-    margin-bottom: var(--ha-space-3);
+    margin-bottom: 12px;
  }

  .buttons > * {
-    margin: var(--ha-space-2);
+    margin: 8px;
  }

  ha-attributes {
@@ -38,6 +38,6 @@ export const moreInfoControlStyle = css`
    width: 100%;
  }
  ha-more-info-control-select-container + ha-attributes:not([empty]) {
-    margin-top: var(--ha-space-4);
+    margin-top: 16px;
  }
 `;
--- a/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts
+++ b/src/dialogs/more-info/components/siren/ha-more-info-siren-advanced-controls.ts
@@ -209,7 +209,7 @@ class MoreInfoSirenAdvancedControls extends LitElement {
          flex-direction: row;
          justify-content: center;
          gap: var(--ha-space-4);
-          margin-top: var(--ha-space-4);
+          margin-top: 16px;
        }
        ha-control-button {
          --control-button-border-radius: var(--ha-border-radius-xl);
--- a/src/dialogs/more-info/components/voice/ha-more-info-view-voice-assistants.ts
+++ b/src/dialogs/more-info/components/voice/ha-more-info-view-voice-assistants.ts
@@ -48,7 +48,7 @@ class MoreInfoViewVoiceAssistants extends LitElement {
          flex-direction: column;
          align-items: center;
          justify-content: center;
-          padding: var(--ha-space-6);
+          padding: 24px;
          flex: 1;
        }
      `,
--- a/src/dialogs/more-info/controls/more-info-automation.ts
+++ b/src/dialogs/more-info/controls/more-info-automation.ts
@@ -52,7 +52,7 @@ class MoreInfoAutomation extends LitElement {
      justify-content: space-between;
    }
    .actions {
-      margin: var(--ha-space-2) 0;
+      margin: 8px 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
@@ -60,7 +60,7 @@ class MoreInfoAutomation extends LitElement {
    hr {
      border-color: var(--divider-color);
      border-bottom: none;
-      margin: var(--ha-space-4) 0;
+      margin: 16px 0;
    }
  `;
 }
--- a/src/dialogs/more-info/controls/more-info-camera.ts
+++ b/src/dialogs/more-info/controls/more-info-camera.ts
@@ -106,7 +106,7 @@ class MoreInfoCamera extends LitElement {
      flex-wrap: wrap;
      justify-content: flex-end;
      box-sizing: border-box;
-      padding: var(--ha-space-4);
+      padding: 16px;
      z-index: 1;
      gap: var(--ha-space-2);
    }
--- a/src/dialogs/more-info/controls/more-info-climate.ts
+++ b/src/dialogs/more-info/controls/more-info-climate.ts
@@ -511,7 +511,7 @@ class MoreInfoClimate extends LitElement {
          align-items: center;
          justify-content: center;
          text-align: center;
-          margin-bottom: var(--ha-space-10);
+          margin-bottom: 40px;
        }

        .current div {
@@ -534,7 +534,7 @@ class MoreInfoClimate extends LitElement {
          font-size: var(--ha-font-size-m);
          line-height: var(--ha-line-height-condensed);
          letter-spacing: 0.4px;
-          margin-bottom: var(--ha-space-1);
+          margin-bottom: 4px;
        }

        .current .value {
@@ -545,7 +545,7 @@ class MoreInfoClimate extends LitElement {
        }
        ha-select {
          width: 100%;
-          margin-top: var(--ha-space-2);
+          margin-top: 8px;
        }

        .container-humidity .single-row {
@@ -561,7 +561,7 @@ class MoreInfoClimate extends LitElement {
        }

        .single-row {
-          padding: var(--ha-space-2) 0;
+          padding: 8px 0;
        }
      `,
    ];
--- a/src/dialogs/more-info/controls/more-info-configurator.ts
+++ b/src/dialogs/more-info/controls/more-info-configurator.ts
@@ -87,7 +87,7 @@ export class MoreInfoConfigurator extends LitElement {
      flex-direction: column;
    }
    p {
-      margin: var(--ha-space-2) 0;
+      margin: 8px 0;
    }

    a {
--- a/src/dialogs/more-info/controls/more-info-counter.ts
+++ b/src/dialogs/more-info/controls/more-info-counter.ts
@@ -62,7 +62,7 @@ class MoreInfoCounter extends LitElement {

  static styles = css`
    .actions {
-      margin: var(--ha-space-2) 0;
+      margin: 8px 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
--- a/src/dialogs/more-info/controls/more-info-cover.ts
+++ b/src/dialogs/more-info/controls/more-info-cover.ts
@@ -194,7 +194,7 @@ class MoreInfoCover extends LitElement {
          align-items: center;
        }
        .main-control > * {
-          margin: 0 var(--ha-space-2);
+          margin: 0 8px;
        }
      `,
    ];
--- a/src/dialogs/more-info/controls/more-info-datetime.ts
+++ b/src/dialogs/more-info/controls/more-info-datetime.ts
@@ -72,8 +72,8 @@ class MoreInfoDatetime extends LitElement {
      justify-content: flex-end;
    }
    ha-date-input + ha-time-input {
-      margin-left: var(--ha-space-1);
-      margin-inline-start: var(--ha-space-1);
+      margin-left: 4px;
+      margin-inline-start: 4px;
      margin-inline-end: initial;
    }
  `;
--- a/src/dialogs/more-info/controls/more-info-group.ts
+++ b/src/dialogs/more-info/controls/more-info-group.ts
@@ -100,7 +100,7 @@ class MoreInfoGroup extends LitElement {
      css`
        state-card-content {
          display: block;
-          margin-top: var(--ha-space-2);
+          margin-top: 8px;
        }
      `,
    ];
--- a/src/dialogs/more-info/controls/more-info-humidifier.ts
+++ b/src/dialogs/more-info/controls/more-info-humidifier.ts
@@ -217,7 +217,7 @@ class MoreInfoHumidifier extends LitElement {
          align-items: center;
          justify-content: center;
          text-align: center;
-          margin-bottom: var(--ha-space-10);
+          margin-bottom: 40px;
        }
        .current div {
          display: flex;
@@ -237,7 +237,7 @@ class MoreInfoHumidifier extends LitElement {
          font-size: var(--ha-font-size-m);
          line-height: var(--ha-line-height-condensed);
          letter-spacing: 0.4px;
-          margin-bottom: var(--ha-space-1);
+          margin-bottom: 4px;
        }
        .current .value {
          font-size: var(--ha-font-size-xl);
--- a/src/dialogs/more-info/controls/more-info-input_datetime.ts
+++ b/src/dialogs/more-info/controls/more-info-input_datetime.ts
@@ -84,8 +84,8 @@ class MoreInfoInputDatetime extends LitElement {
      justify-content: flex-end;
    }
    ha-date-input + ha-time-input {
-      margin-left: var(--ha-space-1);
-      margin-inline-start: var(--ha-space-1);
+      margin-left: 4px;
+      margin-inline-start: 4px;
      margin-inline-end: initial;
    }
  `;
--- a/src/dialogs/more-info/controls/more-info-lock.ts
+++ b/src/dialogs/more-info/controls/more-info-lock.ts
@@ -192,7 +192,7 @@ class MoreInfoLock extends LitElement {
          margin: 0 auto;
        }
        ha-control-button-group + ha-attributes:not([empty]) {
-          margin-top: var(--ha-space-4);
+          margin-top: 16px;
        }
        @keyframes pulse {
          0% {
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -528,11 +528,11 @@ class MoreInfoMediaPlayer extends LitElement {
      display: flex;
      align-items: center;
      gap: var(--ha-space-3);
-      margin-left: var(--ha-space-2);
+      margin-left: 8px;
    }

    .volume ha-svg-icon {
-      padding: var(--ha-space-1);
+      padding: 4px;
      height: 16px;
      width: 16px;
    }
@@ -545,17 +545,17 @@ class MoreInfoMediaPlayer extends LitElement {
    .badge {
      position: absolute;
      top: -10px;
-      left: var(--ha-space-4);
+      left: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 16px;
-      min-width: var(--ha-space-2);
+      min-width: 8px;
      border-radius: var(--ha-border-radius-md);
      font-weight: var(--ha-font-weight-normal);
      font-size: var(--ha-font-size-xs);
      background-color: var(--primary-color);
-      padding: 0 var(--ha-space-1);
+      padding: 0 4px;
      color: var(--text-primary-color);
    }

@@ -572,13 +572,13 @@ class MoreInfoMediaPlayer extends LitElement {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
-      margin: var(--ha-space-2) 0 var(--ha-space-2) var(--ha-space-2);
+      margin: 8px 0 8px 8px;
    }

    .media-title {
      font-size: var(--ha-font-size-xl);
      font-weight: var(--ha-font-weight-bold);
-      margin-bottom: var(--ha-space-1);
+      margin-bottom: 4px;
    }

    .media-artist {
--- a/src/dialogs/more-info/controls/more-info-person.ts
+++ b/src/dialogs/more-info/controls/more-info-person.ts
@@ -72,12 +72,12 @@ class MoreInfoPerson extends LitElement {
      justify-content: space-between;
    }
    .actions {
-      margin: var(--ha-space-2) 0;
+      margin: 8px 0;
      text-align: right;
    }
    ha-map {
-      margin-top: var(--ha-space-4);
-      margin-bottom: var(--ha-space-4);
+      margin-top: 16px;
+      margin-bottom: 16px;
    }
  `;
 }
--- a/src/dialogs/more-info/controls/more-info-script.ts
+++ b/src/dialogs/more-info/controls/more-info-script.ts
@@ -227,24 +227,24 @@ class MoreInfoScript extends LitElement {
      visibility: hidden;
      color: var(--secondary-text-color);
      text-align: center;
-      margin-bottom: var(--ha-space-4);
+      margin-bottom: 16px;
      height: 21px;
    }
    .queue.has-queue {
      visibility: visible;
    }
    .fields {
-      padding: var(--ha-space-4);
+      padding: 16px;
      border: 1px solid var(--divider-color);
      border-radius: var(--ha-border-radius-md);
-      margin-bottom: var(--ha-space-4);
+      margin-bottom: 16px;
    }
    .fields .title {
      font-weight: var(--ha-font-weight-bold);
    }
    ha-control-button ha-svg-icon {
      z-index: -1;
-      margin-right: var(--ha-space-1);
+      margin-right: 4px;
    }
    ha-service-control {
      --service-control-padding: 0;
@@ -252,7 +252,7 @@ class MoreInfoScript extends LitElement {
    }
    ha-markdown {
      text-align: center;
-      padding: 0 var(--ha-space-4);
+      padding: 0 16px;
    }
  `;
 }
--- a/src/dialogs/more-info/controls/more-info-sun.ts
+++ b/src/dialogs/more-info/controls/more-info-sun.ts
@@ -83,7 +83,7 @@ class MoreInfoSun extends LitElement {
    hr {
      border-color: var(--divider-color);
      border-bottom: none;
-      margin: var(--ha-space-4) 0;
+      margin: 16px 0;
    }
  `;
 }
--- a/src/dialogs/more-info/controls/more-info-timer.ts
+++ b/src/dialogs/more-info/controls/more-info-timer.ts
@@ -80,7 +80,7 @@ class MoreInfoTimer extends LitElement {

  static styles = css`
    .actions {
-      margin: var(--ha-space-2) 0;
+      margin: 8px 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
--- a/src/dialogs/more-info/controls/more-info-update.ts
+++ b/src/dialogs/more-info/controls/more-info-update.ts
@@ -448,14 +448,14 @@ class MoreInfoUpdate extends LitElement {
    hr {
      border-color: var(--divider-color);
      border-bottom: none;
-      margin: var(--ha-space-4) 0;
+      margin: 16px 0;
    }
    ha-expansion-panel {
-      margin: var(--ha-space-4) 0;
+      margin: 16px 0;
    }

    .summary {
-      margin-bottom: var(--ha-space-4);
+      margin-bottom: 16px;
    }

    .row {
@@ -473,10 +473,8 @@ class MoreInfoUpdate extends LitElement {
      );
      position: sticky;
      bottom: 0;
-      margin: 0 calc(var(--ha-space-6) * -1) 0 calc(var(--ha-space-6) * -1);
-      margin-bottom: calc(
-        -1 * max(var(--safe-area-inset-bottom), var(--ha-space-6))
-      );
+      margin: 0 -24px 0 -24px;
+      margin-bottom: calc(-1 * max(var(--safe-area-inset-bottom), 24px));
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
@@ -488,8 +486,8 @@ class MoreInfoUpdate extends LitElement {
    ha-md-list {
      width: 100%;
      box-sizing: border-box;
-      margin-bottom: calc(var(--ha-space-4) * -1);
-      margin-top: calc(var(--ha-space-1) * -1);
+      margin-bottom: -16px;
+      margin-top: -4px;
      --md-sys-color-surface: var(
        --ha-dialog-surface-background,
        var(--mdc-theme-surface, #fff)
@@ -497,8 +495,8 @@ class MoreInfoUpdate extends LitElement {
    }

    ha-md-list-item {
-      --md-list-item-leading-space: var(--ha-space-6);
-      --md-list-item-trailing-space: var(--ha-space-6);
+      --md-list-item-leading-space: 24px;
+      --md-list-item-trailing-space: 24px;
    }

    .actions {
@@ -508,7 +506,7 @@ class MoreInfoUpdate extends LitElement {
      flex-wrap: wrap;
      justify-content: flex-end;
      box-sizing: border-box;
-      padding: var(--ha-space-4);
+      padding: 16px;
      z-index: 1;
      gap: var(--ha-space-2);
    }
@@ -522,12 +520,12 @@ class MoreInfoUpdate extends LitElement {
      align-items: center;
    }
    mwc-linear-progress {
-      margin-bottom: calc(var(--ha-space-2) * -1);
-      margin-top: var(--ha-space-1);
+      margin-bottom: -8px;
+      margin-top: 4px;
    }
    ha-markdown {
      direction: ltr;
-      padding-bottom: var(--ha-space-4);
+      padding-bottom: 16px;
      box-sizing: border-box;
    }
    ha-markdown.hidden {
@@ -536,7 +534,7 @@ class MoreInfoUpdate extends LitElement {
    .loader {
      height: 80px;
      box-sizing: border-box;
-      padding-bottom: var(--ha-space-4);
+      padding-bottom: 16px;
    }
  `;
 }
--- a/src/dialogs/more-info/controls/more-info-valve.ts
+++ b/src/dialogs/more-info/controls/more-info-valve.ts
@@ -173,7 +173,7 @@ class MoreInfoValve extends LitElement {
          align-items: center;
        }
        .main-control > * {
-          margin: 0 var(--ha-space-2);
+          margin: 0 8px;
        }
      `,
    ];
--- a/src/dialogs/more-info/controls/more-info-water_heater.ts
+++ b/src/dialogs/more-info/controls/more-info-water_heater.ts
@@ -214,7 +214,7 @@ class MoreInfoWaterHeater extends LitElement {
          align-items: center;
          justify-content: center;
          text-align: center;
-          margin-bottom: var(--ha-space-10);
+          margin-bottom: 40px;
        }

        .current div {
@@ -237,7 +237,7 @@ class MoreInfoWaterHeater extends LitElement {
          font-size: var(--ha-font-size-m);
          line-height: var(--ha-line-height-condensed);
          letter-spacing: 0.4px;
-          margin-bottom: var(--ha-space-1);
+          margin-bottom: 4px;
        }

        .current .value {
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@@ -440,13 +440,13 @@ class MoreInfoWeather extends LitElement {
      css`
        ha-svg-icon {
          color: var(--state-icon-color);
-          margin-left: var(--ha-space-2);
-          margin-inline-start: var(--ha-space-2);
+          margin-left: 8px;
+          margin-inline-start: 8px;
          margin-inline-end: initial;
        }

        .section {
-          margin: var(--ha-space-4) 0 var(--ha-space-2) 0;
+          margin: 16px 0 8px 0;
          font-size: 1.2em;
        }

@@ -470,14 +470,14 @@ class MoreInfoWeather extends LitElement {

        .main {
          flex: 1;
-          margin-left: var(--ha-space-6);
-          margin-inline-start: var(--ha-space-6);
+          margin-left: 24px;
+          margin-inline-start: 24px;
          margin-inline-end: initial;
        }

        .attribution {
          text-align: center;
-          margin-top: var(--ha-space-4);
+          margin-top: 16px;
        }

        .time-ago,
@@ -500,15 +500,15 @@ class MoreInfoWeather extends LitElement {
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
-          margin-bottom: var(--ha-space-4);
+          margin-bottom: 16px;
        }

        .icon-image {
          display: flex;
          align-items: center;
          min-width: 64px;
-          margin-right: var(--ha-space-4);
-          margin-inline-end: var(--ha-space-4);
+          margin-right: 16px;
+          margin-inline-end: 16px;
          margin-inline-start: initial;
        }

@@ -534,7 +534,7 @@ class MoreInfoWeather extends LitElement {

        .temp-attribute .temp {
          position: relative;
-          margin-right: var(--ha-space-6);
+          margin-right: 24px;
          direction: ltr;
        }

@@ -557,8 +557,8 @@ class MoreInfoWeather extends LitElement {

        .name-state {
          overflow: hidden;
-          padding-right: var(--ha-space-3);
-          padding-inline-end: var(--ha-space-3);
+          padding-right: 12px;
+          padding-inline-end: 12px;
          padding-inline-start: initial;
          width: 100%;
        }
@@ -572,7 +572,7 @@ class MoreInfoWeather extends LitElement {
        .forecast {
          display: flex;
          justify-content: space-around;
-          padding: var(--ha-space-4);
+          padding: 16px;
          padding-bottom: 0px;
          overflow-x: auto;
          scrollbar-color: var(--scrollbar-thumb-color) transparent;
@@ -634,8 +634,8 @@ class MoreInfoWeather extends LitElement {
        }

        .forecast-image-icon {
-          padding-top: var(--ha-space-1);
-          padding-bottom: var(--ha-space-1);
+          padding-top: 4px;
+          padding-bottom: 4px;
          display: flex;
          justify-content: center;
        }
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -802,7 +802,8 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
-          margin: 0 0 calc(var(--ha-space-2) * -1) 0;
+          margin: var(--ha-space-0) var(--ha-space-0)
+            calc(var(--ha-space-2) * -1) var(--ha-space-0);
        }

        .title p {
--- a/src/dialogs/more-info/ha-more-info-history-and-logbook.ts
+++ b/src/dialogs/more-info/ha-more-info-history-and-logbook.ts
@@ -58,7 +58,7 @@ export class MoreInfoHistoryAndLogbook extends LitElement {
      display: block;
    }
    ha-more-info-history + ha-more-info-logbook {
-      margin-top: var(--ha-space-4);
+      margin-top: 16px;
    }
  `;
 }
--- a/src/dialogs/more-info/ha-more-info-history.ts
+++ b/src/dialogs/more-info/ha-more-info-history.ts
@@ -264,7 +264,7 @@ export class MoreInfoHistory extends LitElement {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
-        margin-bottom: var(--ha-space-2);
+        margin-bottom: 8px;
      }
      .header > a,
      a:visited {
--- a/src/dialogs/more-info/ha-more-info-info.ts
+++ b/src/dialogs/more-info/ha-more-info-info.ts
@@ -130,8 +130,8 @@ export class MoreInfoInfo extends LitElement {
      display: flex;
      flex-direction: column;
      flex: 1;
-      padding: var(--ha-space-6);
-      padding-bottom: max(var(--safe-area-inset-bottom), var(--ha-space-6));
+      padding: 24px;
+      padding-bottom: max(var(--safe-area-inset-bottom), 24px);
    }

    [data-domain="camera"] .content {
@@ -153,7 +153,7 @@ export class MoreInfoInfo extends LitElement {
    ha-more-info-history,
    ha-more-info-logbook:not(:last-child) {
      display: block;
-      margin-bottom: var(--ha-space-4);
+      margin-bottom: 16px;
    }

    ha-alert {
--- a/src/dialogs/more-info/ha-more-info-logbook.ts
+++ b/src/dialogs/more-info/ha-more-info-logbook.ts
@@ -82,7 +82,7 @@ export class MoreInfoLogbook extends LitElement {
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
-          margin-bottom: var(--ha-space-2);
+          margin-bottom: 8px;
        }
        .header > a,
        a:visited {
--- a/src/dialogs/more-info/ha-more-info-settings.ts
+++ b/src/dialogs/more-info/ha-more-info-settings.ts
@@ -83,8 +83,7 @@ export class HaMoreInfoSettings extends LitElement {
    return [
      css`
        .content {
-          padding: var(--ha-space-2) var(--ha-space-6) var(--ha-space-6)
-            var(--ha-space-6);
+          padding: 8px 24px 24px 24px;
        }
      `,
    ];
--- a/src/dialogs/more-info/more-info-content.ts
+++ b/src/dialogs/more-info/more-info-content.ts
@@ -119,7 +119,7 @@ class MoreInfoContent extends LitElement {
    hui-section {
      width: 100%;
      display: block;
-      margin-top: var(--ha-space-4);
+      margin-top: 16px;
    }
  `;
 }
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -1120,7 +1120,7 @@ export class QuickBar extends LitElement {
        }

        .nothing-found {
-          padding: var(--ha-space-4) 0;
+          padding: var(--ha-space-4) var(--ha-space-0);
          text-align: center;
        }

--- a/src/dialogs/voice-assistant-setup/cloud/cloud-step-signin.ts
+++ b/src/dialogs/voice-assistant-setup/cloud/cloud-step-signin.ts
@@ -137,7 +137,7 @@ export class CloudStepSignin extends LitElement {
            ),
          });
          if (totpCode !== null && totpCode !== "") {
-            await doLogin(username, totpCode.trim());
+            await doLogin(username, totpCode);
            return;
          }
        }
--- a/src/mixins/scrollable-fade-mixin.ts
+++ b/src/mixins/scrollable-fade-mixin.ts
@@ -123,8 +123,8 @@ export const ScrollableFadeMixin = <T extends Constructor<LitElement>>(
          .fade-top,
          .fade-bottom {
            position: absolute;
-            left: 0;
-            right: 0;
+            left: var(--ha-space-0);
+            right: var(--ha-space-0);
            height: var(--ha-space-4);
            pointer-events: none;
            transition: opacity 180ms ease-in-out;
@@ -137,10 +137,10 @@ export const ScrollableFadeMixin = <T extends Constructor<LitElement>>(
            opacity: 0;
          }
          .fade-top {
-            top: 0;
+            top: var(--ha-space-0);
          }
          .fade-bottom {
-            bottom: 0;
+            bottom: var(--ha-space-0);
            transform: rotate(180deg);
          }

--- a/src/panels/config/application_credentials/dialog-add-application-credential.ts
+++ b/src/panels/config/application_credentials/dialog-add-application-credential.ts
@@ -5,15 +5,13 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
-import "../../../components/ha-dialog-footer";
+import "../../../components/ha-combo-box";
+import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-fade-in";
-import "../../../components/ha-generic-picker";
 import "../../../components/ha-markdown";
 import "../../../components/ha-password-field";
-import type { PickerComboBoxItem } from "../../../components/ha-picker-combo-box";
 import "../../../components/ha-spinner";
 import "../../../components/ha-textfield";
-import "../../../components/ha-wa-dialog";
 import type {
  ApplicationCredential,
  ApplicationCredentialsConfig,
@@ -61,10 +59,6 @@ export class DialogAddApplicationCredential extends LitElement {

  @state() private _config?: ApplicationCredentialsConfig;

-  @state() private _open = false;
-
-  @state() private _invalid = false;
-
  public showDialog(params: AddApplicationCredentialDialogParams) {
    this._params = params;
    this._domain = params.selectedDomain;
@@ -75,7 +69,6 @@ export class DialogAddApplicationCredential extends LitElement {
    this._clientSecret = "";
    this._error = undefined;
    this._loading = false;
-    this._open = true;
    this._fetchConfig();
  }

@@ -97,16 +90,16 @@ export class DialogAddApplicationCredential extends LitElement {
      ? domainToName(this.hass.localize, this._domain!)
      : "";
    return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
+      <ha-dialog
+        open
        @closed=${this._abortDialog}
-        .preventScrimClose=${!!this._domain ||
-        !!this._name ||
-        !!this._clientId ||
-        !!this._clientSecret}
-        .headerTitle=${this.hass.localize(
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize(
            "ui.panel.config.application_credentials.editor.caption"
+          )
        )}
      >
        ${!this._config
@@ -172,23 +165,20 @@ export class DialogAddApplicationCredential extends LitElement {
                  : nothing}
                ${this._params.selectedDomain
                  ? nothing
-                  : html`<ha-generic-picker
+                  : html`<ha-combo-box
                      name="domain"
                      .hass=${this.hass}
                      .label=${this.hass.localize(
                        "ui.panel.config.application_credentials.editor.domain"
                      )}
                      .value=${this._domain}
-                      .invalid=${this._invalid && !this._domain}
-                      .getItems=${this._getDomainItems}
+                      .items=${this._domains}
+                      item-id-path="id"
+                      item-value-path="id"
+                      item-label-path="name"
                      required
-                      .disabled=${!this._domains}
-                      .valueRenderer=${this._domainRenderer}
                      @value-changed=${this._handleDomainPicked}
-                      .errorMessage=${this.hass.localize(
-                        "ui.common.error_required"
-                      )}
-                    ></ha-generic-picker>`}
+                    ></ha-combo-box>`}
                ${this._description
                  ? html`<ha-markdown
                      breaks
@@ -202,10 +192,9 @@ export class DialogAddApplicationCredential extends LitElement {
                    "ui.panel.config.application_credentials.editor.name"
                  )}
                  .value=${this._name}
-                  .invalid=${this._invalid && !this._name}
                  required
                  @input=${this._handleValueChanged}
-                  .errorMessage=${this.hass.localize(
+                  .validationMessage=${this.hass.localize(
                    "ui.common.error_required"
                  )}
                  dialogInitialFocus
@@ -217,10 +206,9 @@ export class DialogAddApplicationCredential extends LitElement {
                    "ui.panel.config.application_credentials.editor.client_id"
                  )}
                  .value=${this._clientId}
-                  .invalid=${this._invalid && !this._clientId}
                  required
                  @input=${this._handleValueChanged}
-                  .errorMessage=${this.hass.localize(
+                  .validationMessage=${this.hass.localize(
                    "ui.common.error_required"
                  )}
                  dialogInitialFocus
@@ -235,10 +223,9 @@ export class DialogAddApplicationCredential extends LitElement {
                  )}
                  name="clientSecret"
                  .value=${this._clientSecret}
-                  .invalid=${this._invalid && !this._clientSecret}
                  required
                  @input=${this._handleValueChanged}
-                  .errorMessage=${this.hass.localize(
+                  .validationMessage=${this.hass.localize(
                    "ui.common.error_required"
                  )}
                  .helper=${this.hass.localize(
@@ -248,33 +235,30 @@ export class DialogAddApplicationCredential extends LitElement {
                ></ha-password-field>
              </div>

-              <ha-dialog-footer slot="footer">
              <ha-button
                appearance="plain"
                slot="secondaryAction"
-                  @click=${this._closeDialog}
+                @click=${this._abortDialog}
                .disabled=${this._loading}
              >
                ${this.hass.localize("ui.common.cancel")}
              </ha-button>
              <ha-button
                slot="primaryAction"
+                .disabled=${!this._domain ||
+                !this._clientId ||
+                !this._clientSecret}
                @click=${this._addApplicationCredential}
                .loading=${this._loading}
              >
                ${this.hass.localize(
                  "ui.panel.config.application_credentials.editor.add"
                )}
-                </ha-button>
-              </ha-dialog-footer>`}
-      </ha-wa-dialog>
+              </ha-button>`}
+      </ha-dialog>
    `;
  }

-  private _closeDialog() {
-    this._open = false;
-  }
-
  public closeDialog() {
    this._params = undefined;
    this._domains = undefined;
@@ -319,16 +303,9 @@ export class DialogAddApplicationCredential extends LitElement {

  private async _addApplicationCredential(ev) {
    ev.preventDefault();
-    if (
-      !this._domain ||
-      !this._name ||
-      !this._clientId ||
-      !this._clientSecret
-    ) {
-      this._invalid = true;
+    if (!this._domain || !this._clientId || !this._clientSecret) {
      return;
    }
-    this._invalid = false;

    this._loading = true;
    this._error = "";
@@ -351,20 +328,6 @@ export class DialogAddApplicationCredential extends LitElement {
    this.closeDialog();
  }

-  private _getDomainItems = (): PickerComboBoxItem[] =>
-    this._domains?.map((domain) => ({
-      id: domain.id,
-      primary: domain.name,
-      sorting_label: domain.name,
-    })) ?? [];
-
-  private _domainRenderer = (domainId: string) => {
-    const domain = this._domains?.find((d) => d.id === domainId);
-    return html`<span slot="headline"
-      >${domain ? domain.name : domainId}</span
-    >`;
-  };
-
  static get styles(): CSSResultGroup {
    return [
      haStyleDialog,
@@ -375,12 +338,15 @@ export class DialogAddApplicationCredential extends LitElement {
        }
        .row {
          display: flex;
-          padding: var(--ha-space-2) 0;
+          padding: 8px 0;
+        }
+        ha-combo-box {
+          display: block;
+          margin-bottom: 24px;
        }
        ha-textfield {
          display: block;
-          margin-top: var(--ha-space-4);
-          margin-bottom: var(--ha-space-4);
+          margin-bottom: 24px;
        }
        a {
          text-decoration: none;
@@ -389,8 +355,7 @@ export class DialogAddApplicationCredential extends LitElement {
          --mdc-icon-size: 16px;
        }
        ha-markdown {
-          margin-top: var(--ha-space-4);
-          margin-bottom: var(--ha-space-4);
+          margin-bottom: 16px;
        }
        ha-fade-in {
          display: flex;
--- a/src/panels/config/areas/dialog-floor-registry-detail.ts
+++ b/src/panels/config/areas/dialog-floor-registry-detail.ts
@@ -11,13 +11,12 @@ import "../../../components/ha-alert";
 import "../../../components/ha-aliases-editor";
 import "../../../components/ha-area-picker";
 import "../../../components/ha-button";
-import "../../../components/ha-dialog-footer";
-import "../../../components/ha-floor-icon";
+import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-icon-picker";
+import "../../../components/ha-picture-upload";
 import "../../../components/ha-settings-row";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-textfield";
-import "../../../components/ha-wa-dialog";
 import { updateAreaRegistryEntry } from "../../../data/area_registry";
 import type {
  FloorRegistryEntry,
@@ -50,8 +49,6 @@ class DialogFloorDetail extends LitElement {

  @state() private _removedAreas = new Set<string>();

-  @state() private _open = false;
-
  public showDialog(params: FloorRegistryDetailDialogParams): void {
    this._params = params;
    this._error = undefined;
@@ -63,14 +60,9 @@ class DialogFloorDetail extends LitElement {
    this._level = this._params.entry?.level ?? null;
    this._addedAreas.clear();
    this._removedAreas.clear();
-    this._open = true;
  }

  public closeDialog(): void {
-    this._open = false;
-  }
-
-  private _dialogClosed(): void {
    this._error = "";
    this._params = undefined;
    this._addedAreas.clear();
@@ -104,15 +96,18 @@ class DialogFloorDetail extends LitElement {
      return nothing;
    }
    const entry = this._params.entry;
+    const nameInvalid = !this._isNameValid();

    return html`
-      <ha-wa-dialog
-        .hass=${this.hass}
-        .open=${this._open}
-        header-title=${entry
+      <ha-dialog
+        open
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          entry
            ? this.hass.localize("ui.panel.config.floors.editor.update_floor")
-          : this.hass.localize("ui.panel.config.floors.editor.create_floor")}
-        @closed=${this._dialogClosed}
+            : this.hass.localize("ui.panel.config.floors.editor.create_floor")
+        )}
      >
        <div>
          ${this._error
@@ -133,7 +128,6 @@ class DialogFloorDetail extends LitElement {
              : nothing}

            <ha-textfield
-              autofocus
              .value=${this._name}
              @input=${this._nameChanged}
              .label=${this.hass.localize("ui.panel.config.floors.editor.name")}
@@ -141,6 +135,7 @@ class DialogFloorDetail extends LitElement {
                "ui.panel.config.floors.editor.name_required"
              )}
              required
+              dialogInitialFocus
            ></ha-textfield>

            <ha-textfield
@@ -235,7 +230,6 @@ class DialogFloorDetail extends LitElement {
            ></ha-aliases-editor>
          </div>
        </div>
-        <ha-dialog-footer slot="footer">
        <ha-button
          appearance="plain"
          slot="secondaryAction"
@@ -246,14 +240,13 @@ class DialogFloorDetail extends LitElement {
        <ha-button
          slot="primaryAction"
          @click=${this._updateEntry}
-            .disabled=${!!this._submitting}
+          .disabled=${nameInvalid || !!this._submitting}
        >
          ${entry
            ? this.hass.localize("ui.common.save")
            : this.hass.localize("ui.common.create")}
        </ha-button>
-        </ha-dialog-footer>
-      </ha-wa-dialog>
+      </ha-dialog>
    `;
  }

@@ -292,6 +285,10 @@ class DialogFloorDetail extends LitElement {
    this._addedAreas = new Set(this._addedAreas);
  }

+  private _isNameValid() {
+    return this._name.trim() !== "";
+  }
+
  private _nameChanged(ev) {
    this._error = undefined;
    this._name = ev.target.value;
@@ -308,16 +305,7 @@ class DialogFloorDetail extends LitElement {
  }

  private async _updateEntry() {
-    if (this._name.trim() === "") {
-      this._error = this.hass.localize(
-        "ui.panel.config.floors.editor.name_required"
-      );
-      return;
-    }
-    this._error = undefined;
-
    this._submitting = true;
-
    const create = !this._params!.entry;
    try {
      const values: FloorRegistryEntryMutableParams = {
@@ -356,13 +344,13 @@ class DialogFloorDetail extends LitElement {
      css`
        ha-textfield {
          display: block;
-          margin-bottom: var(--ha-space-4);
+          margin-bottom: 16px;
        }
        ha-floor-icon {
          color: var(--secondary-text-color);
        }
        ha-chip-set {
-          margin-bottom: var(--ha-space-2);
+          margin-bottom: 8px;
        }
      `,
    ];
--- a/src/panels/config/automation/add-automation-element-dialog.ts
+++ b/src/panels/config/automation/add-automation-element-dialog.ts
@@ -2016,12 +2016,12 @@ class DialogAddAutomationElement
          --ha-bottom-sheet-height: calc(100dvh - var(--ha-space-12));
          --ha-bottom-sheet-max-height: var(--ha-bottom-sheet-height);
          --ha-bottom-sheet-max-width: 888px;
-          --ha-bottom-sheet-padding: 0;
+          --ha-bottom-sheet-padding: var(--ha-space-0);
          --ha-bottom-sheet-surface-background: var(--card-background-color);
        }

        ha-wa-dialog {
-          --dialog-content-padding: 0;
+          --dialog-content-padding: var(--ha-space-0);
          --ha-dialog-min-height: min(
            800px,
            calc(
@@ -2045,7 +2045,7 @@ class DialogAddAutomationElement

        search-input {
          display: block;
-          margin: 0 var(--ha-space-4);
+          margin: var(--ha-space-0) var(--ha-space-4);
        }

        ha-button-toggle-group {
@@ -2079,7 +2079,7 @@ class DialogAddAutomationElement
        .groups {
          overflow: auto;
          flex: 4;
-          margin-inline-end: 0;
+          margin-inline-end: var(--ha-space-0);
        }

        ha-automation-add-from-target.hidden {
--- a/src/panels/config/automation/add-automation-element/ha-automation-add-items.ts
+++ b/src/panels/config/automation/add-automation-element/ha-automation-add-items.ts
@@ -213,8 +213,8 @@ export class HaAutomationAddItems extends LitElement {
      background-color: var(--ha-color-surface-default);
      align-items: center;
      color: var(--ha-color-text-secondary);
-      padding: 0;
-      margin: 0 var(--ha-space-4)
+      padding: var(--ha-space-0);
+      margin: var(--ha-space-0) var(--ha-space-4)
        max(var(--safe-area-inset-bottom), var(--ha-space-3));
      line-height: var(--ha-line-height-expanded);
      justify-content: center;
@@ -233,7 +233,7 @@ export class HaAutomationAddItems extends LitElement {
      --md-list-item-supporting-text-font: var(--ha-font-family-body);
      --ha-md-list-item-gap: var(--ha-space-3);
      gap: var(--ha-space-2);
-      padding: 0 var(--ha-space-4);
+      padding: var(--ha-space-0) var(--ha-space-4);
    }
    .items ha-md-list ha-md-list-item {
      border-radius: var(--ha-border-radius-lg);
--- a/src/panels/config/automation/add-automation-element/ha-automation-add-search.ts
+++ b/src/panels/config/automation/add-automation-element/ha-automation-add-search.ts
@@ -327,7 +327,7 @@ export class HaAutomationAddSearch extends LitElement {
                style=${styleMap({
                  width: "var(--ha-space-12)",
                  position: "absolute",
-                  top: "0",
+                  top: "var(--ha-space-0)",
                  left: rtl ? undefined : "var(--ha-space-1)",
                  right: rtl ? "var(--ha-space-1)" : undefined,
                  transform: rtl ? "scaleX(-1)" : "",
--- a/src/panels/config/automation/condition/types/ha-automation-condition-platform.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-platform.ts
@@ -256,7 +256,6 @@ export class HaPlatformCondition extends LitElement {
              : undefined}
            .placeholder=${dataField.default}
            .localizeValue=${this._localizeValueCallback}
-            .required=${dataField.required}
          ></ha-selector>
        </ha-settings-row>`
      : nothing;
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-platform.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-platform.ts
@@ -292,7 +292,6 @@ export class HaPlatformTrigger extends LitElement {
              : undefined}
            .placeholder=${dataField.default}
            .localizeValue=${this._localizeValueCallback}
-            .required=${dataField.required}
          ></ha-selector>
        </ha-settings-row>`
      : nothing;
--- a/src/panels/config/cloud/login/cloud-login.ts
+++ b/src/panels/config/cloud/login/cloud-login.ts
@@ -155,7 +155,7 @@ export class CloudLogin extends LitElement {
        ),
      });
      if (totpCode !== null && totpCode !== "") {
-        this._login(email, password, checkConnection, totpCode.trim());
+        this._login(email, password, checkConnection, totpCode);
        return "continue";
      }
    }
--- a/src/panels/config/integrations/dialog-add-integration.ts
+++ b/src/panels/config/integrations/dialog-add-integration.ts
@@ -462,7 +462,7 @@ class AddIntegrationDialog extends LitElement {
              style=${styleMap({
                width: `${this._width}px`,
                height: this._narrow
-                  ? "calc(100vh - 184px - var(--safe-area-inset-top, 0px) - var(--safe-area-inset-bottom, 0px))"
+                  ? "calc(100vh - 184px - var(--safe-area-inset-top, var(--ha-space-0)) - var(--safe-area-inset-bottom, var(--ha-space-0)))"
                  : "500px",
              })}
              @click=${this._integrationPicked}
--- a/src/panels/config/labs/dialog-labs-preview-feature-enable.ts
+++ b/src/panels/config/labs/dialog-labs-preview-feature-enable.ts
@@ -199,7 +199,7 @@ export class DialogLabsPreviewFeatureEnable

  static readonly styles = css`
    ha-wa-dialog {
-      --dialog-content-padding: 0;
+      --dialog-content-padding: var(--ha-space-0);
    }

    p {
--- a/src/panels/developer-tools/action/developer-tools-action.ts
+++ b/src/panels/developer-tools/action/developer-tools-action.ts
@@ -673,12 +673,12 @@ class HaPanelDevAction extends LitElement {
      haStyle,
      css`
        .content {
-          padding: var(--ha-space-4);
+          padding: 16px;
          max-width: 1200px;
          margin: auto;
        }
        .button-row {
-          padding: var(--ha-space-2) var(--ha-space-4);
+          padding: 8px 16px;
          border-top: 1px solid var(--divider-color);
          border-bottom: 1px solid var(--divider-color);
          background: var(--card-background-color);
@@ -698,8 +698,8 @@ class HaPanelDevAction extends LitElement {
          align-items: center;
        }
        .switch-mode-container .error {
-          margin-left: var(--ha-space-2);
-          margin-inline-start: var(--ha-space-2);
+          margin-left: 8px;
+          margin-inline-start: 8px;
          margin-inline-end: initial;
        }
        .attributes {
@@ -732,7 +732,7 @@ class HaPanelDevAction extends LitElement {
        }

        .attributes td {
-          padding: var(--ha-space-1);
+          padding: 4px;
          vertical-align: middle;
        }

@@ -748,7 +748,7 @@ class HaPanelDevAction extends LitElement {
        .response img {
          max-width: 100%;
          height: auto;
-          margin-top: var(--ha-space-6);
+          margin-top: 24px;
        }
      `,
    ];
--- a/src/panels/developer-tools/assist/developer-tools-assist.ts
+++ b/src/panels/developer-tools/assist/developer-tools-assist.ts
@@ -240,13 +240,13 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
      haStyle,
      css`
        .content {
-          padding: var(--ha-space-7) var(--ha-space-5) var(--ha-space-4);
+          padding: 28px 20px 16px;
          max-width: 1040px;
          margin: 0 auto;
        }
        .description {
          margin: 0;
-          margin-bottom: var(--ha-space-4);
+          margin-bottom: 16px;
        }
        ha-textarea {
          width: 100%;
@@ -255,18 +255,18 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
          text-align: right;
        }
        .form {
-          margin-bottom: var(--ha-space-4);
+          margin-bottom: 16px;
        }
        .result-toolbar {
          text-align: center;
-          margin-bottom: var(--ha-space-4);
+          margin-bottom: 16px;
        }
        .result {
-          margin-bottom: var(--ha-space-4);
+          margin-bottom: 16px;
        }
        .sentence {
          font-weight: var(--ha-font-weight-medium);
-          margin-bottom: var(--ha-space-2);
+          margin-bottom: 8px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
@@ -280,7 +280,7 @@ class HaPanelDevAssist extends SubscribeMixin(LitElement) {
        ha-code-editor,
        ha-alert {
          display: block;
-          margin-top: var(--ha-space-4);
+          margin-top: 16px;
        }
      `,
    ];
--- a/src/panels/developer-tools/debug/developer-tools-debug.ts
+++ b/src/panels/developer-tools/debug/developer-tools-debug.ts
@@ -1,20 +1,10 @@
 import { LitElement, css, html } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
 import "../../../components/ha-card";
-import "../../../components/ha-button";
-import "../../../components/entity/ha-entity-picker";
 import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import "./ha-debug-connection-row";
-import {
-  getStatisticMetadata,
-  validateStatistics,
-} from "../../../data/recorder";
-import { computeDomain } from "../../../common/entity/compute_domain";
-import { copyToClipboard } from "../../../common/util/copy-clipboard";
-import { showToast } from "../../../util/toast";
-import { getExtendedEntityRegistryEntry } from "../../../data/entity/entity_registry";

@customElement("developer-tools-debug")
 class HaPanelDevDebug extends SubscribeMixin(LitElement) {
@@ -22,8 +12,6 @@ class HaPanelDevDebug extends SubscribeMixin(LitElement) {

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

-  @state() private _entityId?: string;
-
  protected render() {
    return html`
      <div class="content">
@@ -37,83 +25,15 @@ class HaPanelDevDebug extends SubscribeMixin(LitElement) {
            .narrow=${this.narrow}
          ></ha-debug-connection-row>
        </ha-card>
-        <ha-card
-          .header=${this.hass.localize(
-            "ui.panel.developer-tools.tabs.debug.entity_diagnostic.title"
-          )}
-        >
-          <div class="card-content">
-            <ha-entity-picker
-              .hass=${this.hass}
-              .helper=${this.hass.localize(
-                "ui.panel.developer-tools.tabs.debug.entity_diagnostic.description"
-              )}
-              @value-changed=${this._entityPicked}
-            ></ha-entity-picker>
-          </div>
-          <div class="card-actions">
-            <ha-button
-              @click=${this._copyEntityDiagnostic}
-              appearance="filled"
-              .disabled=${!this._entityId}
-              >${this.hass.localize(
-                "ui.panel.developer-tools.tabs.debug.entity_diagnostic.copy_to_clipboard"
-              )}</ha-button
-            >
-          </div>
-        </ha-card>
      </div>
    `;
  }

-  private async _copyEntityDiagnostic() {
-    const id = this._entityId!;
-    let statistic;
-    if (computeDomain(id) === "sensor") {
-      const [metadata, issues] = await Promise.all([
-        getStatisticMetadata(this.hass, [id]),
-        validateStatistics(this.hass),
-      ]);
-      const issue = issues[id];
-      if (metadata || issue) {
-        statistic = {
-          metadata,
-          issue,
-        };
-      }
-    }
-
-    const entity = await getExtendedEntityRegistryEntry(this.hass, id);
-    const device = entity?.device_id && this.hass.devices[entity.device_id];
-
-    const data = {
-      state: this.hass.states[id],
-      entity,
-      device,
-      statistic,
-    };
-    const json = JSON.stringify(data, null, 2);
-    await copyToClipboard(json);
-    showToast(this, {
-      message: this.hass.localize("ui.common.copied_clipboard"),
-    });
-  }
-
-  private _entityPicked(ev) {
-    this._entityId = ev.detail.value;
-  }
-
  static styles = [
    haStyle,
    css`
-      ha-card {
-        margin-bottom: var(--ha-space-4);
-      }
-      .card-content {
-        padding: var(--ha-space-2);
-      }
      .content {
-        padding: var(--ha-space-7) var(--ha-space-5) var(--ha-space-4);
+        padding: 28px 20px 16px;
        display: block;
        max-width: 600px;
        margin: 0 auto;
--- a/src/panels/developer-tools/event/developer-tools-event.ts
+++ b/src/panels/developer-tools/event/developer-tools-event.ts
@@ -148,7 +148,7 @@ class HaPanelDevEvent extends LitElement {
      css`
        .content {
          gap: var(--ha-space-4);
-          padding: var(--ha-space-4);
+          padding: 16px;
          max-width: 1200px;
          margin: auto;
        }
@@ -169,7 +169,7 @@ class HaPanelDevEvent extends LitElement {
        }

        ha-button {
-          margin-top: var(--ha-space-2);
+          margin-top: 8px;
        }

        ha-textfield {
@@ -178,7 +178,7 @@ class HaPanelDevEvent extends LitElement {

        event-subscribe-card {
          display: block;
-          margin-top: var(--ha-space-4);
+          margin-top: 16px;
          direction: var(--direction);
        }

--- a/src/panels/developer-tools/event/event-subscribe-card.ts
+++ b/src/panels/developer-tools/event/event-subscribe-card.ts
@@ -160,16 +160,16 @@ class EventSubscribeCard extends LitElement {
  static styles = css`
    ha-textfield {
      display: block;
-      margin-bottom: var(--ha-space-4);
+      margin-bottom: 16px;
    }
    .error-message {
-      margin-top: var(--ha-space-2);
+      margin-top: 8px;
    }
    .event {
      border-top: 1px solid var(--divider-color);
-      padding-top: var(--ha-space-2);
-      padding-bottom: var(--ha-space-2);
-      margin: var(--ha-space-4) 0;
+      padding-top: 8px;
+      padding-bottom: 8px;
+      margin: 16px 0;
    }
    .event:last-child {
      border-bottom: 0;
@@ -179,7 +179,7 @@ class EventSubscribeCard extends LitElement {
      font-family: var(--ha-font-family-code);
    }
    ha-card {
-      margin-bottom: var(--ha-space-1);
+      margin-bottom: 5px;
    }
  `;
 }
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -176,12 +176,12 @@ class PanelDeveloperTools extends LitElement {
          display: flex;
          align-items: center;
          font-size: var(--ha-font-size-xl);
-          padding: var(--ha-space-2) var(--ha-space-3);
+          padding: 8px 12px;
          font-weight: var(--ha-font-weight-normal);
          box-sizing: border-box;
        }
        :host([narrow]) .toolbar {
-          padding: var(--ha-space-1);
+          padding: 4px;
        }
        .main-title {
          margin: var(--margin-title);
--- a/src/panels/developer-tools/state/developer-tools-state-renderer.ts
+++ b/src/panels/developer-tools/state/developer-tools-state-renderer.ts
@@ -298,7 +298,7 @@ class HaPanelDevStateRenderer extends LitElement {
        }

        .cell .padded {
-          padding: var(--ha-space-1);
+          padding: 4px;
        }

        .entities .row .header:nth-child(1),
@@ -328,11 +328,11 @@ class HaPanelDevStateRenderer extends LitElement {

        .entities ha-svg-icon {
          --mdc-icon-size: 20px;
-          padding: var(--ha-space-1);
+          padding: 4px;
          cursor: pointer;
          flex-shrink: 0;
-          margin-right: var(--ha-space-2);
-          margin-inline-end: var(--ha-space-2);
+          margin-right: 8px;
+          margin-inline-end: 8px;
          margin-inline-start: initial;
        }

--- a/src/panels/developer-tools/state/developer-tools-state.ts
+++ b/src/panels/developer-tools/state/developer-tools-state.ts
@@ -507,7 +507,7 @@ class HaPanelDevState extends LitElement {
          -webkit-user-select: initial;
          -moz-user-select: initial;
          display: block;
-          padding: var(--ha-space-4);
+          padding: 16px;
        }

        :host search-input {
@@ -525,7 +525,7 @@ class HaPanelDevState extends LitElement {
        }

        .heading ha-formfield {
-          margin-right: var(--ha-space-2);
+          margin-right: 8px;
          --mdc-typography-body2-font-size: var(--ha-font-size-m);
          --mdc-typography-body2-font-weight: var(--ha-font-weight-medium);
        }
@@ -534,9 +534,9 @@ class HaPanelDevState extends LitElement {
          display: block;
          font-family: var(--ha-font-family-code);
          color: var(--secondary-text-color);
-          padding: 0 var(--ha-space-2);
-          margin-bottom: var(--ha-space-2);
-          margin-top: var(--ha-space-1);
+          padding: 0 8px;
+          margin-bottom: 8px;
+          margin-top: 4px;
          font-size: var(--ha-font-size-s);
          --mdc-icon-size: 14px;
          --mdc-icon-button-size: 24px;
@@ -557,15 +557,15 @@ class HaPanelDevState extends LitElement {
        }

        .state-input {
-          margin-top: var(--ha-space-4);
+          margin-top: 16px;
        }

        ha-expansion-panel {
-          margin: 0 var(--ha-space-2) var(--ha-space-4);
+          margin: 0 8px 16px;
        }

        ha-expansion-panel p {
-          padding: 0 var(--ha-space-2);
+          padding: 0 8px;
        }

        .inputs {
@@ -574,12 +574,12 @@ class HaPanelDevState extends LitElement {
        }

        .info {
-          padding: 0 var(--ha-space-4);
+          padding: 0 16px;
        }

        .button-row {
          display: flex;
-          margin: var(--ha-space-2) 0;
+          margin: 8px 0;
          align-items: center;
          gap: var(--ha-space-2);
        }
--- a/src/panels/developer-tools/statistics/developer-tools-statistics.ts
+++ b/src/panels/developer-tools/statistics/developer-tools-statistics.ts
@@ -732,7 +732,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
          height: 56px;
          width: 100%;
          justify-content: space-between;
-          padding: 0 var(--ha-space-4);
+          padding: 0 16px;
          gap: var(--ha-space-4);
          box-sizing: border-box;
          background: var(--primary-background-color);
@@ -751,7 +751,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
          display: flex;
          align-items: center;
          gap: var(--ha-space-4);
-          padding: 0 var(--ha-space-4);
+          padding: 0 16px;
          overflow-x: scroll;
          -ms-overflow-style: none;
          scrollbar-width: none;
@@ -763,7 +763,7 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
          display: flex;
          align-items: center;
          justify-content: space-between;
-          padding: var(--ha-space-2) var(--ha-space-3);
+          padding: 8px 12px;
          box-sizing: border-box;
          font-size: var(--ha-font-size-m);
          --ha-assist-chip-container-color: var(--card-background-color);
@@ -776,8 +776,8 @@ class HaPanelDevStatistics extends KeyboardShortcutMixin(LitElement) {
        }

        .selection-controls p {
-          margin-left: var(--ha-space-2);
-          margin-inline-start: var(--ha-space-2);
+          margin-left: 8px;
+          margin-inline-start: 8px;
          margin-inline-end: initial;
        }

--- a/Show More
+++ b/Show More