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
-index 4e18ade7ba485849f17f28c94c42f0e0e01ac387..8f34f4f646c7f7becc208fb5a546c96034fc74dc 100644
---- a/polyfillLoaders/EventTarget.js
-+++ b/polyfillLoaders/EventTarget.js
-@@ -6,16 +6,15 @@
- let _ET;
- let ET;
+diff --git a/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js b/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
+index d92179f7fd5315203f870a6963e871dc8ddf6c0c..362e284121b97e0fba0925225777aebc32e26b8d 100644
+--- a/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
++++ b/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js
+@@ -1,14 +1,15 @@
+-let _ET, ET;
++let _ET;
++let ET;
  export default async function EventTarget() {
 -    return ET || init();
 +  return ET || init();
@@ -25,5 +26,4 @@ index 4e18ade7ba485849f17f28c94c42f0e0e01ac387..8f34f4f646c7f7becc208fb5a546c960
 +    _ET = (await import("event-target-shim")).default.EventTarget;
 +  }
 +  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")
-      .match(/version\W+=\W(\d{8}\.\d)/);
+      .readFileSync(path.resolve(paths.polymer_dir, "setup.py"), "utf8")
+      .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(
-          bundle.emptyPackages({ latestBuild, isHassioBuild }).join("|")
-        ),
+        new RegExp(bundle.emptyPackages({ latestBuild }).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: "boolean", name: "ssl", default: false },
+      { type: "string", name: "path", optional: true, default: "/" },
+      { 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: {
-        name: "Text",
-        selector: { text: {} },
-      },
-      password: {
-        name: "Password",
-        selector: { text: { type: "password" } },
-      },
+      text: { name: "Text", selector: { text: { multiline: false } } },
       text_multiline: {
         name: "Text multiline",
-        selector: {
-          text: { multiline: true },
-        },
+        selector: { 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(
-        (addon) => !addon.advanced && addon.stage === "stable"
-      );
+      _addons = _addons.filter((addon) => !addon.advanced);
     }
     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._dialogParams.reloadBackup) {
-        this._dialogParams.reloadBackup();
+    if (this._params && !this._params.onboarding) {
+      if (this._params.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(
-          "ui.panel.page-onboarding.restore.upload_backup"
-        ) || "Upload backup"}
+        .heading=${true}
         @closed=${this.closeDialog}
       >
         <div slot="heading">
           <ha-header-bar>
-            <span slot="title"
-              >${this.hass?.localize(
-                "ui.panel.page-onboarding.restore.upload_backup"
-              ) || "Upload backup"}</span
-            >
+            <span slot="title"> 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) {
-    this._backup = await fetchHassioBackupInfo(this.hass, dialogParams.slug);
-    this._dialogParams = dialogParams;
+  public async showDialog(params: HassioBackupDialogParams) {
+    this._backup = await fetchHassioBackupInfo(this.hass, params.slug);
+    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
-                >${this._dialogParams.supervisor?.localize(
-                  "backup.download_backup"
-                )}</mwc-list-item
-              >
-              <mwc-list-item class="error"
-                >${this._dialogParams.supervisor?.localize(
-                  "backup.delete_backup_title"
-                )}</mwc-list-item
-              >
+              <mwc-list-item>Download Backup</mwc-list-item>
+              <mwc-list-item class="error">Delete Backup</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) {
-    this._dialogParams = dialogParams;
+  public showDialog(params: HassioCreateBackupDialogParams) {
+    this._dialogParams = params;
     this._creatingBackup = false;
   }
 
@@ -57,7 +57,7 @@ class HassioCreateBackupDialog extends LitElement {
         )}
       >
         ${this._creatingBackup
-          ? html`<ha-circular-progress active></ha-circular-progress>`
+          ? html` <ha-circular-progress active></ha-circular-progress>`
           : html`<supervisor-backup-content
               .hass=${this.hass}
               .supervisor=${this._dialogParams.supervisor}

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

@@ -39,8 +39,8 @@ class HassioHardwareDialog extends LitElement {
 
   @state() private _filter?: string;
 
-  public showDialog(dialogParams: HassioHardwareDialogParams) {
-    this._dialogParams = dialogParams;
+  public showDialog(params: HassioHardwareDialogParams) {
+    this._dialogParams = params;
   }
 
   public closeDialog() {
@@ -65,16 +65,14 @@ class HassioHardwareDialog extends LitElement {
         scrimClickAction
         hideActions
         @closed=${this.closeDialog}
-        .heading=${this._dialogParams.supervisor.localize(
-          "dialog.hardware.title"
-        )}
+        .heading=${true}
       >
         <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 {
-  fetchHassioHomeAssistantInfo,
-  fetchHassioSupervisorInfo,
-  updateSupervisor,
-} from "../../../src/data/hassio/supervisor";
+import { updateOS } from "../../../src/data/hassio/host";
+import { 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) {
-      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;
+    if (updateType === "addon") {
+      if (!this.addonSlug) {
+        this.addonSlug = pathPart;
+      }
+      this._loadAddonData();
     }
   }
 
@@ -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.8",
-    "@codemirror/gutter": "^0.19.9",
-    "@codemirror/highlight": "^0.19.7",
-    "@codemirror/history": "^0.19.2",
+    "@codemirror/commands": "^0.19.5",
+    "@codemirror/gutter": "^0.19.4",
+    "@codemirror/highlight": "^0.19.6",
+    "@codemirror/history": "^0.19.0",
     "@codemirror/legacy-modes": "^0.19.0",
     "@codemirror/rectangular-selection": "^0.19.1",
-    "@codemirror/search": "^0.19.6",
-    "@codemirror/state": "^0.19.6",
-    "@codemirror/stream-parser": "^0.19.5",
-    "@codemirror/text": "^0.19.6",
-    "@codemirror/view": "^0.19.40",
+    "@codemirror/search": "^0.19.2",
+    "@codemirror/state": "^0.19.4",
+    "@codemirror/stream-parser": "^0.19.2",
+    "@codemirror/text": "^0.19.5",
+    "@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-themable-mixin": "^22.0.4",
+    "@vaadin/vaadin-combo-box": "^21.0.2",
+    "@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-vaadin-helpers": "^0.3.0",
+    "lit": "^2.0.2",
+    "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-html": "2.1.2",
-    "lit-element": "3.1.2",
-    "@lit/reactive-element": "1.2.1"
+    "lit": "^2.0.2",
+    "lit-html": "2.0.1",
+    "lit-element": "3.0.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
-python3 -m build
-python3 -m twine upload dist/*.whl --skip-existing
+rm -rf dist
+python3 setup.py -q sdist
+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 @@
-"""
-Entry point for setuptools. Required for editable installs.
-TODO: Remove file after updating to pip 21.3
-"""
-from setuptools import setup
+from setuptools import setup, find_packages
 
-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 type { ForDict } from "../../data/automation";
+import { HaDurationData } from "../../components/ha-duration-input";
+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(
-      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),
-      }
-    )
+    new Intl.DateTimeFormat(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,20 +31,15 @@ export const formatDateTimeWithSeconds = (
 
 const formatDateTimeWithSecondsMem = memoizeOne(
   (locale: FrontendLocaleData) =>
-    new Intl.DateTimeFormat(
-      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",
-        second: "2-digit",
-        hour12: useAmPm(locale),
-      }
-    )
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: useAmPm(locale) ? "numeric" : "2-digit",
+      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(
-      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),
-      }
-    )
+    new Intl.DateTimeFormat(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(
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
-        hour: "numeric",
-        minute: "2-digit",
-        hour12: useAmPm(locale),
-      }
-    )
+    new Intl.DateTimeFormat(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(
-      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),
-      }
-    )
+    new Intl.DateTimeFormat(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(
-      locale.language === "en" && !useAmPm(locale)
-        ? "en-u-hc-h23"
-        : locale.language,
-      {
-        weekday: "long",
-        hour: useAmPm(locale) ? "numeric" : "2-digit",
-        minute: "2-digit",
-        hour12: useAmPm(locale),
-      }
-    )
+    new Intl.DateTimeFormat(locale.language, {
+      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) {
-    if (!subscribe) {
-      return;
-    }
+  constructor() {
     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 || ""}
-        .icon=${true}
-        .iconTrailing=${this.filter}
-        @input=${this._filterInputChanged}
+        .value=${this.filter}
+        @value-changed=${this._filterInputChanged}
+        .noLabelFloat=${this.noLabelFloat}
       >
-        <slot name="prefix" slot="leadingIcon">
-          <ha-svg-icon
-            tabindex="-1"
-            class="prefix"
-            .path=${mdiMagnify}
-          ></ha-svg-icon>
+        <slot name="prefix" slot="prefix">
+          <ha-svg-icon 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 {
-        --mdc-icon-size: 20px;
-      }
-      ha-textfield {
-        display: inherit;
+      ha-svg-icon.prefix {
+        margin: 8px;
       }
     `;
   }

src/common/translations/localize.ts

@@ -77,7 +77,7 @@ export const computeLocalize = async (
 
   await loadPolyfillLocales(language);
 
-  // Every time any of the parameters change, invalidate the strings cache.
+  // Everytime any of the parameters change, invalidate the strings cache.
   cache._localizationCache = {};
 
   return (key, ...args) => {

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,99 +337,111 @@ export class HaDataTable extends LitElement {
                 </div>
               `
             : html`
-                <lit-virtualizer
-                  scroller
+                <div
                   class="mdc-data-table__content scroller ha-scrollbar"
                   @scroll=${this._saveScrollPos}
-                  .items=${this._items}
-                  .renderItem=${this._renderRow}
-                ></lit-virtualizer>
+                >
+                  ${scroll({
+                    items: this._items,
+                    layout: Layout1d,
+                    renderItem: (row: DataTableRowData, index) => {
+                      // not sure how this happens...
+                      if (!row) {
+                        return html``;
+                      }
+                      if (row.append) {
+                        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}
+                          role="row"
+                          .rowId=${row[this.id]}
+                          @click=${this._handleRowClick}
+                          class="mdc-data-table__row ${classMap({
+                            "mdc-data-table__row--selected":
+                              this._checkedRows.includes(String(row[this.id])),
+                            clickable: this.clickable,
+                          })}"
+                          aria-selected=${ifDefined(
+                            this._checkedRows.includes(String(row[this.id]))
+                              ? true
+                              : undefined
+                          )}
+                          .selectable=${row.selectable !== false}
+                        >
+                          ${this.selectable
+                            ? html`
+                                <div
+                                  class="mdc-data-table__cell mdc-data-table__cell--checkbox"
+                                  role="cell"
+                                >
+                                  <ha-checkbox
+                                    class="mdc-data-table__row-checkbox"
+                                    @change=${this._handleRowCheckboxClick}
+                                    .rowId=${row[this.id]}
+                                    .disabled=${row.selectable === false}
+                                    .checked=${this._checkedRows.includes(
+                                      String(row[this.id])
+                                    )}
+                                  >
+                                  </ha-checkbox>
+                                </div>
+                              `
+                            : ""}
+                          ${Object.entries(this.columns).map(
+                            ([key, column]) => {
+                              if (column.hidden) {
+                                return "";
+                              }
+                              return html`
+                                <div
+                                  role="cell"
+                                  class="mdc-data-table__cell ${classMap({
+                                    "mdc-data-table__cell--numeric":
+                                      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":
+                                      column.type === "overflow-menu",
+                                    grows: Boolean(column.grows),
+                                    forceLTR: Boolean(column.forceLTR),
+                                  })}"
+                                  style=${column.width
+                                    ? styleMap({
+                                        [column.grows ? "minWidth" : "width"]:
+                                          column.width,
+                                        maxWidth: column.maxWidth
+                                          ? column.maxWidth
+                                          : "",
+                                      })
+                                    : ""}
+                                >
+                                  ${column.template
+                                    ? column.template(row[key], row)
+                                    : row[key]}
+                                </div>
+                              `;
+                            }
+                          )}
+                        </div>
+                      `;
+                    },
+                  })}
+                </div>
               `}
         </div>
       </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> `;
-    }
-    if (row.empty) {
-      return html` <div class="mdc-data-table__row"></div> `;
-    }
-    return html`
-      <div
-        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(
-            String(row[this.id])
-          ),
-          clickable: this.clickable,
-        })}"
-        aria-selected=${ifDefined(
-          this._checkedRows.includes(String(row[this.id])) ? true : undefined
-        )}
-        .selectable=${row.selectable !== false}
-      >
-        ${this.selectable
-          ? html`
-              <div
-                class="mdc-data-table__cell mdc-data-table__cell--checkbox"
-                role="cell"
-              >
-                <ha-checkbox
-                  class="mdc-data-table__row-checkbox"
-                  @change=${this._handleRowCheckboxClick}
-                  .rowId=${row[this.id]}
-                  .disabled=${row.selectable === false}
-                  .checked=${this._checkedRows.includes(String(row[this.id]))}
-                >
-                </ha-checkbox>
-              </div>
-            `
-          : ""}
-        ${Object.entries(this.columns).map(([key, column]) => {
-          if (column.hidden) {
-            return "";
-          }
-          return html`
-            <div
-              role="cell"
-              class="mdc-data-table__cell ${classMap({
-                "mdc-data-table__cell--numeric": 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":
-                  column.type === "overflow-menu",
-                grows: Boolean(column.grows),
-                forceLTR: Boolean(column.forceLTR),
-              })}"
-              style=${column.width
-                ? styleMap({
-                    [column.grows ? "minWidth" : "width"]: column.width,
-                    maxWidth: column.maxWidth ? column.maxWidth : "",
-                  })
-                : ""}
-            >
-              ${column.template ? column.template(row[key], row) : row[key]}
-            </div>
-          `;
-        })}
-      </div>
-    `;
-  };
-
   private async _sortFilterData() {
     const startTime = new Date().getTime();
     this.curRequest++;
@@ -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;
-          flex: 1;
+          position: relative;
+          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 { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import {
+  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> = (
-  item
-) => html`<mwc-list-item twoline>
-  <span>${item.name}</span>
-  <span slot="secondary">${item.devices.length} devices</span>
-</mwc-list-item>`;
+// eslint-disable-next-line lit/prefer-static-styles
+const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (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>
+    <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
-        .hass=${this.hass}
+      <vaadin-combo-box-light
         item-value-path="id"
         item-id-path="id"
         item-label-path="name"
         .items=${areas}
         .value=${this._value}
-        .renderer=${rowRenderer}
-        .label=${this.label === undefined && this.hass
-          ? this.hass.localize("ui.components.device-picker.device")
-          : `${this.label} in area`}
+        ${comboBoxRenderer(rowRenderer)}
+        @opened-changed=${this._openedChanged}
         @value-changed=${this._areaPicked}
       >
-      </ha-combo-box>
-      <mwc-button @click=${this._switchPicker}>
-        Choose individual devices
-      </mwc-button>
+        <paper-input
+          .label=${this.label === undefined && this.hass
+            ? this.hass.localize("ui.components.device-picker.device")
+            : `${this.label} in area`}
+          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
+      >
     `;
   }
 
+  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 "@material/mwc-select/mwc-select";
+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 { 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() {
-    if (!this.value) {
-      return "";
-    }
-
-    if (!this._automations.length) {
+  private get _key() {
+    if (
+      !this.value ||
+      deviceAutomationsEqual(
+        this._createNoAutomation(this.deviceId),
+        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}
-        @selected=${this._automationChanged}
-        .disabled=${this._automations.length === 0}
+        .value=${this.value
+          ? this._localizeDeviceAutomation(this.hass, this.value)
+          : ""}
+        ?disabled=${this._automations.length === 0}
       >
-        ${value === NO_AUTOMATION_KEY
-          ? html`<mwc-list-item .value=${NO_AUTOMATION_KEY}>
-              ${this.NO_AUTOMATION_TEXT}
-            </mwc-list-item>`
-          : ""}
-        ${value === UNKNOWN_AUTOMATION_KEY
-          ? html`<mwc-list-item .value=${UNKNOWN_AUTOMATION_KEY}>
-              ${this.UNKNOWN_AUTOMATION_TEXT}
-            </mwc-list-item>`
-          : ""}
-        ${this._automations.map(
-          (automation, idx) => html`
-            <mwc-list-item .value=${`${automation.device_id}_${idx}`}>
-              ${this._localizeDeviceAutomation(this.hass, automation)}
-            </mwc-list-item>
-          `
-        )}
-      </mwc-select>
+        <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
+          >
+            ${this.NO_AUTOMATION_TEXT}
+          </paper-item>
+          <paper-item key=${UNKNOWN_AUTOMATION_KEY} hidden>
+            ${this.UNKNOWN_AUTOMATION_TEXT}
+          </paper-item>
+          ${this._automations.map(
+            (automation, idx) => html`
+              <paper-item
+                key=${`${this.deviceId}_${idx}`}
+                .automation=${automation}
+              >
+                ${this._localizeDeviceAutomation(this.hass, automation)}
+              </paper-item>
+            `
+          )}
+        </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 (!value || [UNKNOWN_AUTOMATION_KEY, NO_AUTOMATION_KEY].includes(value)) {
-      return;
+    if (ev.detail.item.automation) {
+      this._setValue(ev.detail.item.automation);
     }
-    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 { ComboBoxLitRenderer } from "lit-vaadin-helpers";
-import { customElement, property, query, state } from "lit/decorators";
+import {
+  css,
+  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
-  .twoline=${!!item.area}
->
-  <span>${item.name}</span>
-  <span slot="secondary">${item.area}</span>
-</mwc-list-item>`;
+// eslint-disable-next-line lit/prefer-static-styles
+const rowRenderer: ComboBoxLitRenderer<Device> = (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>
+    <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;
-
-    if (newValue === "no_devices") {
-      newValue = "";
-    }
+    const newValue = ev.detail.value;
 
     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 type { HaComboBox } from "../ha-combo-box";
+import { formatAttributeName } from "../../util/hass-attributes-util";
+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) => ({
-            value: key,
-            label: formatAttributeName(key),
-          }))
+        ? Object.keys(state.attributes)
         : [];
     }
   }
@@ -52,31 +89,100 @@ class HaEntityAttributePicker extends LitElement {
     }
 
     return html`
-      <ha-combo-box
-        .hass=${this.hass}
-        .value=${this.value || ""}
-        .autofocus=${this.autofocus}
-        .label=${this.label ??
-        this.hass.localize(
-          "ui.components.entity.entity-attribute-picker.attribute"
-        )}
-        .disabled=${this.disabled || !this.entityId}
+      <vaadin-combo-box-light
+        .value=${this._value}
         .allowCustomValue=${this.allowCustomValue}
-        item-value-path="value"
-        item-label-path="label"
+        attr-for-value="bind-value"
+        ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
       >
-      </ha-combo-box>
+        <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}
+          class="input"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+        >
+          <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 { ComboBoxLitRenderer } from "lit-vaadin-helpers";
-import { customElement, property, query, state } from "lit/decorators";
+import {
+  css,
+  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 }> =
-  (item) =>
-    html`<mwc-list-item graphic="avatar" .twoline=${!!item.entity_id}>
-      ${item.state
-        ? html`<state-badge slot="graphic" .stateObj=${item}></state-badge>`
-        : ""}
-      <span>${item.friendly_name}</span>
-      <span slot="secondary">${item.entity_id}</span>
-    </mwc-list-item>`;
+const rowRenderer: ComboBoxLitRenderer<HassEntity> = (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;
+    }
+  </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) => ({
-        ...hass!.states[key],
-        friendly_name: computeStateName(hass!.states[key]) || key,
-      }));
+      states = entityIds.sort().map((key) => hass!.states[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"
-        .hass=${this.hass}
+        item-label-path="entity_id"
         .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) =>
-        entityState.entity_id.toLowerCase().includes(filterString) ||
-        computeStateName(entityState).toLowerCase().includes(filterString)
+      (state) =>
+        state.entity_id.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 (
-      this.stateObj.attributes.assumed_state ||
-      this.stateObj.state === UNKNOWN
-    ) {
+    if (this.stateObj.attributes.assumed_state) {
       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"
-            : ""}
+          ?state-active=${!this._isOn}
         ></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,24 +76,54 @@ export class HaStatisticPicker extends LitElement {
     id: string;
     name: string;
     state?: HassEntity;
-  }> = (item) => html`<mwc-list-item graphic="avatar" twoline>
-    ${item.state
-      ? html`<state-badge slot="graphic" .stateObj=${item.state}></state-badge>`
-      : ""}
-    <span>${item.name}</span>
-    <span slot="secondary"
-      >${item.id === "" || item.id === "__missing"
-        ? html`<a
-            target="_blank"
-            rel="noopener noreferrer"
-            href=${documentationUrl(this.hass, "/more-info/statistics/")}
-            >${this.hass.localize(
-              "ui.components.statistic-picker.learn_more"
-            )}</a
-          >`
-        : item.id}</span
-    >
-  </mwc-list-item>`;
+    // 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="item-icon"
+            .stateObj=${item.state}
+          ></state-badge>`
+        : ""}
+      <paper-item-body two-line="">
+        ${item.name}
+        <span secondary
+          >${item.id === "" || item.id === "__missing"
+            ? html`<a
+                target="_blank"
+                rel="noopener noreferrer"
+                href=${documentationUrl(this.hass, "/more-info/statistics/")}
+                >${this.hass.localize(
+                  "ui.components.statistic-picker.learn_more"
+                )}</a
+              >`
+            : item.id}</span
+        >
+      </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> = (
-  item
-) => html`<mwc-list-item twoline>
-  <span>${item.name}</span>
-  <span slot="secondary">${item.slug}</span>
-</mwc-list-item>`;
+// eslint-disable-next-line lit/prefer-static-styles
+const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`<style>
+    paper-item {
+      padding: 0;
+      margin: -10px;
+      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 { ComboBoxLitRenderer } from "lit-vaadin-helpers";
+import {
+  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
-  class=${classMap({ "add-new": item.area_id === "add_new" })}
->
-  ${item.name}
-</mwc-list-item>`;
+  // eslint-disable-next-line lit/prefer-static-styles
+) => 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 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;
-
-  private _filter?: string;
+  @query("vaadin-combo-box-light", true) public comboBox!: HTMLElement;
 
   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
-        .hass=${this.hass}
+      <vaadin-combo-box-light
         item-value-path="area_id"
         item-id-path="area_id"
         item-label-path="name"
         .value=${this.value}
         .disabled=${this.disabled}
-        .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}
-        @filter-changed=${this._filterChanged}
+        ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._areaChanged}
       >
-      </ha-combo-box>
+        <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}
+          .disabled=${this.disabled}
+          class="input"
+          autocapitalize="none"
+          autocomplete="off"
+          autocorrect="off"
+          spellcheck="false"
+        >
+          ${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 {
-    this._filter = ev.detail.value;
-    if (!this._filter) {
-      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 _clearValue(ev: Event) {
+    ev.stopPropagation();
+    this._setValue("");
   }
 
   private get _value() {
@@ -368,14 +406,9 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
   }
 
   private _areaChanged(ev: PolymerChangedEvent<string>) {
-    ev.stopPropagation();
-    let newValue = ev.detail.value;
+    const newValue = ev.detail.value;
 
-    if (newValue === "no_areas") {
-      newValue = "";
-    }
-
-    if (!["add_new_suggestion", "add_new"].includes(newValue)) {
+    if (newValue !== "add_new") {
       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 "@material/mwc-select/mwc-select";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
+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");
-    if (select) {
-      // @ts-expect-error
-      select.menuOpen = true;
-    }
+    this.shadowRoot!.querySelector("paper-dropdown-menu-light")!.open();
   }
 
   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}
-        @closed=${stopPropagation}
+        horizontal-align="left"
       >
-        <mwc-list-item value="">
-          ${this.hass.localize(
-            "ui.components.blueprint-picker.select_blueprint"
+        <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"
+            )}
+          </paper-item>
+          ${this._processedBlueprints(this.blueprints).map(
+            (blueprint) => html`
+              <paper-item data-blueprint-path=${blueprint.path}>
+                ${blueprint.name}
+              </paper-item>
+            `
           )}
-        </mwc-list-item>
-        ${this._processedBlueprints(this.blueprints).map(
-          (blueprint) => html`
-            <mwc-list-item .value=${blueprint.path}>
-              ${blueprint.name}
-            </mwc-list-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 { styles } from "@material/mwc-checkbox/mwc-checkbox.css";
-import { css } from "lit";
+import { Checkbox } from "@material/mwc-checkbox";
 import { customElement } from "lit/decorators";
 
 @customElement("ha-checkbox")
-export class HaCheckbox extends CheckboxBase {
-  static override styles = [
-    styles,
-    css`
-      :host {
-        --mdc-theme-secondary: var(--primary-color);
-      }
-    `,
-  ];
+export class HaCheckbox extends Checkbox {
+  public firstUpdated() {
+    super.firstUpdated();
+    this.style.setProperty("--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,92 +110,43 @@ export class HaCodeEditor extends ReactiveElement {
 
   private async _load(): Promise<void> {
     this._loadedCodeMirror = await loadCodeMirror();
-    const extensions = [
-      this._loadedCodeMirror.lineNumbers(),
-      this._loadedCodeMirror.EditorState.allowMultipleSelections.of(true),
-      this._loadedCodeMirror.history(),
-      this._loadedCodeMirror.highlightSelectionMatches(),
-      this._loadedCodeMirror.highlightActiveLine(),
-      this._loadedCodeMirror.drawSelection(),
-      this._loadedCodeMirror.rectangularSelection(),
-      this._loadedCodeMirror.keymap.of([
-        ...this._loadedCodeMirror.defaultKeymap,
-        ...this._loadedCodeMirror.searchKeymap,
-        ...this._loadedCodeMirror.historyKeymap,
-        ...this._loadedCodeMirror.tabKeyBindings,
-        saveKeyBinding,
-      ] as KeyBinding[]),
-      this._loadedCodeMirror.langCompartment.of(this._mode),
-      this._loadedCodeMirror.theme,
-      this._loadedCodeMirror.Prec.fallback(
-        this._loadedCodeMirror.highlightStyle
-      ),
-      this._loadedCodeMirror.readonlyCompartment.of(
-        this._loadedCodeMirror.EditorView.editable.of(!this.readOnly)
-      ),
-      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,
+        extensions: [
+          this._loadedCodeMirror.lineNumbers(),
+          this._loadedCodeMirror.EditorState.allowMultipleSelections.of(true),
+          this._loadedCodeMirror.history(),
+          this._loadedCodeMirror.highlightSelectionMatches(),
+          this._loadedCodeMirror.highlightActiveLine(),
+          this._loadedCodeMirror.drawSelection(),
+          this._loadedCodeMirror.rectangularSelection(),
+          this._loadedCodeMirror.keymap.of([
+            ...this._loadedCodeMirror.defaultKeymap,
+            ...this._loadedCodeMirror.searchKeymap,
+            ...this._loadedCodeMirror.historyKeymap,
+            ...this._loadedCodeMirror.tabKeyBindings,
+            saveKeyBinding,
+          ] as KeyBinding[]),
+          this._loadedCodeMirror.langCompartment.of(this._mode),
+          this._loadedCodeMirror.theme,
+          this._loadedCodeMirror.Prec.fallback(
+            this._loadedCodeMirror.highlightStyle
+          ),
+          this._loadedCodeMirror.readonlyCompartment.of(
+            this._loadedCodeMirror.EditorView.editable.of(!this.readOnly)
+          ),
+          this._loadedCodeMirror.EditorView.updateListener.of((update) =>
+            this._onUpdate(update)
+          ),
+        ],
       }),
       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 type { ComboBoxLight } from "@vaadin/combo-box/vaadin-combo-box-light";
-import { registerStyles } from "@vaadin/vaadin-themable-mixin/register-styles";
+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 { 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(
-  "vaadin-combo-box-item",
-  css`
-    :host {
+// eslint-disable-next-line lit/prefer-static-styles
+const defaultRowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
+    paper-item {
+      margin: -5px -10px;
       padding: 0;
     }
-    :host([focused]:not([disabled])) {
-      background-color: rgba(var(--rgb-primary-text-color, 0, 0, 0), 0.12);
-    }
-    :host([selected]:not([disabled])) {
-      background-color: transparent;
-      color: var(--mdc-theme-primary);
-      --mdc-ripple-color: var(--mdc-theme-primary);
-      --mdc-theme-text-primary-on-background: var(--mdc-theme-primary);
-    }
-    :host([selected]:not([disabled])):before {
-      background-color: var(--mdc-theme-primary);
-      opacity: 0.12;
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    :host([selected][focused]:not([disabled])):before {
-      opacity: 0.24;
-    }
-    :host(:hover:not([disabled])) {
-      background-color: transparent;
-    }
-    [part="content"] {
-      width: 100%;
-    }
-    [part="checkmark"] {
-      display: none;
-    }
-  `
-);
+  </style>
+  <paper-item>${item}</paper-item>`;
 
 @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({ 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() public filteredItems?: [];
 
   @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" })
-  private _opened?: boolean;
+  @state() 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
-              aria-label=${this.hass?.localize("ui.components.combo-box.clear")}
-              class="clear-button"
-              .path=${mdiClose}
-              @click=${this._clearValue}
-            ></ha-svg-icon>`
-          : ""}
-        <ha-svg-icon
-          aria-label=${this.hass?.localize("ui.components.combo-box.show")}
-          class="toggle-button"
-          .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-          @click=${this._toggleOpen}
-        ></ha-svg-icon>
+          ${this.value
+            ? html`
+                <ha-icon-button
+                  .label=${this.hass.localize("ui.components.combo-box.clear")}
+                  .path=${mdiClose}
+                  slot="suffix"
+                  class="clear-button"
+                  @click=${this._clearValue}
+                ></ha-icon-button>
+              `
+            : ""}
+
+          <ha-icon-button
+            .label=${this.hass.localize("ui.components.combo-box.show")}
+            .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+            slot="suffix"
+            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);
+    this._opened = ev.detail.value;
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail);
   }
@@ -206,38 +141,11 @@ export class HaComboBox extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      :host {
-        display: block;
-        width: 100%;
-      }
-      vaadin-combo-box-light {
-        position: relative;
-      }
-      ha-textfield {
-        width: 100%;
-      }
-      ha-textfield > ha-icon-button {
+      paper-input > 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 { customElement, property } from "lit/decorators";
-import { formatDateNumeric } from "../common/datetime/format_date";
+import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+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: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "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]);
+    }
 
-export interface datePickerDialogParams {
-  value?: string;
-  min?: string;
-  max?: string;
-  locale?: string;
-  onChange: (value: string) => void;
-}
-
-const showDatePickerDialog = (
-  element: HTMLElement,
-  dialogParams: datePickerDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "ha-dialog-date-picker",
-    dialogImport: loadDatePickerDialog,
-    dialogParams,
-  });
+    if (date !== undefined) {
+      return { day: date, month, year };
+    }
+    return undefined;
+  },
 };
 @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
-      .label=${this.label}
+    return html`<vaadin-date-picker-light
       .disabled=${this.disabled}
-      no-label-float
-      @click=${this._openDialog}
-      .value=${this.value
-        ? formatDateNumeric(new Date(this.value), this.locale)
-        : ""}
+      @value-changed=${this._valueChanged}
+      attr-for-value="value"
+      .i18n=${i18n}
     >
-      <ha-svg-icon slot="suffix" .path=${mdiCalendar}></ha-svg-icon>
-    </paper-input>`;
+      <paper-input
+        .label=${this.label}
+        .disabled=${this.disabled}
+        no-label-float
+      >
+        <ha-svg-icon slot="suffix" .path=${mdiCalendar}></ha-svg-icon>
+      </paper-input>
+    </vaadin-date-picker-light>`;
   }
 
-  private _openDialog() {
-    if (this.disabled) {
-      return;
-    }
-    showDatePickerDialog(this, {
-      min: "1970-01-01",
-      value: this.value,
-      onChange: (value) => this._valueChanged(value),
-      locale: this.locale.language,
-    });
-  }
-
-  private _valueChanged(value: string) {
-    if (this.value !== value) {
-      this.value = value;
+  private _valueChanged(ev: CustomEvent) {
+    if (
+      !this.value ||
+      (this._inited && !this._compareStringDates(ev.detail.value, this.value))
+    ) {
+      this.value = ev.detail.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 { styles } from "@material/mwc-dialog/mwc-dialog.css";
+import { Dialog } from "@material/mwc-dialog";
 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,75 +31,77 @@ export class HaDialog extends DialogBase {
     return html`<slot name="heading"> ${super.renderHeading()} </slot>`;
   }
 
-  static override styles = [
-    styles,
-    css`
-      .mdc-dialog {
-        --mdc-dialog-scroll-divider-color: var(--divider-color);
-        z-index: var(--dialog-z-index, 7);
-        -webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
-        backdrop-filter: var(--dialog-backdrop-filter, none);
-      }
-      .mdc-dialog__actions {
-        justify-content: var(--justify-action-buttons, flex-end);
-        padding-bottom: max(env(safe-area-inset-bottom), 8px);
-      }
-      .mdc-dialog__actions span:nth-child(1) {
-        flex: var(--secondary-action-button-flex, unset);
-      }
-      .mdc-dialog__actions span:nth-child(2) {
-        flex: var(--primary-action-button-flex, unset);
-      }
-      .mdc-dialog__container {
-        align-items: var(--vertial-align-dialog, center);
-      }
-      .mdc-dialog__title::before {
-        display: block;
-        height: 20px;
-      }
-      .mdc-dialog .mdc-dialog__content {
-        position: var(--dialog-content-position, relative);
-        padding: var(--dialog-content-padding, 20px 24px);
-      }
-      :host([hideactions]) .mdc-dialog .mdc-dialog__content {
-        padding-bottom: max(
-          var(--dialog-content-padding, 20px),
-          env(safe-area-inset-bottom)
-        );
-      }
-      .mdc-dialog .mdc-dialog__surface {
-        position: var(--dialog-surface-position, relative);
-        top: var(--dialog-surface-top);
-        min-height: var(--mdc-dialog-min-height, auto);
-        border-radius: var(
-          --ha-dialog-border-radius,
-          var(--ha-card-border-radius, 4px)
-        );
-      }
-      :host([flexContent]) .mdc-dialog .mdc-dialog__content {
-        display: flex;
-        flex-direction: column;
-      }
-      .header_button {
-        position: absolute;
-        right: 16px;
-        top: 10px;
-        text-decoration: none;
-        color: inherit;
-      }
-      .header_title {
-        margin-right: 40px;
-      }
-      [dir="rtl"].header_button {
-        right: auto;
-        left: 16px;
-      }
-      [dir="rtl"].header_title {
-        margin-left: 40px;
-        margin-right: 0px;
-      }
-    `,
-  ];
+  protected static get styles(): CSSResultGroup {
+    return [
+      Dialog.styles,
+      css`
+        .mdc-dialog {
+          --mdc-dialog-scroll-divider-color: var(--divider-color);
+          z-index: var(--dialog-z-index, 7);
+          -webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
+          backdrop-filter: var(--dialog-backdrop-filter, none);
+        }
+        .mdc-dialog__actions {
+          justify-content: var(--justify-action-buttons, flex-end);
+          padding-bottom: max(env(safe-area-inset-bottom), 8px);
+        }
+        .mdc-dialog__actions span:nth-child(1) {
+          flex: var(--secondary-action-button-flex, unset);
+        }
+        .mdc-dialog__actions span:nth-child(2) {
+          flex: var(--primary-action-button-flex, unset);
+        }
+        .mdc-dialog__container {
+          align-items: var(--vertial-align-dialog, center);
+        }
+        .mdc-dialog__title::before {
+          display: block;
+          height: 20px;
+        }
+        .mdc-dialog .mdc-dialog__content {
+          position: var(--dialog-content-position, relative);
+          padding: var(--dialog-content-padding, 20px 24px);
+        }
+        :host([hideactions]) .mdc-dialog .mdc-dialog__content {
+          padding-bottom: max(
+            var(--dialog-content-padding, 20px),
+            env(safe-area-inset-bottom)
+          );
+        }
+        .mdc-dialog .mdc-dialog__surface {
+          position: var(--dialog-surface-position, relative);
+          top: var(--dialog-surface-top);
+          min-height: var(--mdc-dialog-min-height, auto);
+          border-radius: var(
+            --ha-dialog-border-radius,
+            var(--ha-card-border-radius, 4px)
+          );
+        }
+        :host([flexContent]) .mdc-dialog .mdc-dialog__content {
+          display: flex;
+          flex-direction: column;
+        }
+        .header_button {
+          position: absolute;
+          right: 16px;
+          top: 10px;
+          text-decoration: none;
+          color: inherit;
+        }
+        .header_title {
+          margin-right: 40px;
+        }
+        [dir="rtl"].header_button {
+          right: auto;
+          left: 16px;
+        }
+        [dir="rtl"].header_title {
+          margin-left: 40px;
+          margin-right: 0px;
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

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 type { TimeChangedEvent } from "./ha-base-time-input";
+import "./paper-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"
-        enableSecond
+        error-message="Required"
+        enable-second
         .enableMillisecond=${this.enableMillisecond}
         format="24"
-        .hours=${this._hours}
-        .minutes=${this._minutes}
-        .seconds=${this._seconds}
-        .milliseconds=${this._milliseconds}
-        @value-changed=${this._durationChanged}
-        noHoursLimit
-        hourLabel="hh"
-        minLabel="mm"
-        secLabel="ss"
-        millisecLabel="ms"
-      ></ha-base-time-input>
+        .hour=${this._parseDuration(this._hours)}
+        .min=${this._parseDuration(this._minutes)}
+        .sec=${this._parseDuration(this._seconds)}
+        .millisec=${this._parseDurationMillisec(this._milliseconds)}
+        @hour-changed=${this._hourChanged}
+        @min-changed=${this._minChanged}
+        @sec-changed=${this._secChanged}
+        @millisec-changed=${this._millisecChanged}
+        float-input-labels
+        no-hours-limit
+        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 }>) {
-    ev.stopPropagation();
-    const value = { ...ev.detail.value };
+  private _parseDuration(value) {
+    return value.toString().padStart(2, "0");
+  }
 
-    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;
+  private _parseDurationMillisec(value) {
+    return value.toString().padStart(3, "0");
+  }
+
+  private _hourChanged(ev) {
+    this._durationChanged(ev, "hours");
+  }
+
+  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;
     }
 
-    if (value.seconds > 59) {
-      value.minutes += Math.floor(value.seconds / 60);
-      value.seconds %= 60;
+    let hours = this._hours;
+    let minutes = this._minutes;
+
+    if (unit === "seconds" && value > 59) {
+      minutes += Math.floor(value / 60);
+      value %= 60;
     }
 
-    if (value.minutes > 59) {
-      value.hours += Math.floor(value.minutes / 60);
-      value.minutes %= 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?:
-    | HaTextField
-    | HTMLInputElement;
+  @query("paper-input ha-slider") private _input?: HTMLElement;
 
   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
-              pin
-              ignore-bar-touch
+            <mwc-slider
+              discrete
               .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 || [];
 
+    const renderedOptions = options.map((item: string | [string, string]) => {
+      const value = optionValue(item);
+      return html`
+        <mwc-formfield .label=${optionLabel(item)}>
+          <ha-checkbox
+            .checked=${data.includes(value)}
+            .value=${value}
+            .disabled=${this.disabled}
+            @change=${this._valueChanged}
+          ></ha-checkbox>
+        </mwc-formfield>
+      `;
+    });
+
     // We will just render all checkboxes.
     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)}>
-              <ha-checkbox
-                .checked=${data.includes(value)}
-                .value=${value}
-                .disabled=${this.disabled}
-                @change=${this._valueChanged}
-              ></ha-checkbox>
-            </ha-formfield>
-          `;
-        })}
-      </div> `;
+      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]) => {
-          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>`;
-        })}
+        ${renderedOptions}
       </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,22 +62,12 @@ export class HaForm extends LitElement implements HaFormElement {
                   </ha-alert>
                 `
               : ""}
-            ${"selector" in item
-              ? 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),
-                  disabled: this.disabled,
-                })}
+            ${dynamicElement(`ha-form-${item.type}`, {
+              schema: item,
+              data: getValue(this.data, item),
+              label: this._computeLabel(item),
+              disabled: this.disabled,
+            })}
           `;
         })}
       </div>
@@ -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
-  | HaFormSelector;
+  | HaFormTimeSchema;
 
 export interface HaFormBaseSchema {
   name: string;
-  // This value is applied if no data is submitted for this field
   default?: HaFormData;
   required?: boolean;
-  description?: {
-    suffix?: string;
-    // This value will be set initially when form is loaded
-    suggested_value?: HaFormData;
-  };
-}
-
-export interface HaFormSelector extends HaFormBaseSchema {
-  type?: never;
-  selector: Selector;
+  optional?: boolean;
+  description?: { suffix?: string; suggested_value?: HaFormData };
 }
 
 export interface HaFormConstantSchema extends HaFormBaseSchema {

src/components/ha-formfield.ts

@@ -1,11 +1,11 @@
-import { FormfieldBase } from "@material/mwc-formfield/mwc-formfield-base";
-import { styles } from "@material/mwc-formfield/mwc-formfield.css";
-import { css } from "lit";
+import { Formfield } from "@material/mwc-formfield";
+import { css, CSSResultGroup } 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,18 +23,20 @@ export class HaFormfield extends FormfieldBase {
     }
   }
 
-  static override styles = [
-    styles,
-    css`
-      :host(:not([alignEnd])) ::slotted(ha-switch) {
-        margin-right: 10px;
-      }
-      :host([dir="rtl"]:not([alignEnd])) ::slotted(ha-switch) {
-        margin-left: 10px;
-        margin-right: auto;
-      }
-    `,
-  ];
+  protected static get styles(): CSSResultGroup {
+    return [
+      Formfield.styles,
+      css`
+        :host(:not([alignEnd])) ::slotted(ha-switch) {
+          margin-right: 10px;
+        }
+        :host([dir="rtl"]:not([alignEnd])) ::slotted(ha-switch) {
+          margin-left: 10px;
+          margin-right: auto;
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

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)}
-                          ${0 - 40 * Math.sin((angle * Math.PI) / 180)}
-                         A 40 40 0 0 1 40 0
+                          ${50 - 40 * Math.cos((angle * Math.PI) / 180)}
+                          ${50 - 40 * Math.sin((angle * Math.PI) / 180)}
+                         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)}
-                        ${0 - 40 * Math.sin((angle * Math.PI) / 180)}
-                       A 40 40 0 0 1 40 0
+                        ${50 - 40 * Math.cos((angle * Math.PI) / 180)}
+                        ${50 - 40 * Math.sin((angle * Math.PI) / 180)}
+                       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"
-                style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
+                d="M 25 47.5 L 2.5 50 L 25 52.5 z"
+                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"
-                style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
+                d="M 90 50.001 A 40 40 0 0 1 10 50"
+                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 =
-      this.allowExoPlayer && this.hass.auth.external?.config.hasExoPlayer;
+    const useExoPlayer = await useExoPlayerPromise;
     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
-  graphic="avatar"
->
-  <ha-icon .icon=${item.icon} slot="graphic"></ha-icon>
-  ${item.icon}
-</mwc-list-item>`;
+const rowRenderer: ComboBoxLitRenderer<IconItem> = (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;
+    }
+  </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
-        .hass=${this.hass}
+      <vaadin-combo-box-light
         item-value-path="icon"
         item-label-path="icon"
         .value=${this._value}
         allow-custom-value
         .filteredItems=${iconItems}
-        .label=${this.label}
-        .disabled=${this.disabled}
-        .placeholder=${this.placeholder}
-        .errorMessage=${this.errorMessage}
-        .invalid=${this.invalid}
-        .renderer=${rowRenderer}
-        icon
+        ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
         @filter-changed=${this._filterChanged}
       >
-        ${this._value || this.placeholder
-          ? html`
-              <ha-icon .icon=${this._value || this.placeholder} slot="icon">
-              </ha-icon>
-            `
-          : this.fallbackPath
-          ? html`<ha-svg-icon
-              .path=${this.fallbackPath}
-              slot="icon"
-            ></ha-svg-icon>`
-          : ""}
-      </ha-combo-box>
+        <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="prefix">
+                </ha-icon>
+              `
+            : this.fallbackPath
+            ? html`<ha-svg-icon
+                .path=${this.fallbackPath}
+                slot="prefix"
+              ></ha-svg-icon>`
+            : ""}
+          <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 type { HaTextField } from "./ha-textfield";
+import "@material/mwc-button/mwc-button";
 
 @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 { styles } from "@material/mwc-radio/mwc-radio.css";
-import { css } from "lit";
+import { Radio } from "@material/mwc-radio";
 import { customElement } from "lit/decorators";
 
 @customElement("ha-radio")
-export class HaRadio extends RadioBase {
-  static override styles = [
-    styles,
-    css`
-      :host {
-        --mdc-theme-secondary: var(--primary-color);
-      }
-    `,
-  ];
+export class HaRadio extends Radio {
+  public firstUpdated() {
+    super.firstUpdated();
+    this.style.setProperty("--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
-        inputMode="numeric"
+      <paper-input
         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
-        ?no-spinner=${this.selector.number.mode !== "box"}
-        @input=${this._handleInputChange}
+        auto-validate
+        @value-changed=${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 "@material/mwc-list/mwc-list-item";
+import "../ha-paper-dropdown-menu";
 
 @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
-      fixedMenuPosition
-      naturalMenuWidth
-      .label=${this.label}
-      .value=${this.value}
+    return html`<ha-paper-dropdown-menu
       .disabled=${this.disabled}
-      @closed=${stopPropagation}
-      @selected=${this._valueChanged}
+      .label=${this.label}
     >
-      ${this.selector.select.options.map(
-        (item: string) => html`
-          <mwc-list-item .value=${item}>${item}</mwc-list-item>
-        `
-      )}
-    </mwc-select>`;
+      <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`
+            <paper-item .itemValue=${item}> ${item} </paper-item>
+          `
+        )}
+      </paper-listbox>
+    </ha-paper-dropdown-menu>`;
   }
 
   private _valueChanged(ev) {
-    ev.stopPropagation();
-    if (this.disabled || !ev.target.value) {
+    if (this.disabled || !ev.detail.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 { css, CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import "@polymer/paper-input/paper-input";
+import "@polymer/paper-input/paper-textarea";
+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}
-        autogrow
-      ></ha-textarea>`;
+      ></paper-textarea>`;
     }
-    return html`<ha-textfield
-        .value=${this.value || ""}
-        .placeholder=${this.placeholder || ""}
-        .disabled=${this.disabled}
-        .type=${this._unmaskedPassword ? "text" : this.selector.text?.type}
-        @input=${this._handleChange}
-        .label=${this.label || ""}
-        .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;
+    return html`<paper-input
+      required
+      .value=${this.value}
+      .placeholder=${this.placeholder}
+      .disabled=${this.disabled}
+      @value-changed=${this._handleChange}
+      .label=${this.label}
+    ></paper-input>`;
   }
 
   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
-                ? documentationUrl(
-                    this.hass,
-                    `/integrations/${this._manifest.domain}`
-                  )
-                : this._manifest.documentation}
+              href=${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>
-  <span>${item.name}</span>
-  <span slot="secondary"
-    >${item.name === item.service ? "" : item.service}</span
-  >
-</mwc-list-item>`;
+  // eslint-disable-next-line lit/prefer-static-styles
+) => html`<style>
+    paper-item {
+      padding: 0;
+      margin: -10px;
+      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"
-      role="img" 
-      aria-hidden="true"
-    >
+      focusable="false">
       <g>
       ${this.path ? svg`<path d=${this.path}></path>` : ""}
       </g>