Add iOS-specific autofocus handling in HaWaDialog

* Introduce allowCustomValue and remove usage

* Review

* Fix secondary title

build-scripts/gulp/gallery.js

@@ -3,9 +3,6 @@ import { glob } from "glob";
 import gulp from "gulp";
 import yaml from "js-yaml";
 import { marked } from "marked";
-import ts from "typescript";
-import { create } from "@custom-elements-manifest/analyzer";
-import { litPlugin } from "@custom-elements-manifest/analyzer/src/features/framework-plugins/lit/lit.js";
 import path from "path";
 import paths from "../paths.cjs";
 import "./clean.js";
@@ -16,28 +13,6 @@ import "./service-worker.js";
 import "./translations.js";
 import "./rspack.js";
 
-gulp.task("generate-component-docs", async function generateComponentDocs() {
-  const filePaths = ["src/components/ha-alert.ts"];
-
-  const modules = await Promise.all(
-    filePaths.map(async (file) => {
-      const filePath = path.resolve(file);
-      console.log(`Reading ${file} -> ${filePath}`);
-      const source = fs.readFileSync(filePath).toString();
-
-      return ts.createSourceFile(file, source, ts.ScriptTarget.ES2015, true);
-    })
-  );
-
-  const manifest = create({
-    modules,
-    plugins: litPlugin(),
-    context: { dev: true },
-  });
-
-  console.log(manifest);
-});
-
 gulp.task("gather-gallery-pages", async function gatherPages() {
   const pageDir = path.resolve(paths.gallery_dir, "src/pages");
   const files = await glob(path.resolve(pageDir, "**/*"));

custom-elements.json

@@ -1,186 +0,0 @@
-{
-  "schemaVersion": "1.0.0",
-  "readme": "",
-  "modules": [
-    {
-      "kind": "javascript-module",
-      "path": "src/components/ha-alert.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A custom alert component for displaying messages with various alert types.",
-          "name": "HaAlert",
-          "cssProperties": [
-            {
-              "description": "The color used for \"info\" alerts.",
-              "name": "--info-color"
-            },
-            {
-              "description": "The color used for \"warning\" alerts.",
-              "name": "--warning-color"
-            },
-            {
-              "description": "The color used for \"error\" alerts.",
-              "name": "--error-color"
-            },
-            {
-              "description": "The color used for \"success\" alerts.",
-              "name": "--success-color"
-            },
-            {
-              "description": "The primary text color used in the alert.",
-              "name": "--primary-text-color"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The container for the alert.",
-              "name": "issue-type"
-            },
-            {
-              "description": "The container for the alert icon.",
-              "name": "icon"
-            },
-            {
-              "description": "The container for the alert content.",
-              "name": "content"
-            },
-            {
-              "description": "The container for the alert actions.",
-              "name": "action"
-            },
-            {
-              "description": "The container for the alert title.",
-              "name": "title"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The main content of the alert.",
-              "name": ""
-            },
-            {
-              "description": "Slot for providing a custom icon for the alert.",
-              "name": "icon"
-            },
-            {
-              "description": "Slot for providing custom actions or buttons for the alert.",
-              "name": "action"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "privacy": "public",
-              "default": "\"\"",
-              "description": "The title of the alert. Defaults to an empty string.",
-              "attribute": "title"
-            },
-            {
-              "kind": "field",
-              "name": "alertType",
-              "type": {
-                "text": "\"info\" | \"warning\" | \"error\" | \"success\""
-              },
-              "privacy": "public",
-              "default": "\"info\"",
-              "description": "The type of alert to display. Defaults to \"info\". Determines the styling and icon used.",
-              "attribute": "alert-type"
-            },
-            {
-              "kind": "field",
-              "name": "dismissable",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the alert can be dismissed. Defaults to `false`. If `true`, a dismiss button is displayed.",
-              "attribute": "dismissable"
-            },
-            {
-              "kind": "field",
-              "name": "narrow",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "public",
-              "default": "false",
-              "description": "Whether the alert should use a narrow layout. Defaults to `false`.",
-              "attribute": "narrow"
-            },
-            {
-              "kind": "method",
-              "name": "_dismissClicked",
-              "privacy": "private"
-            }
-          ],
-          "events": [
-            {
-              "description": "Fired when the dismiss button is clicked.",
-              "name": "alert-dismissed-clicked"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\"",
-              "description": "The title of the alert. Defaults to an empty string.",
-              "fieldName": "title"
-            },
-            {
-              "name": "alert-type",
-              "type": {
-                "text": "\"info\" | \"warning\" | \"error\" | \"success\""
-              },
-              "default": "\"info\"",
-              "description": "The type of alert to display. Defaults to \"info\". Determines the styling and icon used.",
-              "fieldName": "alertType"
-            },
-            {
-              "name": "dismissable",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the alert can be dismissed. Defaults to `false`. If `true`, a dismiss button is displayed.",
-              "fieldName": "dismissable"
-            },
-            {
-              "name": "narrow",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Whether the alert should use a narrow layout. Defaults to `false`.",
-              "fieldName": "narrow"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "ha-alert",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "custom-element-definition",
-          "name": "ha-alert",
-          "declaration": {
-            "name": "HaAlert",
-            "module": "src/components/ha-alert.ts"
-          }
-        }
-      ]
-    }
-  ]
-}

package.json

@@ -20,9 +20,7 @@
     "prepack": "pinst --disable",
     "postpack": "pinst --enable",
     "test": "vitest run --config test/vitest.config.ts",
-    "test:coverage": "vitest run --config test/vitest.config.ts --coverage",
-    "analyze": "cem analyze --litelement --globs \"src/components/ha-alert.ts\" --dev",
-    "doc": "gulp generate-component-docs"
+    "test:coverage": "vitest run --config test/vitest.config.ts --coverage"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
@@ -155,8 +153,6 @@
     "@babel/plugin-transform-runtime": "7.28.5",
     "@babel/preset-env": "7.28.5",
     "@bundle-stats/plugin-webpack-filter": "4.21.7",
-    "@custom-elements-manifest/analyzer": "0.10.4",
-    "@custom-elements-manifest/to-markdown": "0.1.0",
     "@lokalise/node-api": "15.4.0",
     "@octokit/auth-oauth-device": "8.0.3",
     "@octokit/plugin-retry": "8.0.3",
@@ -222,7 +218,7 @@
     "ts-lit-plugin": "2.0.2",
     "typescript": "5.9.3",
     "typescript-eslint": "8.49.0",
-    "vite-tsconfig-paths": "5.1.4",
+    "vite-tsconfig-paths": "6.0.1",
     "vitest": "4.0.15",
     "webpack-stats-plugin": "1.1.3",
     "webpackbar": "7.0.0",

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

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

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

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

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

@@ -277,12 +277,13 @@ export class HaEntityPicker extends LitElement {
         .disabled=${this.disabled}
         .autofocus=${this.autofocus}
         .allowCustomValue=${this.allowCustomEntity}
+        .required=${this.required}
         .label=${this.label}
+        .placeholder=${placeholder}
         .helper=${this.helper}
+        .value=${this.addButton ? undefined : this.value}
         .searchLabel=${this.searchLabel}
         .notFoundLabel=${this._notFoundLabel}
-        .placeholder=${placeholder}
-        .value=${this.addButton ? undefined : this.value}
         .rowRenderer=${this._rowRenderer}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
@@ -290,6 +291,7 @@ export class HaEntityPicker extends LitElement {
         .searchFn=${this._searchFn}
         .valueRenderer=${this._valueRenderer}
         .searchKeys=${entityComboBoxKeys}
+        use-top-label
         .addButtonLabel=${this.addButton
           ? this.hass.localize("ui.components.entity.entity-picker.add")
           : undefined}

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

@@ -471,14 +471,14 @@ export class HaStatisticPicker extends LitElement {
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .allowCustomValue=${this.allowCustomEntity}
-        .label=${this.label}
         .disabled=${this.disabled}
+        .label=${this.label}
+        .placeholder=${placeholder}
+        .value=${this.value}
         .notFoundLabel=${this._notFoundLabel}
         .emptyLabel=${this.hass.localize(
           "ui.components.statistic-picker.no_statistics"
         )}
-        .placeholder=${placeholder}
-        .value=${this.value}
         .rowRenderer=${this._rowRenderer}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}

src/components/ha-addon-picker.ts

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

src/components/ha-alert.ts

@@ -25,36 +25,6 @@ declare global {
   }
 }
 
-/**
- * A custom alert component for displaying messages with various alert types.
- * 
- * @element ha-alert
- * 
- * @property {string} title - The title of the alert. Defaults to an empty string.
- * @property {"info" | "warning" | "error" | "success"} alertType - The type of alert to display.
- * Defaults to "info". Determines the styling and icon used.
- * @property {boolean} dismissable - Whether the alert can be dismissed. Defaults to `false`.
- * If `true`, a dismiss button is displayed.
- * @property {boolean} narrow - Whether the alert should use a narrow layout. Defaults to `false`.
- * 
- * @slot - The main content of the alert.
- * @slot icon - Slot for providing a custom icon for the alert.
- * @slot action - Slot for providing custom actions or buttons for the alert.
- * 
- * @fires alert-dismissed-clicked - Fired when the dismiss button is clicked.
- * 
- * @csspart issue-type - The container for the alert.
- * @csspart icon - The container for the alert icon.
- * @csspart content - The container for the alert content.
- * @csspart action - The container for the alert actions.
- * @csspart title - The container for the alert title.
- * 
- * @cssprop --info-color - The color used for "info" alerts.
- * @cssprop --warning-color - The color used for "warning" alerts.
- * @cssprop --error-color - The color used for "error" alerts.
- * @cssprop --success-color - The color used for "success" alerts.
- * @cssprop --primary-text-color - The primary text color used in the alert.
- */
 @customElement("ha-alert")
 class HaAlert extends LitElement {
   // eslint-disable-next-line lit/no-native-attributes
@@ -65,7 +35,7 @@ class HaAlert extends LitElement {
     | "warning"
     | "error"
     | "success" = "info";
-    
+
   @property({ type: Boolean }) public dismissable = false;
 
   @property({ type: Boolean }) public narrow = false;

src/components/ha-area-picker.ts

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

src/components/ha-color-picker.ts

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

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

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

src/components/ha-floor-picker.ts

@@ -389,14 +389,14 @@ export class HaFloorPicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         .autofocus=${this.autofocus}
+        .disabled=${this.disabled}
         .label=${this.label}
         .helper=${this.helper}
-        .disabled=${this.disabled}
+        .placeholder=${placeholder}
         .notFoundLabel=${this._notFoundLabel}
         .emptyLabel=${this.hass.localize(
           "ui.components.floor-picker.no_floors"
         )}
-        .placeholder=${placeholder}
         .value=${this.value}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}

src/components/ha-generic-picker.ts

@@ -7,8 +7,10 @@ import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { tinykeys } from "tinykeys";
 import { fireEvent } from "../common/dom/fire_event";
+import { PickerMixin } from "../mixins/picker-mixin";
 import type { FuseWeightedKey } from "../resources/fuseMultiTerm";
 import type { HomeAssistant } from "../types";
+import { isIosApp } from "../util/is_ios";
 import "./ha-bottom-sheet";
 import "./ha-button";
 import "./ha-combo-box-item";
@@ -20,39 +22,18 @@ import type {
   PickerComboBoxSearchFn,
 } from "./ha-picker-combo-box";
 import "./ha-picker-field";
-import type { PickerValueRenderer } from "./ha-picker-field";
 import "./ha-svg-icon";
 
 @customElement("ha-generic-picker")
-export class HaGenericPicker extends LitElement {
+export class HaGenericPicker extends PickerMixin(LitElement) {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = false;
-
   @property({ type: Boolean, attribute: "allow-custom-value" })
   public allowCustomValue;
 
-  @property() public value?: string;
-
-  @property() public icon?: string;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property() public placeholder?: string;
-
   @property({ type: String, attribute: "search-label" })
   public searchLabel?: string;
 
-  @property({ attribute: "hide-clear-icon", type: Boolean })
-  public hideClearIcon = false;
-
-  @property({ attribute: "show-label", type: Boolean })
-  public showLabel = false;
-
   /** To prevent lags, getItems needs to be memoized */
   @property({ attribute: false })
   public getItems!: (
@@ -66,9 +47,6 @@ export class HaGenericPicker extends LitElement {
   @property({ attribute: false })
   public rowRenderer?: RenderItemFunction<PickerComboBoxItem>;
 
-  @property({ attribute: false })
-  public valueRenderer?: PickerValueRenderer;
-
   @property({ attribute: false })
   public searchFn?: PickerComboBoxSearchFn<PickerComboBoxItem>;
 
@@ -118,7 +96,11 @@ export class HaGenericPicker extends LitElement {
 
   @property({ attribute: "selected-section" }) public selectedSection?: string;
 
-  @property({ attribute: "unknown-item-text" }) public unknownItemText?: string;
+  @property({ type: Boolean, attribute: "use-top-label" })
+  public useTopLabel = false;
+
+  @property({ attribute: "custom-value-label" })
+  public customValueLabel?: string;
 
   @query(".container") private _containerElement?: HTMLDivElement;
 
@@ -149,11 +131,13 @@ export class HaGenericPicker extends LitElement {
   private _unsubscribeTinyKeys?: () => void;
 
   protected render() {
-    return html`
-      ${this.label
-        ? html`<label ?disabled=${this.disabled}>${this.label}</label>`
-        : nothing}
-      <div class="container">
+    // Only show label if it's not a top label and there is a value.
+    const label = this.useTopLabel && this.value ? undefined : this.label;
+
+    return html`<div class="container">
+        ${this.useTopLabel && this.label
+          ? html`<label ?disabled=${this.disabled}>${this.label}</label>`
+          : nothing}
         <div id="picker">
           <slot name="field">
             ${this.addButtonLabel && !this.value
@@ -173,14 +157,20 @@ export class HaGenericPicker extends LitElement {
                   type="button"
                   class=${this._opened ? "opened" : ""}
                   compact
-                  .unknown=${this._unknownValue(this.value, this.getItems())}
+                  .unknown=${this._unknownValue(
+                    this.allowCustomValue,
+                    this.value,
+                    this.getItems()
+                  )}
                   .unknownItemText=${this.unknownItemText}
                   aria-label=${ifDefined(this.label)}
                   @click=${this.open}
                   @clear=${this._clear}
                   .icon=${this.icon}
-                  .showLabel=${this.showLabel}
+                  .image=${this.image}
+                  .label=${label}
                   .placeholder=${this.placeholder}
+                  .helper=${this.helper}
                   .value=${this.value}
                   .valueRenderer=${this.valueRenderer}
                   .required=${this.required}
@@ -188,6 +178,7 @@ export class HaGenericPicker extends LitElement {
                   .invalid=${this.invalid}
                   .hideClearIcon=${this.hideClearIcon}
                 >
+                  <slot name="start"></slot>
                 </ha-picker-field>`}
           </slot>
         </div>
@@ -226,8 +217,7 @@ export class HaGenericPicker extends LitElement {
               </ha-bottom-sheet>`
             : nothing}
       </div>
-      ${this._renderHelper()}
-    `;
+      ${this._renderHelper()}`;
   }
 
   private _renderComboBox(dialogMode = false) {
@@ -236,6 +226,7 @@ export class HaGenericPicker extends LitElement {
     }
     return html`
       <ha-picker-combo-box
+        id="combo-box"
         .hass=${this.hass}
         .allowCustomValue=${this.allowCustomValue}
         .label=${this.searchLabel}
@@ -252,13 +243,24 @@ export class HaGenericPicker extends LitElement {
         .sectionTitleFunction=${this.sectionTitleFunction}
         .selectedSection=${this.selectedSection}
         .searchKeys=${this.searchKeys}
+        .customValueLabel=${this.customValueLabel}
       ></ha-picker-combo-box>
     `;
   }
 
   private _unknownValue = memoizeOne(
-    (value?: string, items?: (PickerComboBoxItem | string)[]) => {
-      if (value === undefined || value === null || value === "" || !items) {
+    (
+      allowCustomValue: boolean,
+      value?: string,
+      items?: (PickerComboBoxItem | string)[]
+    ) => {
+      if (
+        allowCustomValue ||
+        value === undefined ||
+        value === null ||
+        value === "" ||
+        !items
+      ) {
         return false;
       }
 
@@ -284,6 +286,15 @@ export class HaGenericPicker extends LitElement {
   private _dialogOpened = () => {
     this._opened = true;
     requestAnimationFrame(() => {
+      if (this.hass && isIosApp(this.hass)) {
+        this.hass.auth.external!.fireMessage({
+          type: "focus_element",
+          payload: {
+            element_id: "combo-box",
+          },
+        });
+        return;
+      }
       this._comboBox?.focus();
     });
   };
@@ -310,7 +321,7 @@ export class HaGenericPicker extends LitElement {
     this._newValue = value;
   }
 
-  private _clear(e) {
+  private _clear(e: CustomEvent) {
     e.stopPropagation();
     this._setValue(undefined);
   }

src/components/ha-icon-picker.ts

@@ -113,7 +113,6 @@ export class HaIconPicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         allow-custom-value
-        show-label
         .getItems=${this._getIconPickerItems}
         .helper=${this.helper}
         .disabled=${this.disabled}
@@ -122,7 +121,7 @@ export class HaIconPicker extends LitElement {
         .invalid=${this.invalid}
         .rowRenderer=${rowRenderer}
         .icon=${this._icon}
-        .placeholder=${this.label}
+        .label=${this.label}
         .value=${this._value}
         .searchFn=${this._filterIcons}
         .notFoundLabel=${this.hass?.localize(
@@ -131,6 +130,7 @@ export class HaIconPicker extends LitElement {
         popover-placement="bottom-start"
         @value-changed=${this._valueChanged}
       >
+        <slot name="start"></slot>
       </ha-generic-picker>
     `;
   }

src/components/ha-language-picker.ts

@@ -116,6 +116,11 @@ export class HaLanguagePicker extends LitElement {
     > `;
 
   protected render() {
+    const label =
+      this.label ??
+      (this.hass?.localize("ui.components.language-picker.language") ||
+        "Language");
+
     const value =
       this.value ??
       (this.required && !this.disabled ? this._getItems()[0].id : this.value);
@@ -129,10 +134,7 @@ export class HaLanguagePicker extends LitElement {
         .emptyLabel=${this.hass?.localize(
           "ui.components.language-picker.no_languages"
         ) || "No languages available"}
-        .placeholder=${this.label ??
-        (this.hass?.localize("ui.components.language-picker.language") ||
-          "Language")}
-        show-label
+        .label=${label}
         .value=${value}
         .valueRenderer=${this._valueRenderer}
         .disabled=${this.disabled}

src/components/ha-navigation-picker.ts

@@ -1,55 +1,17 @@
-import type { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
-import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { titleCase } from "../common/string/title-case";
 import { fetchConfig } from "../data/lovelace/config/types";
-import type { LovelaceViewRawConfig } from "../data/lovelace/config/view";
 import { getPanelIcon, getPanelTitle } from "../data/panel";
-import type { HomeAssistant, PanelInfo, ValueChangedEvent } from "../types";
-import "./ha-combo-box";
-import type { HaComboBox } from "./ha-combo-box";
-import "./ha-combo-box-item";
+import type { HomeAssistant, ValueChangedEvent } from "../types";
+import "./ha-generic-picker";
 import "./ha-icon";
-
-interface NavigationItem {
-  path: string;
-  icon: string;
-  title: string;
-}
-
-const DEFAULT_ITEMS: NavigationItem[] = [];
-
-const rowRenderer: ComboBoxLitRenderer<NavigationItem> = (item) => html`
-  <ha-combo-box-item type="button">
-    <ha-icon .icon=${item.icon} slot="start"></ha-icon>
-    <span slot="headline">${item.title || item.path}</span>
-    ${item.title
-      ? html`<span slot="supporting-text">${item.path}</span>`
-      : nothing}
-  </ha-combo-box-item>
-`;
-
-const createViewNavigationItem = (
-  prefix: string,
-  view: LovelaceViewRawConfig,
-  index: number
-) => ({
-  path: `/${prefix}/${view.path ?? index}`,
-  icon: view.icon ?? "mdi:view-compact",
-  title: view.title ?? (view.path ? titleCase(view.path) : `${index}`),
-});
-
-const createPanelNavigationItem = (hass: HomeAssistant, panel: PanelInfo) => ({
-  path: `/${panel.url_path}`,
-  icon: getPanelIcon(panel) || "mdi:view-dashboard",
-  title: getPanelTitle(hass, panel) || "",
-});
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
 
 @customElement("ha-navigation-picker")
 export class HaNavigationPicker extends LitElement {
-  @property({ attribute: false }) public hass?: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public label?: string;
 
@@ -61,46 +23,51 @@ export class HaNavigationPicker extends LitElement {
 
   @property({ type: Boolean }) public required = false;
 
-  @state() private _opened = false;
+  @state() private _loading = true;
 
-  private navigationItemsLoaded = false;
+  protected firstUpdated() {
+    this._loadNavigationItems();
+  }
 
-  private navigationItems: NavigationItem[] = DEFAULT_ITEMS;
+  private _navigationItems: PickerComboBoxItem[] = [];
 
-  @query("ha-combo-box", true) private comboBox!: HaComboBox;
-
-  protected render(): TemplateResult {
+  protected render() {
     return html`
-      <ha-combo-box
+      <ha-generic-picker
         .hass=${this.hass}
-        item-value-path="path"
-        item-label-path="path"
-        .value=${this._value}
+        .value=${this._loading ? undefined : this.value}
         allow-custom-value
-        .filteredItems=${this.navigationItems}
-        .label=${this.label}
+        .placeholder=${this.label}
         .helper=${this.helper}
-        .disabled=${this.disabled}
+        .disabled=${this._loading || this.disabled}
         .required=${this.required}
-        .renderer=${rowRenderer}
-        @opened-changed=${this._openedChanged}
+        .getItems=${this._getItems}
+        .valueRenderer=${this._valueRenderer}
+        .customValueLabel=${this.hass.localize(
+          "ui.components.navigation-picker.add_custom_path"
+        )}
         @value-changed=${this._valueChanged}
-        @filter-changed=${this._filterChanged}
       >
-      </ha-combo-box>
+      </ha-generic-picker>
     `;
   }
 
-  private async _openedChanged(ev: ValueChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-    if (this._opened && !this.navigationItemsLoaded) {
-      this._loadNavigationItems();
-    }
-  }
+  private _valueRenderer = (itemId: string) => {
+    const item = this._navigationItems.find((navItem) => navItem.id === itemId);
+    return html`
+      ${item?.icon
+        ? html`<ha-icon slot="start" .icon=${item.icon}></ha-icon>`
+        : nothing}
+      <span slot="headline">${item?.primary || itemId}</span>
+      ${item?.primary
+        ? html`<span slot="supporting-text">${itemId}</span>`
+        : nothing}
+    `;
+  };
+
+  private _getItems = () => this._navigationItems;
 
   private async _loadNavigationItems() {
-    this.navigationItemsLoaded = true;
-
     const panels = Object.entries(this.hass!.panels).map(([id, panel]) => ({
       id,
       ...panel,
@@ -124,27 +91,47 @@ export class HaNavigationPicker extends LitElement {
 
     const panelViewConfig = new Map(viewConfigs);
 
-    this.navigationItems = [];
+    this._navigationItems = [];
 
     for (const panel of panels) {
-      this.navigationItems.push(createPanelNavigationItem(this.hass!, panel));
+      const path = `/${panel.url_path}`;
+      const panelTitle = getPanelTitle(this.hass, panel);
+      const primary = panelTitle || path;
+      this._navigationItems.push({
+        id: path,
+        primary,
+        secondary: panelTitle ? path : undefined,
+        icon: getPanelIcon(panel) || "mdi:view-dashboard",
+        sorting_label: [
+          primary.startsWith("/") ? `zzz${primary}` : primary,
+          path,
+        ]
+          .filter(Boolean)
+          .join("_"),
+      });
 
       const config = panelViewConfig.get(panel.id);
 
       if (!config || !("views" in config)) continue;
 
-      config.views.forEach((view, index) =>
-        this.navigationItems.push(
-          createViewNavigationItem(panel.url_path, view, index)
-        )
-      );
+      config.views.forEach((view, index) => {
+        const viewPath = `/${panel.url_path}/${view.path ?? index}`;
+        const viewPrimary =
+          view.title ?? (view.path ? titleCase(view.path) : `${index}`);
+        this._navigationItems.push({
+          id: viewPath,
+          secondary: viewPath,
+          icon: view.icon ?? "mdi:view-compact",
+          primary: viewPrimary,
+          sorting_label: [
+            viewPrimary.startsWith("/") ? `zzz${viewPrimary}` : viewPrimary,
+            viewPath,
+          ].join("_"),
+        });
+      });
     }
 
-    this.comboBox.filteredItems = this.navigationItems;
-  }
-
-  protected shouldUpdate(changedProps: PropertyValues) {
-    return !this._opened || changedProps.has("_opened");
+    this._loading = false;
   }
 
   private _valueChanged(ev: ValueChangedEvent<string>) {
@@ -152,61 +139,18 @@ export class HaNavigationPicker extends LitElement {
     this._setValue(ev.detail.value);
   }
 
-  private _setValue(value: string) {
+  private _setValue(value = "") {
     this.value = value;
     fireEvent(
       this,
       "value-changed",
-      { value: this._value },
+      { value: this.value },
       {
         bubbles: false,
         composed: false,
       }
     );
   }
-
-  private _filterChanged(ev: CustomEvent): void {
-    const filterString = ev.detail.value.toLowerCase();
-    const characterCount = filterString.length;
-    if (characterCount >= 2) {
-      const filteredItems: NavigationItem[] = [];
-
-      this.navigationItems.forEach((item) => {
-        if (
-          item.path.toLowerCase().includes(filterString) ||
-          item.title.toLowerCase().includes(filterString)
-        ) {
-          filteredItems.push(item);
-        }
-      });
-
-      if (filteredItems.length > 0) {
-        this.comboBox.filteredItems = filteredItems;
-      } else {
-        this.comboBox.filteredItems = [];
-      }
-    } else {
-      this.comboBox.filteredItems = this.navigationItems;
-    }
-  }
-
-  private get _value() {
-    return this.value || "";
-  }
-
-  static styles = css`
-    ha-icon,
-    ha-svg-icon {
-      color: var(--primary-text-color);
-      position: relative;
-      bottom: 0px;
-    }
-    *[slot="prefix"] {
-      margin-right: 8px;
-      margin-inline-end: 8px;
-      margin-inline-start: initial;
-    }
-  `;
 }
 
 declare global {

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

@@ -1,6 +1,6 @@
 import type { LitVirtualizer } from "@lit-labs/virtualizer";
 import type { RenderItemFunction } from "@lit-labs/virtualizer/virtualize";
-import { mdiMagnify, mdiMinusBoxOutline } from "@mdi/js";
+import { mdiMagnify, mdiMinusBoxOutline, mdiPlus } from "@mdi/js";
 import Fuse from "fuse.js";
 import { css, html, LitElement, nothing } from "lit";
 import {
@@ -91,6 +91,9 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
   @property({ type: Boolean, attribute: "allow-custom-value" })
   public allowCustomValue;
 
+  @property({ attribute: "custom-value-label" })
+  public customValueLabel?: string;
+
   @property() public label?: string;
 
   @property() public value?: string;
@@ -187,10 +190,15 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
   }
 
   protected render() {
+    const searchLabel =
+      this.label ??
+      (this.allowCustomValue
+        ? (this.hass?.localize("ui.components.combo-box.search_or_custom") ??
+          "Search | Add custom value")
+        : (this.hass?.localize("ui.common.search") ?? "Search"));
+
     return html`<ha-textfield
-        .label=${this.label ??
-        this.hass?.localize("ui.common.search") ??
-        "Search"}
+        .label=${searchLabel}
         @input=${this._filterChanged}
       ></ha-textfield>
       ${this._renderSectionButtons()}
@@ -438,13 +446,23 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
         );
       }
 
+      if (this.allowCustomValue && searchString) {
+        filteredItems.push({
+          id: searchString,
+          primary:
+            this.customValueLabel ??
+            this.hass?.localize("ui.components.combo-box.add_custom_item") ??
+            "Add custom item",
+          secondary: `"${searchString}"`,
+          icon_path: mdiPlus,
+        });
+      }
+
       this._items = filteredItems as PickerComboBoxItem[];
     }
 
     this._selectedItemIndex = -1;
-    if (this._virtualizerElement) {
-      this._virtualizerElement.scrollTo(0, 0);
-    }
+    this._valuePinned = true;
   };
 
   private _toggleSection(ev: Event) {
@@ -639,7 +657,7 @@ export class HaPickerComboBox extends ScrollableFadeMixin(LitElement) {
     typeof item === "string" ? item : item?.id;
 
   private _getInitialSelectedIndex() {
-    if (!this._virtualizerElement || !this.value) {
+    if (!this._virtualizerElement || this._search || !this.value) {
       return 0;
     }
 

src/components/ha-picker-field.ts

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

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

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

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

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

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

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

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

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

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

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

src/components/ha-service-picker.ts

@@ -135,7 +135,6 @@ class HaServicePicker extends LitElement {
       <ha-generic-picker
         .hass=${this.hass}
         .autofocus=${this.autofocus}
-        allow-custom-value
         .notFoundLabel=${this.hass.localize(
           "ui.components.service-picker.no_match"
         )}

src/components/ha-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();
     });
   };
@@ -235,6 +251,12 @@ export class HaWaDialog extends ScrollableFadeMixin(LitElement) {
           );
           max-width: var(--ha-dialog-max-width, var(--safe-width));
         }
+        @media (prefers-reduced-motion: reduce) {
+          wa-dialog {
+            --show-duration: 0ms;
+            --hide-duration: 0ms;
+          }
+        }
 
         :host([width="small"]) wa-dialog {
           --width: min(var(--ha-dialog-width-sm, 320px), var(--full-width));

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

@@ -132,9 +132,9 @@ class HaUserPicker extends LitElement {
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .label=${this.label}
-        .notFoundLabel=${this._notFoundLabel}
         .placeholder=${placeholder}
         .value=${this.value}
+        .notFoundLabel=${this._notFoundLabel}
         .getItems=${this._getItems}
         .valueRenderer=${this._valueRenderer}
         .rowRenderer=${this._rowRenderer}

src/dialogs/more-info/const.ts

@@ -88,7 +88,6 @@ export const DOMAINS_HIDE_DEFAULT_MORE_INFO = [
   "select",
   "text",
   "update",
-  "event",
 ];
 
 /** Domains that should have the history hidden in the more info dialog. */

src/external_app/external_messaging.ts

@@ -176,6 +176,13 @@ interface EMOutgoingMessageAddEntityTo extends EMMessage {
   };
 }
 
+interface EMOutgoingMessageFocusElement extends EMMessage {
+  type: "focus_element";
+  payload: {
+    element_id: string;
+  };
+}
+
 type EMOutgoingMessageWithoutAnswer =
   | EMMessageResultError
   | EMMessageResultSuccess
@@ -197,7 +204,8 @@ type EMOutgoingMessageWithoutAnswer =
   | EMOutgoingMessageThreadStoreInPlatformKeychain
   | EMOutgoingMessageImprovScan
   | EMOutgoingMessageImprovConfigureDevice
-  | EMOutgoingMessageAddEntityTo;
+  | EMOutgoingMessageAddEntityTo
+  | EMOutgoingMessageFocusElement;
 
 export interface EMIncomingMessageRestart {
   id: number;

src/mixins/picker-mixin.ts

@@ -0,0 +1,38 @@
+import type { ReactiveElement } from "lit";
+import { property } from "lit/decorators";
+import type { Constructor } from "../types";
+import type { PickerValueRenderer } from "../components/ha-picker-field";
+
+export const PickerMixin = <T extends Constructor<ReactiveElement>>(
+  superClass: T
+) => {
+  class PickerFieldClass extends superClass {
+    @property({ type: Boolean }) public disabled = false;
+
+    @property({ type: Boolean }) public required = false;
+
+    @property() public icon?: string;
+
+    @property() public image?: string;
+
+    @property() public label?: string;
+
+    @property() public placeholder?: string;
+
+    @property() public helper?: string;
+
+    @property() public value?: string;
+
+    @property({ type: Boolean, reflect: true }) public unknown = false;
+
+    @property({ attribute: "unknown-item-text" })
+    public unknownItemText?: string;
+
+    @property({ attribute: "hide-clear-icon", type: Boolean })
+    public hideClearIcon = false;
+
+    @property({ attribute: false })
+    public valueRenderer?: PickerValueRenderer;
+  }
+  return PickerFieldClass;
+};

src/panels/config/areas/dialog-floor-registry-detail.ts

@@ -160,7 +160,7 @@ class DialogFloorDetail extends LitElement {
               ${!this._icon
                 ? html`
                     <ha-floor-icon
-                      slot="fallback"
+                      slot="start"
                       .floor=${{ level: this._level }}
                     ></ha-floor-icon>
                   `

src/panels/config/automation/automation-save-dialog/dialog-automation-save.ts

@@ -148,7 +148,7 @@ class DialogAutomationSave extends LitElement implements HassDialog {
               @value-changed=${this._iconChanged}
             >
               <ha-domain-icon
-                slot="fallback"
+                slot="start"
                 domain=${this._params.domain}
                 .hass=${this.hass}
               >
@@ -176,8 +176,10 @@ class DialogAutomationSave extends LitElement implements HassDialog {
             id="category"
             .hass=${this.hass}
             .scope=${this._params.domain}
+            .label=${this.hass.localize(
+              "ui.components.category-picker.category"
+            )}
             .value=${this._entryUpdates.category}
-            show-label
             @value-changed=${this._registryEntryChanged}
           ></ha-category-picker>`
         : nothing}
@@ -194,7 +196,6 @@ class DialogAutomationSave extends LitElement implements HassDialog {
             id="area"
             .hass=${this.hass}
             .value=${this._entryUpdates.area}
-            show-label
             @value-changed=${this._registryEntryChanged}
           ></ha-area-picker>`
         : nothing}

src/panels/config/automation/condition/types/ha-automation-condition-zone.ts

@@ -40,7 +40,6 @@ export class HaZoneCondition extends LitElement {
         @value-changed=${this._entityPicked}
         .hass=${this.hass}
         .disabled=${this.disabled}
-        allow-custom-entity
         .entityFilter=${zoneAndLocationFilter}
       ></ha-entity-picker>
       <ha-entity-picker
@@ -51,7 +50,6 @@ export class HaZoneCondition extends LitElement {
         @value-changed=${this._zonePicked}
         .hass=${this.hass}
         .disabled=${this.disabled}
-        allow-custom-entity
         .includeDomains=${includeDomains}
       ></ha-entity-picker>
     `;

src/panels/config/automation/trigger/types/ha-automation-trigger-zone.ts

@@ -43,7 +43,6 @@ export class HaZoneTrigger extends LitElement {
         .disabled=${this.disabled}
         @value-changed=${this._entityPicked}
         .hass=${this.hass}
-        allow-custom-entity
         .entityFilter=${zoneAndLocationFilter}
       ></ha-entity-picker>
       <ha-entity-picker
@@ -54,7 +53,6 @@ export class HaZoneTrigger extends LitElement {
         .disabled=${this.disabled}
         @value-changed=${this._zonePicked}
         .hass=${this.hass}
-        allow-custom-entity
         .includeDomains=${includeDomains}
       ></ha-entity-picker>
 

src/panels/config/category/dialog-assign-category.ts

@@ -65,6 +65,9 @@ class DialogAssignCategory extends LitElement {
             <ha-category-picker
               .hass=${this.hass}
               .scope=${this._scope}
+              .label=${this.hass.localize(
+                "ui.components.category-picker.category"
+              )}
               .value=${this._category}
               @value-changed=${this._categoryChanged}
             ></ha-category-picker>

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

@@ -39,9 +39,6 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
   @property({ type: Boolean, attribute: "no-add" })
   public noAdd = false;
 
-  @property({ type: Boolean, attribute: "show-label" })
-  public showLabel = false;
-
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = false;
@@ -183,10 +180,6 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
   };
 
   protected render(): TemplateResult {
-    const placeholder =
-      this.placeholder ??
-      this.hass.localize("ui.components.category-picker.category");
-
     const valueRenderer = this._computeValueRenderer(this._categories);
 
     return html`
@@ -194,13 +187,12 @@ export class HaCategoryPicker extends SubscribeMixin(LitElement) {
         .hass=${this.hass}
         .autofocus=${this.autofocus}
         .label=${this.label}
+        .placeholder=${this.placeholder}
+        .value=${this.value}
         .notFoundLabel=${this._notFoundLabel}
         .emptyLabel=${this.hass.localize(
           "ui.components.category-picker.no_categories"
         )}
-        .placeholder=${placeholder}
-        .showLabel=${this.showLabel}
-        .value=${this.value}
         .getItems=${this._getItems}
         .getAdditionalItems=${this._getAdditionalItems}
         .valueRenderer=${valueRenderer}

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -80,7 +80,6 @@ class DialogDeviceRegistryDetail extends LitElement {
             <ha-area-picker
               .hass=${this.hass}
               .value=${this._areaId}
-              show-label
               @value-changed=${this._areaPicked}
             ></ha-area-picker>
             <ha-labels-picker

src/panels/config/entities/entity-registry-settings-editor.ts

@@ -403,7 +403,7 @@ export class EntityRegistrySettingsEditor extends LitElement {
               ${!this._icon && !stateObj?.attributes.icon && stateObj
                 ? html`
                     <ha-state-icon
-                      slot="fallback"
+                      slot="start"
                       .hass=${this.hass}
                       .stateObj=${stateObj}
                     ></ha-state-icon>
@@ -778,7 +778,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
             .hass=${this.hass}
             .value=${this._areaId}
             .disabled=${this.disabled}
-            show-label
             @value-changed=${this._areaPicked}
           ></ha-area-picker>`
         : ""}
@@ -1013,7 +1012,6 @@ export class EntityRegistrySettingsEditor extends LitElement {
               ? html`<ha-area-picker
                   .hass=${this.hass}
                   .value=${this._areaId}
-                  show-label
                   .disabled=${this.disabled}
                   @value-changed=${this._areaPicked}
                 ></ha-area-picker>`
@@ -1545,6 +1543,12 @@ export class EntityRegistrySettingsEditor extends LitElement {
           margin-inline-end: 0;
           margin-inline-start: initial;
         }
+        ha-settings-row {
+          display: grid;
+          grid-template-columns: 1fr auto;
+          gap: var(--ha-space-4);
+          align-items: start;
+        }
         ha-textfield,
         ha-icon-picker,
         ha-select,

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts

@@ -16,13 +16,14 @@ import "../../../../../components/buttons/ha-progress-button";
 import type { HaProgressButton } from "../../../../../components/buttons/ha-progress-button";
 import "../../../../../components/ha-alert";
 import "../../../../../components/ha-card";
+import "../../../../../components/ha-generic-picker";
 import "../../../../../components/ha-list-item";
+import type { PickerComboBoxItem } from "../../../../../components/ha-picker-combo-box";
 import "../../../../../components/ha-select";
 import "../../../../../components/ha-selector/ha-selector-boolean";
 import "../../../../../components/ha-settings-row";
 import "../../../../../components/ha-svg-icon";
 import "../../../../../components/ha-textfield";
-import "../../../../../components/ha-combo-box";
 import type {
   ZWaveJSNodeCapabilities,
   ZWaveJSNodeConfigParam,
@@ -329,19 +330,22 @@ class ZWaveJSNodeConfig extends LitElement {
       ) {
         return html`
           ${labelAndDescription}
-          <ha-combo-box
+          <ha-generic-picker
             .hass=${this.hass}
             .value=${item.value?.toString()}
             allow-custom-value
             hide-clear-icon
-            .items=${this._getComboBoxOptions(item.metadata.states)}
+            .getItems=${this._getManualEntryItems(item.metadata.states)}
             .disabled=${!item.metadata.writeable}
             .invalid=${result?.status === "error"}
             .placeholder=${item.metadata.unit}
             .helper=${`${this.hass.localize("ui.panel.config.zwave_js.node_config.between_min_max", { min: item.metadata.min, max: item.metadata.max })}${defaultLabel ? `, ${defaultLabel}` : ""}`}
+            .valueRenderer=${this._enumeratedPickerValueRenderer(
+              item.metadata.states
+            )}
             @value-changed=${this._getComboBoxValueChangedCallback(id, item)}
           >
-          </ha-combo-box>
+          </ha-generic-picker>
         `;
       }
       return html`${labelAndDescription}
@@ -363,7 +367,10 @@ class ZWaveJSNodeConfig extends LitElement {
         </ha-textfield>`;
     }
 
-    if (item.configuration_value_type === "enumerated") {
+    if (
+      item.configuration_value_type === "enumerated" &&
+      Object.keys(item.metadata.states).length < 5
+    ) {
       return html`
         ${labelAndDescription}
         <ha-select
@@ -385,6 +392,28 @@ class ZWaveJSNodeConfig extends LitElement {
         </ha-select>
       `;
     }
+    if (item.configuration_value_type === "enumerated") {
+      return html`
+        ${labelAndDescription}
+        <ha-generic-picker
+          .hass=${this.hass}
+          .disabled=${!item.metadata.writeable}
+          .value=${item.value?.toString()}
+          .key=${id}
+          hide-clear-icon
+          @value-changed=${this._pickerValueChanged}
+          .helper=${defaultLabel}
+          .getItems=${this._getEnumeratedPickerItems(item.metadata.states!)}
+          .valueRenderer=${this._enumeratedPickerValueRenderer(
+            item.metadata.states!
+          )}
+          .property=${item.property}
+          .endpoint=${item.endpoint}
+          .propertyKey=${item.property_key}
+        >
+        </ha-generic-picker>
+      `;
+    }
 
     return html`${labelAndDescription}
       <p>${item.value}</p>`;
@@ -429,15 +458,23 @@ class ZWaveJSNodeConfig extends LitElement {
   }
 
   private _dropdownSelected(ev) {
+    this._handleEnumeratedPickerValueChanged(ev, ev.target.value);
+  }
+
+  private _pickerValueChanged(ev) {
+    this._handleEnumeratedPickerValueChanged(ev, ev.detail.value);
+  }
+
+  private _handleEnumeratedPickerValueChanged(ev, value: string) {
     if (ev.target === undefined || this._config![ev.target.key] === undefined) {
       return;
     }
-    if (this._config![ev.target.key].value?.toString() === ev.target.value) {
+    if (this._config![ev.target.key].value?.toString() === value) {
       return;
     }
     this._setResult(ev.target.key, undefined);
 
-    this._updateConfigParameter(ev.target, Number(ev.target.value));
+    this._updateConfigParameter(ev.target, Number(value));
   }
 
   private _numericInputChanged(ev) {
@@ -474,11 +511,36 @@ class ZWaveJSNodeConfig extends LitElement {
     this._updateConfigParameter(ev.target, value);
   }
 
-  private _getComboBoxOptions = memoizeOne((states: Record<string, string>) =>
-    Object.entries(states).map(([value, label]) => ({
-      value,
-      label: `${value} - ${label}`,
-    }))
+  private _getEnumeratedPickerItems = memoizeOne(
+    (states: Record<string, string>) => {
+      const items: PickerComboBoxItem[] = Object.entries(states).map(
+        ([value, label]) => ({
+          id: value,
+          primary: label,
+          sorting_label: `${label}_${value}`,
+        })
+      );
+      return () => items;
+    }
+  );
+
+  private _enumeratedPickerValueRenderer = memoizeOne(
+    (states: Record<string, string>) => (value: string) =>
+      html`<span slot="headline">${states[value] || value}</span>`
+  );
+
+  private _getManualEntryItems = memoizeOne(
+    (states: Record<string, string>) => {
+      const items: PickerComboBoxItem[] = Object.entries(states).map(
+        ([value, label]) => ({
+          id: value,
+          primary: `${label}`,
+          secondary: value,
+          sorting_label: `${label}_${value}`,
+        })
+      );
+      return () => items;
+    }
   );
 
   private _getComboBoxValueChangedCallback(

src/panels/config/labels/dialog-label-detail.ts

@@ -5,9 +5,10 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-alert";
 import "../../../components/ha-button";
 import "../../../components/ha-color-picker";
-import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-dialog-footer";
 import "../../../components/ha-icon-picker";
 import "../../../components/ha-switch";
+import "../../../components/ha-wa-dialog";
 import "../../../components/ha-textarea";
 import "../../../components/ha-textfield";
 import type { LabelRegistryEntryMutableParams } from "../../../data/label/label_registry";
@@ -37,6 +38,8 @@ class DialogLabelDetail
 
   @state() private _submitting = false;
 
+  @state() private _open = false;
+
   public showDialog(params: LabelDetailDialogParams): void {
     this._params = params;
     this._error = undefined;
@@ -51,20 +54,17 @@ class DialogLabelDetail
       this._color = "";
       this._description = "";
     }
-    document.body.addEventListener("keydown", this._handleKeyPress);
+    this._open = true;
   }
 
-  private _handleKeyPress = (ev: KeyboardEvent) => {
-    if (ev.key === "Escape") {
-      ev.stopPropagation();
-    }
-  };
-
   public closeDialog() {
+    this._open = false;
+    return true;
+  }
+
+  private _dialogClosed(): void {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
-    document.body.removeEventListener("keydown", this._handleKeyPress);
-    return true;
   }
 
   protected render() {
@@ -73,17 +73,13 @@ class DialogLabelDetail
     }
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        .heading=${createCloseHeading(
-          this.hass,
-          this._params.entry
-            ? this._params.entry.name || this._params.entry.label_id
-            : this.hass!.localize("ui.dialogs.label-detail.new_label")
-        )}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this._params.entry
+          ? this._params.entry.name || this._params.entry.label_id
+          : this.hass!.localize("ui.dialogs.label-detail.new_label")}
+        @closed=${this._dialogClosed}
       >
         <div>
           ${this._error
@@ -91,7 +87,7 @@ class DialogLabelDetail
             : ""}
           <div class="form">
             <ha-textfield
-              dialogInitialFocus
+              autofocus
               .value=${this._name}
               .configValue=${"name"}
               @input=${this._input}
@@ -125,29 +121,32 @@ class DialogLabelDetail
             ></ha-textarea>
           </div>
         </div>
-        ${this._params.entry && this._params.removeEntry
-          ? html`
-              <ha-button
-                slot="secondaryAction"
-                variant="danger"
-                appearance="plain"
-                @click=${this._deleteEntry}
-                .disabled=${this._submitting}
-              >
-                ${this.hass!.localize("ui.common.delete")}
-              </ha-button>
-            `
-          : nothing}
-        <ha-button
-          slot="primaryAction"
-          @click=${this._updateEntry}
-          .disabled=${this._submitting || !this._name}
-        >
-          ${this._params.entry
-            ? this.hass!.localize("ui.common.update")
-            : this.hass!.localize("ui.common.create")}
-        </ha-button>
-      </ha-dialog>
+
+        <ha-dialog-footer slot="footer">
+          ${this._params.entry && this._params.removeEntry
+            ? html`
+                <ha-button
+                  slot="secondaryAction"
+                  variant="danger"
+                  appearance="plain"
+                  @click=${this._deleteEntry}
+                  .disabled=${this._submitting}
+                >
+                  ${this.hass!.localize("ui.common.delete")}
+                </ha-button>
+              `
+            : nothing}
+          <ha-button
+            slot="primaryAction"
+            @click=${this._updateEntry}
+            .disabled=${this._submitting || !this._name}
+          >
+            ${this._params.entry
+              ? this.hass!.localize("ui.common.update")
+              : this.hass!.localize("ui.common.create")}
+          </ha-button>
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 

src/panels/developer-tools/state/developer-tools-state.ts

@@ -144,7 +144,6 @@ class HaPanelDevState extends LitElement {
               .hass=${this.hass}
               .value=${this._entityId}
               @value-changed=${this._entityIdChanged}
-              allow-custom-entity
               show-entity-id
             ></ha-entity-picker>
             ${this._entityId

src/panels/home/dialogs/dialog-edit-home.ts

@@ -75,7 +75,6 @@ export class DialogEditHome
             "ui.panel.home.editor.favorite_entities_helper"
           )}
           reorder
-          allow-custom-entity
           @value-changed=${this._favoriteEntitiesChanged}
         ></ha-entities-picker>
 

src/panels/lovelace/components/hui-entity-editor.ts

@@ -167,7 +167,6 @@ export class HuiEntityEditor extends LitElement {
                       .index=${index}
                       .entityFilter=${this.entityFilter}
                       @value-changed=${this._valueChanged}
-                      allow-custom-entity
                     ></ha-entity-picker>
                   </div>
                 `

src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts

@@ -51,7 +51,6 @@ export class HuiGraphFooterEditor
     return html`
       <div class="card-config">
         <ha-entity-picker
-          allow-custom-entity
           .label=${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.entity"
           )}

src/panels/lovelace/editor/config-elements/hui-heading-badges-editor.ts

@@ -78,7 +78,6 @@ export class HuiHeadingBadgesEditor extends LitElement {
                         ${isEntityBadge && entityBadge
                           ? html`
                               <ha-entity-picker
-                                allow-custom-entity
                                 hide-clear-icon
                                 .hass=${this.hass}
                                 .value=${entityBadge.entity ?? ""}
@@ -131,7 +130,6 @@ export class HuiHeadingBadgesEditor extends LitElement {
           @value-changed=${this._entityPicked}
           .value=${undefined}
           @click=${preventDefault}
-          allow-custom-entity
           add-button
         ></ha-entity-picker>
       </div>

src/panels/lovelace/editor/config-elements/hui-statistics-graph-card-editor.ts

@@ -316,7 +316,6 @@ export class HuiStatisticsGraphCardEditor
         @value-changed=${this._valueChanged}
       ></ha-form>
         <ha-statistics-picker
-          allow-custom-entity
           .hass=${this.hass}
           .placeholder=${this.hass!.localize(
             "ui.panel.lovelace.editor.card.statistics-graph.pick_statistic"

src/panels/lovelace/editor/hui-entities-card-row-editor.ts

@@ -80,7 +80,6 @@ export class HuiEntitiesCardRowEditor extends LitElement {
                     `
                   : html`
                       <ha-entity-picker
-                        allow-custom-entity
                         hide-clear-icon
                         .hass=${this.hass}
                         .value=${(entityConf as EntityConfig).entity}

src/panels/lovelace/strategies/home/editor/hui-home-dashboard-strategy-editor.ts

@@ -36,7 +36,6 @@ export class HuiHomeDashboardStrategyEditor
           "ui.panel.lovelace.editor.strategy.home.add_favorite_entity"
         )}
         reorder
-        allow-custom-entity
         @value-changed=${this._valueChanged}
       >
       </ha-entities-picker>

src/translations/en.json

@@ -1308,7 +1308,9 @@
       "combo-box": {
         "no_match": "No matching items found",
         "no_items": "No items available",
-        "unknown_item": "Unknown item"
+        "unknown_item": "Unknown item",
+        "search_or_custom": "Search | Add custom item",
+        "add_custom_item": "Add custom item"
       },
       "suggest_with_ai": {
         "label": "Suggest",
@@ -1317,6 +1319,9 @@
         "suggesting_3": "Enchanting…",
         "done": "Done!",
         "error": "Fail!"
+      },
+      "navigation-picker": {
+        "add_custom_path": "Add custom path"
       }
     },
     "dialogs": {