Justify Around Button BAse

.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.2.0.cjs
+yarnPath: .yarn/releases/yarn-3.0.2.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/frontend/master/docs/screenshot.png)](https://demo.home-assistant.io/)
+[![Screenshot of the frontend](https://raw.githubusercontent.com/home-assistant/home-assistant-polymer/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 flatmap = require("gulp-flatmap");
+const foreach = require("gulp-foreach");
 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(
-      flatmap((stream, file) => {
+      foreach((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, query } from "lit/decorators";
+import { customElement, property } 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,8 +20,6 @@ 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) {
@@ -80,12 +78,12 @@ class HcLovelace extends LitElement {
           this.lovelaceConfig.background;
 
         if (configBackground) {
-          this._huiView!.style.setProperty(
+          (this.shadowRoot!.querySelector(
+            "hui-view"
+          ) as HTMLElement)!.style.setProperty(
             "--lovelace-background",
             configBackground
           );
-        } else {
-          this._huiView!.style.removeProperty("--lovelace-background");
         }
       }
     }
@@ -118,9 +116,6 @@ class HcLovelace extends LitElement {
       :host > * {
         flex: 1;
       }
-      hui-view {
-        background: var(--lovelace-background, var(--primary-background-color));
-      }
     `;
   }
 }

gallery/sidebar.js

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

gallery/src/components/demo-cards.ts

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

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

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

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

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

gallery/src/pages/automation/selectors.markdown

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

gallery/src/pages/automation/selectors.ts

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

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

@@ -36,9 +36,6 @@ const SCHEMAS: {
       text_multiline: "Text Multiline",
       object: "Object",
       select: "Select",
-      icon: "Icon",
-      media: "Media",
-      location: "Location",
     },
     schema: [
       { name: "addon", selector: { addon: {} } },
@@ -70,16 +67,6 @@ const SCHEMAS: {
           icon: {},
         },
       },
-      {
-        name: "media",
-        selector: {
-          media: {},
-        },
-      },
-      {
-        name: "location",
-        selector: { location: { radius: true, icon: "mdi:home" } },
-      },
     ],
   },
   {

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

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

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

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

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

@@ -29,7 +29,6 @@ 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/components/search-input";
+import "../../../src/common/search/search-input";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-icon-button";
@@ -110,6 +110,8 @@ 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,4 +1,5 @@
 import "@material/mwc-button";
+import "@material/mwc-select";
 import "@material/mwc-list/mwc-list-item";
 import {
   css,
@@ -13,7 +14,6 @@ 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`<ha-select
+          html`<mwc-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.input"
             )}
@@ -74,9 +74,9 @@ class HassioAddonAudio extends LitElement {
                 </mwc-list-item>
               `
             )}
-          </ha-select>`}
+          </mwc-select>`}
           ${this._outputDevices &&
-          html`<ha-select
+          html`<mwc-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.output"
             )}
@@ -93,7 +93,7 @@ class HassioAddonAudio extends LitElement {
                 >
               `
             )}
-          </ha-select>`}
+          </mwc-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;
         }
-        ha-select {
+        mwc-select {
           width: 100%;
         }
-        ha-select:last-child {
+        mwc-select:last-child {
           margin-top: 8px;
         }
       `,

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

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

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

@@ -1,4 +1,5 @@
 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, query } from "lit/decorators";
+import { customElement, property } 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,8 +92,6 @@ 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) {
@@ -111,10 +109,6 @@ 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}`);
@@ -175,23 +169,24 @@ export class SupervisorBackupContent extends LitElement {
         : ""}
       ${this.backupType === "partial"
         ? html`<div class="partial-picker">
-            <ha-formfield
-              .label=${html`<supervisor-formfield-label
-                label="Home Assistant"
-                .iconPath=${mdiHomeAssistant}
-                .version=${this.backup
-                  ? this.backup.homeassistant
-                  : this.hass.config.version}
-              >
-              </supervisor-formfield-label>`}
-            >
-              <ha-checkbox
-                .checked=${this.homeAssistant}
-                @click=${this.toggleHomeAssistant}
-              >
-              </ha-checkbox>
-            </ha-formfield>
-
+            ${this.backup && this.backup.homeassistant
+              ? html`
+                  <ha-formfield
+                    .label=${html`<supervisor-formfield-label
+                      label="Home Assistant"
+                      .iconPath=${mdiHomeAssistant}
+                      .version=${this.backup.homeassistant}
+                    >
+                    </supervisor-formfield-label>`}
+                  >
+                    <ha-checkbox
+                      .checked=${this.homeAssistant}
+                      @click=${this.toggleHomeAssistant}
+                    >
+                    </ha-checkbox>
+                  </ha-formfield>
+                `
+              : ""}
             ${foldersSection?.templates.length
               ? html`
                   <ha-formfield

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

@@ -64,7 +64,6 @@ 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,7 +92,6 @@ 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,7 +61,6 @@ 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,12 +89,11 @@ class HassioDatadiskDialog extends LitElement {
                     )}
                     <br /><br />
 
-                    <ha-select
+                    <mwc-select
                       .label=${this.dialogParams.supervisor.localize(
                         "dialog.datadisk_move.select_device"
                       )}
                       @selected=${this._select_device}
-                      dialogInitialFocus
                     >
                       ${this.devices.map(
                         (device) =>
@@ -102,7 +101,7 @@ class HassioDatadiskDialog extends LitElement {
                             >${device}</mwc-list-item
                           >`
                       )}
-                    </ha-select>
+                    </mwc-select>
                   `
                 : this.devices === undefined
                 ? this.dialogParams.supervisor.localize(
@@ -112,11 +111,7 @@ class HassioDatadiskDialog extends LitElement {
                     "dialog.datadisk_move.no_devices"
                   )}
 
-              <mwc-button
-                slot="secondaryAction"
-                @click=${this.closeDialog}
-                dialogInitialFocus
-              >
+              <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
                 ${this.dialogParams.supervisor.localize(
                   "dialog.datadisk_move.cancel"
                 )}
@@ -161,7 +156,7 @@ class HassioDatadiskDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        ha-select {
+        mwc-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/components/search-input";
+import "../../../../src/common/search/search-input";
 import { stringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
@@ -80,6 +80,8 @@ 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,10 +37,7 @@ class HassioMarkdownDialog extends LitElement {
         @closed=${this.closeDialog}
         .heading=${createCloseHeading(this.hass, this.title)}
       >
-        <ha-markdown
-          .content=${this.content || ""}
-          dialogInitialFocus
-        ></ha-markdown>
+        <ha-markdown .content=${this.content || ""}></ha-markdown>
       </ha-dialog>
     `;
   }

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

@@ -119,7 +119,6 @@ export class DialogHassioNetwork
                     html`<mwc-tab
                       .id=${device.interface}
                       .label=${device.interface}
-                      dialogInitialFocus
                     >
                     </mwc-tab>`
                 )}
@@ -316,7 +315,6 @@ 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,7 +80,6 @@ class HassioRegistriesDialog extends LitElement {
                 .schema=${SCHEMA}
                 @value-changed=${this._valueChanged}
                 .computeLabel=${this._computeLabel}
-                dialogInitialFocus
               ></ha-form>
               <div class="action">
                 <mwc-button
@@ -125,7 +124,7 @@ class HassioRegistriesDialog extends LitElement {
                     </ha-alert>
                   `}
               <div class="action">
-                <mwc-button @click=${this._addRegistry} dialogInitialFocus>
+                <mwc-button @click=${this._addRegistry}>
                   ${this.supervisor.localize(
                     "dialog.registries.add_new_registry"
                   )}

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

@@ -106,9 +106,6 @@ 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)
@@ -142,7 +139,6 @@ 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,8 +121,7 @@ export class HassioMain extends SupervisorBaseElement {
       this.parentElement,
       this.hass.themes,
       themeName,
-      themeSettings,
-      true
+      themeSettings
     );
   }
 }

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

@@ -4,7 +4,6 @@ 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";
@@ -71,7 +70,7 @@ class HassioSupervisorLog extends LitElement {
           : ""}
         ${this.hass.userData?.showAdvanced
           ? html`
-              <ha-select
+              <mwc-select
                 .label=${this.supervisor.localize("system.log.log_provider")}
                 @selected=${this._setLogProvider}
                 .value=${this._selectedLogProvider}
@@ -83,7 +82,7 @@ class HassioSupervisorLog extends LitElement {
                     </mwc-list-item>
                   `
                 )}
-              </ha-select>
+              </mwc-select>
             `
           : ""}
 
@@ -146,7 +145,7 @@ class HassioSupervisorLog extends LitElement {
         pre {
           white-space: pre-wrap;
         }
-        ha-select {
+        mwc-select {
           width: 100%;
           margin-bottom: 4px;
         }

package.json

@@ -1,8 +1,8 @@
 {
-  "description": "A frontend for Home Assistant",
+  "description": "A frontend for Home Assistant using the Polymer framework",
   "repository": {
     "type": "git",
-    "url": "https://github.com/home-assistant/frontend"
+    "url": "https://github.com/home-assistant/home-assistant-polymer"
   },
   "name": "home-assistant-frontend",
   "version": "1.0.0",
@@ -46,7 +46,6 @@
     "@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",
@@ -96,7 +95,6 @@
     "@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",
@@ -108,7 +106,7 @@
     "deep-freeze": "^0.0.1",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.1.5",
+    "hls.js": "^1.0.11",
     "home-assistant-js-websocket": "^6.0.1",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
@@ -117,7 +115,7 @@
     "leaflet-draw": "^1.0.4",
     "lit": "^2.1.2",
     "lit-vaadin-helpers": "^0.3.0",
-    "marked": "^4.0.12",
+    "marked": "^3.0.2",
     "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "^0.3.2",
@@ -137,12 +135,12 @@
     "vue": "^2.6.12",
     "vue2-daterange-picker": "^0.5.1",
     "web-animations-js": "^2.3.2",
-    "workbox-cacheable-response": "^6.4.2",
-    "workbox-core": "^6.4.2",
-    "workbox-expiration": "^6.4.2",
-    "workbox-precaching": "^6.4.2",
-    "workbox-routing": "^6.4.2",
-    "workbox-strategies": "^6.4.2",
+    "workbox-cacheable-response": "^6.1.5",
+    "workbox-core": "^6.1.5",
+    "workbox-expiration": "^6.1.5",
+    "workbox-precaching": "^6.1.5",
+    "workbox-routing": "^6.1.5",
+    "workbox-strategies": "^6.1.5",
     "xss": "^1.0.9"
   },
   "devDependencies": {
@@ -171,7 +169,7 @@
     "@types/js-yaml": "^4",
     "@types/leaflet": "^1",
     "@types/leaflet-draw": "^1",
-    "@types/marked": "^4",
+    "@types/marked": "^2",
     "@types/mocha": "^8",
     "@types/qrcode": "^1.4.2",
     "@types/sortablejs": "^1",
@@ -198,7 +196,7 @@
     "fs-extra": "^7.0.1",
     "glob": "^7.2.0",
     "gulp": "^4.0.2",
-    "gulp-flatmap": "^1.0.2",
+    "gulp-foreach": "^0.1.0",
     "gulp-json-transform": "^0.4.6",
     "gulp-merge-json": "^1.3.1",
     "gulp-rename": "^2.0.0",
@@ -235,7 +233,7 @@
     "webpack-dev-server": "^4.3.0",
     "webpack-manifest-plugin": "^4.0.2",
     "webpackbar": "^5.0.0-3",
-    "workbox-build": "^6.4.2"
+    "workbox-build": "^6.1.5"
   },
   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
   "resolutions": {
@@ -255,6 +253,5 @@
   "prettier": {
     "trailingComma": "es5",
     "arrowParens": "always"
-  },
-  "packageManager": "yarn@3.2.0"
+  }
 }

public/__init__.py

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

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220301.2
+version      = 20220214.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0
@@ -19,8 +19,3 @@ 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,19 +101,13 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     this._fetchAuthProviders();
 
     if (matchMedia("(prefers-color-scheme: dark)").matches) {
-      applyThemesOnElement(
-        document.documentElement,
-        {
-          default_theme: "default",
-          default_dark_theme: null,
-          themes: {},
-          darkMode: true,
-          theme: "default",
-        },
-        undefined,
-        undefined,
-        true
-      );
+      applyThemesOnElement(document.documentElement, {
+        default_theme: "default",
+        default_dark_theme: null,
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      });
     }
 
     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 | undefined => {
+): HaDurationData => {
   if (duration === undefined) {
-    return undefined;
+    return {};
   }
   if (typeof duration !== "object") {
     if (typeof duration === "string" || isNaN(duration)) {

src/common/dom/apply_themes_on_element.ts

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

src/common/entity/cover_icon.ts

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

src/common/search/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 "./ha-icon-button";
-import "./ha-svg-icon";
-import "./ha-textfield";
-import type { HaTextField } from "./ha-textfield";
-import { HomeAssistant } from "../types";
-import { fireEvent } from "../common/dom/fire_event";
+import "../../components/ha-icon-button";
+import "../../components/ha-svg-icon";
+import "../../components/ha-textfield";
+import type { HaTextField } from "../../components/ha-textfield";
+import { HomeAssistant } from "../../types";
+import { fireEvent } from "../dom/fire_event";
 
 @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
+        .icon=${true}
         .iconTrailing=${this.filter || this.suffix}
         @input=${this._filterInputChanged}
       >

src/common/util/debounce.ts

@@ -11,7 +11,7 @@ export const debounce = <T extends any[]>(
   immediate = false
 ) => {
   let timeout: number | undefined;
-  const debouncedFunc = (...args: T): void => {
+  return (...args: T): void => {
     const later = () => {
       timeout = undefined;
       if (!immediate) {
@@ -25,8 +25,4 @@ 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 "../search-input";
+import "../../common/search/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,9 +115,6 @@ 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,4 +1,5 @@
 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";
@@ -7,7 +8,6 @@ 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`
-      <ha-select
+      <mwc-select
         .label=${this.label}
         .value=${value}
         @selected=${this._automationChanged}
@@ -113,7 +113,7 @@ export abstract class HaDeviceAutomationPicker<
             </mwc-list-item>
           `
         )}
-      </ha-select>
+      </mwc-select>
     `;
   }
 
@@ -167,7 +167,7 @@ export abstract class HaDeviceAutomationPicker<
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-select {
+      mwc-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 !== undefined && !isValidEntityId(newValue))
+      (newValue !== "" && !isValidEntityId(newValue))
     ) {
       return;
     }
@@ -147,7 +147,7 @@ class HaEntitiesPickerLight extends LitElement {
   }
 
   static override styles = css`
-    div {
+    ha-entity-picker {
       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 "./ha-select";
+import "@material/mwc-select/mwc-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`<ha-select
+          : html`<mwc-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>
-            </ha-select>`}
+            </mwc-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);
     }
-    ha-select {
+    mwc-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 "./ha-select";
+import "@material/mwc-select/mwc-select";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -24,7 +24,7 @@ class HaBluePrintPicker extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   public open() {
-    const select = this.shadowRoot?.querySelector("ha-select");
+    const select = this.shadowRoot?.querySelector("mwc-select");
     if (select) {
       // @ts-expect-error
       select.menuOpen = true;
@@ -49,7 +49,7 @@ class HaBluePrintPicker extends LitElement {
       return html``;
     }
     return html`
-      <ha-select
+      <mwc-select
         .label=${this.label ||
         this.hass.localize("ui.components.blueprint-picker.label")}
         fixedMenuPosition
@@ -71,7 +71,7 @@ class HaBluePrintPicker extends LitElement {
             </mwc-list-item>
           `
         )}
-      </ha-select>
+      </mwc-select>
     `;
   }
 
@@ -101,7 +101,7 @@ class HaBluePrintPicker extends LitElement {
       :host {
         display: inline-block;
       }
-      ha-select {
+      mwc-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, MenuCorner } from "@material/mwc-menu";
+import type { Corner, Menu } from "@material/mwc-menu";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 
@@ -7,12 +7,6 @@ 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;
@@ -38,12 +32,9 @@ 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
+      iconTrailing="calendar"
       @click=${this._openDialog}
       .value=${this.value
         ? formatDateNumeric(new Date(this.value), this.locale)

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

@@ -3,6 +3,7 @@ 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,
@@ -18,7 +19,6 @@ 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>
-          <ha-textfield
+          <paper-input
             .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
-          ></ha-textfield>
-          <ha-textfield
+          ></paper-input>
+          <paper-input
             .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
-          ></ha-textfield>
+          ></paper-input>
         </div>
         ${this.ranges
           ? html`<div
@@ -158,13 +158,13 @@ export class HaDateRangePicker extends LitElement {
         border-top: 1px solid var(--divider-color);
       }
 
-      ha-textfield {
+      paper-input {
         display: inline-block;
         max-width: 250px;
         min-width: 200px;
       }
 
-      ha-textfield:last-child {
+      paper-input:last-child {
         margin-left: 8px;
       }
 
@@ -176,7 +176,7 @@ export class HaDateRangePicker extends LitElement {
       }
 
       @media only screen and (max-width: 500px) {
-        ha-textfield {
+        paper-input {
           min-width: inherit;
         }
 

src/components/ha-expansion-panel.ts

@@ -1,13 +1,6 @@
 import { mdiChevronDown } from "@mdi/js";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property, query, state } from "lit/decorators";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import { nextRender } from "../common/util/render-status";
@@ -23,21 +16,11 @@ class HaExpansionPanel extends LitElement {
 
   @property() secondary?: string;
 
-  @state() _showContent = this.expanded;
-
   @query(".container") private _container!: HTMLDivElement;
 
   protected render(): TemplateResult {
     return html`
-      <div
-        id="summary"
-        @click=${this._toggleContainer}
-        @keydown=${this._toggleContainer}
-        role="button"
-        tabindex="0"
-        aria-expanded=${this.expanded}
-        aria-controls="sect1"
-      >
+      <div class="summary" @click=${this._toggleContainer}>
         <slot class="header" name="header">
           ${this.header}
           <slot class="secondary" name="secondary">${this.secondary}</slot>
@@ -50,37 +33,21 @@ 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"
       >
-        ${this._showContent ? html`<slot></slot>` : ""}
+        <slot></slot>
       </div>
     `;
   }
 
-  protected willUpdate(changedProps: PropertyValues) {
-    if (changedProps.has("expanded") && this.expanded) {
-      this._showContent = this.expanded;
-    }
-  }
-
   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();
+  private async _toggleContainer(): Promise<void> {
     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();
     }
@@ -113,21 +80,17 @@ 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 8px);
+        padding: var(--expansion-panel-summary-padding, 0);
         min-height: 48px;
         align-items: center;
         cursor: pointer;
         overflow: hidden;
         font-weight: 500;
-        outline: none;
-      }
-
-      #summary:focus {
-        background: var(--input-fill-color);
       }
 
       .summary-icon {
@@ -140,7 +103,6 @@ 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,5 +1,6 @@
-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";
@@ -20,7 +21,7 @@ export class HaFileUpload extends LitElement {
 
   @property() public accept!: string;
 
-  @property() public icon?: string;
+  @property() public icon!: string;
 
   @property() public label!: string;
 
@@ -38,7 +39,15 @@ export class HaFileUpload extends LitElement {
   protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
     if (this.autoOpenFileDialog) {
-      this._openFilePicker();
+      this._input?.click();
+    }
+  }
+
+  protected updated(changedProperties: PropertyValues) {
+    if (changedProperties.has("_drag") && !this.uploading) {
+      (
+        this.shadowRoot!.querySelector("paper-input-container") as any
+      )._setFocused(this._drag);
     }
   }
 
@@ -51,75 +60,51 @@ export class HaFileUpload extends LitElement {
             active
           ></ha-circular-progress>`
         : html`
-            <label
-              for="input"
-              class="mdc-text-field mdc-text-field--filled ${classMap({
-                "mdc-text-field--focused": this._drag,
-                "mdc-text-field--with-leading-icon": Boolean(this.icon),
-                "mdc-text-field--with-trailing-icon": Boolean(this.value),
-              })}"
-              @drop=${this._handleDrop}
-              @dragenter=${this._handleDragStart}
-              @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">
+              <paper-input-container
+                .alwaysFloatLabel=${Boolean(this.value)}
+                @drop=${this._handleDrop}
+                @dragenter=${this._handleDragStart}
+                @dragover=${this._handleDragStart}
+                @dragleave=${this._handleDragEnd}
+                @dragend=${this._handleDragEnd}
+                class=${classMap({
+                  dragged: this._drag,
+                })}
               >
-              ${this.icon
-                ? html`<span
-                    class="mdc-text-field__icon mdc-text-field__icon--leading"
-                    tabindex="-1"
-                  >
-                    <ha-icon-button
-                      @click=${this._openFilePicker}
-                      .path=${this.icon}
-                    ></ha-icon-button>
-                  </span>`
-                : ""}
-              <div class="value">${this.value}</div>
-              <input
-                id="input"
-                type="file"
-                class="mdc-text-field__input file"
-                accept=${this.accept}
-                @change=${this._handleFilePicked}
-                aria-labelledby="label"
-              />
-              ${this.value
-                ? html`<span
-                    class="mdc-text-field__icon mdc-text-field__icon--trailing"
-                    tabindex="1"
-                  >
-                    <ha-icon-button
-                      slot="suffix"
-                      @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 for="input" slot="label"> ${this.label} </label>
+                <iron-input slot="input">
+                  <input
+                    id="input"
+                    type="file"
+                    class="file"
+                    accept=${this.accept}
+                    @change=${this._handleFilePicked}
+                  />
+                  ${this.value}
+                </iron-input>
+                ${this.value
+                  ? html`
+                      <ha-icon-button
+                        slot="suffix"
+                        @click=${this._clearValue}
+                        .label=${this.hass?.localize("ui.common.close") ||
+                        "close"}
+                        .path=${mdiClose}
+                      ></ha-icon-button>
+                    `
+                  : html`
+                      <ha-icon-button
+                        slot="suffix"
+                        .path=${this.icon}
+                      ></ha-icon-button>
+                    `}
+              </paper-input-container>
             </label>
           `}
     `;
   }
 
-  private _openFilePicker() {
-    this._input?.click();
-  }
-
   private _handleDrop(ev: DragEvent) {
     ev.preventDefault();
     ev.stopPropagation();
@@ -152,66 +137,40 @@ export class HaFileUpload extends LitElement {
   }
 
   static get styles() {
-    return [
-      styles,
-      css`
-        :host {
-          display: block;
-        }
-        .mdc-text-field--filled {
-          height: auto;
-          padding-top: 16px;
-          cursor: pointer;
-        }
-        .mdc-text-field--filled.mdc-text-field--with-trailing-icon {
-          padding-top: 28px;
-        }
-        .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon {
-          color: var(--secondary-text-color);
-        }
-        .mdc-text-field--filled.mdc-text-field--with-trailing-icon
-          .mdc-text-field__icon {
-          align-self: flex-end;
-        }
-        .mdc-text-field__icon--leading {
-          margin-bottom: 12px;
-        }
-        .mdc-text-field--filled .mdc-floating-label--float-above {
-          transform: scale(0.75);
-          top: 8px;
-        }
-        .dragged:before {
-          position: var(--layout-fit_-_position);
-          top: var(--layout-fit_-_top);
-          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;
-        }
-      `,
-    ];
+    return css`
+      paper-input-container {
+        position: relative;
+        padding: 8px;
+        margin: 0 -8px;
+      }
+      paper-input-container.dragged:before {
+        position: var(--layout-fit_-_position);
+        top: var(--layout-fit_-_top);
+        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;
+      }
+      input.file {
+        display: none;
+      }
+      img {
+        max-width: 125px;
+        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,9 +9,7 @@ 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
-        ? `: ${this.schema.value}`
-        : ""}`;
+    return html`<span class="label">${this.label}</span>: ${this.schema.value}`;
   }
 
   static get styles(): CSSResultGroup {

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

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

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

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

src/components/ha-form/types.ts

@@ -11,8 +11,7 @@ export type HaFormSchema =
   | HaFormSelectSchema
   | HaFormMultiSelectSchema
   | HaFormTimeSchema
-  | HaFormSelector
-  | HaFormGridSchema;
+  | HaFormSelector;
 
 export interface HaFormBaseSchema {
   name: string;
@@ -26,13 +25,6 @@ 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;
@@ -40,7 +32,7 @@ export interface HaFormSelector extends HaFormBaseSchema {
 
 export interface HaFormConstantSchema extends HaFormBaseSchema {
   type: "constant";
-  value?: string;
+  value: string;
 }
 
 export interface HaFormIntegerSchema extends HaFormBaseSchema {
@@ -57,7 +49,7 @@ export interface HaFormSelectSchema extends HaFormBaseSchema {
 
 export interface HaFormMultiSelectSchema extends HaFormBaseSchema {
   type: "multi_select";
-  options: Record<string, string> | string[] | Array<[string, string]>;
+  options: Record<string, string> | string[];
 }
 
 export interface HaFormFloatSchema extends HaFormBaseSchema {

src/components/ha-qr-scanner.ts

@@ -1,5 +1,6 @@
 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

@@ -1,57 +0,0 @@
-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,12 +35,9 @@ 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,13 +50,7 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
 
   private _filterEntities = (entity: HassEntity): boolean => {
     if (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)
-      ) {
+      if (computeStateDomain(entity) !== this.selector.entity.domain) {
         return false;
       }
     }

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

@@ -22,8 +22,6 @@ 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

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

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

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

@@ -19,24 +19,22 @@ 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.selector.number.mode !== "box"
-        ? html`${this.label}<ha-slider
-              .min=${this.selector.number.min}
-              .max=${this.selector.number.max}
-              .value=${this._value}
-              .step=${this.selector.number.step ?? 1}
-              .disabled=${this.disabled}
-              .required=${this.required}
-              pin
-              ignore-bar-touch
-              @change=${this._handleSliderChange}
-            >
-            </ha-slider>`
+    return html`${this.label}
+      ${this.selector.number.mode !== "box"
+        ? html`<ha-slider
+            .min=${this.selector.number.min}
+            .max=${this.selector.number.max}
+            .value=${this._value}
+            .step=${this.selector.number.step ?? 1}
+            .disabled=${this.disabled}
+            pin
+            ignore-bar-touch
+            @change=${this._handleSliderChange}
+          >
+          </ha-slider>`
         : ""}
       <ha-textfield
         inputMode="numeric"
@@ -46,10 +44,9 @@ 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
@@ -60,16 +57,14 @@ export class HaNumberSelector extends LitElement {
   }
 
   private get _value() {
-    return this.value ?? (this.selector.number.min || 0);
+    return this.value ?? 0;
   }
 
   private _handleInputChange(ev) {
     ev.stopPropagation();
     const value =
       ev.target.value === "" || isNaN(ev.target.value)
-        ? this.required
-          ? this.selector.number.min || 0
-          : undefined
+        ? 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 "../ha-select";
+import "@material/mwc-select/mwc-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`<ha-select
+    return html`<mwc-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>`;
       })}
-    </ha-select>`;
+    </mwc-select>`;
   }
 
   private _valueChanged(ev) {
@@ -53,7 +53,7 @@ export class HaSelectSelector extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-select {
+      mwc-select {
         width: 100%;
       }
     `;

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

@@ -69,14 +69,10 @@ export class HaTextSelector extends LitElement {
   }
 
   private _handleChange(ev) {
-    let value = ev.target.value;
+    const 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

@@ -1,34 +0,0 @@
-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-time.ts

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

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 type { Selector } from "../../data/selector";
-import type { HomeAssistant } from "../../types";
+import { Selector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
 import "./ha-selector-action";
 import "./ha-selector-addon";
 import "./ha-selector-area";
@@ -18,9 +18,6 @@ import "./ha-selector-target";
 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,12 +9,6 @@ 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 (
@@ -59,15 +53,6 @@ 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 override render(): TemplateResult {
+  protected render(): TemplateResult {
     if (this._error) {
       return html`<ha-alert alert-type="error">${this._error}</ha-alert>`;
     }
@@ -58,19 +58,12 @@ class HaWebRtcPlayer extends LitElement {
     `;
   }
 
-  public override connectedCallback() {
-    super.connectedCallback();
-    if (this.hasUpdated) {
-      this._startWebRtc();
-    }
-  }
-
-  public override disconnectedCallback() {
+  public disconnectedCallback() {
     super.disconnectedCallback();
     this._cleanUp();
   }
 
-  protected override updated(changedProperties: PropertyValues<this>) {
+  protected updated(changedProperties: PropertyValues<this>) {
     if (!changedProperties.has("entityid")) {
       return;
     }

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

@@ -1,337 +0,0 @@
-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, query, state } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import type {
@@ -13,11 +13,7 @@ import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import "../ha-dialog";
 import "./ha-media-player-browse";
-import "./ha-media-manage-button";
-import type {
-  HaMediaPlayerBrowse,
-  MediaPlayerItemId,
-} from "./ha-media-player-browse";
+import type { MediaPlayerItemId } from "./ha-media-player-browse";
 import { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog";
 
 @customElement("dialog-media-player-browse")
@@ -30,14 +26,12 @@ 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 || [
+    this._navigateIds = [
       {
-        media_content_id: undefined,
-        media_content_type: undefined,
+        media_content_id: this._params.mediaContentId,
+        media_content_type: this._params.mediaContentType,
       },
     ];
   }
@@ -86,12 +80,6 @@ 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}
@@ -136,10 +124,6 @@ class DialogMediaPlayerBrowse extends LitElement {
     return this._params!.action || "play";
   }
 
-  private _refreshMedia() {
-    this._browser.refresh();
-  }
-
   static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
@@ -173,10 +157,6 @@ 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,10 +1,9 @@
+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,
@@ -12,25 +11,12 @@ import {
   getCloudTtsLanguages,
   getCloudTtsSupportedGenders,
 } from "../../data/cloud/tts";
-import {
-  MediaPlayerBrowseAction,
-  MediaPlayerItem,
-} from "../../data/media-player";
-import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
-import { buttonLinkStyle } from "../../resources/styles";
+import { MediaPlayerBrowseAction } from "../../data/media-player";
 import { HomeAssistant } from "../../types";
-import "../ha-select";
 import "../ha-textarea";
-
-export interface TtsMediaPickedEvent {
-  item: MediaPlayerItem;
-}
-
-declare global {
-  interface HASSDomEvents {
-    "tts-picked": TtsMediaPickedEvent;
-  }
-}
+import { buttonLinkStyle } from "../../resources/styles";
+import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
+import { LocalStorage } from "../../common/decorators/local-storage";
 
 @customElement("ha-browse-media-tts")
 class BrowseMediaTTS extends LitElement {
@@ -46,55 +32,40 @@ class BrowseMediaTTS extends LitElement {
 
   @state() private _cloudTTSInfo?: CloudTTSInfo;
 
-  @LocalStorage("cloudTtsTryMessage", true, false) private _message!: string;
+  @LocalStorage("cloudTtsTryMessage", false, false) private _message!: string;
 
   protected render() {
-    return html`<ha-card>
-      <div class="card-content">
-        <ha-textarea
-          autogrow
-          .label=${this.hass.localize(
-            "ui.components.media-browser.tts.message"
-          )}
-          .value=${this._message ||
-          this.hass.localize(
-            "ui.components.media-browser.tts.example_message",
-            {
-              name: this.hass.user?.name || "",
-            }
-          )}
-        >
-        </ha-textarea>
-        ${this._cloudDefaultOptions ? this._renderCloudOptions() : ""}
-      </div>
-      <div class="card-actions">
+    return html`
+      <ha-textarea
+        autogrow
+        .label=${this.hass.localize("ui.panel.media-browser.tts.message")}
+        .value=${this._message ||
+        this.hass.localize("ui.panel.media-browser.tts.example_message", {
+          name: this.hass.user?.name || "",
+        })}
+      >
+      </ha-textarea>
+      ${this._cloudDefaultOptions ? this._renderCloudOptions() : ""}
+      <div class="actions">
         ${this._cloudDefaultOptions &&
         (this._cloudDefaultOptions![0] !== this._cloudOptions![0] ||
           this._cloudDefaultOptions![1] !== this._cloudOptions![1])
           ? html`
               <button class="link" @click=${this._storeDefaults}>
                 ${this.hass.localize(
-                  "ui.components.media-browser.tts.set_as_default"
+                  "ui.panel.media-browser.tts.set_as_default"
                 )}
               </button>
             `
           : html`<span></span>`}
-
-        <mwc-button @click=${this._ttsClicked}>
-          ${this.hass.localize(
-            `ui.components.media-browser.tts.action_${this.action}`
-          )}
-        </mwc-button>
+        <mwc-button raised label="Say" @click=${this._ttsClicked}></mwc-button>
       </div>
-    </ha-card> `;
+    `;
   }
 
   private _renderCloudOptions() {
-    if (!this._cloudTTSInfo || !this._cloudOptions) {
-      return "";
-    }
     const languages = this.getLanguages(this._cloudTTSInfo);
-    const selectedVoice = this._cloudOptions;
+    const selectedVoice = this._cloudOptions!;
     const genders = this.getSupportedGenders(
       selectedVoice[0],
       this._cloudTTSInfo,
@@ -103,35 +74,31 @@ class BrowseMediaTTS extends LitElement {
 
     return html`
       <div class="cloud-options">
-        <ha-select
+        <mwc-select
           fixedMenuPosition
           naturalMenuWidth
-          .label=${this.hass.localize(
-            "ui.components.media-browser.tts.language"
-          )}
+          .label=${this.hass.localize("ui.panel.media-browser.tts.language")}
           .value=${selectedVoice[0]}
           @selected=${this._handleLanguageChange}
-          @closed=${stopPropagation}
         >
           ${languages.map(
             ([key, label]) =>
               html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
           )}
-        </ha-select>
+        </mwc-select>
 
-        <ha-select
+        <mwc-select
           fixedMenuPosition
           naturalMenuWidth
-          .label=${this.hass.localize("ui.components.media-browser.tts.gender")}
+          .label=${this.hass.localize("ui.panel.media-browser.tts.gender")}
           .value=${selectedVoice[1]}
           @selected=${this._handleGenderChange}
-          @closed=${stopPropagation}
         >
           ${genders.map(
             ([key, label]) =>
               html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
           )}
-        </ha-select>
+        </mwc-select>
       </div>
     `;
   }
@@ -139,37 +106,6 @@ class BrowseMediaTTS extends LitElement {
   protected override willUpdate(changedProps: PropertyValues): void {
     super.willUpdate(changedProps);
 
-    if (changedProps.has("item")) {
-      if (this.item.media_content_id) {
-        const params = new URLSearchParams(
-          this.item.media_content_id.split("?")[1]
-        );
-        const message = params.get("message");
-        const language = params.get("language");
-        const gender = params.get("gender");
-        if (message) {
-          this._message = message;
-        }
-        if (language && gender) {
-          this._cloudOptions = [language, gender];
-        }
-      }
-
-      if (this.isCloudItem && !this._cloudTTSInfo) {
-        getCloudTTSInfo(this.hass).then((info) => {
-          this._cloudTTSInfo = info;
-        });
-        fetchCloudStatus(this.hass).then((status) => {
-          if (status.logged_in) {
-            this._cloudDefaultOptions = status.prefs.tts_default_voice;
-            if (!this._cloudOptions) {
-              this._cloudOptions = { ...this._cloudDefaultOptions };
-            }
-          }
-        });
-      }
-    }
-
     if (changedProps.has("message")) {
       return;
     }
@@ -197,12 +133,30 @@ class BrowseMediaTTS extends LitElement {
     this._cloudOptions = [this._cloudOptions![0], ev.target.value];
   }
 
+  protected updated(changedProps: PropertyValues): void {
+    super.updated(changedProps);
+
+    if (changedProps.has("item")) {
+      if (this.isCloudItem && !this._cloudTTSInfo) {
+        getCloudTTSInfo(this.hass).then((info) => {
+          this._cloudTTSInfo = info;
+        });
+        fetchCloudStatus(this.hass).then((status) => {
+          if (status.logged_in) {
+            this._cloudDefaultOptions = status.prefs.tts_default_voice;
+            this._cloudOptions = { ...this._cloudDefaultOptions };
+          }
+        });
+      }
+    }
+  }
+
   private getLanguages = memoizeOne(getCloudTtsLanguages);
 
   private getSupportedGenders = memoizeOne(getCloudTtsSupportedGenders);
 
   private get isCloudItem(): boolean {
-    return this.item.media_content_id.startsWith("media-source://tts/cloud");
+    return this.item.media_content_id === "media-source://tts/cloud";
   }
 
   private async _ttsClicked(): Promise<void> {
@@ -215,12 +169,9 @@ class BrowseMediaTTS extends LitElement {
       query.append("language", this._cloudOptions[0]);
       query.append("gender", this._cloudOptions[1]);
     }
-    item.media_content_id = `${
-      item.media_content_id.split("?")[0]
-    }?${query.toString()}`;
+    item.media_content_id += `?${query.toString()}`;
     item.can_play = true;
-    item.title = message;
-    fireEvent(this, "tts-picked", { item });
+    fireEvent(this, "media-picked", { item });
   }
 
   private async _storeDefaults() {
@@ -234,7 +185,7 @@ class BrowseMediaTTS extends LitElement {
       this._cloudDefaultOptions = oldDefaults;
       showAlertDialog(this, {
         text: this.hass.localize(
-          "ui.components.media-browser.tts.faild_to_store_defaults",
+          "ui.panel.media-browser.tts.faild_to_store_defaults",
           { error: err.message || err }
         ),
       });
@@ -256,19 +207,18 @@ class BrowseMediaTTS extends LitElement {
         display: flex;
         justify-content: space-between;
       }
-      .cloud-options ha-select {
+      .cloud-options mwc-select {
         width: 48%;
       }
-      ha-textarea {
-        width: 100%;
+
+      .actions {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 16px;
       }
       button.link {
         color: var(--primary-color);
       }
-      .card-actions {
-        display: flex;
-        justify-content: space-between;
-      }
     `,
   ];
 }

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

@@ -1,69 +0,0 @@
-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,24 +34,22 @@ 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 "./ha-browse-media-tts";
-import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
 
 declare global {
   interface HASSDomEvents {
@@ -132,11 +130,6 @@ 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);
     }
@@ -164,11 +157,10 @@ 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 = currentItem.children_media_class
-      ? MediaClassBrowserSettings[currentItem.children_media_class]
-      : MediaClassBrowserSettings.directory;
+    const childrenMediaClass =
+      MediaClassBrowserSettings[currentItem.children_media_class];
 
     return html`
               ${
@@ -268,10 +260,9 @@ export class HaMediaPlayerBrowse extends LitElement {
                       .item=${currentItem}
                       .hass=${this.hass}
                       .action=${this.action}
-                      @tts-picked=${this._ttsPicked}
                     ></ha-browse-media-tts>
                   `
-                : !children.length && !currentItem.not_shown
+                : !currentItem.children?.length
                 ? html`
                     <div class="container no-items">
                       ${currentItem.media_content_id ===
@@ -303,7 +294,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                           childrenMediaClass.thumbnail_ratio === "portrait",
                       })}"
                     >
-                      ${children.map(
+                      ${currentItem.children.map(
                         (child) => html`
                           <div
                             class="child"
@@ -367,23 +358,11 @@ 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>
-                      ${children.map(
+                      ${currentItem.children.map(
                         (child) => html`
                           <mwc-list-item
                             @click=${this._childClicked}
@@ -427,25 +406,6 @@ 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>
                   `
             }
@@ -602,17 +562,7 @@ export class HaMediaPlayerBrowse extends LitElement {
   }
 
   private _runAction(item: MediaPlayerItem): void {
-    fireEvent(this, "media-picked", { item, navigateIds: this.navigateIds });
-  }
-
-  private _ttsPicked(ev: CustomEvent<TtsMediaPickedEvent>): void {
-    ev.stopPropagation();
-    const navigateIds = this.navigateIds.slice(0, -1);
-    navigateIds.push(ev.detail.item);
-    fireEvent(this, "media-picked", {
-      ...ev.detail,
-      navigateIds,
-    });
+    fireEvent(this, "media-picked", { item });
   }
 
   private async _childClicked(ev: MouseEvent): Promise<void> {
@@ -682,17 +632,6 @@ 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
@@ -923,17 +862,6 @@ 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

@@ -1,129 +0,0 @@
-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-browser-dialog.ts

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

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

@@ -1,18 +0,0 @@
-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/user/ha-user-picker.ts

@@ -1,4 +1,3 @@
-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";
@@ -6,8 +5,9 @@ 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`
-      <ha-select
+      <mwc-select
         .label=${this.label}
         .disabled=${this.disabled}
         .value=${this.value}
@@ -58,7 +58,7 @@ class HaUserPicker extends LitElement {
             </mwc-list-item>
           `
         )}
-      </ha-select>
+      </mwc-select>
     `;
   }
 

src/data/cloud.ts

@@ -47,7 +47,6 @@ export interface CloudPreferences {
 export interface CloudStatusLoggedIn {
   logged_in: true;
   cloud: "disconnected" | "connecting" | "connected";
-  cloud_last_disconnect_reason: { clean: boolean; reason: string } | null;
   email: string;
   google_registered: boolean;
   google_entities: EntityFilter;

src/data/config.ts

@@ -1,24 +0,0 @@
-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,7 +13,6 @@ 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,5 +1,4 @@
 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";
@@ -78,26 +77,12 @@ export const updateDeviceRegistryEntry = (
     ...updates,
   });
 
-export const removeConfigEntryFromDevice = (
-  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[]>({
+export const fetchDeviceRegistry = (conn) =>
+  conn.sendMessagePromise({
     type: "config/device_registry/list",
   });
 
-const subscribeDeviceRegistryUpdates = (
-  conn: Connection,
-  store: Store<DeviceRegistryEntry[]>
-) =>
+const subscribeDeviceRegistryUpdates = (conn, store) =>
   conn.subscribeEvents(
     debounce(
       () =>

src/data/hassio/addon.ts

@@ -84,10 +84,9 @@ export interface HassioAddonDetails extends HassioAddonInfo {
   options: Record<string, unknown>;
   privileged: any;
   protected: boolean;
-  rating: "1-8";
+  rating: "1-6";
   schema: HaFormSchema[] | null;
   services_role: string[];
-  signed: boolean;
   slug: string;
   startup: AddonStartup;
   stdin: boolean;

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 (${file.name})`);
+    throw new Error("Uploaded image is too large");
   } else if (resp.status !== 200) {
     throw new Error("Unknown error");
   }

src/data/input_datetime.ts

@@ -1,4 +1,3 @@
-import { HassEntity } from "home-assistant-js-websocket";
 import { HomeAssistant } from "../types";
 
 export interface InputDateTime {
@@ -18,19 +17,6 @@ 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

@@ -28,13 +28,11 @@ import type {
   HassEntityBase,
 } from "home-assistant-js-websocket";
 import { supportsFeature } from "../common/entity/supports-feature";
-import { MediaPlayerItemId } from "../components/media-player/ha-media-player-browse";
 import type { HomeAssistant } from "../types";
 import { UNAVAILABLE_STATES } from "./entity";
 
 interface MediaPlayerEntityAttributes extends HassEntityAttributeBase {
-  media_content_id?: string;
-  media_content_type?: string;
+  media_content_type?: any;
   media_artist?: string;
   media_playlist?: string;
   media_series_title?: string;
@@ -149,7 +147,6 @@ export const MediaClassBrowserSettings: {
 
 export interface MediaPickedEvent {
   item: MediaPlayerItem;
-  navigateIds: MediaPlayerItemId[];
 }
 
 export interface MediaPlayerThumbnail {
@@ -168,12 +165,11 @@ 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 = (
@@ -341,7 +337,7 @@ export const computeMediaControls = (
 };
 
 export const formatMediaTime = (seconds: number | undefined): string => {
-  if (seconds === undefined || seconds === Infinity) {
+  if (seconds === undefined) {
     return "";
   }
 
@@ -361,17 +357,3 @@ 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,18 +43,9 @@ export const uploadLocalMedia = async (
     }
   );
   if (resp.status === 413) {
-    throw new Error(`Uploaded file is too large (${file.name})`);
+    throw new Error("Uploaded image is too large");
   } 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/mqtt.ts

@@ -44,6 +44,15 @@ export const subscribeMQTTTopic = (
     topic,
   });
 
+export const removeMQTTDeviceEntry = (
+  hass: HomeAssistant,
+  deviceId: string
+): Promise<void> =>
+  hass.callWS({
+    type: "mqtt/device/remove",
+    device_id: deviceId,
+  });
+
 export const fetchMQTTDebugInfo = (
   hass: HomeAssistant,
   deviceId: string

src/data/script.ts

@@ -3,17 +3,6 @@ import {
   HassEntityBase,
   HassServiceTarget,
 } from "home-assistant-js-websocket";
-import {
-  object,
-  optional,
-  string,
-  union,
-  array,
-  assign,
-  literal,
-  is,
-  Describe,
-} from "superstruct";
 import { computeObjectId } from "../common/entity/compute_object_id";
 import { navigate } from "../common/navigate";
 import { HomeAssistant } from "../types";
@@ -23,48 +12,6 @@ import { BlueprintInput } from "./blueprint";
 export const MODES = ["single", "restart", "queued", "parallel"] as const;
 export const MODES_MAX = ["queued", "parallel"];
 
-export const baseActionStruct = object({
-  alias: optional(string()),
-});
-
-const targetStruct = object({
-  entity_id: optional(union([string(), array(string())])),
-  device_id: optional(union([string(), array(string())])),
-  area_id: optional(union([string(), array(string())])),
-});
-
-export const serviceActionStruct: Describe<ServiceAction> = assign(
-  baseActionStruct,
-  object({
-    service: optional(string()),
-    service_template: optional(string()),
-    entity_id: optional(string()),
-    target: optional(targetStruct),
-    data: optional(object()),
-  })
-);
-
-const playMediaActionStruct: Describe<PlayMediaAction> = assign(
-  baseActionStruct,
-  object({
-    service: literal("media_player.play_media"),
-    target: optional(object({ entity_id: optional(string()) })),
-    entity_id: optional(string()),
-    data: object({ media_content_id: string(), media_content_type: string() }),
-    metadata: object(),
-  })
-);
-
-const activateSceneActionStruct: Describe<ServiceSceneAction> = assign(
-  baseActionStruct,
-  object({
-    service: literal("scene.turn_on"),
-    target: optional(object({ entity_id: optional(string()) })),
-    entity_id: optional(string()),
-    metadata: object(),
-  })
-);
-
 export interface ScriptEntity extends HassEntityBase {
   attributes: HassEntityAttributeBase & {
     last_triggered: string;
@@ -101,12 +48,11 @@ export interface ServiceAction {
   service_template?: string;
   entity_id?: string;
   target?: HassServiceTarget;
-  data?: Record<string, unknown>;
+  data?: Record<string, any>;
 }
 
 export interface DeviceAction {
   alias?: string;
-  type: string;
   device_id: string;
   domain: string;
   entity_id: string;
@@ -124,12 +70,9 @@ export interface DelayAction {
   delay: number | Partial<DelayActionParts> | string;
 }
 
-export interface ServiceSceneAction {
-  alias?: string;
+export interface ServiceSceneAction extends ServiceAction {
   service: "scene.turn_on";
-  target?: { entity_id?: string };
-  entity_id?: string;
-  metadata: Record<string, unknown>;
+  metadata: Record<string, any>;
 }
 export interface LegacySceneAction {
   alias?: string;
@@ -151,15 +94,6 @@ export interface WaitForTriggerAction {
   continue_on_timeout?: boolean;
 }
 
-export interface PlayMediaAction {
-  alias?: string;
-  service: "media_player.play_media";
-  target?: { entity_id?: string };
-  entity_id?: string;
-  data: { media_content_id: string; media_content_type: string };
-  metadata: Record<string, unknown>;
-}
-
 export interface RepeatAction {
   alias?: string;
   repeat: CountRepeat | WhileRepeat | UntilRepeat;
@@ -216,7 +150,6 @@ export type Action =
   | RepeatAction
   | ChooseAction
   | VariablesAction
-  | PlayMediaAction
   | UnknownAction;
 
 export interface ActionTypes {
@@ -225,13 +158,13 @@ export interface ActionTypes {
   check_condition: Condition;
   fire_event: EventAction;
   device_action: DeviceAction;
-  activate_scene: SceneAction;
+  legacy_activate_scene: LegacySceneAction;
+  activate_scene: ServiceSceneAction;
   repeat: RepeatAction;
   choose: ChooseAction;
   wait_for_trigger: WaitForTriggerAction;
   variables: VariablesAction;
   service: ServiceAction;
-  play_media: PlayMediaAction;
   unknown: UnknownAction;
 }
 
@@ -291,7 +224,7 @@ export const getActionType = (action: Action): ActionType => {
     return "device_action";
   }
   if ("scene" in action) {
-    return "activate_scene";
+    return "legacy_activate_scene";
   }
   if ("repeat" in action) {
     return "repeat";
@@ -307,12 +240,12 @@ export const getActionType = (action: Action): ActionType => {
   }
   if ("service" in action) {
     if ("metadata" in action) {
-      if (is(action, activateSceneActionStruct)) {
+      if (
+        (action as ServiceAction).service === "scene.turn_on" &&
+        !Array.isArray((action as ServiceAction)?.target?.entity_id)
+      ) {
         return "activate_scene";
       }
-      if (is(action, playMediaActionStruct)) {
-        return "play_media";
-      }
     }
     return "service";
   }

src/data/script_i18n.ts

@@ -9,11 +9,10 @@ import {
   ActionType,
   ActionTypes,
   DelayAction,
-  DeviceAction,
   EventAction,
   getActionType,
-  PlayMediaAction,
-  SceneAction,
+  LegacySceneAction,
+  ServiceSceneAction,
   VariablesAction,
   WaitForTriggerAction,
 } from "./script";
@@ -104,32 +103,19 @@ export const describeAction = <T extends ActionType>(
     return `Delay ${duration}`;
   }
 
-  if (actionType === "activate_scene") {
-    const config = action as SceneAction;
-    let entityId: string | undefined;
-    if ("scene" in config) {
-      entityId = config.scene;
-    } else {
-      entityId = config.target?.entity_id || config.entity_id;
-    }
-    const sceneStateObj = entityId ? hass.states[entityId] : undefined;
+  if (actionType === "legacy_activate_scene") {
+    const config = action as LegacySceneAction;
+    const sceneStateObj = hass.states[config.scene];
     return `Activate scene ${
-      sceneStateObj
-        ? computeStateName(sceneStateObj)
-        : "scene" in config
-        ? config.scene
-        : config.target?.entity_id || config.entity_id
+      sceneStateObj ? computeStateName(sceneStateObj) : config.scene
     }`;
   }
 
-  if (actionType === "play_media") {
-    const config = action as PlayMediaAction;
-    const entityId = config.target?.entity_id || config.entity_id;
-    const mediaStateObj = entityId ? hass.states[entityId] : undefined;
-    return `Play ${config.metadata.title || config.data.media_content_id} on ${
-      mediaStateObj
-        ? computeStateName(mediaStateObj)
-        : config.target?.entity_id || config.entity_id
+  if (actionType === "activate_scene") {
+    const config = action as ServiceSceneAction;
+    const sceneStateObj = hass.states[config.target!.entity_id as string];
+    return `Activate scene ${
+      sceneStateObj ? computeStateName(sceneStateObj) : config.target!.entity_id
     }`;
   }
 
@@ -161,13 +147,5 @@ export const describeAction = <T extends ActionType>(
     return `Test ${describeCondition(action as Condition)}`;
   }
 
-  if (actionType === "device_action") {
-    const config = action as DeviceAction;
-    const stateObj = hass.states[config.entity_id as string];
-    return `${config.type || "Perform action with"} ${
-      stateObj ? computeStateName(stateObj) : config.entity_id
-    }`;
-  }
-
   return actionType;
 };

src/data/selector.ts

@@ -13,15 +13,12 @@ export type Selector =
   | StringSelector
   | ObjectSelector
   | SelectSelector
-  | IconSelector
-  | MediaSelector
-  | ThemeSelector
-  | LocationSelector;
+  | IconSelector;
 
 export interface EntitySelector {
   entity: {
     integration?: string;
-    domain?: string | string[];
+    domain?: string;
     device_class?: string;
   };
 }
@@ -88,8 +85,8 @@ export interface TargetSelector {
 
 export interface NumberSelector {
   number: {
-    min?: number;
-    max?: number;
+    min: number;
+    max: number;
     step?: number;
     mode?: "box" | "slider";
     unit_of_measurement?: string;
@@ -149,41 +146,6 @@ export interface SelectSelector {
 }
 
 export interface IconSelector {
-  icon: {
-    placeholder?: string;
-    fallbackPath?: string;
-  };
-}
-
-export interface ThemeSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
-  theme: {};
-}
-
-export interface MediaSelector {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  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;
-  media_content_type?: string;
-  metadata?: {
-    title?: string;
-    thumbnail?: string | null;
-    media_class?: string;
-    children_media_class?: string | null;
-    navigateIds?: { media_content_type: string; media_content_id: string }[];
-  };
+  icon: {};
 }

src/data/service.ts

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

src/data/tasmota.ts

@@ -0,0 +1,10 @@
+import { HomeAssistant } from "../types";
+
+export const removeTasmotaDeviceEntry = (
+  hass: HomeAssistant,
+  deviceId: string
+): Promise<void> =>
+  hass.callWS({
+    type: "tasmota/device/remove",
+    device_id: deviceId,
+  });

src/data/zone.ts

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