Merge pull request #12045 from home-assistant/hot-fix-03142022

Co-authored-by: Paulus Schoutsen <paulus@home-assistant.io>

.yarnrc.yml

@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.0.2.cjs
+yarnPath: .yarn/releases/yarn-3.2.0.cjs

README.md

@@ -2,7 +2,7 @@
 
 This is the repository for the official [Home Assistant](https://home-assistant.io) frontend.
 
-[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/home-assistant-polymer/master/docs/screenshot.png)](https://demo.home-assistant.io/)
+[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/frontend/master/docs/screenshot.png)](https://demo.home-assistant.io/)
 
 - [View demo of Home Assistant](https://demo.home-assistant.io/)
 - [More information about Home Assistant](https://home-assistant.io)

build-scripts/gulp/gallery.js

@@ -3,7 +3,7 @@
 const gulp = require("gulp");
 const fs = require("fs");
 const path = require("path");
-const marked = require("marked");
+const { marked } = require("marked");
 const glob = require("glob");
 const yaml = require("js-yaml");
 

build-scripts/gulp/translations.js

@@ -7,7 +7,7 @@ const source = require("vinyl-source-stream");
 const vinylBuffer = require("vinyl-buffer");
 const gulp = require("gulp");
 const fs = require("fs");
-const foreach = require("gulp-foreach");
+const flatmap = require("gulp-flatmap");
 const merge = require("gulp-merge-json");
 const rename = require("gulp-rename");
 const transform = require("gulp-json-transform");
@@ -183,7 +183,7 @@ gulp.task("build-merged-translations", () =>
     })
     .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
-      foreach((stream, file) => {
+      flatmap((stream, file) => {
         // For each language generate a merged json file. It begins with the master
         // translation as a failsafe for untranslated strings, and merges all parent
         // tags into one file for each specific subtag

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

@@ -1,5 +1,5 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
@@ -20,6 +20,8 @@ class HcLovelace extends LitElement {
 
   @property() public urlPath: string | null = null;
 
+  @query("hui-view") private _huiView?: HTMLElement;
+
   protected render(): TemplateResult {
     const index = this._viewIndex;
     if (index === undefined) {
@@ -78,12 +80,12 @@ class HcLovelace extends LitElement {
           this.lovelaceConfig.background;
 
         if (configBackground) {
-          (this.shadowRoot!.querySelector(
+          this._huiView!.style.setProperty(
-            "hui-view"
-          ) as HTMLElement)!.style.setProperty(
             "--lovelace-background",
             configBackground
           );
+        } else {
+          this._huiView!.style.removeProperty("--lovelace-background");
         }
       }
     }
@@ -116,6 +118,9 @@ class HcLovelace extends LitElement {
       :host > * {
         flex: 1;
       }
+      hui-view {
+        background: var(--lovelace-background, var(--primary-background-color));
+      }
     `;
   }
 }

gallery/src/components/demo-cards.ts

@@ -78,6 +78,9 @@ class DemoCards extends LitElement {
     ha-formfield {
       margin-right: 16px;
     }
+    #container {
+      background-color: var(--primary-background-color);
+    }
   `;
 }
 

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

@@ -38,6 +38,7 @@ const SCHEMAS: {
       select: "Select",
       icon: "Icon",
       media: "Media",
+      location: "Location",
     },
     schema: [
       { name: "addon", selector: { addon: {} } },
@@ -75,6 +76,10 @@ const SCHEMAS: {
           media: {},
         },
       },
+      {
+        name: "location",
+        selector: { location: { radius: true, icon: "mdi:home" } },
+      },
     ],
   },
   {

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

@@ -168,6 +168,11 @@ const SCHEMAS: {
       },
       icon: { name: "Icon", selector: { icon: {} } },
       media: { name: "Media", selector: { media: {} } },
+      location: { name: "Location", selector: { location: {} } },
+      location_radius: {
+        name: "Location with radius",
+        selector: { location: { radius: true, icon: "mdi:home" } },
+      },
     },
   },
 ];
@@ -279,7 +284,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
           can_play: true,
           can_expand: false,
           children_media_class: null,
-          thumbnail: null,
+          thumbnail: "https://brands.home-assistant.io/_/image/logo.png",
         },
         {
           title: "movie.mp4",

gallery/src/pages/misc/integration-card.ts

@@ -29,6 +29,7 @@ const createConfigEntry = (
   source: "zeroconf",
   state: "loaded",
   supports_options: false,
+  supports_remove_device: false,
   supports_unload: true,
   disabled_by: null,
   pref_disable_new_entities: false,

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

@@ -14,7 +14,7 @@ import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
-import "../../../src/common/search/search-input";
+import "../../../src/components/search-input";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-icon-button";
@@ -110,8 +110,6 @@ class HassioAddonStore extends LitElement {
               <div class="search">
                 <search-input
                   .hass=${this.hass}
-                  no-label-float
-                  no-underline
                   .filter=${this._filter}
                   @value-changed=${this._filterChanged}
                 ></search-input>

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@material/mwc-select";
 import "@material/mwc-list/mwc-list-item";
 import {
   css,
@@ -14,6 +13,7 @@ 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";
+import "../../../../src/components/ha-select";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
@@ -57,7 +57,7 @@ class HassioAddonAudio extends LitElement {
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
           ${this._inputDevices &&
-          html`<mwc-select
+          html`<ha-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.input"
             )}
@@ -74,9 +74,9 @@ class HassioAddonAudio extends LitElement {
                 </mwc-list-item>
               `
             )}
-          </mwc-select>`}
+          </ha-select>`}
           ${this._outputDevices &&
-          html`<mwc-select
+          html`<ha-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.output"
             )}
@@ -93,7 +93,7 @@ class HassioAddonAudio extends LitElement {
                 >
               `
             )}
-          </mwc-select>`}
+          </ha-select>`}
         </div>
         <div class="card-actions">
           <ha-progress-button @click=${this._saveSettings}>
@@ -119,10 +119,10 @@ class HassioAddonAudio extends LitElement {
         .card-actions {
           text-align: right;
         }
-        mwc-select {
+        ha-select {
           width: 100%;
         }
-        mwc-select:last-child {
+        ha-select:last-child {
           margin-top: 8px;
         }
       `,

hassio/src/components/hassio-upload-backup.ts

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

hassio/src/components/supervisor-backup-content.ts

@@ -1,7 +1,7 @@
 import { mdiFolder, mdiHomeAssistant, mdiPuzzle } from "@mdi/js";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { formatDate } from "../../../src/common/datetime/format_date";
 import { formatDateTime } from "../../../src/common/datetime/format_date_time";
@@ -92,6 +92,8 @@ export class SupervisorBackupContent extends LitElement {
 
   @property() public confirmBackupPassword = "";
 
+  @query("paper-input, ha-radio, ha-checkbox", true) private _focusTarget;
+
   public willUpdate(changedProps) {
     super.willUpdate(changedProps);
     if (!this.hasUpdated) {
@@ -109,6 +111,10 @@ export class SupervisorBackupContent extends LitElement {
     }
   }
 
+  public override focus() {
+    this._focusTarget?.focus();
+  }
+
   private _localize = (string: string) =>
     this.supervisor?.localize(`backup.${string}`) ||
     this.localize!(`ui.panel.page-onboarding.restore.${string}`);
@@ -169,24 +175,23 @@ export class SupervisorBackupContent extends LitElement {
         : ""}
       ${this.backupType === "partial"
         ? html`<div class="partial-picker">
-            ${this.backup && this.backup.homeassistant
+            <ha-formfield
-              ? html`
+              .label=${html`<supervisor-formfield-label
-                  <ha-formfield
+                label="Home Assistant"
-                    .label=${html`<supervisor-formfield-label
+                .iconPath=${mdiHomeAssistant}
-                      label="Home Assistant"
+                .version=${this.backup
-                      .iconPath=${mdiHomeAssistant}
+                  ? this.backup.homeassistant
-                      .version=${this.backup.homeassistant}
+                  : this.hass.config.version}
-                    >
+              >
-                    </supervisor-formfield-label>`}
+              </supervisor-formfield-label>`}
-                  >
+            >
-                    <ha-checkbox
+              <ha-checkbox
-                      .checked=${this.homeAssistant}
+                .checked=${this.homeAssistant}
-                      @click=${this.toggleHomeAssistant}
+                @click=${this.toggleHomeAssistant}
-                    >
+              >
-                    </ha-checkbox>
+              </ha-checkbox>
-                  </ha-formfield>
+            </ha-formfield>
-                `
+
-              : ""}
             ${foldersSection?.templates.length
               ? html`
                   <ha-formfield

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

@@ -64,6 +64,7 @@ export class DialogHassioBackupUpload
               .path=${mdiClose}
               slot="actionItems"
               dialogAction="cancel"
+              dialogInitialFocus
             ></ha-icon-button>
           </ha-header-bar>
         </div>

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

@@ -92,6 +92,7 @@ class HassioBackupDialog
               .backup=${this._backup}
               .onboarding=${this._dialogParams.onboarding || false}
               .localize=${this._dialogParams.localize}
+              dialogInitialFocus
             >
             </supervisor-backup-content>`}
         ${this._error

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

@@ -61,6 +61,7 @@ class HassioCreateBackupDialog extends LitElement {
           : html`<supervisor-backup-content
               .hass=${this.hass}
               .supervisor=${this._dialogParams.supervisor}
+              dialogInitialFocus
             >
             </supervisor-backup-content>`}
         ${this._error

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

@@ -1,11 +1,11 @@
 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";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-markdown";
+import "../../../../src/components/ha-select";
 import {
   extractApiErrorMessage,
   ignoreSupervisorError,
@@ -89,11 +89,12 @@ class HassioDatadiskDialog extends LitElement {
                     )}
                     <br /><br />
 
-                    <mwc-select
+                    <ha-select
                       .label=${this.dialogParams.supervisor.localize(
                         "dialog.datadisk_move.select_device"
                       )}
                       @selected=${this._select_device}
+                      dialogInitialFocus
                     >
                       ${this.devices.map(
                         (device) =>
@@ -101,7 +102,7 @@ class HassioDatadiskDialog extends LitElement {
                             >${device}</mwc-list-item
                           >`
                       )}
-                    </mwc-select>
+                    </ha-select>
                   `
                 : this.devices === undefined
                 ? this.dialogParams.supervisor.localize(
@@ -111,7 +112,11 @@ class HassioDatadiskDialog extends LitElement {
                     "dialog.datadisk_move.no_devices"
                   )}
 
-              <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+              <mwc-button
+                slot="secondaryAction"
+                @click=${this.closeDialog}
+                dialogInitialFocus
+              >
                 ${this.dialogParams.supervisor.localize(
                   "dialog.datadisk_move.cancel"
                 )}
@@ -156,7 +161,7 @@ class HassioDatadiskDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        mwc-select {
+        ha-select {
           width: 100%;
         }
         ha-circular-progress {

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

@@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 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/search-input";
 import { stringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
@@ -80,8 +80,6 @@ class HassioHardwareDialog extends LitElement {
           ></ha-icon-button>
           <search-input
             .hass=${this.hass}
-            autofocus
-            no-label-float
             .filter=${this._filter}
             @value-changed=${this._handleSearchChange}
             .label=${this._dialogParams.supervisor.localize(

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

@@ -37,7 +37,10 @@ class HassioMarkdownDialog extends LitElement {
         @closed=${this.closeDialog}
         .heading=${createCloseHeading(this.hass, this.title)}
       >
-        <ha-markdown .content=${this.content || ""}></ha-markdown>
+        <ha-markdown
+          .content=${this.content || ""}
+          dialogInitialFocus
+        ></ha-markdown>
       </ha-dialog>
     `;
   }

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

@@ -119,6 +119,7 @@ export class DialogHassioNetwork
                     html`<mwc-tab
                       .id=${device.interface}
                       .label=${device.interface}
+                      dialogInitialFocus
                     >
                     </mwc-tab>`
                 )}
@@ -315,6 +316,7 @@ export class DialogHassioNetwork
               value="auto"
               name="${version}method"
               .checked=${this._interface![version]?.method === "auto"}
+              dialogInitialFocus
             >
             </ha-radio>
           </ha-formfield>

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

@@ -80,6 +80,7 @@ class HassioRegistriesDialog extends LitElement {
                 .schema=${SCHEMA}
                 @value-changed=${this._valueChanged}
                 .computeLabel=${this._computeLabel}
+                dialogInitialFocus
               ></ha-form>
               <div class="action">
                 <mwc-button
@@ -124,7 +125,7 @@ class HassioRegistriesDialog extends LitElement {
                     </ha-alert>
                   `}
               <div class="action">
-                <mwc-button @click=${this._addRegistry}>
+                <mwc-button @click=${this._addRegistry} dialogInitialFocus>
                   ${this.supervisor.localize(
                     "dialog.registries.add_new_registry"
                   )}

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

@@ -106,6 +106,9 @@ class HassioRepositoriesDialog extends LitElement {
                     </paper-item-body>
                     <div class="delete">
                       <ha-icon-button
+                        .label=${this._dialogParams!.supervisor.localize(
+                          "dialog.repositories.remove"
+                        )}
                         .disabled=${usedRepositories.includes(repo.slug)}
                         .slug=${repo.slug}
                         .path=${usedRepositories.includes(repo.slug)
@@ -139,6 +142,7 @@ class HassioRepositoriesDialog extends LitElement {
                 "dialog.repositories.add"
               )}
               @keydown=${this._handleKeyAdd}
+              dialogInitialFocus
             ></paper-input>
             <mwc-button @click=${this._addRepository}>
               ${this._processing

hassio/src/hassio-main.ts

@@ -121,7 +121,8 @@ export class HassioMain extends SupervisorBaseElement {
       this.parentElement,
       this.hass.themes,
       themeName,
-      themeSettings
+      themeSettings,
+      true
     );
   }
 }

hassio/src/system/hassio-supervisor-log.ts

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-alert";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-select";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
@@ -70,7 +71,7 @@ class HassioSupervisorLog extends LitElement {
           : ""}
         ${this.hass.userData?.showAdvanced
           ? html`
-              <mwc-select
+              <ha-select
                 .label=${this.supervisor.localize("system.log.log_provider")}
                 @selected=${this._setLogProvider}
                 .value=${this._selectedLogProvider}
@@ -82,7 +83,7 @@ class HassioSupervisorLog extends LitElement {
                     </mwc-list-item>
                   `
                 )}
-              </mwc-select>
+              </ha-select>
             `
           : ""}
 
@@ -145,7 +146,7 @@ class HassioSupervisorLog extends LitElement {
         pre {
           white-space: pre-wrap;
         }
-        mwc-select {
+        ha-select {
           width: 100%;
           margin-bottom: 4px;
         }

package.json

@@ -1,8 +1,8 @@
 {
-  "description": "A frontend for Home Assistant using the Polymer framework",
+  "description": "A frontend for Home Assistant",
   "repository": {
     "type": "git",
-    "url": "https://github.com/home-assistant/home-assistant-polymer"
+    "url": "https://github.com/home-assistant/frontend"
   },
   "name": "home-assistant-frontend",
   "version": "1.0.0",
@@ -46,6 +46,7 @@
     "@fullcalendar/daygrid": "5.9.0",
     "@fullcalendar/interaction": "5.9.0",
     "@fullcalendar/list": "5.9.0",
+    "@lit-labs/motion": "^1.0.2",
     "@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",
@@ -95,6 +96,7 @@
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
     "@vue/web-component-wrapper": "^1.2.0",
+    "@webcomponents/scoped-custom-element-registry": "^0.0.5",
     "@webcomponents/webcomponentsjs": "^2.2.10",
     "app-datepicker": "^5.0.1",
     "chart.js": "^3.3.2",
@@ -115,7 +117,7 @@
     "leaflet-draw": "^1.0.4",
     "lit": "^2.1.2",
     "lit-vaadin-helpers": "^0.3.0",
-    "marked": "^3.0.2",
+    "marked": "^4.0.12",
     "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "^0.3.2",
@@ -135,12 +137,12 @@
     "vue": "^2.6.12",
     "vue2-daterange-picker": "^0.5.1",
     "web-animations-js": "^2.3.2",
-    "workbox-cacheable-response": "^6.1.5",
+    "workbox-cacheable-response": "^6.4.2",
-    "workbox-core": "^6.1.5",
+    "workbox-core": "^6.4.2",
-    "workbox-expiration": "^6.1.5",
+    "workbox-expiration": "^6.4.2",
-    "workbox-precaching": "^6.1.5",
+    "workbox-precaching": "^6.4.2",
-    "workbox-routing": "^6.1.5",
+    "workbox-routing": "^6.4.2",
-    "workbox-strategies": "^6.1.5",
+    "workbox-strategies": "^6.4.2",
     "xss": "^1.0.9"
   },
   "devDependencies": {
@@ -169,7 +171,7 @@
     "@types/js-yaml": "^4",
     "@types/leaflet": "^1",
     "@types/leaflet-draw": "^1",
-    "@types/marked": "^2",
+    "@types/marked": "^4",
     "@types/mocha": "^8",
     "@types/qrcode": "^1.4.2",
     "@types/sortablejs": "^1",
@@ -196,7 +198,7 @@
     "fs-extra": "^7.0.1",
     "glob": "^7.2.0",
     "gulp": "^4.0.2",
-    "gulp-foreach": "^0.1.0",
+    "gulp-flatmap": "^1.0.2",
     "gulp-json-transform": "^0.4.6",
     "gulp-merge-json": "^1.3.1",
     "gulp-rename": "^2.0.0",
@@ -233,7 +235,7 @@
     "webpack-dev-server": "^4.3.0",
     "webpack-manifest-plugin": "^4.0.2",
     "webpackbar": "^5.0.0-3",
-    "workbox-build": "^6.1.5"
+    "workbox-build": "^6.4.2"
   },
   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
   "resolutions": {
@@ -253,5 +255,6 @@
   "prettier": {
     "trailingComma": "es5",
     "arrowParens": "always"
-  }
+  },
+  "packageManager": "yarn@3.2.0"
 }

public/__init__.py

@@ -2,6 +2,6 @@
 from pathlib import Path
 
 
-def where():
+def where() -> Path:
     """Return path to the frontend."""
     return Path(__file__).parent

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220220.0
+version      = 20220301.2
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0
@@ -19,3 +19,8 @@ python_requires = >= 3.4.0
 [options.packages.find]
 include =
     hass_frontend*
+
+[mypy]
+python_version = 3.4
+show_error_codes = True
+strict = True

src/auth/ha-authorize.ts

@@ -101,13 +101,19 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     this._fetchAuthProviders();
 
     if (matchMedia("(prefers-color-scheme: dark)").matches) {
-      applyThemesOnElement(document.documentElement, {
+      applyThemesOnElement(
-        default_theme: "default",
+        document.documentElement,
-        default_dark_theme: null,
+        {
-        themes: {},
+          default_theme: "default",
-        darkMode: true,
+          default_dark_theme: null,
-        theme: "default",
+          themes: {},
-      });
+          darkMode: true,
+          theme: "default",
+        },
+        undefined,
+        undefined,
+        true
+      );
     }
 
     if (!this.redirectUri) {

src/common/datetime/create_duration_data.ts

@@ -3,9 +3,9 @@ import type { ForDict } from "../../data/automation";
 
 export const createDurationData = (
   duration: string | number | ForDict | undefined
-): HaDurationData => {
+): HaDurationData | undefined => {
   if (duration === undefined) {
-    return {};
+    return undefined;
   }
   if (typeof duration !== "object") {
     if (typeof duration === "string" || isNaN(duration)) {

src/common/dom/apply_themes_on_element.ts

@@ -31,11 +31,12 @@ export const applyThemesOnElement = (
   element,
   themes: HomeAssistant["themes"],
   selectedTheme?: string,
-  themeSettings?: Partial<HomeAssistant["selectedTheme"]>
+  themeSettings?: Partial<HomeAssistant["selectedTheme"]>,
+  main?: boolean
 ) => {
-  // If there is no explicitly desired theme provided, we automatically
+  // If there is no explicitly desired theme provided, and the element is the main element we automatically
   // use the active one from `themes`.
-  const themeToApply = selectedTheme || themes.theme;
+  const themeToApply = selectedTheme || (main ? themes.theme : undefined);
 
   // If there is no explicitly desired dark mode provided, we automatically
   // use the active one from `themes`.
@@ -47,7 +48,7 @@ export const applyThemesOnElement = (
   let cacheKey = themeToApply;
   let themeRules: Partial<ThemeVars> = {};
 
-  if (darkMode) {
+  if (themeToApply && darkMode) {
     cacheKey = `${cacheKey}__dark`;
     themeRules = { ...darkStyles };
   }

src/common/entity/cover_icon.ts

@@ -120,6 +120,7 @@ export const computeOpenIcon = (stateObj: HassEntity): string => {
     case "awning":
     case "door":
     case "gate":
+    case "curtain":
       return mdiArrowExpandHorizontal;
     default:
       return mdiArrowUp;
@@ -131,6 +132,7 @@ export const computeCloseIcon = (stateObj: HassEntity): string => {
     case "awning":
     case "door":
     case "gate":
+    case "curtain":
       return mdiArrowCollapseHorizontal;
     default:
       return mdiArrowDown;

src/common/util/debounce.ts

@@ -11,7 +11,7 @@ export const debounce = <T extends any[]>(
   immediate = false
 ) => {
   let timeout: number | undefined;
-  return (...args: T): void => {
+  const debouncedFunc = (...args: T): void => {
     const later = () => {
       timeout = undefined;
       if (!immediate) {
@@ -25,4 +25,8 @@ export const debounce = <T extends any[]>(
       func(...args);
     }
   };
+  debouncedFunc.cancel = () => {
+    clearTimeout(timeout);
+  };
+  return debouncedFunc;
 };

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

@@ -21,7 +21,7 @@ import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../common/search/search-input";
+import "../search-input";
 import { debounce } from "../../common/util/debounce";
 import { nextRender } from "../../common/util/render-status";
 import { haStyleScrollbar } from "../../resources/styles";

src/components/date-range-picker.ts

@@ -115,6 +115,9 @@ class DateRangePickerElement extends WrappedElement {
             color: var(--primary-text-color);
             min-width: initial !important;
           }
+          .daterangepicker:after {
+            display: none;
+          }
           .daterangepicker:after {
             border-bottom: 6px solid var(--card-background-color);
           }

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

@@ -1,5 +1,4 @@
 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";
@@ -8,6 +7,7 @@ import {
   deviceAutomationsEqual,
 } from "../../data/device_automation";
 import { HomeAssistant } from "../../types";
+import "../ha-select";
 
 const NO_AUTOMATION_KEY = "NO_AUTOMATION";
 const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
@@ -90,7 +90,7 @@ export abstract class HaDeviceAutomationPicker<
     }
     const value = this._value;
     return html`
-      <mwc-select
+      <ha-select
         .label=${this.label}
         .value=${value}
         @selected=${this._automationChanged}
@@ -113,7 +113,7 @@ export abstract class HaDeviceAutomationPicker<
             </mwc-list-item>
           `
         )}
-      </mwc-select>
+      </ha-select>
     `;
   }
 
@@ -167,7 +167,7 @@ export abstract class HaDeviceAutomationPicker<
 
   static get styles(): CSSResultGroup {
     return css`
-      mwc-select {
+      ha-select {
         width: 100%;
         margin-top: 4px;
       }

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

@@ -114,7 +114,7 @@ class HaEntitiesPickerLight extends LitElement {
     const newValue = event.detail.value;
     if (
       newValue === curValue ||
-      (newValue !== "" && !isValidEntityId(newValue))
+      (newValue !== undefined && !isValidEntityId(newValue))
     ) {
       return;
     }
@@ -147,7 +147,7 @@ class HaEntitiesPickerLight extends LitElement {
   }
 
   static override styles = css`
-    ha-entity-picker {
+    div {
       margin-top: 8px;
     }
   `;

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

@@ -1,6 +1,6 @@
 import { LitElement, html, TemplateResult, css } from "lit";
 import { customElement, property } from "lit/decorators";
-import "@material/mwc-select/mwc-select";
+import "./ha-select";
 import "@material/mwc-list/mwc-list-item";
 import "./ha-textfield";
 import { fireEvent } from "../common/dom/fire_event";
@@ -193,7 +193,7 @@ export class HaBaseTimeInput extends LitElement {
           : ""}
         ${this.format === 24
           ? ""
-          : html`<mwc-select
+          : html`<ha-select
               .required=${this.required}
               .value=${this.amPm}
               .disabled=${this.disabled}
@@ -205,7 +205,7 @@ export class HaBaseTimeInput extends LitElement {
             >
               <mwc-list-item value="AM">AM</mwc-list-item>
               <mwc-list-item value="PM">PM</mwc-list-item>
-            </mwc-select>`}
+            </ha-select>`}
       </div>
     `;
   }
@@ -280,7 +280,7 @@ export class HaBaseTimeInput extends LitElement {
     ha-textfield:last-child {
       --text-field-border-top-right-radius: var(--mdc-shape-medium);
     }
-    mwc-select {
+    ha-select {
       --mdc-shape-small: 0;
       width: 85px;
     }

src/components/ha-blueprint-picker.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
+import "./ha-select";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -24,7 +24,7 @@ class HaBluePrintPicker extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   public open() {
-    const select = this.shadowRoot?.querySelector("mwc-select");
+    const select = this.shadowRoot?.querySelector("ha-select");
     if (select) {
       // @ts-expect-error
       select.menuOpen = true;
@@ -49,7 +49,7 @@ class HaBluePrintPicker extends LitElement {
       return html``;
     }
     return html`
-      <mwc-select
+      <ha-select
         .label=${this.label ||
         this.hass.localize("ui.components.blueprint-picker.label")}
         fixedMenuPosition
@@ -71,7 +71,7 @@ class HaBluePrintPicker extends LitElement {
             </mwc-list-item>
           `
         )}
-      </mwc-select>
+      </ha-select>
     `;
   }
 
@@ -101,7 +101,7 @@ class HaBluePrintPicker extends LitElement {
       :host {
         display: inline-block;
       }
-      mwc-select {
+      ha-select {
         width: 100%;
         min-width: 200px;
         display: block;

src/components/ha-button-menu.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-menu";
-import type { Corner, Menu } from "@material/mwc-menu";
+import type { Corner, Menu, MenuCorner } from "@material/mwc-menu";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 
@@ -7,6 +7,12 @@ import { customElement, property, query } from "lit/decorators";
 export class HaButtonMenu extends LitElement {
   @property() public corner: Corner = "TOP_START";
 
+  @property() public menuCorner: MenuCorner = "START";
+
+  @property({ type: Number }) public x?: number;
+
+  @property({ type: Number }) public y?: number;
+
   @property({ type: Boolean }) public multi = false;
 
   @property({ type: Boolean }) public activatable = false;
@@ -32,9 +38,12 @@ export class HaButtonMenu extends LitElement {
       </div>
       <mwc-menu
         .corner=${this.corner}
+        .menuCorner=${this.menuCorner}
         .fixed=${this.fixed}
         .multi=${this.multi}
         .activatable=${this.activatable}
+        .y=${this.y}
+        .x=${this.x}
       >
         <slot></slot>
       </mwc-menu>

src/components/ha-date-input.ts

@@ -41,7 +41,7 @@ export class HaDateInput extends LitElement {
     return html`<ha-textfield
       .label=${this.label}
       .disabled=${this.disabled}
-      iconTrailing="calendar"
+      iconTrailing
       @click=${this._openDialog}
       .value=${this.value
         ? formatDateNumeric(new Date(this.value), this.locale)

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

@@ -3,7 +3,6 @@ import "@material/mwc-list/mwc-list";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiCalendar } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,
@@ -19,6 +18,7 @@ import { computeRTLDirection } from "../common/util/compute_rtl";
 import { HomeAssistant } from "../types";
 import "./date-range-picker";
 import "./ha-svg-icon";
+import "./ha-textfield";
 
 export interface DateRangePickerRanges {
   [key: string]: [Date, Date];
@@ -61,7 +61,7 @@ export class HaDateRangePicker extends LitElement {
       >
         <div slot="input" class="date-range-inputs">
           <ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
-          <paper-input
+          <ha-textfield
             .value=${formatDateTime(this.startDate, this.hass.locale)}
             .label=${this.hass.localize(
               "ui.components.date-range-picker.start_date"
@@ -69,16 +69,16 @@ export class HaDateRangePicker extends LitElement {
             .disabled=${this.disabled}
             @click=${this._handleInputClick}
             readonly
-          ></paper-input>
+          ></ha-textfield>
-          <paper-input
+          <ha-textfield
             .value=${formatDateTime(this.endDate, this.hass.locale)}
-            label=${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.components.date-range-picker.end_date"
             )}
             .disabled=${this.disabled}
             @click=${this._handleInputClick}
             readonly
-          ></paper-input>
+          ></ha-textfield>
         </div>
         ${this.ranges
           ? html`<div
@@ -158,13 +158,13 @@ export class HaDateRangePicker extends LitElement {
         border-top: 1px solid var(--divider-color);
       }
 
-      paper-input {
+      ha-textfield {
         display: inline-block;
         max-width: 250px;
         min-width: 200px;
       }
 
-      paper-input:last-child {
+      ha-textfield:last-child {
         margin-left: 8px;
       }
 
@@ -176,7 +176,7 @@ export class HaDateRangePicker extends LitElement {
       }
 
       @media only screen and (max-width: 500px) {
-        paper-input {
+        ha-textfield {
           min-width: inherit;
         }
 

src/components/ha-expansion-panel.ts

@@ -1,6 +1,13 @@
 import { mdiChevronDown } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
-import { customElement, property, query } from "lit/decorators";
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import { nextRender } from "../common/util/render-status";
@@ -16,11 +23,21 @@ class HaExpansionPanel extends LitElement {
 
   @property() secondary?: string;
 
+  @state() _showContent = this.expanded;
+
   @query(".container") private _container!: HTMLDivElement;
 
   protected render(): TemplateResult {
     return html`
-      <div class="summary" @click=${this._toggleContainer}>
+      <div
+        id="summary"
+        @click=${this._toggleContainer}
+        @keydown=${this._toggleContainer}
+        role="button"
+        tabindex="0"
+        aria-expanded=${this.expanded}
+        aria-controls="sect1"
+      >
         <slot class="header" name="header">
           ${this.header}
           <slot class="secondary" name="secondary">${this.secondary}</slot>
@@ -33,21 +50,37 @@ class HaExpansionPanel extends LitElement {
       <div
         class="container ${classMap({ expanded: this.expanded })}"
         @transitionend=${this._handleTransitionEnd}
+        role="region"
+        aria-labelledby="summary"
+        aria-hidden=${!this.expanded}
+        tabindex="-1"
       >
-        <slot></slot>
+        ${this._showContent ? html`<slot></slot>` : ""}
       </div>
     `;
   }
 
-  private _handleTransitionEnd() {
+  protected willUpdate(changedProps: PropertyValues) {
-    this._container.style.removeProperty("height");
+    if (changedProps.has("expanded") && this.expanded) {
+      this._showContent = this.expanded;
+    }
   }
 
-  private async _toggleContainer(): Promise<void> {
+  private _handleTransitionEnd() {
+    this._container.style.removeProperty("height");
+    this._showContent = this.expanded;
+  }
+
+  private async _toggleContainer(ev): Promise<void> {
+    if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") {
+      return;
+    }
+    ev.preventDefault();
     const newExpanded = !this.expanded;
     fireEvent(this, "expanded-will-change", { expanded: newExpanded });
 
     if (newExpanded) {
+      this._showContent = true;
       // allow for dynamic content to be rendered
       await nextRender();
     }
@@ -80,17 +113,21 @@ class HaExpansionPanel extends LitElement {
           var(--divider-color, #e0e0e0)
         );
         border-radius: var(--ha-card-border-radius, 4px);
-        padding: 0 8px;
       }
 
-      .summary {
+      #summary {
         display: flex;
-        padding: var(--expansion-panel-summary-padding, 0);
+        padding: var(--expansion-panel-summary-padding, 0 8px);
         min-height: 48px;
         align-items: center;
         cursor: pointer;
         overflow: hidden;
         font-weight: 500;
+        outline: none;
+      }
+
+      #summary:focus {
+        background: var(--input-fill-color);
       }
 
       .summary-icon {
@@ -103,6 +140,7 @@ class HaExpansionPanel extends LitElement {
       }
 
       .container {
+        padding: var(--expansion-panel-content-padding, 0 8px);
         overflow: hidden;
         transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
         height: 0px;

src/components/ha-file-upload.ts

@@ -1,6 +1,5 @@
+import { styles } from "@material/mwc-textfield/mwc-textfield.css";
 import { mdiClose } from "@mdi/js";
-import "@polymer/iron-input/iron-input";
-import "@polymer/paper-input/paper-input-container";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -21,7 +20,7 @@ export class HaFileUpload extends LitElement {
 
   @property() public accept!: string;
 
-  @property() public icon!: string;
+  @property() public icon?: string;
 
   @property() public label!: string;
 
@@ -39,15 +38,7 @@ export class HaFileUpload extends LitElement {
   protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     if (this.autoOpenFileDialog) {
-      this._input?.click();
+      this._openFilePicker();
-    }
-  }
-
-  protected updated(changedProperties: PropertyValues) {
-    if (changedProperties.has("_drag") && !this.uploading) {
-      (
-        this.shadowRoot!.querySelector("paper-input-container") as any
-      )._setFocused(this._drag);
     }
   }
 
@@ -60,51 +51,75 @@ export class HaFileUpload extends LitElement {
             active
           ></ha-circular-progress>`
         : html`
-            <label for="input">
+            <label
-              <paper-input-container
+              for="input"
-                .alwaysFloatLabel=${Boolean(this.value)}
+              class="mdc-text-field mdc-text-field--filled ${classMap({
-                @drop=${this._handleDrop}
+                "mdc-text-field--focused": this._drag,
-                @dragenter=${this._handleDragStart}
+                "mdc-text-field--with-leading-icon": Boolean(this.icon),
-                @dragover=${this._handleDragStart}
+                "mdc-text-field--with-trailing-icon": Boolean(this.value),
-                @dragleave=${this._handleDragEnd}
+              })}"
-                @dragend=${this._handleDragEnd}
+              @drop=${this._handleDrop}
-                class=${classMap({
+              @dragenter=${this._handleDragStart}
-                  dragged: this._drag,
+              @dragover=${this._handleDragStart}
-                })}
+              @dragleave=${this._handleDragEnd}
+              @dragend=${this._handleDragEnd}
+            >
+              <span class="mdc-text-field__ripple"></span>
+              <span
+                class="mdc-floating-label ${this.value || this._drag
+                  ? "mdc-floating-label--float-above"
+                  : ""}"
+                id="label"
+                >${this.label}</span
               >
-                <label for="input" slot="label"> ${this.label} </label>
+              ${this.icon
-                <iron-input slot="input">
+                ? html`<span
-                  <input
+                    class="mdc-text-field__icon mdc-text-field__icon--leading"
-                    id="input"
+                    tabindex="-1"
-                    type="file"
+                  >
-                    class="file"
+                    <ha-icon-button
-                    accept=${this.accept}
+                      @click=${this._openFilePicker}
-                    @change=${this._handleFilePicked}
+                      .path=${this.icon}
-                  />
+                    ></ha-icon-button>
-                  ${this.value}
+                  </span>`
-                </iron-input>
+                : ""}
-                ${this.value
+              <div class="value">${this.value}</div>
-                  ? html`
+              <input
-                      <ha-icon-button
+                id="input"
-                        slot="suffix"
+                type="file"
-                        @click=${this._clearValue}
+                class="mdc-text-field__input file"
-                        .label=${this.hass?.localize("ui.common.close") ||
+                accept=${this.accept}
-                        "close"}
+                @change=${this._handleFilePicked}
-                        .path=${mdiClose}
+                aria-labelledby="label"
-                      ></ha-icon-button>
+              />
-                    `
+              ${this.value
-                  : html`
+                ? html`<span
-                      <ha-icon-button
+                    class="mdc-text-field__icon mdc-text-field__icon--trailing"
-                        slot="suffix"
+                    tabindex="1"
-                        .path=${this.icon}
+                  >
-                      ></ha-icon-button>
+                    <ha-icon-button
-                    `}
+                      slot="suffix"
-              </paper-input-container>
+                      @click=${this._clearValue}
+                      .label=${this.hass?.localize("ui.common.close") ||
+                      "close"}
+                      .path=${mdiClose}
+                    ></ha-icon-button>
+                  </span>`
+                : ""}
+              <span
+                class="mdc-line-ripple ${this._drag
+                  ? "mdc-line-ripple--active"
+                  : ""}"
+              ></span>
             </label>
           `}
     `;
   }
 
+  private _openFilePicker() {
+    this._input?.click();
+  }
+
   private _handleDrop(ev: DragEvent) {
     ev.preventDefault();
     ev.stopPropagation();
@@ -137,40 +152,66 @@ export class HaFileUpload extends LitElement {
   }
 
   static get styles() {
-    return css`
+    return [
-      paper-input-container {
+      styles,
-        position: relative;
+      css`
-        padding: 8px;
+        :host {
-        margin: 0 -8px;
+          display: block;
-      }
+        }
-      paper-input-container.dragged:before {
+        .mdc-text-field--filled {
-        position: var(--layout-fit_-_position);
+          height: auto;
-        top: var(--layout-fit_-_top);
+          padding-top: 16px;
-        right: var(--layout-fit_-_right);
+          cursor: pointer;
-        bottom: var(--layout-fit_-_bottom);
+        }
-        left: var(--layout-fit_-_left);
+        .mdc-text-field--filled.mdc-text-field--with-trailing-icon {
-        background: currentColor;
+          padding-top: 28px;
-        content: "";
+        }
-        opacity: var(--dark-divider-opacity);
+        .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon {
-        pointer-events: none;
+          color: var(--secondary-text-color);
-        border-radius: 4px;
+        }
-      }
+        .mdc-text-field--filled.mdc-text-field--with-trailing-icon
-      input.file {
+          .mdc-text-field__icon {
-        display: none;
+          align-self: flex-end;
-      }
+        }
-      img {
+        .mdc-text-field__icon--leading {
-        max-width: 125px;
+          margin-bottom: 12px;
-        max-height: 125px;
+        }
-      }
+        .mdc-text-field--filled .mdc-floating-label--float-above {
-      ha-icon-button {
+          transform: scale(0.75);
-        --mdc-icon-button-size: 24px;
+          top: 8px;
-        --mdc-icon-size: 20px;
+        }
-      }
+        .dragged:before {
-      ha-circular-progress {
+          position: var(--layout-fit_-_position);
-        display: block;
+          top: var(--layout-fit_-_top);
-        text-align-last: center;
+          right: var(--layout-fit_-_right);
-      }
+          bottom: var(--layout-fit_-_bottom);
-    `;
+          left: var(--layout-fit_-_left);
+          background: currentColor;
+          content: "";
+          opacity: var(--dark-divider-opacity);
+          pointer-events: none;
+          border-radius: 4px;
+        }
+        .value {
+          width: 100%;
+        }
+        input.file {
+          display: none;
+        }
+        img {
+          max-width: 100%;
+          max-height: 125px;
+        }
+        ha-icon-button {
+          --mdc-icon-button-size: 24px;
+          --mdc-icon-size: 20px;
+        }
+        ha-circular-progress {
+          display: block;
+          text-align-last: center;
+        }
+      `,
+    ];
   }
 }
 

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

@@ -9,7 +9,9 @@ export class HaFormConstant extends LitElement implements HaFormElement {
   @property() public label!: string;
 
   protected render(): TemplateResult {
-    return html`<span class="label">${this.label}</span>: ${this.schema.value}`;
+    return html`<span class="label">${this.label}</span>${this.schema.value
+        ? `: ${this.schema.value}`
+        : ""}`;
   }
 
   static get styles(): CSSResultGroup {

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

@@ -0,0 +1,95 @@
+import "./ha-form";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property } from "lit/decorators";
+import type {
+  HaFormGridSchema,
+  HaFormDataContainer,
+  HaFormElement,
+  HaFormSchema,
+} from "./types";
+import type { HomeAssistant } from "../../types";
+
+@customElement("ha-form-grid")
+export class HaFormGrid extends LitElement implements HaFormElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public data!: HaFormDataContainer;
+
+  @property({ attribute: false }) public schema!: HaFormGridSchema;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property() public computeLabel?: (
+    schema: HaFormSchema,
+    data?: HaFormDataContainer
+  ) => string;
+
+  @property() public computeHelper?: (schema: HaFormSchema) => string;
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this.setAttribute("own-margin", "");
+  }
+
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+    if (changedProps.has("schema")) {
+      if (this.schema.column_min_width) {
+        this.style.setProperty(
+          "--form-grid-min-width",
+          this.schema.column_min_width
+        );
+      } else {
+        this.style.setProperty("--form-grid-min-width", "");
+      }
+    }
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      ${this.schema.schema.map(
+        (item) =>
+          html`
+            <ha-form
+              .hass=${this.hass}
+              .data=${this.data}
+              .schema=${[item]}
+              .disabled=${this.disabled}
+              .computeLabel=${this.computeLabel}
+              .computeHelper=${this.computeHelper}
+            ></ha-form>
+          `
+      )}
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: grid !important;
+        grid-template-columns: repeat(
+          var(--form-grid-column-count, auto-fit),
+          minmax(var(--form-grid-min-width, 200px), 1fr)
+        );
+        grid-gap: 8px;
+      }
+      :host > ha-form {
+        display: block;
+        margin-bottom: 24px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-form-grid": HaFormGrid;
+  }
+}

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

@@ -1,4 +1,3 @@
-import "@material/mwc-select/mwc-select";
 import { mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import {
   css,

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

@@ -1,14 +1,13 @@
-import "@material/mwc-select";
-import type { Select } from "@material/mwc-select";
 import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../ha-radio";
-import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./types";
-
 import { stopPropagation } from "../../common/dom/stop_propagation";
+import "../ha-radio";
 import type { HaRadio } from "../ha-radio";
+import "../ha-select";
+import type { HaSelect } from "../ha-select";
+import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./types";
 
 @customElement("ha-form-select")
 export class HaFormSelect extends LitElement implements HaFormElement {
@@ -20,7 +19,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @query("mwc-select", true) private _input?: HTMLElement;
+  @query("ha-select", true) private _input?: HTMLElement;
 
   public focus() {
     if (this._input) {
@@ -50,7 +49,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
     }
 
     return html`
-      <mwc-select
+      <ha-select
         fixedMenuPosition
         naturalMenuWidth
         .label=${this.label}
@@ -67,13 +66,13 @@ export class HaFormSelect extends LitElement implements HaFormElement {
             <mwc-list-item .value=${value}>${label}</mwc-list-item>
           `
         )}
-      </mwc-select>
+      </ha-select>
     `;
   }
 
   private _valueChanged(ev: CustomEvent) {
     ev.stopPropagation();
-    let value: string | undefined = (ev.target as Select | HaRadio).value;
+    let value: string | undefined = (ev.target as HaSelect | HaRadio).value;
 
     if (value === this.data) {
       return;
@@ -90,7 +89,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      mwc-select,
+      ha-select,
       mwc-formfield {
         display: block;
       }

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

@@ -1,10 +1,18 @@
-import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-alert";
 import "./ha-form-boolean";
 import "./ha-form-constant";
+import "./ha-form-grid";
 import "./ha-form-float";
 import "./ha-form-integer";
 import "./ha-form-multi_select";
@@ -14,17 +22,20 @@ import "./ha-form-string";
 import { HaFormElement, HaFormDataContainer, HaFormSchema } from "./types";
 import { HomeAssistant } from "../../types";
 
-const getValue = (obj, item) => (obj ? obj[item.name] : null);
+const getValue = (obj, item) =>
+  obj ? (!item.name ? obj : obj[item.name]) : null;
+
+const getError = (obj, item) => (obj && item.name ? obj[item.name] : null);
 
 let selectorImported = false;
 
 @customElement("ha-form")
 export class HaForm extends LitElement implements HaFormElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public data!: HaFormDataContainer;
+  @property({ attribute: false }) public data!: HaFormDataContainer;
 
-  @property() public schema!: HaFormSchema[];
+  @property({ attribute: false }) public schema!: HaFormSchema[];
 
   @property() public error?: Record<string, string>;
 
@@ -64,7 +75,7 @@ export class HaForm extends LitElement implements HaFormElement {
     }
   }
 
-  protected render() {
+  protected render(): TemplateResult {
     return html`
       <div class="root">
         ${this.error && this.error.base
@@ -75,7 +86,7 @@ export class HaForm extends LitElement implements HaFormElement {
             `
           : ""}
         ${this.schema.map((item) => {
-          const error = getValue(this.error, item);
+          const error = getError(this.error, item);
 
           return html`
             ${error
@@ -101,6 +112,9 @@ export class HaForm extends LitElement implements HaFormElement {
                   data: getValue(this.data, item),
                   label: this._computeLabel(item, this.data),
                   disabled: this.disabled,
+                  hass: this.hass,
+                  computeLabel: this.computeLabel,
+                  computeHelper: this.computeHelper,
                 })}
           `;
         })}
@@ -115,8 +129,12 @@ export class HaForm extends LitElement implements HaFormElement {
       ev.stopPropagation();
       const schema = (ev.target as HaFormElement).schema as HaFormSchema;
 
+      const newValue = !schema.name
+        ? ev.detail.value
+        : { [schema.name]: ev.detail.value };
+
       fireEvent(this, "value-changed", {
-        value: { ...this.data, [schema.name]: ev.detail.value },
+        value: { ...this.data, ...newValue },
       });
     });
     return root;

src/components/ha-form/types.ts

@@ -11,7 +11,8 @@ export type HaFormSchema =
   | HaFormSelectSchema
   | HaFormMultiSelectSchema
   | HaFormTimeSchema
-  | HaFormSelector;
+  | HaFormSelector
+  | HaFormGridSchema;
 
 export interface HaFormBaseSchema {
   name: string;
@@ -25,6 +26,13 @@ export interface HaFormBaseSchema {
   };
 }
 
+export interface HaFormGridSchema extends HaFormBaseSchema {
+  type: "grid";
+  name: "";
+  column_min_width?: string;
+  schema: HaFormSchema[];
+}
+
 export interface HaFormSelector extends HaFormBaseSchema {
   type?: never;
   selector: Selector;
@@ -32,7 +40,7 @@ export interface HaFormSelector extends HaFormBaseSchema {
 
 export interface HaFormConstantSchema extends HaFormBaseSchema {
   type: "constant";
-  value: string;
+  value?: string;
 }
 
 export interface HaFormIntegerSchema extends HaFormBaseSchema {

src/components/ha-qr-scanner.ts

@@ -1,6 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 import { mdiCamera } from "@mdi/js";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";

src/components/ha-select.ts

@@ -0,0 +1,57 @@
+import { SelectBase } from "@material/mwc-select/mwc-select-base";
+import { styles } from "@material/mwc-select/mwc-select.css";
+import { css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { debounce } from "../common/util/debounce";
+import { nextRender } from "../common/util/render-status";
+
+@customElement("ha-select")
+export class HaSelect extends SelectBase {
+  // @ts-ignore
+  @property({ type: Boolean }) public icon?: boolean;
+
+  protected override renderLeadingIcon() {
+    if (!this.icon) {
+      return nothing;
+    }
+
+    return html`<span class="mdc-select__icon"
+      ><slot name="icon"></slot
+    ></span>`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("translations-updated", this._translationsUpdated);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener(
+      "translations-updated",
+      this._translationsUpdated
+    );
+  }
+
+  private _translationsUpdated = debounce(async () => {
+    await nextRender();
+    this.layoutOptions();
+  }, 500);
+
+  static override styles = [
+    styles,
+    css`
+      .mdc-select:not(.mdc-select--disabled) .mdc-select__icon {
+        color: var(--secondary-text-color);
+      }
+      .mdc-select__anchor {
+        width: var(--ha-select-min-width, 200px);
+      }
+    `,
+  ];
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-select": HaSelect;
+  }
+}

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

@@ -35,9 +35,12 @@ export class HaBooleanSelector extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
+      :host {
+        height: 56px;
+        display: flex;
+      }
       ha-formfield {
         width: 100%;
-        margin: 16px 0;
         --mdc-typography-body2-font-size: 1em;
       }
     `;

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

@@ -50,7 +50,13 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
 
   private _filterEntities = (entity: HassEntity): boolean => {
     if (this.selector.entity?.domain) {
-      if (computeStateDomain(entity) !== this.selector.entity.domain) {
+      const filterDomain = this.selector.entity.domain;
+      const filterDomainIsArray = Array.isArray(filterDomain);
+      const entityDomain = computeStateDomain(entity);
+      if (
+        (filterDomainIsArray && !filterDomain.includes(entityDomain)) ||
+        (!filterDomainIsArray && entityDomain !== filterDomain)
+      ) {
         return false;
       }
     }

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

@@ -22,6 +22,8 @@ export class HaIconSelector extends LitElement {
       <ha-icon-picker
         .label=${this.label}
         .value=${this.value}
+        .fallbackPath=${this.selector.icon.fallbackPath}
+        .placeholder=${this.selector.icon.placeholder}
         @value-changed=${this._valueChanged}
       ></ha-icon-picker>
     `;

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

@@ -0,0 +1,80 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../common/dom/fire_event";
+import type {
+  LocationSelector,
+  LocationSelectorValue,
+} from "../../data/selector";
+import "../../panels/lovelace/components/hui-theme-select-editor";
+import type { HomeAssistant } from "../../types";
+import type { MarkerLocation } from "../map/ha-locations-editor";
+import "../map/ha-locations-editor";
+
+@customElement("ha-selector-location")
+export class HaLocationSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: LocationSelector;
+
+  @property() public value?: LocationSelectorValue;
+
+  @property() public label?: string;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  protected render() {
+    return html`
+      <ha-locations-editor
+        class="flex"
+        .hass=${this.hass}
+        .locations=${this._location(this.selector, this.value)}
+        @location-updated=${this._locationChanged}
+        @radius-updated=${this._radiusChanged}
+      ></ha-locations-editor>
+    `;
+  }
+
+  private _location = memoizeOne(
+    (
+      selector: LocationSelector,
+      value?: LocationSelectorValue
+    ): MarkerLocation[] => {
+      const computedStyles = getComputedStyle(this);
+      const zoneRadiusColor = selector.location.radius
+        ? computedStyles.getPropertyValue("--zone-radius-color") ||
+          computedStyles.getPropertyValue("--accent-color")
+        : undefined;
+      return [
+        {
+          id: "location",
+          latitude: value?.latitude || this.hass.config.latitude,
+          longitude: value?.longitude || this.hass.config.longitude,
+          radius: selector.location.radius ? value?.radius || 1000 : undefined,
+          radius_color: zoneRadiusColor,
+          icon: selector.location.icon,
+          location_editable: true,
+          radius_editable: true,
+        },
+      ];
+    }
+  );
+
+  private _locationChanged(ev: CustomEvent) {
+    const [latitude, longitude] = ev.detail.location;
+    fireEvent(this, "value-changed", {
+      value: { ...this.value, latitude, longitude },
+    });
+  }
+
+  private _radiusChanged(ev: CustomEvent) {
+    const radius = ev.detail.radius;
+    fireEvent(this, "value-changed", { value: { ...this.value, radius } });
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-location": HaLocationSelector;
+  }
+}

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

@@ -12,6 +12,7 @@ import {
 } from "../../data/media-player";
 import type { MediaSelector, MediaSelectorValue } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
+import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 import "../ha-alert";
 import "../ha-form/ha-form";
 import type { HaFormSchema } from "../ha-form/types";
@@ -50,6 +51,18 @@ export class HaMediaSelector extends LitElement {
         getSignedPath(this.hass, thumbnail).then((signedPath) => {
           this._thumbnailUrl = signedPath.path;
         });
+      } else if (
+        thumbnail &&
+        thumbnail.startsWith("https://brands.home-assistant.io")
+      ) {
+        // The backend is not aware of the theme used by the users,
+        // so we rewrite the URL to show a proper icon
+        this._thumbnailUrl = brandsUrl({
+          domain: extractDomainFromBrandUrl(thumbnail),
+          type: "icon",
+          useFallback: true,
+          darkOptimized: this.hass.themes?.darkMode,
+        });
       } else {
         this._thumbnailUrl = thumbnail;
       }

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

@@ -19,22 +19,24 @@ export class HaNumberSelector extends LitElement {
 
   @property() public label?: string;
 
+  @property({ type: Boolean }) public required = true;
+
   @property({ type: Boolean }) public disabled = false;
 
   protected render() {
-    return html`${this.label}
+    return html`${this.selector.number.mode !== "box"
-      ${this.selector.number.mode !== "box"
+        ? html`${this.label}<ha-slider
-        ? html`<ha-slider
+              .min=${this.selector.number.min}
-            .min=${this.selector.number.min}
+              .max=${this.selector.number.max}
-            .max=${this.selector.number.max}
+              .value=${this._value}
-            .value=${this._value}
+              .step=${this.selector.number.step ?? 1}
-            .step=${this.selector.number.step ?? 1}
+              .disabled=${this.disabled}
-            .disabled=${this.disabled}
+              .required=${this.required}
-            pin
+              pin
-            ignore-bar-touch
+              ignore-bar-touch
-            @change=${this._handleSliderChange}
+              @change=${this._handleSliderChange}
-          >
+            >
-          </ha-slider>`
+            </ha-slider>`
         : ""}
       <ha-textfield
         inputMode="numeric"
@@ -44,9 +46,10 @@ export class HaNumberSelector extends LitElement {
         class=${classMap({ single: this.selector.number.mode === "box" })}
         .min=${this.selector.number.min}
         .max=${this.selector.number.max}
-        .value=${this.value}
+        .value=${this.value || ""}
         .step=${this.selector.number.step ?? 1}
         .disabled=${this.disabled}
+        .required=${this.required}
         .suffix=${this.selector.number.unit_of_measurement}
         type="number"
         autoValidate
@@ -57,14 +60,16 @@ export class HaNumberSelector extends LitElement {
   }
 
   private get _value() {
-    return this.value ?? 0;
+    return this.value ?? (this.selector.number.min || 0);
   }
 
   private _handleInputChange(ev) {
     ev.stopPropagation();
     const value =
       ev.target.value === "" || isNaN(ev.target.value)
-        ? undefined
+        ? this.required
+          ? this.selector.number.min || 0
+          : undefined
         : Number(ev.target.value);
     if (this.value === value) {
       return;

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

@@ -1,11 +1,11 @@
+import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import { SelectOption, SelectSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
-import "@material/mwc-select/mwc-select";
+import "../ha-select";
-import "@material/mwc-list/mwc-list-item";
 
 @customElement("ha-selector-select")
 export class HaSelectSelector extends LitElement {
@@ -22,7 +22,7 @@ export class HaSelectSelector extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   protected render() {
-    return html`<mwc-select
+    return html`<ha-select
       fixedMenuPosition
       naturalMenuWidth
       .label=${this.label}
@@ -38,7 +38,7 @@ export class HaSelectSelector extends LitElement {
 
         return html`<mwc-list-item .value=${value}>${label}</mwc-list-item>`;
       })}
-    </mwc-select>`;
+    </ha-select>`;
   }
 
   private _valueChanged(ev) {
@@ -53,7 +53,7 @@ export class HaSelectSelector extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      mwc-select {
+      ha-select {
         width: 100%;
       }
     `;

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

@@ -69,10 +69,14 @@ export class HaTextSelector extends LitElement {
   }
 
   private _handleChange(ev) {
-    const value = ev.target.value;
+    let value = ev.target.value;
     if (this.value === value) {
       return;
     }
+    if (value === "" && !this.required) {
+      value = undefined;
+    }
+
     fireEvent(this, "value-changed", { value });
   }
 

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

@@ -0,0 +1,34 @@
+import "../../panels/lovelace/components/hui-theme-select-editor";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { HomeAssistant } from "../../types";
+import type { ThemeSelector } from "../../data/selector";
+
+@customElement("ha-selector-theme")
+export class HaThemeSelector extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: ThemeSelector;
+
+  @property() public value?: string;
+
+  @property() public label?: string;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  protected render() {
+    return html`
+      <hui-theme-select-editor
+        .hass=${this.hass}
+        .value=${this.value}
+        .label=${this.label}
+      ></hui-theme-select-editor>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-theme": HaThemeSelector;
+  }
+}

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

@@ -1,8 +1,8 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
-import { Selector } from "../../data/selector";
+import type { Selector } from "../../data/selector";
-import { HomeAssistant } from "../../types";
+import type { HomeAssistant } from "../../types";
 import "./ha-selector-action";
 import "./ha-selector-addon";
 import "./ha-selector-area";
@@ -19,6 +19,8 @@ import "./ha-selector-text";
 import "./ha-selector-time";
 import "./ha-selector-icon";
 import "./ha-selector-media";
+import "./ha-selector-theme";
+import "./ha-selector-location";
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {

src/components/ha-textfield.ts

@@ -9,6 +9,12 @@ export class HaTextField extends TextFieldBase {
 
   @property({ attribute: "error-message" }) public errorMessage?: string;
 
+  // @ts-ignore
+  @property({ type: Boolean }) public icon?: boolean;
+
+  // @ts-ignore
+  @property({ type: Boolean }) public iconTrailing?: boolean;
+
   override updated(changedProperties: PropertyValues) {
     super.updated(changedProperties);
     if (
@@ -53,6 +59,15 @@ export class HaTextField extends TextFieldBase {
         padding-right: var(--text-field-suffix-padding-right, 0px);
       }
 
+      .mdc-text-field:not(.mdc-text-field--disabled)
+        .mdc-text-field__affix--suffix {
+        color: var(--secondary-text-color);
+      }
+
+      .mdc-text-field__icon {
+        color: var(--secondary-text-color);
+      }
+
       input {
         text-align: var(--text-field-text-align);
       }

src/components/ha-web-rtc-player.ts

@@ -43,7 +43,7 @@ class HaWebRtcPlayer extends LitElement {
 
   private _remoteStream?: MediaStream;
 
-  protected render(): TemplateResult {
+  protected override render(): TemplateResult {
     if (this._error) {
       return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
     }
@@ -58,12 +58,19 @@ class HaWebRtcPlayer extends LitElement {
     `;
   }
 
-  public disconnectedCallback() {
+  public override connectedCallback() {
+    super.connectedCallback();
+    if (this.hasUpdated) {
+      this._startWebRtc();
+    }
+  }
+
+  public override disconnectedCallback() {
     super.disconnectedCallback();
     this._cleanUp();
   }
 
-  protected updated(changedProperties: PropertyValues<this>) {
+  protected override updated(changedProperties: PropertyValues<this>) {
     if (!changedProperties.has("entityid")) {
       return;
     }

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

@@ -0,0 +1,337 @@
+import { animate } from "@lit-labs/motion";
+import "@material/mwc-list/mwc-list";
+import "@material/mwc-list/mwc-list-item";
+import { mdiClose, mdiDelete } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import { fireEvent } from "../../common/dom/fire_event";
+import { computeRTLDirection } from "../../common/util/compute_rtl";
+import {
+  MediaClassBrowserSettings,
+  MediaPlayerItem,
+} from "../../data/media-player";
+import {
+  browseLocalMediaPlayer,
+  removeLocalMedia,
+} from "../../data/media_source";
+import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
+import { haStyleDialog } from "../../resources/styles";
+import type { HomeAssistant } from "../../types";
+import "../ha-circular-progress";
+import "../ha-dialog";
+import "../ha-header-bar";
+import "../ha-svg-icon";
+import "../ha-check-list-item";
+import "./ha-media-player-browse";
+import "./ha-media-upload-button";
+import type { MediaManageDialogParams } from "./show-media-manage-dialog";
+
+@customElement("dialog-media-manage")
+class DialogMediaManage extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _currentItem?: MediaPlayerItem;
+
+  @state() private _params?: MediaManageDialogParams;
+
+  @state() private _uploading = false;
+
+  @state() private _deleting = false;
+
+  @state() private _selected = new Set<number>();
+
+  private _filesChanged = false;
+
+  public showDialog(params: MediaManageDialogParams): void {
+    this._params = params;
+    this._refreshMedia();
+  }
+
+  public closeDialog() {
+    if (this._filesChanged && this._params!.onClose) {
+      this._params!.onClose();
+    }
+    this._params = undefined;
+    this._currentItem = undefined;
+    this._uploading = false;
+    this._deleting = false;
+    this._filesChanged = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._params) {
+      return html``;
+    }
+
+    const children =
+      this._currentItem?.children?.filter((child) => !child.can_expand) || [];
+
+    let fileIndex = 0;
+
+    return html`
+      <ha-dialog
+        open
+        scrimClickAction
+        escapeKeyAction
+        hideActions
+        flexContent
+        .heading=${this._params.currentItem.title}
+        @closed=${this.closeDialog}
+      >
+        <ha-header-bar slot="heading">
+          ${this._selected.size === 0
+            ? html`
+                <span slot="title">
+                  ${this.hass.localize(
+                    "ui.components.media-browser.file_management.title"
+                  )}
+                </span>
+
+                <ha-media-upload-button
+                  .disabled=${this._deleting}
+                  .hass=${this.hass}
+                  .currentItem=${this._params.currentItem}
+                  @uploading=${this._startUploading}
+                  @media-refresh=${this._doneUploading}
+                  slot="actionItems"
+                ></ha-media-upload-button>
+                ${this._uploading
+                  ? ""
+                  : html`
+                      <ha-icon-button
+                        .label=${this.hass.localize("ui.dialogs.generic.close")}
+                        .path=${mdiClose}
+                        dialogAction="close"
+                        slot="actionItems"
+                        class="header_button"
+                        dir=${computeRTLDirection(this.hass)}
+                      ></ha-icon-button>
+                    `}
+              `
+            : html`
+                <mwc-button
+                  class="danger"
+                  slot="title"
+                  .disabled=${this._deleting}
+                  .label=${this.hass.localize(
+                    `ui.components.media-browser.file_management.${
+                      this._deleting ? "deleting" : "delete"
+                    }`,
+                    { count: this._selected.size }
+                  )}
+                  @click=${this._handleDelete}
+                >
+                  <ha-svg-icon .path=${mdiDelete} slot="icon"></ha-svg-icon>
+                </mwc-button>
+
+                ${this._deleting
+                  ? ""
+                  : html`
+                      <mwc-button
+                        slot="actionItems"
+                        .label=${`Deselect all`}
+                        @click=${this._handleDeselectAll}
+                      >
+                        <ha-svg-icon
+                          .path=${mdiClose}
+                          slot="icon"
+                        ></ha-svg-icon>
+                      </mwc-button>
+                    `}
+              `}
+        </ha-header-bar>
+        ${!this._currentItem
+          ? html`
+              <div class="refresh">
+                <ha-circular-progress active></ha-circular-progress>
+              </div>
+            `
+          : !children.length
+          ? html`<div class="no-items">
+              <p>
+                ${this.hass.localize(
+                  "ui.components.media-browser.file_management.no_items"
+                )}
+              </p>
+              ${this._currentItem?.children?.length
+                ? html`<span class="folders"
+                    >${this.hass.localize(
+                      "ui.components.media-browser.file_management.folders_not_supported"
+                    )}</span
+                  >`
+                : ""}
+            </div>`
+          : html`
+              <mwc-list multi @selected=${this._handleSelected}>
+                ${repeat(
+                  children,
+                  (item) => item.media_content_id,
+                  (item) => {
+                    const icon = html`
+                      <ha-svg-icon
+                        slot="graphic"
+                        .path=${MediaClassBrowserSettings[
+                          item.media_class === "directory"
+                            ? item.children_media_class || item.media_class
+                            : item.media_class
+                        ].icon}
+                      ></ha-svg-icon>
+                    `;
+                    return html`
+                      <ha-check-list-item
+                        ${animate({
+                          id: item.media_content_id,
+                          skipInitial: true,
+                        })}
+                        graphic="icon"
+                        .disabled=${this._uploading || this._deleting}
+                        .selected=${this._selected.has(fileIndex++)}
+                        .item=${item}
+                      >
+                        ${icon} ${item.title}
+                      </ha-check-list-item>
+                    `;
+                  }
+                )}
+              </mwc-list>
+            `}
+      </ha-dialog>
+    `;
+  }
+
+  private _handleSelected(ev) {
+    this._selected = ev.detail.index;
+  }
+
+  private _startUploading() {
+    this._uploading = true;
+    this._filesChanged = true;
+  }
+
+  private _doneUploading() {
+    this._uploading = false;
+    this._refreshMedia();
+  }
+
+  private _handleDeselectAll() {
+    if (this._selected.size) {
+      this._selected = new Set();
+    }
+  }
+
+  private async _handleDelete() {
+    if (
+      !(await showConfirmationDialog(this, {
+        text: this.hass.localize(
+          "ui.components.media-browser.file_management.confirm_delete",
+          { count: this._selected.size }
+        ),
+        warning: true,
+      }))
+    ) {
+      return;
+    }
+    this._filesChanged = true;
+    this._deleting = true;
+
+    const toDelete: MediaPlayerItem[] = [];
+    let fileIndex = 0;
+    this._currentItem!.children!.forEach((item) => {
+      if (item.can_expand) {
+        return;
+      }
+      if (this._selected.has(fileIndex++)) {
+        toDelete.push(item);
+      }
+    });
+
+    try {
+      await Promise.all(
+        toDelete.map(async (item) => {
+          await removeLocalMedia(this.hass, item.media_content_id);
+          this._currentItem = {
+            ...this._currentItem!,
+            children: this._currentItem!.children!.filter((i) => i !== item),
+          };
+        })
+      );
+    } finally {
+      this._deleting = false;
+      this._selected = new Set();
+    }
+  }
+
+  private async _refreshMedia() {
+    this._selected = new Set();
+    this._currentItem = undefined;
+    this._currentItem = await browseLocalMediaPlayer(
+      this.hass,
+      this._params!.currentItem.media_content_id
+    );
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleDialog,
+      css`
+        ha-dialog {
+          --dialog-z-index: 8;
+          --dialog-content-padding: 0;
+        }
+
+        @media (min-width: 800px) {
+          ha-dialog {
+            --mdc-dialog-max-width: 800px;
+            --dialog-surface-position: fixed;
+            --dialog-surface-top: 40px;
+            --mdc-dialog-max-height: calc(100vh - 72px);
+          }
+        }
+
+        ha-header-bar {
+          --mdc-theme-on-primary: var(--primary-text-color);
+          --mdc-theme-primary: var(--mdc-theme-surface);
+          flex-shrink: 0;
+          border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
+        }
+
+        ha-media-upload-button,
+        mwc-button {
+          --mdc-theme-primary: var(--mdc-theme-on-primary);
+        }
+
+        .danger {
+          --mdc-theme-primary: var(--error-color);
+        }
+
+        ha-svg-icon[slot="icon"] {
+          vertical-align: middle;
+        }
+
+        .refresh {
+          display: flex;
+          height: 200px;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .no-items {
+          text-align: center;
+          padding: 16px;
+        }
+        .folders {
+          color: var(--secondary-text-color);
+          font-style: italic;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-media-manage": DialogMediaManage;
+  }
+}

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

@@ -1,7 +1,7 @@
 import "../ha-header-bar";
 import { mdiArrowLeft, mdiClose } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import type {
@@ -13,7 +13,11 @@ import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "../ha-dialog";
 import "./ha-media-player-browse";
-import type { MediaPlayerItemId } from "./ha-media-player-browse";
+import "./ha-media-manage-button";
+import type {
+  HaMediaPlayerBrowse,
+  MediaPlayerItemId,
+} from "./ha-media-player-browse";
 import { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog";
 
 @customElement("dialog-media-player-browse")
@@ -26,6 +30,8 @@ class DialogMediaPlayerBrowse extends LitElement {
 
   @state() private _params?: MediaPlayerBrowseDialogParams;
 
+  @query("ha-media-player-browse") private _browser!: HaMediaPlayerBrowse;
+
   public showDialog(params: MediaPlayerBrowseDialogParams): void {
     this._params = params;
     this._navigateIds = params.navigateIds || [
@@ -80,6 +86,12 @@ class DialogMediaPlayerBrowse extends LitElement {
               : this._currentItem.title}
           </span>
 
+          <ha-media-manage-button
+            slot="actionItems"
+            .hass=${this.hass}
+            .currentItem=${this._currentItem}
+            @media-refresh=${this._refreshMedia}
+          ></ha-media-manage-button>
           <ha-icon-button
             .label=${this.hass.localize("ui.dialogs.generic.close")}
             .path=${mdiClose}
@@ -124,6 +136,10 @@ class DialogMediaPlayerBrowse extends LitElement {
     return this._params!.action || "play";
   }
 
+  private _refreshMedia() {
+    this._browser.refresh();
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
@@ -157,6 +173,10 @@ class DialogMediaPlayerBrowse extends LitElement {
           flex-shrink: 0;
           border-bottom: 1px solid var(--divider-color, rgba(0, 0, 0, 0.12));
         }
+
+        ha-media-manage-button {
+          --mdc-theme-primary: var(--mdc-theme-on-primary);
+        }
       `,
     ];
   }

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

@@ -1,9 +1,10 @@
-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 { LocalStorage } from "../../common/decorators/local-storage";
 import { fireEvent } from "../../common/dom/fire_event";
+import { stopPropagation } from "../../common/dom/stop_propagation";
 import { fetchCloudStatus, updateCloudPref } from "../../data/cloud";
 import {
   CloudTTSInfo,
@@ -15,12 +16,11 @@ 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 { buttonLinkStyle } from "../../resources/styles";
-import { stopPropagation } from "../../common/dom/stop_propagation";
+import { HomeAssistant } from "../../types";
+import "../ha-select";
+import "../ha-textarea";
 
 export interface TtsMediaPickedEvent {
   item: MediaPlayerItem;
@@ -103,7 +103,7 @@ class BrowseMediaTTS extends LitElement {
 
     return html`
       <div class="cloud-options">
-        <mwc-select
+        <ha-select
           fixedMenuPosition
           naturalMenuWidth
           .label=${this.hass.localize(
@@ -117,9 +117,9 @@ class BrowseMediaTTS extends LitElement {
             ([key, label]) =>
               html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
           )}
-        </mwc-select>
+        </ha-select>
 
-        <mwc-select
+        <ha-select
           fixedMenuPosition
           naturalMenuWidth
           .label=${this.hass.localize("ui.components.media-browser.tts.gender")}
@@ -131,7 +131,7 @@ class BrowseMediaTTS extends LitElement {
             ([key, label]) =>
               html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
           )}
-        </mwc-select>
+        </ha-select>
       </div>
     `;
   }
@@ -256,7 +256,7 @@ class BrowseMediaTTS extends LitElement {
         display: flex;
         justify-content: space-between;
       }
-      .cloud-options mwc-select {
+      .cloud-options ha-select {
         width: 48%;
       }
       ha-textarea {

src/components/media-player/ha-media-manage-button.ts

@@ -0,0 +1,69 @@
+import { mdiFolderEdit } from "@mdi/js";
+import "@material/mwc-button";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { MediaPlayerItem } from "../../data/media-player";
+import "../ha-svg-icon";
+import { isLocalMediaSourceContentId } from "../../data/media_source";
+import type { HomeAssistant } from "../../types";
+import { showMediaManageDialog } from "./show-media-manage-dialog";
+import { fireEvent } from "../../common/dom/fire_event";
+
+declare global {
+  interface HASSDomEvents {
+    "media-refresh": unknown;
+  }
+}
+
+@customElement("ha-media-manage-button")
+class MediaManageButton extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() currentItem?: MediaPlayerItem;
+
+  @state() _uploading = 0;
+
+  protected render(): TemplateResult {
+    if (
+      !this.currentItem ||
+      !isLocalMediaSourceContentId(this.currentItem.media_content_id || "")
+    ) {
+      return html``;
+    }
+    return html`
+      <mwc-button
+        .label=${this.hass.localize(
+          "ui.components.media-browser.file_management.manage"
+        )}
+        @click=${this._manage}
+      >
+        <ha-svg-icon .path=${mdiFolderEdit} slot="icon"></ha-svg-icon>
+      </mwc-button>
+    `;
+  }
+
+  private _manage() {
+    showMediaManageDialog(this, {
+      currentItem: this.currentItem!,
+      onClose: () => fireEvent(this, "media-refresh"),
+    });
+  }
+
+  static styles = css`
+    mwc-button {
+      /* We use icon + text to show disabled state */
+      --mdc-button-disabled-ink-color: --mdc-theme-primary;
+    }
+
+    ha-svg-icon[slot="icon"],
+    ha-circular-progress[slot="icon"] {
+      vertical-align: middle;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-media-manage-button": MediaManageButton;
+  }
+}

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

@@ -34,23 +34,24 @@ import {
   MediaPickedEvent,
   MediaPlayerBrowseAction,
 } from "../../data/media-player";
+import { browseLocalMediaPlayer } from "../../data/media_source";
+import { isTTSMediaSource } from "../../data/tts";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import "../entity/ha-entity-picker";
 import "../ha-button-menu";
 import "../ha-card";
 import type { HaCard } from "../ha-card";
 import "../ha-circular-progress";
+import "../ha-fab";
 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";
+import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
 
 declare global {
   interface HASSDomEvents {
@@ -131,6 +132,11 @@ export class HaMediaPlayerBrowse extends LitElement {
         currentId.media_content_id,
         currentId.media_content_type
       );
+      // Update the parent with latest item.
+      fireEvent(this, "media-browsed", {
+        ids: this.navigateIds,
+        current: this._currentItem,
+      });
     } catch (err) {
       this._setError(err);
     }
@@ -158,10 +164,11 @@ export class HaMediaPlayerBrowse extends LitElement {
     const subtitle = this.hass.localize(
       `ui.components.media-browser.class.${currentItem.media_class}`
     );
-
+    const children = currentItem.children || [];
     const mediaClass = MediaClassBrowserSettings[currentItem.media_class];
-    const childrenMediaClass =
+    const childrenMediaClass = currentItem.children_media_class
-      MediaClassBrowserSettings[currentItem.children_media_class];
+      ? MediaClassBrowserSettings[currentItem.children_media_class]
+      : MediaClassBrowserSettings.directory;
 
     return html`
               ${
@@ -264,7 +271,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                       @tts-picked=${this._ttsPicked}
                     ></ha-browse-media-tts>
                   `
-                : !currentItem.children?.length
+                : !children.length && !currentItem.not_shown
                 ? html`
                     <div class="container no-items">
                       ${currentItem.media_content_id ===
@@ -296,7 +303,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                           childrenMediaClass.thumbnail_ratio === "portrait",
                       })}"
                     >
-                      ${currentItem.children.map(
+                      ${children.map(
                         (child) => html`
                           <div
                             class="child"
@@ -360,11 +367,23 @@ export class HaMediaPlayerBrowse extends LitElement {
                           </div>
                         `
                       )}
+                      ${currentItem.not_shown
+                        ? html`
+                            <div class="grid not-shown">
+                              <div class="title">
+                                ${this.hass.localize(
+                                  "ui.components.media-browser.not_shown",
+                                  { count: currentItem.not_shown }
+                                )}
+                              </div>
+                            </div>
+                          `
+                        : ""}
                     </div>
                   `
                 : html`
                     <mwc-list>
-                      ${currentItem.children.map(
+                      ${children.map(
                         (child) => html`
                           <mwc-list-item
                             @click=${this._childClicked}
@@ -408,6 +427,25 @@ export class HaMediaPlayerBrowse extends LitElement {
                           <li divider role="separator"></li>
                         `
                       )}
+                      ${currentItem.not_shown
+                        ? html`
+                            <mwc-list-item
+                              noninteractive
+                              class="not-shown"
+                              .graphic=${mediaClass.show_list_images
+                                ? "medium"
+                                : "avatar"}
+                              dir=${computeRTLDirection(this.hass)}
+                            >
+                              <span class="title">
+                                ${this.hass.localize(
+                                  "ui.components.media-browser.not_shown",
+                                  { count: currentItem.not_shown }
+                                )}
+                              </span>
+                            </mwc-list-item>
+                          `
+                        : ""}
                     </mwc-list>
                   `
             }
@@ -644,6 +682,17 @@ export class HaMediaPlayerBrowse extends LitElement {
                 // Thumbnails served by local API require authentication
                 const signedPath = await getSignedPath(this.hass, thumbnailUrl);
                 thumbnailUrl = signedPath.path;
+              } else if (
+                thumbnailUrl.startsWith("https://brands.home-assistant.io")
+              ) {
+                // The backend is not aware of the theme used by the users,
+                // so we rewrite the URL to show a proper icon
+                thumbnailUrl = brandsUrl({
+                  domain: extractDomainFromBrandUrl(thumbnailUrl),
+                  type: "icon",
+                  useFallback: true,
+                  darkOptimized: this.hass.themes?.darkMode,
+                });
               }
               thumbnailCard.style.backgroundImage = `url(${thumbnailUrl})`;
               observer.unobserve(thumbnailCard); // loaded, so no need to observe anymore
@@ -874,6 +923,17 @@ export class HaMediaPlayerBrowse extends LitElement {
           transition: height 0.5s, margin 0.5s;
         }
 
+        .not-shown {
+          font-style: italic;
+          color: var(--secondary-text-color);
+        }
+
+        .grid.not-shown {
+          display: flex;
+          align-items: center;
+          text-align: center;
+        }
+
         /* ============= CHILDREN ============= */
 
         mwc-list {

src/components/media-player/ha-media-upload-button.ts

@@ -0,0 +1,129 @@
+import { mdiUpload } from "@mdi/js";
+import "@material/mwc-button";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import { MediaPlayerItem } from "../../data/media-player";
+import "../ha-circular-progress";
+import "../ha-svg-icon";
+import {
+  isLocalMediaSourceContentId,
+  uploadLocalMedia,
+} from "../../data/media_source";
+import type { HomeAssistant } from "../../types";
+import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
+
+declare global {
+  interface HASSDomEvents {
+    uploading: unknown;
+    "media-refresh": unknown;
+  }
+}
+
+@customElement("ha-media-upload-button")
+class MediaUploadButton extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() currentItem?: MediaPlayerItem;
+
+  @state() _uploading = 0;
+
+  protected render(): TemplateResult {
+    if (
+      !this.currentItem ||
+      !isLocalMediaSourceContentId(this.currentItem.media_content_id || "")
+    ) {
+      return html``;
+    }
+    return html`
+      <mwc-button
+        .label=${this._uploading > 0
+          ? this.hass.localize(
+              "ui.components.media-browser.file_management.uploading",
+              {
+                count: this._uploading,
+              }
+            )
+          : this.hass.localize(
+              "ui.components.media-browser.file_management.add_media"
+            )}
+        .disabled=${this._uploading > 0}
+        @click=${this._startUpload}
+      >
+        ${this._uploading > 0
+          ? html`
+              <ha-circular-progress
+                size="tiny"
+                active
+                alt=""
+                slot="icon"
+              ></ha-circular-progress>
+            `
+          : html` <ha-svg-icon .path=${mdiUpload} slot="icon"></ha-svg-icon> `}
+      </mwc-button>
+    `;
+  }
+
+  private async _startUpload() {
+    if (this._uploading > 0) {
+      return;
+    }
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "audio/*,video/*,image/*";
+    input.multiple = true;
+    input.addEventListener(
+      "change",
+      async () => {
+        fireEvent(this, "uploading");
+        const files = input.files!;
+        document.body.removeChild(input);
+        const target = this.currentItem!.media_content_id!;
+
+        for (let i = 0; i < files.length; i++) {
+          this._uploading = files.length - i;
+
+          try {
+            // eslint-disable-next-line no-await-in-loop
+            await uploadLocalMedia(this.hass, target, files[i]);
+          } catch (err: any) {
+            showAlertDialog(this, {
+              text: this.hass.localize(
+                "ui.components.media-browser.file_management.upload_failed",
+                {
+                  reason: err.message || err,
+                }
+              ),
+            });
+            break;
+          }
+        }
+        this._uploading = 0;
+        fireEvent(this, "media-refresh");
+      },
+      { once: true }
+    );
+    // https://stackoverflow.com/questions/47664777/javascript-file-input-onchange-not-working-ios-safari-only
+    input.style.display = "none";
+    document.body.append(input);
+    input.click();
+  }
+
+  static styles = css`
+    mwc-button {
+      /* We use icon + text to show disabled state */
+      --mdc-button-disabled-ink-color: --mdc-theme-primary;
+    }
+
+    ha-svg-icon[slot="icon"],
+    ha-circular-progress[slot="icon"] {
+      vertical-align: middle;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-media-upload-button": MediaUploadButton;
+  }
+}

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

@@ -0,0 +1,18 @@
+import { fireEvent } from "../../common/dom/fire_event";
+import { MediaPlayerItem } from "../../data/media-player";
+
+export interface MediaManageDialogParams {
+  currentItem: MediaPlayerItem;
+  onClose?: () => void;
+}
+
+export const showMediaManageDialog = (
+  element: HTMLElement,
+  dialogParams: MediaManageDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-media-manage",
+    dialogImport: () => import("./dialog-media-manage"),
+    dialogParams,
+  });
+};

src/components/search-input.ts

@@ -1,12 +1,12 @@
 import { mdiClose, mdiMagnify } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import "../../components/ha-icon-button";
+import "./ha-icon-button";
-import "../../components/ha-svg-icon";
+import "./ha-svg-icon";
-import "../../components/ha-textfield";
+import "./ha-textfield";
-import type { HaTextField } from "../../components/ha-textfield";
+import type { HaTextField } from "./ha-textfield";
-import { HomeAssistant } from "../../types";
+import { HomeAssistant } from "../types";
-import { fireEvent } from "../dom/fire_event";
+import { fireEvent } from "../common/dom/fire_event";
 
 @customElement("search-input")
 class SearchInput extends LitElement {
@@ -35,7 +35,7 @@ class SearchInput extends LitElement {
         .autofocus=${this.autofocus}
         .label=${this.label || "Search"}
         .value=${this.filter || ""}
-        .icon=${true}
+        icon
         .iconTrailing=${this.filter || this.suffix}
         @input=${this._filterInputChanged}
       >

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

@@ -1,3 +1,4 @@
+import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -5,9 +6,8 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { stringCompare } from "../../common/string/compare";
 import { fetchUsers, User } from "../../data/user";
 import { HomeAssistant } from "../../types";
+import "../ha-select";
 import "./ha-user-badge";
-import "@material/mwc-select/mwc-select";
-import "@material/mwc-list/mwc-list-item";
 
 class HaUserPicker extends LitElement {
   public hass?: HomeAssistant;
@@ -34,7 +34,7 @@ class HaUserPicker extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <mwc-select
+      <ha-select
         .label=${this.label}
         .disabled=${this.disabled}
         .value=${this.value}
@@ -58,7 +58,7 @@ class HaUserPicker extends LitElement {
             </mwc-list-item>
           `
         )}
-      </mwc-select>
+      </ha-select>
     `;
   }
 

src/data/config.ts

@@ -0,0 +1,24 @@
+import { HomeAssistant } from "../types";
+
+interface ValidConfig {
+  valid: true;
+  error: null;
+}
+
+interface InvalidConfig {
+  valid: false;
+  error: string;
+}
+
+type ValidKeys = "trigger" | "action" | "condition";
+
+export const validateConfig = <
+  T extends Partial<{ [key in ValidKeys]: unknown }>
+>(
+  hass: HomeAssistant,
+  config: T
+): Promise<Record<keyof T, ValidConfig | InvalidConfig>> =>
+  hass.callWS({
+    type: "validate_config",
+    ...config,
+  });

src/data/config_entries.ts

@@ -13,6 +13,7 @@ export interface ConfigEntry {
     | "not_loaded"
     | "failed_unload";
   supports_options: boolean;
+  supports_remove_device: boolean;
   supports_unload: boolean;
   pref_disable_new_entities: boolean;
   pref_disable_polling: boolean;

src/data/device_registry.ts

@@ -1,4 +1,5 @@
 import { Connection, createCollection } from "home-assistant-js-websocket";
+import { Store } from "home-assistant-js-websocket/dist/store";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { caseInsensitiveStringCompare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
@@ -77,12 +78,26 @@ export const updateDeviceRegistryEntry = (
     ...updates,
   });
 
-export const fetchDeviceRegistry = (conn) =>
+export const removeConfigEntryFromDevice = (
-  conn.sendMessagePromise({
+  hass: HomeAssistant,
+  deviceId: string,
+  configEntryId: string
+) =>
+  hass.callWS<DeviceRegistryEntry>({
+    type: "config/device_registry/remove_config_entry",
+    device_id: deviceId,
+    config_entry_id: configEntryId,
+  });
+
+export const fetchDeviceRegistry = (conn: Connection) =>
+  conn.sendMessagePromise<DeviceRegistryEntry[]>({
     type: "config/device_registry/list",
   });
 
-const subscribeDeviceRegistryUpdates = (conn, store) =>
+const subscribeDeviceRegistryUpdates = (
+  conn: Connection,
+  store: Store<DeviceRegistryEntry[]>
+) =>
   conn.subscribeEvents(
     debounce(
       () =>

src/data/image.ts

@@ -29,7 +29,7 @@ export const createImage = async (
     body: fd,
   });
   if (resp.status === 413) {
-    throw new Error("Uploaded image is too large");
+    throw new Error(`Uploaded image is too large (${file.name})`);
   } else if (resp.status !== 200) {
     throw new Error("Unknown error");
   }

src/data/input_datetime.ts

@@ -1,3 +1,4 @@
+import { HassEntity } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 
 export interface InputDateTime {
@@ -17,6 +18,19 @@ export interface InputDateTimeMutableParams {
   has_date: boolean;
 }
 
+export const stateToIsoDateString = (entityState: HassEntity) =>
+  `${entityState.attributes.year || "1970"}-${String(
+    entityState.attributes.month || "01"
+  ).padStart(2, "0")}-${String(entityState.attributes.day || "01").padStart(
+    2,
+    "0"
+  )}T${String(entityState.attributes.hour || "00").padStart(2, "0")}:${String(
+    entityState.attributes.minute || "00"
+  ).padStart(2, "0")}:${String(entityState.attributes.second || "00").padStart(
+    2,
+    "0"
+  )}`;
+
 export const setInputDateTimeValue = (
   hass: HomeAssistant,
   entityId: string,

src/data/media-player.ts

@@ -33,7 +33,8 @@ import type { HomeAssistant } from "../types";
 import { UNAVAILABLE_STATES } from "./entity";
 
 interface MediaPlayerEntityAttributes extends HassEntityAttributeBase {
-  media_content_type?: any;
+  media_content_id?: string;
+  media_content_type?: string;
   media_artist?: string;
   media_playlist?: string;
   media_series_title?: string;
@@ -167,11 +168,12 @@ export interface MediaPlayerItem {
   media_content_type: string;
   media_content_id: string;
   media_class: string;
-  children_media_class: string;
+  children_media_class?: string;
   can_play: boolean;
   can_expand: boolean;
   thumbnail?: string;
   children?: MediaPlayerItem[];
+  not_shown?: number;
 }
 
 export const browseMediaPlayer = (
@@ -339,7 +341,7 @@ export const computeMediaControls = (
 };
 
 export const formatMediaTime = (seconds: number | undefined): string => {
-  if (seconds === undefined) {
+  if (seconds === undefined || seconds === Infinity) {
     return "";
   }
 
@@ -359,3 +361,17 @@ export const cleanupMediaTitle = (title?: string): string | undefined => {
   const index = title.indexOf("?authSig=");
   return index > 0 ? title.slice(0, index) : title;
 };
+
+/**
+ * Set volume of a media player entity.
+ * @param hass Home Assistant object
+ * @param entity_id entity ID of media player
+ * @param volume_level number between 0..1
+ * @returns
+ */
+export const setMediaPlayerVolume = (
+  hass: HomeAssistant,
+  entity_id: string,
+  volume_level: number
+) =>
+  hass.callService("media_player", "volume_set", { entity_id, volume_level });

src/data/media_source.ts

@@ -43,9 +43,18 @@ export const uploadLocalMedia = async (
     }
   );
   if (resp.status === 413) {
-    throw new Error("Uploaded image is too large");
+    throw new Error(`Uploaded file is too large (${file.name})`);
   } else if (resp.status !== 200) {
     throw new Error("Unknown error");
   }
   return resp.json();
 };
+
+export const removeLocalMedia = async (
+  hass: HomeAssistant,
+  media_content_id: string
+) =>
+  hass.callWS({
+    type: "media_source/local_source/remove",
+    media_content_id,
+  });

src/data/selector.ts

@@ -14,12 +14,14 @@ export type Selector =
   | ObjectSelector
   | SelectSelector
   | IconSelector
-  | MediaSelector;
+  | MediaSelector
+  | ThemeSelector
+  | LocationSelector;
 
 export interface EntitySelector {
   entity: {
     integration?: string;
-    domain?: string;
+    domain?: string | string[];
     device_class?: string;
   };
 }
@@ -86,8 +88,8 @@ export interface TargetSelector {
 
 export interface NumberSelector {
   number: {
-    min: number;
+    min?: number;
-    max: number;
+    max?: number;
     step?: number;
     mode?: "box" | "slider";
     unit_of_measurement?: string;
@@ -147,8 +149,15 @@ export interface SelectSelector {
 }
 
 export interface IconSelector {
+  icon: {
+    placeholder?: string;
+    fallbackPath?: string;
+  };
+}
+
+export interface ThemeSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  icon: {};
+  theme: {};
 }
 
 export interface MediaSelector {
@@ -156,6 +165,16 @@ export interface MediaSelector {
   media: {};
 }
 
+export interface LocationSelector {
+  location: { radius?: boolean; icon?: string };
+}
+
+export interface LocationSelectorValue {
+  latitude: number;
+  longitude: number;
+  radius?: number;
+}
+
 export interface MediaSelectorValue {
   entity_id?: string;
   media_content_id?: string;

src/data/service.ts

@@ -1,7 +1,10 @@
 import { HomeAssistant } from "../types";
 import { Action } from "./script";
 
-export const callExecuteScript = (hass: HomeAssistant, sequence: Action[]) =>
+export const callExecuteScript = (
+  hass: HomeAssistant,
+  sequence: Action | Action[]
+) =>
   hass.callWS({
     type: "execute_script",
     sequence,

src/data/zone.ts

@@ -12,12 +12,12 @@ export interface Zone {
 }
 
 export interface ZoneMutableParams {
+  name: string;
   icon?: string;
   latitude: number;
   longitude: number;
-  name: string;
+  passive?: boolean;
-  passive: boolean;
+  radius?: number;
-  radius: number;
 }
 
 export const fetchZones = (hass: HomeAssistant) =>

src/dialogs/config-flow/dialog-data-entry-flow.ts

@@ -117,13 +117,17 @@ class DataEntryFlowDialog extends LitElement {
         );
       } catch (err: any) {
         this.closeDialog();
+        let message = err.message || err.body || "Unknown error";
+        if (typeof message !== "string") {
+          message = JSON.stringify(message);
+        }
         showAlertDialog(this, {
           title: this.hass.localize(
             "ui.panel.config.integrations.config_flow.error"
           ),
           text: `${this.hass.localize(
             "ui.panel.config.integrations.config_flow.could_not_load"
-          )}: ${err.message || err.body}`,
+          )}: ${message}`,
         });
         return;
       }
@@ -373,13 +377,20 @@ class DataEntryFlowDialog extends LitElement {
         step = await this._params!.flowConfig.createFlow(this.hass, handler);
       } catch (err: any) {
         this.closeDialog();
+        const message =
+          err?.status_code === 404
+            ? this.hass.localize(
+                "ui.panel.config.integrations.config_flow.no_config_flow"
+              )
+            : `${this.hass.localize(
+                "ui.panel.config.integrations.config_flow.could_not_load"
+              )}: ${err?.body?.message || err?.message}`;
+
         showAlertDialog(this, {
           title: this.hass.localize(
             "ui.panel.config.integrations.config_flow.error"
           ),
-          text: `${this.hass.localize(
+          text: message,
-            "ui.panel.config.integrations.config_flow.could_not_load"
-          )}: ${err.message || err.body}`,
         });
         return;
       } finally {

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -15,7 +15,7 @@ import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
 import { navigate } from "../../common/navigate";
-import "../../common/search/search-input";
+import "../../components/search-input";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { LocalizeFunc } from "../../common/translations/localize";
 import "../../components/ha-icon-next";

src/dialogs/generic/dialog-box.ts

@@ -1,12 +1,12 @@
 import "@material/mwc-button/mwc-button";
-import "@polymer/paper-input/paper-input";
+import { mdiAlertOutline } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
+import "../../components/ha-svg-icon";
 import "../../components/ha-switch";
-import { PolymerChangedEvent } from "../../polymer-types";
+import "../../components/ha-textfield";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { DialogBoxParams } from "./show-dialog-box";
@@ -51,38 +51,40 @@ class DialogBox extends LitElement {
         ?escapeKeyAction=${confirmPrompt}
         @closed=${this._dialogClosed}
         defaultAction="ignore"
-        .heading=${this._params.title
+        .heading=${html`${this._params.warning
+          ? html`<ha-svg-icon
+              .path=${mdiAlertOutline}
+              style="color: var(--warning-color)"
+            ></ha-svg-icon> `
+          : ""}${this._params.title
           ? this._params.title
           : this._params.confirmation &&
-            this.hass.localize("ui.dialogs.generic.default_confirmation_title")}
+            this.hass.localize(
+              "ui.dialogs.generic.default_confirmation_title"
+            )}`}
       >
         <div>
           ${this._params.text
             ? html`
-                <p
+                <p class=${this._params.prompt ? "no-bottom-padding" : ""}>
-                  class=${classMap({
-                    "no-bottom-padding": Boolean(this._params.prompt),
-                    warning: Boolean(this._params.warning),
-                  })}
-                >
                   ${this._params.text}
                 </p>
               `
             : ""}
           ${this._params.prompt
             ? html`
-                <paper-input
+                <ha-textfield
                   dialogInitialFocus
-                  .value=${this._value}
+                  .value=${this._value || ""}
                   @keyup=${this._handleKeyUp}
-                  @value-changed=${this._valueChanged}
+                  @change=${this._valueChanged}
                   .label=${this._params.inputLabel
                     ? this._params.inputLabel
                     : ""}
                   .type=${this._params.inputType
                     ? this._params.inputType
                     : "text"}
-                ></paper-input>
+                ></ha-textfield>
               `
             : ""}
         </div>
@@ -107,8 +109,8 @@ class DialogBox extends LitElement {
     `;
   }
 
-  private _valueChanged(ev: PolymerChangedEvent<string>) {
+  private _valueChanged(ev) {
-    this._value = ev.detail.value;
+    this._value = ev.target.value;
   }
 
   private _dismiss(): void {
@@ -173,9 +175,6 @@ class DialogBox extends LitElement {
           /* Place above other dialogs */
           --dialog-z-index: 104;
         }
-        .warning {
-          color: var(--warning-color);
-        }
       `,
     ];
   }

src/dialogs/more-info/controls/more-info-alarm_control_panel.js

@@ -1,281 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { fireEvent } from "../../../common/dom/fire_event";
-import { FORMAT_NUMBER } from "../../../data/alarm_control_panel";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="iron-flex"></style>
-      <style>
-        paper-input {
-          margin: auto;
-          max-width: 200px;
-        }
-        .pad {
-          display: flex;
-          justify-content: center;
-          margin-bottom: 24px;
-        }
-        .pad div {
-          display: flex;
-          flex-direction: column;
-        }
-        .pad mwc-button {
-          padding: 8px;
-          width: 80px;
-        }
-        .actions mwc-button {
-          flex: 1 0 50%;
-          margin: 0 4px 16px;
-          max-width: 200px;
-        }
-        mwc-button.disarm {
-          color: var(--error-color);
-        }
-      </style>
-
-      <template is="dom-if" if="[[_codeFormat]]">
-        <paper-input
-          label="[[localize('ui.card.alarm_control_panel.code')]]"
-          value="{{_enteredCode}}"
-          type="password"
-          inputmode="[[_inputMode]]"
-          disabled="[[!_inputEnabled]]"
-        ></paper-input>
-
-        <template is="dom-if" if="[[_isNumber(_codeFormat)]]">
-          <div class="pad">
-            <div>
-              <mwc-button
-                on-click="_digitClicked"
-                disabled="[[!_inputEnabled]]"
-                data-digit="1"
-                outlined
-                >1</mwc-button
-              >
-              <mwc-button
-                on-click="_digitClicked"
-                disabled="[[!_inputEnabled]]"
-                data-digit="4"
-                outlined
-                >4</mwc-button
-              >
-              <mwc-button
-                on-click="_digitClicked"
-                disabled="[[!_inputEnabled]]"
-                data-digit="7"
-                outlined
-                >7</mwc-button
-              >
-            </div>
-            <div>
-              <mwc-button
-                on-click="_digitClicked"
-                disabled="[[!_inputEnabled]]"
-                data-digit="2"
-                outlined
-                >2</mwc-button
-              >
-              <mwc-button
-                on-click="_digitClicked"
-                disabled="[[!_inputEnabled]]"
-                data-digit="5"
-                outlined
-                >5</mwc-button
-              >
-              <mwc-button
-                on-click="_digitClicked"
-                disabled="[[!_inputEnabled]]"
-                data-digit="8"
-                outlined
-                >8</mwc-button
-              >
-              <mwc-button
-                on-click="_digitClicked"
-                disabled="[[!_inputEnabled]]"
-                data-digit="0"
-                outlined
-                >0</mwc-button
-              >
-            </div>
-            <div>
-              <mwc-button
-                on-click="_digitClicked"
-                disabled="[[!_inputEnabled]]"
-                data-digit="3"
-                outlined
-                >3</mwc-button
-              >
-              <mwc-button
-                on-click="_digitClicked"
-                disabled="[[!_inputEnabled]]"
-                data-digit="6"
-                outlined
-                >6</mwc-button
-              >
-              <mwc-button
-                on-click="_digitClicked"
-                disabled="[[!_inputEnabled]]"
-                data-digit="9"
-                outlined
-                >9</mwc-button
-              >
-              <mwc-button
-                on-click="_clearEnteredCode"
-                disabled="[[!_inputEnabled]]"
-                outlined
-              >
-                [[localize('ui.card.alarm_control_panel.clear_code')]]
-              </mwc-button>
-            </div>
-          </div>
-        </template>
-      </template>
-
-      <div class="layout horizontal center-justified actions">
-        <template is="dom-if" if="[[_disarmVisible]]">
-          <mwc-button
-            outlined
-            class="disarm"
-            on-click="_callService"
-            data-service="alarm_disarm"
-            disabled="[[!_codeValid]]"
-          >
-            [[localize('ui.card.alarm_control_panel.disarm')]]
-          </mwc-button>
-        </template>
-        <template is="dom-if" if="[[_armVisible]]">
-          <mwc-button
-            outlined
-            on-click="_callService"
-            data-service="alarm_arm_home"
-            disabled="[[!_codeValid]]"
-          >
-            [[localize('ui.card.alarm_control_panel.arm_home')]]
-          </mwc-button>
-          <mwc-button
-            outlined
-            on-click="_callService"
-            data-service="alarm_arm_away"
-            disabled="[[!_codeValid]]"
-          >
-            [[localize('ui.card.alarm_control_panel.arm_away')]]
-          </mwc-button>
-        </template>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      stateObj: {
-        type: Object,
-        observer: "_stateObjChanged",
-      },
-      _enteredCode: {
-        type: String,
-        value: "",
-      },
-      _codeFormat: {
-        type: String,
-        value: "",
-      },
-      _codeValid: {
-        type: Boolean,
-        computed:
-          "_validateCode(_enteredCode,  _codeFormat,  _armVisible, _codeArmRequired)",
-      },
-      _disarmVisible: {
-        type: Boolean,
-        value: false,
-      },
-      _armVisible: {
-        type: Boolean,
-        value: false,
-      },
-      _inputEnabled: {
-        type: Boolean,
-        value: false,
-      },
-      _inputMode: {
-        type: String,
-        computed: "_getInputMode(_codeFormat)",
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this._armedStates = [
-      "armed_home",
-      "armed_away",
-      "armed_night",
-      "armed_custom_bypass",
-    ];
-  }
-
-  _stateObjChanged(newVal, oldVal) {
-    if (newVal) {
-      const state = newVal.state;
-      const props = {
-        _codeFormat: newVal.attributes.code_format,
-        _armVisible: state === "disarmed",
-        _codeArmRequired: newVal.attributes.code_arm_required,
-        _disarmVisible:
-          this._armedStates.includes(state) ||
-          state === "pending" ||
-          state === "triggered" ||
-          state === "arming",
-      };
-      props._inputEnabled = props._disarmVisible || props._armVisible;
-      this.setProperties(props);
-    }
-    if (oldVal) {
-      setTimeout(() => {
-        fireEvent(this, "iron-resize");
-      }, 500);
-    }
-  }
-
-  _getInputMode(format) {
-    return this._isNumber(format) ? "numeric" : "text";
-  }
-
-  _isNumber(format) {
-    return format === FORMAT_NUMBER;
-  }
-
-  _validateCode(code, format, armVisible, codeArmRequired) {
-    return !format || code.length > 0 || (armVisible && !codeArmRequired);
-  }
-
-  _digitClicked(ev) {
-    this._enteredCode += ev.target.getAttribute("data-digit");
-  }
-
-  _clearEnteredCode() {
-    this._enteredCode = "";
-  }
-
-  _callService(ev) {
-    const service = ev.target.getAttribute("data-service");
-    const data = {
-      entity_id: this.stateObj.entity_id,
-      code: this._enteredCode,
-    };
-    this.hass.callService("alarm_control_panel", service, data).then(() => {
-      this._enteredCode = "";
-    });
-  }
-}
-customElements.define(
-  "more-info-alarm_control_panel",
-  MoreInfoAlarmControlPanel
-);

src/dialogs/more-info/controls/more-info-alarm_control_panel.ts

@@ -0,0 +1,165 @@
+import "@material/mwc-button";
+import type { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import "../../../components/ha-textfield";
+import type { HaTextField } from "../../../components/ha-textfield";
+import {
+  callAlarmAction,
+  FORMAT_NUMBER,
+} from "../../../data/alarm_control_panel";
+import type { HomeAssistant } from "../../../types";
+
+const BUTTONS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "clear"];
+const ARM_ACTIONS = ["arm_away", "arm_home"];
+const DISARM_ACTIONS = ["disarm"];
+
+@customElement("more-info-alarm_control_panel")
+export class MoreInfoAlarmControlPanel extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  @query("#alarmCode") private _input?: HaTextField;
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this.stateObj) {
+      return html``;
+    }
+
+    return html`
+      ${!this.stateObj.attributes.code_format
+        ? ""
+        : html`
+            <div class="center">
+              <ha-textfield
+                id="alarmCode"
+                .label=${this.hass.localize("ui.card.alarm_control_panel.code")}
+                type="password"
+                .inputmode=${this.stateObj.attributes.code_format ===
+                FORMAT_NUMBER
+                  ? "numeric"
+                  : "text"}
+              ></ha-textfield>
+            </div>
+          `}
+      ${this.stateObj.attributes.code_format !== FORMAT_NUMBER
+        ? ""
+        : html`
+            <div id="keypad">
+              ${BUTTONS.map((value) =>
+                value === ""
+                  ? html`<mwc-button disabled></mwc-button>`
+                  : html`
+                      <mwc-button
+                        .value=${value}
+                        @click=${this._handlePadClick}
+                        outlined
+                        class=${classMap({
+                          numberkey: value !== "clear",
+                        })}
+                      >
+                        ${value === "clear"
+                          ? this.hass!.localize(
+                              `ui.card.alarm_control_panel.clear_code`
+                            )
+                          : value}
+                      </mwc-button>
+                    `
+              )}
+            </div>
+          `}
+      <div class="actions">
+        ${(this.stateObj.state === "disarmed"
+          ? ARM_ACTIONS
+          : DISARM_ACTIONS
+        ).map(
+          (stateAction) => html`
+            <mwc-button
+              .action=${stateAction}
+              @click=${this._handleActionClick}
+              outlined
+            >
+              ${this.hass!.localize(
+                `ui.card.alarm_control_panel.${stateAction}`
+              )}
+            </mwc-button>
+          `
+        )}
+      </div>
+    `;
+  }
+
+  private _handlePadClick(e: MouseEvent): void {
+    const val = (e.currentTarget! as any).value;
+    this._input!.value = val === "clear" ? "" : this._input!.value + val;
+  }
+
+  private _handleActionClick(e: MouseEvent): void {
+    const input = this._input;
+    callAlarmAction(
+      this.hass!,
+      this.stateObj!.entity_id,
+      (e.currentTarget! as any).action,
+      input?.value || undefined
+    );
+    if (input) {
+      input.value = "";
+    }
+  }
+
+  static styles = css`
+    ha-textfield {
+      display: block;
+      margin: 8px;
+      max-width: 150px;
+      text-align: center;
+    }
+
+    #keypad {
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+      margin: auto;
+      width: 100%;
+      max-width: 300px;
+    }
+
+    #keypad mwc-button {
+      padding: 8px;
+      width: 30%;
+      box-sizing: border-box;
+    }
+
+    .actions {
+      margin: 0;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    .actions mwc-button {
+      margin: 0 4px 4px;
+    }
+
+    mwc-button#disarm {
+      color: var(--error-color);
+    }
+
+    mwc-button.numberkey {
+      --mdc-typography-button-font-size: var(--keypad-font-size, 0.875rem);
+    }
+
+    .center {
+      display: flex;
+      justify-content: center;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-alarm_control_panel": MoreInfoAlarmControlPanel;
+  }
+}

src/dialogs/more-info/controls/more-info-climate.ts

@@ -1,3 +1,4 @@
+import "@material/mwc-list/mwc-list-item";
 import {
   css,
   CSSResultGroup,
@@ -9,9 +10,11 @@ import {
 import { property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-climate-control";
+import "../../../components/ha-select";
 import "../../../components/ha-slider";
 import "../../../components/ha-switch";
 import {
@@ -26,9 +29,6 @@ import {
   compareClimateHvacModes,
 } from "../../../data/climate";
 import { HomeAssistant } from "../../../types";
-import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 
 class MoreInfoClimate extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -168,7 +168,7 @@ class MoreInfoClimate extends LitElement {
 
         <div class="container-hvac_modes">
           <div class="controls">
-            <mwc-select
+            <ha-select
               .label=${hass.localize("ui.card.climate.operation")}
               .value=${stateObj.state}
               fixedMenuPosition
@@ -186,14 +186,14 @@ class MoreInfoClimate extends LitElement {
                     </mwc-list-item>
                   `
                 )}
-            </mwc-select>
+            </ha-select>
           </div>
         </div>
 
         ${supportPresetMode && stateObj.attributes.preset_modes
           ? html`
               <div class="container-preset_modes">
-                <mwc-select
+                <ha-select
                   .label=${hass.localize("ui.card.climate.preset_mode")}
                   .value=${stateObj.attributes.preset_mode}
                   fixedMenuPosition
@@ -210,14 +210,14 @@ class MoreInfoClimate extends LitElement {
                       </mwc-list-item>
                     `
                   )}
-                </mwc-select>
+                </ha-select>
               </div>
             `
           : ""}
         ${supportFanMode && stateObj.attributes.fan_modes
           ? html`
               <div class="container-fan_list">
-                <mwc-select
+                <ha-select
                   .label=${hass.localize("ui.card.climate.fan_mode")}
                   .value=${stateObj.attributes.fan_mode}
                   fixedMenuPosition
@@ -234,14 +234,14 @@ class MoreInfoClimate extends LitElement {
                       </mwc-list-item>
                     `
                   )}
-                </mwc-select>
+                </ha-select>
               </div>
             `
           : ""}
         ${supportSwingMode && stateObj.attributes.swing_modes
           ? html`
               <div class="container-swing_list">
-                <mwc-select
+                <ha-select
                   .label=${hass.localize("ui.card.climate.swing_mode")}
                   .value=${stateObj.attributes.swing_mode}
                   fixedMenuPosition
@@ -254,7 +254,7 @@ class MoreInfoClimate extends LitElement {
                       <mwc-list-item .value=${mode}>${mode}</mwc-list-item>
                     `
                   )}
-                </mwc-select>
+                </ha-select>
               </div>
             `
           : ""}
@@ -427,7 +427,7 @@ class MoreInfoClimate extends LitElement {
         color: var(--primary-text-color);
       }
 
-      mwc-select {
+      ha-select {
         width: 100%;
         margin-top: 8px;
       }

src/dialogs/more-info/controls/more-info-configurator.js

@@ -1,148 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../components/ha-circular-progress";
-import "../../../components/ha-markdown";
-
-class MoreInfoConfigurator extends PolymerElement {
-  static get template() {
-    return html`
-      <style include="iron-flex"></style>
-      <style>
-        p {
-          margin: 8px 0;
-        }
-
-        a {
-          color: var(--primary-color);
-        }
-
-        p > img {
-          max-width: 100%;
-        }
-
-        p.center {
-          text-align: center;
-        }
-
-        p.error {
-          color: #c62828;
-        }
-
-        p.submit {
-          text-align: center;
-          height: 41px;
-        }
-
-        ha-circular-progress {
-          width: 14px;
-          height: 14px;
-          margin-right: 20px;
-        }
-
-        [hidden] {
-          display: none;
-        }
-      </style>
-
-      <div class="layout vertical">
-        <template is="dom-if" if="[[isConfigurable]]">
-          <ha-markdown
-            breaks
-            content="[[stateObj.attributes.description]]"
-          ></ha-markdown>
-
-          <p class="error" hidden$="[[!stateObj.attributes.errors]]">
-            [[stateObj.attributes.errors]]
-          </p>
-
-          <template is="dom-repeat" items="[[stateObj.attributes.fields]]">
-            <paper-input
-              label="[[item.name]]"
-              name="[[item.id]]"
-              type="[[item.type]]"
-              on-change="fieldChanged"
-            ></paper-input>
-          </template>
-
-          <p class="submit" hidden$="[[!stateObj.attributes.submit_caption]]">
-            <mwc-button
-              raised=""
-              disabled="[[isConfiguring]]"
-              on-click="submitClicked"
-            >
-              <ha-circular-progress
-                active="[[isConfiguring]]"
-                hidden="[[!isConfiguring]]"
-                alt="Configuring"
-              ></ha-circular-progress>
-              [[stateObj.attributes.submit_caption]]
-            </mwc-button>
-          </p>
-        </template>
-      </div>
-    `;
-  }
-
-  static get properties() {
-    return {
-      stateObj: {
-        type: Object,
-      },
-
-      action: {
-        type: String,
-        value: "display",
-      },
-
-      isConfigurable: {
-        type: Boolean,
-        computed: "computeIsConfigurable(stateObj)",
-      },
-
-      isConfiguring: {
-        type: Boolean,
-        value: false,
-      },
-
-      fieldInput: {
-        type: Object,
-        value: function () {
-          return {};
-        },
-      },
-    };
-  }
-
-  computeIsConfigurable(stateObj) {
-    return stateObj.state === "configure";
-  }
-
-  fieldChanged(ev) {
-    const el = ev.target;
-    this.fieldInput[el.name] = el.value;
-  }
-
-  submitClicked() {
-    const data = {
-      configure_id: this.stateObj.attributes.configure_id,
-      fields: this.fieldInput,
-    };
-
-    this.isConfiguring = true;
-
-    this.hass.callService("configurator", "configure", data).then(
-      () => {
-        this.isConfiguring = false;
-      },
-      () => {
-        this.isConfiguring = false;
-      }
-    );
-  }
-}
-
-customElements.define("more-info-configurator", MoreInfoConfigurator);

src/dialogs/more-info/controls/more-info-configurator.ts

@@ -0,0 +1,128 @@
+import "@material/mwc-button";
+import type { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../../components/ha-alert";
+import "../../../components/ha-circular-progress";
+import "../../../components/ha-markdown";
+import "../../../components/ha-textfield";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("more-info-configurator")
+export class MoreInfoConfigurator extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  @state() private _isConfiguring = false;
+
+  private _fieldInput = {};
+
+  protected render(): TemplateResult {
+    if (this.stateObj?.state !== "configure") {
+      return html``;
+    }
+
+    return html`
+      <div class="container">
+        <ha-markdown
+          breaks
+          .content=${this.stateObj.attributes.description}
+        ></ha-markdown>
+
+        ${this.stateObj.attributes.errors
+          ? html`<ha-alert alert-type="error">
+              ${this.stateObj.attributes.errors}
+            </ha-alert>`
+          : ""}
+        ${this.stateObj.attributes.fields.map(
+          (field) => html`<ha-textfield
+            .label=${field.name}
+            .name=${field.id}
+            .type=${field.type}
+            @change=${this._fieldChanged}
+          ></ha-textfield>`
+        )}
+        ${this.stateObj.attributes.submit_caption
+          ? html`<p class="submit">
+              <mwc-button
+                raised
+                .disabled=${this._isConfiguring}
+                @click=${this._submitClicked}
+              >
+                ${this._isConfiguring
+                  ? html`<ha-circular-progress
+                      active
+                      alt="Configuring"
+                    ></ha-circular-progress>`
+                  : ""}
+                ${this.stateObj.attributes.submit_caption}
+              </mwc-button>
+            </p>`
+          : ""}
+      </div>
+    `;
+  }
+
+  private _fieldChanged(ev) {
+    const el = ev.target;
+    this._fieldInput[el.name] = el.value;
+  }
+
+  private _submitClicked() {
+    const data = {
+      configure_id: this.stateObj!.attributes.configure_id,
+      fields: this._fieldInput,
+    };
+
+    this._isConfiguring = true;
+
+    this.hass.callService("configurator", "configure", data).then(
+      () => {
+        this._isConfiguring = false;
+      },
+      () => {
+        this._isConfiguring = false;
+      }
+    );
+  }
+
+  static styles = css`
+    .container {
+      display: flex;
+      flex-direction: column;
+    }
+    p {
+      margin: 8px 0;
+    }
+
+    a {
+      color: var(--primary-color);
+    }
+
+    p > img {
+      max-width: 100%;
+    }
+
+    p.center {
+      text-align: center;
+    }
+
+    p.submit {
+      text-align: center;
+      height: 41px;
+    }
+
+    ha-circular-progress {
+      width: 14px;
+      height: 14px;
+      margin-right: 20px;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-configurator": MoreInfoConfigurator;
+  }
+}

src/dialogs/more-info/controls/more-info-fan.js

@@ -1,3 +1,4 @@
+import "@material/mwc-list/mwc-list-item";
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
@@ -8,12 +9,11 @@ import "../../../components/ha-attributes";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-labeled-slider";
+import "../../../components/ha-select";
 import "../../../components/ha-switch";
 import { SUPPORT_SET_SPEED } from "../../../data/fan";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 
 /*
  * @appliesMixin EventsMixin
@@ -37,7 +37,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
           display: block;
         }
 
-        mwc-select {
+        ha-select {
           width: 100%;
         }
       </style>
@@ -57,7 +57,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
         </div>
 
         <div class="container-preset_modes">
-          <mwc-select
+          <ha-select
             label="[[localize('ui.card.fan.preset_mode')]]"
             value="[[stateObj.attributes.preset_mode]]"
             on-selected="presetModeChanged"
@@ -71,7 +71,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
             >
               <mwc-list-item value="[[item]]">[[item]]</mwc-list-item>
             </template>
-          </mwc-select>
+          </ha-select>
         </div>
 
         <div class="container-oscillating">

src/dialogs/more-info/controls/more-info-humidifier.ts

@@ -1,3 +1,4 @@
+import "@material/mwc-list/mwc-list-item";
 import {
   css,
   CSSResultGroup,
@@ -12,6 +13,7 @@ import { fireEvent } from "../../../common/dom/fire_event";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
+import "../../../components/ha-select";
 import "../../../components/ha-slider";
 import "../../../components/ha-switch";
 import {
@@ -19,8 +21,6 @@ import {
   HUMIDIFIER_SUPPORT_MODES,
 } from "../../../data/humidifier";
 import { HomeAssistant } from "../../../types";
-import "@material/mwc-list/mwc-list";
-import "@material/mwc-list/mwc-list-item";
 
 class MoreInfoHumidifier extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -67,26 +67,24 @@ class MoreInfoHumidifier extends LitElement {
 
         ${supportModes
           ? html`
-              <div class="container-modes">
+              <ha-select
-                <mwc-list
+                .label=${hass.localize("ui.card.humidifier.mode")}
-                  .label=${hass.localize("ui.card.humidifier.mode")}
+                .value=${stateObj.attributes.mode}
-                  .value=${stateObj.attributes.mode}
+                fixedMenuPosition
-                  fixedMenuPosition
+                naturalMenuWidth
-                  naturalMenuWidth
+                @selected=${this._handleModeChanged}
-                  @selected=${this._handleModeChanged}
+                @closed=${stopPropagation}
-                  @closed=${stopPropagation}
+              >
-                >
+                ${stateObj.attributes.available_modes!.map(
-                  ${stateObj.attributes.available_modes!.map(
+                  (mode) => html`
-                    (mode) => html`
+                    <mwc-list-item .value=${mode}>
-                      <mwc-list-item .value=${mode}>
+                      ${hass.localize(
-                        ${hass.localize(
+                        `state_attributes.humidifier.mode.${mode}`
-                          `state_attributes.humidifier.mode.${mode}`
+                      ) || mode}
-                        ) || mode}
+                    </mwc-list-item>
-                      </mwc-list-item>
+                  `
-                    `
+                )}
-                  )}
+              </ha-select>
-                </mwc-list>
-              </div>
             `
           : ""}
       </div>
@@ -170,11 +168,7 @@ class MoreInfoHumidifier extends LitElement {
         color: var(--primary-text-color);
       }
 
-      mwc-select {
+      ha-select {
-        width: 100%;
-      }
-
-      ha-slider {
         width: 100%;
       }
 

src/dialogs/more-info/controls/more-info-input_datetime.ts

@@ -4,7 +4,10 @@ import { customElement, property } from "lit/decorators";
 import "../../../components/ha-date-input";
 import "../../../components/ha-time-input";
 import { UNAVAILABLE_STATES, UNKNOWN } from "../../../data/entity";
-import { setInputDateTimeValue } from "../../../data/input_datetime";
+import {
+  setInputDateTimeValue,
+  stateToIsoDateString,
+} from "../../../data/input_datetime";
 import type { HomeAssistant } from "../../../types";
 
 @customElement("more-info-input_datetime")
@@ -24,7 +27,7 @@ class MoreInfoInputDatetime extends LitElement {
             ? html`
                 <ha-date-input
                   .locale=${this.hass.locale}
-                  .value=${`${this.stateObj.attributes.year}-${this.stateObj.attributes.month}-${this.stateObj.attributes.day}`}
+                  .value=${stateToIsoDateString(this.stateObj)}
                   .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
                   @value-changed=${this._dateChanged}
                 >

src/dialogs/more-info/controls/more-info-light.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 import { mdiPalette } from "@mdi/js";
 import {
   css,
@@ -18,6 +17,7 @@ import "../../../components/ha-button-toggle-group";
 import "../../../components/ha-color-picker";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-labeled-slider";
+import "../../../components/ha-select";
 import {
   getLightCurrentModeRgbColor,
   LightColorModes,
@@ -208,7 +208,7 @@ class MoreInfoLight extends LitElement {
               this.stateObj!.attributes.effect_list?.length
                 ? html`
                     <hr />
-                    <mwc-select
+                    <ha-select
                       .label=${this.hass.localize("ui.card.light.effect")}
                       .value=${this.stateObj.attributes.effect || ""}
                       fixedMenuPosition
@@ -223,7 +223,7 @@ class MoreInfoLight extends LitElement {
                           </mwc-list-item>
                         `
                       )}
-                    </mwc-select>
+                    </ha-select>
                   `
                 : ""}
             `

src/dialogs/more-info/controls/more-info-lock.js

@@ -1,80 +0,0 @@
-import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../components/ha-attributes";
-import LocalizeMixin from "../../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- */
-class MoreInfoLock extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style>
-        paper-input {
-          display: inline-block;
-        }
-      </style>
-
-      <template is="dom-if" if="[[stateObj.attributes.code_format]]">
-        <paper-input
-          label="[[localize('ui.card.lock.code')]]"
-          value="{{enteredCode}}"
-          pattern="[[stateObj.attributes.code_format]]"
-          type="password"
-        ></paper-input>
-        <mwc-button
-          on-click="callService"
-          data-service="unlock"
-          hidden$="[[!isLocked]]"
-          >[[localize('ui.card.lock.unlock')]]</mwc-button
-        >
-        <mwc-button
-          on-click="callService"
-          data-service="lock"
-          hidden$="[[isLocked]]"
-          >[[localize('ui.card.lock.lock')]]</mwc-button
-        >
-      </template>
-      <ha-attributes
-        hass="[[hass]]"
-        state-obj="[[stateObj]]"
-        extra-filters="code_format"
-      ></ha-attributes>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      stateObj: {
-        type: Object,
-        observer: "stateObjChanged",
-      },
-      enteredCode: {
-        type: String,
-        value: "",
-      },
-      isLocked: Boolean,
-    };
-  }
-
-  stateObjChanged(newVal) {
-    if (newVal) {
-      this.isLocked = newVal.state === "locked";
-    }
-  }
-
-  callService(ev) {
-    const service = ev.target.getAttribute("data-service");
-    const data = {
-      entity_id: this.stateObj.entity_id,
-      code: this.enteredCode,
-    };
-    this.hass.callService("lock", service, data);
-  }
-}
-
-customElements.define("more-info-lock", MoreInfoLock);

src/dialogs/more-info/controls/more-info-lock.ts

@@ -0,0 +1,70 @@
+import "@material/mwc-button";
+import type { HassEntity } from "home-assistant-js-websocket";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../components/ha-attributes";
+import "../../../components/ha-textfield";
+import type { HaTextField } from "../../../components/ha-textfield";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("more-info-lock")
+class MoreInfoLock extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  @query("ha-textfield") private _textfield?: HaTextField;
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this.stateObj) {
+      return html``;
+    }
+    return html`
+      ${this.stateObj.attributes.code_format
+        ? html`
+            <ha-textfield
+              .label=${this.hass.localize("ui.card.lock.code")}
+              .pattern=${this.stateObj.attributes.code_format}
+              type="password"
+            ></ha-textfield>
+            ${this.stateObj.state === "locked"
+              ? html`<mwc-button
+                  @click=${this._callService}
+                  data-service="unlock"
+                  >${this.hass.localize("ui.card.lock.unlock")}</mwc-button
+                >`
+              : html`<mwc-button @click=${this._callService} data-service="lock"
+                  >${this.hass.localize("ui.card.lock.lock")}</mwc-button
+                >`}
+          `
+        : ""}
+      <ha-attributes
+        .hass=${this.hass}
+        .stateObj=${this.stateObj}
+        extra-filters="code_format"
+      ></ha-attributes>
+    `;
+  }
+
+  private _callService(ev) {
+    const service = ev.target.getAttribute("data-service");
+    const data = {
+      entity_id: this.stateObj!.entity_id,
+      code: this._textfield?.value,
+    };
+    this.hass.callService("lock", service, data);
+  }
+
+  static styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-lock": MoreInfoLock;
+  }
+}

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -1,6 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 import {
   mdiLoginVariant,
   mdiMusicNote,
@@ -10,7 +9,6 @@ import {
   mdiVolumeOff,
   mdiVolumePlus,
 } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -18,6 +16,7 @@ import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-select";
 import "../../../components/ha-slider";
 import "../../../components/ha-svg-icon";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
@@ -51,42 +50,40 @@ class MoreInfoMediaPlayer extends LitElement {
     const controls = computeMediaControls(stateObj);
 
     return html`
-      ${!controls
+      <div class="controls">
-        ? ""
+        <div class="basic-controls">
-        : html`
+          ${!controls
-            <div class="controls">
+            ? ""
-              <div class="basic-controls">
+            : controls.map(
-                ${controls!.map(
+                (control) => html`
-                  (control) => html`
+                  <ha-icon-button
-                    <ha-icon-button
+                    action=${control.action}
-                      action=${control.action}
+                    @click=${this._handleClick}
-                      @click=${this._handleClick}
+                    .path=${control.icon}
-                      .path=${control.icon}
+                    .label=${this.hass.localize(
-                      .label=${this.hass.localize(
+                      `ui.card.media_player.${control.action}`
-                        `ui.card.media_player.${control.action}`
+                    )}
-                      )}
+                  >
-                    >
+                  </ha-icon-button>
-                    </ha-icon-button>
+                `
-                  `
+              )}
+        </div>
+        ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
+          ? html`
+              <mwc-button
+                .label=${this.hass.localize(
+                  "ui.card.media_player.browse_media"
                 )}
-              </div>
+                @click=${this._showBrowseMedia}
-              ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
+              >
-                ? html`
+                <ha-svg-icon
-                    <mwc-button
+                  .path=${mdiPlayBoxMultiple}
-                      .label=${this.hass.localize(
+                  slot="icon"
-                        "ui.card.media_player.browse_media"
+                ></ha-svg-icon>
-                      )}
+              </mwc-button>
-                      @click=${this._showBrowseMedia}
+            `
-                    >
+          : ""}
-                      <ha-svg-icon
+      </div>
-                        .path=${mdiPlayBoxMultiple}
-                        slot="icon"
-                      ></ha-svg-icon>
-                    </mwc-button>
-                  `
-                : ""}
-            </div>
-          `}
       ${(supportsFeature(stateObj, SUPPORT_VOLUME_SET) ||
         supportsFeature(stateObj, SUPPORT_VOLUME_BUTTONS)) &&
       ![UNAVAILABLE, UNKNOWN, "off"].includes(stateObj.state)
@@ -136,12 +133,9 @@ class MoreInfoMediaPlayer extends LitElement {
       stateObj.attributes.source_list?.length
         ? html`
             <div class="source-input">
-              <ha-svg-icon
+              <ha-select
-                class="source-input"
-                .path=${mdiLoginVariant}
-              ></ha-svg-icon>
-              <mwc-select
                 .label=${this.hass.localize("ui.card.media_player.source")}
+                icon
                 .value=${stateObj.attributes.source!}
                 @selected=${this._handleSourceChanged}
                 fixedMenuPosition
@@ -154,7 +148,8 @@ class MoreInfoMediaPlayer extends LitElement {
                       <mwc-list-item .value=${source}>${source}</mwc-list-item>
                     `
                 )}
-              </mwc-select>
+                <ha-svg-icon .path=${mdiLoginVariant} slot="icon"></ha-svg-icon>
+              </ha-select>
             </div>
           `
         : ""}
@@ -162,10 +157,10 @@ class MoreInfoMediaPlayer extends LitElement {
       stateObj.attributes.sound_mode_list?.length
         ? html`
             <div class="sound-input">
-              <ha-svg-icon .path=${mdiMusicNote}></ha-svg-icon>
+              <ha-select
-              <mwc-select
                 .label=${this.hass.localize("ui.card.media_player.sound_mode")}
                 .value=${stateObj.attributes.sound_mode!}
+                icon
                 fixedMenuPosition
                 naturalMenuWidth
                 @selected=${this._handleSoundModeChanged}
@@ -176,7 +171,8 @@ class MoreInfoMediaPlayer extends LitElement {
                     <mwc-list-item .value=${mode}>${mode}</mwc-list-item>
                   `
                 )}
-              </mwc-select>
+                <ha-svg-icon .path=${mdiMusicNote} slot="icon"></ha-svg-icon>
+              </ha-select>
             </div>
           `
         : ""}
@@ -217,14 +213,8 @@ class MoreInfoMediaPlayer extends LitElement {
         justify-content: space-between;
       }
 
-      .source-input ha-svg-icon,
+      .source-input ha-select,
-      .sound-input ha-svg-icon {
+      .sound-input ha-select {
-        padding: 7px;
-        margin-top: 24px;
-      }
-
-      .source-input mwc-select,
-      .sound-input mwc-select {
         margin-left: 10px;
         flex-grow: 1;
       }