Removed unneessary casting

Co-authored-by: Zack Barett <zackbarett@hey.com>
Co-authored-by: Paulus Schoutsen <balloob@gmail.com>

.devcontainer/devcontainer.json

@@ -16,6 +16,9 @@
     "runem.lit-plugin",
     "ms-python.vscode-pylance"
   ],
+  "containerEnv": {
+    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
+  },
   "settings": {
     "terminal.integrated.shell.linux": "/bin/bash",
     "files.eol": "\n",

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

@@ -1,11 +1,10 @@
-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;
+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;
  export default async function EventTarget() {
 -    return ET || init();
 +  return ET || init();
@@ -27,3 +26,4 @@ index d92179f7fd5315203f870a6963e871dc8ddf6c0c..362e284121b97e0fba0925225777aebc
 +  }
 +  return (ET = _ET);
  }
+ //# sourceMappingURL=EventTarget.js.map

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 }) =>
+module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
   [
     // Contains all color definitions for all material color sets.
     // We don't use it
@@ -28,6 +28,15 @@ module.exports.emptyPackages = ({ latestBuild }) =>
       ),
     // 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")
+      ),
+    isHassioBuild &&
+      require.resolve(
+        path.resolve(paths.polymer_dir, "src/components/ha-icon-picker.ts")
+      ),
   ].filter(Boolean);
 
 module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
@@ -196,6 +205,7 @@ module.exports.config = {
       publicPath: publicPath(latestBuild, paths.hassio_publicPath),
       isProdBuild,
       latestBuild,
+      isHassioBuild: true,
       defineOverlay: {
         __SUPERVISOR__: true,
       },

build-scripts/webpack.js

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

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

@@ -7,6 +7,9 @@ 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;

demo/src/entrypoint.ts

@@ -2,8 +2,3 @@ import "../../src/resources/ha-style";
 import "../../src/resources/roboto";
 import "../../src/resources/safari-14-attachshadow-patch";
 import "./ha-demo";
-
-/* polyfill for paper-dropdown */
-setTimeout(() => {
-  import("web-animations-js/web-animations-next-lite.min");
-}, 1000);

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,6 +3,7 @@ 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/pages/automation/describe-action.ts

@@ -3,10 +3,20 @@ import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import { describeAction } from "../../../../src/data/script_i18n";
+import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { HomeAssistant } from "../../../../src/types";
 
-const actions = [
+const ENTITIES = [
+  getEntity("scene", "kitchen_morning", "scening", {
+    friendly_name: "Kitchen Morning",
+  }),
+  getEntity("media_player", "kitchen", "playing", {
+    friendly_name: "Sonos Kitchen",
+  }),
+];
+
+const ACTIONS = [
   { wait_template: "{{ true }}", alias: "Something with an alias" },
   { delay: "0:05" },
   { wait_template: "{{ true }}" },
@@ -19,8 +29,20 @@ const actions = [
     device_id: "abcdefgh",
     domain: "plex",
     entity_id: "media_player.kitchen",
+    type: "turn_on",
   },
   { scene: "scene.kitchen_morning" },
+  {
+    service: "scene.turn_on",
+    target: { entity_id: "scene.kitchen_morning" },
+    metadata: {},
+  },
+  {
+    service: "media_player.play_media",
+    target: { entity_id: "media_player.kitchen" },
+    data: { media_content_id: "", media_content_type: "" },
+    metadata: { title: "Happy Song" },
+  },
   {
     wait_for_trigger: [
       {
@@ -52,7 +74,7 @@ export class DemoAutomationDescribeAction extends LitElement {
     }
     return html`
       <ha-card header="Actions">
-        ${actions.map(
+        ${ACTIONS.map(
           (conf) => html`
             <div class="action">
               <span>${describeAction(this.hass, conf as any)}</span>
@@ -68,6 +90,7 @@ export class DemoAutomationDescribeAction extends LitElement {
     super.firstUpdated(changedProps);
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
   }
 
   static get styles() {

gallery/src/pages/automation/editor-action.ts

@@ -14,7 +14,7 @@ import { HaDelayAction } from "../../../../src/panels/config/automation/action/t
 import { HaDeviceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-device_id";
 import { HaEventAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-event";
 import { HaRepeatAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
-import { HaSceneAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-scene";
+import { HaSceneAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-activate_scene";
 import { HaServiceAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-service";
 import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger";
 import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";

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,11 +1,17 @@
 /* eslint-disable lit/no-template-arrow */
 import "@material/mwc-button";
 import { LitElement, TemplateResult, html } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, state } 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;
@@ -14,6 +20,63 @@ 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",
+      icon: "Icon",
+      media: "Media",
+    },
+    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"] },
+        },
+      },
+      {
+        name: "icon",
+        selector: {
+          icon: {},
+        },
+      },
+      {
+        name: "media",
+        selector: {
+          media: {},
+        },
+      },
+    ],
+  },
   {
     title: "Authentication",
     translations: {
@@ -50,13 +113,11 @@ const SCHEMAS: {
       {
         type: "boolean",
         name: "bool",
-        optional: true,
         default: false,
       },
       {
         type: "integer",
         name: "int",
-        optional: true,
         default: 10,
       },
       {
@@ -67,7 +128,6 @@ const SCHEMAS: {
       {
         type: "string",
         name: "string",
-        optional: true,
         default: "Default",
       },
       {
@@ -77,7 +137,6 @@ const SCHEMAS: {
           ["other", "other"],
         ],
         name: "select",
-        optional: true,
         default: "default",
       },
       {
@@ -87,7 +146,6 @@ const SCHEMAS: {
           other: "Other",
         },
         name: "multi",
-        optional: true,
         default: ["default"],
       },
       {
@@ -108,7 +166,6 @@ const SCHEMAS: {
       {
         type: "integer",
         name: "int with default",
-        optional: true,
         default: 10,
       },
       {
@@ -122,7 +179,6 @@ const SCHEMAS: {
       {
         type: "integer",
         name: "int range optional",
-        optional: true,
         valueMin: 0,
         valueMax: 10,
       },
@@ -148,7 +204,6 @@ const SCHEMAS: {
           ["other", "Other"],
         ],
         name: "select optional",
-        optional: true,
       },
       {
         type: "select",
@@ -161,7 +216,6 @@ const SCHEMAS: {
           ["option", "1000"],
         ],
         name: "select many otions",
-        optional: true,
         default: "default",
       },
     ],
@@ -190,7 +244,6 @@ const SCHEMAS: {
           option: "1000",
         },
         name: "multi many otions",
-        optional: true,
         default: ["default"],
       },
     ],
@@ -239,23 +292,35 @@ const SCHEMAS: {
         valueMin: 1,
         valueMax: 65535,
         name: "port",
-        optional: true,
         default: 80,
       },
-      { type: "string", name: "path", optional: true, default: "/" },
-      { type: "boolean", name: "ssl", optional: true, default: false },
+      { type: "string", name: "path", default: "/" },
+      { type: "boolean", name: "ssl", 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) => {
@@ -278,6 +343,7 @@ 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.markdown

@@ -1,3 +1,5 @@
 ---
-title: Target Selectors
+title: Selectors
 ---
+
+See the website for [list of available selectors](https://www.home-assistant.io/docs/blueprint/selectors/).

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

@@ -12,6 +12,100 @@ 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 { getEntity } from "../../../../src/fake_data/entity";
+import { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
+import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
+
+const ENTITIES = [
+  getEntity("alarm_control_panel", "alarm", "disarmed", {
+    friendly_name: "Alarm",
+  }),
+  getEntity("media_player", "livingroom", "playing", {
+    friendly_name: "Livingroom",
+  }),
+  getEntity("media_player", "lounge", "idle", {
+    friendly_name: "Lounge",
+    supported_features: 444983,
+  }),
+  getEntity("light", "bedroom", "on", {
+    friendly_name: "Bedroom",
+  }),
+  getEntity("switch", "coffee", "off", {
+    friendly_name: "Coffee",
+  }),
+];
+
+const DEVICES = [
+  {
+    area_id: "bedroom",
+    configuration_url: null,
+    config_entries: ["config_entry_1"],
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_1",
+    identifiers: [["demo", "volume1"] as [string, string]],
+    manufacturer: null,
+    model: null,
+    name_by_user: null,
+    name: "Dishwasher",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+  },
+  {
+    area_id: "backyard",
+    configuration_url: null,
+    config_entries: ["config_entry_2"],
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_2",
+    identifiers: [["demo", "pwm1"] as [string, string]],
+    manufacturer: null,
+    model: null,
+    name_by_user: null,
+    name: "Lamp",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+  },
+  {
+    area_id: null,
+    configuration_url: null,
+    config_entries: ["config_entry_3"],
+    connections: [],
+    disabled_by: null,
+    entry_type: null,
+    id: "device_3",
+    identifiers: [["demo", "pwm1"] as [string, string]],
+    manufacturer: null,
+    model: null,
+    name_by_user: "User name",
+    name: "Technical name",
+    sw_version: null,
+    hw_version: null,
+    via_device_id: null,
+  },
+];
+
+const AREAS = [
+  {
+    area_id: "backyard",
+    name: "Backyard",
+    picture: null,
+  },
+  {
+    area_id: "bedroom",
+    name: "Bedroom",
+    picture: null,
+  },
+  {
+    area_id: "livingroom",
+    name: "Livingroom",
+    picture: null,
+  },
+];
 
 const SCHEMAS: {
   name: string;
@@ -21,7 +115,12 @@ 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: {} } },
@@ -48,23 +147,34 @@ const SCHEMAS: {
       boolean: { name: "Boolean", selector: { boolean: {} } },
       time: { name: "Time", selector: { time: {} } },
       action: { name: "Action", selector: { action: {} } },
-      text: { name: "Text", selector: { text: { multiline: false } } },
+      text: {
+        name: "Text",
+        selector: { text: {} },
+      },
+      password: {
+        name: "Password",
+        selector: { text: { type: "password" } },
+      },
       text_multiline: {
         name: "Text multiline",
-        selector: { text: { multiline: true } },
+        selector: {
+          text: { multiline: true },
+        },
       },
       object: { name: "Object", selector: { object: {} } },
       select: {
         name: "Select",
         selector: { select: { options: ["Option 1", "Option 2"] } },
       },
+      icon: { name: "Icon", selector: { icon: {} } },
+      media: { name: "Media", selector: { media: {} } },
     },
   },
 ];
 
 @customElement("demo-components-ha-selector")
-class DemoHaSelector extends LitElement {
-  @state() private hass!: HomeAssistant;
+class DemoHaSelector extends LitElement implements ProvideHassElement {
+  @state() public hass!: HomeAssistant;
 
   private data = SCHEMAS.map(() => ({}));
 
@@ -73,12 +183,130 @@ class DemoHaSelector extends LitElement {
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
     hass.updateTranslations("config", "en");
+    hass.addEntities(ENTITIES);
     mockEntityRegistry(hass);
-    mockDeviceRegistry(hass);
-    mockAreaRegistry(hass);
+    mockDeviceRegistry(hass, DEVICES);
+    mockAreaRegistry(hass, AREAS);
     mockHassioSupervisor(hass);
+    hass.mockWS("auth/sign_path", (params) => params);
+    hass.mockWS("media_player/browse_media", this._browseMedia);
   }
 
+  public provideHass(el) {
+    el.hass = this.hass;
+  }
+
+  public connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("show-dialog", this._dialogManager);
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("show-dialog", this._dialogManager);
+  }
+
+  private _browseMedia = ({ media_content_id }) => {
+    if (media_content_id === undefined) {
+      return {
+        title: "Media",
+        media_class: "directory",
+        media_content_type: "",
+        media_content_id: "media-source://media_source/local/.",
+        can_play: false,
+        can_expand: true,
+        children_media_class: "directory",
+        thumbnail: null,
+        children: [
+          {
+            title: "Misc",
+            media_class: "directory",
+            media_content_type: "",
+            media_content_id: "media-source://media_source/local/misc",
+            can_play: false,
+            can_expand: true,
+            children_media_class: null,
+            thumbnail: null,
+          },
+          {
+            title: "Movies",
+            media_class: "directory",
+            media_content_type: "",
+            media_content_id: "media-source://media_source/local/movies",
+            can_play: true,
+            can_expand: true,
+            children_media_class: "movie",
+            thumbnail: null,
+          },
+          {
+            title: "Music",
+            media_class: "album",
+            media_content_type: "",
+            media_content_id: "media-source://media_source/local/music",
+            can_play: false,
+            can_expand: true,
+            children_media_class: "music",
+            thumbnail: "/images/album_cover_2.jpg",
+          },
+        ],
+      };
+    }
+    return {
+      title: "Subfolder",
+      media_class: "directory",
+      media_content_type: "",
+      media_content_id: "media-source://media_source/local/sub",
+      can_play: false,
+      can_expand: true,
+      children_media_class: "directory",
+      thumbnail: null,
+      children: [
+        {
+          title: "audio.mp3",
+          media_class: "music",
+          media_content_type: "audio/mpeg",
+          media_content_id: "media-source://media_source/local/audio.mp3",
+          can_play: true,
+          can_expand: false,
+          children_media_class: null,
+          thumbnail: "/images/album_cover.jpg",
+        },
+        {
+          title: "image.jpg",
+          media_class: "image",
+          media_content_type: "image/jpeg",
+          media_content_id: "media-source://media_source/local/image.jpg",
+          can_play: true,
+          can_expand: false,
+          children_media_class: null,
+          thumbnail: null,
+        },
+        {
+          title: "movie.mp4",
+          media_class: "movie",
+          media_content_type: "image/jpeg",
+          media_content_id: "media-source://media_source/local/movie.mp4",
+          can_play: true,
+          can_expand: false,
+          children_media_class: null,
+          thumbnail: null,
+        },
+      ],
+    };
+  };
+
+  private _dialogManager = (e) => {
+    const { dialogTag, dialogImport, dialogParams, addHistory } = e.detail;
+    showDialog(
+      this,
+      this.shadowRoot!,
+      dialogTag,
+      dialogParams,
+      dialogImport,
+      addHistory
+    );
+  };
+
   protected render(): TemplateResult {
     return html`
       ${SCHEMAS.map((info, idx) => {
@@ -117,7 +345,6 @@ class DemoHaSelector extends LitElement {
   }
 
   static styles = css`
-    paper-input,
     ha-selector {
       width: 60;
     }

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

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

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

@@ -221,13 +221,14 @@ class HassioAddonStore extends LitElement {
         margin-top: 24px;
       }
       .search {
-        padding: 0 16px;
-        background: var(--sidebar-background-color);
-        border-bottom: 1px solid var(--divider-color);
+        position: sticky;
+        top: 0;
+        z-index: 2;
       }
-      .search search-input {
-        position: relative;
-        top: 2px;
+      search-input {
+        display: block;
+        --mdc-text-field-fill-color: var(--sidebar-background-color);
+        --mdc-text-field-idle-line-color: var(--divider-color);
       }
       .advanced {
         padding: 12px;

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

@@ -1,7 +1,6 @@
 import "@material/mwc-button";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-select";
+import "@material/mwc-list/mwc-list-item";
 import {
   css,
   CSSResultGroup,
@@ -11,7 +10,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "web-animations-js/web-animations-next-lite.min";
+import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
@@ -57,49 +56,44 @@ class HassioAddonAudio extends LitElement {
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
-
-          <paper-dropdown-menu
+          ${this._inputDevices &&
+          html`<mwc-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.input"
             )}
-            @iron-select=${this._setInputDevice}
+            @selected=${this._setInputDevice}
+            @closed=${stopPropagation}
+            fixedMenuPosition
+            naturalMenuWidth
+            .value=${this._selectedInput!}
           >
-            <paper-listbox
-              slot="dropdown-content"
-              attr-for-selected="device"
-              .selected=${this._selectedInput!}
-            >
-              ${this._inputDevices &&
-              this._inputDevices.map(
-                (item) => html`
-                  <paper-item device=${item.device || ""}>
-                    ${item.name}
-                  </paper-item>
-                `
-              )}
-            </paper-listbox>
-          </paper-dropdown-menu>
-          <paper-dropdown-menu
+            ${this._inputDevices.map(
+              (item) => html`
+                <mwc-list-item .value=${item.device || ""}>
+                  ${item.name}
+                </mwc-list-item>
+              `
+            )}
+          </mwc-select>`}
+          ${this._outputDevices &&
+          html`<mwc-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.output"
             )}
-            @iron-select=${this._setOutputDevice}
+            @selected=${this._setOutputDevice}
+            @closed=${stopPropagation}
+            fixedMenuPosition
+            naturalMenuWidth
+            .value=${this._selectedOutput!}
           >
-            <paper-listbox
-              slot="dropdown-content"
-              attr-for-selected="device"
-              .selected=${this._selectedOutput!}
-            >
-              ${this._outputDevices &&
-              this._outputDevices.map(
-                (item) => html`
-                  <paper-item device=${item.device || ""}
-                    >${item.name}</paper-item
-                  >
-                `
-              )}
-            </paper-listbox>
-          </paper-dropdown-menu>
+            ${this._outputDevices.map(
+              (item) => html`
+                <mwc-list-item .value=${item.device || ""}
+                  >${item.name}</mwc-list-item
+                >
+              `
+            )}
+          </mwc-select>`}
         </div>
         <div class="card-actions">
           <ha-progress-button @click=${this._saveSettings}>
@@ -116,8 +110,7 @@ class HassioAddonAudio extends LitElement {
       hassioStyle,
       css`
         :host,
-        ha-card,
-        paper-dropdown-menu {
+        ha-card {
           display: block;
         }
         paper-item {
@@ -126,24 +119,30 @@ class HassioAddonAudio extends LitElement {
         .card-actions {
           text-align: right;
         }
+        mwc-select {
+          width: 100%;
+        }
+        mwc-select:last-child {
+          margin-top: 8px;
+        }
       `,
     ];
   }
 
-  protected update(changedProperties: PropertyValues): void {
-    super.update(changedProperties);
+  protected willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
     if (changedProperties.has("addon")) {
       this._addonChanged();
     }
   }
 
   private _setInputDevice(ev): void {
-    const device = ev.detail.item.getAttribute("device");
+    const device = ev.target.value;
     this._selectedInput = device;
   }
 
   private _setOutputDevice(ev): void {
-    const device = ev.detail.item.getAttribute("device");
+    const device = ev.target.value;
     this._selectedOutput = device;
   }
 

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

@@ -9,6 +9,7 @@ import {
   mdiFlask,
   mdiHomeAssistant,
   mdiKey,
+  mdiLinkLock,
   mdiNetwork,
   mdiNumeric1,
   mdiNumeric2,
@@ -16,6 +17,8 @@ import {
   mdiNumeric4,
   mdiNumeric5,
   mdiNumeric6,
+  mdiNumeric7,
+  mdiNumeric8,
   mdiPound,
   mdiShield,
 } from "@mdi/js";
@@ -31,6 +34,7 @@ import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-chip";
+import "../../../../src/components/ha-chip-set";
 import "../../../../src/components/ha-markdown";
 import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
@@ -84,6 +88,8 @@ const RATING_ICON = {
   4: mdiNumeric4,
   5: mdiNumeric5,
   6: mdiNumeric6,
+  7: mdiNumeric7,
+  8: mdiNumeric8,
 };
 
 @customElement("hassio-addon-info")
@@ -209,7 +215,7 @@ class HassioAddonInfo extends LitElement {
                 >`}
           </div>
 
-          <div class="capabilities">
+          <ha-chip-set class="capabilities">
             ${this.addon.stage !== "stable"
               ? html` <ha-chip
                   hasIcon
@@ -234,9 +240,9 @@ class HassioAddonInfo extends LitElement {
             <ha-chip
               hasIcon
               class=${classMap({
-                green: [5, 6].includes(Number(this.addon.rating)),
-                yellow: [3, 4].includes(Number(this.addon.rating)),
-                red: [1, 2].includes(Number(this.addon.rating)),
+                green: Number(this.addon.rating) >= 6,
+                yellow: [3, 4, 5].includes(Number(this.addon.rating)),
+                red: Number(this.addon.rating) >= 2,
               })}
               @click=${this._showMoreInfo}
               id="rating"
@@ -364,7 +370,17 @@ class HassioAddonInfo extends LitElement {
                   </ha-chip>
                 `
               : ""}
-          </div>
+            ${this.addon.signed
+              ? html`
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="signed">
+                    <ha-svg-icon slot="icon" .path=${mdiLinkLock}></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.signed"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+          </ha-chip-set>
 
           <div class="description light-color">
             ${this.addon.description}.<br />

hassio/src/dashboard/hassio-update.ts

@@ -148,7 +148,6 @@ export class HassioUpdate extends LitElement {
         }
         ha-settings-row {
           padding: 0;
-          --paper-item-body-two-line-min-height: 32px;
         }
       `,
     ];

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

@@ -1,6 +1,5 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -90,18 +89,19 @@ class HassioDatadiskDialog extends LitElement {
                     )}
                     <br /><br />
 
-                    <paper-dropdown-menu
+                    <mwc-select
                       .label=${this.dialogParams.supervisor.localize(
                         "dialog.datadisk_move.select_device"
                       )}
-                      @value-changed=${this._select_device}
+                      @selected=${this._select_device}
                     >
-                      <paper-listbox slot="dropdown-content">
-                        ${this.devices.map(
-                          (device) => html`<paper-item>${device}</paper-item>`
-                        )}
-                      </paper-listbox>
-                    </paper-dropdown-menu>
+                      ${this.devices.map(
+                        (device) =>
+                          html`<mwc-list-item .value=${device}
+                            >${device}</mwc-list-item
+                          >`
+                      )}
+                    </mwc-select>
                   `
                 : this.devices === undefined
                 ? this.dialogParams.supervisor.localize(
@@ -130,8 +130,8 @@ class HassioDatadiskDialog extends LitElement {
     `;
   }
 
-  private _select_device(event) {
-    this.selectedDevice = event.detail.value;
+  private _select_device(ev) {
+    this.selectedDevice = ev.target.value;
   }
 
   private async _moveDatadisk() {
@@ -156,7 +156,7 @@ class HassioDatadiskDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        paper-dropdown-menu {
+        mwc-select {
           width: 100%;
         }
         ha-circular-progress {

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

@@ -178,7 +178,7 @@ class HassioHardwareDialog extends LitElement {
           padding: 0.2em 0.4em;
         }
         search-input {
-          margin: 0 16px;
+          margin: 8px 16px 0;
           display: block;
         }
         .device-property {

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

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

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

@@ -205,16 +205,6 @@ 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

@@ -440,16 +440,6 @@ 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/system/hassio-supervisor-log.ts

@@ -1,7 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../src/components/buttons/ha-progress-button";
@@ -73,24 +70,19 @@ class HassioSupervisorLog extends LitElement {
           : ""}
         ${this.hass.userData?.showAdvanced
           ? html`
-              <paper-dropdown-menu
+              <mwc-select
                 .label=${this.supervisor.localize("system.log.log_provider")}
-                @iron-select=${this._setLogProvider}
+                @selected=${this._setLogProvider}
+                .value=${this._selectedLogProvider}
               >
-                <paper-listbox
-                  slot="dropdown-content"
-                  attr-for-selected="provider"
-                  .selected=${this._selectedLogProvider}
-                >
-                  ${logProviders.map(
-                    (provider) => html`
-                      <paper-item provider=${provider.key}>
-                        ${provider.name}
-                      </paper-item>
-                    `
-                  )}
-                </paper-listbox>
-              </paper-dropdown-menu>
+                ${logProviders.map(
+                  (provider) => html`
+                    <mwc-list-item .value=${provider.key}>
+                      ${provider.name}
+                    </mwc-list-item>
+                  `
+                )}
+              </mwc-select>
             `
           : ""}
 
@@ -110,7 +102,7 @@ class HassioSupervisorLog extends LitElement {
   }
 
   private async _setLogProvider(ev): Promise<void> {
-    const provider = ev.detail.item.getAttribute("provider");
+    const provider = ev.target.value;
     this._selectedLogProvider = provider;
     this._loadData();
   }
@@ -153,9 +145,9 @@ class HassioSupervisorLog extends LitElement {
         pre {
           white-space: pre-wrap;
         }
-        paper-dropdown-menu {
-          padding: 0 2%;
-          width: 96%;
+        mwc-select {
+          width: 100%;
+          margin-bottom: 4px;
         }
       `,
     ];

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

@@ -10,7 +10,6 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../src/common/dom/fire_event";
-import "../../../src/common/search/search-input";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-alert";
 import "../../../src/components/ha-button-menu";
@@ -192,13 +191,7 @@ class UpdateAvailableCard extends LitElement {
                     </a>`
                   : ""}
                 <span></span>
-                <ha-progress-button
-                  .disabled=${!this._version ||
-                  (this._shouldCreateBackup &&
-                    this.supervisor.info?.state !== "running")}
-                  @click=${this._update}
-                  raised
-                >
+                <ha-progress-button @click=${this._update} raised>
                   ${this.supervisor.localize("common.update")}
                 </ha-progress-button>
               </div>
@@ -360,8 +353,14 @@ class UpdateAvailableCard extends LitElement {
   }
 
   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,17 +22,18 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@braintree/sanitize-url": "^5.0.2",
-    "@codemirror/commands": "^0.19.5",
-    "@codemirror/gutter": "^0.19.4",
-    "@codemirror/highlight": "^0.19.6",
-    "@codemirror/history": "^0.19.0",
+    "@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/legacy-modes": "^0.19.0",
     "@codemirror/rectangular-selection": "^0.19.1",
-    "@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",
+    "@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",
     "@formatjs/intl-datetimeformat": "^4.2.5",
     "@formatjs/intl-getcanonicallocales": "^1.8.0",
     "@formatjs/intl-locale": "^2.4.40",
@@ -45,7 +46,7 @@
     "@fullcalendar/daygrid": "5.9.0",
     "@fullcalendar/interaction": "5.9.0",
     "@fullcalendar/list": "5.9.0",
-    "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch",
+    "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.7.0-pre.2#./.yarn/patches/@lit-labs/virtualizer/event-target-shim.patch",
     "@material/chips": "14.0.0-canary.261f2db59.0",
     "@material/data-table": "14.0.0-canary.261f2db59.0",
     "@material/mwc-button": "0.25.3",
@@ -57,7 +58,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",
@@ -66,6 +67,7 @@
     "@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",
@@ -87,13 +89,14 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.5.4",
-    "@vaadin/vaadin-combo-box": "^21.0.2",
-    "@vaadin/vaadin-date-picker": "^21.0.2",
+    "@vaadin/combo-box": "^22.0.4",
+    "@vaadin/vaadin-themable-mixin": "^22.0.4",
     "@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",
@@ -103,7 +106,7 @@
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.0.11",
+    "hls.js": "^1.1.5",
     "home-assistant-js-websocket": "^6.0.1",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
@@ -111,7 +114,7 @@
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
     "lit": "^2.1.2",
-    "lit-vaadin-helpers": "^0.2.1",
+    "lit-vaadin-helpers": "^0.3.0",
     "marked": "^3.0.2",
     "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",

script/core

@@ -4,6 +4,8 @@
 # Stop on errors
 set -e
 
+WD="${WORKSPACE_DIRECTORY:=/workspaces/frontend}"
+
 if [ -z "${DEVCONTAINER}" ]; then
   echo "This task should only run inside a devcontainer, for local install HA Core in a venv."
   exit 1
@@ -16,9 +18,9 @@ if [ -z $(which hass) ]; then
     git+git://github.com/home-assistant/home-assistant.git@dev
 fi
 
-if [ ! -d "/workspaces/frontend/config" ]; then
+if [ ! -d "${WD}/config" ]; then
   echo "Creating default configuration."
-  mkdir -p "/workspaces/frontend/config";
+  mkdir -p "${WD}/config";
   hass --script ensure_config -c config
   echo "demo:
 
@@ -26,24 +28,24 @@ logger:
   default: info
   logs:
     homeassistant.components.frontend: debug
-" >> /workspaces/frontend/config/configuration.yaml
+" >> "${WD}/config/configuration.yaml"
 
   if [ ! -z "${HASSIO}" ]; then
   echo "
 # frontend:
-#   development_repo: /workspaces/frontend
+#   development_repo: ${WD}
 
 hassio:
-  development_repo: /workspaces/frontend" >> /workspaces/frontend/config/configuration.yaml
+  development_repo: ${WD}" >> "${WD}/config/configuration.yaml"
   else
   echo "
 frontend:
-  development_repo: /workspaces/frontend
+  development_repo: ${WD}
 
 # hassio:
-#   development_repo: /workspaces/frontend" >> /workspaces/frontend/config/configuration.yaml
+#   development_repo: ${WD}" >> "${WD}/config/configuration.yaml"
   fi
 
 fi
 
-hass -c /workspaces/frontend/config
+hass -c "${WD}/config"

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220203.1
+version      = 20220220.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0

src/common/datetime/create_duration_data.ts

@@ -1,5 +1,5 @@
-import { HaDurationData } from "../../components/ha-duration-input";
-import { ForDict } from "../../data/automation";
+import type { HaDurationData } from "../../components/ha-duration-input";
+import type { ForDict } from "../../data/automation";
 
 export const createDurationData = (
   duration: string | number | ForDict | undefined
@@ -19,6 +19,9 @@ 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/entity/can_toggle_domain.ts

@@ -1,4 +1,4 @@
-import { HomeAssistant } from "../../types";
+import type { HomeAssistant } from "../../types";
 
 export const canToggleDomain = (hass: HomeAssistant, domain: string) => {
   const services = hass.services[domain];

src/common/entity/can_toggle_state.ts

@@ -1,14 +1,30 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import { HomeAssistant } from "../../types";
+import type { HassEntity } from "home-assistant-js-websocket";
+import type { HomeAssistant } from "../../types";
 import { canToggleDomain } from "./can_toggle_domain";
 import { computeStateDomain } from "./compute_state_domain";
 import { supportsFeature } from "./supports-feature";
 
 export const canToggleState = (hass: HomeAssistant, stateObj: HassEntity) => {
   const domain = computeStateDomain(stateObj);
+
   if (domain === "group") {
-    return stateObj.state === "on" || stateObj.state === "off";
+    if (
+      stateObj.attributes?.entity_id?.some((entity) => {
+        const entityStateObj = hass.states[entity];
+        if (!entityStateObj) {
+          return false;
+        }
+
+        const entityDomain = computeStateDomain(entityStateObj);
+        return canToggleDomain(hass, entityDomain);
+      })
+    ) {
+      return stateObj.state === "on" || stateObj.state === "off";
+    }
+
+    return false;
   }
+
   if (domain === "climate") {
     return supportsFeature(stateObj, 4096);
   }

src/common/entity/strip_prefix_from_entity_name.ts

@@ -1,24 +1,32 @@
+const SUFFIXES = [" ", ": "];
+
 /**
  * Strips a device name from an entity name.
  * @param entityName the entity name
- * @param lowerCasedPrefixWithSpaceSuffix the prefix to strip, lower cased with a space suffix
+ * @param lowerCasedPrefix the prefix to strip, lower cased
  * @returns
  */
 export const stripPrefixFromEntityName = (
   entityName: string,
-  lowerCasedPrefixWithSpaceSuffix: string
+  lowerCasedPrefix: string
 ) => {
-  if (!entityName.toLowerCase().startsWith(lowerCasedPrefixWithSpaceSuffix)) {
-    return undefined;
+  const lowerCasedEntityName = entityName.toLowerCase();
+
+  for (const suffix of SUFFIXES) {
+    const lowerCasedPrefixWithSuffix = `${lowerCasedPrefix}${suffix}`;
+
+    if (lowerCasedEntityName.startsWith(lowerCasedPrefixWithSuffix)) {
+      const newName = entityName.substring(lowerCasedPrefixWithSuffix.length);
+
+      // If first word already has an upper case letter (e.g. from brand name)
+      // leave as-is, otherwise capitalize the first word.
+      return hasUpperCase(newName.substr(0, newName.indexOf(" ")))
+        ? newName
+        : newName[0].toUpperCase() + newName.slice(1);
+    }
   }
 
-  const newName = entityName.substring(lowerCasedPrefixWithSpaceSuffix.length);
-
-  // If first word already has an upper case letter (e.g. from brand name)
-  // leave as-is, otherwise capitalize the first word.
-  return hasUpperCase(newName.substr(0, newName.indexOf(" ")))
-    ? newName
-    : newName[0].toUpperCase() + newName.slice(1);
+  return undefined;
 };
 
 const hasUpperCase = (str: string): boolean => str.toLowerCase() !== str;

src/common/search/search-input.ts

@@ -1,17 +1,10 @@
 import { mdiClose, mdiMagnify } from "@mdi/js";
-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 { css, CSSResultGroup, html, LitElement, 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";
 
@@ -21,11 +14,8 @@ 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 suffix = false;
 
   @property({ type: Boolean })
   public autofocus = false;
@@ -34,49 +24,44 @@ class SearchInput extends LitElement {
   public label?: string;
 
   public focus() {
-    this.shadowRoot!.querySelector("paper-input")!.focus();
+    this._input?.focus();
   }
 
-  @query("paper-input", true) private _input!: PaperInputElement;
+  @query("ha-textfield", true) private _input!: HaTextField;
 
   protected render(): TemplateResult {
     return html`
-      <paper-input
+      <ha-textfield
         .autofocus=${this.autofocus}
         .label=${this.label || "Search"}
-        .value=${this.filter}
-        @value-changed=${this._filterInputChanged}
-        .noLabelFloat=${this.noLabelFloat}
+        .value=${this.filter || ""}
+        .icon=${true}
+        .iconTrailing=${this.filter || this.suffix}
+        @input=${this._filterInputChanged}
       >
-        <slot name="prefix" slot="prefix">
-          <ha-svg-icon class="prefix" .path=${mdiMagnify}></ha-svg-icon>
+        <slot name="prefix" slot="leadingIcon">
+          <ha-svg-icon
+            tabindex="-1"
+            class="prefix"
+            .path=${mdiMagnify}
+          ></ha-svg-icon>
         </slot>
-        ${this.filter &&
-        html`
-          <ha-icon-button
-            slot="suffix"
-            @click=${this._clearSearch}
-            .label=${this.hass.localize("ui.common.clear")}
-            .path=${mdiClose}
-          ></ha-icon-button>
-        `}
-      </paper-input>
+        <div class="trailing" slot="trailingIcon">
+          ${this.filter &&
+          html`
+            <ha-icon-button
+              @click=${this._clearSearch}
+              .label=${this.hass.localize("ui.common.clear")}
+              .path=${mdiClose}
+              class="clear-button"
+            ></ha-icon-button>
+          `}
+          <slot name="suffix"></slot>
+        </div>
+      </ha-textfield>
     `;
   }
 
-  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) });
   }
@@ -91,15 +76,25 @@ 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-icon-button {
-        --mdc-icon-button-size: 24px;
+      ha-svg-icon {
+        outline: none;
       }
-      ha-svg-icon.prefix {
-        margin: 8px;
+      .clear-button {
+        --mdc-icon-size: 20px;
+      }
+      ha-textfield {
+        display: inherit;
+      }
+      .trailing {
+        display: flex;
+        align-items: center;
       }
     `;
   }

src/common/style/icon_color_css.ts

@@ -15,6 +15,7 @@ export const iconColorCSS = css`
   ha-state-icon[data-domain="media_player"][data-state="on"],
   ha-state-icon[data-domain="media_player"][data-state="paused"],
   ha-state-icon[data-domain="media_player"][data-state="playing"],
+  ha-state-icon[data-domain="remote"][data-state="on"],
   ha-state-icon[data-domain="script"][data-state="on"],
   ha-state-icon[data-domain="sun"][data-state="above_horizon"],
   ha-state-icon[data-domain="switch"][data-state="on"],

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

@@ -1,4 +1,3 @@
-import { Layout1d, scroll } from "@lit-labs/virtualizer";
 import { mdiArrowDown, mdiArrowUp } from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import {
@@ -31,6 +30,7 @@ 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,6 +70,7 @@ 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;
@@ -294,6 +295,7 @@ export class HaDataTable extends LitElement {
               };
               return html`
                 <div
+                  aria-label=${column.label}
                   class="mdc-data-table__header-cell ${classMap(classes)}"
                   style=${column.width
                     ? styleMap({
@@ -337,111 +339,99 @@ export class HaDataTable extends LitElement {
                 </div>
               `
             : html`
-                <div
+                <lit-virtualizer
+                  scroller
                   class="mdc-data-table__content scroller ha-scrollbar"
                   @scroll=${this._saveScrollPos}
-                >
-                  ${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>
+                  .items=${this._items}
+                  .renderItem=${this._renderRow}
+                ></lit-virtualizer>
               `}
         </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++;
@@ -536,7 +526,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;
 
@@ -549,16 +539,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
@@ -571,6 +561,9 @@ export class HaDataTable extends LitElement {
   }
 
   private _handleSearchChange(ev: CustomEvent): void {
+    if (this.filter) {
+      return;
+    }
     this._debounceSearch(ev.detail.value);
   }
 
@@ -935,11 +928,10 @@ export class HaDataTable extends LitElement {
         }
         .table-header {
           border-bottom: 1px solid var(--divider-color);
-          padding: 0 16px;
         }
         search-input {
-          position: relative;
-          top: 2px;
+          display: block;
+          flex: 1;
         }
         slot[name="header"] {
           display: block;
@@ -952,6 +944,7 @@ export class HaDataTable extends LitElement {
         }
         .scroller {
           height: calc(100% - 57px);
+          overflow: overlay !important;
         }
 
         .mdc-data-table__table.auto-height .scroller {
@@ -967,6 +960,9 @@ export class HaDataTable extends LitElement {
         .clickable {
           cursor: pointer;
         }
+        lit-virtualizer {
+          contain: size layout !important;
+        }
       `,
     ];
   }

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

@@ -1,20 +1,7 @@
 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 {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -50,36 +37,12 @@ interface AreaDevices {
   devices: string[];
 }
 
-// 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>`;
+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>`;
 
 @customElement("ha-area-devices-picker")
 export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
@@ -117,9 +80,6 @@ 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[];
@@ -302,71 +262,30 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
       `;
     }
     return html`
-      <vaadin-combo-box-light
+      <ha-combo-box
+        .hass=${this.hass}
         item-value-path="id"
         item-id-path="id"
         item-label-path="name"
         .items=${areas}
         .value=${this._value}
-        ${comboBoxRenderer(rowRenderer)}
-        @opened-changed=${this._openedChanged}
+        .renderer=${rowRenderer}
+        .label=${this.label === undefined && this.hass
+          ? this.hass.localize("ui.components.device-picker.device")
+          : `${this.label} in area`}
         @value-changed=${this._areaPicked}
       >
-        <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
-      >
+      </ha-combo-box>
+      <mwc-button @click=${this._switchPicker}>
+        Choose individual devices
+      </mwc-button>
     `;
   }
 
-  private _clearValue(ev: Event) {
-    ev.stopPropagation();
-    this._setValue([]);
-  }
-
   private get _value() {
     return this.value || [];
   }
 
-  private _openedChanged(ev: PolymerChangedEvent<boolean>) {
-    this._opened = ev.detail.value;
-  }
-
   private async _switchPicker() {
     this._areaPicker = !this._areaPicker;
   }
@@ -398,22 +317,6 @@ 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,7 +1,5 @@
-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 "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -10,7 +8,6 @@ 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";
@@ -67,14 +64,12 @@ export abstract class HaDeviceAutomationPicker<
     this._createNoAutomation = createNoAutomation;
   }
 
-  private get _key() {
-    if (
-      !this.value ||
-      deviceAutomationsEqual(
-        this._createNoAutomation(this.deviceId),
-        this.value
-      )
-    ) {
+  private get _value() {
+    if (!this.value) {
+      return "";
+    }
+
+    if (!this._automations.length) {
       return NO_AUTOMATION_KEY;
     }
 
@@ -93,42 +88,32 @@ export abstract class HaDeviceAutomationPicker<
     if (this._renderEmpty) {
       return html``;
     }
+    const value = this._value;
     return html`
-      <ha-paper-dropdown-menu
+      <mwc-select
         .label=${this.label}
-        .value=${this.value
-          ? this._localizeDeviceAutomation(this.hass, this.value)
-          : ""}
-        ?disabled=${this._automations.length === 0}
+        .value=${value}
+        @selected=${this._automationChanged}
+        .disabled=${this._automations.length === 0}
       >
-        <paper-listbox
-          slot="dropdown-content"
-          .selected=${this._key}
-          attr-for-selected="key"
-          @iron-select=${this._automationChanged}
-        >
-          <paper-item
-            key=${NO_AUTOMATION_KEY}
-            .automation=${this._createNoAutomation(this.deviceId)}
-            hidden
-          >
-            ${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>
+        ${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>
     `;
   }
 
@@ -138,14 +123,6 @@ 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() {
@@ -168,9 +145,16 @@ export abstract class HaDeviceAutomationPicker<
   }
 
   private _automationChanged(ev) {
-    if (ev.detail.item.automation) {
-      this._setValue(ev.detail.item.automation);
+    const value = ev.target.value;
+    if (!value || [UNKNOWN_AUTOMATION_KEY, NO_AUTOMATION_KEY].includes(value)) {
+      return;
     }
+    const [deviceId, idx] = value.split("_");
+    const automation = this._automations[idx];
+    if (automation.device_id !== deviceId) {
+      return;
+    }
+    this._setValue(automation);
   }
 
   private _setValue(automation: T) {
@@ -183,14 +167,9 @@ export abstract class HaDeviceAutomationPicker<
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-paper-dropdown-menu {
+      mwc-select {
         width: 100%;
-      }
-      paper-listbox {
-        min-width: 200px;
-      }
-      paper-item {
-        cursor: pointer;
+        margin-top: 4px;
       }
     `;
   }

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

@@ -1,18 +1,9 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-list/mwc-list-item";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property, state, query } from "lit/decorators";
-import memoizeOne from "memoize-one";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
-import { mdiCheck } from "@mdi/js";
+import { customElement, property, query, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { stringCompare } from "../../common/string/compare";
@@ -46,36 +37,12 @@ export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
 ) => boolean;
 
-// 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>`;
+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>`;
 
 @customElement("ha-device-picker")
 export class HaDevicePicker extends SubscribeMixin(LitElement) {
@@ -138,7 +105,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       if (!devices.length) {
         return [
           {
-            id: "",
+            id: "no_devices",
             area: "",
             name: this.hass.localize("ui.components.device-picker.no_devices"),
           },
@@ -234,7 +201,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       if (!outputDevices.length) {
         return [
           {
-            id: "",
+            id: "no_devices",
             area: "",
             name: this.hass.localize("ui.components.device-picker.no_match"),
           },
@@ -303,7 +270,6 @@ 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}
@@ -317,7 +283,11 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   private _deviceChanged(ev: PolymerChangedEvent<string>) {
     ev.stopPropagation();
-    const newValue = ev.detail.value;
+    let newValue = ev.detail.value;
+
+    if (newValue === "no_devices") {
+      newValue = "";
+    }
 
     if (newValue !== this._value) {
       this._setValue(newValue);
@@ -335,19 +305,6 @@ 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 { html, LitElement, TemplateResult } from "lit";
+import { css, 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,6 +145,12 @@ 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,54 +1,14 @@
-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 {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
 import { formatAttributeName } from "../../data/entity_attributes";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import "../ha-icon-button";
-import "../ha-svg-icon";
-import "./state-badge";
+import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
 
 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;
@@ -68,7 +28,7 @@ class HaEntityAttributePicker extends LitElement {
 
   @property({ type: Boolean }) private _opened = false;
 
-  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
+  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
 
   protected shouldUpdate(changedProps: PropertyValues) {
     return !(!changedProps.has("_opened") && this._opened);
@@ -78,7 +38,10 @@ 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)
+        ? Object.keys(state.attributes).map((key) => ({
+            value: key,
+            label: formatAttributeName(key),
+          }))
         : [];
     }
   }
@@ -89,100 +52,31 @@ class HaEntityAttributePicker extends LitElement {
     }
 
     return html`
-      <vaadin-combo-box-light
-        .value=${this._value}
+      <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}
         .allowCustomValue=${this.allowCustomValue}
-        attr-for-value="bind-value"
-        ${comboBoxRenderer(rowRenderer)}
+        item-value-path="value"
+        item-label-path="label"
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
       >
-        <paper-input
-          .autofocus=${this.autofocus}
-          .label=${this.label ??
-          this.hass.localize(
-            "ui.components.entity.entity-attribute-picker.attribute"
-          )}
-          .value=${this._value ? formatAttributeName(this._value) : ""}
-          .disabled=${this.disabled || !this.entityId}
-          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>
+      </ha-combo-box>
     `;
   }
 
-  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>) {
-    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;
-      }
-    `;
+    this.value = ev.detail.value;
   }
 }
 

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

@@ -1,25 +1,16 @@
-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 "@material/mwc-list/mwc-list-item";
 import { HassEntity } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
-import { customElement, property, query } from "lit/decorators";
+import { 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";
 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";
@@ -27,35 +18,15 @@ import "./state-badge";
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
 // eslint-disable-next-line lit/prefer-static-styles
-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>`;
-
+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>`;
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -107,19 +78,19 @@ export class HaEntityPicker extends LitElement {
 
   @property({ type: Boolean }) public hideClearIcon = false;
 
-  @property({ type: Boolean }) private _opened = false;
+  @state() private _opened = false;
 
-  @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement;
+  @query("ha-combo-box", true) public comboBox!: HaComboBox;
 
   public open() {
     this.updateComplete.then(() => {
-      (this.shadowRoot?.querySelector("vaadin-combo-box-light") as any)?.open();
+      this.comboBox?.open();
     });
   }
 
   public focus() {
     this.updateComplete.then(() => {
-      this.shadowRoot?.querySelector("paper-input")?.focus();
+      this.comboBox?.focus();
     });
   }
 
@@ -144,6 +115,27 @@ 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))
@@ -156,7 +148,10 @@ export class HaEntityPicker extends LitElement {
         );
       }
 
-      states = entityIds.sort().map((key) => hass!.states[key]);
+      states = entityIds.sort().map((key) => ({
+        ...hass!.states[key],
+        friendly_name: computeStateName(hass!.states[key]) || key,
+      }));
 
       if (includeDeviceClasses) {
         states = states.filter(
@@ -196,6 +191,9 @@ 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"
@@ -241,64 +239,25 @@ export class HaEntityPicker extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <vaadin-combo-box-light
+      <ha-combo-box
         item-value-path="entity_id"
-        item-label-path="entity_id"
+        item-label-path="friendly_name"
+        .hass=${this.hass}
         .value=${this._value}
+        .label=${this.label === undefined
+          ? this.hass.localize("ui.components.entity.entity-picker.entity")
+          : this.label}
         .allowCustomValue=${this.allowCustomEntity}
         .filteredItems=${this._states}
-        ${comboBoxRenderer(rowRenderer)}
+        .renderer=${rowRenderer}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
         @filter-changed=${this._filterChanged}
       >
-        <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>
+      </ha-combo-box>
     `;
   }
 
-  private _clearValue(ev: Event) {
-    ev.stopPropagation();
-    this._setValue("");
-  }
-
   private get _value() {
     return this.value || "";
   }
@@ -308,6 +267,7 @@ export class HaEntityPicker extends LitElement {
   }
 
   private _valueChanged(ev: PolymerChangedEvent<string>) {
+    ev.stopPropagation();
     const newValue = ev.detail.value;
     if (newValue !== this._value) {
       this._setValue(newValue);
@@ -317,9 +277,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(
-      (state) =>
-        state.entity_id.toLowerCase().includes(filterString) ||
-        computeStateName(state).toLowerCase().includes(filterString)
+      (entityState) =>
+        entityState.entity_id.toLowerCase().includes(filterString) ||
+        computeStateName(entityState).toLowerCase().includes(filterString)
     );
   }
 
@@ -330,22 +290,6 @@ 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-statistic-picker.ts

@@ -1,17 +1,5 @@
-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 {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
+import { 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";
@@ -76,54 +64,24 @@ export class HaStatisticPicker extends LitElement {
     id: string;
     name: string;
     state?: HassEntity;
-    // 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>`;
+  }> = (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>`;
 
   private _getStatistics = memoizeOne(
     (
@@ -293,19 +251,6 @@ 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 { html, LitElement, TemplateResult } from "lit";
+import { css, CSSResultGroup, 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,6 +103,20 @@ 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,4 +1,3 @@
-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";
@@ -12,39 +11,12 @@ import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import { HaComboBox } from "./ha-combo-box";
 
-// 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>`;
+const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (
+  item
+) => html`<mwc-list-item twoline>
+  <span>${item.name}</span>
+  <span slot="secondary">${item.slug}</span>
+</mwc-list-item>`;
 
 @customElement("ha-addon-picker")
 class HaAddonPicker extends LitElement {

src/components/ha-area-picker.ts

@@ -1,19 +1,6 @@
-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 {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
@@ -41,38 +28,18 @@ 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
-  // 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>`;
+) => html`<mwc-list-item
+  class=${classMap({ "add-new": item.area_id === "add_new" })}
+>
+  ${item.name}
+</mwc-list-item>`;
 
 @customElement("ha-area-picker")
 export class HaAreaPicker extends SubscribeMixin(LitElement) {
@@ -125,7 +92,9 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   @state() private _opened?: boolean;
 
-  @query("vaadin-combo-box-light", true) public comboBox!: HTMLElement;
+  @query("ha-combo-box", true) public comboBox!: HaComboBox;
+
+  private _filter?: string;
 
   private _init = false;
 
@@ -145,13 +114,13 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   public open() {
     this.updateComplete.then(() => {
-      (this.shadowRoot?.querySelector("vaadin-combo-box-light") as any)?.open();
+      this.comboBox?.open();
     });
   }
 
   public focus() {
     this.updateComplete.then(() => {
-      this.shadowRoot?.querySelector("paper-input")?.focus();
+      this.comboBox?.focus();
     });
   }
 
@@ -170,7 +139,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
       if (!areas.length) {
         return [
           {
-            area_id: "",
+            area_id: "no_areas",
             name: this.hass.localize("ui.components.area-picker.no_areas"),
             picture: null,
           },
@@ -294,7 +263,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
       if (!outputAreas.length) {
         outputAreas = [
           {
-            area_id: "",
+            area_id: "no_areas",
             name: this.hass.localize("ui.components.area-picker.no_match"),
             picture: null,
           },
@@ -339,52 +308,25 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
       return html``;
     }
     return html`
-      <vaadin-combo-box-light
+      <ha-combo-box
+        .hass=${this.hass}
         item-value-path="area_id"
         item-id-path="area_id"
         item-label-path="name"
         .value=${this.value}
         .disabled=${this.disabled}
-        ${comboBoxRenderer(rowRenderer)}
+        .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}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._areaChanged}
       >
-        <paper-input
-          .label=${this.label === undefined && this.hass
-            ? this.hass.localize("ui.components.area-picker.area")
-            : this.label}
-          .placeholder=${this.placeholder
-            ? this._area(this.placeholder)?.name
-            : undefined}
-          .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>
+      </ha-combo-box>
     `;
   }
 
@@ -392,9 +334,29 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
     this._areas?.find((area) => area.area_id === areaId)
   );
 
-  private _clearValue(ev: Event) {
-    ev.stopPropagation();
-    this._setValue("");
+  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 get _value() {
@@ -406,9 +368,14 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
   }
 
   private _areaChanged(ev: PolymerChangedEvent<string>) {
-    const newValue = ev.detail.value;
+    ev.stopPropagation();
+    let newValue = ev.detail.value;
 
-    if (newValue !== "add_new") {
+    if (newValue === "no_areas") {
+      newValue = "";
+    }
+
+    if (!["add_new_suggestion", "add_new"].includes(newValue)) {
       if (newValue !== this._value) {
         this._setValue(newValue);
       }
@@ -425,6 +392,8 @@ 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;
@@ -445,6 +414,8 @@ 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, {
@@ -465,19 +436,6 @@ 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-base-time-input.ts

@@ -0,0 +1,313 @@
+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 "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 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,7 +24,11 @@ class HaBluePrintPicker extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   public open() {
-    this.shadowRoot!.querySelector("paper-dropdown-menu-light")!.open();
+    const select = this.shadowRoot?.querySelector("mwc-select");
+    if (select) {
+      // @ts-expect-error
+      select.menuOpen = true;
+    }
   }
 
   private _processedBlueprints = memoizeOne((blueprints?: Blueprints) => {
@@ -45,32 +49,29 @@ class HaBluePrintPicker extends LitElement {
       return html``;
     }
     return html`
-      <paper-dropdown-menu-light
+      <mwc-select
         .label=${this.label ||
         this.hass.localize("ui.components.blueprint-picker.label")}
+        fixedMenuPosition
+        naturalMenuWidth
+        .value=${this.value}
         .disabled=${this.disabled}
-        horizontal-align="left"
+        @selected=${this._blueprintChanged}
+        @closed=${stopPropagation}
       >
-        <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 value="">
+          ${this.hass.localize(
+            "ui.components.blueprint-picker.select_blueprint"
           )}
-        </paper-listbox>
-      </paper-dropdown-menu-light>
+        </mwc-list-item>
+        ${this._processedBlueprints(this.blueprints).map(
+          (blueprint) => html`
+            <mwc-list-item .value=${blueprint.path}>
+              ${blueprint.name}
+            </mwc-list-item>
+          `
+        )}
+      </mwc-select>
     `;
   }
 
@@ -84,10 +85,10 @@ class HaBluePrintPicker extends LitElement {
   }
 
   private _blueprintChanged(ev) {
-    const newValue = ev.detail.item.dataset.blueprintPath;
+    const newValue = ev.target.value;
 
     if (newValue !== this.value) {
-      this.value = ev.detail.value;
+      this.value = newValue;
       setTimeout(() => {
         fireEvent(this, "value-changed", { value: newValue });
         fireEvent(this, "change");
@@ -100,15 +101,11 @@ class HaBluePrintPicker extends LitElement {
       :host {
         display: inline-block;
       }
-      paper-dropdown-menu-light {
+      mwc-select {
         width: 100%;
         min-width: 200px;
         display: block;
       }
-      paper-item {
-        cursor: pointer;
-        min-width: 200px;
-      }
     `;
   }
 }

src/components/ha-button-related-filter-menu.ts

@@ -4,6 +4,7 @@ import { mdiFilterVariant } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { stopPropagation } from "../common/dom/stop_propagation";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { computeDeviceName } from "../data/device_registry";
 import { findRelated, RelatedResult } from "../data/search";
@@ -65,6 +66,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
         .fullwidth=${this.narrow}
         .corner=${this.corner}
         @closed=${this._onClosed}
+        @input=${stopPropagation}
       >
         <ha-area-picker
           .label=${this.hass.localize(
@@ -74,6 +76,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
           .value=${this.value?.area}
           no-add
           @value-changed=${this._areaPicked}
+          @click=${this._preventDefault}
         ></ha-area-picker>
         <ha-device-picker
           .label=${this.hass.localize(
@@ -82,6 +85,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
           .hass=${this.hass}
           .value=${this.value?.device}
           @value-changed=${this._devicePicked}
+          @click=${this._preventDefault}
         ></ha-device-picker>
         <ha-entity-picker
           .label=${this.hass.localize(
@@ -91,6 +95,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
           .value=${this.value?.entity}
           .excludeDomains=${this.excludeDomains}
           @value-changed=${this._entityPicked}
+          @click=${this._preventDefault}
         ></ha-entity-picker>
       </mwc-menu-surface>
     `;
@@ -103,11 +108,17 @@ export class HaRelatedFilterButtonMenu extends LitElement {
     this._open = true;
   }
 
-  private _onClosed(): void {
+  private _onClosed(ev): void {
+    ev.stopPropagation();
     this._open = false;
   }
 
+  private _preventDefault(ev) {
+    ev.preventDefault();
+  }
+
   private async _entityPicked(ev: CustomEvent) {
+    ev.stopPropagation();
     const entityId = ev.detail.value;
     if (!entityId) {
       fireEvent(this, "related-changed", { value: undefined });
@@ -127,6 +138,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
   }
 
   private async _devicePicked(ev: CustomEvent) {
+    ev.stopPropagation();
     const deviceId = ev.detail.value;
     if (!deviceId) {
       fireEvent(this, "related-changed", { value: undefined });
@@ -150,6 +162,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
   }
 
   private async _areaPicked(ev: CustomEvent) {
+    ev.stopPropagation();
     const areaId = ev.detail.value;
     if (!areaId) {
       fireEvent(this, "related-changed", { value: undefined });
@@ -173,9 +186,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
       :host {
         display: inline-block;
         position: relative;
-      }
-      :host([narrow]) {
-        position: static;
+        --mdc-menu-min-width: 250px;
       }
       ha-area-picker,
       ha-device-picker,
@@ -185,8 +196,15 @@ export class HaRelatedFilterButtonMenu extends LitElement {
         padding: 4px 16px;
         box-sizing: border-box;
       }
+      ha-area-picker {
+        padding-top: 16px;
+      }
+      ha-entity-picker {
+        padding-bottom: 16px;
+      }
       :host([narrow]) ha-area-picker,
-      :host([narrow]) ha-device-picker {
+      :host([narrow]) ha-device-picker,
+      :host([narrow]) ha-entity-picker {
         width: 100%;
       }
     `;

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

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

src/components/ha-code-editor.ts

@@ -1,8 +1,16 @@
+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 {
@@ -24,10 +32,15 @@ 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 = "";
@@ -110,43 +123,92 @@ 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: [
-          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)
-          ),
-        ],
+        extensions,
       }),
       root: this.shadowRoot!,
       parent: this.shadowRoot!,
     });
   }
 
+  private _getStates = memoizeOne((states: HassEntities): Completion[] => {
+    if (!states) {
+      return [];
+    }
+    const options = Object.keys(states).map((key) => ({
+      type: "variable",
+      label: key,
+      detail: states[key].attributes.friendly_name,
+      info: `State: ${states[key].state}`,
+    }));
+
+    return options;
+  });
+
+  private _entityCompletions(
+    context: CompletionContext
+  ): CompletionResult | null | Promise<CompletionResult | null> {
+    const entityWord = context.matchBefore(/[a-z_]{3,}\./);
+
+    if (
+      !entityWord ||
+      (entityWord.from === entityWord.to && !context.explicit)
+    ) {
+      return null;
+    }
+
+    const states = this._getStates(this.hass!.states);
+
+    if (!states || !states.length) {
+      return null;
+    }
+
+    return {
+      from: Number(entityWord.from),
+      options: states,
+      span: /^\w*.\w*$/,
+    };
+  }
+
   private _blockKeyboardShortcuts() {
     this.addEventListener("keydown", (ev) => ev.stopPropagation());
   }
@@ -163,10 +225,9 @@ 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) div.cm-wrap .cm-gutters {
+      :host(.error-state) .cm-gutters {
         border-color: var(--error-state-color, red);
       }
     `;

src/components/ha-combo-box.ts

@@ -1,37 +1,78 @@
+import "@material/mwc-list/mwc-list-item";
 import { 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 "@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 { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
-import { customElement, property, query, state } from "lit/decorators";
+import { customElement, property, query } 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";
 
-// eslint-disable-next-line lit/prefer-static-styles
-const defaultRowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
-    paper-item {
-      margin: -5px -10px;
+registerStyles(
+  "vaadin-combo-box-item",
+  css`
+    :host {
       padding: 0;
     }
-  </style>
-  <paper-item>${item}</paper-item>`;
+    :host([focused]:not([disabled])) {
+      background-color: rgba(var(--rgb-primary-text-color, 0, 0, 0), 0.12);
+    }
+    :host([selected]:not([disabled])) {
+      background-color: transparent;
+      color: var(--mdc-theme-primary);
+      --mdc-ripple-color: var(--mdc-theme-primary);
+      --mdc-theme-text-primary-on-background: var(--mdc-theme-primary);
+    }
+    :host([selected]:not([disabled])):before {
+      background-color: var(--mdc-theme-primary);
+      opacity: 0.12;
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    :host([selected][focused]:not([disabled])):before {
+      opacity: 0.24;
+    }
+    :host(:hover:not([disabled])) {
+      background-color: transparent;
+    }
+    [part="content"] {
+      width: 100%;
+    }
+    [part="checkmark"] {
+      display: none;
+    }
+  `
+);
 
 @customElement("ha-combo-box")
 export class HaComboBox extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public label?: string;
 
   @property() public value?: string;
 
-  @property() public items?: [];
+  @property() public placeholder?: string;
 
-  @property() public filteredItems?: [];
+  @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({ attribute: "allow-custom-value", type: Boolean })
   public allowCustomValue?: boolean;
@@ -46,24 +87,25 @@ export class HaComboBox extends LitElement {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
-  @state() private _opened?: boolean;
+  @property({ type: Boolean, reflect: true, attribute: "opened" })
+  private _opened?: boolean;
 
-  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
+  @query("vaadin-combo-box-light", true) private _comboBox!: ComboBoxLight;
 
   public open() {
     this.updateComplete.then(() => {
-      (this._comboBox as any)?.open();
+      this._comboBox?.open();
     });
   }
 
   public focus() {
     this.updateComplete.then(() => {
-      this.shadowRoot?.querySelector("paper-input")?.focus();
+      this._comboBox?.inputElement?.focus();
     });
   }
 
   public get selectedItem() {
-    return (this._comboBox as any).selectedItem;
+    return this._comboBox.selectedItem;
   }
 
   protected render(): TemplateResult {
@@ -72,55 +114,78 @@ 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 || defaultRowRenderer)}
+        ${comboBoxRenderer(this.renderer || this._defaultRowRenderer)}
         @opened-changed=${this._openedChanged}
         @filter-changed=${this._filterChanged}
         @value-changed=${this._valueChanged}
+        attr-for-value="value"
       >
-        <paper-input
+        <ha-textfield
           .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}
         >
-          ${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>
+          <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>
       </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>) {
-    this._opened = ev.detail.value;
+    // delay this so we can handle click event before setting _opened
+    setTimeout(() => {
+      this._opened = ev.detail.value;
+    }, 0);
     // @ts-ignore
     fireEvent(this, ev.type, ev.detail);
   }
@@ -141,11 +206,38 @@ export class HaComboBox extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-input > ha-icon-button {
+      :host {
+        display: block;
+        width: 100%;
+      }
+      vaadin-combo-box-light {
+        position: relative;
+      }
+      ha-textfield {
+        width: 100%;
+      }
+      ha-textfield > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;
         color: var(--secondary-text-color);
       }
+      ha-svg-icon {
+        color: var(--input-dropdown-icon-color);
+        position: absolute;
+        cursor: pointer;
+      }
+      .toggle-button {
+        right: 12px;
+        top: -10px;
+      }
+      :host([opened]) .toggle-button {
+        color: var(--primary-color);
+      }
+      .clear-button {
+        --mdc-icon-size: 20px;
+        top: -7px;
+        right: 36px;
+      }
     `;
   }
 }

src/components/ha-date-input.ts

@@ -1,140 +1,78 @@
 import { mdiCalendar } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
-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 { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { formatDateNumeric } from "../common/datetime/format_date";
 import { fireEvent } from "../common/dom/fire_event";
+import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
+import "./ha-textfield";
 
-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]);
-    }
+const loadDatePickerDialog = () => import("./ha-dialog-date-picker");
 
-    if (date !== undefined) {
-      return { day: date, month, year };
-    }
-    return undefined;
-  },
+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,
+  });
 };
 @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`<vaadin-date-picker-light
+    return html`<ha-textfield
+      .label=${this.label}
       .disabled=${this.disabled}
-      @value-changed=${this._valueChanged}
-      attr-for-value="value"
-      .i18n=${i18n}
+      iconTrailing="calendar"
+      @click=${this._openDialog}
+      .value=${this.value
+        ? formatDateNumeric(new Date(this.value), this.locale)
+        : ""}
     >
-      <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>`;
+      <ha-svg-icon slot="trailingIcon" .path=${mdiCalendar}></ha-svg-icon>
+    </ha-textfield>`;
   }
 
-  private _valueChanged(ev: CustomEvent) {
-    if (
-      !this.value ||
-      (this._inited && !this._compareStringDates(ev.detail.value, this.value))
-    ) {
-      this.value = ev.detail.value;
+  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;
       fireEvent(this, "change");
-      fireEvent(this, "value-changed", { value: ev.detail.value });
+      fireEvent(this, "value-changed", { 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 {
-        width: 110px;
-      }
       ha-svg-icon {
         color: var(--secondary-text-color);
       }

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

@@ -0,0 +1,106 @@
+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,6 +1,7 @@
-import { Dialog } from "@material/mwc-dialog";
+import { DialogBase } from "@material/mwc-dialog/mwc-dialog-base";
+import { styles } from "@material/mwc-dialog/mwc-dialog.css";
 import { mdiClose } from "@mdi/js";
-import { css, CSSResultGroup, html, TemplateResult } from "lit";
+import { css, html, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import type { HomeAssistant } from "../types";
@@ -21,8 +22,7 @@ export const createCloseHeading = (
 `;
 
 @customElement("ha-dialog")
-// @ts-expect-error
-export class HaDialog extends Dialog {
+export class HaDialog extends DialogBase {
   public scrollToPos(x: number, y: number) {
     this.contentElement?.scrollTo(x, y);
   }
@@ -31,77 +31,75 @@ export class HaDialog extends Dialog {
     return html`<slot name="heading"> ${super.renderHeading()} </slot>`;
   }
 
-  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;
-        }
-      `,
-    ];
-  }
+  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;
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/ha-duration-input.ts

@@ -1,7 +1,8 @@
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import "./paper-time-input";
+import "./ha-base-time-input";
+import type { TimeChangedEvent } from "./ha-base-time-input";
 
 export interface HaDurationData {
   hours?: number;
@@ -32,110 +33,69 @@ class HaDurationInput extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-time-input
+      <ha-base-time-input
         .label=${this.label}
         .required=${this.required}
         .autoValidate=${this.required}
         .disabled=${this.disabled}
-        error-message="Required"
-        enable-second
+        errorMessage="Required"
+        enableSecond
         .enableMillisecond=${this.enableMillisecond}
         format="24"
-        .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>
+        .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>
     `;
   }
 
   private get _hours() {
-    return this.data && this.data.hours ? Number(this.data.hours) : 0;
+    return this.data?.hours ? Number(this.data.hours) : 0;
   }
 
   private get _minutes() {
-    return this.data && this.data.minutes ? Number(this.data.minutes) : 0;
+    return this.data?.minutes ? Number(this.data.minutes) : 0;
   }
 
   private get _seconds() {
-    return this.data && this.data.seconds ? Number(this.data.seconds) : 0;
+    return this.data?.seconds ? Number(this.data.seconds) : 0;
   }
 
   private get _milliseconds() {
-    return this.data && this.data.milliseconds
-      ? Number(this.data.milliseconds)
-      : 0;
+    return this.data?.milliseconds ? Number(this.data.milliseconds) : 0;
   }
 
-  private _parseDuration(value) {
-    return value.toString().padStart(2, "0");
-  }
+  private _durationChanged(ev: CustomEvent<{ value: TimeChangedEvent }>) {
+    ev.stopPropagation();
+    const value = { ...ev.detail.value };
 
-  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 (!this.enableMillisecond && !value.milliseconds) {
+      // @ts-ignore
+      delete value.milliseconds;
+    } else if (value.milliseconds > 999) {
+      value.seconds += Math.floor(value.milliseconds / 1000);
+      value.milliseconds %= 1000;
     }
 
-    let hours = this._hours;
-    let minutes = this._minutes;
-
-    if (unit === "seconds" && value > 59) {
-      minutes += Math.floor(value / 60);
-      value %= 60;
+    if (value.seconds > 59) {
+      value.minutes += Math.floor(value.seconds / 60);
+      value.seconds %= 60;
     }
 
-    if (unit === "minutes" && value > 59) {
-      hours += Math.floor(value / 60);
-      value %= 60;
+    if (value.minutes > 59) {
+      value.hours += Math.floor(value.minutes / 60);
+      value.minutes %= 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: newValue,
+      value,
     });
   }
 }

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() public schema!: HaFormFloatSchema;
+  @property({ attribute: false }) public schema!: HaFormFloatSchema;
 
-  @property() public data!: HaFormFloatData;
+  @property({ attribute: false }) public data!: HaFormFloatData;
 
   @property() public label!: string;
 
   @property({ type: Boolean }) public disabled = false;
 
-  @query("mwc-textfield") private _input?: HTMLElement;
+  @query("ha-textfield") private _input?: HaTextField;
 
   public focus() {
     if (this._input) {
@@ -25,7 +25,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
 
   protected render(): TemplateResult {
     return html`
-      <mwc-textfield
+      <ha-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}
-      ></mwc-textfield>
+      ></ha-textfield>
     `;
   }
 
@@ -46,7 +46,7 @@ export class HaFormFloat extends LitElement implements HaFormElement {
   }
 
   private _valueChanged(ev: Event) {
-    const source = ev.target as TextField;
+    const source = ev.target as HaTextField;
     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;
     }
-    mwc-textfield {
+    ha-textfield {
       display: block;
     }
   `;

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

@@ -1,6 +1,3 @@
-import "@material/mwc-textfield";
-import type { TextField } from "@material/mwc-textfield";
-import type { Slider } from "@material/mwc-slider";
 import {
   css,
   CSSResultGroup,
@@ -14,18 +11,21 @@ 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() public schema!: HaFormIntegerSchema;
+  @property({ attribute: false }) public schema!: HaFormIntegerSchema;
 
-  @property() public data?: HaFormIntegerData;
+  @property({ attribute: false }) public data?: HaFormIntegerData;
 
   @property() public label?: string;
 
   @property({ type: Boolean }) public disabled = false;
 
-  @query("paper-input ha-slider") private _input?: HTMLElement;
+  @query("ha-textfield ha-slider") private _input?:
+    | HaTextField
+    | HTMLInputElement;
 
   private _lastValue?: HaFormIntegerData;
 
@@ -45,7 +45,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
         <div>
           ${this.label}
           <div class="flex">
-            ${this.schema.optional
+            ${!this.schema.required
               ? html`
                   <ha-checkbox
                     @change=${this._handleCheckboxChange}
@@ -61,7 +61,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
               .min=${this.schema.valueMin}
               .max=${this.schema.valueMax}
               .disabled=${this.disabled ||
-              (this.data === undefined && this.schema.optional)}
+              (this.data === undefined && !this.schema.required)}
               @change=${this._valueChanged}
             ></ha-slider>
           </div>
@@ -70,7 +70,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
     }
 
     return html`
-      <mwc-textfield
+      <ha-textfield
         type="number"
         inputMode="numeric"
         .label=${this.label}
@@ -81,7 +81,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
         .suffix=${this.schema.description?.suffix}
         .validationMessage=${this.schema.required ? "Required" : undefined}
         @input=${this._valueChanged}
-      ></mwc-textfield>
+      ></ha-textfield>
     `;
   }
 
@@ -100,7 +100,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       return this.data;
     }
 
-    if (this.schema.optional) {
+    if (!this.schema.required) {
       return this.schema.valueMin || 0;
     }
 
@@ -138,7 +138,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
   }
 
   private _valueChanged(ev: Event) {
-    const source = ev.target as TextField | Slider;
+    const source = ev.target as HaTextField | HTMLInputElement;
     const rawValue = source.value;
 
     let value: number | undefined;
@@ -172,7 +172,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
       ha-slider {
         flex: 1;
       }
-      mwc-textfield {
+      ha-textfield {
         display: block;
       }
     `;

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

@@ -1,25 +1,28 @@
+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,
-  TemplateResult,
   PropertyValues,
+  TemplateResult,
 } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-button-menu";
+import "../ha-check-list-item";
+import type { 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;
@@ -57,23 +60,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}${renderedOptions}</div> `;
+      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`
@@ -83,8 +86,10 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
         corner="BOTTOM_START"
         @opened=${this._handleOpen}
         @closed=${this._handleClose}
+        multi
+        activatable
       >
-        <mwc-textfield
+        <ha-textfield
           slot="trigger"
           .label=${this.label}
           .value=${data
@@ -92,12 +97,25 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
             .join(", ")}
           .disabled=${this.disabled}
           tabindex="-1"
-        ></mwc-textfield>
+        ></ha-textfield>
         <ha-svg-icon
           slot="trigger"
           .path=${this._opened ? mdiMenuUp : mdiMenuDown}
         ></ha-svg-icon>
-        ${renderedOptions}
+        ${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>`;
+        })}
       </ha-button-menu>
     `;
   }
@@ -105,7 +123,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
   protected firstUpdated() {
     this.updateComplete.then(() => {
       const { formElement, mdcRoot } =
-        this.shadowRoot?.querySelector("mwc-textfield") || ({} as any);
+        this.shadowRoot?.querySelector("ha-textfield") || ({} as any);
       if (formElement) {
         formElement.style.textOverflow = "ellipsis";
       }
@@ -125,9 +143,23 @@ 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) {
@@ -171,11 +203,11 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
         display: block;
         cursor: pointer;
       }
-      mwc-formfield {
+      ha-formfield {
         display: block;
         padding-right: 16px;
       }
-      mwc-textfield {
+      ha-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.optional && this.schema.options!.length < 6) {
+    if (this.schema.required && 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.optional
+        ${!this.schema.required
           ? 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,
-  TemplateResult,
   PropertyValues,
+  TemplateResult,
 } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } 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("mwc-textfield") private _input?: HTMLElement;
+  @query("ha-textfield") private _input?: HaTextField;
 
   public focus(): void {
     if (this._input) {
@@ -45,7 +45,7 @@ export class HaFormString extends LitElement implements HaFormElement {
       this.schema.name.includes(field)
     );
     return html`
-      <mwc-textfield
+      <ha-textfield
         .type=${!isPassword
           ? this._stringType
           : this._unmaskedPassword
@@ -62,7 +62,7 @@ export class HaFormString extends LitElement implements HaFormElement {
           : this.schema.description?.suffix}
         .validationMessage=${this.schema.required ? "Required" : undefined}
         @input=${this._valueChanged}
-      ></mwc-textfield>
+      ></ha-textfield>
       ${isPassword
         ? html`<ha-icon-button
             toggles
@@ -85,11 +85,11 @@ export class HaFormString extends LitElement implements HaFormElement {
   }
 
   private _valueChanged(ev: Event): void {
-    let value: string | undefined = (ev.target as TextField).value;
+    let value: string | undefined = (ev.target as HaTextField).value;
     if (this.data === value) {
       return;
     }
-    if (value === "" && this.schema.optional) {
+    if (value === "" && !this.schema.required) {
       value = undefined;
     }
     fireEvent(this, "value-changed", {
@@ -118,7 +118,7 @@ export class HaFormString extends LitElement implements HaFormElement {
       :host([own-margin]) {
         margin-bottom: 5px;
       }
-      mwc-textfield {
+      ha-textfield {
         display: block;
       }
       ha-icon-button {

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

@@ -1,4 +1,4 @@
-import { css, CSSResultGroup, html, LitElement } from "lit";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -12,11 +12,16 @@ 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[];
@@ -27,7 +32,12 @@ export class HaForm extends LitElement implements HaFormElement {
 
   @property() public computeError?: (schema: HaFormSchema, error) => string;
 
-  @property() public computeLabel?: (schema: HaFormSchema) => string;
+  @property() public computeLabel?: (
+    schema: HaFormSchema,
+    data?: HaFormDataContainer
+  ) => string;
+
+  @property() public computeHelper?: (schema: HaFormSchema) => string;
 
   public focus() {
     const root = this.shadowRoot?.querySelector(".root");
@@ -42,6 +52,18 @@ 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">
@@ -54,6 +76,7 @@ export class HaForm extends LitElement implements HaFormElement {
           : ""}
         ${this.schema.map((item) => {
           const error = getValue(this.error, item);
+
           return html`
             ${error
               ? html`
@@ -62,12 +85,23 @@ export class HaForm extends LitElement implements HaFormElement {
                   </ha-alert>
                 `
               : ""}
-            ${dynamicElement(`ha-form-${item.type}`, {
-              schema: item,
-              data: getValue(this.data, item),
-              label: this._computeLabel(item),
-              disabled: this.disabled,
-            })}
+            ${"selector" in item
+              ? html`<ha-selector
+                  .schema=${item}
+                  .hass=${this.hass}
+                  .selector=${item.selector}
+                  .value=${getValue(this.data, item)}
+                  .label=${this._computeLabel(item, this.data)}
+                  .disabled=${this.disabled}
+                  .helper=${this._computeHelper(item)}
+                  .required=${item.required || false}
+                ></ha-selector>`
+              : dynamicElement(`ha-form-${item.type}`, {
+                  schema: item,
+                  data: getValue(this.data, item),
+                  label: this._computeLabel(item, this.data),
+                  disabled: this.disabled,
+                })}
           `;
         })}
       </div>
@@ -80,6 +114,7 @@ export class HaForm extends LitElement implements HaFormElement {
     root.addEventListener("value-changed", (ev) => {
       ev.stopPropagation();
       const schema = (ev.target as HaFormElement).schema as HaFormSchema;
+
       fireEvent(this, "value-changed", {
         value: { ...this.data, [schema.name]: ev.detail.value },
       });
@@ -87,14 +122,18 @@ export class HaForm extends LitElement implements HaFormElement {
     return root;
   }
 
-  private _computeLabel(schema: HaFormSchema) {
+  private _computeLabel(schema: HaFormSchema, data: HaFormDataContainer) {
     return this.computeLabel
-      ? this.computeLabel(schema)
+      ? this.computeLabel(schema, data)
       : schema
       ? schema.name
       : "";
   }
 
+  private _computeHelper(schema: HaFormSchema) {
+    return this.computeHelper ? this.computeHelper(schema) : "";
+  }
+
   private _computeError(error, schema: HaFormSchema | HaFormSchema[]) {
     return this.computeError ? this.computeError(error, schema) : error;
   }

src/components/ha-form/types.ts

@@ -1,4 +1,5 @@
 import type { LitElement } from "lit";
+import { Selector } from "../../data/selector";
 import type { HaDurationData } from "../ha-duration-input";
 
 export type HaFormSchema =
@@ -9,14 +10,24 @@ export type HaFormSchema =
   | HaFormBooleanSchema
   | HaFormSelectSchema
   | HaFormMultiSelectSchema
-  | HaFormTimeSchema;
+  | HaFormTimeSchema
+  | HaFormSelector;
 
 export interface HaFormBaseSchema {
   name: string;
+  // This value is applied if no data is submitted for this field
   default?: HaFormData;
   required?: boolean;
-  optional?: boolean;
-  description?: { suffix?: string; suggested_value?: HaFormData };
+  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;
 }
 
 export interface HaFormConstantSchema extends HaFormBaseSchema {
@@ -38,7 +49,7 @@ export interface HaFormSelectSchema extends HaFormBaseSchema {
 
 export interface HaFormMultiSelectSchema extends HaFormBaseSchema {
   type: "multi_select";
-  options: Record<string, string> | string[];
+  options: Record<string, string> | string[] | Array<[string, string]>;
 }
 
 export interface HaFormFloatSchema extends HaFormBaseSchema {

src/components/ha-formfield.ts

@@ -1,11 +1,11 @@
-import { Formfield } from "@material/mwc-formfield";
-import { css, CSSResultGroup } from "lit";
+import { FormfieldBase } from "@material/mwc-formfield/mwc-formfield-base";
+import { styles } from "@material/mwc-formfield/mwc-formfield.css";
+import { css } from "lit";
 import { customElement } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 
 @customElement("ha-formfield")
-// @ts-expect-error
-export class HaFormfield extends Formfield {
+export class HaFormfield extends FormfieldBase {
   protected _labelClick() {
     const input = this.input;
     if (input) {
@@ -23,20 +23,18 @@ export class HaFormfield extends Formfield {
     }
   }
 
-  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;
-        }
-      `,
-    ];
-  }
+  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;
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/ha-hls-player.ts

@@ -43,6 +43,8 @@ class HaHLSPlayer extends LitElement {
 
   @state() private _error?: string;
 
+  @state() private _errorIsFatal = false;
+
   private _hlsPolyfillInstance?: HlsLite;
 
   private _exoPlayer = false;
@@ -53,6 +55,7 @@ class HaHLSPlayer extends LitElement {
     super.connectedCallback();
     HaHLSPlayer.streamCount += 1;
     if (this.hasUpdated) {
+      this._resetError();
       this._startHls();
     }
   }
@@ -64,16 +67,23 @@ class HaHLSPlayer extends LitElement {
   }
 
   protected render(): TemplateResult {
-    if (this._error) {
-      return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
-    }
     return html`
-      <video
-        ?autoplay=${this.autoPlay}
-        .muted=${this.muted}
-        ?playsinline=${this.playsInline}
-        ?controls=${this.controls}
-      ></video>
+      ${this._error
+        ? html`<ha-alert
+            alert-type="error"
+            class=${this._errorIsFatal ? "fatal" : "retry"}
+          >
+            ${this._error}
+          </ha-alert>`
+        : ""}
+      ${!this._errorIsFatal
+        ? html`<video
+            ?autoplay=${this.autoPlay}
+            .muted=${this.muted}
+            ?playsinline=${this.playsInline}
+            ?controls=${this.controls}
+          ></video>`
+        : ""}
     `;
   }
 
@@ -87,12 +97,11 @@ class HaHLSPlayer extends LitElement {
     }
 
     this._cleanUp();
+    this._resetError();
     this._startHls();
   }
 
   private async _startHls(): Promise<void> {
-    this._error = undefined;
-
     const masterPlaylistPromise = fetch(this.url);
 
     const Hls: typeof HlsType = (await import("hls.js/dist/hls.light.min"))
@@ -110,8 +119,8 @@ class HaHLSPlayer extends LitElement {
     }
 
     if (!hlsSupported) {
-      this._error = this.hass.localize(
-        "ui.components.media-browser.video_not_supported"
+      this._setFatalError(
+        this.hass.localize("ui.components.media-browser.video_not_supported")
       );
       return;
     }
@@ -219,9 +228,16 @@ class HaHLSPlayer extends LitElement {
     this._hlsPolyfillInstance = hls;
     hls.attachMedia(videoEl);
     hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+      this._resetError();
       hls.loadSource(url);
     });
-    hls.on(Hls.Events.ERROR, (_, data: any) => {
+    hls.on(Hls.Events.FRAG_LOADED, (_event, _data: any) => {
+      this._resetError();
+    });
+    hls.on(Hls.Events.ERROR, (_event, data: any) => {
+      // Some errors are recovered automatically by the hls player itself, and the others handled
+      // in this function require special actions to recover. Errors retried in this function
+      // are done with backoff to not cause unecessary failures.
       if (!data.fatal) {
         return;
       }
@@ -241,22 +257,22 @@ class HaHLSPlayer extends LitElement {
                 error += " (" + data.response.code + ")";
               }
             }
-            this._error = error;
-            return;
+            this._setRetryableError(error);
+            break;
           }
           case Hls.ErrorDetails.MANIFEST_LOAD_TIMEOUT:
-            this._error = "Timeout while starting stream";
-            return;
+            this._setRetryableError("Timeout while starting stream");
+            break;
           default:
-            this._error = "Unknown stream network error (" + data.details + ")";
-            return;
+            this._setRetryableError("Stream network error");
+            break;
         }
-        this._error = "Error with media stream contents (" + data.details + ")";
+        hls.startLoad();
       } else if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
-        this._error = "Error with media stream contents (" + data.details + ")";
+        this._setRetryableError("Error with media stream contents");
+        hls.recoverMediaError();
       } else {
-        this._error =
-          "Unknown error with stream (" + data.type + ", " + data.details + ")";
+        this._setFatalError("Error playing stream");
       }
     });
   }
@@ -284,6 +300,21 @@ class HaHLSPlayer extends LitElement {
     }
   }
 
+  private _resetError() {
+    this._error = undefined;
+    this._errorIsFatal = false;
+  }
+
+  private _setFatalError(errorMessage: string) {
+    this._error = errorMessage;
+    this._errorIsFatal = true;
+  }
+
+  private _setRetryableError(errorMessage: string) {
+    this._error = errorMessage;
+    this._errorIsFatal = false;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       :host,
@@ -296,10 +327,14 @@ class HaHLSPlayer extends LitElement {
         max-height: var(--video-max-height, calc(100vh - 97px));
       }
 
-      ha-alert {
+      .fatal {
         display: block;
         padding: 100px 16px;
       }
+
+      .retry {
+        display: block;
+      }
     `;
   }
 }

src/components/ha-icon-picker.ts

@@ -1,16 +1,13 @@
-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, comboBoxRenderer } from "lit-vaadin-helpers";
+import { ComboBoxLitRenderer } 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;
@@ -19,35 +16,17 @@ type IconItem = {
 let iconItems: IconItem[] = [];
 
 // eslint-disable-next-line lit/prefer-static-styles
-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>`;
+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>`;
 
 @customElement("ha-icon-picker")
 export class HaIconPicker extends LitElement {
+  @property() public hass?: HomeAssistant;
+
   @property() public value?: string;
 
   @property() public label?: string;
@@ -64,51 +43,40 @@ export class HaIconPicker extends LitElement {
 
   @state() private _opened = false;
 
-  @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement;
+  @query("ha-combo-box", true) private comboBox!: HaComboBox;
 
   protected render(): TemplateResult {
     return html`
-      <vaadin-combo-box-light
+      <ha-combo-box
+        .hass=${this.hass}
         item-value-path="icon"
         item-label-path="icon"
         .value=${this._value}
         allow-custom-value
         .filteredItems=${iconItems}
-        ${comboBoxRenderer(rowRenderer)}
+        .label=${this.label}
+        .disabled=${this.disabled}
+        .placeholder=${this.placeholder}
+        .errorMessage=${this.errorMessage}
+        .invalid=${this.invalid}
+        .renderer=${rowRenderer}
+        icon
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
         @filter-changed=${this._filterChanged}
       >
-        <paper-input
-          .label=${this.label}
-          .placeholder=${this.placeholder}
-          .disabled=${this.disabled}
-          class="input"
-          autocapitalize="none"
-          autocomplete="off"
-          autocorrect="off"
-          spellcheck="false"
-          .errorMessage=${this.errorMessage}
-          .invalid=${this.invalid}
-        >
-          ${this._value || this.placeholder
-            ? html`
-                <ha-icon .icon=${this._value || this.placeholder} slot="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>
+        ${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>
     `;
   }
 
@@ -150,6 +118,7 @@ export class HaIconPicker extends LitElement {
   }
 
   private _valueChanged(ev: PolymerChangedEvent<string>) {
+    ev.stopPropagation();
     this._setValue(ev.detail.value);
   }
 
@@ -158,7 +127,7 @@ export class HaIconPicker extends LitElement {
     fireEvent(
       this,
       "value-changed",
-      { value },
+      { value: this._value },
       {
         bubbles: false,
         composed: false,
@@ -205,17 +174,13 @@ 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-paper-dropdown-menu.ts

@@ -1,28 +0,0 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import { PolymerElement } from "@polymer/polymer";
-import { Constructor } from "../types";
-
-const paperDropdownClass = customElements.get(
-  "paper-dropdown-menu"
-) as Constructor<PolymerElement>;
-
-// patches paper drop down to properly support RTL - https://github.com/PolymerElements/paper-dropdown-menu/issues/183
-export class HaPaperDropdownClass extends paperDropdownClass {
-  public ready() {
-    super.ready();
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      if (window.getComputedStyle(this).direction === "rtl") {
-        this.style.textAlign = "right";
-      }
-    }, 100);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-paper-dropdown-menu": HaPaperDropdownClass;
-  }
-}
-
-customElements.define("ha-paper-dropdown-menu", HaPaperDropdownClass);

src/components/ha-picture-upload.ts

@@ -1,5 +1,4 @@
 import { mdiImagePlus } from "@mdi/js";
-import "@polymer/paper-input/paper-input-container";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";

src/components/ha-qr-scanner.ts

@@ -1,7 +1,6 @@
+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";
@@ -11,7 +10,8 @@ import { stopPropagation } from "../common/dom/stop_propagation";
 import { LocalizeFunc } from "../common/translations/localize";
 import "./ha-alert";
 import "./ha-button-menu";
-import "@material/mwc-button/mwc-button";
+import "./ha-textfield";
+import type { HaTextField } from "./ha-textfield";
 
 @customElement("ha-qr-scanner")
 class HaQrScanner extends LitElement {
@@ -29,7 +29,7 @@ class HaQrScanner extends LitElement {
 
   @query("#canvas-container", true) private _canvasContainer!: HTMLDivElement;
 
-  @query("mwc-textfield") private _manualInput?: TextField;
+  @query("ha-textfield") private _manualInput?: HaTextField;
 
   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">
-            <mwc-textfield
+            <ha-textfield
               .label=${this.localize("ui.components.qr-scanner.enter_qr_code")}
               @keyup=${this._manualKeyup}
               @paste=${this._manualPaste}
-            ></mwc-textfield>
+            ></ha-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 TextField).value);
+      this._qrCodeScanned((ev.target as HaTextField).value);
     }
   }
 
@@ -199,7 +199,7 @@ class HaQrScanner extends LitElement {
       display: flex;
       align-items: center;
     }
-    mwc-textfield {
+    ha-textfield {
       flex: 1;
       margin-right: 8px;
     }

src/components/ha-radio.ts

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

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

@@ -1,4 +1,4 @@
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { AddonSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
@@ -22,6 +22,12 @@ 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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,37 @@
+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-icon.ts

@@ -0,0 +1,39 @@
+import "../ha-icon-picker";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { HomeAssistant } from "../../types";
+import { IconSelector } from "../../data/selector";
+import { fireEvent } from "../../common/dom/fire_event";
+
+@customElement("ha-selector-icon")
+export class HaIconSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: IconSelector;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  protected render() {
+    return html`
+      <ha-icon-picker
+        .label=${this.label}
+        .value=${this.value}
+        @value-changed=${this._valueChanged}
+      ></ha-icon-picker>
+    `;
+  }
+
+  private _valueChanged(ev: CustomEvent) {
+    fireEvent(this, "value-changed", { value: ev.detail.value });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-icon": HaIconSelector;
+  }
+}

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

@@ -0,0 +1,264 @@
+import { mdiPlayBox, mdiPlus } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { fireEvent } from "../../common/dom/fire_event";
+import { supportsFeature } from "../../common/entity/supports-feature";
+import { getSignedPath } from "../../data/auth";
+import {
+  MediaClassBrowserSettings,
+  MediaPickedEvent,
+  SUPPORT_BROWSE_MEDIA,
+} from "../../data/media-player";
+import type { MediaSelector, MediaSelectorValue } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
+import "../ha-alert";
+import "../ha-form/ha-form";
+import type { HaFormSchema } from "../ha-form/types";
+import { showMediaBrowserDialog } from "../media-player/show-media-browser-dialog";
+
+const MANUAL_SCHEMA = [
+  { name: "media_content_id", required: false, selector: { text: {} } },
+  { name: "media_content_type", required: false, selector: { text: {} } },
+];
+
+@customElement("ha-selector-media")
+export class HaMediaSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: MediaSelector;
+
+  @property({ attribute: false }) public value?: MediaSelectorValue;
+
+  @property() public label?: string;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @state() private _thumbnailUrl?: string | null;
+
+  willUpdate(changedProps: PropertyValues<this>) {
+    if (changedProps.has("value")) {
+      const thumbnail = this.value?.metadata?.thumbnail;
+      const oldThumbnail = (changedProps.get("value") as this["value"])
+        ?.metadata?.thumbnail;
+      if (thumbnail === oldThumbnail) {
+        return;
+      }
+      if (thumbnail && thumbnail.startsWith("/")) {
+        this._thumbnailUrl = undefined;
+        // Thumbnails served by local API require authentication
+        getSignedPath(this.hass, thumbnail).then((signedPath) => {
+          this._thumbnailUrl = signedPath.path;
+        });
+      } else {
+        this._thumbnailUrl = thumbnail;
+      }
+    }
+  }
+
+  protected render() {
+    const stateObj = this.value?.entity_id
+      ? this.hass.states[this.value.entity_id]
+      : undefined;
+
+    const supportsBrowse =
+      !this.value?.entity_id ||
+      (stateObj && supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA));
+
+    return html`<ha-entity-picker
+        .hass=${this.hass}
+        .value=${this.value?.entity_id}
+        .label=${this.label ||
+        this.hass.localize("ui.components.selectors.media.pick_media_player")}
+        .disabled=${this.disabled}
+        include-domains='["media_player"]'
+        allow-custom-entity
+        @value-changed=${this._entityChanged}
+      ></ha-entity-picker>
+      ${!supportsBrowse
+        ? html`<ha-alert>
+              ${this.hass.localize(
+                "ui.components.selectors.media.browse_not_supported"
+              )}
+            </ha-alert>
+            <ha-form
+              .hass=${this.hass}
+              .data=${this.value}
+              .schema=${MANUAL_SCHEMA}
+              .computeLabel=${this._computeLabelCallback}
+            ></ha-form>`
+        : html`<ha-card
+            outlined
+            @click=${this._pickMedia}
+            class=${this.disabled || !this.value?.entity_id ? "disabled" : ""}
+          >
+            <div
+              class="thumbnail ${classMap({
+                portrait:
+                  !!this.value?.metadata?.media_class &&
+                  MediaClassBrowserSettings[
+                    this.value.metadata.children_media_class ||
+                      this.value.metadata.media_class
+                  ].thumbnail_ratio === "portrait",
+              })}"
+            >
+              ${this.value?.metadata?.thumbnail
+                ? html`
+                    <div
+                      class="${classMap({
+                        "centered-image":
+                          !!this.value.metadata.media_class &&
+                          ["app", "directory"].includes(
+                            this.value.metadata.media_class
+                          ),
+                      })}
+                        image"
+                      style=${this._thumbnailUrl
+                        ? `background-image: url(${this._thumbnailUrl});`
+                        : ""}
+                    ></div>
+                  `
+                : html`
+                    <div class="icon-holder image">
+                      <ha-svg-icon
+                        class="folder"
+                        .path=${!this.value?.media_content_id
+                          ? mdiPlus
+                          : this.value?.metadata?.media_class
+                          ? MediaClassBrowserSettings[
+                              this.value.metadata.media_class === "directory"
+                                ? this.value.metadata.children_media_class ||
+                                  this.value.metadata.media_class
+                                : this.value.metadata.media_class
+                            ].icon
+                          : mdiPlayBox}
+                      ></ha-svg-icon>
+                    </div>
+                  `}
+            </div>
+            <div class="title">
+              ${!this.value?.media_content_id
+                ? this.hass.localize("ui.components.selectors.media.pick_media")
+                : this.value.metadata?.title || this.value.media_content_id}
+            </div>
+          </ha-card>`}`;
+  }
+
+  private _computeLabelCallback = (schema: HaFormSchema): string =>
+    this.hass.localize(`ui.components.selectors.media.${schema.name}`);
+
+  private _entityChanged(ev: CustomEvent) {
+    ev.stopPropagation();
+    fireEvent(this, "value-changed", {
+      value: {
+        entity_id: ev.detail.value,
+        media_content_id: "",
+        media_content_type: "",
+      },
+    });
+  }
+
+  private _pickMedia() {
+    showMediaBrowserDialog(this, {
+      action: "pick",
+      entityId: this.value!.entity_id!,
+      navigateIds: this.value!.metadata?.navigateIds,
+      mediaPickedCallback: (pickedMedia: MediaPickedEvent) => {
+        fireEvent(this, "value-changed", {
+          value: {
+            ...this.value,
+            media_content_id: pickedMedia.item.media_content_id,
+            media_content_type: pickedMedia.item.media_content_type,
+            metadata: {
+              title: pickedMedia.item.title,
+              thumbnail: pickedMedia.item.thumbnail,
+              media_class: pickedMedia.item.media_class,
+              children_media_class: pickedMedia.item.children_media_class,
+              navigateIds: pickedMedia.navigateIds?.map((id) => ({
+                media_content_type: id.media_content_type,
+                media_content_id: id.media_content_id,
+              })),
+            },
+          },
+        });
+      },
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-entity-picker {
+        display: block;
+        margin-bottom: 16px;
+      }
+      mwc-button {
+        margin-top: 8px;
+      }
+      ha-alert {
+        display: block;
+        margin-bottom: 16px;
+      }
+      ha-card {
+        position: relative;
+        width: 200px;
+        box-sizing: border-box;
+        cursor: pointer;
+      }
+      ha-card.disabled {
+        pointer-events: none;
+        color: var(--disabled-text-color);
+      }
+      ha-card .thumbnail {
+        width: 100%;
+        position: relative;
+        box-sizing: border-box;
+        transition: padding-bottom 0.1s ease-out;
+        padding-bottom: 100%;
+      }
+      ha-card .thumbnail.portrait {
+        padding-bottom: 150%;
+      }
+      ha-card .image {
+        border-radius: 3px 3px 0 0;
+      }
+      .folder {
+        --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
+      }
+      .title {
+        font-size: 16px;
+        padding-top: 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        margin-bottom: 16px;
+        padding-left: 16px;
+        padding-right: 4px;
+        white-space: nowrap;
+      }
+      .image {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        bottom: 0;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center;
+      }
+      .centered-image {
+        margin: 0 8px;
+        background-size: contain;
+      }
+      .icon-holder {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-media": HaMediaSelector;
+  }
+}

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

@@ -1,4 +1,3 @@
-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";
@@ -6,6 +5,7 @@ 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,39 +36,36 @@ export class HaNumberSelector extends LitElement {
           >
           </ha-slider>`
         : ""}
-      <paper-input
+      <ha-textfield
+        inputMode="numeric"
         pattern="[0-9]+([\\.][0-9]+)?"
         .label=${this.selector.number.mode !== "box" ? undefined : this.label}
         .placeholder=${this.placeholder}
-        .noLabelFloat=${this.selector.number.mode !== "box"}
         class=${classMap({ single: this.selector.number.mode === "box" })}
         .min=${this.selector.number.min}
         .max=${this.selector.number.max}
         .value=${this.value}
         .step=${this.selector.number.step ?? 1}
         .disabled=${this.disabled}
+        .suffix=${this.selector.number.unit_of_measurement}
         type="number"
-        auto-validate
-        @value-changed=${this._handleInputChange}
+        autoValidate
+        ?no-spinner=${this.selector.number.mode !== "box"}
+        @input=${this._handleInputChange}
       >
-        ${this.selector.number.unit_of_measurement
-          ? html`<div slot="suffix">
-              ${this.selector.number.unit_of_measurement}
-            </div>`
-          : ""}
-      </paper-input>`;
+      </ha-textfield>`;
   }
 
   private get _value() {
-    return this.value || 0;
+    return this.value ?? 0;
   }
 
   private _handleInputChange(ev) {
     ev.stopPropagation();
     const value =
-      ev.detail.value === "" || isNaN(ev.detail.value)
+      ev.target.value === "" || isNaN(ev.target.value)
         ? undefined
-        : Number(ev.detail.value);
+        : Number(ev.target.value);
     if (this.value === value) {
       return;
     }
@@ -94,7 +91,11 @@ 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,6 +18,7 @@ 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,9 +1,11 @@
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import { SelectSelector } from "../../data/selector";
+import { stopPropagation } from "../../common/dom/stop_propagation";
+import { SelectOption, SelectSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
-import "../ha-paper-dropdown-menu";
+import "@material/mwc-select/mwc-select";
+import "@material/mwc-list/mwc-list-item";
 
 @customElement("ha-selector-select")
 export class HaSelectSelector extends LitElement {
@@ -15,49 +17,44 @@ export class HaSelectSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property({ type: Boolean }) public disabled = false;
 
   protected render() {
-    return html`<ha-paper-dropdown-menu
-      .disabled=${this.disabled}
+    return html`<mwc-select
+      fixedMenuPosition
+      naturalMenuWidth
       .label=${this.label}
+      .value=${this.value}
+      .helper=${this.helper}
+      .disabled=${this.disabled}
+      @closed=${stopPropagation}
+      @selected=${this._valueChanged}
     >
-      <paper-listbox
-        slot="dropdown-content"
-        attr-for-selected="item-value"
-        .selected=${this.value}
-        @selected-item-changed=${this._valueChanged}
-      >
-        ${this.selector.select.options.map(
-          (item: string) => html`
-            <paper-item .itemValue=${item}> ${item} </paper-item>
-          `
-        )}
-      </paper-listbox>
-    </ha-paper-dropdown-menu>`;
+      ${this.selector.select.options.map((item: string | SelectOption) => {
+        const value = typeof item === "object" ? item.value : item;
+        const label = typeof item === "object" ? item.label : item;
+
+        return html`<mwc-list-item .value=${value}>${label}</mwc-list-item>`;
+      })}
+    </mwc-select>`;
   }
 
   private _valueChanged(ev) {
-    if (this.disabled || !ev.detail.value) {
+    ev.stopPropagation();
+    if (this.disabled || !ev.target.value) {
       return;
     }
     fireEvent(this, "value-changed", {
-      value: ev.detail.value.itemValue,
+      value: ev.target.value,
     });
   }
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-paper-dropdown-menu {
+      mwc-select {
         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,8 +1,3 @@
-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,10 +1,12 @@
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-input/paper-textarea";
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
+import { mdiEye, mdiEyeOff } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property, state } 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 {
@@ -20,27 +22,50 @@ 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`<paper-textarea
+      return html`<ha-textarea
         .label=${this.label}
         .placeholder=${this.placeholder}
-        .value=${this.value}
+        .value=${this.value || ""}
         .disabled=${this.disabled}
-        @value-changed=${this._handleChange}
+        @input=${this._handleChange}
         autocapitalize="none"
         autocomplete="off"
         spellcheck="false"
-      ></paper-textarea>`;
+        .required=${this.required}
+        autogrow
+      ></ha-textarea>`;
     }
-    return html`<paper-input
-      required
-      .value=${this.value}
-      .placeholder=${this.placeholder}
-      .disabled=${this.disabled}
-      @value-changed=${this._handleChange}
-      .label=${this.label}
-    ></paper-input>`;
+    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;
   }
 
   private _handleChange(ev) {
@@ -50,6 +75,27 @@ 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,7 +22,7 @@ export class HaTimeSelector extends LitElement {
         .value=${this.value}
         .locale=${this.hass.locale}
         .disabled=${this.disabled}
-        hide-label
+        .label=${this.label}
         enable-second
       ></ha-time-input>
     `;

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

@@ -6,8 +6,10 @@ 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";
@@ -15,6 +17,8 @@ import "./ha-selector-select";
 import "./ha-selector-target";
 import "./ha-selector-text";
 import "./ha-selector-time";
+import "./ha-selector-icon";
+import "./ha-selector-media";
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
@@ -26,16 +30,16 @@ export class HaSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property() public helper?: string;
+
   @property() public placeholder?: any;
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public required = true;
+
   public focus() {
-    const input = this.shadowRoot!.getElementById("selector");
-    if (!input) {
-      return;
-    }
-    (input as HTMLElement).focus();
+    this.shadowRoot?.getElementById("selector")?.focus();
   }
 
   private get _type() {
@@ -51,6 +55,8 @@ export class HaSelector extends LitElement {
         label: this.label,
         placeholder: this.placeholder,
         disabled: this.disabled,
+        required: this.required,
+        helper: this.helper,
         id: "selector",
       })}
     `;

src/components/ha-service-control.ts

@@ -67,7 +67,7 @@ export class HaServiceControl extends LitElement {
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
 
-  protected updated(changedProperties: PropertyValues<this>) {
+  protected willUpdate(changedProperties: PropertyValues<this>) {
     if (!changedProperties.has("value")) {
       return;
     }
@@ -286,6 +286,7 @@ export class HaServiceControl extends LitElement {
         : ""}
       ${shouldRenderServiceDataYaml
         ? html`<ha-yaml-editor
+            .hass=${this.hass}
             .label=${this.hass.localize(
               "ui.components.service-control.service_data"
             )}
@@ -488,9 +489,6 @@ export class HaServiceControl extends LitElement {
         margin: var(--service-control-padding, 0 16px);
         padding: 16px 0;
       }
-      :host(:not([narrow])) ha-settings-row paper-input {
-        width: 60%;
-      }
       :host(:not([narrow])) ha-settings-row ha-selector {
         width: 60%;
       }

src/components/ha-service-picker.ts

@@ -1,4 +1,3 @@
-import { mdiCheck } from "@mdi/js";
 import { html, LitElement } from "lit";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 import { property, state } from "lit/decorators";
@@ -11,39 +10,12 @@ import "./ha-combo-box";
 
 const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
   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>`;
+) => html`<mwc-list-item twoline>
+  <span>${item.name}</span>
+  <span slot="secondary"
+    >${item.name === item.service ? "" : item.service}</span
+  >
+</mwc-list-item>`;
 
 class HaServicePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;

src/components/ha-slider.js

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

src/components/ha-switch.ts

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

src/components/ha-textarea.ts

@@ -0,0 +1,60 @@
+import { TextAreaBase } from "@material/mwc-textarea/mwc-textarea-base";
+import { styles as textfieldStyles } from "@material/mwc-textfield/mwc-textfield.css";
+import { styles as textareaStyles } from "@material/mwc-textarea/mwc-textarea.css";
+import { css, PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
+
+@customElement("ha-textarea")
+export class HaTextArea extends TextAreaBase {
+  @property({ type: Boolean, reflect: true }) autogrow = false;
+
+  updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (this.autogrow && changedProperties.has("value")) {
+      this.mdcRoot.dataset.value = this.value + '=\u200B"'; // add a zero-width space to correctly wrap
+    }
+  }
+
+  static override styles = [
+    textfieldStyles,
+    textareaStyles,
+    css`
+      :host([autogrow]) {
+        max-height: 200px;
+      }
+      :host([autogrow]) .mdc-text-field {
+        position: relative;
+        min-height: 74px;
+        min-width: 178px;
+      }
+      :host([autogrow]) .mdc-text-field:after {
+        content: attr(data-value);
+        margin-top: 23px;
+        margin-bottom: 9px;
+        line-height: 1.5rem;
+        min-height: 42px;
+        padding: 0px 32px 0 16px;
+        letter-spacing: var(
+          --mdc-typography-subtitle1-letter-spacing,
+          0.009375em
+        );
+        visibility: hidden;
+        white-space: pre-wrap;
+      }
+      :host([autogrow]) .mdc-text-field__input {
+        position: absolute;
+        height: calc(100% - 32px);
+      }
+      :host([autogrow]) .mdc-text-field.mdc-text-field--no-label:after {
+        margin-top: 16px;
+        margin-bottom: 16px;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-textarea": HaTextArea;
+  }
+}

src/components/ha-textfield.ts

@@ -1,10 +1,32 @@
-import { TextField } from "@material/mwc-textfield";
-import { TemplateResult, html } from "lit";
-import { customElement } from "lit/decorators";
+import { TextFieldBase } from "@material/mwc-textfield/mwc-textfield-base";
+import { styles } from "@material/mwc-textfield/mwc-textfield.css";
+import { TemplateResult, html, PropertyValues, css } from "lit";
+import { customElement, property } from "lit/decorators";
 
 @customElement("ha-textfield")
-export class HaTextField extends TextField {
-  override renderIcon(_icon: string, isTrailingIcon = false): TemplateResult {
+export class HaTextField extends TextFieldBase {
+  @property({ type: Boolean }) public invalid?: boolean;
+
+  @property({ attribute: "error-message" }) public errorMessage?: string;
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (
+      (changedProperties.has("invalid") &&
+        (this.invalid || changedProperties.get("invalid") !== undefined)) ||
+      changedProperties.has("errorMessage")
+    ) {
+      this.setCustomValidity(
+        this.invalid ? this.errorMessage || "Invalid" : ""
+      );
+      this.reportValidity();
+    }
+  }
+
+  protected override renderIcon(
+    _icon: string,
+    isTrailingIcon = false
+  ): TemplateResult {
     const type = isTrailingIcon ? "trailing" : "leading";
 
     return html`
@@ -16,6 +38,46 @@ export class HaTextField extends TextField {
       </span>
     `;
   }
+
+  static override styles = [
+    styles,
+    css`
+      .mdc-text-field__input {
+        width: var(--ha-textfield-input-width, 100%);
+      }
+      .mdc-text-field:not(.mdc-text-field--with-leading-icon) {
+        padding: var(--text-field-padding, 0px 16px);
+      }
+      .mdc-text-field__affix--suffix {
+        padding-left: var(--text-field-suffix-padding-left, 12px);
+        padding-right: var(--text-field-suffix-padding-right, 0px);
+      }
+
+      input {
+        text-align: var(--text-field-text-align);
+      }
+
+      /* Chrome, Safari, Edge, Opera */
+      :host([no-spinner]) input::-webkit-outer-spin-button,
+      :host([no-spinner]) input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      /* Firefox */
+      :host([no-spinner]) input[type="number"] {
+        -moz-appearance: textfield;
+      }
+
+      .mdc-text-field__ripple {
+        overflow: hidden;
+      }
+
+      .mdc-text-field {
+        overflow: var(--text-field-overflow);
+      }
+    `,
+  ];
 }
 
 declare global {

src/components/ha-time-input.ts

@@ -2,12 +2,13 @@ import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { useAmPm } from "../common/datetime/use_am_pm";
 import { fireEvent } from "../common/dom/fire_event";
-import "./paper-time-input";
+import "./ha-base-time-input";
 import { FrontendLocaleData } from "../data/translation";
+import type { TimeChangedEvent } from "./ha-base-time-input";
 
 @customElement("ha-time-input")
 export class HaTimeInput extends LitElement {
-  @property() public locale!: FrontendLocaleData;
+  @property({ attribute: false }) public locale!: FrontendLocaleData;
 
   @property() public value?: string;
 
@@ -15,9 +16,6 @@ export class HaTimeInput extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean, attribute: "hide-label" }) public hideLabel =
-    false;
-
   @property({ type: Boolean, attribute: "enable-second" })
   public enableSecond = false;
 
@@ -35,40 +33,44 @@ export class HaTimeInput extends LitElement {
     }
 
     return html`
-      <paper-time-input
+      <ha-base-time-input
         .label=${this.label}
-        .hour=${hours}
-        .min=${parts[1]}
-        .sec=${parts[2]}
+        .hours=${Number(hours)}
+        .minutes=${Number(parts[1])}
+        .seconds=${Number(parts[2])}
         .format=${useAMPM ? 12 : 24}
         .amPm=${useAMPM && (numberHours >= 12 ? "PM" : "AM")}
         .disabled=${this.disabled}
-        @change=${this._timeChanged}
-        @am-pm-changed=${this._timeChanged}
-        .hideLabel=${this.hideLabel}
+        @value-changed=${this._timeChanged}
         .enableSecond=${this.enableSecond}
-      ></paper-time-input>
+      ></ha-base-time-input>
     `;
   }
 
-  private _timeChanged(ev) {
-    let value = ev.target.value;
+  private _timeChanged(ev: CustomEvent<{ value: TimeChangedEvent }>) {
+    ev.stopPropagation();
+    const eventValue = ev.detail.value;
+
     const useAMPM = useAmPm(this.locale);
-    let hours = Number(ev.target.hour || 0);
-    if (value && useAMPM) {
-      if (ev.target.amPm === "PM" && hours < 12) {
+    let hours = eventValue.hours || 0;
+    if (eventValue && useAMPM) {
+      if (eventValue.amPm === "PM" && hours < 12) {
         hours += 12;
       }
-      if (ev.target.amPm === "AM" && hours === 12) {
+      if (eventValue.amPm === "AM" && hours === 12) {
         hours = 0;
       }
-      value = `${hours.toString().padStart(2, "0")}:${ev.target.min || "00"}:${
-        ev.target.sec || "00"
-      }`;
     }
+    const value = `${hours.toString().padStart(2, "0")}:${
+      eventValue.minutes ? eventValue.minutes.toString().padStart(2, "0") : "00"
+    }:${
+      eventValue.seconds ? eventValue.seconds.toString().padStart(2, "0") : "00"
+    }`;
+
     if (value === this.value) {
       return;
     }
+
     this.value = value;
     fireEvent(this, "change");
     fireEvent(this, "value-changed", {

src/components/ha-yaml-editor.ts

@@ -2,6 +2,7 @@ import { DEFAULT_SCHEMA, dump, load, Schema } from "js-yaml";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import type { HomeAssistant } from "../types";
 import "./ha-code-editor";
 
 const isEmpty = (obj: Record<string, unknown>): boolean => {
@@ -18,6 +19,8 @@ const isEmpty = (obj: Record<string, unknown>): boolean => {
 
 @customElement("ha-yaml-editor")
 export class HaYamlEditor extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public value?: any;
 
   @property({ attribute: false }) public yamlSchema: Schema = DEFAULT_SCHEMA;
@@ -56,8 +59,10 @@ export class HaYamlEditor extends LitElement {
     return html`
       ${this.label ? html`<p>${this.label}</p>` : ""}
       <ha-code-editor
+        .hass=${this.hass}
         .value=${this._yaml}
         mode="yaml"
+        autocomplete-entities
         .error=${this.isValid === false}
         @value-changed=${this._onChange}
         dir="ltr"

src/components/media-player/dialog-media-player-browse.ts

@@ -28,10 +28,10 @@ class DialogMediaPlayerBrowse extends LitElement {
 
   public showDialog(params: MediaPlayerBrowseDialogParams): void {
     this._params = params;
-    this._navigateIds = [
+    this._navigateIds = params.navigateIds || [
       {
-        media_content_id: this._params.mediaContentId,
-        media_content_type: this._params.mediaContentType,
+        media_content_id: undefined,
+        media_content_type: undefined,
       },
     ];
   }

src/components/media-player/ha-browse-media-tts.ts

@@ -0,0 +1,280 @@
+import "@material/mwc-select";
+import "@material/mwc-list/mwc-list-item";
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../common/dom/fire_event";
+import { fetchCloudStatus, updateCloudPref } from "../../data/cloud";
+import {
+  CloudTTSInfo,
+  getCloudTTSInfo,
+  getCloudTtsLanguages,
+  getCloudTtsSupportedGenders,
+} from "../../data/cloud/tts";
+import {
+  MediaPlayerBrowseAction,
+  MediaPlayerItem,
+} from "../../data/media-player";
+import { HomeAssistant } from "../../types";
+import "../ha-textarea";
+import { buttonLinkStyle } from "../../resources/styles";
+import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
+import { LocalStorage } from "../../common/decorators/local-storage";
+import { stopPropagation } from "../../common/dom/stop_propagation";
+
+export interface TtsMediaPickedEvent {
+  item: MediaPlayerItem;
+}
+
+declare global {
+  interface HASSDomEvents {
+    "tts-picked": TtsMediaPickedEvent;
+  }
+}
+
+@customElement("ha-browse-media-tts")
+class BrowseMediaTTS extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public item;
+
+  @property() public action!: MediaPlayerBrowseAction;
+
+  @state() private _cloudDefaultOptions?: [string, string];
+
+  @state() private _cloudOptions?: [string, string];
+
+  @state() private _cloudTTSInfo?: CloudTTSInfo;
+
+  @LocalStorage("cloudTtsTryMessage", true, false) private _message!: string;
+
+  protected render() {
+    return html`<ha-card>
+      <div class="card-content">
+        <ha-textarea
+          autogrow
+          .label=${this.hass.localize(
+            "ui.components.media-browser.tts.message"
+          )}
+          .value=${this._message ||
+          this.hass.localize(
+            "ui.components.media-browser.tts.example_message",
+            {
+              name: this.hass.user?.name || "",
+            }
+          )}
+        >
+        </ha-textarea>
+        ${this._cloudDefaultOptions ? this._renderCloudOptions() : ""}
+      </div>
+      <div class="card-actions">
+        ${this._cloudDefaultOptions &&
+        (this._cloudDefaultOptions![0] !== this._cloudOptions![0] ||
+          this._cloudDefaultOptions![1] !== this._cloudOptions![1])
+          ? html`
+              <button class="link" @click=${this._storeDefaults}>
+                ${this.hass.localize(
+                  "ui.components.media-browser.tts.set_as_default"
+                )}
+              </button>
+            `
+          : html`<span></span>`}
+
+        <mwc-button @click=${this._ttsClicked}>
+          ${this.hass.localize(
+            `ui.components.media-browser.tts.action_${this.action}`
+          )}
+        </mwc-button>
+      </div>
+    </ha-card> `;
+  }
+
+  private _renderCloudOptions() {
+    if (!this._cloudTTSInfo || !this._cloudOptions) {
+      return "";
+    }
+    const languages = this.getLanguages(this._cloudTTSInfo);
+    const selectedVoice = this._cloudOptions;
+    const genders = this.getSupportedGenders(
+      selectedVoice[0],
+      this._cloudTTSInfo,
+      this.hass.localize
+    );
+
+    return html`
+      <div class="cloud-options">
+        <mwc-select
+          fixedMenuPosition
+          naturalMenuWidth
+          .label=${this.hass.localize(
+            "ui.components.media-browser.tts.language"
+          )}
+          .value=${selectedVoice[0]}
+          @selected=${this._handleLanguageChange}
+          @closed=${stopPropagation}
+        >
+          ${languages.map(
+            ([key, label]) =>
+              html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
+          )}
+        </mwc-select>
+
+        <mwc-select
+          fixedMenuPosition
+          naturalMenuWidth
+          .label=${this.hass.localize("ui.components.media-browser.tts.gender")}
+          .value=${selectedVoice[1]}
+          @selected=${this._handleGenderChange}
+          @closed=${stopPropagation}
+        >
+          ${genders.map(
+            ([key, label]) =>
+              html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
+          )}
+        </mwc-select>
+      </div>
+    `;
+  }
+
+  protected override willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
+
+    if (changedProps.has("item")) {
+      if (this.item.media_content_id) {
+        const params = new URLSearchParams(
+          this.item.media_content_id.split("?")[1]
+        );
+        const message = params.get("message");
+        const language = params.get("language");
+        const gender = params.get("gender");
+        if (message) {
+          this._message = message;
+        }
+        if (language && gender) {
+          this._cloudOptions = [language, gender];
+        }
+      }
+
+      if (this.isCloudItem && !this._cloudTTSInfo) {
+        getCloudTTSInfo(this.hass).then((info) => {
+          this._cloudTTSInfo = info;
+        });
+        fetchCloudStatus(this.hass).then((status) => {
+          if (status.logged_in) {
+            this._cloudDefaultOptions = status.prefs.tts_default_voice;
+            if (!this._cloudOptions) {
+              this._cloudOptions = { ...this._cloudDefaultOptions };
+            }
+          }
+        });
+      }
+    }
+
+    if (changedProps.has("message")) {
+      return;
+    }
+
+    // Re-rendering can reset message because textarea content is newer than local storage.
+    // But we don't want to write every keystroke to local storage.
+    // So instead we just do it when we're going to render.
+    const message = this.shadowRoot!.querySelector("ha-textarea")?.value;
+    if (message !== undefined && message !== this._message) {
+      this._message = message;
+    }
+  }
+
+  async _handleLanguageChange(ev) {
+    if (ev.target.value === this._cloudOptions![0]) {
+      return;
+    }
+    this._cloudOptions = [ev.target.value, this._cloudOptions![1]];
+  }
+
+  async _handleGenderChange(ev) {
+    if (ev.target.value === this._cloudOptions![1]) {
+      return;
+    }
+    this._cloudOptions = [this._cloudOptions![0], ev.target.value];
+  }
+
+  private getLanguages = memoizeOne(getCloudTtsLanguages);
+
+  private getSupportedGenders = memoizeOne(getCloudTtsSupportedGenders);
+
+  private get isCloudItem(): boolean {
+    return this.item.media_content_id.startsWith("media-source://tts/cloud");
+  }
+
+  private async _ttsClicked(): Promise<void> {
+    const message = this.shadowRoot!.querySelector("ha-textarea")!.value;
+    this._message = message;
+    const item = { ...this.item };
+    const query = new URLSearchParams();
+    query.append("message", message);
+    if (this._cloudOptions) {
+      query.append("language", this._cloudOptions[0]);
+      query.append("gender", this._cloudOptions[1]);
+    }
+    item.media_content_id = `${
+      item.media_content_id.split("?")[0]
+    }?${query.toString()}`;
+    item.can_play = true;
+    item.title = message;
+    fireEvent(this, "tts-picked", { item });
+  }
+
+  private async _storeDefaults() {
+    const oldDefaults = this._cloudDefaultOptions!;
+    this._cloudDefaultOptions = [...this._cloudOptions!];
+    try {
+      await updateCloudPref(this.hass, {
+        tts_default_voice: this._cloudDefaultOptions,
+      });
+    } catch (err: any) {
+      this._cloudDefaultOptions = oldDefaults;
+      showAlertDialog(this, {
+        text: this.hass.localize(
+          "ui.components.media-browser.tts.faild_to_store_defaults",
+          { error: err.message || err }
+        ),
+      });
+    }
+  }
+
+  static override styles = [
+    buttonLinkStyle,
+    css`
+      :host {
+        margin: 16px auto;
+        padding: 0 8px;
+        display: flex;
+        flex-direction: column;
+        max-width: 400px;
+      }
+      .cloud-options {
+        margin-top: 16px;
+        display: flex;
+        justify-content: space-between;
+      }
+      .cloud-options mwc-select {
+        width: 48%;
+      }
+      ha-textarea {
+        width: 100%;
+      }
+      button.link {
+        color: var(--primary-color);
+      }
+      .card-actions {
+        display: flex;
+        justify-content: space-between;
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-browse-media-tts": BrowseMediaTTS;
+  }
+}

src/components/media-player/ha-media-player-browse.ts

@@ -1,9 +1,7 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiPlay, mdiPlus } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
+import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
@@ -50,11 +48,21 @@ import "../ha-icon-button";
 import "../ha-svg-icon";
 import "../ha-fab";
 import { browseLocalMediaPlayer } from "../../data/media_source";
+import { isTTSMediaSource } from "../../data/tts";
+import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
+import "./ha-browse-media-tts";
 
 declare global {
   interface HASSDomEvents {
     "media-picked": MediaPickedEvent;
-    "media-browsed": { ids: MediaPlayerItemId[]; current?: MediaPlayerItem };
+    "media-browsed": {
+      // Items of the new browse stack
+      ids: MediaPlayerItemId[];
+      // Current fetched item for this browse stack
+      current?: MediaPlayerItem;
+      // If the new stack should replace the old stack
+      replace?: boolean;
+    };
   }
 }
 
@@ -115,6 +123,19 @@ export class HaMediaPlayerBrowse extends LitElement {
     }
   }
 
+  public async refresh() {
+    const currentId = this.navigateIds[this.navigateIds.length - 1];
+    try {
+      this._currentItem = await this._fetchData(
+        this.entityId,
+        currentId.media_content_id,
+        currentId.media_content_type
+      );
+    } catch (err) {
+      this._setError(err);
+    }
+  }
+
   public play(): void {
     if (this._currentItem?.can_play) {
       this._runAction(this._currentItem);
@@ -234,160 +255,161 @@ export class HaMediaPlayerBrowse extends LitElement {
                       ${this._renderError(this._error)}
                     </div>
                   `
-                : currentItem.children?.length
-                ? childrenMediaClass.layout === "grid"
-                  ? html`
-                      <div
-                        class="children ${classMap({
-                          portrait:
-                            childrenMediaClass.thumbnail_ratio === "portrait",
-                        })}"
-                      >
-                        ${currentItem.children.map(
-                          (child) => html`
-                            <div
-                              class="child"
-                              .item=${child}
-                              @click=${this._childClicked}
-                            >
-                              <ha-card outlined>
-                                <div class="thumbnail">
-                                  ${child.thumbnail
-                                    ? html`
-                                        <div
-                                          class="${[
-                                            "app",
-                                            "directory",
-                                          ].includes(child.media_class)
-                                            ? "centered-image"
-                                            : ""} image lazythumbnail"
-                                          data-src=${child.thumbnail}
-                                        ></div>
-                                      `
-                                    : html`
-                                        <div class="icon-holder image">
-                                          <ha-svg-icon
-                                            class="folder"
-                                            .path=${MediaClassBrowserSettings[
-                                              child.media_class === "directory"
-                                                ? child.children_media_class ||
-                                                  child.media_class
-                                                : child.media_class
-                                            ].icon}
-                                          ></ha-svg-icon>
-                                        </div>
-                                      `}
-                                  ${child.can_play
-                                    ? html`
-                                        <ha-icon-button
-                                          class="play ${classMap({
-                                            can_expand: child.can_expand,
-                                          })}"
-                                          .item=${child}
-                                          .label=${this.hass.localize(
-                                            `ui.components.media-browser.${this.action}-media`
-                                          )}
-                                          .path=${this.action === "play"
-                                            ? mdiPlay
-                                            : mdiPlus}
-                                          @click=${this._actionClicked}
-                                        ></ha-icon-button>
-                                      `
-                                    : ""}
-                                </div>
-                                <div class="title">
-                                  ${child.title}
-                                  <paper-tooltip
-                                    fitToVisibleBounds
-                                    position="top"
-                                    offset="4"
-                                    >${child.title}</paper-tooltip
-                                  >
-                                </div>
-                              </ha-card>
-                            </div>
-                          `
-                        )}
-                      </div>
-                    `
-                  : html`
-                      <mwc-list>
-                        ${currentItem.children.map(
-                          (child) => html`
-                            <mwc-list-item
-                              @click=${this._childClicked}
-                              .item=${child}
-                              .graphic=${mediaClass.show_list_images
-                                ? "medium"
-                                : "avatar"}
-                              dir=${computeRTLDirection(this.hass)}
-                            >
-                              <div
-                                class=${classMap({
-                                  graphic: true,
-                                  lazythumbnail:
-                                    mediaClass.show_list_images === true,
-                                })}
-                                data-src=${ifDefined(
-                                  mediaClass.show_list_images && child.thumbnail
-                                    ? child.thumbnail
-                                    : undefined
-                                )}
-                                slot="graphic"
-                              >
-                                <ha-icon-button
-                                  class="play ${classMap({
-                                    show:
-                                      !mediaClass.show_list_images ||
-                                      !child.thumbnail,
-                                  })}"
-                                  .item=${child}
-                                  .label=${this.hass.localize(
-                                    `ui.components.media-browser.${this.action}-media`
-                                  )}
-                                  .path=${this.action === "play"
-                                    ? mdiPlay
-                                    : mdiPlus}
-                                  @click=${this._actionClicked}
-                                ></ha-icon-button>
-                              </div>
-                              <span class="title">${child.title}</span>
-                            </mwc-list-item>
-                            <li divider role="separator"></li>
-                          `
-                        )}
-                      </mwc-list>
-                    `
-                : html`
+                : isTTSMediaSource(currentItem.media_content_id)
+                ? html`
+                    <ha-browse-media-tts
+                      .item=${currentItem}
+                      .hass=${this.hass}
+                      .action=${this.action}
+                      @tts-picked=${this._ttsPicked}
+                    ></ha-browse-media-tts>
+                  `
+                : !currentItem.children?.length
+                ? html`
                     <div class="container no-items">
-                      ${this.hass.localize(
-                        "ui.components.media-browser.no_items"
-                      )}
-                      <br />
                       ${currentItem.media_content_id ===
                       "media-source://media_source/local/."
-                        ? html`<br />${this.hass.localize(
-                              "ui.components.media-browser.learn_adding_local_media",
-                              "documentation",
-                              html`<a
-                                href=${documentationUrl(
-                                  this.hass,
-                                  "/more-info/local-media/add-media"
+                        ? html`
+                            <div class="highlight-add-button">
+                              <span>
+                                <ha-svg-icon
+                                  .path=${mdiArrowUpRight}
+                                ></ha-svg-icon>
+                              </span>
+                              <span>
+                                ${this.hass.localize(
+                                  "ui.components.media-browser.file_management.highlight_button"
                                 )}
-                                target="_blank"
-                                rel="noreferrer"
-                                >${this.hass.localize(
-                                  "ui.components.media-browser.documentation"
-                                )}</a
-                              >`
-                            )}
-                            <br />
-                            ${this.hass.localize(
-                              "ui.components.media-browser.local_media_files"
-                            )}`
-                        : ""}
+                              </span>
+                            </div>
+                          `
+                        : this.hass.localize(
+                            "ui.components.media-browser.no_items"
+                          )}
                     </div>
                   `
+                : childrenMediaClass.layout === "grid"
+                ? html`
+                    <div
+                      class="children ${classMap({
+                        portrait:
+                          childrenMediaClass.thumbnail_ratio === "portrait",
+                      })}"
+                    >
+                      ${currentItem.children.map(
+                        (child) => html`
+                          <div
+                            class="child"
+                            .item=${child}
+                            @click=${this._childClicked}
+                          >
+                            <ha-card outlined>
+                              <div class="thumbnail">
+                                ${child.thumbnail
+                                  ? html`
+                                      <div
+                                        class="${["app", "directory"].includes(
+                                          child.media_class
+                                        )
+                                          ? "centered-image"
+                                          : ""} image lazythumbnail"
+                                        data-src=${child.thumbnail}
+                                      ></div>
+                                    `
+                                  : html`
+                                      <div class="icon-holder image">
+                                        <ha-svg-icon
+                                          class="folder"
+                                          .path=${MediaClassBrowserSettings[
+                                            child.media_class === "directory"
+                                              ? child.children_media_class ||
+                                                child.media_class
+                                              : child.media_class
+                                          ].icon}
+                                        ></ha-svg-icon>
+                                      </div>
+                                    `}
+                                ${child.can_play
+                                  ? html`
+                                      <ha-icon-button
+                                        class="play ${classMap({
+                                          can_expand: child.can_expand,
+                                        })}"
+                                        .item=${child}
+                                        .label=${this.hass.localize(
+                                          `ui.components.media-browser.${this.action}-media`
+                                        )}
+                                        .path=${this.action === "play"
+                                          ? mdiPlay
+                                          : mdiPlus}
+                                        @click=${this._actionClicked}
+                                      ></ha-icon-button>
+                                    `
+                                  : ""}
+                              </div>
+                              <div class="title">
+                                ${child.title}
+                                <paper-tooltip
+                                  fitToVisibleBounds
+                                  position="top"
+                                  offset="4"
+                                  >${child.title}</paper-tooltip
+                                >
+                              </div>
+                            </ha-card>
+                          </div>
+                        `
+                      )}
+                    </div>
+                  `
+                : html`
+                    <mwc-list>
+                      ${currentItem.children.map(
+                        (child) => html`
+                          <mwc-list-item
+                            @click=${this._childClicked}
+                            .item=${child}
+                            .graphic=${mediaClass.show_list_images
+                              ? "medium"
+                              : "avatar"}
+                            dir=${computeRTLDirection(this.hass)}
+                          >
+                            <div
+                              class=${classMap({
+                                graphic: true,
+                                lazythumbnail:
+                                  mediaClass.show_list_images === true,
+                              })}
+                              data-src=${ifDefined(
+                                mediaClass.show_list_images && child.thumbnail
+                                  ? child.thumbnail
+                                  : undefined
+                              )}
+                              slot="graphic"
+                            >
+                              <ha-icon-button
+                                class="play ${classMap({
+                                  show:
+                                    !mediaClass.show_list_images ||
+                                    !child.thumbnail,
+                                })}"
+                                .item=${child}
+                                .label=${this.hass.localize(
+                                  `ui.components.media-browser.${this.action}-media`
+                                )}
+                                .path=${this.action === "play"
+                                  ? mdiPlay
+                                  : mdiPlus}
+                                @click=${this._actionClicked}
+                              ></ha-icon-button>
+                            </div>
+                            <span class="title">${child.title}</span>
+                          </mwc-list-item>
+                          <li divider role="separator"></li>
+                        `
+                      )}
+                    </mwc-list>
+                  `
             }
           </div>
         </div>
@@ -413,8 +435,8 @@ export class HaMediaPlayerBrowse extends LitElement {
 
     if (changedProps.has("entityId")) {
       this._setError(undefined);
-    }
-    if (!changedProps.has("navigateIds")) {
+    } else if (!changedProps.has("navigateIds")) {
+      // Neither entity ID or navigateIDs changed, nothing to fetch
       return;
     }
 
@@ -423,6 +445,7 @@ export class HaMediaPlayerBrowse extends LitElement {
     const oldNavigateIds = changedProps.get("navigateIds") as
       | this["navigateIds"]
       | undefined;
+    const navigateIds = this.navigateIds;
 
     // We're navigating. Reset the shizzle.
     this._content?.scrollTo(0, 0);
@@ -431,11 +454,9 @@ export class HaMediaPlayerBrowse extends LitElement {
     const oldParentItem = this._parentItem;
     this._currentItem = undefined;
     this._parentItem = undefined;
-    const currentId = this.navigateIds[this.navigateIds.length - 1];
+    const currentId = navigateIds[navigateIds.length - 1];
     const parentId =
-      this.navigateIds.length > 1
-        ? this.navigateIds[this.navigateIds.length - 2]
-        : undefined;
+      navigateIds.length > 1 ? navigateIds[navigateIds.length - 2] : undefined;
     let currentProm: Promise<MediaPlayerItem> | undefined;
     let parentProm: Promise<MediaPlayerItem> | undefined;
 
@@ -444,9 +465,9 @@ export class HaMediaPlayerBrowse extends LitElement {
       if (
         // Check if we navigated to a child
         oldNavigateIds &&
-        this.navigateIds.length > oldNavigateIds.length &&
+        navigateIds.length === oldNavigateIds.length + 1 &&
         oldNavigateIds.every((oldVal, idx) => {
-          const curVal = this.navigateIds[idx];
+          const curVal = navigateIds[idx];
           return (
             curVal.media_content_id === oldVal.media_content_id &&
             curVal.media_content_type === oldVal.media_content_type
@@ -457,8 +478,8 @@ export class HaMediaPlayerBrowse extends LitElement {
       } else if (
         // Check if we navigated to a parent
         oldNavigateIds &&
-        this.navigateIds.length < oldNavigateIds.length &&
-        this.navigateIds.every((curVal, idx) => {
+        navigateIds.length === oldNavigateIds.length - 1 &&
+        navigateIds.every((curVal, idx) => {
           const oldVal = oldNavigateIds[idx];
           return (
             curVal.media_content_id === oldVal.media_content_id &&
@@ -481,11 +502,33 @@ export class HaMediaPlayerBrowse extends LitElement {
       (item) => {
         this._currentItem = item;
         fireEvent(this, "media-browsed", {
-          ids: this.navigateIds,
+          ids: navigateIds,
           current: item,
         });
       },
-      (err) => this._setError(err)
+      (err) => {
+        // When we change entity ID, we will first try to see if the new entity is
+        // able to resolve the new path. If that results in an error, browse the root.
+        const isNewEntityWithSamePath =
+          oldNavigateIds &&
+          changedProps.has("entityId") &&
+          navigateIds.length === oldNavigateIds.length &&
+          oldNavigateIds.every(
+            (oldItem, idx) =>
+              navigateIds[idx].media_content_id === oldItem.media_content_id &&
+              navigateIds[idx].media_content_type === oldItem.media_content_type
+          );
+        if (isNewEntityWithSamePath) {
+          fireEvent(this, "media-browsed", {
+            ids: [
+              { media_content_id: undefined, media_content_type: undefined },
+            ],
+            replace: true,
+          });
+        } else {
+          this._setError(err);
+        }
+      }
     );
     // Fetch parent
     if (!parentProm && parentId !== undefined) {
@@ -521,7 +564,17 @@ export class HaMediaPlayerBrowse extends LitElement {
   }
 
   private _runAction(item: MediaPlayerItem): void {
-    fireEvent(this, "media-picked", { item });
+    fireEvent(this, "media-picked", { item, navigateIds: this.navigateIds });
+  }
+
+  private _ttsPicked(ev: CustomEvent<TtsMediaPickedEvent>): void {
+    ev.stopPropagation();
+    const navigateIds = this.navigateIds.slice(0, -1);
+    navigateIds.push(ev.detail.item);
+    fireEvent(this, "media-picked", {
+      ...ev.detail,
+      navigateIds,
+    });
   }
 
   private async _childClicked(ev: MouseEvent): Promise<void> {
@@ -724,6 +777,18 @@ export class HaMediaPlayerBrowse extends LitElement {
           padding-left: 32px;
         }
 
+        .highlight-add-button {
+          display: flex;
+          flex-direction: row-reverse;
+          margin-right: 48px;
+        }
+
+        .highlight-add-button ha-svg-icon {
+          position: relative;
+          top: -0.5em;
+          margin-left: 8px;
+        }
+
         .content {
           overflow-y: auto;
           box-sizing: border-box;

src/components/media-player/show-media-browser-dialog.ts

@@ -3,13 +3,13 @@ import {
   MediaPickedEvent,
   MediaPlayerBrowseAction,
 } from "../../data/media-player";
+import { MediaPlayerItemId } from "./ha-media-player-browse";
 
 export interface MediaPlayerBrowseDialogParams {
   action: MediaPlayerBrowseAction;
   entityId: string;
   mediaPickedCallback: (pickedMedia: MediaPickedEvent) => void;
-  mediaContentId?: string;
-  mediaContentType?: string;
+  navigateIds?: MediaPlayerItemId[];
 }
 
 export const showMediaBrowserDialog = (

src/components/paper-time-input.js

@@ -1,497 +0,0 @@
-/**
-Adapted from paper-time-input from
-https://github.com/ryanburns23/paper-time-input
-MIT Licensed. Copyright (c) 2017 Ryan Burns
-
-`<paper-time-input>` Polymer element to accept a time with paper-input & paper-dropdown-menu
-Inspired by the time input in google forms
-
-### Styling
-
-`<paper-time-input>` provides the following custom properties and mixins for styling:
-
-Custom property | Description | Default
-----------------|-------------|----------
-`--paper-time-input-dropdown-ripple-color` | dropdown ripple color | `--primary-color`
-`--paper-time-input-cotnainer` | Mixin applied to the inputs | `{}`
-`--paper-time-dropdown-input-cotnainer` | Mixin applied to the dropdown input | `{}`
-*/
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-
-export class PaperTimeInput extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          @apply --paper-font-common-base;
-        }
-
-        paper-input {
-          width: 30px;
-          text-align: center;
-          --paper-input-container-input: {
-            /* Damn you firefox
-             * Needed to hide spin num in firefox
-             * http://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box
-             */
-            -moz-appearance: textfield;
-            @apply --paper-time-input-cotnainer;
-          }
-          --paper-input-container-input-webkit-spinner: {
-            -webkit-appearance: none;
-            margin: 0;
-            display: none;
-          }
-          --paper-input-container-shared-input-style_-_-webkit-appearance: textfield;
-        }
-
-        paper-dropdown-menu {
-          width: 55px;
-          padding: 0;
-          /* Force ripple to use the whole container */
-          --paper-dropdown-menu-ripple: {
-            color: var(
-              --paper-time-input-dropdown-ripple-color,
-              var(--primary-color)
-            );
-          }
-          --paper-input-container-input: {
-            @apply --paper-font-button;
-            text-align: center;
-            padding-left: 5px;
-            @apply --paper-time-dropdown-input-cotnainer;
-          }
-          --paper-input-container-underline: {
-            border-color: transparent;
-          }
-          --paper-input-container-underline-focus: {
-            border-color: transparent;
-          }
-        }
-
-        paper-item {
-          cursor: pointer;
-          text-align: center;
-          font-size: 14px;
-        }
-
-        paper-listbox {
-          padding: 0;
-        }
-
-        label {
-          @apply --paper-font-caption;
-          color: var(
-            --paper-input-container-color,
-            var(--secondary-text-color)
-          );
-        }
-
-        .time-input-wrap {
-          @apply --layout-horizontal;
-          @apply --layout-no-wrap;
-          justify-content: var(--paper-time-input-justify-content, normal);
-        }
-
-        [hidden] {
-          display: none !important;
-        }
-
-        #millisec {
-          width: 38px;
-        }
-
-        .no-suffix {
-          margin-left: -2px;
-        }
-      </style>
-
-      <label hidden$="[[hideLabel]]">[[label]]</label>
-      <div class="time-input-wrap">
-        <!-- Hour Input -->
-        <paper-input
-          id="hour"
-          type="number"
-          inputmode="numeric"
-          value="{{hour}}"
-          label="[[hourLabel]]"
-          on-change="_shouldFormatHour"
-          on-focus="_onFocus"
-          required
-          prevent-invalid-input
-          auto-validate="[[autoValidate]]"
-          maxlength="2"
-          max="[[_computeHourMax(format)]]"
-          min="0"
-          no-label-float$="[[!floatInputLabels]]"
-          always-float-label$="[[alwaysFloatInputLabels]]"
-          disabled="[[disabled]]"
-        >
-          <span suffix slot="suffix">:</span>
-        </paper-input>
-
-        <!-- Min Input -->
-        <paper-input
-          class$="[[_computeClassNames(enableSecond)]]"
-          id="min"
-          type="number"
-          inputmode="numeric"
-          value="{{min}}"
-          label="[[minLabel]]"
-          on-change="_formatMin"
-          on-focus="_onFocus"
-          required
-          auto-validate="[[autoValidate]]"
-          prevent-invalid-input
-          maxlength="2"
-          max="59"
-          min="0"
-          no-label-float$="[[!floatInputLabels]]"
-          always-float-label$="[[alwaysFloatInputLabels]]"
-          disabled="[[disabled]]"
-        >
-          <span hidden$="[[!enableSecond]]" suffix slot="suffix">:</span>
-        </paper-input>
-
-        <!-- Sec Input -->
-        <paper-input
-          class$="[[_computeClassNames(enableMillisecond)]]"
-          id="sec"
-          type="number"
-          inputmode="numeric"
-          value="{{sec}}"
-          label="[[secLabel]]"
-          on-change="_formatSec"
-          on-focus="_onFocus"
-          required
-          auto-validate="[[autoValidate]]"
-          prevent-invalid-input
-          maxlength="2"
-          max="59"
-          min="0"
-          no-label-float$="[[!floatInputLabels]]"
-          always-float-label$="[[alwaysFloatInputLabels]]"
-          disabled="[[disabled]]"
-          hidden$="[[!enableSecond]]"
-        >
-          <span hidden$="[[!enableMillisecond]]" suffix slot="suffix">:</span>
-        </paper-input>
-
-        <!-- Millisec Input -->
-        <paper-input
-          id="millisec"
-          type="number"
-          value="{{millisec}}"
-          label="[[millisecLabel]]"
-          on-change="_formatMillisec"
-          on-focus="_onFocus"
-          required
-          auto-validate="[[autoValidate]]"
-          prevent-invalid-input
-          maxlength="3"
-          max="999"
-          min="0"
-          no-label-float$="[[!floatInputLabels]]"
-          always-float-label$="[[alwaysFloatInputLabels]]"
-          disabled="[[disabled]]"
-          hidden$="[[!enableMillisecond]]"
-        >
-        </paper-input>
-
-        <!-- Dropdown Menu -->
-        <paper-dropdown-menu
-          id="dropdown"
-          required=""
-          hidden$="[[_equal(format, 24)]]"
-          no-label-float=""
-          disabled="[[disabled]]"
-        >
-          <paper-listbox
-            attr-for-selected="name"
-            selected="{{amPm}}"
-            slot="dropdown-content"
-          >
-            <paper-item name="AM">AM</paper-item>
-            <paper-item name="PM">PM</paper-item>
-          </paper-listbox>
-        </paper-dropdown-menu>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      /**
-       * Label for the input
-       */
-      label: {
-        type: String,
-        value: "Time",
-      },
-      /**
-       * auto validate time inputs
-       */
-      autoValidate: {
-        type: Boolean,
-        value: true,
-      },
-      /**
-       * hides the label
-       */
-      hideLabel: {
-        type: Boolean,
-        value: false,
-      },
-      /**
-       * float the input labels
-       */
-      floatInputLabels: {
-        type: Boolean,
-        value: false,
-      },
-      /**
-       * always float the input labels
-       */
-      alwaysFloatInputLabels: {
-        type: Boolean,
-        value: false,
-      },
-      /**
-       * 12 or 24 hr format
-       */
-      format: {
-        type: Number,
-        value: 12,
-      },
-      /**
-       * disables the inputs
-       */
-      disabled: {
-        type: Boolean,
-        value: false,
-      },
-      /**
-       * hour
-       */
-      hour: {
-        type: String,
-        notify: true,
-      },
-      /**
-       * minute
-       */
-      min: {
-        type: String,
-        notify: true,
-      },
-      /**
-       * second
-       */
-      sec: {
-        type: String,
-        notify: true,
-      },
-      /**
-       * milli second
-       */
-      millisec: {
-        type: String,
-        notify: true,
-      },
-      /**
-       * Label for the hour input
-       */
-      hourLabel: {
-        type: String,
-        value: "",
-      },
-      /**
-       * Label for the min input
-       */
-      minLabel: {
-        type: String,
-        value: "",
-      },
-      /**
-       * Label for the sec input
-       */
-      secLabel: {
-        type: String,
-        value: "",
-      },
-      /**
-       * Label for the milli sec input
-       */
-      millisecLabel: {
-        type: String,
-        value: "",
-      },
-      /**
-       * show the sec field
-       */
-      enableSecond: {
-        type: Boolean,
-        value: false,
-      },
-      /**
-       * show the milli sec field
-       */
-      enableMillisecond: {
-        type: Boolean,
-        value: false,
-      },
-      /**
-       * limit hours input
-       */
-      noHoursLimit: {
-        type: Boolean,
-        value: false,
-      },
-      /**
-       * AM or PM
-       */
-      amPm: {
-        type: String,
-        notify: true,
-        value: "AM",
-      },
-      /**
-       * Formatted time string
-       */
-      value: {
-        type: String,
-        notify: true,
-        readOnly: true,
-        computed: "_computeTime(min, hour, sec, millisec, amPm)",
-      },
-    };
-  }
-
-  /**
-   * Validate the inputs
-   * @return {boolean}
-   */
-  validate() {
-    let valid = true;
-    // Validate hour & min fields
-    if (!this.$.hour.validate() || !this.$.min.validate()) {
-      valid = false;
-    }
-    // Validate second field
-    if (this.enableSecond && !this.$.sec.validate()) {
-      valid = false;
-    }
-    // Validate milli second field
-    if (this.enableMillisecond && !this.$.millisec.validate()) {
-      valid = false;
-    }
-    // Validate AM PM if 12 hour time
-    if (this.format === 12 && !this.$.dropdown.validate()) {
-      valid = false;
-    }
-    return valid;
-  }
-
-  /**
-   * Create time string
-   */
-  _computeTime(min, hour, sec, millisec, amPm) {
-    let str;
-    if (
-      hour ||
-      min ||
-      (sec && this.enableSecond) ||
-      (millisec && this.enableMillisecond)
-    ) {
-      hour = hour || "00";
-      min = min || "00";
-      sec = sec || "00";
-      millisec = millisec || "000";
-      str = hour + ":" + min;
-      // add sec field
-      if (this.enableSecond && sec) {
-        str = str + ":" + sec;
-      }
-      // add milli sec field
-      if (this.enableMillisecond && millisec) {
-        str = str + ":" + millisec;
-      }
-      // No ampm on 24 hr time
-      if (this.format === 12) {
-        str = str + " " + amPm;
-      }
-    }
-
-    return str;
-  }
-
-  _onFocus(ev) {
-    ev.target.inputElement.inputElement.select();
-  }
-
-  /**
-   * Format milli sec
-   */
-  _formatMillisec() {
-    if (this.millisec.toString().length === 1) {
-      this.millisec = this.millisec.toString().padStart(3, "0");
-    }
-  }
-
-  /**
-   * Format sec
-   */
-  _formatSec() {
-    if (this.sec.toString().length === 1) {
-      this.sec = this.sec.toString().padStart(2, "0");
-    }
-  }
-
-  /**
-   * Format min
-   */
-  _formatMin() {
-    if (this.min.toString().length === 1) {
-      this.min = this.min.toString().padStart(2, "0");
-    }
-  }
-
-  /**
-   * Format hour
-   */
-  _shouldFormatHour() {
-    if (this.format === 24 && this.hour.toString().length === 1) {
-      this.hour = this.hour.toString().padStart(2, "0");
-    }
-  }
-
-  /**
-   * 24 hour format has a max hr of 23
-   */
-  _computeHourMax(format) {
-    if (this.noHoursLimit) {
-      return null;
-    }
-    if (format === 12) {
-      return format;
-    }
-    return 23;
-  }
-
-  _equal(n1, n2) {
-    return n1 === n2;
-  }
-
-  _computeClassNames(hasSuffix) {
-    return hasSuffix ? " " : "no-suffix";
-  }
-}
-
-customElements.define("paper-time-input", PaperTimeInput);

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

@@ -1,8 +1,3 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -11,6 +6,8 @@ import { stringCompare } from "../../common/string/compare";
 import { fetchUsers, User } from "../../data/user";
 import { HomeAssistant } from "../../types";
 import "./ha-user-badge";
+import "@material/mwc-select/mwc-select";
+import "@material/mwc-list/mwc-list-item";
 
 class HaUserPicker extends LitElement {
   public hass?: HomeAssistant;
@@ -37,34 +34,31 @@ class HaUserPicker extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-dropdown-menu-light
+      <mwc-select
         .label=${this.label}
         .disabled=${this.disabled}
+        .value=${this.value}
+        @selected=${this._userChanged}
       >
-        <paper-listbox
-          slot="dropdown-content"
-          .selected=${this.value}
-          attr-for-selected="data-user-id"
-          @iron-select=${this._userChanged}
-        >
-          <paper-icon-item data-user-id="">
-            ${this.noUserLabel ||
-            this.hass?.localize("ui.components.user-picker.no_user")}
-          </paper-icon-item>
-          ${this._sortedUsers(this.users).map(
-            (user) => html`
-              <paper-icon-item data-user-id=${user.id}>
-                <ha-user-badge
-                  .hass=${this.hass}
-                  .user=${user}
-                  slot="item-icon"
-                ></ha-user-badge>
-                ${user.name}
-              </paper-icon-item>
-            `
-          )}
-        </paper-listbox>
-      </paper-dropdown-menu-light>
+        ${this.users?.length === 0
+          ? html`<mwc-list-item value="">
+              ${this.noUserLabel ||
+              this.hass?.localize("ui.components.user-picker.no_user")}
+            </mwc-list-item>`
+          : ""}
+        ${this._sortedUsers(this.users).map(
+          (user) => html`
+            <mwc-list-item graphic="avatar" .value=${user.id}>
+              <ha-user-badge
+                .hass=${this.hass}
+                .user=${user}
+                slot="graphic"
+              ></ha-user-badge>
+              ${user.name}
+            </mwc-list-item>
+          `
+        )}
+      </mwc-select>
     `;
   }
 
@@ -78,10 +72,10 @@ class HaUserPicker extends LitElement {
   }
 
   private _userChanged(ev) {
-    const newValue = ev.detail.item.dataset.userId;
+    const newValue = ev.target.value;
 
     if (newValue !== this.value) {
-      this.value = ev.detail.value;
+      this.value = newValue;
       setTimeout(() => {
         fireEvent(this, "value-changed", { value: newValue });
         fireEvent(this, "change");
@@ -94,15 +88,9 @@ class HaUserPicker extends LitElement {
       :host {
         display: inline-block;
       }
-      paper-dropdown-menu-light {
+      mwc-list {
         display: block;
       }
-      paper-listbox {
-        min-width: 200px;
-      }
-      paper-icon-item {
-        cursor: pointer;
-      }
     `;
   }
 }

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

@@ -75,7 +75,7 @@ class HaUsersPickerLight extends LitElement {
         )
       )}
       <ha-user-picker
-        .noUserLabel=${this.pickUserLabel ||
+        .label=${this.pickUserLabel ||
         this.hass!.localize("ui.components.user-picker.add_user")}
         .hass=${this.hass}
         .users=${notSelectedUsers}