Colors

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

.github/workflows/release.yaml

@@ -41,7 +41,7 @@ jobs:
           LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}
       - name: Build and release package
         run: |
-          python3 -m pip install twine build
+          python3 -m pip install twine
           export TWINE_USERNAME="__token__"
           export TWINE_PASSWORD="${{ secrets.TWINE_TOKEN }}"
 

.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch

@@ -1,10 +1,11 @@
-diff --git a/polyfillLoaders/EventTarget.js b/polyfillLoaders/EventTarget.js
+diff --git a/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js b/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
-index 4e18ade7ba485849f17f28c94c42f0e0e01ac387..8f34f4f646c7f7becc208fb5a546c96034fc74dc 100644
+index d92179f7fd5315203f870a6963e871dc8ddf6c0c..362e284121b97e0fba0925225777aebc32e26b8d 100644
---- a/polyfillLoaders/EventTarget.js
+--- a/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
-+++ b/polyfillLoaders/EventTarget.js
++++ b/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
-@@ -6,16 +6,15 @@
+@@ -1,14 +1,15 @@
- let _ET;
+-let _ET, ET;
- let ET;
++let _ET;
++let ET;
  export default async function EventTarget() {
 -    return ET || init();
 +  return ET || init();
@@ -26,4 +27,3 @@ index 4e18ade7ba485849f17f28c94c42f0e0e01ac387..8f34f4f646c7f7becc208fb5a546c960
 +  }
 +  return (ET = _ET);
  }
- //# sourceMappingURL=EventTarget.js.map

MANIFEST.in

@@ -1,4 +1,5 @@
 include README.md
+include LICENSE.md
 graft hass_frontend
 graft hass_frontend_es5
 recursive-exclude * *.py[co]

build-scripts/bundle.js

@@ -10,7 +10,7 @@ module.exports.ignorePackages = ({ latestBuild }) => [
 ];
 
 // Files from NPM packages that we should replace with empty file
-module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
+module.exports.emptyPackages = ({ latestBuild }) =>
   [
     // Contains all color definitions for all material color sets.
     // We don't use it
@@ -28,11 +28,6 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
       ),
     // This polyfill is loaded in workers to support ES5, filter it out.
     latestBuild && require.resolve("proxy-polyfill/src/index.js"),
-    // Icons in supervisor conflict with icons in HA so we don't load.
-    isHassioBuild &&
-      require.resolve(
-        path.resolve(paths.polymer_dir, "src/components/ha-icon.ts")
-      ),
   ].filter(Boolean);
 
 module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
@@ -201,7 +196,6 @@ module.exports.config = {
       publicPath: publicPath(latestBuild, paths.hassio_publicPath),
       isProdBuild,
       latestBuild,
-      isHassioBuild: true,
       defineOverlay: {
         __SUPERVISOR__: true,
       },

build-scripts/env.js

@@ -26,11 +26,11 @@ module.exports = {
   },
   version() {
     const version = fs
-      .readFileSync(path.resolve(paths.polymer_dir, "setup.cfg"), "utf8")
+      .readFileSync(path.resolve(paths.polymer_dir, "setup.py"), "utf8")
-      .match(/version\W+=\W(\d{8}\.\d)/);
+      .match(/\d{8}\.\d+/);
     if (!version) {
       throw Error("Version not found");
     }
-    return version[1];
+    return version[0];
   },
 };

build-scripts/webpack.js

@@ -30,7 +30,6 @@ const createWebpackConfig = ({
   isProdBuild,
   latestBuild,
   isStatsBuild,
-  isHassioBuild,
   dontHash,
 }) => {
   if (!dontHash) {
@@ -118,9 +117,7 @@ const createWebpackConfig = ({
         },
       }),
       new webpack.NormalModuleReplacementPlugin(
-        new RegExp(
+        new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
-          bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
-        ),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
       !isProdBuild && new LogStartCompilePlugin(),

cast/src/receiver/layout/hc-lovelace.ts

@@ -7,9 +7,6 @@ import "../../../../src/panels/lovelace/views/hui-view";
 import { HomeAssistant } from "../../../../src/types";
 import "./hc-launch-screen";
 
-(window as any).loadCardHelpers = () =>
-  import("../../../../src/panels/lovelace/custom-card-helpers");
-
 @customElement("hc-lovelace")
 class HcLovelace extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;

gallery/script/netlify_build_gallery

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-TARGET_LABEL="needs design preview"
+TARGET_LABEL="Needs design preview"
 
 if [[ "$NETLIFY" != "true" ]]; then
   echo "This script can only be run on Netlify"

gallery/sidebar.js

@@ -20,7 +20,6 @@ module.exports = [
       "editor-trigger",
       "editor-condition",
       "editor-action",
-      "selectors",
       "trace",
       "trace-timeline",
     ],

gallery/src/components/demo-black-white-row.ts

@@ -3,7 +3,6 @@ import { html, LitElement, css, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/components/ha-card";
 
 @customElement("demo-black-white-row")
 class DemoBlackWhiteRow extends LitElement {

gallery/src/ha-gallery.ts

@@ -188,7 +188,6 @@ class HaGallery extends LitElement {
 
       .sidebar details {
         margin-top: 1em;
-        margin-left: 1em;
       }
 
       .sidebar summary {

gallery/src/pages/automation/selectors.markdown

@@ -1,3 +0,0 @@
----
-title: Selectors
----

gallery/src/pages/automation/selectors.ts

@@ -1,102 +0,0 @@
-/* eslint-disable lit/no-template-arrow */
-import { LitElement, TemplateResult, html } from "lit";
-import { customElement, state } from "lit/decorators";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import type { HomeAssistant } from "../../../../src/types";
-import "../../components/demo-black-white-row";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
-import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
-import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import "../../../../src/panels/config/automation/trigger/ha-automation-trigger";
-import { Selector } from "../../../../src/data/selector";
-import "../../../../src/components/ha-selector/ha-selector";
-
-const SCHEMAS: { name: string; selector: Selector }[] = [
-  { name: "Addon", selector: { addon: {} } },
-
-  { name: "Entity", selector: { entity: {} } },
-  { name: "Device", selector: { device: {} } },
-  { name: "Area", selector: { area: {} } },
-  { name: "Target", selector: { target: {} } },
-  {
-    name: "Number",
-    selector: {
-      number: {
-        min: 0,
-        max: 10,
-      },
-    },
-  },
-  { name: "Boolean", selector: { boolean: {} } },
-  { name: "Time", selector: { time: {} } },
-  { name: "Action", selector: { action: {} } },
-  { name: "Text", selector: { text: { multiline: false } } },
-  { name: "Text Multiline", selector: { text: { multiline: true } } },
-  { name: "Object", selector: { object: {} } },
-  {
-    name: "Select",
-    selector: {
-      select: {
-        options: ["Everyone Home", "Some Home", "All gone"],
-      },
-    },
-  },
-];
-
-@customElement("demo-automation-selectors")
-class DemoHaSelector extends LitElement {
-  @state() private hass!: HomeAssistant;
-
-  private data: any = SCHEMAS.map(() => undefined);
-
-  constructor() {
-    super();
-    const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
-    mockEntityRegistry(hass);
-    mockDeviceRegistry(hass);
-    mockAreaRegistry(hass);
-    mockHassioSupervisor(hass);
-  }
-
-  protected render(): TemplateResult {
-    const valueChanged = (ev) => {
-      const sampleIdx = ev.target.sampleIdx;
-      this.data[sampleIdx] = ev.detail.value;
-      this.requestUpdate();
-    };
-    return html`
-      ${SCHEMAS.map(
-        (info, sampleIdx) => html`
-          <demo-black-white-row
-            .title=${info.name}
-            .value=${{ selector: info.selector, data: this.data[sampleIdx] }}
-          >
-            ${["light", "dark"].map(
-              (slot) =>
-                html`
-                  <ha-selector
-                    slot=${slot}
-                    .hass=${this.hass}
-                    .selector=${info.selector}
-                    .label=${info.name}
-                    .value=${this.data[sampleIdx]}
-                    .sampleIdx=${sampleIdx}
-                    @value-changed=${valueChanged}
-                  ></ha-selector>
-                `
-            )}
-          </demo-black-white-row>
-        `
-      )}
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-automation-selectors": DemoHaSelector;
-  }
-}

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

@@ -1,17 +1,11 @@
 /* eslint-disable lit/no-template-arrow */
 import "@material/mwc-button";
 import { LitElement, TemplateResult, html } from "lit";
-import { customElement, state } from "lit/decorators";
+import { customElement } from "lit/decorators";
 import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
 import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-form/ha-form";
 import "../../components/demo-black-white-row";
-import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import { provideHass } from "../../../../src/fake_data/provide_hass";
-import { HomeAssistant } from "../../../../src/types";
 
 const SCHEMAS: {
   title: string;
@@ -20,49 +14,6 @@ const SCHEMAS: {
   schema: HaFormSchema[];
   data?: Record<string, any>;
 }[] = [
-  {
-    title: "Selectors",
-    translations: {
-      addon: "Addon",
-      entity: "Entity",
-      device: "Device",
-      area: "Area",
-      target: "Target",
-      number: "Number",
-      boolean: "Boolean",
-      time: "Time",
-      action: "Action",
-      text: "Text",
-      text_multiline: "Text Multiline",
-      object: "Object",
-      select: "Select",
-    },
-    schema: [
-      { name: "addon", selector: { addon: {} } },
-      { name: "entity", selector: { entity: {} } },
-      {
-        name: "Attribute",
-        selector: { attribute: { entity_id: "" } },
-      },
-      { name: "Device", selector: { device: {} } },
-      { name: "Duration", selector: { duration: {} } },
-      { name: "area", selector: { area: {} } },
-      { name: "target", selector: { target: {} } },
-      { name: "number", selector: { number: { min: 0, max: 10 } } },
-      { name: "boolean", selector: { boolean: {} } },
-      { name: "time", selector: { time: {} } },
-      { name: "action", selector: { action: {} } },
-      { name: "text", selector: { text: { multiline: false } } },
-      { name: "text_multiline", selector: { text: { multiline: true } } },
-      { name: "object", selector: { object: {} } },
-      {
-        name: "select",
-        selector: {
-          select: { options: ["Everyone Home", "Some Home", "All gone"] },
-        },
-      },
-    ],
-  },
   {
     title: "Authentication",
     translations: {
@@ -99,11 +50,13 @@ const SCHEMAS: {
       {
         type: "boolean",
         name: "bool",
+        optional: true,
         default: false,
       },
       {
         type: "integer",
         name: "int",
+        optional: true,
         default: 10,
       },
       {
@@ -114,6 +67,7 @@ const SCHEMAS: {
       {
         type: "string",
         name: "string",
+        optional: true,
         default: "Default",
       },
       {
@@ -123,6 +77,7 @@ const SCHEMAS: {
           ["other", "other"],
         ],
         name: "select",
+        optional: true,
         default: "default",
       },
       {
@@ -132,6 +87,7 @@ const SCHEMAS: {
           other: "Other",
         },
         name: "multi",
+        optional: true,
         default: ["default"],
       },
       {
@@ -152,6 +108,7 @@ const SCHEMAS: {
       {
         type: "integer",
         name: "int with default",
+        optional: true,
         default: 10,
       },
       {
@@ -165,6 +122,7 @@ const SCHEMAS: {
       {
         type: "integer",
         name: "int range optional",
+        optional: true,
         valueMin: 0,
         valueMax: 10,
       },
@@ -190,6 +148,7 @@ const SCHEMAS: {
           ["other", "Other"],
         ],
         name: "select optional",
+        optional: true,
       },
       {
         type: "select",
@@ -202,6 +161,7 @@ const SCHEMAS: {
           ["option", "1000"],
         ],
         name: "select many otions",
+        optional: true,
         default: "default",
       },
     ],
@@ -230,6 +190,7 @@ const SCHEMAS: {
           option: "1000",
         },
         name: "multi many otions",
+        optional: true,
         default: ["default"],
       },
     ],
@@ -278,35 +239,23 @@ const SCHEMAS: {
         valueMin: 1,
         valueMax: 65535,
         name: "port",
+        optional: true,
         default: 80,
       },
-      { type: "string", name: "path", default: "/" },
+      { type: "string", name: "path", optional: true, default: "/" },
-      { type: "boolean", name: "ssl", default: false },
+      { type: "boolean", name: "ssl", optional: true, default: false },
     ],
   },
 ];
 
 @customElement("demo-components-ha-form")
 class DemoHaForm extends LitElement {
-  @state() private hass!: HomeAssistant;
-
   private data = SCHEMAS.map(
     ({ schema, data }) => data || computeInitialHaFormData(schema)
   );
 
   private disabled = SCHEMAS.map(() => false);
 
-  constructor() {
-    super();
-    const hass = provideHass(this);
-    hass.updateTranslations(null, "en");
-    hass.updateTranslations("config", "en");
-    mockEntityRegistry(hass);
-    mockDeviceRegistry(hass);
-    mockAreaRegistry(hass);
-    mockHassioSupervisor(hass);
-  }
-
   protected render(): TemplateResult {
     return html`
       ${SCHEMAS.map((info, idx) => {
@@ -329,7 +278,6 @@ class DemoHaForm extends LitElement {
               (slot) => html`
                 <ha-form
                   slot=${slot}
-                  .hass=${this.hass}
                   .data=${this.data[idx]}
                   .schema=${info.schema}
                   .error=${info.error}

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

@@ -21,12 +21,7 @@ const SCHEMAS: {
     name: "One of each",
     input: {
       entity: { name: "Entity", selector: { entity: {} } },
-      attribute: {
-        name: "Attribute",
-        selector: { attribute: { entity_id: "" } },
-      },
       device: { name: "Device", selector: { device: {} } },
-      duration: { name: "Duration", selector: { duration: {} } },
       addon: { name: "Addon", selector: { addon: {} } },
       area: { name: "Area", selector: { area: {} } },
       target: { name: "Target", selector: { target: {} } },
@@ -53,19 +48,10 @@ const SCHEMAS: {
       boolean: { name: "Boolean", selector: { boolean: {} } },
       time: { name: "Time", selector: { time: {} } },
       action: { name: "Action", selector: { action: {} } },
-      text: {
+      text: { name: "Text", selector: { text: { multiline: false } } },
-        name: "Text",
-        selector: { text: {} },
-      },
-      password: {
-        name: "Password",
-        selector: { text: { type: "password" } },
-      },
       text_multiline: {
         name: "Text multiline",
-        selector: {
+        selector: { text: { multiline: true } },
-          text: { multiline: true },
-        },
       },
       object: { name: "Object", selector: { object: {} } },
       select: {

gallery/src/pages/concepts/home.markdown

@@ -17,7 +17,7 @@ We want to make it as easy for designers to contribute as it is for developers.
 
 - Meet us at <a href="https://discord.gg/BPBc8rZ9" rel="noopener noreferrer" target="_blank">devs_ux Discord</a>. Feel free to share your designs, user test or strategic ideas.
 - Start designing with our <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
-- Find the lates UX <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!
+- Find the lates UX <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!
 
 
 ## Developers

hassio/src/addon-store/hassio-addon-repository.ts

@@ -42,9 +42,7 @@ class HassioAddonRepositoryEl extends LitElement {
     const repo = this.repo;
     let _addons = this.addons;
     if (!this.hass.userData?.showAdvanced) {
-      _addons = _addons.filter(
+      _addons = _addons.filter((addon) => !addon.advanced);
-        (addon) => !addon.advanced && addon.stage === "stable"
-      );
     }
     const addons = this._getAddons(_addons, this.filter);
 

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -114,7 +114,7 @@ class HassioAddonConfig extends LitElement {
           <div class="card-menu">
             <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
               <ha-icon-button
-                .label=${this.supervisor.localize("common.menu")}
+                .label=${this.hass.localize("common.menu")}
                 .path=${mdiDotsVertical}
                 slot="trigger"
               ></ha-icon-button>

hassio/src/backups/hassio-backups.ts

@@ -191,7 +191,7 @@ export class HassioBackups extends LitElement {
           @action=${this._handleAction}
         >
           <ha-icon-button
-            .label=${this.supervisor?.localize("common.menu")}
+            .label=${this.hass.localize("common.menu")}
             .path=${mdiDotsVertical}
             slot="trigger"
           ></ha-icon-button>

hassio/src/dialogs/backup/dialog-hassio-backup-upload.ts

@@ -17,27 +17,27 @@ export class DialogHassioBackupUpload
 {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @state() private _dialogParams?: HassioBackupUploadDialogParams;
+  @state() private _params?: HassioBackupUploadDialogParams;
 
   public async showDialog(
-    dialogParams: HassioBackupUploadDialogParams
+    params: HassioBackupUploadDialogParams
   ): Promise<void> {
-    this._dialogParams = dialogParams;
+    this._params = params;
     await this.updateComplete;
   }
 
   public closeDialog(): void {
-    if (this._dialogParams && !this._dialogParams.onboarding) {
+    if (this._params && !this._params.onboarding) {
-      if (this._dialogParams.reloadBackup) {
+      if (this._params.reloadBackup) {
-        this._dialogParams.reloadBackup();
+        this._params.reloadBackup();
       }
     }
-    this._dialogParams = undefined;
+    this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render(): TemplateResult {
-    if (!this._dialogParams) {
+    if (!this._params) {
       return html``;
     }
 
@@ -47,20 +47,14 @@ export class DialogHassioBackupUpload
         scrimClickAction
         escapeKeyAction
         hideActions
-        .heading=${this.hass?.localize(
+        .heading=${true}
-          "ui.panel.page-onboarding.restore.upload_backup"
-        ) || "Upload backup"}
         @closed=${this.closeDialog}
       >
         <div slot="heading">
           <ha-header-bar>
-            <span slot="title"
+            <span slot="title"> Upload backup </span>
-              >${this.hass?.localize(
-                "ui.panel.page-onboarding.restore.upload_backup"
-              ) || "Upload backup"}</span
-            >
             <ha-icon-button
-              .label=${this.hass?.localize("ui.common.close") || "Close"}
+              .label=${this.hass?.localize("common.close") || "close"}
               .path=${mdiClose}
               slot="actionItems"
               dialogAction="cancel"
@@ -77,7 +71,7 @@ export class DialogHassioBackupUpload
 
   private _backupUploaded(ev) {
     const backup = ev.detail.backup;
-    this._dialogParams?.showBackup(backup.slug);
+    this._params?.showBackup(backup.slug);
     this.closeDialog();
   }
 

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -48,9 +48,9 @@ class HassioBackupDialog
   @query("supervisor-backup-content")
   private _backupContent!: SupervisorBackupContent;
 
-  public async showDialog(dialogParams: HassioBackupDialogParams) {
+  public async showDialog(params: HassioBackupDialogParams) {
-    this._backup = await fetchHassioBackupInfo(this.hass, dialogParams.slug);
+    this._backup = await fetchHassioBackupInfo(this.hass, params.slug);
-    this._dialogParams = dialogParams;
+    this._dialogParams = params;
     this._restoringBackup = false;
   }
 
@@ -71,13 +71,13 @@ class HassioBackupDialog
         open
         scrimClickAction
         @closed=${this.closeDialog}
-        .heading=${this._backup.name}
+        .heading=${true}
       >
         <div slot="heading">
           <ha-header-bar>
             <span slot="title">${this._backup.name}</span>
             <ha-icon-button
-              .label=${this.hass?.localize("ui.common.close") || "Close"}
+              .label=${this.hass?.localize("common.close") || "close"}
               .path=${mdiClose}
               slot="actionItems"
               dialogAction="cancel"
@@ -114,20 +114,12 @@ class HassioBackupDialog
               @closed=${stopPropagation}
             >
               <ha-icon-button
-                .label=${this.hass!.localize("ui.common.menu") || "Menu"}
+                .label=${this.hass!.localize("common.menu")}
                 .path=${mdiDotsVertical}
                 slot="trigger"
               ></ha-icon-button>
-              <mwc-list-item
+              <mwc-list-item>Download Backup</mwc-list-item>
-                >${this._dialogParams.supervisor?.localize(
+              <mwc-list-item class="error">Delete Backup</mwc-list-item>
-                  "backup.download_backup"
-                )}</mwc-list-item
-              >
-              <mwc-list-item class="error"
-                >${this._dialogParams.supervisor?.localize(
-                  "backup.delete_backup_title"
-                )}</mwc-list-item
-              >
             </ha-button-menu>`
           : ""}
       </ha-dialog>

hassio/src/dialogs/backup/dialog-hassio-create-backup.ts

@@ -30,8 +30,8 @@ class HassioCreateBackupDialog extends LitElement {
   @query("supervisor-backup-content")
   private _backupContent!: SupervisorBackupContent;
 
-  public showDialog(dialogParams: HassioCreateBackupDialogParams) {
+  public showDialog(params: HassioCreateBackupDialogParams) {
-    this._dialogParams = dialogParams;
+    this._dialogParams = params;
     this._creatingBackup = false;
   }
 

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -39,8 +39,8 @@ class HassioHardwareDialog extends LitElement {
 
   @state() private _filter?: string;
 
-  public showDialog(dialogParams: HassioHardwareDialogParams) {
+  public showDialog(params: HassioHardwareDialogParams) {
-    this._dialogParams = dialogParams;
+    this._dialogParams = params;
   }
 
   public closeDialog() {
@@ -65,16 +65,14 @@ class HassioHardwareDialog extends LitElement {
         scrimClickAction
         hideActions
         @closed=${this.closeDialog}
-        .heading=${this._dialogParams.supervisor.localize(
+        .heading=${true}
-          "dialog.hardware.title"
-        )}
       >
         <div class="header" slot="heading">
           <h2>
             ${this._dialogParams.supervisor.localize("dialog.hardware.title")}
           </h2>
           <ha-icon-button
-            .label=${this._dialogParams.supervisor.localize("common.close")}
+            .label=${this.hass.localize("common.close")}
             .path=${mdiClose}
             dialogAction="close"
           ></ha-icon-button>

hassio/src/dialogs/network/dialog-hassio-network.ts

@@ -94,7 +94,7 @@ export class DialogHassioNetwork
         open
         scrimClickAction
         escapeKeyAction
-        .heading=${this.supervisor.localize("dialog.network.title")}
+        .heading=${true}
         hideActions
         @closed=${this.closeDialog}
       >
@@ -104,7 +104,7 @@ export class DialogHassioNetwork
               ${this.supervisor.localize("dialog.network.title")}
             </span>
             <ha-icon-button
-              .label=${this.supervisor.localize("common.close")}
+              .label=${this.hass.localize("common.close")}
               .path=${mdiClose}
               slot="actionItems"
               dialogAction="cancel"

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -19,21 +19,22 @@ import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { RegistriesDialogParams } from "./show-dialog-registries";
 
-const SCHEMA: HaFormSchema[] = [
+const SCHEMA = [
   {
+    type: "string",
     name: "registry",
     required: true,
-    selector: { text: {} },
   },
   {
+    type: "string",
     name: "username",
     required: true,
-    selector: { text: {} },
   },
   {
+    type: "string",
     name: "password",
     required: true,
-    selector: { text: { type: "password" } },
+    format: "password",
   },
 ];
 

hassio/src/system/hassio-core-info.ts

@@ -205,6 +205,16 @@ class HassioCoreInfo extends LitElement {
           color: var(--secondary-text-color);
           --mdc-menu-min-width: 200px;
         }
+        @media (min-width: 563px) {
+          paper-listbox {
+            max-height: 150px;
+            overflow: auto;
+          }
+        }
+        paper-item {
+          cursor: pointer;
+          min-height: 35px;
+        }
         mwc-list-item ha-svg-icon {
           color: var(--secondary-text-color);
         }

hassio/src/system/hassio-host-info.ts

@@ -186,7 +186,7 @@ class HassioHostInfo extends LitElement {
 
           <ha-button-menu corner="BOTTOM_START">
             <ha-icon-button
-              .label=${this.supervisor.localize("common.menu")}
+              .label=${this.hass.localize("common.menu")}
               .path=${mdiDotsVertical}
               slot="trigger"
             ></ha-icon-button>
@@ -440,6 +440,16 @@ class HassioHostInfo extends LitElement {
           color: var(--secondary-text-color);
           --mdc-menu-min-width: 200px;
         }
+        @media (min-width: 563px) {
+          paper-listbox {
+            max-height: 150px;
+            overflow: auto;
+          }
+        }
+        paper-item {
+          cursor: pointer;
+          min-height: 35px;
+        }
         mwc-list-item ha-svg-icon {
           color: var(--secondary-text-color);
         }

hassio/src/update-available/update-available-card.ts

@@ -33,12 +33,8 @@ import {
   extractApiErrorMessage,
   ignoreSupervisorError,
 } from "../../../src/data/hassio/common";
-import { fetchHassioHassOsInfo, updateOS } from "../../../src/data/hassio/host";
+import { updateOS } from "../../../src/data/hassio/host";
-import {
+import { updateSupervisor } from "../../../src/data/hassio/supervisor";
-  fetchHassioHomeAssistantInfo,
-  fetchHassioSupervisorInfo,
-  updateSupervisor,
-} from "../../../src/data/hassio/supervisor";
 import { updateCore } from "../../../src/data/supervisor/core";
 import { StoreAddon } from "../../../src/data/supervisor/store";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
@@ -192,7 +188,13 @@ class UpdateAvailableCard extends LitElement {
                     </a>`
                   : ""}
                 <span></span>
-                <ha-progress-button @click=${this._update} raised>
+                <ha-progress-button
+                  .disabled=${!this._version ||
+                  (this._shouldCreateBackup &&
+                    this.supervisor.info?.state !== "running")}
+                  @click=${this._update}
+                  raised
+                >
                   ${this.supervisor.localize("common.update")}
                 </ha-progress-button>
               </div>
@@ -210,22 +212,11 @@ class UpdateAvailableCard extends LitElement {
       : "addon";
     this._updateType = updateType as updateType;
 
-    switch (updateType) {
+    if (updateType === "addon") {
-      case "addon":
       if (!this.addonSlug) {
         this.addonSlug = pathPart;
       }
       this._loadAddonData();
-        break;
-      case "core":
-        this._loadCoreData();
-        break;
-      case "supervisor":
-        this._loadSupervisorData();
-        break;
-      case "os":
-        this._loadOsData();
-        break;
     }
   }
 
@@ -317,51 +308,9 @@ class UpdateAvailableCard extends LitElement {
     }
   }
 
-  private async _loadSupervisorData() {
-    try {
-      const supervisor = await fetchHassioSupervisorInfo(this.hass);
-      fireEvent(this, "supervisor-update", { supervisor });
-    } catch (err) {
-      showAlertDialog(this, {
-        title: this._updateType,
-        text: extractApiErrorMessage(err),
-      });
-    }
-  }
-
-  private async _loadCoreData() {
-    try {
-      const core = await fetchHassioHomeAssistantInfo(this.hass);
-      fireEvent(this, "supervisor-update", { core });
-    } catch (err) {
-      showAlertDialog(this, {
-        title: this._updateType,
-        text: extractApiErrorMessage(err),
-      });
-    }
-  }
-
-  private async _loadOsData() {
-    try {
-      const os = await fetchHassioHassOsInfo(this.hass);
-      fireEvent(this, "supervisor-update", { os });
-    } catch (err) {
-      showAlertDialog(this, {
-        title: this._updateType,
-        text: extractApiErrorMessage(err),
-      });
-    }
-  }
-
   private async _update() {
-    if (this._shouldCreateBackup && this.supervisor.info.state === "freeze") {
-      this._error = this.supervisor.localize("backup.backup_already_running");
-      return;
-    }
-
     this._error = undefined;
     this._updating = true;
-
     try {
       if (this._updateType === "addon") {
         await updateHassioAddon(

package.json

@@ -22,18 +22,17 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@braintree/sanitize-url": "^5.0.2",
-    "@codemirror/autocomplete": "^0.19.12",
+    "@codemirror/commands": "^0.19.5",
-    "@codemirror/commands": "^0.19.8",
+    "@codemirror/gutter": "^0.19.4",
-    "@codemirror/gutter": "^0.19.9",
+    "@codemirror/highlight": "^0.19.6",
-    "@codemirror/highlight": "^0.19.7",
+    "@codemirror/history": "^0.19.0",
-    "@codemirror/history": "^0.19.2",
     "@codemirror/legacy-modes": "^0.19.0",
     "@codemirror/rectangular-selection": "^0.19.1",
-    "@codemirror/search": "^0.19.6",
+    "@codemirror/search": "^0.19.2",
-    "@codemirror/state": "^0.19.6",
+    "@codemirror/state": "^0.19.4",
-    "@codemirror/stream-parser": "^0.19.5",
+    "@codemirror/stream-parser": "^0.19.2",
-    "@codemirror/text": "^0.19.6",
+    "@codemirror/text": "^0.19.5",
-    "@codemirror/view": "^0.19.40",
+    "@codemirror/view": "^0.19.15",
     "@formatjs/intl-datetimeformat": "^4.2.5",
     "@formatjs/intl-getcanonicallocales": "^1.8.0",
     "@formatjs/intl-locale": "^2.4.40",
@@ -46,7 +45,7 @@
     "@fullcalendar/daygrid": "5.9.0",
     "@fullcalendar/interaction": "5.9.0",
     "@fullcalendar/list": "5.9.0",
-    "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch",
+    "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch",
     "@material/chips": "14.0.0-canary.261f2db59.0",
     "@material/data-table": "14.0.0-canary.261f2db59.0",
     "@material/mwc-button": "0.25.3",
@@ -58,7 +57,7 @@
     "@material/mwc-formfield": "0.25.3",
     "@material/mwc-icon-button": "patch:@material/mwc-icon-button@0.25.3#./.yarn/patches/@material/mwc-icon-button/remove-icon.patch",
     "@material/mwc-linear-progress": "0.25.3",
-    "@material/mwc-list": "^0.25.3",
+    "@material/mwc-list": "0.25.3",
     "@material/mwc-menu": "0.25.3",
     "@material/mwc-radio": "0.25.3",
     "@material/mwc-ripple": "0.25.3",
@@ -67,7 +66,6 @@
     "@material/mwc-switch": "0.25.3",
     "@material/mwc-tab": "0.25.3",
     "@material/mwc-tab-bar": "0.25.3",
-    "@material/mwc-textarea": "^0.25.3",
     "@material/mwc-textfield": "0.25.3",
     "@material/mwc-top-app-bar-fixed": "^0.25.3",
     "@material/top-app-bar": "14.0.0-canary.261f2db59.0",
@@ -89,14 +87,13 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.5.4",
-    "@vaadin/combo-box": "^22.0.4",
+    "@vaadin/vaadin-combo-box": "^21.0.2",
-    "@vaadin/vaadin-themable-mixin": "^22.0.4",
+    "@vaadin/vaadin-date-picker": "^21.0.2",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
     "@vue/web-component-wrapper": "^1.2.0",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "app-datepicker": "^5.0.1",
     "chart.js": "^3.3.2",
     "comlink": "^4.3.1",
     "core-js": "^3.15.2",
@@ -113,8 +110,8 @@
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "lit": "^2.1.2",
+    "lit": "^2.0.2",
-    "lit-vaadin-helpers": "^0.3.0",
+    "lit-vaadin-helpers": "^0.2.1",
     "marked": "^3.0.2",
     "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",
@@ -171,7 +168,6 @@
     "@types/leaflet-draw": "^1",
     "@types/marked": "^2",
     "@types/mocha": "^8",
-    "@types/qrcode": "^1.4.2",
     "@types/sortablejs": "^1",
     "@types/webspeechapi": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^4.32.0",
@@ -239,10 +235,10 @@
   "resolutions": {
     "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "lit": "^2.1.2",
+    "lit": "^2.0.2",
-    "lit-html": "2.1.2",
+    "lit-html": "2.0.1",
-    "lit-element": "3.1.2",
+    "lit-element": "3.0.1",
-    "@lit/reactive-element": "1.2.1"
+    "@lit/reactive-element": "1.0.1"
   },
   "main": "src/home-assistant.js",
   "husky": {

pyproject.toml

@@ -1,3 +0,0 @@
-[build-system]
-requires = ["setuptools~=60.5", "wheel~=0.37.1"]
-build-backend = "setuptools.build_meta"

script/release

@@ -11,6 +11,6 @@ yarn install
 
 script/build_frontend
 
-rm -rf dist home_assistant_frontend.egg-info
+rm -rf dist
-python3 -m build
+python3 setup.py -q sdist
-python3 -m twine upload dist/*.whl --skip-existing
+python3 -m twine upload dist/* --skip-existing

script/version_bump.js

@@ -50,14 +50,14 @@ async function main(args) {
     return;
   }
 
-  const setup = fs.readFileSync("setup.cfg", "utf8");
+  const setup = fs.readFileSync("setup.py", "utf8");
   const version = setup.match(/\d{8}\.\d+/)[0];
   const newVersion = method(version);
 
   console.log("Current version:", version);
   console.log("New version:", newVersion);
 
-  fs.writeFileSync("setup.cfg", setup.replace(version, newVersion), "utf-8");
+  fs.writeFileSync("setup.py", setup.replace(version, newVersion), "utf-8");
 
   if (!commit) {
     return;

setup.cfg

@@ -1,21 +0,0 @@
-[metadata]
-name         = home-assistant-frontend
-version      = 20220203.0
-author       = The Home Assistant Authors
-author_email = hello@home-assistant.io
-license      = Apache-2.0
-platforms    = any
-description  = The Home Assistant frontend
-long_description = file: README.md
-long_description_content_type = text/markdown
-url          = https://github.com/home-assistant/frontend
-
-[options]
-packages = find:
-zip_safe = False
-include_package_data = True
-python_requires = >= 3.4.0
-
-[options.packages.find]
-include =
-    hass_frontend*

setup.py

@@ -1,7 +1,14 @@
-"""
+from setuptools import setup, find_packages
-Entry point for setuptools. Required for editable installs.
-TODO: Remove file after updating to pip 21.3
-"""
-from setuptools import setup
 
-setup()
+setup(
+    name="home-assistant-frontend",
+    version="20220118.0",
+    description="The Home Assistant frontend",
+    url="https://github.com/home-assistant/frontend",
+    author="The Home Assistant Authors",
+    author_email="hello@home-assistant.io",
+    license="Apache-2.0",
+    packages=find_packages(include=["hass_frontend", "hass_frontend.*"]),
+    include_package_data=True,
+    zip_safe=False,
+)

src/common/const.ts

@@ -184,7 +184,6 @@ export const DOMAINS_WITH_MORE_INFO = [
   "person",
   "remote",
   "script",
-  "scene",
   "sun",
   "timer",
   "vacuum",
@@ -235,7 +234,7 @@ export const DOMAINS_INPUT_ROW = [
 ];
 
 /** Domains that should have the history hidden in the more info dialog. */
-export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator"];
+export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator", "scene"];
 
 /** States that we consider "off". */
 export const STATES_OFF = ["closed", "locked", "off"];

src/common/datetime/create_duration_data.ts

@@ -1,5 +1,5 @@
-import type { HaDurationData } from "../../components/ha-duration-input";
+import { HaDurationData } from "../../components/ha-duration-input";
-import type { ForDict } from "../../data/automation";
+import { ForDict } from "../../data/automation";
 
 export const createDurationData = (
   duration: string | number | ForDict | undefined
@@ -19,9 +19,6 @@ export const createDurationData = (
     }
     return { seconds: duration };
   }
-  if (!("days" in duration)) {
-    return duration;
-  }
   const { days, minutes, seconds, milliseconds } = duration;
   let hours = duration.hours || 0;
   hours = (hours || 0) + (days || 0) * 24;

src/common/datetime/format_date_time.ts

@@ -13,19 +13,14 @@ export const formatDateTime = (dateObj: Date, locale: FrontendLocaleData) =>
 
 const formatDateTimeMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
+    new Intl.DateTimeFormat(locale.language, {
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
       year: "numeric",
       month: "long",
       day: "numeric",
       hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
       hour12: useAmPm(locale),
-      }
+    })
-    )
 );
 
 // August 9, 2021, 8:23:15 AM
@@ -36,11 +31,7 @@ export const formatDateTimeWithSeconds = (
 
 const formatDateTimeWithSecondsMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
+    new Intl.DateTimeFormat(locale.language, {
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
       year: "numeric",
       month: "long",
       day: "numeric",
@@ -48,8 +39,7 @@ const formatDateTimeWithSecondsMem = memoizeOne(
       minute: "2-digit",
       second: "2-digit",
       hour12: useAmPm(locale),
-      }
+    })
-    )
 );
 
 // 9/8/2021, 8:23 AM
@@ -60,17 +50,12 @@ export const formatDateTimeNumeric = (
 
 const formatDateTimeNumericMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
+    new Intl.DateTimeFormat(locale.language, {
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
       year: "numeric",
       month: "numeric",
       day: "numeric",
       hour: "numeric",
       minute: "2-digit",
       hour12: useAmPm(locale),
-      }
+    })
-    )
 );

src/common/datetime/format_time.ts

@@ -13,16 +13,11 @@ export const formatTime = (dateObj: Date, locale: FrontendLocaleData) =>
 
 const formatTimeMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
+    new Intl.DateTimeFormat(locale.language, {
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
       hour: "numeric",
       minute: "2-digit",
       hour12: useAmPm(locale),
-      }
+    })
-    )
 );
 
 // 9:15:24 PM || 21:15:24
@@ -33,17 +28,12 @@ export const formatTimeWithSeconds = (
 
 const formatTimeWithSecondsMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
+    new Intl.DateTimeFormat(locale.language, {
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
       hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
       second: "2-digit",
       hour12: useAmPm(locale),
-      }
+    })
-    )
 );
 
 // Tuesday 7:00 PM || Tuesday 19:00
@@ -52,15 +42,10 @@ export const formatTimeWeekday = (dateObj: Date, locale: FrontendLocaleData) =>
 
 const formatTimeWeekdayMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
+    new Intl.DateTimeFormat(locale.language, {
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
-        weekday: "long",
       hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
+      second: "2-digit",
       hour12: useAmPm(locale),
-      }
+    })
-    )
 );

src/common/decorators/local-storage.ts

@@ -5,10 +5,7 @@ import type { ClassElement } from "../../types";
 type Callback = (oldValue: any, newValue: any) => void;
 
 class Storage {
-  constructor(subscribe = true) {
+  constructor() {
-    if (!subscribe) {
-      return;
-    }
     window.addEventListener("storage", (ev: StorageEvent) => {
       if (ev.key && this.hasKey(ev.key)) {
         this._storage[ev.key] = ev.newValue
@@ -83,18 +80,15 @@ class Storage {
   }
 }
 
-const subscribeStorage = new Storage();
+const storage = new Storage();
 
 export const LocalStorage =
   (
     storageKey?: string,
     property?: boolean,
-    subscribe = true,
     propertyOptions?: PropertyDeclaration
   ): any =>
   (clsElement: ClassElement) => {
-    const storage = subscribe ? subscribeStorage : new Storage(false);
-
     const key = String(clsElement.key);
     storageKey = storageKey || String(clsElement.key);
     const initVal = clsElement.initializer
@@ -103,7 +97,7 @@ export const LocalStorage =
 
     storage.addFromStorage(storageKey);
 
-    const subscribeChanges = (el: ReactiveElement): UnsubscribeFunc =>
+    const subscribe = (el: ReactiveElement): UnsubscribeFunc =>
       storage.subscribeChanges(storageKey!, (oldValue) => {
         el.requestUpdate(clsElement.key, oldValue);
       });
@@ -137,19 +131,17 @@ export const LocalStorage =
         configurable: true,
       },
       finisher(cls: typeof ReactiveElement) {
-        if (property && subscribe) {
+        if (property) {
           const connectedCallback = cls.prototype.connectedCallback;
           const disconnectedCallback = cls.prototype.disconnectedCallback;
           cls.prototype.connectedCallback = function () {
             connectedCallback.call(this);
-            this[`__unbsubLocalStorage${key}`] = subscribeChanges(this);
+            this[`__unbsubLocalStorage${key}`] = subscribe(this);
           };
           cls.prototype.disconnectedCallback = function () {
             disconnectedCallback.call(this);
             this[`__unbsubLocalStorage${key}`]();
           };
-        }
-        if (property) {
           cls.createProperty(clsElement.key, {
             noAccessor: true,
             ...propertyOptions,

src/common/entity/compute_state_display.ts

@@ -43,7 +43,7 @@ export const computeStateDisplay = (
 
   if (domain === "input_datetime") {
     if (state !== undefined) {
-      // If trying to display an explicit state, need to parse the explicit state to `Date` then format.
+      // If trying to display an explicit state, need to parse the explict state to `Date` then format.
       // Attributes aren't available, we have to use `state`.
       try {
         const components = state.split(" ");
@@ -120,7 +120,6 @@ export const computeStateDisplay = (
   if (
     domain === "button" ||
     domain === "input_button" ||
-    domain === "scene" ||
     (domain === "sensor" && stateObj.attributes.device_class === "timestamp")
   ) {
     return formatDateTime(new Date(compareState), locale);

src/common/number/clamp.ts

@@ -1,10 +1,2 @@
 export const clamp = (value: number, min: number, max: number) =>
   Math.min(Math.max(value, min), max);
-
-// Variant that only applies the clamping to a border if the border is defined
-export const conditionalClamp = (value: number, min?: number, max?: number) => {
-  let result: number;
-  result = min ? Math.max(value, min) : value;
-  result = max ? Math.min(value, max) : value;
-  return result;
-};

src/common/search/search-input.ts

@@ -1,10 +1,17 @@
 import { mdiClose, mdiMagnify } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import "@polymer/paper-input/paper-input";
+import type { PaperInputElement } from "@polymer/paper-input/paper-input";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../components/ha-icon-button";
 import "../../components/ha-svg-icon";
-import "../../components/ha-textfield";
-import type { HaTextField } from "../../components/ha-textfield";
 import { HomeAssistant } from "../../types";
 import { fireEvent } from "../dom/fire_event";
 
@@ -14,6 +21,12 @@ class SearchInput extends LitElement {
 
   @property() public filter?: string;
 
+  @property({ type: Boolean, attribute: "no-label-float" })
+  public noLabelFloat? = false;
+
+  @property({ type: Boolean, attribute: "no-underline" })
+  public noUnderline = false;
+
   @property({ type: Boolean })
   public autofocus = false;
 
@@ -21,42 +34,49 @@ class SearchInput extends LitElement {
   public label?: string;
 
   public focus() {
-    this._input?.focus();
+    this.shadowRoot!.querySelector("paper-input")!.focus();
   }
 
-  @query("ha-textfield", true) private _input!: HaTextField;
+  @query("paper-input", true) private _input!: PaperInputElement;
 
   protected render(): TemplateResult {
     return html`
-      <ha-textfield
+      <paper-input
         .autofocus=${this.autofocus}
         .label=${this.label || "Search"}
-        .value=${this.filter || ""}
+        .value=${this.filter}
-        .icon=${true}
+        @value-changed=${this._filterInputChanged}
-        .iconTrailing=${this.filter}
+        .noLabelFloat=${this.noLabelFloat}
-        @input=${this._filterInputChanged}
       >
-        <slot name="prefix" slot="leadingIcon">
+        <slot name="prefix" slot="prefix">
-          <ha-svg-icon
+          <ha-svg-icon class="prefix" .path=${mdiMagnify}></ha-svg-icon>
-            tabindex="-1"
-            class="prefix"
-            .path=${mdiMagnify}
-          ></ha-svg-icon>
         </slot>
         ${this.filter &&
         html`
           <ha-icon-button
-            slot="trailingIcon"
+            slot="suffix"
             @click=${this._clearSearch}
             .label=${this.hass.localize("ui.common.clear")}
             .path=${mdiClose}
-            class="clear-button"
           ></ha-icon-button>
         `}
-      </ha-textfield>
+      </paper-input>
     `;
   }
 
+  protected updated(changedProps: PropertyValues) {
+    if (
+      changedProps.has("noUnderline") &&
+      (this.noUnderline || changedProps.get("noUnderline") !== undefined)
+    ) {
+      (
+        this._input.inputElement!.parentElement!.shadowRoot!.querySelector(
+          "div.unfocused-line"
+        ) as HTMLElement
+      ).style.display = this.noUnderline ? "none" : "block";
+    }
+  }
+
   private async _filterChanged(value: string) {
     fireEvent(this, "value-changed", { value: String(value) });
   }
@@ -71,24 +91,15 @@ class SearchInput extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      :host {
-        display: inline-flex;
-      }
       ha-svg-icon,
       ha-icon-button {
         color: var(--primary-text-color);
       }
-      ha-svg-icon {
-        outline: none;
-      }
       ha-icon-button {
         --mdc-icon-button-size: 24px;
       }
-      .clear-button {
+      ha-svg-icon.prefix {
-        --mdc-icon-size: 20px;
+        margin: 8px;
-      }
-      ha-textfield {
-        display: inherit;
       }
     `;
   }

src/components/buttons/ha-progress-button.ts

@@ -68,7 +68,6 @@ export class HaProgressButton extends LitElement {
         --mdc-theme-primary: white;
         background-color: var(--success-color);
         transition: none;
-        border-radius: 4px;
       }
 
       mwc-button[raised].success {
@@ -80,7 +79,6 @@ export class HaProgressButton extends LitElement {
         --mdc-theme-primary: white;
         background-color: var(--error-color);
         transition: none;
-        border-radius: 4px;
       }
 
       mwc-button[raised].error {

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

@@ -183,7 +183,12 @@ class StateHistoryChartLine extends LitElement {
         prevValues = datavalues;
       };
 
-      const addDataSet = (nameY: string, fill = false, color?: string) => {
+      const addDataSet = (
+        nameY: string,
+        step = false,
+        fill = false,
+        color?: string
+      ) => {
         if (!color) {
           color = getGraphColorByIndex(colorIndex, computedStyles);
           colorIndex++;
@@ -193,7 +198,7 @@ class StateHistoryChartLine extends LitElement {
           fill: fill ? "origin" : false,
           borderColor: color,
           backgroundColor: color + "7F",
-          stepped: "before",
+          stepped: step ? "before" : false,
           pointRadius: 0,
           data: [],
         });
@@ -234,12 +239,14 @@ class StateHistoryChartLine extends LitElement {
         addDataSet(
           `${this.hass.localize("ui.card.climate.current_temperature", {
             name: name,
-          })}`
+          })}`,
+          true
         );
         if (hasHeat) {
           addDataSet(
             `${this.hass.localize("ui.card.climate.heating", { name: name })}`,
             true,
+            true,
             computedStyles.getPropertyValue("--state-climate-heat-color")
           );
           // The "heating" series uses steppedArea to shade the area below the current
@@ -249,6 +256,7 @@ class StateHistoryChartLine extends LitElement {
           addDataSet(
             `${this.hass.localize("ui.card.climate.cooling", { name: name })}`,
             true,
+            true,
             computedStyles.getPropertyValue("--state-climate-cool-color")
           );
           // The "cooling" series uses steppedArea to shade the area below the current
@@ -260,19 +268,22 @@ class StateHistoryChartLine extends LitElement {
             `${this.hass.localize("ui.card.climate.target_temperature_mode", {
               name: name,
               mode: this.hass.localize("ui.card.climate.high"),
-            })}`
+            })}`,
+            true
           );
           addDataSet(
             `${this.hass.localize("ui.card.climate.target_temperature_mode", {
               name: name,
               mode: this.hass.localize("ui.card.climate.low"),
-            })}`
+            })}`,
+            true
           );
         } else {
           addDataSet(
             `${this.hass.localize("ui.card.climate.target_temperature_entity", {
               name: name,
-            })}`
+            })}`,
+            true
           );
         }
 
@@ -307,12 +318,14 @@ class StateHistoryChartLine extends LitElement {
         addDataSet(
           `${this.hass.localize("ui.card.humidifier.target_humidity_entity", {
             name: name,
-          })}`
+          })}`,
+          true
         );
         addDataSet(
           `${this.hass.localize("ui.card.humidifier.on_entity", {
             name: name,
           })}`,
+          true,
           true
         );
 
@@ -324,7 +337,9 @@ class StateHistoryChartLine extends LitElement {
           pushData(new Date(entityState.last_changed), series);
         });
       } else {
-        addDataSet(name);
+        // Only interpolate for sensors
+        const isStep = domain !== "sensor";
+        addDataSet(name, isStep);
 
         let lastValue: number;
         let lastDate: Date;

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

@@ -1,3 +1,4 @@
+import { Layout1d, scroll } from "@lit-labs/virtualizer";
 import { mdiArrowDown, mdiArrowUp } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import {
@@ -30,7 +31,6 @@ import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-svg-icon";
 import { filterData, sortData } from "./sort-filter";
 import { HomeAssistant } from "../../types";
-import "@lit-labs/virtualizer";
 
 declare global {
   // for fire event
@@ -70,7 +70,6 @@ export interface DataTableSortColumnData {
 
 export interface DataTableColumnData<T = any> extends DataTableSortColumnData {
   title: TemplateResult | string;
-  label?: TemplateResult | string;
   type?: "numeric" | "icon" | "icon-button" | "overflow-menu";
   template?: (data: any, row: T) => TemplateResult | string;
   width?: string;
@@ -295,7 +294,6 @@ export class HaDataTable extends LitElement {
               };
               return html`
                 <div
-                  aria-label=${column.label}
                   class="mdc-data-table__header-cell ${classMap(classes)}"
                   style=${column.width
                     ? styleMap({
@@ -339,47 +337,41 @@ export class HaDataTable extends LitElement {
                 </div>
               `
             : html`
-                <lit-virtualizer
+                <div
-                  scroller
                   class="mdc-data-table__content scroller ha-scrollbar"
                   @scroll=${this._saveScrollPos}
-                  .items=${this._items}
+                >
-                  .renderItem=${this._renderRow}
+                  ${scroll({
-                ></lit-virtualizer>
+                    items: this._items,
-              `}
+                    layout: Layout1d,
-        </div>
+                    renderItem: (row: DataTableRowData, index) => {
-      </div>
-    `;
-  }
-
-  private _renderRow = (
-    row: DataTableRowData,
-    index: number
-  ): TemplateResult => {
                       // not sure how this happens...
                       if (!row) {
                         return html``;
                       }
                       if (row.append) {
-      return html` <div class="mdc-data-table__row">${row.content}</div> `;
+                        return html`
+                          <div class="mdc-data-table__row">${row.content}</div>
+                        `;
                       }
                       if (row.empty) {
                         return html` <div class="mdc-data-table__row"></div> `;
                       }
                       return html`
                         <div
-        aria-rowindex=${index + 2}
+                          aria-rowindex=${index! + 2}
                           role="row"
                           .rowId=${row[this.id]}
                           @click=${this._handleRowClick}
                           class="mdc-data-table__row ${classMap({
-          "mdc-data-table__row--selected": this._checkedRows.includes(
+                            "mdc-data-table__row--selected":
-            String(row[this.id])
+                              this._checkedRows.includes(String(row[this.id])),
-          ),
                             clickable: this.clickable,
                           })}"
                           aria-selected=${ifDefined(
-          this._checkedRows.includes(String(row[this.id])) ? true : undefined
+                            this._checkedRows.includes(String(row[this.id]))
+                              ? true
+                              : undefined
                           )}
                           .selectable=${row.selectable !== false}
                         >
@@ -394,13 +386,16 @@ export class HaDataTable extends LitElement {
                                     @change=${this._handleRowCheckboxClick}
                                     .rowId=${row[this.id]}
                                     .disabled=${row.selectable === false}
-                  .checked=${this._checkedRows.includes(String(row[this.id]))}
+                                    .checked=${this._checkedRows.includes(
+                                      String(row[this.id])
+                                    )}
                                   >
                                   </ha-checkbox>
                                 </div>
                               `
                             : ""}
-        ${Object.entries(this.columns).map(([key, column]) => {
+                          ${Object.entries(this.columns).map(
+                            ([key, column]) => {
                               if (column.hidden) {
                                 return "";
                               }
@@ -408,8 +403,10 @@ export class HaDataTable extends LitElement {
                                 <div
                                   role="cell"
                                   class="mdc-data-table__cell ${classMap({
-                "mdc-data-table__cell--numeric": column.type === "numeric",
+                                    "mdc-data-table__cell--numeric":
-                "mdc-data-table__cell--icon": column.type === "icon",
+                                      column.type === "numeric",
+                                    "mdc-data-table__cell--icon":
+                                      column.type === "icon",
                                     "mdc-data-table__cell--icon-button":
                                       column.type === "icon-button",
                                     "mdc-data-table__cell--overflow-menu":
@@ -419,18 +416,31 @@ export class HaDataTable extends LitElement {
                                   })}"
                                   style=${column.width
                                     ? styleMap({
-                    [column.grows ? "minWidth" : "width"]: column.width,
+                                        [column.grows ? "minWidth" : "width"]:
-                    maxWidth: column.maxWidth ? column.maxWidth : "",
+                                          column.width,
+                                        maxWidth: column.maxWidth
+                                          ? column.maxWidth
+                                          : "",
                                       })
                                     : ""}
                                 >
-              ${column.template ? column.template(row[key], row) : row[key]}
+                                  ${column.template
+                                    ? column.template(row[key], row)
+                                    : row[key]}
                                 </div>
                               `;
+                            }
+                          )}
+                        </div>
+                      `;
+                    },
                   })}
                 </div>
+              `}
+        </div>
+      </div>
     `;
-  };
+  }
 
   private async _sortFilterData() {
     const startTime = new Date().getTime();
@@ -526,7 +536,7 @@ export class HaDataTable extends LitElement {
     }
   }
 
-  private _handleRowCheckboxClick = (ev: Event) => {
+  private _handleRowCheckboxClick(ev: Event) {
     const checkbox = ev.currentTarget as HaCheckbox;
     const rowId = (checkbox as any).rowId;
 
@@ -539,16 +549,16 @@ export class HaDataTable extends LitElement {
       this._checkedRows = this._checkedRows.filter((row) => row !== rowId);
     }
     this._checkedRowsChanged();
-  };
+  }
 
-  private _handleRowClick = (ev: Event) => {
+  private _handleRowClick(ev: Event) {
     const target = ev.target as HTMLElement;
     if (["HA-CHECKBOX", "MWC-BUTTON"].includes(target.tagName)) {
       return;
     }
     const rowId = (ev.currentTarget as any).rowId;
     fireEvent(this, "row-click", { id: rowId }, { bubbles: false });
-  };
+  }
 
   private _checkedRowsChanged() {
     // force scroller to update, change it's items
@@ -561,9 +571,6 @@ export class HaDataTable extends LitElement {
   }
 
   private _handleSearchChange(ev: CustomEvent): void {
-    if (this.filter) {
-      return;
-    }
     this._debounceSearch(ev.detail.value);
   }
 
@@ -928,10 +935,11 @@ export class HaDataTable extends LitElement {
         }
         .table-header {
           border-bottom: 1px solid var(--divider-color);
+          padding: 0 16px;
         }
         search-input {
-          display: block;
+          position: relative;
-          flex: 1;
+          top: 2px;
         }
         slot[name="header"] {
           display: block;
@@ -944,7 +952,6 @@ export class HaDataTable extends LitElement {
         }
         .scroller {
           height: calc(100% - 57px);
-          overflow: overlay !important;
         }
 
         .mdc-data-table__table.auto-height .scroller {
@@ -960,9 +967,6 @@ export class HaDataTable extends LitElement {
         .clickable {
           cursor: pointer;
         }
-        lit-virtualizer {
-          contain: size layout !important;
-        }
       `,
     ];
   }

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

@@ -1,7 +1,20 @@
 import "@material/mwc-button/mwc-button";
+import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-listbox/paper-listbox";
+import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import {
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -37,12 +50,36 @@ interface AreaDevices {
   devices: string[];
 }
 
-const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (
+// eslint-disable-next-line lit/prefer-static-styles
-  item
+const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (item) => html`<style>
-) => html`<mwc-list-item twoline>
+    paper-item {
-  <span>${item.name}</span>
+      padding: 0;
-  <span slot="secondary">${item.devices.length} devices</span>
+      margin: -10px;
-</mwc-list-item>`;
+      margin-left: 0;
+    }
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      margin-right: -2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-item {
+      margin-left: 10px;
+    }
+  </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
+  <paper-item>
+    <paper-item-body two-line="">
+      <div class="name">${item.name}</div>
+      <div secondary>${item.devices.length} devices</div>
+    </paper-item-body>
+  </paper-item>`;
 
 @customElement("ha-area-devices-picker")
 export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
@@ -80,6 +117,9 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
   @property({ type: Array, attribute: "include-device-classes" })
   public includeDeviceClasses?: string[];
 
+  @property({ type: Boolean })
+  private _opened?: boolean;
+
   @state() private _areaPicker = true;
 
   @state() private _devices?: DeviceRegistryEntry[];
@@ -262,30 +302,71 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
       `;
     }
     return html`
-      <ha-combo-box
+      <vaadin-combo-box-light
-        .hass=${this.hass}
         item-value-path="id"
         item-id-path="id"
         item-label-path="name"
         .items=${areas}
         .value=${this._value}
-        .renderer=${rowRenderer}
+        ${comboBoxRenderer(rowRenderer)}
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._areaPicked}
+      >
+        <paper-input
           .label=${this.label === undefined && this.hass
             ? this.hass.localize("ui.components.device-picker.device")
             : `${this.label} in area`}
-        @value-changed=${this._areaPicked}
+          class="input"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+        >
+          <div class="suffix" slot="suffix">
+            ${this.value
+              ? html`<ha-icon-button
+                  class="clear-button"
+                  .label=${this.hass.localize(
+                    "ui.components.device-picker.clear"
+                  )}
+                  .path=${mdiClose}
+                  @click=${this._clearValue}
+                  no-ripple
+                ></ha-icon-button> `
+              : ""}
+            ${areas.length > 0
+              ? html`
+                  <ha-icon-button
+                    .label=${this.hass.localize(
+                      "ui.components.device-picker.show_devices"
+                    )}
+                    .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+                    class="toggle-button"
+                  ></ha-icon-button>
+                `
+              : ""}
+          </div>
+        </paper-input>
+      </vaadin-combo-box-light>
+      <mwc-button @click=${this._switchPicker}
+        >Choose individual devices</mwc-button
       >
-      </ha-combo-box>
-      <mwc-button @click=${this._switchPicker}>
-        Choose individual devices
-      </mwc-button>
     `;
   }
 
+  private _clearValue(ev: Event) {
+    ev.stopPropagation();
+    this._setValue([]);
+  }
+
   private get _value() {
     return this.value || [];
   }
 
+  private _openedChanged(ev: PolymerChangedEvent<boolean>) {
+    this._opened = ev.detail.value;
+  }
+
   private async _switchPicker() {
     this._areaPicker = !this._areaPicker;
   }
@@ -317,6 +398,22 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
       fireEvent(this, "change");
     }, 0);
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .suffix {
+        display: flex;
+      }
+      ha-icon-button {
+        --mdc-icon-button-size: 24px;
+        padding: 0px 2px;
+        color: var(--secondary-text-color);
+      }
+      [hidden] {
+        display: none;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,5 +1,7 @@
-import "@material/mwc-list/mwc-list-item";
+import "@polymer/paper-input/paper-input";
-import "@material/mwc-select/mwc-select";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -8,6 +10,7 @@ import {
   deviceAutomationsEqual,
 } from "../../data/device_automation";
 import { HomeAssistant } from "../../types";
+import "../ha-paper-dropdown-menu";
 
 const NO_AUTOMATION_KEY = "NO_AUTOMATION";
 const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
@@ -64,12 +67,14 @@ export abstract class HaDeviceAutomationPicker<
     this._createNoAutomation = createNoAutomation;
   }
 
-  private get _value() {
+  private get _key() {
-    if (!this.value) {
+    if (
-      return "";
+      !this.value ||
-    }
+      deviceAutomationsEqual(
-
+        this._createNoAutomation(this.deviceId),
-    if (!this._automations.length) {
+        this.value
+      )
+    ) {
       return NO_AUTOMATION_KEY;
     }
 
@@ -88,32 +93,42 @@ export abstract class HaDeviceAutomationPicker<
     if (this._renderEmpty) {
       return html``;
     }
-    const value = this._value;
     return html`
-      <mwc-select
+      <ha-paper-dropdown-menu
         .label=${this.label}
-        .value=${value}
+        .value=${this.value
-        @selected=${this._automationChanged}
+          ? this._localizeDeviceAutomation(this.hass, this.value)
-        .disabled=${this._automations.length === 0}
+          : ""}
+        ?disabled=${this._automations.length === 0}
+      >
+        <paper-listbox
+          slot="dropdown-content"
+          .selected=${this._key}
+          attr-for-selected="key"
+          @iron-select=${this._automationChanged}
+        >
+          <paper-item
+            key=${NO_AUTOMATION_KEY}
+            .automation=${this._createNoAutomation(this.deviceId)}
+            hidden
           >
-        ${value === NO_AUTOMATION_KEY
-          ? html`<mwc-list-item .value=${NO_AUTOMATION_KEY}>
             ${this.NO_AUTOMATION_TEXT}
-            </mwc-list-item>`
+          </paper-item>
-          : ""}
+          <paper-item key=${UNKNOWN_AUTOMATION_KEY} hidden>
-        ${value === UNKNOWN_AUTOMATION_KEY
-          ? html`<mwc-list-item .value=${UNKNOWN_AUTOMATION_KEY}>
             ${this.UNKNOWN_AUTOMATION_TEXT}
-            </mwc-list-item>`
+          </paper-item>
-          : ""}
           ${this._automations.map(
             (automation, idx) => html`
-            <mwc-list-item .value=${`${automation.device_id}_${idx}`}>
+              <paper-item
+                key=${`${this.deviceId}_${idx}`}
+                .automation=${automation}
+              >
                 ${this._localizeDeviceAutomation(this.hass, automation)}
-            </mwc-list-item>
+              </paper-item>
             `
           )}
-      </mwc-select>
+        </paper-listbox>
+      </ha-paper-dropdown-menu>
     `;
   }
 
@@ -123,6 +138,14 @@ export abstract class HaDeviceAutomationPicker<
     if (changedProps.has("deviceId")) {
       this._updateDeviceInfo();
     }
+
+    // The value has changed, force the listbox to update
+    if (changedProps.has("value") || changedProps.has("_renderEmpty")) {
+      const listbox = this.shadowRoot!.querySelector("paper-listbox")!;
+      if (listbox) {
+        listbox._selectSelected(this._key);
+      }
+    }
   }
 
   private async _updateDeviceInfo() {
@@ -145,16 +168,9 @@ export abstract class HaDeviceAutomationPicker<
   }
 
   private _automationChanged(ev) {
-    const value = ev.target.value;
+    if (ev.detail.item.automation) {
-    if (!value || [UNKNOWN_AUTOMATION_KEY, NO_AUTOMATION_KEY].includes(value)) {
+      this._setValue(ev.detail.item.automation);
-      return;
     }
-    const [deviceId, idx] = value.split("_");
-    const automation = this._automations[idx];
-    if (automation.device_id !== deviceId) {
-      return;
-    }
-    this._setValue(automation);
   }
 
   private _setValue(automation: T) {
@@ -167,9 +183,14 @@ export abstract class HaDeviceAutomationPicker<
 
   static get styles(): CSSResultGroup {
     return css`
-      mwc-select {
+      ha-paper-dropdown-menu {
         width: 100%;
-        margin-top: 4px;
+      }
+      paper-listbox {
+        min-width: 200px;
+      }
+      paper-item {
+        cursor: pointer;
       }
     `;
   }

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

@@ -1,9 +1,18 @@
-import "@material/mwc-list/mwc-list-item";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import {
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+  css,
-import { customElement, property, query, state } from "lit/decorators";
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { mdiCheck } from "@mdi/js";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { stringCompare } from "../../common/string/compare";
@@ -37,12 +46,36 @@ export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
 ) => boolean;
 
-const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<mwc-list-item
+// eslint-disable-next-line lit/prefer-static-styles
-  .twoline=${!!item.area}
+const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<style>
->
+    paper-item {
-  <span>${item.name}</span>
+      padding: 0;
-  <span slot="secondary">${item.area}</span>
+      margin: -10px;
-</mwc-list-item>`;
+      margin-left: 0;
+    }
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      margin-right: -2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-item {
+      margin-left: 10px;
+    }
+  </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
+  <paper-item>
+    <paper-item-body two-line>
+      ${item.name}
+      <span secondary>${item.area}</span>
+    </paper-item-body>
+  </paper-item>`;
 
 @customElement("ha-device-picker")
 export class HaDevicePicker extends SubscribeMixin(LitElement) {
@@ -105,7 +138,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       if (!devices.length) {
         return [
           {
-            id: "no_devices",
+            id: "",
             area: "",
             name: this.hass.localize("ui.components.device-picker.no_devices"),
           },
@@ -201,7 +234,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       if (!outputDevices.length) {
         return [
           {
-            id: "no_devices",
+            id: "",
             area: "",
             name: this.hass.localize("ui.components.device-picker.no_match"),
           },
@@ -270,6 +303,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
         .renderer=${rowRenderer}
         .disabled=${this.disabled}
         item-value-path="id"
+        item-id-path="id"
         item-label-path="name"
         @opened-changed=${this._openedChanged}
         @value-changed=${this._deviceChanged}
@@ -283,11 +317,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   private _deviceChanged(ev: PolymerChangedEvent<string>) {
     ev.stopPropagation();
-    let newValue = ev.detail.value;
+    const newValue = ev.detail.value;
-
-    if (newValue === "no_devices") {
-      newValue = "";
-    }
 
     if (newValue !== this._value) {
       this._setValue(newValue);
@@ -305,6 +335,19 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       fireEvent(this, "change");
     }, 0);
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      paper-input > ha-icon-button {
+        --mdc-icon-button-size: 24px;
+        padding: 2px;
+        color: var(--secondary-text-color);
+      }
+      [hidden] {
+        display: none;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
@@ -145,12 +145,6 @@ class HaEntitiesPickerLight extends LitElement {
 
     this._updateEntities([...currentEntities, toAdd]);
   }
-
-  static override styles = css`
-    ha-entity-picker {
-      margin-top: 8px;
-    }
-  `;
 }
 
 declare global {

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

@@ -1,14 +1,54 @@
+import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-item";
+import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query } from "lit/decorators";
-import { formatAttributeName } from "../../data/entity_attributes";
+import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import "../ha-combo-box";
+import { formatAttributeName } from "../../util/hass-attributes-util";
-import type { HaComboBox } from "../ha-combo-box";
+import "../ha-icon-button";
+import "../ha-svg-icon";
+import "./state-badge";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
+// eslint-disable-next-line lit/prefer-static-styles
+const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
+    paper-item {
+      padding: 0;
+      margin: -10px;
+      margin-left: 0;
+    }
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      margin-right: -2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-item {
+      margin-left: 10px;
+    }
+  </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
+  <paper-item>${formatAttributeName(item)}</paper-item>`;
+
 @customElement("ha-entity-attribute-picker")
 class HaEntityAttributePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -28,7 +68,7 @@ class HaEntityAttributePicker extends LitElement {
 
   @property({ type: Boolean }) private _opened = false;
 
-  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
+  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
 
   protected shouldUpdate(changedProps: PropertyValues) {
     return !(!changedProps.has("_opened") && this._opened);
@@ -38,10 +78,7 @@ class HaEntityAttributePicker extends LitElement {
     if (changedProps.has("_opened") && this._opened) {
       const state = this.entityId ? this.hass.states[this.entityId] : undefined;
       (this._comboBox as any).items = state
-        ? Object.keys(state.attributes).map((key) => ({
+        ? Object.keys(state.attributes)
-            value: key,
-            label: formatAttributeName(key),
-          }))
         : [];
     }
   }
@@ -52,31 +89,100 @@ class HaEntityAttributePicker extends LitElement {
     }
 
     return html`
-      <ha-combo-box
+      <vaadin-combo-box-light
-        .hass=${this.hass}
+        .value=${this._value}
-        .value=${this.value || ""}
+        .allowCustomValue=${this.allowCustomValue}
+        attr-for-value="bind-value"
+        ${comboBoxRenderer(rowRenderer)}
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._valueChanged}
+      >
+        <paper-input
           .autofocus=${this.autofocus}
           .label=${this.label ??
           this.hass.localize(
             "ui.components.entity.entity-attribute-picker.attribute"
           )}
+          .value=${this._value ? formatAttributeName(this._value) : ""}
           .disabled=${this.disabled || !this.entityId}
-        .allowCustomValue=${this.allowCustomValue}
+          class="input"
-        item-value-path="value"
+          autocapitalize="none"
-        item-label-path="label"
+          autocomplete="off"
-        @opened-changed=${this._openedChanged}
+          autocorrect="off"
-        @value-changed=${this._valueChanged}
+          spellcheck="false"
         >
-      </ha-combo-box>
+          <div class="suffix" slot="suffix">
+            ${this.value
+              ? html`
+                  <ha-icon-button
+                    .label=${this.hass.localize(
+                      "ui.components.entity.entity-picker.clear"
+                    )}
+                    .path=${mdiClose}
+                    class="clear-button"
+                    tabindex="-1"
+                    @click=${this._clearValue}
+                    no-ripple
+                  ></ha-icon-button>
+                `
+              : ""}
+
+            <ha-icon-button
+              .label=${this.hass.localize(
+                "ui.components.entity.entity-attribute-picker.show_attributes"
+              )}
+              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+              class="toggle-button"
+              tabindex="-1"
+            ></ha-icon-button>
+          </div>
+        </paper-input>
+      </vaadin-combo-box-light>
     `;
   }
 
+  private _clearValue(ev: Event) {
+    ev.stopPropagation();
+    this._setValue("");
+  }
+
+  private get _value() {
+    return this.value;
+  }
+
   private _openedChanged(ev: PolymerChangedEvent<boolean>) {
     this._opened = ev.detail.value;
   }
 
   private _valueChanged(ev: PolymerChangedEvent<string>) {
-    this.value = ev.detail.value;
+    const newValue = ev.detail.value;
+    if (newValue !== this._value) {
+      this._setValue(newValue);
+    }
+  }
+
+  private _setValue(value: string) {
+    this.value = value;
+    setTimeout(() => {
+      fireEvent(this, "value-changed", { value });
+      fireEvent(this, "change");
+    }, 0);
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .suffix {
+        display: flex;
+      }
+      ha-icon-button {
+        --mdc-icon-button-size: 24px;
+        padding: 0px 2px;
+        color: var(--secondary-text-color);
+      }
+      [hidden] {
+        display: none;
+      }
+    `;
   }
 }
 

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

@@ -1,16 +1,25 @@
-import "@material/mwc-list/mwc-list-item";
+import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item-body";
+import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import {
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+  css,
-import { customElement, property, query, state } from "lit/decorators";
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import "../ha-combo-box";
-import type { HaComboBox } from "../ha-combo-box";
 import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
@@ -18,15 +27,35 @@ import "./state-badge";
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
 // eslint-disable-next-line lit/prefer-static-styles
-const rowRenderer: ComboBoxLitRenderer<HassEntity & { friendly_name: string }> =
+const rowRenderer: ComboBoxLitRenderer<HassEntity> = (item) => html`<style>
-  (item) =>
+    paper-icon-item {
-    html`<mwc-list-item graphic="avatar" .twoline=${!!item.entity_id}>
+      padding: 0;
-      ${item.state
+      margin: -8px;
-        ? html`<state-badge slot="graphic" .stateObj=${item}></state-badge>`
+    }
-        : ""}
+    #content {
-      <span>${item.friendly_name}</span>
+      display: flex;
-      <span slot="secondary">${item.entity_id}</span>
+      align-items: center;
-    </mwc-list-item>`;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-icon-item {
+      margin-left: 0;
+    }
+  </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
+  <paper-icon-item>
+    <state-badge slot="item-icon" .stateObj=${item}></state-badge>
+    <paper-item-body two-line="">
+      ${computeStateName(item)}
+      <span secondary>${item.entity_id}</span>
+    </paper-item-body>
+  </paper-icon-item>`;
+
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -78,19 +107,19 @@ export class HaEntityPicker extends LitElement {
 
   @property({ type: Boolean }) public hideClearIcon = false;
 
-  @state() private _opened = false;
+  @property({ type: Boolean }) private _opened = false;
 
-  @query("ha-combo-box", true) public comboBox!: HaComboBox;
+  @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement;
 
   public open() {
     this.updateComplete.then(() => {
-      this.comboBox?.open();
+      (this.shadowRoot?.querySelector("vaadin-combo-box-light") as any)?.open();
     });
   }
 
   public focus() {
     this.updateComplete.then(() => {
-      this.comboBox?.focus();
+      this.shadowRoot?.querySelector("paper-input")?.focus();
     });
   }
 
@@ -115,27 +144,6 @@ export class HaEntityPicker extends LitElement {
       }
       let entityIds = Object.keys(hass.states);
 
-      if (!entityIds.length) {
-        return [
-          {
-            entity_id: "",
-            state: "",
-            last_changed: "",
-            last_updated: "",
-            context: { id: "", user_id: null },
-            friendly_name: this.hass!.localize(
-              "ui.components.entity.entity-picker.no_entities"
-            ),
-            attributes: {
-              friendly_name: this.hass!.localize(
-                "ui.components.entity.entity-picker.no_entities"
-              ),
-              icon: "mdi:magnify",
-            },
-          },
-        ];
-      }
-
       if (includeDomains) {
         entityIds = entityIds.filter((eid) =>
           includeDomains.includes(computeDomain(eid))
@@ -148,10 +156,7 @@ export class HaEntityPicker extends LitElement {
         );
       }
 
-      states = entityIds.sort().map((key) => ({
+      states = entityIds.sort().map((key) => hass!.states[key]);
-        ...hass!.states[key],
-        friendly_name: computeStateName(hass!.states[key]) || key,
-      }));
 
       if (includeDeviceClasses) {
         states = states.filter(
@@ -191,9 +196,6 @@ export class HaEntityPicker extends LitElement {
             last_changed: "",
             last_updated: "",
             context: { id: "", user_id: null },
-            friendly_name: this.hass!.localize(
-              "ui.components.entity.entity-picker.no_match"
-            ),
             attributes: {
               friendly_name: this.hass!.localize(
                 "ui.components.entity.entity-picker.no_match"
@@ -239,25 +241,64 @@ export class HaEntityPicker extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-combo-box
+      <vaadin-combo-box-light
         item-value-path="entity_id"
-        item-label-path="friendly_name"
+        item-label-path="entity_id"
-        .hass=${this.hass}
         .value=${this._value}
-        .label=${this.label === undefined
-          ? this.hass.localize("ui.components.entity.entity-picker.entity")
-          : this.label}
         .allowCustomValue=${this.allowCustomEntity}
         .filteredItems=${this._states}
-        .renderer=${rowRenderer}
+        ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
         @filter-changed=${this._filterChanged}
       >
-      </ha-combo-box>
+        <paper-input
+          .autofocus=${this.autofocus}
+          .label=${this.label === undefined
+            ? this.hass.localize("ui.components.entity.entity-picker.entity")
+            : this.label}
+          .disabled=${this.disabled}
+          class="input"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+        >
+          <div class="suffix" slot="suffix">
+            ${this.value && !this.hideClearIcon
+              ? html`
+                  <ha-icon-button
+                    .label=${this.hass.localize(
+                      "ui.components.entity.entity-picker.clear"
+                    )}
+                    .path=${mdiClose}
+                    class="clear-button"
+                    tabindex="-1"
+                    @click=${this._clearValue}
+                    no-ripple
+                  ></ha-icon-button>
+                `
+              : ""}
+
+            <ha-icon-button
+              .label=${this.hass.localize(
+                "ui.components.entity.entity-picker.show_entities"
+              )}
+              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+              class="toggle-button"
+              tabindex="-1"
+            ></ha-icon-button>
+          </div>
+        </paper-input>
+      </vaadin-combo-box-light>
     `;
   }
 
+  private _clearValue(ev: Event) {
+    ev.stopPropagation();
+    this._setValue("");
+  }
+
   private get _value() {
     return this.value || "";
   }
@@ -267,7 +308,6 @@ export class HaEntityPicker extends LitElement {
   }
 
   private _valueChanged(ev: PolymerChangedEvent<string>) {
-    ev.stopPropagation();
     const newValue = ev.detail.value;
     if (newValue !== this._value) {
       this._setValue(newValue);
@@ -277,9 +317,9 @@ export class HaEntityPicker extends LitElement {
   private _filterChanged(ev: CustomEvent): void {
     const filterString = ev.detail.value.toLowerCase();
     (this.comboBox as any).filteredItems = this._states.filter(
-      (entityState) =>
+      (state) =>
-        entityState.entity_id.toLowerCase().includes(filterString) ||
+        state.entity_id.toLowerCase().includes(filterString) ||
-        computeStateName(entityState).toLowerCase().includes(filterString)
+        computeStateName(state).toLowerCase().includes(filterString)
     );
   }
 
@@ -290,6 +330,22 @@ export class HaEntityPicker extends LitElement {
       fireEvent(this, "change");
     }, 0);
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .suffix {
+        display: flex;
+      }
+      ha-icon-button {
+        --mdc-icon-button-size: 24px;
+        padding: 0px 2px;
+        color: var(--secondary-text-color);
+      }
+      [hidden] {
+        display: none;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -12,7 +12,7 @@ import { property, state } from "lit/decorators";
 import { STATES_OFF } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { UNAVAILABLE, UNAVAILABLE_STATES, UNKNOWN } from "../../data/entity";
+import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
 import { HomeAssistant } from "../../types";
 import "../ha-formfield";
@@ -39,26 +39,21 @@ export class HaEntityToggle extends LitElement {
       return html` <ha-switch disabled></ha-switch> `;
     }
 
-    if (
+    if (this.stateObj.attributes.assumed_state) {
-      this.stateObj.attributes.assumed_state ||
-      this.stateObj.state === UNKNOWN
-    ) {
       return html`
         <ha-icon-button
           .label=${`Turn ${computeStateName(this.stateObj)} off`}
           .path=${mdiFlashOff}
           .disabled=${this.stateObj.state === UNAVAILABLE}
           @click=${this._turnOff}
-          class=${!this._isOn && this.stateObj.state !== UNKNOWN
+          ?state-active=${!this._isOn}
-            ? "state-active"
-            : ""}
         ></ha-icon-button>
         <ha-icon-button
           .label=${`Turn ${computeStateName(this.stateObj)} on`}
           .path=${mdiFlash}
           .disabled=${this.stateObj.state === UNAVAILABLE}
           @click=${this._turnOn}
-          class=${this._isOn ? "state-active" : ""}
+          ?state-active=${this._isOn}
         ></ha-icon-button>
       `;
     }
@@ -68,7 +63,7 @@ export class HaEntityToggle extends LitElement {
         this._isOn ? "off" : "on"
       }`}
       .checked=${this._isOn}
-      .disabled=${this.stateObj.state === UNAVAILABLE}
+      .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
       @change=${this._toggleChanged}
     ></ha-switch>`;
 
@@ -161,11 +156,10 @@ export class HaEntityToggle extends LitElement {
         min-width: 38px;
       }
       ha-icon-button {
-        --mdc-icon-button-size: 40px;
         color: var(--ha-icon-button-inactive-color, var(--primary-text-color));
         transition: color 0.5s;
       }
-      ha-icon-button.state-active {
+      ha-icon-button[state-active] {
         color: var(--ha-icon-button-active-color, var(--primary-color));
       }
       ha-switch {

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

@@ -147,7 +147,7 @@ export class HaStateLabelBadge extends LitElement {
       default:
         return entityState.state === UNKNOWN ||
           entityState.state === UNAVAILABLE
-          ? "—"
+          ? "-"
           : isNumericState(entityState)
           ? formatNumber(entityState.state, this.hass!.locale)
           : computeStateDisplay(

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

@@ -1,8 +1,17 @@
+import { mdiCheck } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
+import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -67,12 +76,41 @@ export class HaStatisticPicker extends LitElement {
     id: string;
     name: string;
     state?: HassEntity;
-  }> = (item) => html`<mwc-list-item graphic="avatar" twoline>
+    // eslint-disable-next-line lit/prefer-static-styles
+  }> = (item) => html`<style>
+      paper-icon-item {
+        padding: 0;
+        margin: -8px;
+      }
+      #content {
+        display: flex;
+        align-items: center;
+      }
+      ha-svg-icon {
+        padding-left: 2px;
+        color: var(--secondary-text-color);
+      }
+      :host(:not([selected])) ha-svg-icon {
+        display: none;
+      }
+      :host([selected]) paper-icon-item {
+        margin-left: 0;
+      }
+      a {
+        color: var(--primary-color);
+      }
+    </style>
+    <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
+    <paper-icon-item>
       ${item.state
-      ? html`<state-badge slot="graphic" .stateObj=${item.state}></state-badge>`
+        ? html`<state-badge
+            slot="item-icon"
+            .stateObj=${item.state}
+          ></state-badge>`
         : ""}
-    <span>${item.name}</span>
+      <paper-item-body two-line="">
-    <span slot="secondary"
+        ${item.name}
+        <span secondary
           >${item.id === "" || item.id === "__missing"
             ? html`<a
                 target="_blank"
@@ -84,7 +122,8 @@ export class HaStatisticPicker extends LitElement {
               >`
             : item.id}</span
         >
-  </mwc-list-item>`;
+      </paper-item-body>
+    </paper-icon-item>`;
 
   private _getStatistics = memoizeOne(
     (
@@ -254,6 +293,19 @@ export class HaStatisticPicker extends LitElement {
       fireEvent(this, "change");
     }, 0);
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      paper-input > ha-icon-button {
+        --mdc-icon-button-size: 24px;
+        padding: 2px;
+        color: var(--secondary-text-color);
+      }
+      [hidden] {
+        display: none;
+      }
+    `;
+  }
 }
 
 declare global {

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

@@ -1,4 +1,4 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { PolymerChangedEvent } from "../../polymer-types";
@@ -103,20 +103,6 @@ class HaStatisticsPicker extends LitElement {
 
     this._updateStatistics([...currentEntities, toAdd]);
   }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        width: 200px;
-        display: block;
-      }
-      ha-statistic-picker {
-        display: block;
-        width: 100%;
-        margin-top: 8px;
-      }
-    `;
-  }
 }
 
 declare global {

src/components/ha-addon-picker.ts

@@ -1,3 +1,4 @@
+import { mdiCheck } from "@mdi/js";
 import { html, LitElement, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query, state } from "lit/decorators";
@@ -11,12 +12,39 @@ import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import { HaComboBox } from "./ha-combo-box";
 
-const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (
+// eslint-disable-next-line lit/prefer-static-styles
-  item
+const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`<style>
-) => html`<mwc-list-item twoline>
+    paper-item {
-  <span>${item.name}</span>
+      padding: 0;
-  <span slot="secondary">${item.slug}</span>
+      margin: -10px;
-</mwc-list-item>`;
+      margin-left: 0px;
+    }
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    :host([selected]) paper-item {
+      margin-left: 0;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      margin-right: -2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-icon-item {
+      margin-left: 0;
+    }
+  </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
+  <paper-item>
+    <paper-item-body two-line>
+      ${item.name}
+      <span secondary>${item.slug}</span>
+    </paper-item-body>
+  </paper-item>`;
 
 @customElement("ha-addon-picker")
 class HaAddonPicker extends LitElement {

src/components/ha-area-picker.ts

@@ -1,6 +1,19 @@
+import { mdiCheck, mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-listbox/paper-listbox";
+import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import {
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
@@ -28,18 +41,38 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import type { HaComboBox } from "./ha-combo-box";
-import "./ha-combo-box";
 import "./ha-icon-button";
 import "./ha-svg-icon";
 
 const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (
   item
-) => html`<mwc-list-item
+  // eslint-disable-next-line lit/prefer-static-styles
-  class=${classMap({ "add-new": item.area_id === "add_new" })}
+) => html`<style>
->
+    paper-item {
-  ${item.name}
+      padding: 0;
-</mwc-list-item>`;
+      margin: -10px;
+      margin-left: 0;
+    }
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      margin-right: -2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-item {
+      margin-left: 10px;
+    }
+  </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
+  <paper-item class=${classMap({ "add-new": item.area_id === "add_new" })}>
+    <paper-item-body two-line>${item.name}</paper-item-body>
+  </paper-item>`;
 
 @customElement("ha-area-picker")
 export class HaAreaPicker extends SubscribeMixin(LitElement) {
@@ -92,9 +125,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   @state() private _opened?: boolean;
 
-  @query("ha-combo-box", true) public comboBox!: HaComboBox;
+  @query("vaadin-combo-box-light", true) public comboBox!: HTMLElement;
-
-  private _filter?: string;
 
   private _init = false;
 
@@ -114,13 +145,13 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   public open() {
     this.updateComplete.then(() => {
-      this.comboBox?.open();
+      (this.shadowRoot?.querySelector("vaadin-combo-box-light") as any)?.open();
     });
   }
 
   public focus() {
     this.updateComplete.then(() => {
-      this.comboBox?.focus();
+      this.shadowRoot?.querySelector("paper-input")?.focus();
     });
   }
 
@@ -139,7 +170,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
       if (!areas.length) {
         return [
           {
-            area_id: "no_areas",
+            area_id: "",
             name: this.hass.localize("ui.components.area-picker.no_areas"),
             picture: null,
           },
@@ -263,7 +294,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
       if (!outputAreas.length) {
         outputAreas = [
           {
-            area_id: "no_areas",
+            area_id: "",
             name: this.hass.localize("ui.components.area-picker.no_match"),
             picture: null,
           },
@@ -308,25 +339,52 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
       return html``;
     }
     return html`
-      <ha-combo-box
+      <vaadin-combo-box-light
-        .hass=${this.hass}
         item-value-path="area_id"
         item-id-path="area_id"
         item-label-path="name"
         .value=${this.value}
         .disabled=${this.disabled}
+        ${comboBoxRenderer(rowRenderer)}
+        @opened-changed=${this._openedChanged}
+        @value-changed=${this._areaChanged}
+      >
+        <paper-input
           .label=${this.label === undefined && this.hass
             ? this.hass.localize("ui.components.area-picker.area")
             : this.label}
           .placeholder=${this.placeholder
             ? this._area(this.placeholder)?.name
             : undefined}
-        .renderer=${rowRenderer}
+          .disabled=${this.disabled}
-        @filter-changed=${this._filterChanged}
+          class="input"
-        @opened-changed=${this._openedChanged}
+          autocapitalize="none"
-        @value-changed=${this._areaChanged}
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
         >
-      </ha-combo-box>
+          ${this.value
+            ? html`
+                <ha-icon-button
+                  .label=${this.hass.localize(
+                    "ui.components.area-picker.clear"
+                  )}
+                  .path=${mdiClose}
+                  slot="suffix"
+                  class="clear-button"
+                  @click=${this._clearValue}
+                ></ha-icon-button>
+              `
+            : ""}
+
+          <ha-icon-button
+            .label=${this.hass.localize("ui.components.area-picker.toggle")}
+            .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+            slot="suffix"
+            class="toggle-button"
+          ></ha-icon-button>
+        </paper-input>
+      </vaadin-combo-box-light>
     `;
   }
 
@@ -334,29 +392,9 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
     this._areas?.find((area) => area.area_id === areaId)
   );
 
-  private _filterChanged(ev: CustomEvent): void {
+  private _clearValue(ev: Event) {
-    this._filter = ev.detail.value;
+    ev.stopPropagation();
-    if (!this._filter) {
+    this._setValue("");
-      this.comboBox.filteredItems = this.comboBox.items;
-      return;
-    }
-    // @ts-ignore
-    if (!this.noAdd && this.comboBox._comboBox.filteredItems?.length === 0) {
-      this.comboBox.filteredItems = [
-        {
-          area_id: "add_new_suggestion",
-          name: this.hass.localize(
-            "ui.components.area-picker.add_new_sugestion",
-            { name: this._filter }
-          ),
-          picture: null,
-        },
-      ];
-    } else {
-      this.comboBox.filteredItems = this.comboBox.items?.filter((item) =>
-        item.name.toLowerCase().includes(this._filter!.toLowerCase())
-      );
-    }
   }
 
   private get _value() {
@@ -368,14 +406,9 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
   }
 
   private _areaChanged(ev: PolymerChangedEvent<string>) {
-    ev.stopPropagation();
+    const newValue = ev.detail.value;
-    let newValue = ev.detail.value;
 
-    if (newValue === "no_areas") {
+    if (newValue !== "add_new") {
-      newValue = "";
-    }
-
-    if (!["add_new_suggestion", "add_new"].includes(newValue)) {
       if (newValue !== this._value) {
         this._setValue(newValue);
       }
@@ -392,8 +425,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
       inputLabel: this.hass.localize(
         "ui.components.area-picker.add_dialog.name"
       ),
-      defaultValue:
-        newValue === "add_new_suggestion" ? this._filter : undefined,
       confirm: async (name) => {
         if (!name) {
           return;
@@ -414,8 +445,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
             this.entityFilter,
             this.noAdd
           );
-          await this.updateComplete;
-          await this.comboBox.updateComplete;
           this._setValue(area.area_id);
         } catch (err: any) {
           showAlertDialog(this, {
@@ -436,6 +465,19 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
       fireEvent(this, "change");
     }, 0);
   }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      paper-input > ha-icon-button {
+        --mdc-icon-button-size: 24px;
+        padding: 2px;
+        color: var(--secondary-text-color);
+      }
+      [hidden] {
+        display: none;
+      }
+    `;
+  }
 }
 
 declare global {

src/components/ha-attributes.ts

@@ -1,14 +1,12 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import {
-  formatAttributeName,
-  formatAttributeValue,
-  STATE_ATTRIBUTES,
-} from "../data/entity_attributes";
 import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
-
+import hassAttributeUtil, {
+  formatAttributeName,
+  formatAttributeValue,
+} from "../util/hass-attributes-util";
 import "./ha-expansion-panel";
 
 @customElement("ha-attributes")
@@ -27,7 +25,7 @@ class HaAttributes extends LitElement {
     }
 
     const attributes = this.computeDisplayAttributes(
-      STATE_ATTRIBUTES.concat(
+      Object.keys(hassAttributeUtil.LOGIC_STATE_ATTRIBUTES).concat(
         this.extraFilters ? this.extraFilters.split(",") : []
       )
     );
@@ -122,7 +120,7 @@ class HaAttributes extends LitElement {
 
   private formatAttribute(attribute: string): string | TemplateResult {
     if (!this.stateObj) {
-      return "—";
+      return "-";
     }
     const value = this.stateObj.attributes[attribute];
     return formatAttributeValue(this.hass, value);

src/components/ha-base-time-input.ts

@@ -1,313 +0,0 @@
-import { LitElement, html, TemplateResult, css } from "lit";
-import { customElement, property } from "lit/decorators";
-import "@material/mwc-select/mwc-select";
-import "@material/mwc-list/mwc-list-item";
-import "./ha-textfield";
-import { fireEvent } from "../common/dom/fire_event";
-import { stopPropagation } from "../common/dom/stop_propagation";
-
-export interface TimeChangedEvent {
-  hours: number;
-  minutes: number;
-  seconds: number;
-  milliseconds: number;
-  amPm?: "AM" | "PM";
-}
-
-@customElement("ha-base-time-input")
-export class HaBaseTimeInput extends LitElement {
-  /**
-   * Label for the input
-   */
-  @property() label?: string;
-
-  /**
-   * auto validate time inputs
-   */
-  @property({ type: Boolean }) autoValidate = false;
-
-  /**
-   * determines if inputs are required
-   */
-  @property({ type: Boolean }) public required?: boolean;
-
-  /**
-   * 12 or 24 hr format
-   */
-  @property({ type: Number }) format: 12 | 24 = 12;
-
-  /**
-   * disables the inputs
-   */
-  @property({ type: Boolean }) disabled = false;
-
-  /**
-   * hour
-   */
-  @property({ type: Number }) hours = 0;
-
-  /**
-   * minute
-   */
-  @property({ type: Number }) minutes = 0;
-
-  /**
-   * second
-   */
-  @property({ type: Number }) seconds = 0;
-
-  /**
-   * milli second
-   */
-  @property({ type: Number }) milliseconds = 0;
-
-  /**
-   * Label for the hour input
-   */
-  @property() hourLabel = "";
-
-  /**
-   * Label for the min input
-   */
-  @property() minLabel = "";
-
-  /**
-   * Label for the sec input
-   */
-  @property() secLabel = "";
-
-  /**
-   * Label for the milli sec input
-   */
-  @property() millisecLabel = "";
-
-  /**
-   * show the sec field
-   */
-  @property({ type: Boolean }) enableSecond = false;
-
-  /**
-   * show the milli sec field
-   */
-  @property({ type: Boolean }) enableMillisecond = false;
-
-  /**
-   * limit hours input
-   */
-  @property({ type: Boolean }) noHoursLimit = false;
-
-  /**
-   * AM or PM
-   */
-  @property() amPm: "AM" | "PM" = "AM";
-
-  /**
-   * Formatted time string
-   */
-  @property() value?: string;
-
-  protected render(): TemplateResult {
-    return html`
-      ${this.label ? html`<label>${this.label}</label>` : ""}
-      <div class="time-input-wrap">
-        <ha-textfield
-          id="hour"
-          type="number"
-          inputmode="numeric"
-          .value=${this.hours}
-          .label=${this.hourLabel}
-          name="hours"
-          @input=${this._valueChanged}
-          @focus=${this._onFocus}
-          no-spinner
-          .required=${this.required}
-          .autoValidate=${this.autoValidate}
-          maxlength="2"
-          .max=${this._hourMax}
-          min="0"
-          .disabled=${this.disabled}
-          suffix=":"
-          class="hasSuffix"
-        >
-        </ha-textfield>
-        <ha-textfield
-          id="min"
-          type="number"
-          inputmode="numeric"
-          .value=${this._formatValue(this.minutes)}
-          .label=${this.minLabel}
-          @input=${this._valueChanged}
-          @focus=${this._onFocus}
-          name="minutes"
-          no-spinner
-          .required=${this.required}
-          .autoValidate=${this.autoValidate}
-          maxlength="2"
-          max="59"
-          min="0"
-          .disabled=${this.disabled}
-          .suffix=${this.enableSecond ? ":" : ""}
-          class=${this.enableSecond ? "has-suffix" : ""}
-        >
-        </ha-textfield>
-        ${this.enableSecond
-          ? html`<ha-textfield
-              id="sec"
-              type="number"
-              inputmode="numeric"
-              .value=${this._formatValue(this.seconds)}
-              .label=${this.secLabel}
-              @input=${this._valueChanged}
-              @focus=${this._onFocus}
-              name="seconds"
-              no-spinner
-              .required=${this.required}
-              .autoValidate=${this.autoValidate}
-              maxlength="2"
-              max="59"
-              min="0"
-              .disabled=${this.disabled}
-              .suffix=${this.enableMillisecond ? ":" : ""}
-              class=${this.enableMillisecond ? "has-suffix" : ""}
-            >
-            </ha-textfield>`
-          : ""}
-        ${this.enableMillisecond
-          ? html`<ha-textfield
-              id="millisec"
-              type="number"
-              .value=${this._formatValue(this.milliseconds, 3)}
-              .label=${this.millisecLabel}
-              @input=${this._valueChanged}
-              @focus=${this._onFocus}
-              name="milliseconds"
-              no-spinner
-              .required=${this.required}
-              .autoValidate=${this.autoValidate}
-              maxlength="3"
-              max="999"
-              min="0"
-              .disabled=${this.disabled}
-            >
-            </ha-textfield>`
-          : ""}
-        ${this.format === 24
-          ? ""
-          : html`<mwc-select
-              .required=${this.required}
-              .value=${this.amPm}
-              .disabled=${this.disabled}
-              name="amPm"
-              naturalMenuWidth
-              fixedMenuPosition
-              @selected=${this._valueChanged}
-              @closed=${stopPropagation}
-            >
-              <mwc-list-item value="AM">AM</mwc-list-item>
-              <mwc-list-item value="PM">PM</mwc-list-item>
-            </mwc-select>`}
-      </div>
-    `;
-  }
-
-  private _valueChanged(ev) {
-    this[ev.target.name] =
-      ev.target.name === "amPm" ? ev.target.value : Number(ev.target.value);
-    const value: TimeChangedEvent = {
-      hours: this.hours,
-      minutes: this.minutes,
-      seconds: this.seconds,
-      milliseconds: this.milliseconds,
-    };
-    if (this.format === 12) {
-      value.amPm = this.amPm;
-    }
-    fireEvent(this, "value-changed", {
-      value,
-    });
-  }
-
-  private _onFocus(ev) {
-    ev.target.select();
-  }
-
-  /**
-   * Format time fragments
-   */
-  private _formatValue(value: number, padding = 2) {
-    return value.toString().padStart(padding, "0");
-  }
-
-  /**
-   * 24 hour format has a max hr of 23
-   */
-  private get _hourMax() {
-    if (this.noHoursLimit) {
-      return null;
-    }
-    if (this.format === 12) {
-      return 12;
-    }
-    return 23;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-    }
-    .time-input-wrap {
-      display: flex;
-      border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0;
-      overflow: hidden;
-      position: relative;
-    }
-    ha-textfield {
-      width: 40px;
-      text-align: center;
-      --mdc-shape-small: 0;
-      --text-field-appearance: none;
-      --text-field-padding: 0 4px;
-      --text-field-suffix-padding-left: 2px;
-      --text-field-suffix-padding-right: 0;
-      --text-field-text-align: center;
-    }
-    ha-textfield.hasSuffix {
-      --text-field-padding: 0 0 0 4px;
-    }
-    ha-textfield:first-child {
-      --text-field-border-top-left-radius: var(--mdc-shape-medium);
-    }
-    ha-textfield:last-child {
-      --text-field-border-top-right-radius: var(--mdc-shape-medium);
-    }
-    mwc-select {
-      --mdc-shape-small: 0;
-      width: 85px;
-    }
-    label {
-      -moz-osx-font-smoothing: grayscale;
-      -webkit-font-smoothing: antialiased;
-      font-family: var(
-        --mdc-typography-body2-font-family,
-        var(--mdc-typography-font-family, Roboto, sans-serif)
-      );
-      font-size: var(--mdc-typography-body2-font-size, 0.875rem);
-      line-height: var(--mdc-typography-body2-line-height, 1.25rem);
-      font-weight: var(--mdc-typography-body2-font-weight, 400);
-      letter-spacing: var(
-        --mdc-typography-body2-letter-spacing,
-        0.0178571429em
-      );
-      text-decoration: var(--mdc-typography-body2-text-decoration, inherit);
-      text-transform: var(--mdc-typography-body2-text-transform, inherit);
-      color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
-      padding-left: 4px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-base-time-input": HaBaseTimeInput;
-  }
-}

src/components/ha-blueprint-picker.ts

@@ -1,10 +1,10 @@
-import "@material/mwc-list/mwc-list-item";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@material/mwc-select/mwc-select";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
-import { stopPropagation } from "../common/dom/stop_propagation";
 import { stringCompare } from "../common/string/compare";
 import { Blueprint, Blueprints, fetchBlueprints } from "../data/blueprint";
 import { HomeAssistant } from "../types";
@@ -24,11 +24,7 @@ class HaBluePrintPicker extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   public open() {
-    const select = this.shadowRoot?.querySelector("mwc-select");
+    this.shadowRoot!.querySelector("paper-dropdown-menu-light")!.open();
-    if (select) {
-      // @ts-expect-error
-      select.menuOpen = true;
-    }
   }
 
   private _processedBlueprints = memoizeOne((blueprints?: Blueprints) => {
@@ -49,29 +45,32 @@ class HaBluePrintPicker extends LitElement {
       return html``;
     }
     return html`
-      <mwc-select
+      <paper-dropdown-menu-light
         .label=${this.label ||
         this.hass.localize("ui.components.blueprint-picker.label")}
-        fixedMenuPosition
-        naturalMenuWidth
-        .value=${this.value}
         .disabled=${this.disabled}
-        @selected=${this._blueprintChanged}
+        horizontal-align="left"
-        @closed=${stopPropagation}
       >
-        <mwc-list-item value="">
+        <paper-listbox
+          slot="dropdown-content"
+          .selected=${this.value}
+          attr-for-selected="data-blueprint-path"
+          @iron-select=${this._blueprintChanged}
+        >
+          <paper-item data-blueprint-path="">
             ${this.hass.localize(
               "ui.components.blueprint-picker.select_blueprint"
             )}
-        </mwc-list-item>
+          </paper-item>
           ${this._processedBlueprints(this.blueprints).map(
             (blueprint) => html`
-            <mwc-list-item .value=${blueprint.path}>
+              <paper-item data-blueprint-path=${blueprint.path}>
                 ${blueprint.name}
-            </mwc-list-item>
+              </paper-item>
             `
           )}
-      </mwc-select>
+        </paper-listbox>
+      </paper-dropdown-menu-light>
     `;
   }
 
@@ -85,10 +84,10 @@ class HaBluePrintPicker extends LitElement {
   }
 
   private _blueprintChanged(ev) {
-    const newValue = ev.target.value;
+    const newValue = ev.detail.item.dataset.blueprintPath;
 
     if (newValue !== this.value) {
-      this.value = newValue;
+      this.value = ev.detail.value;
       setTimeout(() => {
         fireEvent(this, "value-changed", { value: newValue });
         fireEvent(this, "change");
@@ -101,11 +100,15 @@ class HaBluePrintPicker extends LitElement {
       :host {
         display: inline-block;
       }
-      mwc-select {
+      paper-dropdown-menu-light {
         width: 100%;
         min-width: 200px;
         display: block;
       }
+      paper-item {
+        cursor: pointer;
+        min-width: 200px;
+      }
     `;
   }
 }

src/components/ha-check-list-item.ts

@@ -1,24 +0,0 @@
-import { css } from "lit";
-import { CheckListItemBase } from "@material/mwc-list/mwc-check-list-item-base";
-import { styles as controlStyles } from "@material/mwc-list/mwc-control-list-item.css";
-import { styles } from "@material/mwc-list/mwc-list-item.css";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-check-list-item")
-export class HaCheckListItem extends CheckListItemBase {
-  static override styles = [
-    styles,
-    controlStyles,
-    css`
-      :host {
-        --mdc-theme-secondary: var(--primary-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-check-list-item": HaCheckListItem;
-  }
-}

src/components/ha-checkbox.ts

@@ -1,18 +1,12 @@
-import { CheckboxBase } from "@material/mwc-checkbox/mwc-checkbox-base";
+import { Checkbox } from "@material/mwc-checkbox";
-import { styles } from "@material/mwc-checkbox/mwc-checkbox.css";
-import { css } from "lit";
 import { customElement } from "lit/decorators";
 
 @customElement("ha-checkbox")
-export class HaCheckbox extends CheckboxBase {
+export class HaCheckbox extends Checkbox {
-  static override styles = [
+  public firstUpdated() {
-    styles,
+    super.firstUpdated();
-    css`
+    this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
-      :host {
-        --mdc-theme-secondary: var(--primary-color);
   }
-    `,
-  ];
 }
 
 declare global {

src/components/ha-climate-control.js

@@ -0,0 +1,141 @@
+import "@polymer/iron-flex-layout/iron-flex-layout-classes";
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+/* eslint-plugin-disable lit */
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { EventsMixin } from "../mixins/events-mixin";
+import "./ha-icon";
+import "./ha-icon-button";
+
+/*
+ * @appliesMixin EventsMixin
+ */
+class HaClimateControl extends EventsMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style include="iron-flex iron-flex-alignment"></style>
+      <style>
+        /* local DOM styles go here */
+        :host {
+          @apply --layout-flex;
+          @apply --layout-horizontal;
+          @apply --layout-justified;
+        }
+        .in-flux#target_temperature {
+          color: var(--error-color);
+        }
+        #target_temperature {
+          @apply --layout-self-center;
+          font-size: 200%;
+          direction: ltr;
+        }
+        .control-buttons {
+          font-size: 200%;
+          text-align: right;
+        }
+        ha-icon-button {
+          --mdc-icon-size: 32px;
+        }
+      </style>
+
+      <!-- local DOM goes here -->
+      <div id="target_temperature">[[value]] [[units]]</div>
+      <div class="control-buttons">
+        <div>
+          <ha-icon-button on-click="incrementValue">
+            <ha-icon icon="hass:chevron-up"></ha-icon>
+          </ha-icon-button>
+        </div>
+        <div>
+          <ha-icon-button on-click="decrementValue">
+            <ha-icon icon="hass:chevron-down"></ha-icon>
+          </ha-icon-button>
+        </div>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      value: {
+        type: Number,
+        observer: "valueChanged",
+      },
+      units: {
+        type: String,
+      },
+      min: {
+        type: Number,
+      },
+      max: {
+        type: Number,
+      },
+      step: {
+        type: Number,
+        value: 1,
+      },
+    };
+  }
+
+  temperatureStateInFlux(inFlux) {
+    this.$.target_temperature.classList.toggle("in-flux", inFlux);
+  }
+
+  _round(val) {
+    // round value to precision derived from step
+    // insired by https://github.com/soundar24/roundSlider/blob/master/src/roundslider.js
+    const s = this.step.toString().split(".");
+    return s[1] ? parseFloat(val.toFixed(s[1].length)) : Math.round(val);
+  }
+
+  incrementValue() {
+    const newval = this._round(this.value + this.step);
+    if (this.value < this.max) {
+      this.last_changed = Date.now();
+      this.temperatureStateInFlux(true);
+    }
+    if (newval <= this.max) {
+      // If no initial target_temp
+      // this forces control to start
+      // from the min configured instead of 0
+      if (newval <= this.min) {
+        this.value = this.min;
+      } else {
+        this.value = newval;
+      }
+    } else {
+      this.value = this.max;
+    }
+  }
+
+  decrementValue() {
+    const newval = this._round(this.value - this.step);
+    if (this.value > this.min) {
+      this.last_changed = Date.now();
+      this.temperatureStateInFlux(true);
+    }
+    if (newval >= this.min) {
+      this.value = newval;
+    } else {
+      this.value = this.min;
+    }
+  }
+
+  valueChanged() {
+    // when the last_changed timestamp is changed,
+    // trigger a potential event fire in
+    // the future, as long as last changed is far enough in the
+    // past.
+    if (this.last_changed) {
+      window.setTimeout(() => {
+        const now = Date.now();
+        if (now - this.last_changed >= 2000) {
+          this.fire("change");
+          this.temperatureStateInFlux(false);
+          this.last_changed = null;
+        }
+      }, 2010);
+    }
+  }
+}
+
+customElements.define("ha-climate-control", HaClimateControl);

src/components/ha-climate-control.ts

@@ -1,138 +0,0 @@
-import { mdiChevronDown, mdiChevronUp } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, query } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import { conditionalClamp } from "../common/number/clamp";
-import { HomeAssistant } from "../types";
-import "./ha-icon";
-import "./ha-icon-button";
-
-@customElement("ha-climate-control")
-class HaClimateControl extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public value!: number;
-
-  @property() public unit = "";
-
-  @property() public min?: number;
-
-  @property() public max?: number;
-
-  @property() public step = 1;
-
-  private _lastChanged?: number;
-
-  @query("#target_temperature") private _targetTemperature!: HTMLElement;
-
-  protected render(): TemplateResult {
-    return html`
-      <div id="target_temperature">${this.value} ${this.unit}</div>
-      <div class="control-buttons">
-        <div>
-          <ha-icon-button
-            .path=${mdiChevronUp}
-            .label=${this.hass.localize(
-              "ui.components.climate-control.temperature_up"
-            )}
-            @click=${this._incrementValue}
-          >
-          </ha-icon-button>
-        </div>
-        <div>
-          <ha-icon-button
-            .path=${mdiChevronDown}
-            .label=${this.hass.localize(
-              "ui.components.climate-control.temperature_down"
-            )}
-            @click=${this._decrementValue}
-          >
-          </ha-icon-button>
-        </div>
-      </div>
-    `;
-  }
-
-  protected updated(changedProperties) {
-    if (changedProperties.has("value")) {
-      this._valueChanged();
-    }
-  }
-
-  private _temperatureStateInFlux(inFlux) {
-    this._targetTemperature.classList.toggle("in-flux", inFlux);
-  }
-
-  private _round(value) {
-    // Round value to precision derived from step.
-    // Inspired by https://github.com/soundar24/roundSlider/blob/master/src/roundslider.js
-    const s = this.step.toString().split(".");
-    return s[1] ? parseFloat(value.toFixed(s[1].length)) : Math.round(value);
-  }
-
-  private _incrementValue() {
-    const newValue = this._round(this.value + this.step);
-    this._processNewValue(newValue);
-  }
-
-  private _decrementValue() {
-    const newValue = this._round(this.value - this.step);
-    this._processNewValue(newValue);
-  }
-
-  private _processNewValue(value) {
-    const newValue = conditionalClamp(value, this.min, this.max);
-
-    if (this.value !== newValue) {
-      this.value = newValue;
-      this._lastChanged = Date.now();
-      this._temperatureStateInFlux(true);
-    }
-  }
-
-  private _valueChanged() {
-    // When the last_changed timestamp is changed,
-    // trigger a potential event fire in the future,
-    // as long as last_changed is far enough in the past.
-    if (this._lastChanged) {
-      window.setTimeout(() => {
-        const now = Date.now();
-        if (now - this._lastChanged! >= 2000) {
-          fireEvent(this, "change");
-          this._temperatureStateInFlux(false);
-          this._lastChanged = undefined;
-        }
-      }, 2010);
-    }
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: flex;
-        justify-content: space-between;
-      }
-      .in-flux {
-        color: var(--error-color);
-      }
-      #target_temperature {
-        align-self: center;
-        font-size: 28px;
-        direction: ltr;
-      }
-      .control-buttons {
-        font-size: 24px;
-        text-align: right;
-      }
-      ha-icon-button {
-        --mdc-icon-size: 32px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-climate-control": HaClimateControl;
-  }
-}

src/components/ha-code-editor.ts

@@ -1,16 +1,8 @@
-import type {
-  Completion,
-  CompletionContext,
-  CompletionResult,
-} from "@codemirror/autocomplete";
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
-import { HassEntities } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, PropertyValues, ReactiveElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { loadCodeMirror } from "../resources/codemirror.ondemand";
-import { HomeAssistant } from "../types";
 
 declare global {
   interface HASSDomEvents {
@@ -32,15 +24,10 @@ export class HaCodeEditor extends ReactiveElement {
 
   @property() public mode = "yaml";
 
-  public hass?: HomeAssistant;
-
   @property({ type: Boolean }) public autofocus = false;
 
   @property({ type: Boolean }) public readOnly = false;
 
-  @property({ type: Boolean, attribute: "autocomplete-entities" })
-  public autocompleteEntities = false;
-
   @property() public error = false;
 
   @state() private _value = "";
@@ -123,7 +110,11 @@ export class HaCodeEditor extends ReactiveElement {
 
   private async _load(): Promise<void> {
     this._loadedCodeMirror = await loadCodeMirror();
-    const extensions = [
+
+    this.codemirror = new this._loadedCodeMirror.EditorView({
+      state: this._loadedCodeMirror.EditorState.create({
+        doc: this._value,
+        extensions: [
           this._loadedCodeMirror.lineNumbers(),
           this._loadedCodeMirror.EditorState.allowMultipleSelections.of(true),
           this._loadedCodeMirror.history(),
@@ -149,66 +140,13 @@ export class HaCodeEditor extends ReactiveElement {
           this._loadedCodeMirror.EditorView.updateListener.of((update) =>
             this._onUpdate(update)
           ),
-    ];
+        ],
-
-    if (!this.readOnly && this.autocompleteEntities && this.hass) {
-      extensions.push(
-        this._loadedCodeMirror.autocompletion({
-          override: [this._entityCompletions.bind(this)],
-          maxRenderedOptions: 10,
-        })
-      );
-    }
-
-    this.codemirror = new this._loadedCodeMirror.EditorView({
-      state: this._loadedCodeMirror.EditorState.create({
-        doc: this._value,
-        extensions,
       }),
       root: this.shadowRoot!,
       parent: this.shadowRoot!,
     });
   }
 
-  private _getStates = memoizeOne((states: HassEntities): Completion[] => {
-    if (!states) {
-      return [];
-    }
-    const options = Object.keys(states).map((key) => ({
-      type: "variable",
-      label: key,
-      detail: states[key].attributes.friendly_name,
-      info: `State: ${states[key].state}`,
-    }));
-
-    return options;
-  });
-
-  private _entityCompletions(
-    context: CompletionContext
-  ): CompletionResult | null | Promise<CompletionResult | null> {
-    const entityWord = context.matchBefore(/[a-z_]{3,}\./);
-
-    if (
-      !entityWord ||
-      (entityWord.from === entityWord.to && !context.explicit)
-    ) {
-      return null;
-    }
-
-    const states = this._getStates(this.hass!.states);
-
-    if (!states || !states.length) {
-      return null;
-    }
-
-    return {
-      from: Number(entityWord.from),
-      options: states,
-      span: /^\w*.\w*$/,
-    };
-  }
-
   private _blockKeyboardShortcuts() {
     this.addEventListener("keydown", (ev) => ev.stopPropagation());
   }
@@ -225,9 +163,10 @@ export class HaCodeEditor extends ReactiveElement {
     fireEvent(this, "value-changed", { value: this._value });
   }
 
+  // Only Lit 2.0 will use this
   static get styles(): CSSResultGroup {
     return css`
-      :host(.error-state) .cm-gutters {
+      :host(.error-state) div.cm-wrap .cm-gutters {
         border-color: var(--error-state-color, red);
       }
     `;

src/components/ha-combo-box.ts

@@ -1,78 +1,37 @@
-import "@material/mwc-list/mwc-list-item";
 import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
-import "@vaadin/combo-box/theme/material/vaadin-combo-box-light";
+import "@polymer/paper-input/paper-input";
-import type { ComboBoxLight } from "@vaadin/combo-box/vaadin-combo-box-light";
+import "@polymer/paper-item/paper-item";
-import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
+import "@polymer/paper-item/paper-item-body";
+import "@polymer/paper-listbox/paper-listbox";
+import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
-import { customElement, property, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
-import "./ha-textfield";
 
-registerStyles(
+// eslint-disable-next-line lit/prefer-static-styles
-  "vaadin-combo-box-item",
+const defaultRowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
-  css`
+    paper-item {
-    :host {
+      margin: -5px -10px;
       padding: 0;
     }
-    :host([focused]:not([disabled])) {
+  </style>
-      background-color: rgba(var(--rgb-primary-text-color, 0, 0, 0), 0.12);
+  <paper-item>${item}</paper-item>`;
-    }
-    :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({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public label?: string;
 
   @property() public value?: string;
 
-  @property() public placeholder?: string;
+  @property() public items?: [];
 
-  @property() public validationMessage?: string;
+  @property() public filteredItems?: [];
-
-  @property({ attribute: "error-message" }) public errorMessage?: string;
-
-  @property({ type: Boolean }) public invalid?: boolean;
-
-  @property({ type: Boolean }) public icon?: boolean;
-
-  @property() public items?: any[];
-
-  @property() public filteredItems?: any[];
 
   @property({ attribute: "allow-custom-value", type: Boolean })
   public allowCustomValue?: boolean;
@@ -87,25 +46,24 @@ export class HaComboBox extends LitElement {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
-  @property({ type: Boolean, reflect: true, attribute: "opened" })
+  @state() private _opened?: boolean;
-  private _opened?: boolean;
 
-  @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
+  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
 
   public open() {
     this.updateComplete.then(() => {
-      this._comboBox?.open();
+      (this._comboBox as any)?.open();
     });
   }
 
   public focus() {
     this.updateComplete.then(() => {
-      this._comboBox?.inputElement?.focus();
+      this.shadowRoot?.querySelector("paper-input")?.focus();
     });
   }
 
   public get selectedItem() {
-    return this._comboBox.selectedItem;
+    return (this._comboBox as any).selectedItem;
   }
 
   protected render(): TemplateResult {
@@ -114,78 +72,55 @@ export class HaComboBox extends LitElement {
         .itemValuePath=${this.itemValuePath}
         .itemIdPath=${this.itemIdPath}
         .itemLabelPath=${this.itemLabelPath}
-        .value=${this.value || ""}
+        .value=${this.value}
         .items=${this.items}
         .filteredItems=${this.filteredItems}
         .allowCustomValue=${this.allowCustomValue}
         .disabled=${this.disabled}
-        ${comboBoxRenderer(this.renderer || this._defaultRowRenderer)}
+        ${comboBoxRenderer(this.renderer || defaultRowRenderer)}
         @opened-changed=${this._openedChanged}
         @filter-changed=${this._filterChanged}
         @value-changed=${this._valueChanged}
-        attr-for-value="value"
       >
-        <ha-textfield
+        <paper-input
           .label=${this.label}
-          .placeholder=${this.placeholder}
           .disabled=${this.disabled}
-          .validationMessage=${this.validationMessage}
-          .errorMessage=${this.errorMessage}
           class="input"
           autocapitalize="none"
           autocomplete="off"
           autocorrect="off"
           spellcheck="false"
-          .suffix=${html`<div style="width: 28px;"></div>`}
-          .icon=${this.icon}
-          .invalid=${this.invalid}
         >
-          <slot name="icon" slot="leadingIcon"></slot>
-        </ha-textfield>
           ${this.value
-          ? html`<ha-svg-icon
+            ? html`
-              aria-label=${this.hass?.localize("ui.components.combo-box.clear")}
+                <ha-icon-button
-              class="clear-button"
+                  .label=${this.hass.localize("ui.components.combo-box.clear")}
                   .path=${mdiClose}
+                  slot="suffix"
+                  class="clear-button"
                   @click=${this._clearValue}
-            ></ha-svg-icon>`
+                ></ha-icon-button>
+              `
             : ""}
-        <ha-svg-icon
+
-          aria-label=${this.hass?.localize("ui.components.combo-box.show")}
+          <ha-icon-button
-          class="toggle-button"
+            .label=${this.hass.localize("ui.components.combo-box.show")}
             .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-          @click=${this._toggleOpen}
+            slot="suffix"
-        ></ha-svg-icon>
+            class="toggle-button"
+          ></ha-icon-button>
+        </paper-input>
       </vaadin-combo-box-light>
     `;
   }
 
-  private _defaultRowRenderer: ComboBoxLitRenderer<
-    string | Record<string, any>
-  > = (item) =>
-    html`<mwc-list-item>
-      ${this.itemLabelPath ? item[this.itemLabelPath] : item}
-    </mwc-list-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: PolymerChangedEvent<boolean>) {
-    // delay this so we can handle click event before setting _opened
-    setTimeout(() => {
     this._opened = ev.detail.value;
-    }, 0);
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail);
   }
@@ -206,38 +141,11 @@ export class HaComboBox extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      :host {
+      paper-input > ha-icon-button {
-        display: block;
-        width: 100%;
-      }
-      vaadin-combo-box-light {
-        position: relative;
-      }
-      ha-textfield {
-        width: 100%;
-      }
-      ha-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;
-      }
-      :host([opened]) .toggle-button {
-        color: var(--primary-color);
-      }
-      .clear-button {
-        --mdc-icon-size: 20px;
-        top: -7px;
-        right: 36px;
-      }
     `;
   }
 }

src/components/ha-date-input.ts

@@ -1,76 +1,135 @@
 import { mdiCalendar } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
-import { css, CSSResultGroup, html, LitElement } from "lit";
+import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light";
-import { customElement, property } from "lit/decorators";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
-import { formatDateNumeric } from "../common/datetime/format_date";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 
-const loadDatePickerDialog = () => import("./ha-dialog-date-picker");
+const i18n = {
-
+  monthNames: [
-export interface datePickerDialogParams {
+    "January",
-  value?: string;
+    "February",
-  min?: string;
+    "March",
-  max?: string;
+    "April",
-  locale?: string;
+    "May",
-  onChange: (value: string) => void;
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ],
+  weekdays: [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ],
+  weekdaysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+  firstDayOfWeek: 0,
+  week: "Week",
+  calendar: "Calendar",
+  clear: "Clear",
+  today: "Today",
+  cancel: "Cancel",
+  formatTitle: (monthName, fullYear) => monthName + " " + fullYear,
+  formatDate: (d: { day: number; month: number; year: number }) =>
+    [
+      ("0000" + String(d.year)).slice(-4),
+      ("0" + String(d.month + 1)).slice(-2),
+      ("0" + String(d.day)).slice(-2),
+    ].join("-"),
+  parseDate: (text: string) => {
+    const parts = text.split("-");
+    const today = new Date();
+    let date;
+    let month = today.getMonth();
+    let year = today.getFullYear();
+    if (parts.length === 3) {
+      year = parseInt(parts[0]);
+      if (parts[0].length < 3 && year >= 0) {
+        year += year < 50 ? 2000 : 1900;
+      }
+      month = parseInt(parts[1]) - 1;
+      date = parseInt(parts[2]);
+    } else if (parts.length === 2) {
+      month = parseInt(parts[0]) - 1;
+      date = parseInt(parts[1]);
+    } else if (parts.length === 1) {
+      date = parseInt(parts[0]);
     }
 
-const showDatePickerDialog = (
+    if (date !== undefined) {
-  element: HTMLElement,
+      return { day: date, month, year };
-  dialogParams: datePickerDialogParams
+    }
-): void => {
+    return undefined;
-  fireEvent(element, "show-dialog", {
+  },
-    dialogTag: "ha-dialog-date-picker",
-    dialogImport: loadDatePickerDialog,
-    dialogParams,
-  });
 };
 @customElement("ha-date-input")
 export class HaDateInput extends LitElement {
-  @property({ attribute: false }) public locale!: HomeAssistant["locale"];
-
   @property() public value?: string;
 
   @property({ type: Boolean }) public disabled = false;
 
   @property() public label?: string;
 
+  @query("vaadin-date-picker-light", true) private _datePicker;
+
+  private _inited = false;
+
+  updated(changedProps: PropertyValues) {
+    if (changedProps.has("value")) {
+      this._datePicker.value = this.value;
+      this._inited = true;
+    }
+  }
+
   render() {
-    return html`<paper-input
+    return html`<vaadin-date-picker-light
+      .disabled=${this.disabled}
+      @value-changed=${this._valueChanged}
+      attr-for-value="value"
+      .i18n=${i18n}
+    >
+      <paper-input
         .label=${this.label}
         .disabled=${this.disabled}
         no-label-float
-      @click=${this._openDialog}
-      .value=${this.value
-        ? formatDateNumeric(new Date(this.value), this.locale)
-        : ""}
       >
         <ha-svg-icon slot="suffix" .path=${mdiCalendar}></ha-svg-icon>
-    </paper-input>`;
+      </paper-input>
+    </vaadin-date-picker-light>`;
   }
 
-  private _openDialog() {
+  private _valueChanged(ev: CustomEvent) {
-    if (this.disabled) {
+    if (
-      return;
+      !this.value ||
-    }
+      (this._inited && !this._compareStringDates(ev.detail.value, this.value))
-    showDatePickerDialog(this, {
+    ) {
-      min: "1970-01-01",
+      this.value = ev.detail.value;
-      value: this.value,
-      onChange: (value) => this._valueChanged(value),
-      locale: this.locale.language,
-    });
-  }
-
-  private _valueChanged(value: string) {
-    if (this.value !== value) {
-      this.value = value;
       fireEvent(this, "change");
-      fireEvent(this, "value-changed", { value });
+      fireEvent(this, "value-changed", { value: ev.detail.value });
     }
   }
 
+  private _compareStringDates(a: string, b: string): boolean {
+    const aParts = a.split("-");
+    const bParts = b.split("-");
+    let i = 0;
+    for (const aPart of aParts) {
+      if (Number(aPart) !== Number(bParts[i])) {
+        return false;
+      }
+      i++;
+    }
+    return true;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       paper-input {

src/components/ha-dialog-date-picker.ts

@@ -1,106 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import "app-datepicker";
-import { css, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import { haStyleDialog } from "../resources/styles";
-import { datePickerDialogParams } from "./ha-date-input";
-import "./ha-dialog";
-
-@customElement("ha-dialog-date-picker")
-export class HaDialogDatePicker extends LitElement {
-  @property() public value?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property() public label?: string;
-
-  @state() private _params?: datePickerDialogParams;
-
-  @state() private _value?: string;
-
-  public showDialog(params: datePickerDialogParams): void {
-    this._params = params;
-    this._value = params.value;
-  }
-
-  public closeDialog() {
-    this._params = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  render() {
-    if (!this._params) {
-      return html``;
-    }
-    return html`<ha-dialog open @closed=${this.closeDialog}>
-      <app-datepicker
-        .value=${this._value}
-        .min=${this._params.min}
-        .max=${this._params.max}
-        .locale=${this._params.locale}
-        @datepicker-value-updated=${this._valueChanged}
-      ></app-datepicker>
-      <mwc-button slot="secondaryAction" @click=${this._setToday}
-        >today</mwc-button
-      >
-      <mwc-button slot="primaryAction" dialogaction="cancel" class="cancel-btn">
-        cancel
-      </mwc-button>
-      <mwc-button slot="primaryAction" @click=${this._setValue}>ok</mwc-button>
-    </ha-dialog>`;
-  }
-
-  private _valueChanged(ev: CustomEvent) {
-    this._value = ev.detail.value;
-  }
-
-  private _setToday() {
-    this._value = new Date().toISOString().split("T")[0];
-  }
-
-  private _setValue() {
-    this._params?.onChange(this._value!);
-    this.closeDialog();
-  }
-
-  static styles = [
-    haStyleDialog,
-    css`
-      ha-dialog {
-        --dialog-content-padding: 0;
-        --justify-action-buttons: space-between;
-      }
-      app-datepicker {
-        --app-datepicker-accent-color: var(--primary-color);
-        --app-datepicker-bg-color: transparent;
-        --app-datepicker-color: var(--primary-text-color);
-        --app-datepicker-disabled-day-color: var(--disabled-text-color);
-        --app-datepicker-focused-day-color: var(--text-primary-color);
-        --app-datepicker-focused-year-bg-color: var(--primary-color);
-        --app-datepicker-selector-color: var(--secondary-text-color);
-        --app-datepicker-separator-color: var(--divider-color);
-        --app-datepicker-weekday-color: var(--secondary-text-color);
-      }
-      app-datepicker::part(calendar-day):focus {
-        outline: none;
-      }
-      @media all and (min-width: 450px) {
-        ha-dialog {
-          --mdc-dialog-min-width: 300px;
-        }
-      }
-      @media all and (max-width: 450px), all and (max-height: 500px) {
-        app-datepicker {
-          width: 100%;
-        }
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-dialog-date-picker": HaDialogDatePicker;
-  }
-}

src/components/ha-dialog.ts

@@ -1,7 +1,6 @@
-import { DialogBase } from "@material/mwc-dialog/mwc-dialog-base";
+import { Dialog } from "@material/mwc-dialog";
-import { styles } from "@material/mwc-dialog/mwc-dialog.css";
 import { mdiClose } from "@mdi/js";
-import { css, html, TemplateResult } from "lit";
+import { css, CSSResultGroup, html, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import type { HomeAssistant } from "../types";
@@ -22,7 +21,8 @@ export const createCloseHeading = (
 `;
 
 @customElement("ha-dialog")
-export class HaDialog extends DialogBase {
+// @ts-expect-error
+export class HaDialog extends Dialog {
   public scrollToPos(x: number, y: number) {
     this.contentElement?.scrollTo(x, y);
   }
@@ -31,8 +31,9 @@ export class HaDialog extends DialogBase {
     return html`<slot name="heading"> ${super.renderHeading()} </slot>`;
   }
 
-  static override styles = [
+  protected static get styles(): CSSResultGroup {
-    styles,
+    return [
+      Dialog.styles,
       css`
         .mdc-dialog {
           --mdc-dialog-scroll-divider-color: var(--divider-color);
@@ -101,6 +102,7 @@ export class HaDialog extends DialogBase {
       `,
     ];
   }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

src/components/ha-duration-input.ts

@@ -1,8 +1,7 @@
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import "./ha-base-time-input";
+import "./paper-time-input";
-import type { TimeChangedEvent } from "./ha-base-time-input";
 
 export interface HaDurationData {
   hours?: number;
@@ -33,69 +32,110 @@ class HaDurationInput extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-base-time-input
+      <paper-time-input
         .label=${this.label}
         .required=${this.required}
         .autoValidate=${this.required}
         .disabled=${this.disabled}
-        errorMessage="Required"
+        error-message="Required"
-        enableSecond
+        enable-second
         .enableMillisecond=${this.enableMillisecond}
         format="24"
-        .hours=${this._hours}
+        .hour=${this._parseDuration(this._hours)}
-        .minutes=${this._minutes}
+        .min=${this._parseDuration(this._minutes)}
-        .seconds=${this._seconds}
+        .sec=${this._parseDuration(this._seconds)}
-        .milliseconds=${this._milliseconds}
+        .millisec=${this._parseDurationMillisec(this._milliseconds)}
-        @value-changed=${this._durationChanged}
+        @hour-changed=${this._hourChanged}
-        noHoursLimit
+        @min-changed=${this._minChanged}
-        hourLabel="hh"
+        @sec-changed=${this._secChanged}
-        minLabel="mm"
+        @millisec-changed=${this._millisecChanged}
-        secLabel="ss"
+        float-input-labels
-        millisecLabel="ms"
+        no-hours-limit
-      ></ha-base-time-input>
+        always-float-input-labels
+        hour-label="hh"
+        min-label="mm"
+        sec-label="ss"
+        millisec-label="ms"
+      ></paper-time-input>
     `;
   }
 
   private get _hours() {
-    return this.data?.hours ? Number(this.data.hours) : 0;
+    return this.data && this.data.hours ? Number(this.data.hours) : 0;
   }
 
   private get _minutes() {
-    return this.data?.minutes ? Number(this.data.minutes) : 0;
+    return this.data && this.data.minutes ? Number(this.data.minutes) : 0;
   }
 
   private get _seconds() {
-    return this.data?.seconds ? Number(this.data.seconds) : 0;
+    return this.data && this.data.seconds ? Number(this.data.seconds) : 0;
   }
 
   private get _milliseconds() {
-    return this.data?.milliseconds ? Number(this.data.milliseconds) : 0;
+    return this.data && this.data.milliseconds
+      ? Number(this.data.milliseconds)
+      : 0;
   }
 
-  private _durationChanged(ev: CustomEvent<{ value: TimeChangedEvent }>) {
+  private _parseDuration(value) {
-    ev.stopPropagation();
+    return value.toString().padStart(2, "0");
-    const value = { ...ev.detail.value };
-
-    if (!this.enableMillisecond && !value.milliseconds) {
-      // @ts-ignore
-      delete value.milliseconds;
-    } else if (value.milliseconds > 999) {
-      value.seconds += Math.floor(value.milliseconds / 1000);
-      value.milliseconds %= 1000;
   }
 
-    if (value.seconds > 59) {
+  private _parseDurationMillisec(value) {
-      value.minutes += Math.floor(value.seconds / 60);
+    return value.toString().padStart(3, "0");
-      value.seconds %= 60;
   }
 
-    if (value.minutes > 59) {
+  private _hourChanged(ev) {
-      value.hours += Math.floor(value.minutes / 60);
+    this._durationChanged(ev, "hours");
-      value.minutes %= 60;
   }
 
+  private _minChanged(ev) {
+    this._durationChanged(ev, "minutes");
+  }
+
+  private _secChanged(ev) {
+    this._durationChanged(ev, "seconds");
+  }
+
+  private _millisecChanged(ev) {
+    this._durationChanged(ev, "milliseconds");
+  }
+
+  private _durationChanged(ev, unit) {
+    let value = Number(ev.detail.value);
+
+    if (value === this[`_${unit}`]) {
+      return;
+    }
+
+    let hours = this._hours;
+    let minutes = this._minutes;
+
+    if (unit === "seconds" && value > 59) {
+      minutes += Math.floor(value / 60);
+      value %= 60;
+    }
+
+    if (unit === "minutes" && value > 59) {
+      hours += Math.floor(value / 60);
+      value %= 60;
+    }
+
+    const newValue: HaDurationData = {
+      hours,
+      minutes,
+      seconds: this._seconds,
+    };
+
+    if (this.enableMillisecond || this._milliseconds) {
+      newValue.milliseconds = this._milliseconds;
+    }
+
+    newValue[unit] = value;
+
     fireEvent(this, "value-changed", {
-      value,
+      value: newValue,
     });
   }
 }

src/components/ha-form/ha-form-float.ts

@@ -1,21 +1,21 @@
+import "@material/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield";
 import { css, html, LitElement, TemplateResult, PropertyValues } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import type { HaTextField } from "../ha-textfield";
-import "../ha-textfield";
 import { HaFormElement, HaFormFloatData, HaFormFloatSchema } from "./types";
 
 @customElement("ha-form-float")
 export class HaFormFloat extends LitElement implements HaFormElement {
-  @property({ attribute: false }) public schema!: HaFormFloatSchema;
+  @property() public schema!: HaFormFloatSchema;
 
-  @property({ attribute: false }) public data!: HaFormFloatData;
+  @property() public data!: HaFormFloatData;
 
   @property() public label!: string;
 
   @property({ type: Boolean }) public disabled = false;
 
-  @query("ha-textfield") private _input?: HaTextField;
+  @query("mwc-textfield") private _input?: HTMLElement;
 
   public focus() {
     if (this._input) {
@@ -25,7 +25,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-textfield
+      <mwc-textfield
         inputMode="decimal"
         .label=${this.label}
         .value=${this.data !== undefined ? this.data : ""}
@@ -35,7 +35,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
         .suffix=${this.schema.description?.suffix}
         .validationMessage=${this.schema.required ? "Required" : undefined}
         @input=${this._valueChanged}
-      ></ha-textfield>
+      ></mwc-textfield>
     `;
   }
 
@@ -46,7 +46,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
   }
 
   private _valueChanged(ev: Event) {
-    const source = ev.target as HaTextField;
+    const source = ev.target as TextField;
     const rawValue = source.value.replace(",", ".");
 
     let value: number | undefined;
@@ -81,7 +81,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
     :host([own-margin]) {
       margin-bottom: 5px;
     }
-    ha-textfield {
+    mwc-textfield {
       display: block;
     }
   `;

src/components/ha-form/ha-form-integer.ts

@@ -1,3 +1,7 @@
+import "@material/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield";
+import "@material/mwc-slider";
+import type { Slider } from "@material/mwc-slider";
 import {
   css,
   CSSResultGroup,
@@ -10,22 +14,18 @@ import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaCheckbox } from "../ha-checkbox";
 import { HaFormElement, HaFormIntegerData, HaFormIntegerSchema } from "./types";
-import "../ha-slider";
-import { HaTextField } from "../ha-textfield";
 
 @customElement("ha-form-integer")
 export class HaFormInteger extends LitElement implements HaFormElement {
-  @property({ attribute: false }) public schema!: HaFormIntegerSchema;
+  @property() public schema!: HaFormIntegerSchema;
 
-  @property({ attribute: false }) public data?: HaFormIntegerData;
+  @property() public data?: HaFormIntegerData;
 
   @property() public label?: string;
 
   @property({ type: Boolean }) public disabled = false;
 
-  @query("ha-textfield ha-slider") private _input?:
+  @query("paper-input ha-slider") private _input?: HTMLElement;
-    | HaTextField
-    | HTMLInputElement;
 
   private _lastValue?: HaFormIntegerData;
 
@@ -45,7 +45,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
         <div>
           ${this.label}
           <div class="flex">
-            ${!this.schema.required
+            ${this.schema.optional
               ? html`
                   <ha-checkbox
                     @change=${this._handleCheckboxChange}
@@ -54,23 +54,22 @@ export class HaFormInteger extends LitElement implements HaFormElement {
                   ></ha-checkbox>
                 `
               : ""}
-            <ha-slider
+            <mwc-slider
-              pin
+              discrete
-              ignore-bar-touch
               .value=${this._value}
               .min=${this.schema.valueMin}
               .max=${this.schema.valueMax}
               .disabled=${this.disabled ||
-              (this.data === undefined && !this.schema.required)}
+              (this.data === undefined && this.schema.optional)}
               @change=${this._valueChanged}
-            ></ha-slider>
+            ></mwc-slider>
           </div>
         </div>
       `;
     }
 
     return html`
-      <ha-textfield
+      <mwc-textfield
         type="number"
         inputMode="numeric"
         .label=${this.label}
@@ -81,7 +80,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
         .suffix=${this.schema.description?.suffix}
         .validationMessage=${this.schema.required ? "Required" : undefined}
         @input=${this._valueChanged}
-      ></ha-textfield>
+      ></mwc-textfield>
     `;
   }
 
@@ -100,7 +99,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       return this.data;
     }
 
-    if (!this.schema.required) {
+    if (this.schema.optional) {
       return this.schema.valueMin || 0;
     }
 
@@ -138,7 +137,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
   }
 
   private _valueChanged(ev: Event) {
-    const source = ev.target as HaTextField | HTMLInputElement;
+    const source = ev.target as TextField | Slider;
     const rawValue = source.value;
 
     let value: number | undefined;
@@ -169,10 +168,10 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       .flex {
         display: flex;
       }
-      ha-slider {
+      mwc-slider {
         flex: 1;
       }
-      ha-textfield {
+      mwc-textfield {
         display: block;
       }
     `;

src/components/ha-form/ha-form-multi_select.ts

@@ -1,27 +1,25 @@
-import "@material/mwc-select/mwc-select";
 import { mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import "@material/mwc-textfield";
+import "@material/mwc-formfield";
 import {
   css,
   CSSResultGroup,
   html,
   LitElement,
-  PropertyValues,
   TemplateResult,
+  PropertyValues,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-button-menu";
-import { HaCheckListItem } from "../ha-check-list-item";
-import "../ha-checkbox";
-import type { HaCheckbox } from "../ha-checkbox";
-import "../ha-formfield";
 import "../ha-svg-icon";
-import "../ha-textfield";
 import {
   HaFormElement,
   HaFormMultiSelectData,
   HaFormMultiSelectSchema,
 } from "./types";
+import "../ha-checkbox";
+import type { HaCheckbox } from "../ha-checkbox";
 
 function optionValue(item: string | string[]): string {
   return Array.isArray(item) ? item[0] : item;
@@ -59,23 +57,23 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
       : Object.entries(this.schema.options);
     const data = this.data || [];
 
-    // We will just render all checkboxes.
+    const renderedOptions = options.map((item: string | [string, string]) => {
-    if (options.length < SHOW_ALL_ENTRIES_LIMIT) {
-      return html`<div>
-        ${this.label}${options.map((item: string | [string, string]) => {
       const value = optionValue(item);
       return html`
-            <ha-formfield .label=${optionLabel(item)}>
+        <mwc-formfield .label=${optionLabel(item)}>
           <ha-checkbox
             .checked=${data.includes(value)}
             .value=${value}
             .disabled=${this.disabled}
             @change=${this._valueChanged}
           ></ha-checkbox>
-            </ha-formfield>
+        </mwc-formfield>
       `;
-        })}
+    });
-      </div> `;
+
+    // We will just render all checkboxes.
+    if (options.length < SHOW_ALL_ENTRIES_LIMIT) {
+      return html`<div>${this.label}${renderedOptions}</div> `;
     }
 
     return html`
@@ -85,10 +83,8 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
         corner="BOTTOM_START"
         @opened=${this._handleOpen}
         @closed=${this._handleClose}
-        multi
-        activatable
       >
-        <ha-textfield
+        <mwc-textfield
           slot="trigger"
           .label=${this.label}
           .value=${data
@@ -96,25 +92,12 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
             .join(", ")}
           .disabled=${this.disabled}
           tabindex="-1"
-        ></ha-textfield>
+        ></mwc-textfield>
         <ha-svg-icon
           slot="trigger"
           .path=${this._opened ? mdiMenuUp : mdiMenuDown}
         ></ha-svg-icon>
-        ${options.map((item: string | [string, string]) => {
+        ${renderedOptions}
-          const value = optionValue(item);
-          const selected = data.includes(value);
-          return html`<ha-check-list-item
-            left
-            .selected=${selected}
-            .activated=${selected}
-            @request-selected=${this._selectedChanged}
-            .value=${value}
-            .disabled=${this.disabled}
-          >
-            ${optionLabel(item)}
-          </ha-check-list-item>`;
-        })}
       </ha-button-menu>
     `;
   }
@@ -122,7 +105,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
   protected firstUpdated() {
     this.updateComplete.then(() => {
       const { formElement, mdcRoot } =
-        this.shadowRoot?.querySelector("ha-textfield") || ({} as any);
+        this.shadowRoot?.querySelector("mwc-textfield") || ({} as any);
       if (formElement) {
         formElement.style.textOverflow = "ellipsis";
       }
@@ -142,23 +125,9 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
     }
   }
 
-  private _selectedChanged(ev: CustomEvent): void {
-    ev.stopPropagation();
-    if (ev.detail.source === "property") {
-      return;
-    }
-    this._handleValueChanged(
-      (ev.target as HaCheckListItem).value,
-      ev.detail.selected
-    );
-  }
-
   private _valueChanged(ev: CustomEvent): void {
     const { value, checked } = ev.target as HaCheckbox;
-    this._handleValueChanged(value, checked);
-  }
 
-  private _handleValueChanged(value, checked: boolean): void {
     let newValue: string[];
 
     if (checked) {
@@ -202,11 +171,11 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
         display: block;
         cursor: pointer;
       }
-      ha-formfield {
+      mwc-formfield {
         display: block;
         padding-right: 16px;
       }
-      ha-textfield {
+      mwc-textfield {
         display: block;
         pointer-events: none;
       }

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

@@ -29,7 +29,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
   }
 
   protected render(): TemplateResult {
-    if (this.schema.required && this.schema.options!.length < 6) {
+    if (!this.schema.optional && this.schema.options!.length < 6) {
       return html`
         <div>
           ${this.label}
@@ -59,7 +59,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
         @closed=${stopPropagation}
         @selected=${this._valueChanged}
       >
-        ${!this.schema.required
+        ${this.schema.optional
           ? html`<mwc-list-item value=""></mwc-list-item>`
           : ""}
         ${this.schema.options!.map(

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

@@ -1,17 +1,17 @@
 import { mdiEye, mdiEyeOff } from "@mdi/js";
+import "@material/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield";
 import {
   css,
   CSSResultGroup,
   html,
   LitElement,
-  PropertyValues,
   TemplateResult,
+  PropertyValues,
 } from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, state, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-icon-button";
-import "../ha-textfield";
-import type { HaTextField } from "../ha-textfield";
 import type {
   HaFormElement,
   HaFormStringData,
@@ -32,7 +32,7 @@ export class HaFormString extends LitElement implements HaFormElement {
 
   @state() private _unmaskedPassword = false;
 
-  @query("ha-textfield") private _input?: HaTextField;
+  @query("mwc-textfield") private _input?: HTMLElement;
 
   public focus(): void {
     if (this._input) {
@@ -45,7 +45,7 @@ export class HaFormString extends LitElement implements HaFormElement {
       this.schema.name.includes(field)
     );
     return html`
-      <ha-textfield
+      <mwc-textfield
         .type=${!isPassword
           ? this._stringType
           : this._unmaskedPassword
@@ -62,12 +62,13 @@ export class HaFormString extends LitElement implements HaFormElement {
           : this.schema.description?.suffix}
         .validationMessage=${this.schema.required ? "Required" : undefined}
         @input=${this._valueChanged}
-      ></ha-textfield>
+      ></mwc-textfield>
       ${isPassword
         ? html`<ha-icon-button
             toggles
             .label=${`${this._unmaskedPassword ? "Hide" : "Show"} password`}
             @click=${this._toggleUnmaskedPassword}
+            tabindex="-1"
             .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
           ></ha-icon-button>`
         : ""}
@@ -85,11 +86,11 @@ export class HaFormString extends LitElement implements HaFormElement {
   }
 
   private _valueChanged(ev: Event): void {
-    let value: string | undefined = (ev.target as HaTextField).value;
+    let value: string | undefined = (ev.target as TextField).value;
     if (this.data === value) {
       return;
     }
-    if (value === "" && !this.schema.required) {
+    if (value === "" && this.schema.optional) {
       value = undefined;
     }
     fireEvent(this, "value-changed", {
@@ -118,7 +119,7 @@ export class HaFormString extends LitElement implements HaFormElement {
       :host([own-margin]) {
         margin-bottom: 5px;
       }
-      ha-textfield {
+      mwc-textfield {
         display: block;
       }
       ha-icon-button {

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

@@ -1,4 +1,4 @@
-import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -12,16 +12,11 @@ import "./ha-form-positive_time_period_dict";
 import "./ha-form-select";
 import "./ha-form-string";
 import { HaFormElement, HaFormDataContainer, HaFormSchema } from "./types";
-import { HomeAssistant } from "../../types";
 
 const getValue = (obj, item) => (obj ? obj[item.name] : null);
 
-let selectorImported = false;
-
 @customElement("ha-form")
 export class HaForm extends LitElement implements HaFormElement {
-  @property() public hass!: HomeAssistant;
-
   @property() public data!: HaFormDataContainer;
 
   @property() public schema!: HaFormSchema[];
@@ -47,18 +42,6 @@ export class HaForm extends LitElement implements HaFormElement {
     }
   }
 
-  willUpdate(changedProperties: PropertyValues) {
-    super.willUpdate(changedProperties);
-    if (
-      !selectorImported &&
-      changedProperties.has("schema") &&
-      this.schema?.some((item) => "selector" in item)
-    ) {
-      selectorImported = true;
-      import("../ha-selector/ha-selector");
-    }
-  }
-
   protected render() {
     return html`
       <div class="root">
@@ -79,17 +62,7 @@ export class HaForm extends LitElement implements HaFormElement {
                   </ha-alert>
                 `
               : ""}
-            ${"selector" in item
+            ${dynamicElement(`ha-form-${item.type}`, {
-              ? html`<ha-selector
-                  .schema=${item}
-                  .hass=${this.hass}
-                  .selector=${item.selector}
-                  .value=${getValue(this.data, item)}
-                  .label=${this._computeLabel(item)}
-                  .disabled=${this.disabled}
-                  .required=${item.required}
-                ></ha-selector>`
-              : dynamicElement(`ha-form-${item.type}`, {
               schema: item,
               data: getValue(this.data, item),
               label: this._computeLabel(item),
@@ -131,7 +104,7 @@ export class HaForm extends LitElement implements HaFormElement {
     return css`
       .root {
         margin-bottom: -24px;
-        overflow: clip visible;
+        overflow: auto;
       }
       .root > * {
         display: block;

src/components/ha-form/types.ts

@@ -1,5 +1,4 @@
 import type { LitElement } from "lit";
-import { Selector } from "../../data/selector";
 import type { HaDurationData } from "../ha-duration-input";
 
 export type HaFormSchema =
@@ -10,24 +9,14 @@ export type HaFormSchema =
   | HaFormBooleanSchema
   | HaFormSelectSchema
   | HaFormMultiSelectSchema
-  | HaFormTimeSchema
+  | HaFormTimeSchema;
-  | HaFormSelector;
 
 export interface HaFormBaseSchema {
   name: string;
-  // This value is applied if no data is submitted for this field
   default?: HaFormData;
   required?: boolean;
-  description?: {
+  optional?: boolean;
-    suffix?: string;
+  description?: { suffix?: string; suggested_value?: HaFormData };
-    // This value will be set initially when form is loaded
-    suggested_value?: HaFormData;
-  };
-}
-
-export interface HaFormSelector extends HaFormBaseSchema {
-  type?: never;
-  selector: Selector;
 }
 
 export interface HaFormConstantSchema extends HaFormBaseSchema {

src/components/ha-formfield.ts

@@ -1,11 +1,11 @@
-import { FormfieldBase } from "@material/mwc-formfield/mwc-formfield-base";
+import { Formfield } from "@material/mwc-formfield";
-import { styles } from "@material/mwc-formfield/mwc-formfield.css";
+import { css, CSSResultGroup } from "lit";
-import { css } from "lit";
 import { customElement } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 
 @customElement("ha-formfield")
-export class HaFormfield extends FormfieldBase {
+// @ts-expect-error
+export class HaFormfield extends Formfield {
   protected _labelClick() {
     const input = this.input;
     if (input) {
@@ -23,8 +23,9 @@ export class HaFormfield extends FormfieldBase {
     }
   }
 
-  static override styles = [
+  protected static get styles(): CSSResultGroup {
-    styles,
+    return [
+      Formfield.styles,
       css`
         :host(:not([alignEnd])) ::slotted(ha-switch) {
           margin-right: 10px;
@@ -36,6 +37,7 @@ export class HaFormfield extends FormfieldBase {
       `,
     ];
   }
+}
 
 declare global {
   interface HTMLElementTagNameMap {

src/components/ha-gauge.ts

@@ -1,10 +1,16 @@
 import { css, LitElement, PropertyValues, svg, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { formatNumber } from "../common/number/format_number";
 import { afterNextRender } from "../common/util/render-status";
 import { FrontendLocaleData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";
+import { isSafari } from "../util/is_safari";
+
+// Safari version 15.2 and up behaves differently than other Safari versions.
+// https://github.com/home-assistant/frontend/issues/10766
+const isSafari152 = isSafari && /Version\/15\.[^0-1]/.test(navigator.userAgent);
 
 const getAngle = (value: number, min: number, max: number) => {
   const percentage = getValueInPercentage(normalize(value, min, max), min, max);
@@ -59,12 +65,12 @@ export class Gauge extends LitElement {
 
   protected render() {
     return svg`
-      <svg viewBox="-50 -50 100 50" class="gauge">
+      <svg viewBox="0 0 100 50" class="gauge">
         ${
           !this.needle || !this.levels
             ? svg`<path
           class="dial"
-          d="M -40 0 A 40 40 0 0 1 40 0"
+          d="M 10 50 A 40 40 0 0 1 90 50"
         ></path>`
             : ""
         }
@@ -81,9 +87,9 @@ export class Gauge extends LitElement {
                         stroke="var(--info-color)"
                         class="level"
                         d="M
-                          ${0 - 40 * Math.cos((angle * Math.PI) / 180)}
+                          ${50 - 40 * Math.cos((angle * Math.PI) / 180)}
-                          ${0 - 40 * Math.sin((angle * Math.PI) / 180)}
+                          ${50 - 40 * Math.sin((angle * Math.PI) / 180)}
-                         A 40 40 0 0 1 40 0
+                         A 40 40 0 0 1 90 50
                         "
                       ></path>`;
                   }
@@ -92,9 +98,9 @@ export class Gauge extends LitElement {
                       stroke="${level.stroke}"
                       class="level"
                       d="M
-                        ${0 - 40 * Math.cos((angle * Math.PI) / 180)}
+                        ${50 - 40 * Math.cos((angle * Math.PI) / 180)}
-                        ${0 - 40 * Math.sin((angle * Math.PI) / 180)}
+                        ${50 - 40 * Math.sin((angle * Math.PI) / 180)}
-                       A 40 40 0 0 1 40 0
+                       A 40 40 0 0 1 90 50
                       "
                     ></path>`;
                 })
@@ -104,16 +110,46 @@ export class Gauge extends LitElement {
           this.needle
             ? svg`<path
                 class="needle"
-                d="M -25 -2.5 L -47.5 0 L -25 2.5 z"
+                d="M 25 47.5 L 2.5 50 L 25 52.5 z"
-                style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
+                style=${ifDefined(
+                  !isSafari
+                    ? styleMap({ transform: `rotate(${this._angle}deg)` })
+                    : undefined
+                )}
+                transform=${ifDefined(
+                  isSafari
+                    ? `rotate(${this._angle}${isSafari152 ? "" : " 50 50"})`
+                    : undefined
+                )}
               >
               `
             : svg`<path
                 class="value"
-                d="M -40 0 A 40 40 0 1 0 40 0"
+                d="M 90 50.001 A 40 40 0 0 1 10 50"
-                style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
+                style=${ifDefined(
+                  !isSafari
+                    ? styleMap({ transform: `rotate(${this._angle}deg)` })
+                    : undefined
+                )}
+                transform=${ifDefined(
+                  isSafari
+                    ? `rotate(${this._angle}${isSafari152 ? "" : " 50 50"})`
+                    : undefined
+                )}
               >`
         }
+        ${
+          // Workaround for https://github.com/home-assistant/frontend/issues/6467
+          isSafari
+            ? svg`<animateTransform
+                attributeName="transform"
+                type="rotate"
+                from="0 50 50"
+                to="${this._angle} 50 50"
+                dur="1s"
+              />`
+            : ""
+        }
         </path>
       </svg>
       <svg class="text">
@@ -151,10 +187,12 @@ export class Gauge extends LitElement {
         fill: none;
         stroke-width: 15;
         stroke: var(--gauge-color);
+        transform-origin: 50% 100%;
         transition: all 1s ease 0s;
       }
       .needle {
         fill: var(--primary-text-color);
+        transform-origin: 50% 100%;
         transition: all 1s ease 0s;
       }
       .level {

src/components/ha-hls-player.ts

@@ -9,6 +9,7 @@ import {
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { nextRender } from "../common/util/render-status";
+import { getExternalConfig } from "../external_app/external_config";
 import type { HomeAssistant } from "../types";
 import "./ha-alert";
 
@@ -90,9 +91,18 @@ class HaHLSPlayer extends LitElement {
     this._startHls();
   }
 
+  private async _getUseExoPlayer(): Promise<boolean> {
+    if (!this.hass!.auth.external || !this.allowExoPlayer) {
+      return false;
+    }
+    const externalConfig = await getExternalConfig(this.hass!.auth.external);
+    return externalConfig && externalConfig.hasExoPlayer;
+  }
+
   private async _startHls(): Promise<void> {
     this._error = undefined;
 
+    const useExoPlayerPromise = this._getUseExoPlayer();
     const masterPlaylistPromise = fetch(this.url);
 
     const Hls: typeof HlsType = (await import("hls.js/dist/hls.light.min"))
@@ -116,8 +126,7 @@ class HaHLSPlayer extends LitElement {
       return;
     }
 
-    const useExoPlayer =
+    const useExoPlayer = await useExoPlayerPromise;
-      this.allowExoPlayer && this.hass.auth.external?.config.hasExoPlayer;
     const masterPlaylist = await (await masterPlaylistPromise).text();
 
     if (!this.isConnected) {

src/components/ha-icon-picker.ts

@@ -1,13 +1,16 @@
+import { mdiCheck, mdiMenuDown, mdiMenuUp } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-item/paper-icon-item";
+import "@polymer/paper-item/paper-item-body";
+import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { css, html, LitElement, TemplateResult } from "lit";
-import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { customIcons } from "../data/custom_icons";
 import { PolymerChangedEvent } from "../polymer-types";
-import { HomeAssistant } from "../types";
-import "./ha-combo-box";
-import type { HaComboBox } from "./ha-combo-box";
 import "./ha-icon";
+import "./ha-icon-button";
 
 type IconItem = {
   icon: string;
@@ -16,17 +19,35 @@ type IconItem = {
 let iconItems: IconItem[] = [];
 
 // eslint-disable-next-line lit/prefer-static-styles
-const rowRenderer: ComboBoxLitRenderer<IconItem> = (item) => html`<mwc-list-item
+const rowRenderer: ComboBoxLitRenderer<IconItem> = (item) => html`<style>
-  graphic="avatar"
+    paper-icon-item {
->
+      padding: 0;
-  <ha-icon .icon=${item.icon} slot="graphic"></ha-icon>
+      margin: -8px;
-  ${item.icon}
+    }
-</mwc-list-item>`;
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-icon-item {
+      margin-left: 0;
+    }
+  </style>
+
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
+  <paper-icon-item>
+    <ha-icon .icon=${item.icon} slot="item-icon"></ha-icon>
+    <paper-item-body>${item.icon}</paper-item-body>
+  </paper-icon-item>`;
 
 @customElement("ha-icon-picker")
 export class HaIconPicker extends LitElement {
-  @property() public hass?: HomeAssistant;
-
   @property() public value?: string;
 
   @property() public label?: string;
@@ -43,40 +64,51 @@ export class HaIconPicker extends LitElement {
 
   @state() private _opened = false;
 
-  @query("ha-combo-box", true) private comboBox!: HaComboBox;
+  @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement;
 
   protected render(): TemplateResult {
     return html`
-      <ha-combo-box
+      <vaadin-combo-box-light
-        .hass=${this.hass}
         item-value-path="icon"
         item-label-path="icon"
         .value=${this._value}
         allow-custom-value
         .filteredItems=${iconItems}
-        .label=${this.label}
+        ${comboBoxRenderer(rowRenderer)}
-        .disabled=${this.disabled}
-        .placeholder=${this.placeholder}
-        .errorMessage=${this.errorMessage}
-        .invalid=${this.invalid}
-        .renderer=${rowRenderer}
-        icon
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
         @filter-changed=${this._filterChanged}
+      >
+        <paper-input
+          .label=${this.label}
+          .placeholder=${this.placeholder}
+          .disabled=${this.disabled}
+          class="input"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+          .errorMessage=${this.errorMessage}
+          .invalid=${this.invalid}
         >
           ${this._value || this.placeholder
             ? html`
-              <ha-icon .icon=${this._value || this.placeholder} slot="icon">
+                <ha-icon .icon=${this._value || this.placeholder} slot="prefix">
                 </ha-icon>
               `
             : this.fallbackPath
             ? html`<ha-svg-icon
                 .path=${this.fallbackPath}
-              slot="icon"
+                slot="prefix"
               ></ha-svg-icon>`
             : ""}
-      </ha-combo-box>
+          <ha-icon-button
+            .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+            slot="suffix"
+            class="toggle-button"
+          ></ha-icon-button>
+        </paper-input>
+      </vaadin-combo-box-light>
     `;
   }
 
@@ -118,7 +150,6 @@ export class HaIconPicker extends LitElement {
   }
 
   private _valueChanged(ev: PolymerChangedEvent<string>) {
-    ev.stopPropagation();
     this._setValue(ev.detail.value);
   }
 
@@ -127,7 +158,7 @@ export class HaIconPicker extends LitElement {
     fireEvent(
       this,
       "value-changed",
-      { value: this._value },
+      { value },
       {
         bubbles: false,
         composed: false,
@@ -174,13 +205,17 @@ export class HaIconPicker extends LitElement {
     return css`
       ha-icon,
       ha-svg-icon {
-        color: var(--primary-text-color);
         position: relative;
         bottom: 2px;
       }
       *[slot="prefix"] {
         margin-right: 8px;
       }
+      paper-input > ha-icon-button {
+        --mdc-icon-button-size: 24px;
+        padding: 2px;
+        color: var(--secondary-text-color);
+      }
     `;
   }
 }

src/components/ha-qr-scanner.ts

@@ -1,6 +1,7 @@
-import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-select/mwc-select";
+import "@material/mwc-textfield/mwc-textfield";
+import type { TextField } from "@material/mwc-textfield/mwc-textfield";
 import { mdiCamera } from "@mdi/js";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -10,8 +11,7 @@ import { stopPropagation } from "../common/dom/stop_propagation";
 import { LocalizeFunc } from "../common/translations/localize";
 import "./ha-alert";
 import "./ha-button-menu";
-import "./ha-textfield";
+import "@material/mwc-button/mwc-button";
-import type { HaTextField } from "./ha-textfield";
 
 @customElement("ha-qr-scanner")
 class HaQrScanner extends LitElement {
@@ -29,7 +29,7 @@ class HaQrScanner extends LitElement {
 
   @query("#canvas-container", true) private _canvasContainer!: HTMLDivElement;
 
-  @query("ha-textfield") private _manualInput?: HaTextField;
+  @query("mwc-textfield") private _manualInput?: TextField;
 
   public disconnectedCallback(): void {
     super.disconnectedCallback();
@@ -102,11 +102,11 @@ class HaQrScanner extends LitElement {
           </ha-alert>
           <p>${this.localize("ui.components.qr-scanner.manual_input")}</p>
           <div class="row">
-            <ha-textfield
+            <mwc-textfield
               .label=${this.localize("ui.components.qr-scanner.enter_qr_code")}
               @keyup=${this._manualKeyup}
               @paste=${this._manualPaste}
-            ></ha-textfield>
+            ></mwc-textfield>
             <mwc-button @click=${this._manualSubmit}
               >${this.localize("ui.common.submit")}</mwc-button
             >
@@ -161,7 +161,7 @@ class HaQrScanner extends LitElement {
 
   private _manualKeyup(ev: KeyboardEvent) {
     if (ev.key === "Enter") {
-      this._qrCodeScanned((ev.target as HaTextField).value);
+      this._qrCodeScanned((ev.target as TextField).value);
     }
   }
 
@@ -199,7 +199,7 @@ class HaQrScanner extends LitElement {
       display: flex;
       align-items: center;
     }
-    ha-textfield {
+    mwc-textfield {
       flex: 1;
       margin-right: 8px;
     }

src/components/ha-radio.ts

@@ -1,18 +1,12 @@
-import { RadioBase } from "@material/mwc-radio/mwc-radio-base";
+import { Radio } from "@material/mwc-radio";
-import { styles } from "@material/mwc-radio/mwc-radio.css";
-import { css } from "lit";
 import { customElement } from "lit/decorators";
 
 @customElement("ha-radio")
-export class HaRadio extends RadioBase {
+export class HaRadio extends Radio {
-  static override styles = [
+  public firstUpdated() {
-    styles,
+    super.firstUpdated();
-    css`
+    this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
-      :host {
-        --mdc-theme-secondary: var(--primary-color);
   }
-    `,
-  ];
 }
 
 declare global {

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

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { AddonSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
@@ -22,12 +22,6 @@ export class HaAddonSelector extends LitElement {
       allow-custom-entity
     ></ha-addon-picker>`;
   }
-
-  static styles = css`
-    ha-addon-picker {
-      width: 100%;
-    }
-  `;
 }
 
 declare global {

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

@@ -1,38 +0,0 @@
-import "../entity/ha-entity-attribute-picker";
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { AttributeSelector } from "../../data/selector";
-import { SubscribeMixin } from "../../mixins/subscribe-mixin";
-import { HomeAssistant } from "../../types";
-
-@customElement("ha-selector-attribute")
-export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
-  @property() public hass!: HomeAssistant;
-
-  @property() public selector!: AttributeSelector;
-
-  @property() public value?: any;
-
-  @property() public label?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  protected render() {
-    return html`
-      <ha-entity-attribute-picker
-        .hass=${this.hass}
-        .entityId=${this.selector.attribute.entity_id}
-        .value=${this.value}
-        .label=${this.label}
-        .disabled=${this.disabled}
-        allow-custom-value
-      ></ha-entity-attribute-picker>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-attribute": HaSelectorAttribute;
-  }
-}

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

@@ -1,37 +0,0 @@
-import "../ha-duration-input";
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { DurationSelector } from "../../data/selector";
-import { HomeAssistant } from "../../types";
-
-@customElement("ha-selector-duration")
-export class HaTimeDuration extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public selector!: DurationSelector;
-
-  @property() public value?: string;
-
-  @property() public label?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = true;
-
-  protected render() {
-    return html`
-      <ha-duration-input
-        .label=${this.label}
-        .data=${this.value}
-        .disabled=${this.disabled}
-        .required=${this.required}
-      ></ha-duration-input>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-duration": HaTimeDuration;
-  }
-}

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

@@ -1,3 +1,4 @@
+import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -5,7 +6,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { NumberSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../ha-slider";
-import "../ha-textfield";
 
 @customElement("ha-selector-number")
 export class HaNumberSelector extends LitElement {
@@ -36,36 +36,39 @@ export class HaNumberSelector extends LitElement {
           >
           </ha-slider>`
         : ""}
-      <ha-textfield
+      <paper-input
-        inputMode="numeric"
         pattern="[0-9]+([\\.][0-9]+)?"
         .label=${this.selector.number.mode !== "box" ? undefined : this.label}
         .placeholder=${this.placeholder}
+        .noLabelFloat=${this.selector.number.mode !== "box"}
         class=${classMap({ single: this.selector.number.mode === "box" })}
         .min=${this.selector.number.min}
         .max=${this.selector.number.max}
         .value=${this.value}
         .step=${this.selector.number.step ?? 1}
         .disabled=${this.disabled}
-        .suffix=${this.selector.number.unit_of_measurement}
         type="number"
-        autoValidate
+        auto-validate
-        ?no-spinner=${this.selector.number.mode !== "box"}
+        @value-changed=${this._handleInputChange}
-        @input=${this._handleInputChange}
       >
-      </ha-textfield>`;
+        ${this.selector.number.unit_of_measurement
+          ? html`<div slot="suffix">
+              ${this.selector.number.unit_of_measurement}
+            </div>`
+          : ""}
+      </paper-input>`;
   }
 
   private get _value() {
-    return this.value ?? 0;
+    return this.value || 0;
   }
 
   private _handleInputChange(ev) {
     ev.stopPropagation();
     const value =
-      ev.target.value === "" || isNaN(ev.target.value)
+      ev.detail.value === "" || isNaN(ev.detail.value)
         ? undefined
-        : Number(ev.target.value);
+        : Number(ev.detail.value);
     if (this.value === value) {
       return;
     }
@@ -91,11 +94,7 @@ export class HaNumberSelector extends LitElement {
       ha-slider {
         flex: 1;
       }
-      ha-textfield {
-        --ha-textfield-input-width: 40px;
-      }
       .single {
-        --ha-textfield-input-width: unset;
         flex: 1;
       }
     `;

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

@@ -18,7 +18,6 @@ export class HaObjectSelector extends LitElement {
 
   protected render() {
     return html`<ha-yaml-editor
-      .hass=${this.hass}
       .disabled=${this.disabled}
       .placeholder=${this.placeholder}
       .defaultValue=${this.value}

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

@@ -1,11 +1,9 @@
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import { stopPropagation } from "../../common/dom/stop_propagation";
 import { SelectSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
-import "@material/mwc-select/mwc-select";
+import "../ha-paper-dropdown-menu";
-import "@material/mwc-list/mwc-list-item";
 
 @customElement("ha-selector-select")
 export class HaSelectSelector extends LitElement {
@@ -20,37 +18,46 @@ export class HaSelectSelector extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   protected render() {
-    return html`<mwc-select
+    return html`<ha-paper-dropdown-menu
-      fixedMenuPosition
-      naturalMenuWidth
-      .label=${this.label}
-      .value=${this.value}
       .disabled=${this.disabled}
-      @closed=${stopPropagation}
+      .label=${this.label}
-      @selected=${this._valueChanged}
+    >
+      <paper-listbox
+        slot="dropdown-content"
+        attr-for-selected="item-value"
+        .selected=${this.value}
+        @selected-item-changed=${this._valueChanged}
       >
         ${this.selector.select.options.map(
           (item: string) => html`
-          <mwc-list-item .value=${item}>${item}</mwc-list-item>
+            <paper-item .itemValue=${item}> ${item} </paper-item>
           `
         )}
-    </mwc-select>`;
+      </paper-listbox>
+    </ha-paper-dropdown-menu>`;
   }
 
   private _valueChanged(ev) {
-    ev.stopPropagation();
+    if (this.disabled || !ev.detail.value) {
-    if (this.disabled || !ev.target.value) {
       return;
     }
     fireEvent(this, "value-changed", {
-      value: ev.target.value,
+      value: ev.detail.value.itemValue,
     });
   }
 
   static get styles(): CSSResultGroup {
     return css`
-      mwc-select {
+      ha-paper-dropdown-menu {
         width: 100%;
+        min-width: 200px;
+        display: block;
+      }
+      paper-listbox {
+        min-width: 200px;
+      }
+      paper-item {
+        cursor: pointer;
       }
     `;
   }

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

@@ -1,3 +1,8 @@
+import "@material/mwc-list/mwc-list";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-tab-bar/mwc-tab-bar";
+import "@material/mwc-tab/mwc-tab";
+import "@polymer/paper-input/paper-input";
 import {
   HassEntity,
   HassServiceTarget,

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

@@ -1,12 +1,10 @@
-import { mdiEye, mdiEyeOff } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
-import { css, CSSResultGroup, html, LitElement } from "lit";
+import "@polymer/paper-input/paper-textarea";
-import { customElement, property, state } from "lit/decorators";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { StringSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
-import "../ha-icon-button";
-import "../ha-textarea";
-import "../ha-textfield";
 
 @customElement("ha-selector-text")
 export class HaTextSelector extends LitElement {
@@ -22,50 +20,27 @@ export class HaTextSelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public required = true;
-
-  @state() private _unmaskedPassword = false;
-
   protected render() {
     if (this.selector.text?.multiline) {
-      return html`<ha-textarea
+      return html`<paper-textarea
         .label=${this.label}
         .placeholder=${this.placeholder}
-        .value=${this.value || ""}
+        .value=${this.value}
         .disabled=${this.disabled}
-        @input=${this._handleChange}
+        @value-changed=${this._handleChange}
         autocapitalize="none"
         autocomplete="off"
         spellcheck="false"
-        .required=${this.required}
+      ></paper-textarea>`;
-        autogrow
-      ></ha-textarea>`;
     }
-    return html`<ha-textfield
+    return html`<paper-input
-        .value=${this.value || ""}
+      required
-        .placeholder=${this.placeholder || ""}
+      .value=${this.value}
+      .placeholder=${this.placeholder}
       .disabled=${this.disabled}
-        .type=${this._unmaskedPassword ? "text" : this.selector.text?.type}
+      @value-changed=${this._handleChange}
-        @input=${this._handleChange}
+      .label=${this.label}
-        .label=${this.label || ""}
+    ></paper-input>`;
-        .suffix=${this.selector.text?.type === "password"
-          ? // reserve some space for the icon.
-            html`<div style="width: 24px"></div>`
-          : this.selector.text?.suffix}
-        .required=${this.required}
-      ></ha-textfield>
-      ${this.selector.text?.type === "password"
-        ? html`<ha-icon-button
-            toggles
-            .label=${`${this._unmaskedPassword ? "Hide" : "Show"} password`}
-            @click=${this._toggleUnmaskedPassword}
-            .path=${this._unmaskedPassword ? mdiEyeOff : mdiEye}
-          ></ha-icon-button>`
-        : ""}`;
-  }
-
-  private _toggleUnmaskedPassword(): void {
-    this._unmaskedPassword = !this._unmaskedPassword;
   }
 
   private _handleChange(ev) {
@@ -75,27 +50,6 @@ export class HaTextSelector extends LitElement {
     }
     fireEvent(this, "value-changed", { value });
   }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: block;
-        position: relative;
-      }
-      ha-textarea,
-      ha-textfield {
-        width: 100%;
-      }
-      ha-icon-button {
-        position: absolute;
-        top: 16px;
-        right: 16px;
-        --mdc-icon-button-size: 24px;
-        --mdc-icon-size: 20px;
-        color: var(--secondary-text-color);
-      }
-    `;
-  }
 }
 
 declare global {

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

@@ -22,6 +22,7 @@ export class HaTimeSelector extends LitElement {
         .value=${this.value}
         .locale=${this.hass.locale}
         .disabled=${this.disabled}
+        hide-label
         enable-second
       ></ha-time-input>
     `;

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

@@ -6,10 +6,8 @@ import { HomeAssistant } from "../../types";
 import "./ha-selector-action";
 import "./ha-selector-addon";
 import "./ha-selector-area";
-import "./ha-selector-attribute";
 import "./ha-selector-boolean";
 import "./ha-selector-device";
-import "./ha-selector-duration";
 import "./ha-selector-entity";
 import "./ha-selector-number";
 import "./ha-selector-object";
@@ -32,10 +30,12 @@ export class HaSelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public required = true;
-
   public focus() {
-    this.shadowRoot?.getElementById("selector")?.focus();
+    const input = this.shadowRoot!.getElementById("selector");
+    if (!input) {
+      return;
+    }
+    (input as HTMLElement).focus();
   }
 
   private get _type() {
@@ -51,7 +51,6 @@ export class HaSelector extends LitElement {
         label: this.label,
         placeholder: this.placeholder,
         disabled: this.disabled,
-        required: this.required,
         id: "selector",
       })}
     `;

src/components/ha-service-control.ts

@@ -17,7 +17,6 @@ import {
 import { Selector } from "../data/selector";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
-import { documentationUrl } from "../util/documentation-url";
 import "./ha-checkbox";
 import "./ha-icon-button";
 import "./ha-selector/ha-selector";
@@ -67,7 +66,7 @@ export class HaServiceControl extends LitElement {
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
 
-  protected willUpdate(changedProperties: PropertyValues<this>) {
+  protected updated(changedProperties: PropertyValues<this>) {
     if (!changedProperties.has("value")) {
       return;
     }
@@ -131,35 +130,6 @@ export class HaServiceControl extends LitElement {
       this._value = this.value;
     }
 
-    if (oldValue?.service !== this.value?.service) {
-      let updatedDefaultValue = false;
-      if (this._value && serviceData) {
-        // Set mandatory bools without a default value to false
-        if (!this._value.data) {
-          this._value.data = {};
-        }
-        serviceData.fields.forEach((field) => {
-          if (
-            field.selector &&
-            field.required &&
-            field.default === undefined &&
-            "boolean" in field.selector &&
-            this._value!.data![field.key] === undefined
-          ) {
-            updatedDefaultValue = true;
-            this._value!.data![field.key] = false;
-          }
-        });
-      }
-      if (updatedDefaultValue) {
-        fireEvent(this, "value-changed", {
-          value: {
-            ...this._value,
-          },
-        });
-      }
-    }
-
     if (this._value?.data) {
       const yamlEditor = this._yamlEditor;
       if (yamlEditor && yamlEditor.value !== this._value.data) {
@@ -233,12 +203,7 @@ export class HaServiceControl extends LitElement {
         <p>${serviceData?.description}</p>
         ${this._manifest
           ? html` <a
-              href=${this._manifest.is_built_in
+              href=${this._manifest.documentation}
-                ? documentationUrl(
-                    this.hass,
-                    `/integrations/${this._manifest.domain}`
-                  )
-                : this._manifest.documentation}
               title=${this.hass.localize(
                 "ui.components.service-control.integration_doc"
               )}
@@ -286,7 +251,6 @@ export class HaServiceControl extends LitElement {
         : ""}
       ${shouldRenderServiceDataYaml
         ? html`<ha-yaml-editor
-            .hass=${this.hass}
             .label=${this.hass.localize(
               "ui.components.service-control.service_data"
             )}

src/components/ha-service-picker.ts

@@ -1,3 +1,4 @@
+import { mdiCheck } from "@mdi/js";
 import { html, LitElement } from "lit";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { property, state } from "lit/decorators";
@@ -10,12 +11,39 @@ import "./ha-combo-box";
 
 const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
   item
-) => html`<mwc-list-item twoline>
+  // eslint-disable-next-line lit/prefer-static-styles
-  <span>${item.name}</span>
+) => html`<style>
-  <span slot="secondary"
+    paper-item {
-    >${item.name === item.service ? "" : item.service}</span
+      padding: 0;
-  >
+      margin: -10px;
-</mwc-list-item>`;
+      margin-left: 0px;
+    }
+    #content {
+      display: flex;
+      align-items: center;
+    }
+    :host([selected]) paper-item {
+      margin-left: 10px;
+    }
+    ha-svg-icon {
+      padding-left: 2px;
+      margin-right: -2px;
+      color: var(--secondary-text-color);
+    }
+    :host(:not([selected])) ha-svg-icon {
+      display: none;
+    }
+    :host([selected]) paper-icon-item {
+      margin-left: 0;
+    }
+  </style>
+  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
+  <paper-item>
+    <paper-item-body two-line>
+      ${item.name}
+      <span secondary>${item.name === item.service ? "" : item.service}</span>
+    </paper-item-body>
+  </paper-item>`;
 
 class HaServicePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;

src/components/ha-sidebar.ts

@@ -8,7 +8,6 @@ import {
   mdiClose,
   mdiCog,
   mdiFormatListBulletedType,
-  mdiHammer,
   mdiLightningBolt,
   mdiMenu,
   mdiMenuOpen,
@@ -44,6 +43,10 @@ import {
   PersistentNotification,
   subscribeNotifications,
 } from "../data/persistent_notification";
+import {
+  ExternalConfig,
+  getExternalConfig,
+} from "../external_app/external_config";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
 import { haStyleScrollbar } from "../resources/styles";
 import type { HomeAssistant, PanelInfo, Route } from "../types";
@@ -53,7 +56,7 @@ import "./ha-menu-button";
 import "./ha-svg-icon";
 import "./user/ha-user-badge";
 
-const SHOW_AFTER_SPACER = ["config", "developer-tools"];
+const SHOW_AFTER_SPACER = ["config"];
 
 const SUPPORT_SCROLL_IF_NEEDED = "scrollIntoViewIfNeeded" in document.body;
 
@@ -62,14 +65,12 @@ const SORT_VALUE_URL_PATHS = {
   map: 2,
   logbook: 3,
   history: 4,
-  "developer-tools": 9,
   config: 11,
 };
 
 const PANEL_ICONS = {
   calendar: mdiCalendar,
   config: mdiCog,
-  "developer-tools": mdiHammer,
   energy: mdiLightningBolt,
   history: mdiChartBox,
   logbook: mdiFormatListBulletedType,
@@ -188,6 +189,8 @@ class HaSidebar extends LitElement {
 
   @property({ type: Boolean }) public editMode = false;
 
+  @state() private _externalConfig?: ExternalConfig;
+
   @state() private _notifications?: PersistentNotification[];
 
   @state() private _renderEmptySortable = false;
@@ -264,6 +267,13 @@ class HaSidebar extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
+
+    if (this.hass && this.hass.auth.external) {
+      getExternalConfig(this.hass.auth.external).then((conf) => {
+        this._externalConfig = conf;
+      });
+    }
+
     subscribeNotifications(this.hass.connection, (notifications) => {
       this._notifications = notifications;
     });
@@ -546,7 +556,8 @@ class HaSidebar extends LitElement {
 
   private _renderExternalConfiguration() {
     return html`${!this.hass.user?.is_admin &&
-    this.hass.auth.external?.config.hasSettingsScreen
+    this._externalConfig &&
+    this._externalConfig.hasSettingsScreen
       ? html`
           <a
             role="option"
@@ -1019,19 +1030,6 @@ class HaSidebar extends LitElement {
           white-space: nowrap;
         }
 
-        .dev-tools {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          padding: 0 8px;
-          width: 256px;
-          box-sizing: border-box;
-        }
-
-        .dev-tools a {
-          color: var(--sidebar-icon-color);
-        }
-
         .tooltip {
           display: none;
           position: absolute;

src/components/ha-slider.js

@@ -3,7 +3,7 @@ import "@polymer/paper-slider";
 const PaperSliderClass = customElements.get("paper-slider");
 let subTemplate;
 
-export class HaSlider extends PaperSliderClass {
+class HaSlider extends PaperSliderClass {
   static get template() {
     if (!subTemplate) {
       subTemplate = PaperSliderClass.template.cloneNode(true);

src/components/ha-svg-icon.ts

@@ -12,10 +12,7 @@ export class HaSvgIcon extends LitElement {
     <svg
       viewBox=${this.viewBox || "0 0 24 24"}
       preserveAspectRatio="xMidYMid meet"
-      focusable="false"
+      focusable="false">
-      role="img" 
-      aria-hidden="true"
-    >
       <g>
       ${this.path ? svg`<path d=${this.path}></path>` : ""}
       </g>

src/components/ha-switch.ts

@@ -1,11 +1,11 @@
-import { SwitchBase } from "@material/mwc-switch/deprecated/mwc-switch-base";
+import { Switch } from "@material/mwc-switch/deprecated";
-import { styles } from "@material/mwc-switch/deprecated/mwc-switch.css";
+import { css, CSSResultGroup } from "lit";
-import { css } from "lit";
 import { customElement, property } from "lit/decorators";
 import { forwardHaptic } from "../data/haptics";
 
 @customElement("ha-switch")
-export class HaSwitch extends SwitchBase {
+// @ts-expect-error
+export class HaSwitch extends Switch {
   // Generate a haptic vibration.
   // Only set to true if the new value of the switch is applied right away when toggling.
   // Do not add haptic when a user is required to press save.
@@ -13,6 +13,10 @@ export class HaSwitch extends SwitchBase {
 
   protected firstUpdated() {
     super.firstUpdated();
+    this.style.setProperty(
+      "--mdc-theme-secondary",
+      "var(--switch-checked-color)"
+    );
     this.addEventListener("change", () => {
       if (this.haptic) {
         forwardHaptic("light");
@@ -20,12 +24,10 @@ export class HaSwitch extends SwitchBase {
     });
   }
 
-  static override styles = [
+  static get styles(): CSSResultGroup {
-    styles,
+    return [
+      Switch.styles,
       css`
-      :host {
-        --mdc-theme-secondary: var(--switch-checked-color);
-      }
         .mdc-switch.mdc-switch--checked .mdc-switch__thumb {
           background-color: var(--switch-checked-button-color);
           border-color: var(--switch-checked-button-color);
@@ -45,6 +47,7 @@ export class HaSwitch extends SwitchBase {
       `,
     ];
   }
+}
 
 declare global {
   interface HTMLElementTagNameMap {