Merge branch 'dev' into Better-row-editor

gallery/src/data/media_players.ts

@@ -7,8 +7,8 @@ export const createMediaPlayerEntities = () => [
     media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
     media_artist: "Technohead",
     // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-    // Select Source + Stop + Clear + Play + Shuffle Set
+    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media
-    supported_features: 64063,
+    supported_features: 195135,
     entity_picture: "/images/album_cover_2.jpg",
     media_duration: 300,
     media_position: 50,
@@ -24,8 +24,8 @@ export const createMediaPlayerEntities = () => [
     media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
     media_artist: "Technohead",
     // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media
+    // Select Source + Stop + Clear + Play + Shuffle Set
-    supported_features: 195135,
+    supported_features: 64063,
     entity_picture: "/images/album_cover.jpg",
     media_duration: 300,
     media_position: 0,

gallery/src/demos/demo-hui-media-control-card.ts

@@ -146,16 +146,6 @@ const CONFIGS = [
     entity: media_player.receiver_off
     `,
   },
-  {
-    heading: "Grid Full Size",
-    config: `
-  - type: grid
-    columns: 1
-    cards:
-    - type: media-control
-      entity: media_player.music_paused
-    `,
-  },
 ];
 
 class DemoHuiMediControlCard extends PolymerElement {

hassio/src/dashboard/hassio-update.ts

@@ -74,7 +74,9 @@ export class HassioUpdate extends LitElement {
             "Supervisor",
             this.supervisor.supervisor,
             "hassio/supervisor/update",
-            `https://github.com//home-assistant/hassio/releases/tag/${this.supervisor.supervisor.version_latest}`
+            `https://github.com//home-assistant/hassio/releases/tag/${
+              this.supervisor.supervisor.version_latest
+            }`
           )}
           ${this.supervisor.host.features.includes("hassos")
             ? this._renderUpdateCard(

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20201212.0",
+    version="20201126.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/common/ensure-array.ts

@@ -1,6 +0,0 @@
-export const ensureArray = (value?: any) => {
-  if (!value || Array.isArray(value)) {
-    return value;
-  }
-  return [value];
-};

src/common/entity/compute_state_display.ts

@@ -67,10 +67,6 @@ export const computeStateDisplay = (
     }
   }
 
-  if (domain === "counter") {
-    return formatNumber(compareState, language);
-  }
-
   return (
     // Return device class translation
     (stateObj.attributes.device_class &&

src/common/util/copy-clipboard.ts

@@ -1,12 +1,8 @@
 export const copyToClipboard = (str) => {
-  if (navigator.clipboard) {
+  const el = document.createElement("textarea");
-    navigator.clipboard.writeText(str);
+  el.value = str;
-  } else {
+  document.body.appendChild(el);
-    const el = document.createElement("textarea");
+  el.select();
-    el.value = str;
+  document.execCommand("copy");
-    document.body.appendChild(el);
+  document.body.removeChild(el);
-    el.select();
-    document.execCommand("copy");
-    document.body.removeChild(el);
-  }
 };

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

@@ -98,12 +98,6 @@ export class HaDataTable extends LitElement {
 
   @property({ type: Boolean }) public hasFab = false;
 
-  /**
-   * Add an extra rows at the bottom of the datatabel
-   * @type {TemplateResult}
-   */
-  @property({ attribute: false }) public appendRow?;
-
   @property({ type: Boolean, attribute: "auto-height" })
   public autoHeight = false;
 
@@ -132,8 +126,6 @@ export class HaDataTable extends LitElement {
 
   @query("slot[name='header']") private _header!: HTMLSlotElement;
 
-  private _items: DataTableRowData[] = [];
-
   private _checkableRowsCount?: number;
 
   private _checkedRows: string[] = [];
@@ -326,13 +318,10 @@ export class HaDataTable extends LitElement {
                   @scroll=${this._saveScrollPos}
                 >
                   ${scroll({
-                    items: this._items,
+                    items: !this.hasFab
+                      ? this._filteredData
+                      : [...this._filteredData, ...[{ empty: true }]],
                     renderItem: (row: DataTableRowData, index) => {
-                      if (row.append) {
-                        return html`
-                          <div class="mdc-data-table__row">${row.content}</div>
-                        `;
-                      }
                       if (row.empty) {
                         return html` <div class="mdc-data-table__row"></div> `;
                       }
@@ -458,20 +447,6 @@ export class HaDataTable extends LitElement {
     if (this.curRequest !== curRequest) {
       return;
     }
-
-    if (this.appendRow || this.hasFab) {
-      this._items = [...data];
-
-      if (this.appendRow) {
-        this._items.push({ append: true, content: this.appendRow });
-      }
-
-      if (this.hasFab) {
-        this._items.push({ empty: true });
-      }
-    } else {
-      this._items = data;
-    }
     this._filteredData = data;
   }
 

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

@@ -139,7 +139,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
 
   private _filteredDevices: DeviceRegistryEntry[] = [];
 
-  private _getAreasWithDevices = memoizeOne(
+  private _getDevices = memoizeOne(
     (
       devices: DeviceRegistryEntry[],
       areas: AreaRegistryEntry[],
@@ -277,7 +277,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
     if (!this._devices || !this._areas || !this._entities) {
       return html``;
     }
-    const areas = this._getAreasWithDevices(
+    const areas = this._getDevices(
       this._devices,
       this._areas,
       this._entities,

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

@@ -1,5 +1,4 @@
-import "../ha-svg-icon";
+import "../ha-icon-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
@@ -13,8 +12,6 @@ import {
   html,
   LitElement,
   property,
-  PropertyValues,
-  query,
   TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
@@ -38,7 +35,6 @@ import {
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import { mdiClose, mdiMenuUp, mdiMenuDown } from "@mdi/js";
 
 interface Device {
   name: string;
@@ -115,10 +111,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
   @property({ type: Boolean })
   private _opened?: boolean;
 
-  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
-
-  private _init = false;
-
   private _getDevices = memoizeOne(
     (
       devices: DeviceRegistryEntry[],
@@ -130,27 +122,18 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
       deviceFilter: this["deviceFilter"]
     ): Device[] => {
       if (!devices.length) {
-        return [
+        return [];
-          {
-            id: "",
-            area: "",
-            name: this.hass.localize("ui.components.device-picker.no_devices"),
-          },
-        ];
       }
 
       const deviceEntityLookup: DeviceEntityLookup = {};
-
+      for (const entity of entities) {
-      if (includeDomains || excludeDomains || includeDeviceClasses) {
+        if (!entity.device_id) {
-        for (const entity of entities) {
+          continue;
-          if (!entity.device_id) {
-            continue;
-          }
-          if (!(entity.device_id in deviceEntityLookup)) {
-            deviceEntityLookup[entity.device_id] = [];
-          }
-          deviceEntityLookup[entity.device_id].push(entity);
         }
+        if (!(entity.device_id in deviceEntityLookup)) {
+          deviceEntityLookup[entity.device_id] = [];
+        }
+        deviceEntityLookup[entity.device_id].push(entity);
       }
 
       const areaLookup: { [areaId: string]: AreaRegistryEntry } = {};
@@ -158,9 +141,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
         areaLookup[area.area_id] = area;
       }
 
-      let inputDevices = devices.filter(
+      let inputDevices = [...devices];
-        (device) => device.id === this.value || !device.disabled_by
-      );
 
       if (includeDomains) {
         inputDevices = inputDevices.filter((device) => {
@@ -227,15 +208,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
             : this.hass.localize("ui.components.device-picker.no_area"),
         };
       });
-      if (!outputDevices.length) {
-        return [
-          {
-            id: "",
-            area: "",
-            name: this.hass.localize("ui.components.device-picker.no_match"),
-          },
-        ];
-      }
       if (outputDevices.length === 1) {
         return outputDevices;
       }
@@ -243,18 +215,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
     }
   );
 
-  public open() {
-    this.updateComplete.then(() => {
-      (this.shadowRoot?.querySelector("vaadin-combo-box-light") as any)?.open();
-    });
-  }
-
-  public focus() {
-    this.updateComplete.then(() => {
-      this.shadowRoot?.querySelector("paper-input")?.focus();
-    });
-  }
-
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       subscribeDeviceRegistry(this.hass.connection!, (devices) => {
@@ -269,33 +229,25 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
     ];
   }
 
-  protected updated(changedProps: PropertyValues) {
-    if (
-      (!this._init && this.devices && this.areas && this.entities) ||
-      (changedProps.has("_opened") && this._opened)
-    ) {
-      this._init = true;
-      (this._comboBox as any).items = this._getDevices(
-        this.devices!,
-        this.areas!,
-        this.entities!,
-        this.includeDomains,
-        this.excludeDomains,
-        this.includeDeviceClasses,
-        this.deviceFilter
-      );
-    }
-  }
-
   protected render(): TemplateResult {
     if (!this.devices || !this.areas || !this.entities) {
       return html``;
     }
+    const devices = this._getDevices(
+      this.devices,
+      this.areas,
+      this.entities,
+      this.includeDomains,
+      this.excludeDomains,
+      this.includeDeviceClasses,
+      this.deviceFilter
+    );
     return html`
       <vaadin-combo-box-light
         item-value-path="id"
         item-id-path="id"
         item-label-path="name"
+        .items=${devices}
         .value=${this._value}
         .renderer=${rowRenderer}
         @opened-changed=${this._openedChanged}
@@ -313,30 +265,34 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
         >
           ${this.value
             ? html`
-                <mwc-icon-button
+                <ha-icon-button
-                  .label=${this.hass.localize(
+                  aria-label=${this.hass.localize(
                     "ui.components.device-picker.clear"
                   )}
                   slot="suffix"
                   class="clear-button"
+                  icon="hass:close"
                   @click=${this._clearValue}
+                  no-ripple
                 >
-                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                  Clear
-                </mwc-icon-button>
+                </ha-icon-button>
+              `
+            : ""}
+          ${devices.length > 0
+            ? html`
+                <ha-icon-button
+                  aria-label=${this.hass.localize(
+                    "ui.components.device-picker.show_devices"
+                  )}
+                  slot="suffix"
+                  class="toggle-button"
+                  .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
+                >
+                  Toggle
+                </ha-icon-button>
               `
             : ""}
-
-          <mwc-icon-button
-            .label=${this.hass.localize(
-              "ui.components.device-picker.show_devices"
-            )}
-            slot="suffix"
-            class="toggle-button"
-          >
-            <ha-svg-icon
-              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-            ></ha-svg-icon>
-          </mwc-icon-button>
         </paper-input>
       </vaadin-combo-box-light>
     `;
@@ -373,7 +329,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   static get styles(): CSSResult {
     return css`
-      paper-input > mwc-icon-button {
+      paper-input > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;
         color: var(--secondary-text-color);

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

@@ -95,24 +95,13 @@ export class HaEntityPicker extends LitElement {
 
   @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
 
-  @property({ type: Boolean }) public hideClearIcon = false;
+  @property({ type: Boolean, attribute: "hide-clear-icon" })
+  public hideClearIcon = false;
 
   @property({ type: Boolean }) private _opened = false;
 
   @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
 
-  public open() {
-    this.updateComplete.then(() => {
-      (this.shadowRoot?.querySelector("vaadin-combo-box-light") as any)?.open();
-    });
-  }
-
-  public focus() {
-    this.updateComplete.then(() => {
-      this.shadowRoot?.querySelector("paper-input")?.focus();
-    });
-  }
-
   private _initedStates = false;
 
   private _states: HassEntity[] = [];
@@ -165,24 +154,6 @@ export class HaEntityPicker extends LitElement {
         );
       }
 
-      if (!states.length) {
-        return [
-          {
-            entity_id: "",
-            state: "",
-            last_changed: "",
-            last_updated: "",
-            context: { id: "", user_id: null },
-            attributes: {
-              friendly_name: this.hass!.localize(
-                "ui.components.entity.entity-picker.no_match"
-              ),
-              icon: "mdi:magnify",
-            },
-          },
-        ];
-      }
-
       return states;
     }
   );
@@ -233,6 +204,7 @@ export class HaEntityPicker extends LitElement {
           .label=${this.label === undefined
             ? this.hass.localize("ui.components.entity.entity-picker.entity")
             : this.label}
+          .value=${this._value}
           .disabled=${this.disabled}
           class="input"
           autocapitalize="none"

src/components/ha-area-picker.ts

@@ -1,5 +1,4 @@
-import "./ha-svg-icon";
+import "./ha-icon-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
@@ -15,8 +14,6 @@ import {
   property,
   internalProperty,
   TemplateResult,
-  PropertyValues,
-  query,
 } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import {
@@ -32,18 +29,6 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import memoizeOne from "memoize-one";
-import {
-  DeviceEntityLookup,
-  DeviceRegistryEntry,
-  subscribeDeviceRegistry,
-} from "../data/device_registry";
-import {
-  EntityRegistryEntry,
-  subscribeEntityRegistry,
-} from "../data/entity_registry";
-import { computeDomain } from "../common/entity/compute_domain";
-import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 
 const rowRenderer = (
   root: HTMLElement,
@@ -86,250 +71,31 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   @property() public placeholder?: string;
 
+  @property() public _areas?: AreaRegistryEntry[];
+
   @property({ type: Boolean, attribute: "no-add" })
   public noAdd?: boolean;
 
-  /**
-   * Show only areas with entities from specific domains.
-   * @type {Array}
-   * @attr include-domains
-   */
-  @property({ type: Array, attribute: "include-domains" })
-  public includeDomains?: string[];
-
-  /**
-   * Show no areas with entities of these domains.
-   * @type {Array}
-   * @attr exclude-domains
-   */
-  @property({ type: Array, attribute: "exclude-domains" })
-  public excludeDomains?: string[];
-
-  /**
-   * Show only areas with entities of these device classes.
-   * @type {Array}
-   * @attr include-device-classes
-   */
-  @property({ type: Array, attribute: "include-device-classes" })
-  public includeDeviceClasses?: string[];
-
-  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
-
-  @property() public entityFilter?: (entity: EntityRegistryEntry) => boolean;
-
-  @internalProperty() private _areas?: AreaRegistryEntry[];
-
-  @internalProperty() private _devices?: DeviceRegistryEntry[];
-
-  @internalProperty() private _entities?: EntityRegistryEntry[];
-
   @internalProperty() private _opened?: boolean;
 
-  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
-
-  private _init = false;
-
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
       subscribeAreaRegistry(this.hass.connection!, (areas) => {
-        this._areas = areas;
+        this._areas = this.noAdd
-      }),
+          ? areas
-      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
+          : [
-        this._devices = devices;
+              ...areas,
-      }),
+              {
-      subscribeEntityRegistry(this.hass.connection!, (entities) => {
+                area_id: "add_new",
-        this._entities = entities;
+                name: this.hass.localize("ui.components.area-picker.add_new"),
+              },
+            ];
       }),
     ];
   }
 
-  public open() {
-    this.updateComplete.then(() => {
-      (this.shadowRoot?.querySelector("vaadin-combo-box-light") as any)?.open();
-    });
-  }
-
-  public focus() {
-    this.updateComplete.then(() => {
-      this.shadowRoot?.querySelector("paper-input")?.focus();
-    });
-  }
-
-  private _getAreas = memoizeOne(
-    (
-      areas: AreaRegistryEntry[],
-      devices: DeviceRegistryEntry[],
-      entities: EntityRegistryEntry[],
-      includeDomains: this["includeDomains"],
-      excludeDomains: this["excludeDomains"],
-      includeDeviceClasses: this["includeDeviceClasses"],
-      deviceFilter: this["deviceFilter"],
-      entityFilter: this["entityFilter"],
-      noAdd: this["noAdd"]
-    ): AreaRegistryEntry[] => {
-      if (!areas.length) {
-        return [
-          {
-            area_id: "",
-            name: this.hass.localize("ui.components.area-picker.no_areas"),
-          },
-        ];
-      }
-
-      const deviceEntityLookup: DeviceEntityLookup = {};
-      let inputDevices: DeviceRegistryEntry[] | undefined;
-      let inputEntities: EntityRegistryEntry[] | undefined;
-
-      if (includeDomains || excludeDomains || includeDeviceClasses) {
-        for (const entity of entities) {
-          if (!entity.device_id) {
-            continue;
-          }
-          if (!(entity.device_id in deviceEntityLookup)) {
-            deviceEntityLookup[entity.device_id] = [];
-          }
-          deviceEntityLookup[entity.device_id].push(entity);
-        }
-        inputDevices = devices;
-        inputEntities = entities.filter((entity) => entity.area_id);
-      } else if (deviceFilter) {
-        inputDevices = devices;
-      } else if (entityFilter) {
-        inputEntities = entities.filter((entity) => entity.area_id);
-      }
-
-      if (includeDomains) {
-        inputDevices = inputDevices!.filter((device) => {
-          const devEntities = deviceEntityLookup[device.id];
-          if (!devEntities || !devEntities.length) {
-            return false;
-          }
-          return deviceEntityLookup[device.id].some((entity) =>
-            includeDomains.includes(computeDomain(entity.entity_id))
-          );
-        });
-        inputEntities = inputEntities!.filter((entity) =>
-          includeDomains.includes(computeDomain(entity.entity_id))
-        );
-      }
-
-      if (excludeDomains) {
-        inputDevices = inputDevices!.filter((device) => {
-          const devEntities = deviceEntityLookup[device.id];
-          if (!devEntities || !devEntities.length) {
-            return true;
-          }
-          return entities.every(
-            (entity) =>
-              !excludeDomains.includes(computeDomain(entity.entity_id))
-          );
-        });
-        inputEntities = inputEntities!.filter(
-          (entity) => !excludeDomains.includes(computeDomain(entity.entity_id))
-        );
-      }
-
-      if (includeDeviceClasses) {
-        inputDevices = inputDevices!.filter((device) => {
-          const devEntities = deviceEntityLookup[device.id];
-          if (!devEntities || !devEntities.length) {
-            return false;
-          }
-          return deviceEntityLookup[device.id].some((entity) => {
-            const stateObj = this.hass.states[entity.entity_id];
-            if (!stateObj) {
-              return false;
-            }
-            return (
-              stateObj.attributes.device_class &&
-              includeDeviceClasses.includes(stateObj.attributes.device_class)
-            );
-          });
-        });
-        inputEntities = inputEntities!.filter((entity) => {
-          const stateObj = this.hass.states[entity.entity_id];
-          return (
-            stateObj.attributes.device_class &&
-            includeDeviceClasses.includes(stateObj.attributes.device_class)
-          );
-        });
-      }
-
-      if (deviceFilter) {
-        inputDevices = inputDevices!.filter((device) => deviceFilter!(device));
-      }
-
-      if (entityFilter) {
-        inputEntities = inputEntities!.filter((entity) =>
-          entityFilter!(entity)
-        );
-      }
-
-      let outputAreas = areas;
-
-      let areaIds: string[] | undefined;
-
-      if (inputDevices) {
-        areaIds = inputDevices
-          .filter((device) => device.area_id)
-          .map((device) => device.area_id!);
-      }
-
-      if (inputEntities) {
-        areaIds = (areaIds ?? []).concat(
-          inputEntities
-            .filter((entity) => entity.area_id)
-            .map((entity) => entity.area_id!)
-        );
-      }
-
-      if (areaIds) {
-        outputAreas = areas.filter((area) => areaIds!.includes(area.area_id));
-      }
-
-      if (!outputAreas.length) {
-        outputAreas = [
-          {
-            area_id: "",
-            name: this.hass.localize("ui.components.area-picker.no_match"),
-          },
-        ];
-      }
-
-      return noAdd
-        ? outputAreas
-        : [
-            ...outputAreas,
-            {
-              area_id: "add_new",
-              name: this.hass.localize("ui.components.area-picker.add_new"),
-            },
-          ];
-    }
-  );
-
-  protected updated(changedProps: PropertyValues) {
-    if (
-      (!this._init && this._devices && this._areas && this._entities) ||
-      (changedProps.has("_opened") && this._opened)
-    ) {
-      this._init = true;
-      (this._comboBox as any).items = this._getAreas(
-        this._areas!,
-        this._devices!,
-        this._entities!,
-        this.includeDomains,
-        this.excludeDomains,
-        this.includeDeviceClasses,
-        this.deviceFilter,
-        this.entityFilter,
-        this.noAdd
-      );
-    }
-  }
-
   protected render(): TemplateResult {
-    if (!this._devices || !this._areas || !this._entities) {
+    if (!this._areas) {
       return html``;
     }
     return html`
@@ -337,6 +103,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
         item-value-path="area_id"
         item-id-path="area_id"
         item-label-path="name"
+        .items=${this._areas}
         .value=${this._value}
         .renderer=${rowRenderer}
         @opened-changed=${this._openedChanged}
@@ -357,28 +124,34 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
         >
           ${this.value
             ? html`
-                <mwc-icon-button
+                <ha-icon-button
-                  .label=${this.hass.localize(
+                  aria-label=${this.hass.localize(
                     "ui.components.area-picker.clear"
                   )}
                   slot="suffix"
                   class="clear-button"
+                  icon="hass:close"
                   @click=${this._clearValue}
+                  no-ripple
                 >
-                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                  ${this.hass.localize("ui.components.area-picker.clear")}
-                </mwc-icon-button>
+                </ha-icon-button>
+              `
+            : ""}
+          ${this._areas.length > 0
+            ? html`
+                <ha-icon-button
+                  aria-label=${this.hass.localize(
+                    "ui.components.area-picker.show_areas"
+                  )}
+                  slot="suffix"
+                  class="toggle-button"
+                  .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
+                >
+                  ${this.hass.localize("ui.components.area-picker.toggle")}
+                </ha-icon-button>
               `
             : ""}
-
-          <mwc-icon-button
-            .label=${this.hass.localize("ui.components.area-picker.toggle")}
-            slot="suffix"
-            class="toggle-button"
-          >
-            <ha-svg-icon
-              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
-            ></ha-svg-icon>
-          </mwc-icon-button>
         </paper-input>
       </vaadin-combo-box-light>
     `;
@@ -454,7 +227,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   static get styles(): CSSResult {
     return css`
-      paper-input > mwc-icon-button {
+      paper-input > ha-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 2px;
         color: var(--secondary-text-color);

src/components/ha-blueprint-picker.ts

@@ -52,7 +52,6 @@ class HaBluePrintPicker extends LitElement {
         .label=${this.label ||
         this.hass.localize("ui.components.blueprint-picker.label")}
         .disabled=${this.disabled}
-        horizontal-align="left"
       >
         <paper-listbox
           slot="dropdown-content"
@@ -111,9 +110,6 @@ class HaBluePrintPicker extends LitElement {
       paper-listbox {
         min-width: 200px;
       }
-      paper-item {
-        cursor: pointer;
-      }
     `;
   }
 }

src/components/ha-button-menu.ts

@@ -23,6 +23,8 @@ export class HaButtonMenu extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public fixed = false;
+
   @query("mwc-menu", true) private _menu?: Menu;
 
   public get items() {
@@ -39,6 +41,7 @@ export class HaButtonMenu extends LitElement {
         <slot name="trigger"></slot>
       </div>
       <mwc-menu
+        .fixed=${this.fixed}
         .corner=${this.corner}
         .multi=${this.multi}
         .activatable=${this.activatable}

src/components/ha-button-toggle-group.ts

@@ -11,7 +11,6 @@ import {
 import { fireEvent } from "../common/dom/fire_event";
 import type { ToggleButton } from "../types";
 import "./ha-svg-icon";
-import "@material/mwc-button/mwc-button";
 
 @customElement("ha-button-toggle-group")
 export class HaButtonToggleGroup extends LitElement {
@@ -22,22 +21,17 @@ export class HaButtonToggleGroup extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div>
-        ${this.buttons.map((button) =>
+        ${this.buttons.map(
-          button.iconPath
+          (button) => html`
-            ? html`<mwc-icon-button
+            <mwc-icon-button
-                .label=${button.label}
+              .label=${button.label}
-                .value=${button.value}
+              .value=${button.value}
-                ?active=${this.active === button.value}
+              ?active=${this.active === button.value}
-                @click=${this._handleClick}
+              @click=${this._handleClick}
-              >
+            >
-                <ha-svg-icon .path=${button.iconPath}></ha-svg-icon>
+              <ha-svg-icon .path=${button.iconPath}></ha-svg-icon>
-              </mwc-icon-button>`
+            </mwc-icon-button>
-            : html`<mwc-button
+          `
-                .value=${button.value}
-                ?active=${this.active === button.value}
-                @click=${this._handleClick}
-                >${button.label}</mwc-button
-              >`
         )}
       </div>
     `;
@@ -55,15 +49,13 @@ export class HaButtonToggleGroup extends LitElement {
         --mdc-icon-button-size: var(--button-toggle-size, 36px);
         --mdc-icon-size: var(--button-toggle-icon-size, 20px);
       }
-      mwc-icon-button,
+      mwc-icon-button {
-      mwc-button {
         border: 1px solid var(--primary-color);
         border-right-width: 0px;
         position: relative;
         cursor: pointer;
       }
-      mwc-icon-button::before,
+      mwc-icon-button::before {
-      mwc-button::before {
         top: 0;
         left: 0;
         width: 100%;
@@ -75,21 +67,17 @@ export class HaButtonToggleGroup extends LitElement {
         content: "";
         transition: opacity 15ms linear, background-color 15ms linear;
       }
-      mwc-icon-button[active]::before,
+      mwc-icon-button[active]::before {
-      mwc-button[active]::before {
         opacity: var(--mdc-icon-button-ripple-opacity, 0.12);
       }
-      mwc-icon-button:first-child,
+      mwc-icon-button:first-child {
-      mwc-button:first-child {
         border-radius: 4px 0 0 4px;
       }
-      mwc-icon-button:last-child,
+      mwc-icon-button:last-child {
-      mwc-button:last-child {
         border-radius: 0 4px 4px 0;
         border-right-width: 1px;
       }
-      mwc-icon-button:only-child,
+      mwc-icon-button:only-child {
-      mwc-button:only-child {
         border-radius: 4px;
         border-right-width: 1px;
       }

src/components/ha-dialog.ts

@@ -68,6 +68,12 @@ export class HaDialog extends MwcDialog {
           top: var(--dialog-surface-top);
           min-height: var(--mdc-dialog-min-height, auto);
         }
+
+        :host([full]) .mdc-dialog .mdc-dialog__surface {
+          height: 100%;
+          width: 100%;
+        }
+
         :host([flexContent]) .mdc-dialog .mdc-dialog__content {
           display: flex;
           flex-direction: column;
@@ -90,6 +96,23 @@ export class HaDialog extends MwcDialog {
           margin-left: 40px;
           margin-right: 0px;
         }
+
+        .mdc-dialog__content::-webkit-scrollbar {
+          width: 0.4rem;
+          height: 0.4rem;
+        }
+
+        .mdc-dialog__content::-webkit-scrollbar-thumb {
+          -webkit-border-radius: 4px;
+          border-radius: 4px;
+          background: var(--scrollbar-thumb-color);
+        }
+
+        .mdc-dialog__content {
+          overflow-y: auto;
+          scrollbar-color: var(--scrollbar-thumb-color) transparent;
+          scrollbar-width: thin;
+        }
       `,
     ];
   }

src/components/ha-expansion-panel.ts

@@ -1,3 +1,4 @@
+import { mdiChevronDown } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -8,10 +9,9 @@ import {
   query,
   TemplateResult,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-svg-icon";
-import { mdiChevronDown } from "@mdi/js";
-import { classMap } from "lit-html/directives/class-map";
 
 @customElement("ha-expansion-panel")
 class HaExpansionPanel extends LitElement {

src/components/ha-help-tooltip.ts

@@ -1,4 +1,4 @@
-import { mdiHelpCircle } from "@mdi/js";
+import { mdiHelpCircleOutline } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
@@ -18,7 +18,7 @@ export class HaHelpTooltip extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
+      <ha-svg-icon .path=${mdiHelpCircleOutline}></ha-svg-icon>
       <paper-tooltip
         offset="4"
         .position=${this.position}

src/components/ha-hls-player.ts

@@ -127,7 +127,7 @@ class HaHLSPlayer extends LitElement {
 
     // Parse playlist assuming it is a master playlist. Match group 1 is whether hevc, match group 2 is regular playlist url
     // See https://tools.ietf.org/html/rfc8216 for HLS spec details
-    const playlistRegexp = /#EXT-X-STREAM-INF:.*?(?:CODECS=".*?(hev1|hvc1)?\..*?".*?)?(?:\n|\r\n)(.+)/g;
+    const playlistRegexp = /#EXT-X-STREAM-INF:.*?(?:CODECS=".*?(?<isHevc>hev1|hvc1)?\..*?".*?)?(?:\n|\r\n)(?<streamUrl>.+)/g;
     const match = playlistRegexp.exec(masterPlaylist);
     const matchTwice = playlistRegexp.exec(masterPlaylist);
 
@@ -136,13 +136,17 @@ class HaHLSPlayer extends LitElement {
     let playlist_url: string;
     if (match !== null && matchTwice === null) {
       // Only send the regular playlist url if we match exactly once
-      playlist_url = new URL(match[2], this.url).href;
+      playlist_url = new URL(match.groups!.streamUrl, this.url).href;
     } else {
       playlist_url = this.url;
     }
 
     // If codec is HEVC and ExoPlayer is supported, use ExoPlayer.
-    if (this._useExoPlayer && match !== null && match[1] !== undefined) {
+    if (
+      this._useExoPlayer &&
+      match !== null &&
+      match.groups!.isHevc !== undefined
+    ) {
       this._renderHLSExoPlayer(playlist_url);
     } else if (hls.isSupported()) {
       this._renderHLSPolyfill(videoEl, hls, playlist_url);

src/components/ha-icon-input.ts

@@ -60,9 +60,8 @@ export class HaIconInput extends LitElement {
   static get styles() {
     return css`
       ha-icon {
-        position: absolute;
+        position: relative;
-        bottom: 2px;
+        bottom: 4px;
-        right: 0;
       }
     `;
   }

src/components/ha-relative-time.ts

@@ -13,7 +13,7 @@ import type { HomeAssistant } from "../types";
 class HaRelativeTime extends UpdatingElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public datetime?: string | Date;
+  @property({ attribute: false }) public datetime?: string;
 
   private _interval?: number;
 

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

@@ -1,45 +0,0 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
-import { HomeAssistant } from "../../types";
-import { ActionSelector } from "../../data/selector";
-import { Action } from "../../data/script";
-import "../../panels/config/automation/action/ha-automation-action";
-
-@customElement("ha-selector-action")
-export class HaActionSelector extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public selector!: ActionSelector;
-
-  @property() public value?: Action;
-
-  @property() public label?: string;
-
-  protected render() {
-    return html`<ha-automation-action
-      .actions=${this.value || []}
-      .hass=${this.hass}
-    ></ha-automation-action>`;
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      ha-automation-action {
-        display: block;
-        margin-bottom: 16px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-action": HaActionSelector;
-  }
-}

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

@@ -1,16 +1,7 @@
-import {
+import { customElement, html, LitElement, property } from "lit-element";
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
 import { HomeAssistant } from "../../types";
 import { AreaSelector } from "../../data/selector";
 import "../ha-area-picker";
-import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
-import { DeviceRegistryEntry } from "../../data/device_registry";
-import { EntityRegistryEntry } from "../../data/entity_registry";
 
 @customElement("ha-selector-area")
 export class HaAreaSelector extends LitElement {
@@ -22,77 +13,14 @@ export class HaAreaSelector extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() public _configEntries?: ConfigEntry[];
-
-  protected updated(changedProperties) {
-    if (changedProperties.has("selector")) {
-      const oldSelector = changedProperties.get("selector");
-      if (
-        oldSelector !== this.selector &&
-        this.selector.area.device?.integration
-      ) {
-        this._loadConfigEntries();
-      }
-    }
-  }
-
   protected render() {
     return html`<ha-area-picker
       .hass=${this.hass}
       .value=${this.value}
       .label=${this.label}
       no-add
-      .deviceFilter=${(device) => this._filterDevices(device)}
-      .entityFilter=${(entity) => this._filterEntities(entity)}
-      .includeDeviceClasses=${this.selector.area.entity?.device_class
-        ? [this.selector.area.entity.device_class]
-        : undefined}
-      .includeDomains=${this.selector.area.entity?.domain
-        ? [this.selector.area.entity.domain]
-        : undefined}
     ></ha-area-picker>`;
   }
-
-  private _filterEntities(entity: EntityRegistryEntry): boolean {
-    if (this.selector.area.entity?.integration) {
-      if (entity.platform !== this.selector.area.entity.integration) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  private _filterDevices(device: DeviceRegistryEntry): boolean {
-    if (
-      this.selector.area.device?.manufacturer &&
-      device.manufacturer !== this.selector.area.device.manufacturer
-    ) {
-      return false;
-    }
-    if (
-      this.selector.area.device?.model &&
-      device.model !== this.selector.area.device.model
-    ) {
-      return false;
-    }
-    if (this.selector.area.device?.integration) {
-      if (
-        this._configEntries &&
-        !this._configEntries.some((entry) =>
-          device.config_entries.includes(entry.entry_id)
-        )
-      ) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  private async _loadConfigEntries() {
-    this._configEntries = (await getConfigEntries(this.hass)).filter(
-      (entry) => entry.domain === this.selector.area.device?.integration
-    );
-  }
 }
 
 declare global {

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

@@ -63,8 +63,7 @@ export class HaDeviceSelector extends LitElement {
     }
     if (this.selector.device.integration) {
       if (
-        this._configEntries &&
+        !this._configEntries?.some((entry) =>
-        !this._configEntries.some((entry) =>
           device.config_entries.includes(entry.entry_id)
         )
       ) {

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

@@ -19,7 +19,7 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
 
   @property() public selector!: EntitySelector;
 
-  @internalProperty() private _entityPlaformLookup?: Record<string, string>;
+  @internalProperty() private _entities?: Record<string, string>;
 
   @property() public value?: any;
 
@@ -45,7 +45,7 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
           }
           entityLookup[confEnt.entity_id] = confEnt.platform;
         }
-        this._entityPlaformLookup = entityLookup;
+        this._entities = entityLookup;
       }),
     ];
   }
@@ -66,9 +66,8 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
     }
     if (this.selector.entity.integration) {
       if (
-        !this._entityPlaformLookup ||
+        !this._entities ||
-        this._entityPlaformLookup[entity.entity_id] !==
+        this._entities[entity.entity_id] !== this.selector.entity.integration
-          this.selector.entity.integration
       ) {
         return false;
       }

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

@@ -1,153 +0,0 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
-import { HomeAssistant } from "../../types";
-import { TargetSelector } from "../../data/selector";
-import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
-import { DeviceRegistryEntry } from "../../data/device_registry";
-import "../ha-target-picker";
-import "@material/mwc-list/mwc-list-item";
-import "@polymer/paper-input/paper-input";
-import "@material/mwc-list/mwc-list";
-import {
-  EntityRegistryEntry,
-  subscribeEntityRegistry,
-} from "../../data/entity_registry";
-import { Target } from "../../data/target";
-import "@material/mwc-tab-bar/mwc-tab-bar";
-import "@material/mwc-tab/mwc-tab";
-import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
-import { SubscribeMixin } from "../../mixins/subscribe-mixin";
-
-@customElement("ha-selector-target")
-export class HaTargetSelector extends SubscribeMixin(LitElement) {
-  @property() public hass!: HomeAssistant;
-
-  @property() public selector!: TargetSelector;
-
-  @property() public value?: Target;
-
-  @property() public label?: string;
-
-  @internalProperty() private _entityPlaformLookup?: Record<string, string>;
-
-  @internalProperty() private _configEntries?: ConfigEntry[];
-
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        const entityLookup = {};
-        for (const confEnt of entities) {
-          if (!confEnt.platform) {
-            continue;
-          }
-          entityLookup[confEnt.entity_id] = confEnt.platform;
-        }
-        this._entityPlaformLookup = entityLookup;
-      }),
-    ];
-  }
-
-  protected updated(changedProperties) {
-    if (changedProperties.has("selector")) {
-      const oldSelector = changedProperties.get("selector");
-      if (
-        oldSelector !== this.selector &&
-        this.selector.target.device?.integration
-      ) {
-        this._loadConfigEntries();
-      }
-    }
-  }
-
-  protected render() {
-    return html`<ha-target-picker
-      .hass=${this.hass}
-      .value=${this.value}
-      .deviceFilter=${(device) => this._filterDevices(device)}
-      .entityRegFilter=${(entity: EntityRegistryEntry) =>
-        this._filterRegEntities(entity)}
-      .entityFilter=${(entity: HassEntity) => this._filterEntities(entity)}
-      .includeDeviceClasses=${this.selector.target.entity?.device_class
-        ? [this.selector.target.entity.device_class]
-        : undefined}
-      .includeDomains=${this.selector.target.entity?.domain
-        ? [this.selector.target.entity.domain]
-        : undefined}
-    ></ha-target-picker>`;
-  }
-
-  private _filterEntities(entity: HassEntity): boolean {
-    if (this.selector.target.entity?.integration) {
-      if (
-        !this._entityPlaformLookup ||
-        this._entityPlaformLookup[entity.entity_id] !==
-          this.selector.target.entity.integration
-      ) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  private _filterRegEntities(entity: EntityRegistryEntry): boolean {
-    if (this.selector.target.entity?.integration) {
-      if (entity.platform !== this.selector.target.entity.integration) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  private _filterDevices(device: DeviceRegistryEntry): boolean {
-    if (
-      this.selector.target.device?.manufacturer &&
-      device.manufacturer !== this.selector.target.device.manufacturer
-    ) {
-      return false;
-    }
-    if (
-      this.selector.target.device?.model &&
-      device.model !== this.selector.target.device.model
-    ) {
-      return false;
-    }
-    if (this.selector.target.device?.integration) {
-      if (
-        !this._configEntries?.some((entry) =>
-          device.config_entries.includes(entry.entry_id)
-        )
-      ) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  private async _loadConfigEntries() {
-    this._configEntries = (await getConfigEntries(this.hass)).filter(
-      (entry) => entry.domain === this.selector.target.device?.integration
-    );
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      ha-target-picker {
-        margin: 0 -8px;
-        display: block;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-target": HaTargetSelector;
-  }
-}

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

@@ -5,11 +5,9 @@ import { HomeAssistant } from "../../types";
 import "./ha-selector-entity";
 import "./ha-selector-device";
 import "./ha-selector-area";
-import "./ha-selector-target";
 import "./ha-selector-number";
 import "./ha-selector-boolean";
 import "./ha-selector-time";
-import "./ha-selector-action";
 import { Selector } from "../../data/selector";
 
 @customElement("ha-selector")

src/components/ha-settings-row.ts

@@ -1,4 +1,4 @@
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-list/mwc-list-item";
 import {
   css,
   CSSResult,
@@ -18,13 +18,10 @@ export class HaSettingsRow extends LitElement {
 
   protected render(): SVGTemplateResult {
     return html`
-      <paper-item-body
+      <mwc-list-item noninteractive ?twoline=${!this.threeLine}>
-        ?two-line=${!this.threeLine}
-        ?three-line=${this.threeLine}
-      >
         <slot name="heading"></slot>
-        <div secondary><slot name="description"></slot></div>
+        <span slot="secondary"><slot name="description"></slot></span>
-      </paper-item-body>
+      </mwc-list-item>
       <slot></slot>
     `;
   }
@@ -37,14 +34,7 @@ export class HaSettingsRow extends LitElement {
         align-content: normal;
         align-self: auto;
         align-items: center;
-      }
+        justify-content: space-between;
-      paper-item-body {
-        padding: 8px 16px 8px 0;
-      }
-      paper-item-body[two-line] {
-        min-height: calc(
-          var(--paper-item-body-two-line-min-height, 72px) - 16px
-        );
       }
       :host([narrow]) {
         align-items: normal;
@@ -52,12 +42,12 @@ export class HaSettingsRow extends LitElement {
         border-top: 1px solid var(--divider-color);
         padding-bottom: 8px;
       }
+      mwc-list-item {
+        --mdc-list-side-padding: 0;
+      }
       ::slotted(ha-switch) {
         padding: 16px 0;
       }
-      div[secondary] {
-        white-space: normal;
-      }
     `;
   }
 }

src/components/ha-target-picker.ts

@@ -1,605 +0,0 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  unsafeCSS,
-} from "lit-element";
-import { HomeAssistant } from "../types";
-// @ts-ignore
-import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import {
-  mdiSofa,
-  mdiDevices,
-  mdiClose,
-  mdiPlus,
-  mdiUnfoldMoreVertical,
-} from "@mdi/js";
-import "./ha-svg-icon";
-import "./ha-icon";
-import "@material/mwc-icon-button/mwc-icon-button";
-import { classMap } from "lit-html/directives/class-map";
-import "@material/mwc-button/mwc-button";
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  AreaRegistryEntry,
-  subscribeAreaRegistry,
-} from "../data/area_registry";
-import {
-  computeDeviceName,
-  DeviceRegistryEntry,
-  subscribeDeviceRegistry,
-} from "../data/device_registry";
-import {
-  EntityRegistryEntry,
-  subscribeEntityRegistry,
-} from "../data/entity_registry";
-import { SubscribeMixin } from "../mixins/subscribe-mixin";
-import { computeStateName } from "../common/entity/compute_state_name";
-import { stateIcon } from "../common/entity/state_icon";
-import { fireEvent } from "../common/dom/fire_event";
-import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import { computeDomain } from "../common/entity/compute_domain";
-import { Target } from "../data/target";
-import { ensureArray } from "../common/ensure-array";
-import "./entity/ha-entity-picker";
-import "./device/ha-device-picker";
-import "./ha-area-picker";
-import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
-import "@polymer/paper-tooltip/paper-tooltip";
-
-@customElement("ha-target-picker")
-export class HaTargetPicker extends SubscribeMixin(LitElement) {
-  @property() public hass!: HomeAssistant;
-
-  @property() public value?: Target;
-
-  @property() public label?: string;
-
-  /**
-   * Show only targets with entities from specific domains.
-   * @type {Array}
-   * @attr include-domains
-   */
-  @property({ type: Array, attribute: "include-domains" })
-  public includeDomains?: string[];
-
-  /**
-   * Show only targets with entities of these device classes.
-   * @type {Array}
-   * @attr include-device-classes
-   */
-  @property({ type: Array, attribute: "include-device-classes" })
-  public includeDeviceClasses?: string[];
-
-  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
-
-  @property() public entityRegFilter?: (entity: EntityRegistryEntry) => boolean;
-
-  @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
-
-  @internalProperty() private _areas?: { [areaId: string]: AreaRegistryEntry };
-
-  @internalProperty() private _devices?: {
-    [deviceId: string]: DeviceRegistryEntry;
-  };
-
-  @internalProperty() private _entities?: EntityRegistryEntry[];
-
-  @internalProperty() private _addMode?: "area_id" | "entity_id" | "device_id";
-
-  @query("#input") private _inputElement?;
-
-  public hassSubscribe(): UnsubscribeFunc[] {
-    return [
-      subscribeAreaRegistry(this.hass.connection!, (areas) => {
-        const areaLookup: { [areaId: string]: AreaRegistryEntry } = {};
-        for (const area of areas) {
-          areaLookup[area.area_id] = area;
-        }
-        this._areas = areaLookup;
-      }),
-      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
-        const deviceLookup: { [deviceId: string]: DeviceRegistryEntry } = {};
-        for (const device of devices) {
-          deviceLookup[device.id] = device;
-        }
-        this._devices = deviceLookup;
-      }),
-      subscribeEntityRegistry(this.hass.connection!, (entities) => {
-        this._entities = entities;
-      }),
-    ];
-  }
-
-  protected render() {
-    if (!this._areas || !this._devices || !this._entities) {
-      return html``;
-    }
-    return html`<div class="mdc-chip-set items">
-        ${ensureArray(this.value?.area_id)?.map((area_id) => {
-          const area = this._areas![area_id];
-          return this._renderChip(
-            "area_id",
-            area_id,
-            area?.name || area_id,
-            undefined,
-            mdiSofa
-          );
-        })}
-        ${ensureArray(this.value?.device_id)?.map((device_id) => {
-          const device = this._devices![device_id];
-          return this._renderChip(
-            "device_id",
-            device_id,
-            device ? computeDeviceName(device, this.hass) : device_id,
-            undefined,
-            mdiDevices
-          );
-        })}
-        ${ensureArray(this.value?.entity_id)?.map((entity_id) => {
-          const entity = this.hass.states[entity_id];
-          return this._renderChip(
-            "entity_id",
-            entity_id,
-            entity ? computeStateName(entity) : entity_id,
-            entity ? stateIcon(entity) : undefined
-          );
-        })}
-      </div>
-      ${this._renderPicker()}
-      <div class="mdc-chip-set">
-        <div
-          class="mdc-chip area_id add"
-          .type=${"area_id"}
-          @click=${this._showPicker}
-        >
-          <div class="mdc-chip__ripple"></div>
-          <ha-svg-icon
-            class="mdc-chip__icon mdc-chip__icon--leading"
-            .path=${mdiPlus}
-          ></ha-svg-icon>
-          <span role="gridcell">
-            <span role="button" tabindex="0" class="mdc-chip__primary-action">
-              <span class="mdc-chip__text"
-                >${this.hass.localize(
-                  "ui.components.target-picker.add_area_id"
-                )}</span
-              >
-            </span>
-          </span>
-        </div>
-        <div
-          class="mdc-chip device_id add"
-          .type=${"device_id"}
-          @click=${this._showPicker}
-        >
-          <div class="mdc-chip__ripple"></div>
-          <ha-svg-icon
-            class="mdc-chip__icon mdc-chip__icon--leading"
-            .path=${mdiPlus}
-          ></ha-svg-icon>
-          <span role="gridcell">
-            <span role="button" tabindex="0" class="mdc-chip__primary-action">
-              <span class="mdc-chip__text"
-                >${this.hass.localize(
-                  "ui.components.target-picker.add_device_id"
-                )}</span
-              >
-            </span>
-          </span>
-        </div>
-        <div
-          class="mdc-chip entity_id add"
-          .type=${"entity_id"}
-          @click=${this._showPicker}
-        >
-          <div class="mdc-chip__ripple"></div>
-          <ha-svg-icon
-            class="mdc-chip__icon mdc-chip__icon--leading"
-            .path=${mdiPlus}
-          ></ha-svg-icon>
-          <span role="gridcell">
-            <span role="button" tabindex="0" class="mdc-chip__primary-action">
-              <span class="mdc-chip__text"
-                >${this.hass.localize(
-                  "ui.components.target-picker.add_entity_id"
-                )}</span
-              >
-            </span>
-          </span>
-        </div>
-      </div>`;
-  }
-
-  private async _showPicker(ev) {
-    this._addMode = ev.currentTarget.type;
-    await this.updateComplete;
-    setTimeout(() => {
-      this._inputElement?.open();
-      this._inputElement?.focus();
-    }, 0);
-  }
-
-  private _renderChip(
-    type: string,
-    id: string,
-    name: string,
-    icon?: string,
-    iconPath?: string
-  ) {
-    return html`
-      <div
-        class="mdc-chip ${classMap({
-          [type]: true,
-        })}"
-      >
-        ${iconPath
-          ? html`<ha-svg-icon
-              class="mdc-chip__icon mdc-chip__icon--leading"
-              .path=${iconPath}
-            ></ha-svg-icon>`
-          : ""}
-        ${icon
-          ? html`<ha-icon
-              class="mdc-chip__icon mdc-chip__icon--leading"
-              .icon=${icon}
-            ></ha-icon>`
-          : ""}
-        <span role="gridcell">
-          <span role="button" tabindex="0" class="mdc-chip__primary-action">
-            <span class="mdc-chip__text">${name}</span>
-          </span>
-        </span>
-        ${type === "entity_id"
-          ? ""
-          : html` <span role="gridcell">
-              <mwc-icon-button
-                class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
-                tabindex="-1"
-                role="button"
-                .label=${"Expand"}
-                .id=${id}
-                .type=${type}
-                @click=${this._handleExpand}
-              >
-                <ha-svg-icon .path=${mdiUnfoldMoreVertical}></ha-svg-icon>
-              </mwc-icon-button>
-              <paper-tooltip class="expand" animation-delay="0"
-                >${this.hass.localize(
-                  `ui.components.target-picker.expand_${type}`
-                )}</paper-tooltip
-              >
-            </span>`}
-        <span role="gridcell">
-          <mwc-icon-button
-            class="mdc-chip__icon mdc-chip__icon--trailing"
-            tabindex="-1"
-            role="button"
-            .label=${"Remove"}
-            .id=${id}
-            .type=${type}
-            @click=${this._handleRemove}
-          >
-            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-          </mwc-icon-button>
-          <paper-tooltip animation-delay="0"
-            >${this.hass.localize(
-              `ui.components.target-picker.remove_${type}`
-            )}</paper-tooltip
-          >
-        </span>
-      </div>
-    `;
-  }
-
-  private _renderPicker() {
-    switch (this._addMode) {
-      case "area_id":
-        return html`<ha-area-picker
-          .hass=${this.hass}
-          id="input"
-          .type=${"area_id"}
-          .label=${this.hass.localize(
-            "ui.components.target-picker.add_area_id"
-          )}
-          no-add
-          .deviceFilter=${this.deviceFilter}
-          .entityFilter=${this.entityRegFilter}
-          .includeDeviceClasses=${this.includeDeviceClasses}
-          .includeDomains=${this.includeDomains}
-          @value-changed=${this._targetPicked}
-        ></ha-area-picker>`;
-      case "device_id":
-        return html`<ha-device-picker
-          .hass=${this.hass}
-          id="input"
-          .type=${"device_id"}
-          .label=${this.hass.localize(
-            "ui.components.target-picker.add_device_id"
-          )}
-          .deviceFilter=${this.deviceFilter}
-          .entityFilter=${this.entityRegFilter}
-          .includeDeviceClasses=${this.includeDeviceClasses}
-          .includeDomains=${this.includeDomains}
-          @value-changed=${this._targetPicked}
-        ></ha-device-picker>`;
-      case "entity_id":
-        return html`<ha-entity-picker
-          .hass=${this.hass}
-          id="input"
-          .type=${"entity_id"}
-          .label=${this.hass.localize(
-            "ui.components.target-picker.add_entity_id"
-          )}
-          .entityFilter=${this.entityFilter}
-          .includeDeviceClasses=${this.includeDeviceClasses}
-          .includeDomains=${this.includeDomains}
-          @value-changed=${this._targetPicked}
-        ></ha-entity-picker>`;
-    }
-    return html``;
-  }
-
-  private _targetPicked(ev) {
-    ev.stopPropagation();
-    if (!ev.detail.value) {
-      return;
-    }
-    const value = ev.detail.value;
-    const target = ev.currentTarget;
-    target.value = "";
-    this._addMode = undefined;
-    fireEvent(this, "value-changed", {
-      value: this.value
-        ? {
-            ...this.value,
-            [target.type]: this.value[target.type]
-              ? [...ensureArray(this.value[target.type]), value]
-              : value,
-          }
-        : { [target.type]: value },
-    });
-  }
-
-  private _handleExpand(ev) {
-    const target = ev.currentTarget as any;
-    const newDevices: string[] = [];
-    const newEntities: string[] = [];
-    if (target.type === "area_id") {
-      Object.values(this._devices!).forEach((device) => {
-        if (
-          device.area_id === target.id &&
-          !this.value!.device_id?.includes(device.id) &&
-          this._deviceMeetsFilter(device)
-        ) {
-          newDevices.push(device.id);
-        }
-      });
-      this._entities!.forEach((entity) => {
-        if (
-          entity.area_id === target.id &&
-          !this.value!.entity_id?.includes(entity.entity_id) &&
-          this._entityRegMeetsFilter(entity)
-        ) {
-          newEntities.push(entity.entity_id);
-        }
-      });
-    } else if (target.type === "device_id") {
-      this._entities!.forEach((entity) => {
-        if (
-          entity.device_id === target.id &&
-          !this.value!.entity_id?.includes(entity.entity_id) &&
-          this._entityRegMeetsFilter(entity)
-        ) {
-          newEntities.push(entity.entity_id);
-        }
-      });
-    } else {
-      return;
-    }
-    let value = this.value;
-    if (newEntities.length) {
-      value = this._addItems(value, "entity_id", newEntities);
-    }
-    if (newDevices.length) {
-      value = this._addItems(value, "device_id", newDevices);
-    }
-    value = this._removeItem(value, target.type, target.id);
-    fireEvent(this, "value-changed", { value });
-  }
-
-  private _handleRemove(ev) {
-    const target = ev.currentTarget as any;
-    fireEvent(this, "value-changed", {
-      value: this._removeItem(this.value, target.type, target.id),
-    });
-  }
-
-  private _addItems(
-    value: this["value"],
-    type: string,
-    ids: string[]
-  ): this["value"] {
-    return {
-      ...value,
-      [type]: value![type] ? ensureArray(value![type])!.concat(ids) : ids,
-    };
-  }
-
-  private _removeItem(
-    value: this["value"],
-    type: string,
-    id: string
-  ): this["value"] {
-    const newVal = ensureArray(value![type])!.filter((val) => val !== id);
-    if (newVal.length) {
-      return {
-        ...value,
-        [type]: newVal,
-      };
-    }
-    const val = { ...value }!;
-    delete val[type];
-    if (Object.keys(val).length) {
-      return val;
-    }
-    return undefined;
-  }
-
-  private _deviceMeetsFilter(device: DeviceRegistryEntry): boolean {
-    const devEntities = this._entities?.filter(
-      (entity) => entity.device_id === device.id
-    );
-    if (this.includeDomains) {
-      if (!devEntities || !devEntities.length) {
-        return false;
-      }
-      if (
-        !devEntities.some((entity) =>
-          this.includeDomains!.includes(computeDomain(entity.entity_id))
-        )
-      ) {
-        return false;
-      }
-    }
-
-    if (this.includeDeviceClasses) {
-      if (!devEntities || !devEntities.length) {
-        return false;
-      }
-      if (
-        !devEntities.some((entity) => {
-          const stateObj = this.hass.states[entity.entity_id];
-          if (!stateObj) {
-            return false;
-          }
-          return (
-            stateObj.attributes.device_class &&
-            this.includeDeviceClasses!.includes(
-              stateObj.attributes.device_class
-            )
-          );
-        })
-      ) {
-        return false;
-      }
-    }
-
-    if (this.deviceFilter) {
-      return this.deviceFilter(device);
-    }
-    return true;
-  }
-
-  private _entityRegMeetsFilter(entity: EntityRegistryEntry): boolean {
-    if (
-      this.includeDomains &&
-      !this.includeDomains.includes(computeDomain(entity.entity_id))
-    ) {
-      return false;
-    }
-    if (this.includeDeviceClasses) {
-      const stateObj = this.hass.states[entity.entity_id];
-      if (!stateObj) {
-        return false;
-      }
-      if (
-        !stateObj.attributes.device_class ||
-        !this.includeDeviceClasses!.includes(stateObj.attributes.device_class)
-      ) {
-        return false;
-      }
-    }
-    if (this.entityRegFilter) {
-      return this.entityRegFilter(entity);
-    }
-    return true;
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      ${unsafeCSS(chipStyles)}
-      .mdc-chip {
-        color: var(--primary-text-color);
-      }
-      .items {
-        z-index: 2;
-      }
-      .mdc-chip.add {
-        color: rgba(0, 0, 0, 0.87);
-      }
-      .mdc-chip:not(.add) {
-        cursor: default;
-      }
-      .mdc-chip mwc-icon-button {
-        --mdc-icon-button-size: 24px;
-        display: flex;
-        align-items: center;
-        outline: none;
-      }
-      .mdc-chip mwc-icon-button ha-svg-icon {
-        border-radius: 50%;
-        background: var(--secondary-text-color);
-      }
-      .mdc-chip__icon.mdc-chip__icon--trailing {
-        width: 16px;
-        height: 16px;
-        --mdc-icon-size: 14px;
-        color: var(--card-background-color);
-      }
-      .mdc-chip__icon--leading {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        --mdc-icon-size: 20px;
-        border-radius: 50%;
-        padding: 6px;
-        margin-left: -14px !important;
-      }
-      .expand-btn {
-        margin-right: 0;
-      }
-      .mdc-chip.area_id:not(.add) {
-        border: 2px solid #fed6a4;
-        background: var(--card-background-color);
-      }
-      .mdc-chip.area_id:not(.add) .mdc-chip__icon--leading,
-      .mdc-chip.area_id.add {
-        background: #fed6a4;
-      }
-      .mdc-chip.device_id:not(.add) {
-        border: 2px solid #a8e1fb;
-        background: var(--card-background-color);
-      }
-      .mdc-chip.device_id:not(.add) .mdc-chip__icon--leading,
-      .mdc-chip.device_id.add {
-        background: #a8e1fb;
-      }
-      .mdc-chip.entity_id:not(.add) {
-        border: 2px solid #d2e7b9;
-        background: var(--card-background-color);
-      }
-      .mdc-chip.entity_id:not(.add) .mdc-chip__icon--leading,
-      .mdc-chip.entity_id.add {
-        background: #d2e7b9;
-      }
-      .mdc-chip:hover {
-        z-index: 5;
-      }
-      paper-tooltip.expand {
-        min-width: 200px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-target-picker": HaTargetPicker;
-  }
-}

src/data/automation.ts

@@ -6,7 +6,7 @@ import { navigate } from "../common/navigate";
 import { Context, HomeAssistant } from "../types";
 import { BlueprintInput } from "./blueprint";
 import { DeviceCondition, DeviceTrigger } from "./device_automation";
-import { Action, MODES } from "./script";
+import { Action } from "./script";
 
 export interface AutomationEntity extends HassEntityBase {
   attributes: HassEntityAttributeBase & {
@@ -26,7 +26,7 @@ export interface ManualAutomationConfig {
   trigger: Trigger[];
   condition?: Condition[];
   action: Action[];
-  mode?: typeof MODES[number];
+  mode?: "single" | "restart" | "queued" | "parallel";
   max?: number;
 }
 

src/data/device_registry.ts

@@ -17,7 +17,6 @@ export interface DeviceRegistryEntry {
   area_id?: string;
   name_by_user?: string;
   entry_type: "service" | null;
-  disabled_by: string | null;
 }
 
 export interface DeviceEntityLookup {
@@ -27,7 +26,6 @@ export interface DeviceEntityLookup {
 export interface DeviceRegistryEntryMutableParams {
   area_id?: string | null;
   name_by_user?: string | null;
-  disabled_by?: string | null;
 }
 
 export const fallbackDeviceName = (

src/data/script.ts

@@ -7,13 +7,13 @@ import { navigate } from "../common/navigate";
 import { HomeAssistant } from "../types";
 import { Condition, Trigger } from "./automation";
 
-export const MODES = ["single", "restart", "queued", "parallel"] as const;
+export const MODES = ["single", "restart", "queued", "parallel"];
 export const MODES_MAX = ["queued", "parallel"];
 
 export interface ScriptEntity extends HassEntityBase {
   attributes: HassEntityAttributeBase & {
     last_triggered: string;
-    mode: typeof MODES[number];
+    mode: "single" | "restart" | "queued" | "parallel";
     current?: number;
     max?: number;
   };
@@ -23,7 +23,7 @@ export interface ScriptConfig {
   alias: string;
   sequence: Action[];
   icon?: string;
-  mode?: typeof MODES[number];
+  mode?: "single" | "restart" | "queued" | "parallel";
   max?: number;
 }
 

src/data/selector.ts

@@ -2,11 +2,9 @@ export type Selector =
   | EntitySelector
   | DeviceSelector
   | AreaSelector
-  | TargetSelector
   | NumberSelector
   | BooleanSelector
-  | TimeSelector
+  | TimeSelector;
-  | ActionSelector;
 
 export interface EntitySelector {
   entity: {
@@ -21,41 +19,13 @@ export interface DeviceSelector {
     integration?: string;
     manufacturer?: string;
     model?: string;
-    entity?: {
+    entity?: EntitySelector["entity"];
-      domain?: EntitySelector["entity"]["domain"];
-      device_class?: EntitySelector["entity"]["device_class"];
-    };
   };
 }
 
 export interface AreaSelector {
-  area: {
+  // eslint-disable-next-line @typescript-eslint/ban-types
-    entity?: {
+  area: {};
-      integration?: EntitySelector["entity"]["integration"];
-      domain?: EntitySelector["entity"]["domain"];
-      device_class?: EntitySelector["entity"]["device_class"];
-    };
-    device?: {
-      integration?: DeviceSelector["device"]["integration"];
-      manufacturer?: DeviceSelector["device"]["manufacturer"];
-      model?: DeviceSelector["device"]["model"];
-    };
-  };
-}
-
-export interface TargetSelector {
-  target: {
-    entity?: {
-      integration?: EntitySelector["entity"]["integration"];
-      domain?: EntitySelector["entity"]["domain"];
-      device_class?: EntitySelector["entity"]["device_class"];
-    };
-    device?: {
-      integration?: DeviceSelector["device"]["integration"];
-      manufacturer?: DeviceSelector["device"]["manufacturer"];
-      model?: DeviceSelector["device"]["model"];
-    };
-  };
 }
 
 export interface NumberSelector {
@@ -77,8 +47,3 @@ export interface TimeSelector {
   // eslint-disable-next-line @typescript-eslint/ban-types
   time: {};
 }
-
-export interface ActionSelector {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  action: {};
-}

src/data/target.ts

@@ -1,5 +0,0 @@
-export interface Target {
-  entity_id?: string[];
-  device_id?: string[];
-  area_id?: string[];
-}

src/data/user.ts

@@ -20,7 +20,6 @@ export interface User {
 
 export interface UpdateUserParams {
   name?: User["name"];
-  is_active?: User["is_active"];
   group_ids?: User["group_ids"];
 }
 

src/dialogs/generic/dialog-box.ts

@@ -17,17 +17,17 @@ import "../../components/ha-switch";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
-import { DialogBoxParams } from "./show-dialog-box";
+import { DialogParams } from "./show-dialog-box";
 
 @customElement("dialog-box")
 class DialogBox extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: DialogBoxParams;
+  @internalProperty() private _params?: DialogParams;
 
   @internalProperty() private _value?: string;
 
-  public async showDialog(params: DialogBoxParams): Promise<void> {
+  public async showDialog(params: DialogParams): Promise<void> {
     this._params = params;
     if (params.prompt) {
       this._value = params.defaultValue;
@@ -55,8 +55,8 @@ class DialogBox extends LitElement {
     return html`
       <ha-dialog
         open
-        ?scrimClickAction=${confirmPrompt}
+        ?scrimClickAction=${this._params.prompt}
-        ?escapeKeyAction=${confirmPrompt}
+        ?escapeKeyAction=${this._params.prompt}
         @closed=${this._dialogClosed}
         defaultAction="ignore"
         .heading=${this._params.title
@@ -140,10 +140,10 @@ class DialogBox extends LitElement {
   }
 
   private _dialogClosed(ev) {
-    if (this._params?.prompt && ev.detail.action === "ignore") {
+    if (ev.detail.action === "ignore") {
       return;
     }
-    this._dismiss();
+    this.closeDialog();
   }
 
   private _close(): void {

src/dialogs/generic/show-dialog-box.ts

@@ -1,31 +1,31 @@
 import { TemplateResult } from "lit-html";
 import { fireEvent } from "../../common/dom/fire_event";
 
-interface BaseDialogBoxParams {
+interface BaseDialogParams {
   confirmText?: string;
   text?: string | TemplateResult;
   title?: string;
   warning?: boolean;
 }
 
-export interface AlertDialogParams extends BaseDialogBoxParams {
+export interface AlertDialogParams extends BaseDialogParams {
   confirm?: () => void;
 }
 
-export interface ConfirmationDialogParams extends BaseDialogBoxParams {
+export interface ConfirmationDialogParams extends BaseDialogParams {
   dismissText?: string;
   confirm?: () => void;
   cancel?: () => void;
 }
 
-export interface PromptDialogParams extends BaseDialogBoxParams {
+export interface PromptDialogParams extends BaseDialogParams {
   inputLabel?: string;
   inputType?: string;
   defaultValue?: string;
   confirm?: (out?: string) => void;
 }
 
-export interface DialogBoxParams
+export interface DialogParams
   extends ConfirmationDialogParams,
     PromptDialogParams {
   confirm?: (out?: string) => void;
@@ -37,10 +37,10 @@ export const loadGenericDialog = () => import("./dialog-box");
 
 const showDialogHelper = (
   element: HTMLElement,
-  dialogParams: DialogBoxParams,
+  dialogParams: DialogParams,
   extra?: {
-    confirmation?: DialogBoxParams["confirmation"];
+    confirmation?: DialogParams["confirmation"];
-    prompt?: DialogBoxParams["prompt"];
+    prompt?: DialogParams["prompt"];
   }
 ) =>
   new Promise((resolve) => {

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

@@ -44,7 +44,7 @@ class MoreInfoSun extends LitElement {
               >
               <ha-relative-time
                 .hass=${this.hass}
-                .datetime=${item === "ris" ? risingDate : settingDate}
+                .datetimeObj=${item === "ris" ? risingDate : settingDate}
               ></ha-relative-time>
             </div>
             <div class="value">

src/layouts/hass-tabs-subpage-data-table.ts

@@ -60,12 +60,6 @@ export class HaTabsSubpageDataTable extends LitElement {
    */
   @property({ type: Boolean }) public hasFab = false;
 
-  /**
-   * Add an extra rows at the bottom of the datatabel
-   * @type {TemplateResult}
-   */
-  @property({ attribute: false }) public appendRow?;
-
   /**
    * Field with a unique id per entry in data.
    * @type {String}
@@ -177,7 +171,6 @@ export class HaTabsSubpageDataTable extends LitElement {
           .noDataText=${this.noDataText}
           .dir=${computeRTLDirection(this.hass)}
           .clickable=${this.clickable}
-          .appendRow=${this.appendRow}
         >
           ${!this.narrow
             ? html`

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -17,7 +17,6 @@ import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-detail";
-import { navigate } from "../../../common/navigate";
 
 class DialogAreaDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -155,8 +154,6 @@ class DialogAreaDetail extends LitElement {
     } finally {
       this._submitting = false;
     }
-
-    navigate(this, "/config/areas/dashboard");
   }
 
   static get styles(): CSSResult[] {

src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts

@@ -39,7 +39,7 @@ export class HaWaitForTriggerAction extends LitElement
         )}
       >
         <ha-switch
-          .checked=${continue_on_timeout ?? true}
+          .checked=${continue_on_timeout}
           @change=${this._continueChanged}
         ></ha-switch>
       </ha-formfield>

src/panels/config/automation/blueprint-automation-editor.ts

@@ -18,9 +18,13 @@ import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "../../../components/entity/ha-entity-toggle";
 import "@material/mwc-button/mwc-button";
+import "./trigger/ha-automation-trigger";
+import "./condition/ha-automation-condition";
+import "./action/ha-automation-action";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { haStyle } from "../../../resources/styles";
 import { HassEntity } from "home-assistant-js-websocket";
+import { navigate } from "../../../common/navigate";
 import {
   BlueprintOrError,
   Blueprints,
@@ -59,7 +63,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
 
   protected render() {
     const blueprint = this._blueprint;
-    return html`<ha-config-section vertical .isWide=${this.isWide}>
+    return html`<ha-config-section .isWide=${this.isWide}>
         ${!this.narrow
           ? html` <span slot="header">${this.config.alias}</span> `
           : ""}
@@ -115,7 +119,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
         </ha-card>
       </ha-config-section>
 
-      <ha-config-section vertical .isWide=${this.isWide}>
+      <ha-config-section .isWide=${this.isWide}>
         <span slot="header"
           >${this.hass.localize(
             "ui.panel.config.automation.editor.blueprint.header"
@@ -140,6 +144,11 @@ export class HaBlueprintAutomationEditor extends LitElement {
                     "ui.panel.config.automation.editor.blueprint.no_blueprints"
                   )
               : html`<ha-circular-progress active></ha-circular-progress>`}
+            <mwc-button @click=${this._navigateBlueprints}>
+              ${this.hass.localize(
+                "ui.panel.config.automation.editor.blueprint.manage_blueprints"
+              )}
+            </mwc-button>
           </div>
 
           ${this.config.use_blueprint.path
@@ -148,37 +157,41 @@ export class HaBlueprintAutomationEditor extends LitElement {
                   There is an error in this Blueprint: ${blueprint.error}
                 </p>`
               : html`${blueprint?.metadata.description
-                  ? html`<p class="card-content pre-line">
+                  ? html`<p>${blueprint.metadata.description}</p>`
-                      ${blueprint.metadata.description}
-                    </p>`
                   : ""}
                 ${blueprint?.metadata?.input &&
                 Object.keys(blueprint.metadata.input).length
-                  ? Object.entries(blueprint.metadata.input).map(
+                  ? html`<h3>
-                      ([key, value]) =>
+                        ${this.hass.localize(
-                        html`<ha-settings-row .narrow=${this.narrow}>
+                          "ui.panel.config.automation.editor.blueprint.inputs"
-                          <span slot="heading">${value?.name || key}</span>
+                        )}
-                          <span slot="description">${value?.description}</span>
+                      </h3>
-                          ${value?.selector
+                      ${Object.entries(blueprint.metadata.input).map(
-                            ? html`<ha-selector
+                        ([key, value]) =>
-                                .hass=${this.hass}
+                          html`<ha-settings-row .narrow=${this.narrow}>
-                                .selector=${value.selector}
+                            <span slot="heading">${value?.name || key}</span>
-                                .key=${key}
+                            <span slot="description"
-                                .value=${(this.config.use_blueprint.input &&
+                              >${value?.description}</span
-                                  this.config.use_blueprint.input[key]) ||
+                            >
-                                value?.default}
+                            ${value?.selector
-                                @value-changed=${this._inputChanged}
+                              ? html`<ha-selector
-                              ></ha-selector>`
+                                  .hass=${this.hass}
-                            : html`<paper-input
+                                  .selector=${value.selector}
-                                .key=${key}
+                                  .key=${key}
-                                required
+                                  .value=${(this.config.use_blueprint.input &&
-                                .value=${this.config.use_blueprint.input &&
+                                    this.config.use_blueprint.input[key]) ||
-                                this.config.use_blueprint.input[key]}
+                                  value?.default}
-                                @value-changed=${this._inputChanged}
+                                  @value-changed=${this._inputChanged}
-                                no-label-float
+                                ></ha-selector>`
-                              ></paper-input>`}
+                              : html`<paper-input
-                        </ha-settings-row>`
+                                  .key=${key}
-                    )
+                                  .value=${this.config.use_blueprint.input &&
+                                  this.config.use_blueprint.input[key]}
+                                  @value-changed=${this._inputChanged}
+                                  no-label-float
+                                ></paper-input>`}
+                          </ha-settings-row>`
+                      )}`
                   : html`<p class="padding">
                       ${this.hass.localize(
                         "ui.panel.config.automation.editor.blueprint.no_inputs"
@@ -224,18 +237,12 @@ export class HaBlueprintAutomationEditor extends LitElement {
     ) {
       return;
     }
-    const input = { ...this.config.use_blueprint.input, [key]: value };
-
-    if (value === "" || value === undefined) {
-      delete input[key];
-    }
-
     fireEvent(this, "value-changed", {
       value: {
         ...this.config!,
         use_blueprint: {
           ...this.config.use_blueprint,
-          input,
+          input: { ...this.config.use_blueprint.input, [key]: value },
         },
       },
     });
@@ -260,18 +267,25 @@ export class HaBlueprintAutomationEditor extends LitElement {
     });
   }
 
+  private _navigateBlueprints() {
+    navigate(this, "/config/blueprint");
+  }
+
   static get styles(): CSSResult[] {
     return [
       haStyle,
       css`
+        ha-card {
+          overflow: hidden;
+        }
         .padding {
           padding: 16px;
         }
-        .pre-line {
-          white-space: pre-line;
-        }
         .blueprint-picker-container {
           padding: 16px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
         }
         h3 {
           margin: 16px;
@@ -290,10 +304,10 @@ export class HaBlueprintAutomationEditor extends LitElement {
           border-top: 1px solid var(--divider-color);
         }
         :host(:not([narrow])) ha-settings-row paper-input {
-          width: 60%;
+          width: 50%;
         }
         :host(:not([narrow])) ha-settings-row ha-selector {
-          width: 60%;
+          width: 50%;
         }
       `,
     ];

src/panels/config/automation/ha-automation-editor.ts

@@ -32,7 +32,6 @@ import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
 import { showToast } from "../../../util/toast";
 import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
-import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import {
   AutomationConfig,
   AutomationEntity,
@@ -207,7 +206,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                         ? html`<blueprint-automation-editor
                             .hass=${this.hass}
                             .narrow=${this.narrow}
-                            .isWide=${this.isWide}
                             .stateObj=${stateObj}
                             .config=${this._config}
                             @value-changed=${this._valueChanged}
@@ -215,7 +213,6 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                         : html`<manual-automation-editor
                             .hass=${this.hass}
                             .narrow=${this.narrow}
-                            .isWide=${this.isWide}
                             .stateObj=${stateObj}
                             .config=${this._config}
                             @value-changed=${this._valueChanged}
@@ -397,7 +394,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   private async _copyYaml() {
     if (this._editor?.yaml) {
-      copyToClipboard(this._editor.yaml);
+      navigator.clipboard.writeText(this._editor.yaml);
     }
   }
 

src/panels/config/blueprint/dialog-import-blueprint.ts

@@ -12,7 +12,6 @@ import {
   internalProperty,
   query,
   TemplateResult,
-  css,
 } from "lit-element";
 import "../../../components/ha-dialog";
 import { haStyleDialog } from "../../../resources/styles";
@@ -74,9 +73,7 @@ class DialogImportBlueprint extends LitElement {
                   this._result.blueprint.metadata.domain
                 )}
                 <br />
-                <p class="pre-line">
+                ${this._result.blueprint.metadata.description}
-                  ${this._result.blueprint.metadata.description}
-                </p>
                 ${this._result.validation_errors
                   ? html`
                       <p class="error">
@@ -107,16 +104,7 @@ class DialogImportBlueprint extends LitElement {
                   <pre>${this._result.raw_data}</pre>
                 </ha-expansion-panel>`
             : html`${this.hass.localize(
-                  "ui.panel.config.blueprint.add.import_introduction_link",
+                  "ui.panel.config.blueprint.add.import_introduction"
-                  "community_link",
-                  html`<a
-                    href="https://www.home-assistant.io/get-blueprints"
-                    target="_blank"
-                    rel="noreferrer noopener"
-                    >${this.hass.localize(
-                      "ui.panel.config.blueprint.add.community_forums"
-                    )}</a
-                  >`
                 )}<paper-input
                   id="input"
                   .label=${this.hass.localize(
@@ -211,15 +199,8 @@ class DialogImportBlueprint extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResult {
-    return [
+    return haStyleDialog;
-      haStyleDialog,
-      css`
-        .pre-line {
-          white-space: pre-line;
-        }
-      `,
-    ];
   }
 }
 

src/panels/config/blueprint/ha-blueprint-overview.ts

@@ -1,6 +1,6 @@
 import "../../../components/ha-fab";
 import "@material/mwc-icon-button";
-import { mdiHelpCircle, mdiDelete, mdiRobot, mdiDownload } from "@mdi/js";
+import { mdiPlus, mdiHelpCircle, mdiDelete, mdiRobot } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   CSSResult,
@@ -112,6 +112,7 @@ class HaBlueprintOverview extends LitElement {
       create: {
         title: "",
         type: narrow ? "icon-button" : undefined,
+        width: narrow ? undefined : "180px",
         template: (_, blueprint: any) =>
           blueprint.error
             ? ""
@@ -125,9 +126,8 @@ class HaBlueprintOverview extends LitElement {
                   "ui.panel.config.blueprint.overview.use_blueprint"
                 )}
                 @click=${(ev) => this._createNew(ev)}
-              >
+                ><ha-svg-icon .path=${mdiRobot}></ha-svg-icon
-                <ha-svg-icon .path=${mdiRobot}></ha-svg-icon>
+              ></mwc-icon-button>`
-              </mwc-icon-button>`
             : html`<mwc-button
                 .blueprint=${blueprint}
                 @click=${(ev) => this._createNew(ev)}
@@ -170,23 +170,6 @@ class HaBlueprintOverview extends LitElement {
           "ui.panel.config.blueprint.overview.no_blueprints"
         )}
         hasFab
-        .appendRow=${html` <div
-          class="mdc-data-table__cell"
-          style="width: 100%; text-align: center;"
-          role="cell"
-        >
-          <a
-            href="https://www.home-assistant.io/get-blueprints"
-            target="_blank"
-            rel="noreferrer noopener"
-          >
-            <mwc-button
-              >${this.hass.localize(
-                "ui.panel.config.blueprint.overview.discover_more"
-              )}</mwc-button
-            >
-          </a>
-        </div>`}
       >
         <mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
           <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
@@ -199,7 +182,7 @@ class HaBlueprintOverview extends LitElement {
           extended
           @click=${this._addBlueprint}
         >
-          <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
         </ha-fab>
       </hass-tabs-subpage-data-table>
     `;
@@ -212,10 +195,7 @@ class HaBlueprintOverview extends LitElement {
         ${this.hass.localize("ui.panel.config.blueprint.overview.introduction")}
         <p>
           <a
-            href="${documentationUrl(
+            href="${documentationUrl(this.hass, "/docs/blueprint/editor/")}"
-              this.hass,
-              "/docs/automation/using_blueprints/"
-            )}"
             target="_blank"
             rel="noreferrer"
           >

src/panels/config/devices/device-detail/ha-device-entities-card.ts

@@ -8,6 +8,7 @@ import {
   html,
   LitElement,
   property,
+  internalProperty,
   PropertyValues,
   TemplateResult,
 } from "lit-element";
@@ -30,7 +31,7 @@ export class HaDeviceEntitiesCard extends LitElement {
 
   @property() public entities!: EntityRegistryStateEntry[];
 
-  @property() public showDisabled = false;
+  @internalProperty() private _showDisabled = false;
 
   private _entityRows: Array<LovelaceRow | HuiErrorCard> = [];
 
@@ -67,7 +68,7 @@ export class HaDeviceEntitiesCard extends LitElement {
                 })}
               </div>
               ${disabledEntities.length
-                ? !this.showDisabled
+                ? !this._showDisabled
                   ? html`
                       <button
                         class="show-more"
@@ -118,7 +119,7 @@ export class HaDeviceEntitiesCard extends LitElement {
   }
 
   private _toggleShowDisabled() {
-    this.showDisabled = !this.showDisabled;
+    this._showDisabled = !this._showDisabled;
   }
 
   private _renderEntity(entry: EntityRegistryStateEntry): TemplateResult {
@@ -226,9 +227,3 @@ export class HaDeviceEntitiesCard extends LitElement {
     `;
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-device-entities-card": HaDeviceEntitiesCard;
-  }
-}

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -19,11 +19,10 @@ import {
 
 import { DeviceRegistryDetailDialogParams } from "./show-dialog-device-registry-detail";
 import { HomeAssistant } from "../../../../types";
-import type { HaSwitch } from "../../../../components/ha-switch";
 import { PolymerChangedEvent } from "../../../../polymer-types";
 import { computeDeviceName } from "../../../../data/device_registry";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { haStyle, haStyleDialog } from "../../../../resources/styles";
+import { haStyleDialog } from "../../../../resources/styles";
 
 @customElement("dialog-device-registry-detail")
 class DialogDeviceRegistryDetail extends LitElement {
@@ -37,8 +36,6 @@ class DialogDeviceRegistryDetail extends LitElement {
 
   @internalProperty() private _areaId?: string;
 
-  @internalProperty() private _disabledBy!: string | null;
-
   @internalProperty() private _submitting?: boolean;
 
   public async showDialog(
@@ -48,7 +45,6 @@ class DialogDeviceRegistryDetail extends LitElement {
     this._error = undefined;
     this._nameByUser = this._params.device.name_by_user || "";
     this._areaId = this._params.device.area_id;
-    this._disabledBy = this._params.device.disabled_by;
     await this.updateComplete;
   }
 
@@ -84,32 +80,6 @@ class DialogDeviceRegistryDetail extends LitElement {
               .value=${this._areaId}
               @value-changed=${this._areaPicked}
             ></ha-area-picker>
-            <div class="row">
-              <ha-switch
-                .checked=${!this._disabledBy}
-                @change=${this._disabledByChanged}
-              >
-              </ha-switch>
-              <div>
-                <div>
-                  ${this.hass.localize("ui.panel.config.devices.enabled_label")}
-                </div>
-                <div class="secondary">
-                  ${this._disabledBy && this._disabledBy !== "user"
-                    ? this.hass.localize(
-                        "ui.panel.config.devices.enabled_cause",
-                        "cause",
-                        this.hass.localize(
-                          `config_entry.disabled_by.${this._disabledBy}`
-                        )
-                      )
-                    : ""}
-                  ${this.hass.localize(
-                    "ui.panel.config.devices.enabled_description"
-                  )}
-                </div>
-              </div>
-            </div>
           </div>
         </div>
         <mwc-button
@@ -139,17 +109,12 @@ class DialogDeviceRegistryDetail extends LitElement {
     this._areaId = event.detail.value;
   }
 
-  private _disabledByChanged(ev: Event): void {
-    this._disabledBy = (ev.target as HaSwitch).checked ? null : "user";
-  }
-
   private async _updateEntry(): Promise<void> {
     this._submitting = true;
     try {
       await this._params!.updateEntry({
         name_by_user: this._nameByUser.trim() || null,
         area_id: this._areaId || null,
-        disabled_by: this._disabledBy || null,
       });
       this._params = undefined;
     } catch (err) {
@@ -163,7 +128,6 @@ class DialogDeviceRegistryDetail extends LitElement {
 
   static get styles(): CSSResult[] {
     return [
-      haStyle,
       haStyleDialog,
       css`
         .form {
@@ -175,15 +139,6 @@ class DialogDeviceRegistryDetail extends LitElement {
         .error {
           color: var(--error-color);
         }
-        ha-switch {
-          margin-right: 16px;
-        }
-        .row {
-          margin-top: 8px;
-          color: var(--primary-text-color);
-          display: flex;
-          align-items: center;
-        }
       `,
     ];
   }

src/panels/config/devices/ha-config-device-page.ts

@@ -46,7 +46,6 @@ import "./device-detail/ha-device-entities-card";
 import "./device-detail/ha-device-info-card";
 import { showDeviceAutomationDialog } from "./device-detail/show-dialog-device-automation";
 import { brandsUrl } from "../../../util/brands-url";
-import { haStyle } from "../../../resources/styles";
 
 export interface EntityRegistryStateEntry extends EntityRegistryEntry {
   stateName?: string | null;
@@ -247,28 +246,6 @@ export class HaConfigDevicePage extends LitElement {
                 .devices=${this.devices}
                 .device=${device}
               >
-              ${
-                device.disabled_by
-                  ? html`
-                      <div>
-                        <p class="warning">
-                          ${this.hass.localize(
-                            "ui.panel.config.devices.enabled_cause",
-                            "cause",
-                            this.hass.localize(
-                              `ui.panel.config.devices.disabled_by.${device.disabled_by}`
-                            )
-                          )}
-                        </p>
-                      </div>
-                      <div class="card-actions" slot="actions">
-                        <mwc-button unelevated @click=${this._enableDevice}>
-                          ${this.hass.localize("ui.common.enable")}
-                        </mwc-button>
-                      </div>
-                    `
-                  : html``
-              }
               ${this._renderIntegrationInfo(device, integrations)}
               </ha-device-info-card>
 
@@ -278,7 +255,6 @@ export class HaConfigDevicePage extends LitElement {
                     <ha-device-entities-card
                       .hass=${this.hass}
                       .entities=${entities}
-                      .showDisabled=${device.disabled_by !== null}
                     >
                     </ha-device-entities-card>
                   `
@@ -296,14 +272,9 @@ export class HaConfigDevicePage extends LitElement {
                         )}
                         <ha-icon-button
                           @click=${this._showAutomationDialog}
-                          .disabled=${device.disabled_by}
+                          title=${this.hass.localize(
-                          title=${device.disabled_by
+                            "ui.panel.config.devices.automation.create"
-                            ? this.hass.localize(
+                          )}
-                                "ui.panel.config.devices.automation.create_disabled"
-                              )
-                            : this.hass.localize(
-                                "ui.panel.config.devices.automation.create"
-                              )}
                           icon="hass:plus-circle"
                         ></ha-icon-button>
                       </h1>
@@ -371,16 +342,9 @@ export class HaConfigDevicePage extends LitElement {
 
                                   <ha-icon-button
                                     @click=${this._createScene}
-                                    .disabled=${device.disabled_by}
+                                    title=${this.hass.localize(
-                                    title=${
+                                      "ui.panel.config.devices.scene.create"
-                                      device.disabled_by
+                                    )}
-                                        ? this.hass.localize(
-                                            "ui.panel.config.devices.scene.create_disabled"
-                                          )
-                                        : this.hass.localize(
-                                            "ui.panel.config.devices.scene.create"
-                                          )
-                                    }
                                     icon="hass:plus-circle"
                                   ></ha-icon-button>
                         </h1>
@@ -451,14 +415,9 @@ export class HaConfigDevicePage extends LitElement {
                           )}
                           <ha-icon-button
                             @click=${this._showScriptDialog}
-                            .disabled=${device.disabled_by}
+                            title=${this.hass.localize(
-                            title=${device.disabled_by
+                              "ui.panel.config.devices.script.create"
-                              ? this.hass.localize(
+                            )}
-                                  "ui.panel.config.devices.script.create_disabled"
-                                )
-                              : this.hass.localize(
-                                  "ui.panel.config.devices.script.create"
-                                )}
                             icon="hass:plus-circle"
                           ></ha-icon-button>
                         </h1>
@@ -673,137 +632,128 @@ export class HaConfigDevicePage extends LitElement {
     });
   }
 
-  private async _enableDevice(): Promise<void> {
+  static get styles(): CSSResult {
-    await updateDeviceRegistryEntry(this.hass, this.deviceId, {
+    return css`
-      disabled_by: null,
+      .container {
-    });
+        display: flex;
-  }
+        flex-wrap: wrap;
+        margin: auto;
+        max-width: 1000px;
+        margin-top: 32px;
+        margin-bottom: 32px;
+      }
 
-  static get styles(): CSSResult[] {
+      .card-header {
-    return [
+        display: flex;
-      haStyle,
+        align-items: center;
-      css`
+        justify-content: space-between;
-        .container {
+      }
-          display: flex;
-          flex-wrap: wrap;
-          margin: auto;
-          max-width: 1000px;
-          margin-top: 32px;
-          margin-bottom: 32px;
-        }
 
-        .card-header {
+      .card-header ha-icon-button {
-          display: flex;
+        margin-right: -8px;
-          align-items: center;
+        color: var(--primary-color);
-          justify-content: space-between;
+        height: auto;
-        }
+      }
 
-        .card-header ha-icon-button {
+      .device-info {
-          margin-right: -8px;
+        padding: 16px;
-          color: var(--primary-color);
+      }
-          height: auto;
-        }
 
-        .device-info {
+      .show-more {
-          padding: 16px;
+      }
-        }
 
-        .show-more {
+      h1 {
-        }
+        margin: 0;
+        font-family: var(--paper-font-headline_-_font-family);
+        -webkit-font-smoothing: var(
+          --paper-font-headline_-_-webkit-font-smoothing
+        );
+        font-size: var(--paper-font-headline_-_font-size);
+        font-weight: var(--paper-font-headline_-_font-weight);
+        letter-spacing: var(--paper-font-headline_-_letter-spacing);
+        line-height: var(--paper-font-headline_-_line-height);
+        opacity: var(--dark-primary-opacity);
+      }
 
-        h1 {
+      .header {
-          margin: 0;
+        display: flex;
-          font-family: var(--paper-font-headline_-_font-family);
+        justify-content: space-between;
-          -webkit-font-smoothing: var(
+      }
-            --paper-font-headline_-_-webkit-font-smoothing
-          );
-          font-size: var(--paper-font-headline_-_font-size);
-          font-weight: var(--paper-font-headline_-_font-weight);
-          letter-spacing: var(--paper-font-headline_-_letter-spacing);
-          line-height: var(--paper-font-headline_-_line-height);
-          opacity: var(--dark-primary-opacity);
-        }
 
-        .header {
+      .column,
-          display: flex;
+      .fullwidth {
-          justify-content: space-between;
+        padding: 8px;
-        }
+        box-sizing: border-box;
+      }
+      .column {
+        width: 33%;
+        flex-grow: 1;
+      }
+      .fullwidth {
+        width: 100%;
+        flex-grow: 1;
+      }
 
-        .column,
+      .header-right {
-        .fullwidth {
+        align-self: center;
-          padding: 8px;
+      }
-          box-sizing: border-box;
-        }
-        .column {
-          width: 33%;
-          flex-grow: 1;
-        }
-        .fullwidth {
-          width: 100%;
-          flex-grow: 1;
-        }
 
-        .header-right {
+      .header-right img {
-          align-self: center;
+        height: 30px;
-        }
+      }
 
-        .header-right img {
+      .header-right {
-          height: 30px;
+        display: flex;
-        }
+      }
 
-        .header-right {
+      .header-right:first-child {
-          display: flex;
+        width: 100%;
-        }
+        justify-content: flex-end;
+      }
 
-        .header-right:first-child {
+      .header-right > *:not(:first-child) {
-          width: 100%;
+        margin-left: 16px;
-          justify-content: flex-end;
+      }
-        }
 
-        .header-right > *:not(:first-child) {
+      .battery {
-          margin-left: 16px;
+        align-self: center;
-        }
+        align-items: center;
+        display: flex;
+      }
 
-        .battery {
+      .column > *:not(:first-child) {
-          align-self: center;
+        margin-top: 16px;
-          align-items: center;
+      }
-          display: flex;
-        }
 
-        .column > *:not(:first-child) {
+      :host([narrow]) .column {
-          margin-top: 16px;
+        width: 100%;
-        }
+      }
 
-        :host([narrow]) .column {
+      :host([narrow]) .container {
-          width: 100%;
+        margin-top: 0;
-        }
+      }
 
-        :host([narrow]) .container {
+      paper-item {
-          margin-top: 0;
+        cursor: pointer;
-        }
+        font-size: var(--paper-font-body1_-_font-size);
+      }
 
-        paper-item {
+      paper-item.no-link {
-          cursor: pointer;
+        cursor: default;
-          font-size: var(--paper-font-body1_-_font-size);
+      }
-        }
 
-        paper-item.no-link {
+      a {
-          cursor: default;
+        text-decoration: none;
-        }
+        color: var(--primary-color);
+      }
 
-        a {
+      ha-card {
-          text-decoration: none;
+        padding-bottom: 8px;
-          color: var(--primary-color);
+      }
-        }
 
-        ha-card {
+      ha-card a {
-          padding-bottom: 8px;
+        color: var(--primary-text-color);
-        }
+      }
-
+    `;
-        ha-card a {
-          color: var(--primary-text-color);
-        }
-      `,
-    ];
   }
 }

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -1,9 +1,5 @@
-import { mdiPlus, mdiFilterVariant, mdiCancel } from "@mdi/js";
+import { mdiPlus } from "@mdi/js";
-import "@material/mwc-list/mwc-list-item";
-import "@polymer/paper-tooltip/paper-tooltip";
 import {
-  css,
-  CSSResult,
   customElement,
   html,
   internalProperty,
@@ -11,9 +7,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
 import memoizeOne from "memoize-one";
-import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import { LocalizeFunc } from "../../../common/translations/localize";
@@ -24,7 +18,6 @@ import {
   RowClickedEvent,
 } from "../../../components/data-table/ha-data-table";
 import "../../../components/entity/ha-battery-icon";
-import "../../../components/ha-button-menu";
 import { AreaRegistryEntry } from "../../../data/area_registry";
 import { ConfigEntry } from "../../../data/config_entries";
 import {
@@ -41,7 +34,6 @@ import { domainToName } from "../../../data/integration";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { HomeAssistant, Route } from "../../../types";
 import { configSections } from "../ha-panel-config";
-import { haStyle } from "../../../resources/styles";
 
 interface DeviceRowData extends DeviceRegistryEntry {
   device?: DeviceRowData;
@@ -72,12 +64,6 @@ export class HaConfigDeviceDashboard extends LitElement {
     window.location.search
   );
 
-  @internalProperty() private _showDisabled = false;
-
-  @internalProperty() private _filter = "";
-
-  @internalProperty() private _numHiddenDevices = 0;
-
   private _activeFilters = memoizeOne(
     (
       entries: ConfigEntry[],
@@ -88,10 +74,6 @@ export class HaConfigDeviceDashboard extends LitElement {
       filters.forEach((value, key) => {
         switch (key) {
           case "config_entry": {
-            // If we are requested to show the devices for a given config entry,
-            // also show the disabled ones by default.
-            this._showDisabled = true;
-
             const configEntry = entries.find(
               (entry) => entry.entry_id === value
             );
@@ -123,7 +105,6 @@ export class HaConfigDeviceDashboard extends LitElement {
       entities: EntityRegistryEntry[],
       areas: AreaRegistryEntry[],
       filters: URLSearchParams,
-      showDisabled: boolean,
       localize: LocalizeFunc
     ) => {
       // Some older installations might have devices pointing at invalid entryIDs
@@ -136,9 +117,6 @@ export class HaConfigDeviceDashboard extends LitElement {
         deviceLookup[device.id] = device;
       }
 
-      // If nothing gets filtered, this is our correct count of devices
-      let startLength = outputDevices.length;
-
       const deviceEntityLookup: DeviceEntityLookup = {};
       for (const entity of entities) {
         if (!entity.device_id) {
@@ -167,7 +145,6 @@ export class HaConfigDeviceDashboard extends LitElement {
           outputDevices = outputDevices.filter((device) =>
             device.config_entries.includes(value)
           );
-          startLength = outputDevices.length;
           const configEntry = entries.find((entry) => entry.entry_id === value);
           if (configEntry) {
             filterDomains.push(configEntry.domain);
@@ -175,10 +152,6 @@ export class HaConfigDeviceDashboard extends LitElement {
         }
       });
 
-      if (!showDisabled) {
-        outputDevices = outputDevices.filter((device) => !device.disabled_by);
-      }
-
       outputDevices = outputDevices.map((device) => {
         return {
           ...device,
@@ -209,19 +182,16 @@ export class HaConfigDeviceDashboard extends LitElement {
         };
       });
 
-      this._numHiddenDevices = startLength - outputDevices.length;
       return { devicesOutput: outputDevices, filteredDomains: filterDomains };
     }
   );
 
   private _columns = memoizeOne(
-    (narrow: boolean, showDisabled: boolean): DataTableColumnContainer => {
+    (narrow: boolean): DataTableColumnContainer => {
       const columns: DataTableColumnContainer = narrow
         ? {
             name: {
-              title: this.hass.localize(
+              title: "Device",
-                "ui.panel.config.devices.data_table.device"
-              ),
               sortable: true,
               filterable: true,
               direction: "asc",
@@ -307,24 +277,6 @@ export class HaConfigDeviceDashboard extends LitElement {
             : html` - `;
         },
       };
-      if (showDisabled) {
-        columns.disabled_by = {
-          title: "",
-          type: "icon",
-          template: (disabled_by) =>
-            disabled_by
-              ? html`<div
-                  tabindex="0"
-                  style="display:inline-block; position: relative;"
-                >
-                  <ha-svg-icon .path=${mdiCancel}></ha-svg-icon>
-                  <paper-tooltip animation-delay="0" position="left">
-                    ${this.hass.localize("ui.panel.config.devices.disabled")}
-                  </paper-tooltip>
-                </div>`
-              : "",
-        };
-      }
       return columns;
     }
   );
@@ -346,119 +298,9 @@ export class HaConfigDeviceDashboard extends LitElement {
       this.entities,
       this.areas,
       this._searchParms,
-      this._showDisabled,
       this.hass.localize
     );
     const includeZHAFab = filteredDomains.includes("zha");
-    const activeFilters = this._activeFilters(
-      this.entries,
-      this._searchParms,
-      this.hass.localize
-    );
-
-    const headerToolbar = html`
-      <search-input
-        no-label-float
-        no-underline
-        @value-changed=${this._handleSearchChange}
-        .filter=${this._filter}
-        .label=${this.hass.localize("ui.panel.config.devices.picker.search")}
-      ></search-input
-      >${activeFilters
-        ? html`<div class="active-filters">
-            ${this.narrow
-              ? html` <div>
-                  <ha-icon icon="hass:filter-variant"></ha-icon>
-                  <paper-tooltip animation-delay="0" position="left">
-                    ${this.hass.localize(
-                      "ui.panel.config.filtering.filtering_by"
-                    )}
-                    ${activeFilters.join(", ")}
-                    ${this._numHiddenDevices
-                      ? "(" +
-                        this.hass.localize(
-                          "ui.panel.config.devices.picker.filter.hidden_devices",
-                          "number",
-                          this._numHiddenDevices
-                        ) +
-                        ")"
-                      : ""}
-                  </paper-tooltip>
-                </div>`
-              : `${this.hass.localize(
-                  "ui.panel.config.filtering.filtering_by"
-                )} ${activeFilters.join(", ")}
-                    ${
-                      this._numHiddenDevices
-                        ? "(" +
-                          this.hass.localize(
-                            "ui.panel.config.devices.picker.filter.hidden_devices",
-                            "number",
-                            this._numHiddenDevices
-                          ) +
-                          ")"
-                        : ""
-                    }
-                    `}
-            <mwc-button @click=${this._clearFilter}
-              >${this.hass.localize(
-                "ui.panel.config.filtering.clear"
-              )}</mwc-button
-            >
-          </div>`
-        : ""}
-      ${this._numHiddenDevices && !activeFilters
-        ? html`<div class="active-filters">
-            ${this.narrow
-              ? html` <div>
-                  <ha-icon icon="hass:filter-variant"></ha-icon>
-                  <paper-tooltip animation-delay="0" position="left">
-                    ${this.hass.localize(
-                      "ui.panel.config.devices.picker.filter.hidden_devices",
-                      "number",
-                      this._numHiddenDevices
-                    )}
-                  </paper-tooltip>
-                </div>`
-              : `${this.hass.localize(
-                  "ui.panel.config.devices.picker.filter.hidden_devices",
-                  "number",
-                  this._numHiddenDevices
-                )}`}
-            <mwc-button @click=${this._showAll}
-              >${this.hass.localize(
-                "ui.panel.config.devices.picker.filter.show_all"
-              )}</mwc-button
-            >
-          </div>`
-        : ""}
-      <ha-button-menu corner="BOTTOM_START" multi>
-        <mwc-icon-button
-          slot="trigger"
-          .label=${this.hass!.localize(
-            "ui.panel.config.devices.picker.filter.filter"
-          )}
-          .title=${this.hass!.localize(
-            "ui.panel.config.devices.picker.filter.filter"
-          )}
-        >
-          <ha-svg-icon .path=${mdiFilterVariant}></ha-svg-icon>
-        </mwc-icon-button>
-        <mwc-list-item
-          @request-selected="${this._showDisabledChanged}"
-          graphic="control"
-          .selected=${this._showDisabled}
-        >
-          <ha-checkbox
-            slot="graphic"
-            .checked=${this._showDisabled}
-          ></ha-checkbox>
-          ${this.hass!.localize(
-            "ui.panel.config.devices.picker.filter.show_disabled"
-          )}
-        </mwc-list-item>
-      </ha-button-menu>
-    `;
 
     return html`
       <hass-tabs-subpage-data-table
@@ -469,9 +311,13 @@ export class HaConfigDeviceDashboard extends LitElement {
           : "/config"}
         .tabs=${configSections.integrations}
         .route=${this.route}
-        .columns=${this._columns(this.narrow, this._showDisabled)}
+        .columns=${this._columns(this.narrow)}
         .data=${devicesOutput}
-        .filter=${this._filter}
+        .activeFilters=${this._activeFilters(
+          this.entries,
+          this._searchParms,
+          this.hass.localize
+        )}
         @row-click=${this._handleRowClicked}
         clickable
         .hasFab=${includeZHAFab}
@@ -487,15 +333,6 @@ export class HaConfigDeviceDashboard extends LitElement {
               </ha-fab>
             </a>`
           : html``}
-        <div
-          class=${classMap({
-            "search-toolbar": this.narrow,
-            "table-header": !this.narrow,
-          })}
-          slot="header"
-        >
-          ${headerToolbar}
-        </div>
       </hass-tabs-subpage-data-table>
     `;
   }
@@ -526,136 +363,6 @@ export class HaConfigDeviceDashboard extends LitElement {
     const deviceId = ev.detail.id;
     navigate(this, `/config/devices/device/${deviceId}`);
   }
-
-  private _showDisabledChanged(ev: CustomEvent<RequestSelectedDetail>) {
-    if (ev.detail.source !== "property") {
-      return;
-    }
-    this._showDisabled = ev.detail.selected;
-  }
-
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value;
-  }
-
-  private _clearFilter() {
-    navigate(this, window.location.pathname, true);
-  }
-
-  private _showAll() {
-    this._showDisabled = true;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      css`
-        hass-loading-screen {
-          --app-header-background-color: var(--sidebar-background-color);
-          --app-header-text-color: var(--sidebar-text-color);
-        }
-        a {
-          color: var(--primary-color);
-        }
-        h2 {
-          margin-top: 0;
-          font-family: var(--paper-font-headline_-_font-family);
-          -webkit-font-smoothing: var(
-            --paper-font-headline_-_-webkit-font-smoothing
-          );
-          font-size: var(--paper-font-headline_-_font-size);
-          font-weight: var(--paper-font-headline_-_font-weight);
-          letter-spacing: var(--paper-font-headline_-_letter-spacing);
-          line-height: var(--paper-font-headline_-_line-height);
-          opacity: var(--dark-primary-opacity);
-        }
-        p {
-          font-family: var(--paper-font-subhead_-_font-family);
-          -webkit-font-smoothing: var(
-            --paper-font-subhead_-_-webkit-font-smoothing
-          );
-          font-weight: var(--paper-font-subhead_-_font-weight);
-          line-height: var(--paper-font-subhead_-_line-height);
-        }
-        ha-data-table {
-          width: 100%;
-          --data-table-border-width: 0;
-        }
-        :host(:not([narrow])) ha-data-table {
-          height: calc(100vh - 1px - var(--header-height));
-          display: block;
-        }
-        ha-button-menu {
-          margin-right: 8px;
-        }
-        .table-header {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
-        }
-        search-input {
-          margin-left: 16px;
-          flex-grow: 1;
-          position: relative;
-          top: 2px;
-        }
-        .search-toolbar search-input {
-          margin-left: 8px;
-          top: 1px;
-        }
-        .search-toolbar {
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          color: var(--secondary-text-color);
-        }
-        .search-toolbar ha-button-menu {
-          position: static;
-        }
-        .selected-txt {
-          font-weight: bold;
-          padding-left: 16px;
-        }
-        .table-header .selected-txt {
-          margin-top: 20px;
-        }
-        .search-toolbar .selected-txt {
-          font-size: 16px;
-        }
-        .header-btns > mwc-button,
-        .header-btns > ha-icon-button {
-          margin: 8px;
-        }
-        .active-filters {
-          color: var(--primary-text-color);
-          position: relative;
-          display: flex;
-          align-items: center;
-          padding: 2px 2px 2px 8px;
-          margin-left: 4px;
-          font-size: 14px;
-        }
-        .active-filters ha-icon {
-          color: var(--primary-color);
-        }
-        .active-filters mwc-button {
-          margin-left: 8px;
-        }
-        .active-filters::before {
-          background-color: var(--primary-color);
-          opacity: 0.12;
-          border-radius: 4px;
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          content: "";
-        }
-      `,
-    ];
-  }
 }
 
 declare global {

src/panels/config/entities/entity-registry-settings.ts

@@ -111,19 +111,10 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     return html`
       ${!stateObj
         ? html`
-            <div class="container warning">
+            <div class="container">
               ${this.hass!.localize(
                 "ui.dialogs.entity_registry.editor.unavailable"
               )}
-              ${this._device?.disabled_by
-                ? html`<br />${this.hass!.localize(
-                      "ui.dialogs.entity_registry.editor.device_disabled"
-                    )}<br /><mwc-button @click=${this._openDeviceSettings}>
-                      ${this.hass!.localize(
-                        "ui.dialogs.entity_registry.editor.open_device_settings"
-                      )}
-                    </mwc-button>`
-                : ""}
             </div>
           `
         : ""}
@@ -170,7 +161,6 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
         <div class="row">
           <ha-switch
             .checked=${!this._disabledBy}
-            .disabled=${this._device?.disabled_by}
             @change=${this._disabledByChanged}
           >
           </ha-switch>

src/panels/config/entities/ha-config-entities.ts

@@ -189,11 +189,9 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
           ? (name, entity: any) =>
               html`
                 ${name}<br />
-                <div class="secondary">
+                ${entity.entity_id} |
-                  ${entity.entity_id} |
+                ${this.hass.localize(`component.${entity.platform}.title`) ||
-                  ${this.hass.localize(`component.${entity.platform}.title`) ||
+                entity.platform}
-                  entity.platform}
-                </div>
               `
           : undefined,
       },

src/panels/config/ha-config-section.ts

@@ -5,8 +5,6 @@ import { classMap } from "lit-html/directives/class-map";
 export class HaConfigSection extends LitElement {
   @property() public isWide = false;
 
-  @property({ type: Boolean }) public vertical = false;
-
   protected render() {
     return html`
       <div
@@ -18,8 +16,8 @@ export class HaConfigSection extends LitElement {
         <div
           class="together layout ${classMap({
             narrow: !this.isWide,
-            vertical: this.vertical || !this.isWide,
+            vertical: !this.isWide,
-            horizontal: !this.vertical && this.isWide,
+            horizontal: this.isWide,
           })}"
         >
           <div class="intro"><slot name="introduction"></slot></div>

src/panels/config/helpers/ha-config-helpers.ts

@@ -148,7 +148,7 @@ export class HaConfigHelpers extends LitElement {
         .narrow=${this.narrow}
         back-path="/config"
         .route=${this.route}
-        .tabs=${configSections.helpers}
+        .tabs=${configSections.automation}
         .columns=${this._columns(this.narrow, this.hass.language)}
         .data=${this._getItems(this._stateItems)}
         @row-click=${this._openEditDialog}

src/panels/config/person/dialog-person-detail.ts

@@ -68,8 +68,6 @@ class DialogPersonDetail extends LitElement {
 
   @internalProperty() private _submitting = false;
 
-  @internalProperty() private _personExists = false;
-
   private _deviceTrackersAvailable = memoizeOne((hass) => {
     return Object.keys(hass.states).some(
       (entityId) =>
@@ -81,7 +79,6 @@ class DialogPersonDetail extends LitElement {
     this._params = params;
     this._error = undefined;
     if (this._params.entry) {
-      this._personExists = true;
       this._name = this._params.entry.name || "";
       this._userId = this._params.entry.user_id || undefined;
       this._deviceTrackers = this._params.entry.device_trackers || [];
@@ -91,7 +88,6 @@ class DialogPersonDetail extends LitElement {
         : undefined;
       this._isAdmin = this._user?.group_ids.includes(SYSTEM_GROUP_ID_ADMIN);
     } else {
-      this._personExists = false;
       this._name = "";
       this._userId = undefined;
       this._user = undefined;
@@ -402,7 +398,6 @@ class DialogPersonDetail extends LitElement {
         await this._params!.updateEntry(values);
       } else {
         await this._params!.createEntry(values);
-        this._personExists = true;
       }
       this._params = undefined;
     } catch (err) {
@@ -427,14 +422,6 @@ class DialogPersonDetail extends LitElement {
   }
 
   private _close(): void {
-    // If we do not have a person ID yet (= person creation dialog was just cancelled), but
-    // we already created a user ID for it, delete it now to not have it "free floating".
-    if (!this._personExists && this._userId) {
-      deleteUser(this.hass, this._userId);
-      this._params?.refreshUsers();
-      this._userId = undefined;
-    }
-
     this._params = undefined;
   }
 

src/panels/config/script/ha-script-editor.ts

@@ -35,7 +35,6 @@ import "../../../components/ha-icon-input";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
-import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import {
   Action,
   deleteScript,
@@ -546,7 +545,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
   private async _copyYaml() {
     if (this._editor?.yaml) {
-      copyToClipboard(this._editor.yaml);
+      navigator.clipboard.writeText(this._editor.yaml);
     }
   }
 

src/panels/config/tags/ha-config-tags.ts

@@ -84,7 +84,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
                 ${tag.last_scanned_datetime
                   ? html`<ha-relative-time
                       .hass=${this.hass}
-                      .datetime=${tag.last_scanned_datetime}
+                      .datetimeObj=${tag.last_scanned_datetime}
                     ></ha-relative-time>`
                   : this.hass.localize("ui.panel.config.tags.never_scanned")}
               </div>`
@@ -103,7 +103,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
             ${last_scanned_datetime
               ? html`<ha-relative-time
                   .hass=${this.hass}
-                  .datetime=${last_scanned_datetime}
+                  .datetimeObj=${last_scanned_datetime}
                 ></ha-relative-time>`
               : this.hass.localize("ui.panel.config.tags.never_scanned")}
           `,

src/panels/config/users/dialog-add-user.ts

@@ -241,7 +241,7 @@ export class DialogAddUser extends LitElement {
       user = userResponse.user;
     } catch (err) {
       this._loading = false;
-      this._error = err.message;
+      this._error = err.code;
       return;
     }
 
@@ -255,7 +255,7 @@ export class DialogAddUser extends LitElement {
     } catch (err) {
       await deleteUser(this.hass, user.id);
       this._loading = false;
-      this._error = err.message;
+      this._error = err.code;
       return;
     }
 

src/panels/config/users/dialog-user-detail.ts

@@ -13,7 +13,6 @@ import {
 } from "lit-element";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import { createCloseHeading } from "../../../components/ha-dialog";
-import "../../../components/ha-help-tooltip";
 import "../../../components/ha-formfield";
 import "../../../components/ha-switch";
 import { adminChangePassword } from "../../../data/auth";
@@ -38,8 +37,6 @@ class DialogUserDetail extends LitElement {
 
   @internalProperty() private _isAdmin?: boolean;
 
-  @internalProperty() private _isActive?: boolean;
-
   @internalProperty() private _error?: string;
 
   @internalProperty() private _params?: UserDetailDialogParams;
@@ -51,7 +48,6 @@ class DialogUserDetail extends LitElement {
     this._error = undefined;
     this._name = params.entry.name || "";
     this._isAdmin = params.entry.group_ids.includes(SYSTEM_GROUP_ID_ADMIN);
-    this._isActive = params.entry.is_active;
     await this.updateComplete;
   }
 
@@ -95,6 +91,15 @@ class DialogUserDetail extends LitElement {
                   </span>
                 `
               : ""}
+            ${user.is_active
+              ? html`
+                  <span class="state"
+                    >${this.hass.localize(
+                      "ui.panel.config.users.editor.active"
+                    )}</span
+                  >
+                `
+              : ""}
           </div>
           <div class="form">
             <paper-input
@@ -105,21 +110,17 @@ class DialogUserDetail extends LitElement {
                 "ui.panel.config.users.editor.name"
               )}"
             ></paper-input>
-            <div class="row">
+            <ha-formfield
-              <ha-formfield
+              .label=${this.hass.localize("ui.panel.config.users.editor.admin")}
-                .label=${this.hass.localize(
+              .dir=${computeRTLDirection(this.hass)}
-                  "ui.panel.config.users.editor.admin"
+            >
-                )}
+              <ha-switch
-                .dir=${computeRTLDirection(this.hass)}
+                .disabled=${user.system_generated || user.is_owner}
+                .checked=${this._isAdmin}
+                @change=${this._adminChanged}
               >
-                <ha-switch
+              </ha-switch>
-                  .disabled=${user.system_generated || user.is_owner}
+            </ha-formfield>
-                  .checked=${this._isAdmin}
-                  @change=${this._adminChanged}
-                >
-                </ha-switch>
-              </ha-formfield>
-            </div>
             ${!this._isAdmin
               ? html`
                   <br />
@@ -128,27 +129,6 @@ class DialogUserDetail extends LitElement {
                   )}
                 `
               : ""}
-            <div class="row">
-              <ha-formfield
-                .label=${this.hass.localize(
-                  "ui.panel.config.users.editor.active"
-                )}
-                .dir=${computeRTLDirection(this.hass)}
-              >
-                <ha-switch
-                  .disabled=${user.system_generated || user.is_owner}
-                  .checked=${this._isActive}
-                  @change=${this._activeChanged}
-                >
-                </ha-switch>
-              </ha-formfield>
-              <ha-help-tooltip
-                .label=${this.hass.localize(
-                  "ui.panel.config.users.editor.active_tooltip"
-                )}
-              >
-              </ha-help-tooltip>
-            </div>
           </div>
         </div>
 
@@ -212,16 +192,11 @@ class DialogUserDetail extends LitElement {
     this._isAdmin = ev.target.checked;
   }
 
-  private async _activeChanged(ev): Promise<void> {
-    this._isActive = ev.target.checked;
-  }
-
   private async _updateEntry() {
     this._submitting = true;
     try {
       await this._params!.updateEntry({
         name: this._name.trim(),
-        is_active: this._isActive,
         group_ids: [
           this._isAdmin ? SYSTEM_GROUP_ID_ADMIN : SYSTEM_GROUP_ID_USER,
         ],
@@ -318,13 +293,8 @@ class DialogUserDetail extends LitElement {
         .state:not(:first-child) {
           margin-left: 8px;
         }
-        .row {
+        ha-switch {
-          display: flex;
+          margin-top: 8px;
-          padding: 8px 0;
-        }
-        ha-help-tooltip {
-          margin-left: 4px;
-          position: relative;
         }
       `,
     ];

src/panels/config/users/ha-config-users.ts

@@ -46,17 +46,10 @@ export class HaConfigUsers extends LitElement {
           width: "25%",
           direction: "asc",
           grows: true,
-          template: (name, user: any) =>
+          template: (name) => html`
-            narrow
+            ${name ||
-              ? html` ${name}<br />
+            this.hass!.localize("ui.panel.config.users.editor.unnamed_user")}
-                  <div class="secondary">
+          `,
-                    ${user.username} |
-                    ${this.hass.localize(`groups.${user.group_ids[0]}`)}
-                  </div>`
-              : html` ${name ||
-                this.hass!.localize(
-                  "ui.panel.config.users.editor.unnamed_user"
-                )}`,
         },
         username: {
           title: this.hass.localize(
@@ -66,7 +59,6 @@ export class HaConfigUsers extends LitElement {
           filterable: true,
           width: "20%",
           direction: "asc",
-          hidden: narrow,
           template: (username) => html`
             ${username ||
             this.hass!.localize("ui.panel.config.users.editor.unnamed_user")}
@@ -79,24 +71,13 @@ export class HaConfigUsers extends LitElement {
           sortable: true,
           filterable: true,
           width: "20%",
-          direction: "asc",
-          hidden: narrow,
           template: (groupIds) => html`
             ${this.hass.localize(`groups.${groupIds[0]}`)}
           `,
         },
-        is_active: {
+      };
-          title: this.hass.localize(
+      if (!narrow) {
-            "ui.panel.config.users.picker.headers.is_active"
+        columns.system_generated = {
-          ),
-          type: "icon",
-          sortable: true,
-          filterable: true,
-          width: "80px",
-          template: (is_active) =>
-            is_active ? html`<ha-icon icon="hass:check"> </ha-icon>` : "",
-        },
-        system_generated: {
           title: this.hass.localize(
             "ui.panel.config.users.picker.headers.system"
           ),
@@ -106,9 +87,8 @@ export class HaConfigUsers extends LitElement {
           width: "160px",
           template: (generated) =>
             generated ? html`<ha-icon icon="hass:check"> </ha-icon>` : "",
-        },
+        };
-      };
+      }
-
       return columns;
     }
   );

src/panels/lovelace/cards/hui-button-card.ts

@@ -84,6 +84,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
   }
 
   public setConfig(config: ButtonCardConfig): void {
+    if (!config.entity) {
+      throw new Error("Entity must be specified");
+    }
     if (config.entity && !isValidEntityId(config.entity)) {
       throw new Error("Invalid entity");
     }

src/panels/lovelace/cards/hui-entities-card.ts

@@ -109,7 +109,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
   }
 
   public setConfig(config: EntitiesCardConfig): void {
-    if (!config.entities || !Array.isArray(config.entities)) {
+    if (!config || !config.entities.length) {
       throw new Error("Entities must be specified");
     }
 

src/panels/lovelace/cards/hui-entity-button-card.ts

@@ -2,14 +2,7 @@ import { customElement } from "lit-element";
 import { HuiButtonCard } from "./hui-button-card";
 
 @customElement("hui-entity-button-card")
-class HuiEntityButtonCard extends HuiButtonCard {
+class HuiEntityButtonCard extends HuiButtonCard {}
-  public setConfig(config): void {
-    if (!config.entity) {
-      throw new Error("Entity must be specified");
-    }
-    super.setConfig(config);
-  }
-}
 
 declare global {
   interface HTMLElementTagNameMap {

src/panels/lovelace/cards/hui-error-card.ts

@@ -1,16 +1,16 @@
+import { safeDump } from "js-yaml";
 import {
   css,
   CSSResult,
   customElement,
   html,
-  LitElement,
   internalProperty,
+  LitElement,
   TemplateResult,
 } from "lit-element";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard } from "../types";
 import { ErrorCardConfig } from "./types";
-import { safeDump } from "js-yaml";
 
 @customElement("hui-error-card")
 export class HuiErrorCard extends LitElement implements LovelaceCard {
@@ -49,6 +49,7 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
         font-weight: 500;
         user-select: text;
         cursor: default;
+        overflow: hidden;
       }
       pre {
         font-family: var(--code-font-family, monospace);

src/panels/lovelace/cards/hui-history-graph-card.ts

@@ -16,6 +16,7 @@ import "../../../components/state-history-charts";
 import { CacheConfig, getRecentWithCache } from "../../../data/cached-history";
 import { HistoryResult } from "../../../data/history";
 import { HomeAssistant } from "../../../types";
+import { findEntities } from "../common/find-entites";
 import { hasConfigOrEntitiesChanged } from "../common/has-changed";
 import { processConfigEntities } from "../common/process-config-entities";
 import { EntityConfig } from "../entity-rows/types";
@@ -29,9 +30,22 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     return document.createElement("hui-history-graph-card-editor");
   }
 
-  public static getStubConfig(): HistoryGraphCardConfig {
+  public static getStubConfig(
-    // Hard coded to sun.sun to prevent high server load when it would pick an entity with a lot of state changes
+    hass: HomeAssistant,
-    return { type: "history-graph", entities: ["sun.sun"] };
+    entities: string[],
+    entitiesFallback: string[]
+  ): HistoryGraphCardConfig {
+    const includeDomains = ["sensor"];
+    const maxEntities = 1;
+    const foundEntities = findEntities(
+      hass,
+      maxEntities,
+      entities,
+      entitiesFallback,
+      includeDomains
+    );
+
+    return { type: "history-graph", entities: foundEntities };
   }
 
   @property({ attribute: false }) public hass?: HomeAssistant;
@@ -57,12 +71,12 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
   }
 
   public setConfig(config: HistoryGraphCardConfig): void {
-    if (!config.entities || !Array.isArray(config.entities)) {
+    if (!config.entities.length) {
-      throw new Error("Entities need to be an array");
+      throw new Error("Entities must be specified");
     }
 
-    if (!config.entities.length) {
+    if (config.entities && !Array.isArray(config.entities)) {
-      throw new Error("You must include at least one entity");
+      throw new Error("Entities need to be an array");
     }
 
     this._config = config;

src/panels/lovelace/cards/hui-horizontal-stack-card.ts

@@ -29,7 +29,7 @@ class HuiHorizontalStackCard extends HuiStackCard {
         }
         #root > * {
           flex: 1 1 0;
-          margin: var(--horizontal-stack-card-margin, var(--stack-card-margin, 0 4px));
+          margin: 0 4px;
           min-width: 0;
         }
         #root > *:first-child {

src/panels/lovelace/cards/hui-media-control-card.ts

@@ -246,73 +246,78 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
           ${!isUnavailable &&
           (mediaDescription || stateObj.attributes.media_title || showControls)
             ? html`
-                <div>
+                <div
-                  <div class="title-controls">
+                  class="title-controls"
-                    ${!mediaDescription && !stateObj.attributes.media_title
+                  style=${styleMap({
-                      ? ""
+                    paddingRight: isOffState
-                      : html`
+                      ? "0"
-                          <div class="media-info">
+                      : `${this._cardHeight - 40}px`,
-                            <hui-marquee
+                  })}
-                              .text=${stateObj.attributes.media_title ||
+                >
-                              mediaDescription}
+                  ${!mediaDescription && !stateObj.attributes.media_title
-                              .active=${this._marqueeActive}
-                              @mouseover=${this._marqueeMouseOver}
-                              @mouseleave=${this._marqueeMouseLeave}
-                            ></hui-marquee>
-                            ${!stateObj.attributes.media_title
-                              ? ""
-                              : mediaDescription}
-                          </div>
-                        `}
-                    ${!showControls
-                      ? ""
-                      : html`
-                          <div class="controls">
-                            ${controls!.map(
-                              (control) => html`
-                                <ha-icon-button
-                                  .title=${this.hass.localize(
-                                    `ui.card.media_player.${control.action}`
-                                  )}
-                                  .icon=${control.icon}
-                                  action=${control.action}
-                                  @click=${this._handleClick}
-                                ></ha-icon-button>
-                              `
-                            )}
-                            ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
-                              ? html`
-                                  <mwc-icon-button
-                                    class="browse-media"
-                                    .title=${this.hass.localize(
-                                      "ui.card.media_player.browse_media"
-                                    )}
-                                    @click=${this._handleBrowseMedia}
-                                    ><ha-svg-icon
-                                      .path=${mdiPlayBoxMultiple}
-                                    ></ha-svg-icon
-                                  ></mwc-icon-button>
-                                `
-                              : ""}
-                          </div>
-                        `}
-                  </div>
-                  ${!this._showProgressBar
                     ? ""
                     : html`
-                        <paper-progress
+                        <div class="media-info">
-                          .max=${stateObj.attributes.media_duration}
+                          <hui-marquee
-                          style=${styleMap({
+                            .text=${stateObj.attributes.media_title ||
-                            "--paper-progress-active-color":
+                            mediaDescription}
-                              this._foregroundColor || "var(--accent-color)",
+                            .active=${this._marqueeActive}
-                            cursor: supportsFeature(stateObj, SUPPORT_SEEK)
+                            @mouseover=${this._marqueeMouseOver}
-                              ? "pointer"
+                            @mouseleave=${this._marqueeMouseLeave}
-                              : "initial",
+                          ></hui-marquee>
-                          })}
+                          ${!stateObj.attributes.media_title
-                          @click=${this._handleSeek}
+                            ? ""
-                        ></paper-progress>
+                            : mediaDescription}
+                        </div>
+                      `}
+                  ${!showControls
+                    ? ""
+                    : html`
+                        <div class="controls">
+                          ${controls!.map(
+                            (control) => html`
+                              <ha-icon-button
+                                .title=${this.hass.localize(
+                                  `ui.card.media_player.${control.action}`
+                                )}
+                                .icon=${control.icon}
+                                action=${control.action}
+                                @click=${this._handleClick}
+                              ></ha-icon-button>
+                            `
+                          )}
+                          ${supportsFeature(stateObj, SUPPORT_BROWSE_MEDIA)
+                            ? html`
+                                <mwc-icon-button
+                                  class="browse-media"
+                                  .title=${this.hass.localize(
+                                    "ui.card.media_player.browse_media"
+                                  )}
+                                  @click=${this._handleBrowseMedia}
+                                  ><ha-svg-icon
+                                    .path=${mdiPlayBoxMultiple}
+                                  ></ha-svg-icon
+                                ></mwc-icon-button>
+                              `
+                            : ""}
+                        </div>
                       `}
                 </div>
+                ${!this._showProgressBar
+                  ? ""
+                  : html`
+                      <paper-progress
+                        .max=${stateObj.attributes.media_duration}
+                        style=${styleMap({
+                          "--paper-progress-active-color":
+                            this._foregroundColor || "var(--accent-color)",
+                          cursor: supportsFeature(stateObj, SUPPORT_SEEK)
+                            ? "pointer"
+                            : "initial",
+                        })}
+                        @click=${this._handleSeek}
+                      ></paper-progress>
+                    `}
               `
             : ""}
         </div>
@@ -630,11 +635,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       .player {
         position: relative;
         padding: 16px;
-        height: 100%;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
         color: var(--text-primary-color);
         transition-property: color, padding;
         transition-duration: 0.4s;
@@ -671,7 +671,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
       mwc-icon-button.browse-media {
         position: absolute;
-        right: 4px;
+        right: 0;
         --mdc-icon-size: 24px;
       }
 
@@ -693,7 +693,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       .more-info {
         position: absolute;
         top: 4px;
-        right: 4px;
+        right: 0px;
       }
 
       .media-info {

src/panels/lovelace/cards/hui-vertical-stack-card.ts

@@ -29,7 +29,7 @@ class HuiVerticalStackCard extends HuiStackCard {
           height: 100%;
         }
         #root > * {
-          margin: var(--vertical-stack-card-margin, var(--stack-card-margin, 4px 0));
+          margin: 4px 0 4px 0;
         }
         #root > *:first-child {
           margin-top: 0;

src/panels/lovelace/components/hui-action-editor.ts

@@ -179,6 +179,9 @@ export class HuiActionEditor extends LitElement {
       .dropdown {
         display: flex;
       }
+      paper-dropdown-menu {
+        flex-grow: 1;
+      }
     `;
   }
 }

src/panels/lovelace/components/hui-card-options.ts

@@ -1,8 +1,7 @@
 import "@material/mwc-button";
-import "@material/mwc-icon-button";
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
-import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
+import "@material/mwc-icon-button";
+import "../../../components/ha-button-menu";
 import {
   css,
   CSSResult,
@@ -10,20 +9,21 @@ import {
   html,
   LitElement,
   property,
-  queryAssignedNodes,
   TemplateResult,
+  queryAssignedNodes,
 } from "lit-element";
-import { fireEvent } from "../../../common/dom/fire_event";
+import { HomeAssistant } from "../../../types";
-import "../../../components/ha-button-menu";
+import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
+import { swapCard, moveCard, addCard, deleteCard } from "../editor/config-util";
+import { confDeleteCard } from "../editor/delete-card";
+import { Lovelace, LovelaceCard } from "../types";
+import { computeCardSize } from "../common/compute-card-size";
+import { mdiDotsVertical, mdiArrowDown, mdiArrowUp } from "@mdi/js";
+import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
+import { showSelectViewDialog } from "../editor/select-view/show-select-view-dialog";
 import { saveConfig } from "../../../data/lovelace";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
-import { HomeAssistant } from "../../../types";
 import { showSaveSuccessToast } from "../../../util/toast-saved-success";
-import { computeCardSize } from "../common/compute-card-size";
-import { showEditCardDialog } from "../editor/card-editor/show-edit-card-dialog";
-import { addCard, deleteCard, moveCard, swapCard } from "../editor/config-util";
-import { showSelectViewDialog } from "../editor/select-view/show-select-view-dialog";
-import { Lovelace, LovelaceCard } from "../types";
 
 @customElement("hui-card-options")
 export class HuiCardOptions extends LitElement {
@@ -168,7 +168,11 @@ export class HuiCardOptions extends LitElement {
   }
 
   private _editCard(): void {
-    fireEvent(this, "ll-edit-card", { path: this.path! });
+    showEditCardDialog(this, {
+      lovelaceConfig: this.lovelace!.config,
+      saveConfig: this.lovelace!.saveConfig,
+      path: this.path!,
+    });
   }
 
   private _cardUp(): void {
@@ -225,7 +229,7 @@ export class HuiCardOptions extends LitElement {
   }
 
   private _deleteCard(): void {
-    fireEvent(this, "ll-delete-card", { path: this.path! });
+    confDeleteCard(this, this.hass!, this.lovelace!, this.path!);
   }
 }
 

src/panels/lovelace/components/hui-entity-editor.ts

@@ -1,4 +1,4 @@
-import { mdiDrag } from "@mdi/js";
+import { mdiDragVerticalVariant } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -68,7 +68,7 @@ export class HuiEntityEditor extends LitElement {
             : this.entities!.map((entityConf, index) => {
                 return html`
                   <div class="entity" data-entity-id=${entityConf.entity}>
-                    <ha-svg-icon .path=${mdiDrag}></ha-svg-icon>
+                    <ha-svg-icon .path=${mdiDragVerticalVariant}></ha-svg-icon>
                     <ha-entity-picker
                       .hass=${this.hass}
                       .value=${entityConf.entity}
@@ -192,6 +192,7 @@ export class HuiEntityEditor extends LitElement {
         .entity ha-svg-icon {
           padding-right: 8px;
           cursor: move;
+          color: var(--secondary-text-color);
         }
         .entity ha-entity-picker {
           flex-grow: 1;

src/panels/lovelace/components/hui-marquee.ts

@@ -72,7 +72,7 @@ class HuiMarquee extends LitElement {
         display: flex;
         position: relative;
         align-items: center;
-        height: 1.2em;
+        height: 1em;
         contain: strict;
       }
 

src/panels/lovelace/components/hui-theme-select-editor.ts

@@ -26,11 +26,7 @@ export class HuiThemeSelectEditor extends LitElement {
     return html`
       <paper-dropdown-menu
         .label=${this.label ||
-        `${this.hass!.localize(
+        this.hass!.localize("ui.panel.lovelace.editor.card.generic.theme")}
-          "ui.panel.lovelace.editor.card.generic.theme"
-        )} (${this.hass!.localize(
-          "ui.panel.lovelace.editor.card.config.optional"
-        )})`}
         dynamic-align
       >
         <paper-listbox
@@ -59,9 +55,6 @@ export class HuiThemeSelectEditor extends LitElement {
       paper-dropdown-menu {
         width: 100%;
       }
-      paper-item {
-        cursor: pointer;
-      }
     `;
   }
 

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -353,9 +353,11 @@ export class HuiCardPicker extends LitElement {
           max-width: 500px;
           display: flex;
           flex-direction: column;
-          border-radius: var(--ha-card-border-radius, 4px);
+          border-radius: 4px;
+          border: 1px solid var(--divider-color);
           background: var(--primary-background-color, #fafafa);
           cursor: pointer;
+          box-sizing: border-box;
           position: relative;
         }
 
@@ -373,6 +375,7 @@ export class HuiCardPicker extends LitElement {
             --ha-card-background,
             var(--card-background-color, white)
           );
+          border-radius: 0 0 4px 4px;
           border-bottom: 1px solid var(--divider-color);
         }
 
@@ -405,10 +408,6 @@ export class HuiCardPicker extends LitElement {
           width: 100%;
           height: 100%;
           z-index: 1;
-          box-sizing: border-box;
-          border: var(--ha-card-border-width, 1px) solid
-            var(--ha-card-border-color, var(--divider-color));
-          border-radius: var(--ha-card-border-radius, 4px);
         }
 
         .manual {

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -1,5 +1,14 @@
-import { mdiHelpCircle } from "@mdi/js";
+import { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
+import {
+  mdiCheckboxBlankOutline,
+  mdiCheckBoxOutline,
+  mdiCodeBracesBox,
+  mdiDotsVertical,
+  mdiFormSelect,
+  mdiHelpCircleOutline,
+} from "@mdi/js";
 import deepFreeze from "deep-freeze";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultArray,
@@ -14,10 +23,16 @@ import {
 } from "lit-element";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { shouldHandleRequestSelectedEvent } from "../../../../common/mwc/handle-request-selected-event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-circular-progress";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-header-bar";
+import "../../../../components/ha-menu-button";
+import {
+  CoreFrontendUserData,
+  getOptimisticFrontendUserDataCollection,
+} from "../../../../data/frontend";
 import type {
   LovelaceCardConfig,
   LovelaceViewConfig,
@@ -40,6 +55,7 @@ declare global {
   // for fire event
   interface HASSDomEvents {
     "reload-lovelace": undefined;
+    "scroll-to-pos": { x: number; y: number };
   }
   // for add event listener
   interface HTMLElementEventMap {
@@ -75,6 +91,12 @@ export class HuiDialogEditCard extends LitElement
 
   @internalProperty() private _dirty = false;
 
+  @internalProperty() private _coreUserData?: CoreFrontendUserData | null;
+
+  @internalProperty() private _isAdvanced? = false;
+
+  private _unsubCoreData?: UnsubscribeFunc;
+
   public async showDialog(params: EditCardDialogParams): Promise<void> {
     this._params = params;
     this._GUImode = true;
@@ -90,6 +112,13 @@ export class HuiDialogEditCard extends LitElement
     if (params.cardConfig) {
       this._dirty = true;
     }
+    this._unsubCoreData = getOptimisticFrontendUserDataCollection(
+      this.hass.connection,
+      "core"
+    ).subscribe((coreUserData) => {
+      this._coreUserData = coreUserData;
+      this._isAdvanced = coreUserData?.showAdvanced;
+    });
   }
 
   public closeDialog(): boolean {
@@ -102,6 +131,10 @@ export class HuiDialogEditCard extends LitElement
     this._error = undefined;
     this._documentationURL = undefined;
     this._dirty = false;
+    if (this._unsubCoreData) {
+      this._unsubCoreData();
+      this._unsubCoreData = undefined;
+    }
     fireEvent(this, "dialog-closed", { dialog: this.localName });
     return true;
   }
@@ -157,10 +190,11 @@ export class HuiDialogEditCard extends LitElement
       <ha-dialog
         open
         scrimClickAction
+        full
+        .heading=${true}
         @keydown=${this._ignoreKeydown}
         @closed=${this._cancel}
         @opened=${this._opened}
-        .heading=${true}
       >
         <div slot="heading">
           <ha-header-bar>
@@ -177,11 +211,75 @@ export class HuiDialogEditCard extends LitElement
                     dir=${computeRTLDirection(this.hass)}
                   >
                     <mwc-icon-button>
-                      <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
+                      <ha-svg-icon .path=${mdiHelpCircleOutline}></ha-svg-icon>
                     </mwc-icon-button>
                   </a>
                 `
               : ""}
+            ${this._cardConfig !== undefined
+              ? html`
+                  <ha-button-menu
+                    fixed
+                    corner="BOTTOM_START"
+                    slot="actionItems"
+                    @closed=${(ev) => ev.stopPropagation()}
+                  >
+                    <mwc-icon-button
+                      slot="trigger"
+                      .label=${this.hass!.localize(
+                        "ui.panel.lovelace.editor.menu.open"
+                      )}
+                      .title=${this.hass!.localize(
+                        "ui.panel.lovelace.editor.menu.open"
+                      )}
+                    >
+                      <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+                    </mwc-icon-button>
+                    ${this._coreUserData?.showAdvanced === true
+                      ? html`
+                          <mwc-list-item
+                            graphic="icon"
+                            .label=${this.hass!.localize(
+                              !this._cardEditorEl || this._GUImode
+                                ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
+                                : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
+                            )}
+                            .disabled=${!this._guiModeAvailable}
+                            @request-selected=${this._toggleMode}
+                          >
+                            <span
+                              >${this.hass!.localize(
+                                !this._cardEditorEl || this._GUImode
+                                  ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
+                                  : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
+                              )}</span
+                            >
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${!this._cardEditorEl || this._GUImode
+                                ? mdiCodeBracesBox
+                                : mdiFormSelect}
+                            ></ha-svg-icon>
+                          </mwc-list-item>
+                        `
+                      : html`
+                          <mwc-list-item
+                            graphic="icon"
+                            label="Show Advanced Options"
+                            @request-selected=${this._toggleAdvanced}
+                          >
+                            <span>Show Advanced Options</span>
+                            <ha-svg-icon
+                              slot="graphic"
+                              .path=${this._isAdvanced
+                                ? mdiCheckBoxOutline
+                                : mdiCheckboxBlankOutline}
+                            ></ha-svg-icon>
+                          </mwc-list-item>
+                        `}
+                  </ha-button-menu>
+                `
+              : ""}
           </ha-header-bar>
         </div>
         <div class="content">
@@ -190,9 +288,11 @@ export class HuiDialogEditCard extends LitElement
               .hass=${this.hass}
               .lovelace=${this._params.lovelaceConfig}
               .value=${this._cardConfig}
+              .isAdvanced=${this._isAdvanced}
               @config-changed=${this._handleConfigChanged}
               @GUImode-changed=${this._handleGUIModeChanged}
               @editor-save=${this._save}
+              @scroll-to-pos=${this._scrollToPos}
             ></hui-card-element-editor>
           </div>
           <div class="element-preview">
@@ -211,22 +311,6 @@ export class HuiDialogEditCard extends LitElement
               : ``}
           </div>
         </div>
-        ${this._cardConfig !== undefined
-          ? html`
-              <mwc-button
-                slot="secondaryAction"
-                @click=${this._toggleMode}
-                .disabled=${!this._guiModeAvailable}
-                class="gui-mode-button"
-              >
-                ${this.hass!.localize(
-                  !this._cardEditorEl || this._GUImode
-                    ? "ui.panel.lovelace.editor.edit_card.show_code_editor"
-                    : "ui.panel.lovelace.editor.edit_card.show_visual_editor"
-                )}
-              </mwc-button>
-            `
-          : ""}
         <div slot="primaryAction" @click=${this._save}>
           <mwc-button @click=${this._cancel}>
             ${this.hass!.localize("ui.common.cancel")}
@@ -264,6 +348,13 @@ export class HuiDialogEditCard extends LitElement
     ev.stopPropagation();
   }
 
+  private _scrollToPos(ev: CustomEvent): void {
+    this.shadowRoot!.querySelector("ha-dialog")?.scrollToPos(
+      ev.detail.x,
+      ev.detail.y
+    );
+  }
+
   private _handleConfigChanged(ev: HASSDomEvent<ConfigChangedEvent>) {
     this._cardConfig = deepFreeze(ev.detail.config);
     this._error = ev.detail.error;
@@ -277,10 +368,20 @@ export class HuiDialogEditCard extends LitElement
     this._guiModeAvailable = ev.detail.guiModeAvailable;
   }
 
-  private _toggleMode(): void {
+  private _toggleMode(ev: CustomEvent<RequestSelectedDetail>): void {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
     this._cardEditorEl?.toggleMode();
   }
 
+  private _toggleAdvanced(ev: CustomEvent<RequestSelectedDetail>): void {
+    if (!shouldHandleRequestSelectedEvent(ev)) {
+      return;
+    }
+    this._isAdvanced = !this._isAdvanced;
+  }
+
   private _opened() {
     this._cardEditorEl?.refreshYamlEditor();
   }
@@ -358,37 +459,47 @@ export class HuiDialogEditCard extends LitElement
       css`
         :host {
           --code-mirror-max-height: calc(100vh - 176px);
+          --dialog-content-padding: 0px 24px;
         }
 
         @media all and (max-width: 450px), all and (max-height: 500px) {
           /* overrule the ha-style-dialog max-height on small screens */
           ha-dialog {
             --mdc-dialog-max-height: 100%;
-            height: 100%;
           }
         }
 
-        @media all and (min-width: 850px) {
-          ha-dialog {
-            --mdc-dialog-min-width: 845px;
-            --mdc-dialog-max-height: calc(100% - 72px);
-          }
-        }
-
-        ha-dialog {
-          --mdc-dialog-max-width: 845px;
-          --dialog-z-index: 5;
-        }
-
         @media all and (min-width: 451px) and (min-height: 501px) {
           ha-dialog {
             --mdc-dialog-max-width: 90vw;
           }
-          :host([large]) .content {
+          :host([large]) ha-dialog {
             width: calc(90vw - 48px);
           }
         }
 
+        @media all and (min-width: 850px) {
+          ha-dialog {
+            --mdc-dialog-min-width: 845px;
+          }
+        }
+
+        @media (min-width: 1200px) {
+          ha-dialog {
+            --mdc-dialog-max-width: 1250px;
+            --dialog-surface-position: fixed;
+          }
+        }
+
+        ha-dialog {
+          --dialog-z-index: 5;
+          --mdc-dialog-max-height: 750px;
+        }
+
+        :host([large]) ha-dialog {
+          --mdc-dialog-max-width: calc(100% - 32px);
+        }
+
         ha-header-bar {
           --mdc-theme-on-primary: var(--primary-text-color);
           --mdc-theme-primary: var(--mdc-theme-surface);
@@ -407,23 +518,17 @@ export class HuiDialogEditCard extends LitElement
           flex-direction: column;
           margin: 0 -10px;
         }
+
         .content hui-card-preview {
           margin: 4px auto;
           max-width: 390px;
         }
+
         .content .element-editor {
           margin: 0 10px;
         }
 
         @media (min-width: 1200px) {
-          ha-dialog {
-            --mdc-dialog-max-width: calc(100% - 32px);
-            --mdc-dialog-min-width: 1000px;
-            --dialog-surface-position: fixed;
-            --dialog-surface-top: 40px;
-            --mdc-dialog-max-height: calc(100% - 72px);
-          }
-
           .content {
             flex-direction: row;
           }
@@ -435,32 +540,34 @@ export class HuiDialogEditCard extends LitElement
           }
           .content hui-card-preview {
             padding: 8px 10px;
-            margin: auto 0px;
+            margin: auto;
             max-width: 500px;
           }
         }
+
         .hidden {
           display: none;
         }
+
         .element-editor {
           margin-bottom: 8px;
         }
+
         .blur {
           filter: blur(2px) grayscale(100%);
         }
+
         .element-preview {
           position: relative;
-          height: max-content;
-          background: var(--primary-background-color);
-          padding: 4px;
-          border-radius: 4px;
         }
+
         .element-preview ha-circular-progress {
           top: 50%;
           left: 50%;
           position: absolute;
           z-index: 10;
         }
+
         hui-card-preview {
           padding-top: 8px;
           margin-bottom: 4px;
@@ -468,14 +575,13 @@ export class HuiDialogEditCard extends LitElement
           width: 100%;
           box-sizing: border-box;
         }
-        .gui-mode-button {
+
-          margin-right: auto;
-        }
         .header {
           display: flex;
           align-items: center;
           justify-content: space-between;
         }
+
         .header_button {
           color: inherit;
           text-decoration: none;

src/panels/lovelace/editor/card-editor/show-create-card-dialog.ts

@@ -8,7 +8,7 @@ export interface CreateCardDialogParams {
   entities?: string[]; // We can pass entity id's that will be added to the config when a card is picked
 }
 
-export const importCreateCardDialog = () => import("./hui-dialog-create-card");
+const importCreateCardDialog = () => import("./hui-dialog-create-card");
 
 export const showCreateCardDialog = (
   element: HTMLElement,

src/panels/lovelace/editor/card-editor/show-delete-card-dialog.ts

@@ -6,7 +6,7 @@ export interface DeleteCardDialogParams {
   cardConfig?: LovelaceCardConfig;
 }
 
-export const importDeleteCardDialog = () => import("./hui-dialog-delete-card");
+const importDeleteCardDialog = () => import("./hui-dialog-delete-card");
 
 export const showDeleteCardDialog = (
   element: HTMLElement,

src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts

@@ -8,7 +8,7 @@ export interface EditCardDialogParams {
   cardConfig?: LovelaceCardConfig;
 }
 
-export const importEditCardDialog = () => import("./hui-dialog-edit-card");
+const importEditCardDialog = () => import("./hui-dialog-edit-card");
 
 export const showEditCardDialog = (
   element: HTMLElement,

src/panels/lovelace/editor/config-elements/config-elements-style.ts

@@ -14,4 +14,13 @@ export const configElementStyle = css`
   .suffix {
     margin: 0 8px;
   }
+  ha-settings-row {
+    padding: 0;
+  }
+  ha-expansion-panel {
+    padding-top: 8px;
+  }
+  ha-expansion-panel .title {
+    font-size: 16px;
+  }
 `;

src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts

@@ -19,6 +19,7 @@ import { HomeAssistant } from "../../../../types";
 import { AlarmPanelCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -37,6 +38,8 @@ export class HuiAlarmPanelCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: AlarmPanelCardConfig;
 
   public setConfig(config: AlarmPanelCardConfig): void {
@@ -68,62 +71,68 @@ export class HuiAlarmPanelCardEditor extends LitElement
     const states = ["arm_home", "arm_away", "arm_night", "arm_custom_bypass"];
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            allow-custom-entity
-          .hass=${this.hass}
+            .label="${this.hass.localize(
-          .value="${this._entity}"
+              "ui.panel.lovelace.editor.card.generic.entity"
-          .configValue=${"entity"}
+            )} (${this.hass.localize(
-          .includeDomains=${includeDomains}
+              "ui.panel.lovelace.editor.card.config.required"
-          @change="${this._valueChanged}"
+            )})"
-          allow-custom-entity
+            .hass=${this.hass}
-        ></ha-entity-picker>
+            .value=${this._entity}
-        <paper-input
+            .configValue=${"entity"}
-          .label="${this.hass.localize(
+            .includeDomains=${includeDomains}
-            "ui.panel.lovelace.editor.card.generic.name"
+            @change=${this._valueChanged}
-          )} (${this.hass.localize(
+          ></ha-entity-picker>
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value="${this._name}"
+              "ui.panel.lovelace.editor.card.generic.name"
-          .configValue="${"name"}"
+            )}
-          @value-changed="${this._valueChanged}"
+            .value=${this._name}
-        ></paper-input>
+            .configValue=${"name"}
-        <span>Used States</span> ${this._states.map((state, index) => {
+            @value-changed=${this._valueChanged}
-          return html`
+          ></paper-input>
-            <div class="states">
+          <span>Used States</span>
-              <paper-item>${state}</paper-item>
+          ${this._states.map((state, index) => {
-              <ha-icon
+            return html`
-                class="deleteState"
+              <div class="states">
-                .value="${index}"
+                <paper-item>${state}</paper-item>
-                icon="hass:close"
+                <ha-icon
-                @click=${this._stateRemoved}
+                  class="deleteState"
-              ></ha-icon>
+                  .value=${index}
-            </div>
+                  icon="hass:close"
-          `;
+                  @click=${this._stateRemoved}
-        })}
+                ></ha-icon>
-        <paper-dropdown-menu
+              </div>
-          .label="${this.hass.localize(
+            `;
-            "ui.panel.lovelace.editor.card.alarm-panel.available_states"
+          })}
-          )}"
+          <paper-dropdown-menu
-          @value-changed="${this._stateAdded}"
+            .label=${this.hass.localize(
-        >
+              "ui.panel.lovelace.editor.card.alarm-panel.available_states"
-          <paper-listbox slot="dropdown-content">
+            )}
-            ${states.map((state) => {
+            @value-changed=${this._stateAdded}
-              return html` <paper-item>${state}</paper-item> `;
+          >
-            })}
+            <paper-listbox slot="dropdown-content">
-          </paper-listbox>
+              ${states.map((state) => {
-        </paper-dropdown-menu>
+                return html`<paper-item>${state}</paper-item>`;
-        <hui-theme-select-editor
+              })}
-          .hass=${this.hass}
+            </paper-listbox>
-          .value="${this._theme}"
+          </paper-dropdown-menu>
-          .configValue="${"theme"}"
+        </div>
-          @value-changed="${this._valueChanged}"
+        <div slot="advanced" class="card-config">
-        ></hui-theme-select-editor>
+          <hui-theme-select-editor
-      </div>
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts

@@ -11,9 +11,9 @@ import {
 import { assert, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-input";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -22,6 +22,7 @@ import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { actionConfigStruct, EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -53,6 +54,8 @@ export class HuiButtonCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: ButtonCardConfig;
 
   public setConfig(config: ButtonCardConfig): void {
@@ -107,117 +110,34 @@ export class HuiButtonCardEditor extends LitElement
       return html``;
     }
 
-    const dir = computeRTLDirection(this.hass!);
-
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            allow-custom-entity
-          .hass=${this.hass}
+            .label=${this.hass.localize(
-          .value=${this._entity}
+              "ui.panel.lovelace.editor.card.generic.entity"
-          .configValue=${"entity"}
+            )}
-          @value-changed=${this._valueChanged}
+            .hass=${this.hass}
-          allow-custom-entity
+            .value=${this._entity}
-        ></ha-entity-picker>
+            .configValue=${"entity"}
-        <div class="side-by-side">
+            @value-changed=${this._valueChanged}
+          ></ha-entity-picker>
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.name"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .value=${this._name}
             .configValue=${"name"}
             @value-changed=${this._valueChanged}
           ></paper-input>
-          <ha-icon-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.icon"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._icon}
-            .placeholder=${this._icon ||
-            stateIcon(this.hass.states[this._entity])}
-            .configValue=${"icon"}
-            @value-changed=${this._valueChanged}
-          ></ha-icon-input>
-        </div>
-        <div class="side-by-side">
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_name"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._show_name !== false}
-                .configValue=${"show_name"}
-                @change=${this._change}
-              ></ha-switch>
-            </ha-formfield>
-          </div>
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_state"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._show_state !== false}
-                .configValue=${"show_state"}
-                @change=${this._change}
-              ></ha-switch>
-            </ha-formfield>
-          </div>
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_icon"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._show_icon !== false}
-                .configValue=${"show_icon"}
-                @change=${this._change}
-              ></ha-switch>
-            </ha-formfield>
-          </div>
-        </div>
-        <div class="side-by-side">
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.icon_height"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._icon_height}
-            .configValue=${"icon_height"}
-            @value-changed=${this._valueChanged}
-            type="number"
-            ><div class="suffix" slot="suffix">px</div>
-          </paper-input>
-          <hui-theme-select-editor
-            .hass=${this.hass}
-            .value=${this._theme}
-            .configValue=${"theme"}
-            @value-changed=${this._valueChanged}
-          ></hui-theme-select-editor>
-        </div>
-        <div class="side-by-side">
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.tap_action"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .hass=${this.hass}
             .config=${this._tap_action}
             .actions=${actions}
@@ -227,12 +147,40 @@ export class HuiButtonCardEditor extends LitElement
             )}
             @value-changed=${this._valueChanged}
           ></hui-action-editor>
+        </div>
+        <div slot="advanced" class="card-config">
+          <div class="side-by-side">
+            <ha-icon-input
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.icon"
+              )}
+              .value=${this._icon}
+              .placeholder=${this._icon ||
+              stateIcon(this.hass.states[this._entity])}
+              .configValue=${"icon"}
+              @value-changed=${this._valueChanged}
+            ></ha-icon-input>
+            <paper-input
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.icon_height"
+              )}
+              .value=${this._icon_height}
+              .configValue=${"icon_height"}
+              @value-changed=${this._valueChanged}
+              type="number"
+              ><div class="suffix" slot="suffix">px</div>
+            </paper-input>
+          </div>
+          <hui-theme-select-editor
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.hold_action"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .hass=${this.hass}
             .config=${this._hold_action}
             .actions=${actions}
@@ -242,8 +190,44 @@ export class HuiButtonCardEditor extends LitElement
             )}
             @value-changed=${this._valueChanged}
           ></hui-action-editor>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_state"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._show_state !== false}
+              .configValue=${"show_state"}
+              @change=${this._change}
+            ></ha-switch>
+          </ha-settings-row>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_name"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._show_name !== false}
+              .configValue=${"show_name"}
+              @change=${this._change}
+            ></ha-switch>
+          </ha-settings-row>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_icon"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._show_icon !== false}
+              .configValue=${"show_icon"}
+              @change=${this._change}
+            ></ha-switch>
+          </ha-settings-row>
         </div>
-      </div>
+      </hui-config-element-template>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts

@@ -1,5 +1,6 @@
 import {
-  CSSResult,
+  css,
+  CSSResultArray,
   customElement,
   html,
   internalProperty,
@@ -23,6 +24,7 @@ import type { CalendarCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import type { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import type { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -41,6 +43,8 @@ export class HuiCalendarCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @property({ attribute: false }) private _config?: CalendarCardConfig;
 
   @internalProperty() private _configEntities?: string[];
@@ -69,14 +73,15 @@ export class HuiCalendarCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <div class="side-by-side">
+        .hass=${this.hass}
+        .isAdvanced=${this.isAdvanced}
+      >
+        <div class="card-config">
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.title"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .value=${this._title}
             .configValue=${"title"}
             @value-changed=${this._valueChanged}
@@ -105,28 +110,30 @@ export class HuiCalendarCardEditor extends LitElement
             </paper-listbox>
           </paper-dropdown-menu>
         </div>
-        <hui-theme-select-editor
+        <h3>
-          .hass=${this.hass}
+          ${`${this.hass.localize(
-          .value=${this._theme}
+            "ui.panel.lovelace.editor.card.calendar.calendar_entities"
-          .configValue=${"theme"}
+          )} (
+          ${this.hass!.localize(
+            "ui.panel.lovelace.editor.card.config.required"
+          )})`}
+        </h3>
+        <ha-entities-picker
+          .hass=${this.hass!}
+          .value=${this._configEntities}
+          .includeDomains=${["calendar"]}
           @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
+        >
-      </div>
+        </ha-entities-picker>
-      <h3>
+        <div slot="advanced" class="card-config">
-        ${this.hass.localize(
+          <hui-theme-select-editor
-          "ui.panel.lovelace.editor.card.calendar.calendar_entities"
+            .hass=${this.hass}
-        ) +
+            .value=${this._theme}
-        " (" +
+            .configValue=${"theme"}
-        this.hass!.localize("ui.panel.lovelace.editor.card.config.required") +
+            @value-changed=${this._valueChanged}
-        ")"}
+          ></hui-theme-select-editor>
-      </h3>
+        </div>
-      <ha-entities-picker
+      </hui-config-element-template>
-        .hass=${this.hass!}
-        .value=${this._configEntities}
-        .includeDomains=${["calendar"]}
-        @value-changed=${this._valueChanged}
-      >
-      </ha-entities-picker>
     `;
   }
 
@@ -175,8 +182,15 @@ export class HuiCalendarCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultArray {
-    return configElementStyle;
+    return [
+      configElementStyle,
+      css`
+        paper-dropdown-menu {
+          width: 100%;
+        }
+      `,
+    ];
   }
 }
 

src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts

@@ -22,11 +22,11 @@ import {
   union,
 } from "superstruct";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/entity/state-badge";
 import "../../../../components/ha-card";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import type { HomeAssistant } from "../../../../types";
 import type { EntitiesCardConfig } from "../../cards/types";
@@ -35,6 +35,7 @@ import type { LovelaceRowConfig } from "../../entity-rows/types";
 import { headerFooterConfigStructs } from "../../header-footer/types";
 import type { LovelaceCardEditor } from "../../types";
 import "../header-footer-editor/hui-header-footer-editor";
+import "../hui-config-element-template";
 import "../hui-entities-card-row-editor";
 import "../hui-sub-element-editor";
 import { processEditorEntities } from "../process-editor-entities";
@@ -62,6 +63,8 @@ export class HuiEntitiesCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: EntitiesCardConfig;
 
   @internalProperty() private _configEntities?: LovelaceRowConfig[];
@@ -92,6 +95,7 @@ export class HuiEntitiesCardEditor extends LitElement
         <hui-sub-element-editor
           .hass=${this.hass}
           .config=${this._subElementEditorConfig}
+          .isAdvancedUser=${this.isAdvanced}
           @go-back=${this._goBack}
           @config-changed=${this._handleSubElementChanged}
         >
@@ -100,70 +104,80 @@ export class HuiEntitiesCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label="${this.hass.localize(
-          .value=${this._title}
+              "ui.panel.lovelace.editor.card.generic.title"
-          .configValue=${"title"}
+            )} (${this.hass.localize(
-          @value-changed=${this._valueChanged}
+              "ui.panel.lovelace.editor.card.config.optional"
-        ></paper-input>
+            )})"
-        <hui-theme-select-editor
+            .value=${this._title}
-          .hass=${this.hass}
+            .configValue=${"title"}
-          .value=${this._theme}
+            @value-changed=${this._valueChanged}
-          .configValue=${"theme"}
+          ></paper-input>
-          @value-changed=${this._valueChanged}
+          <ha-settings-row>
-        ></hui-theme-select-editor>
+            <span slot="heading">
-        <div class="side-by-side">
+              ${this.hass.localize(
-          <ha-formfield
+                "ui.panel.lovelace.editor.card.entities.show_header_toggle"
-            .label=${this.hass.localize(
+              )}
-              "ui.panel.lovelace.editor.card.entities.show_header_toggle"
+            </span>
-            )}
+            <span slot="description">
-            .dir=${computeRTLDirection(this.hass)}
+              ${this.hass.localize(
-          >
+                "ui.panel.lovelace.editor.card.entities.show_header_toggle_secondary"
+              )}
+            </span>
             <ha-switch
               .checked=${this._config!.show_header_toggle !== false}
               .configValue=${"show_header_toggle"}
               @change=${this._valueChanged}
             ></ha-switch>
-          </ha-formfield>
+          </ha-settings-row>
-          <ha-formfield
+        </div>
-            .label=${this.hass.localize(
+        <hui-entities-card-row-editor
-              "ui.panel.lovelace.editor.card.generic.state_color"
+          .hass=${this.hass}
-            )}
+          .entities=${this._configEntities}
-            .dir=${computeRTLDirection(this.hass)}
+          @entities-changed=${this._valueChanged}
-          >
+          @edit-detail-element=${this._editDetailElement}
+        ></hui-entities-card-row-editor>
+        <div slot="advanced" class="card-config">
+          <hui-header-footer-editor
+            .hass=${this.hass}
+            .configValue=${"header"}
+            .config=${this._config.header}
+            @value-changed=${this._valueChanged}
+            @edit-detail-element=${this._editDetailElement}
+          ></hui-header-footer-editor>
+          <hui-header-footer-editor
+            .hass=${this.hass}
+            .configValue=${"footer"}
+            .config=${this._config.footer}
+            @value-changed=${this._valueChanged}
+            @edit-detail-element=${this._editDetailElement}
+          ></hui-header-footer-editor>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.state_color"
+              )}
+            </span>
             <ha-switch
               .checked=${this._config!.state_color}
               .configValue=${"state_color"}
               @change=${this._valueChanged}
             ></ha-switch>
-          </ha-formfield>
+          </ha-settings-row>
+          <hui-theme-select-editor
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
         </div>
-        <hui-header-footer-editor
+      </hui-config-element-template>
-          .hass=${this.hass}
-          .configValue=${"header"}
-          .config=${this._config.header}
-          @value-changed=${this._valueChanged}
-          @edit-detail-element=${this._editDetailElement}
-        ></hui-header-footer-editor>
-        <hui-header-footer-editor
-          .hass=${this.hass}
-          .configValue=${"footer"}
-          .config=${this._config.footer}
-          @value-changed=${this._valueChanged}
-          @edit-detail-element=${this._editDetailElement}
-        ></hui-header-footer-editor>
-      </div>
-      <hui-entities-card-row-editor
-        .hass=${this.hass}
-        .entities=${this._configEntities}
-        @entities-changed=${this._valueChanged}
-        @edit-detail-element=${this._editDetailElement}
-      ></hui-entities-card-row-editor>
     `;
   }
 
@@ -188,20 +202,9 @@ export class HuiEntitiesCardEditor extends LitElement
       return;
     }
 
-    if (configValue === "row" || (ev.detail && ev.detail.entities)) {
+    if (ev.detail && ev.detail.entities) {
       const newConfigEntities =
         ev.detail.entities || this._configEntities!.concat();
-      if (configValue === "row") {
-        if (!value) {
-          newConfigEntities.splice(this._subElementEditorConfig!.index!, 1);
-          this._goBack();
-        } else {
-          newConfigEntities[this._subElementEditorConfig!.index!] = value;
-        }
-
-        this._subElementEditorConfig!.elementConfig = value;
-      }
-
       this._config = { ...this._config!, entities: newConfigEntities };
       this._configEntities = processEditorEntities(this._config!.entities);
     } else if (configValue) {
@@ -221,18 +224,20 @@ export class HuiEntitiesCardEditor extends LitElement
 
   private _handleSubElementChanged(ev: CustomEvent): void {
     ev.stopPropagation();
-    if (!this._config || !this.hass) {
+    const configValue = this._subElementEditorConfig?.type;
+
+    if (!this._config || !this.hass || !configValue) {
       return;
     }
 
-    const configValue = this._subElementEditorConfig?.type;
     const value = ev.detail.config;
+    let goBack = false;
 
     if (configValue === "row") {
       const newConfigEntities = this._configEntities!.concat();
       if (!value) {
         newConfigEntities.splice(this._subElementEditorConfig!.index!, 1);
-        this._goBack();
+        goBack = true;
       } else {
         newConfigEntities[this._subElementEditorConfig!.index!] = value;
       }
@@ -240,9 +245,10 @@ export class HuiEntitiesCardEditor extends LitElement
       this._config = { ...this._config!, entities: newConfigEntities };
       this._configEntities = processEditorEntities(this._config!.entities);
     } else if (configValue) {
-      if (value === "") {
+      if (!value || value === "") {
         this._config = { ...this._config };
         delete this._config[configValue!];
+        goBack = true;
       } else {
         this._config = {
           ...this._config,
@@ -251,16 +257,21 @@ export class HuiEntitiesCardEditor extends LitElement
       }
     }
 
-    this._subElementEditorConfig = {
+    if (goBack) {
-      ...this._subElementEditorConfig!,
+      this._goBack();
-      elementConfig: value,
+    } else {
-    };
+      this._subElementEditorConfig = {
+        ...this._subElementEditorConfig!,
+        elementConfig: value,
+      };
+    }
 
     fireEvent(this, "config-changed", { config: this._config });
   }
 
   private _editDetailElement(ev: HASSDomEvent<EditSubElementEvent>): void {
     this._subElementEditorConfig = ev.detail.subElementConfig;
+    fireEvent(this, "scroll-to-pos", { x: 0, y: 0 });
   }
 
   private _goBack(): void {

src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts

@@ -20,6 +20,7 @@ import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { headerFooterConfigStructs } from "../../header-footer/types";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -39,6 +40,8 @@ export class HuiEntityCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: EntityCardConfig;
 
   public setConfig(config: EntityCardConfig): void {
@@ -76,74 +79,67 @@ export class HuiEntityCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            .label=${this.hass.localize(
-          .hass=${this.hass}
+              "ui.panel.lovelace.editor.card.generic.entity"
-          .value=${this._entity}
+            )}
-          .configValue=${"entity"}
+            .hass=${this.hass}
-          @change=${this._valueChanged}
+            .value=${this._entity}
-          allow-custom-entity
+            .configValue=${"entity"}
-        ></ha-entity-picker>
+            @change=${this._valueChanged}
-        <div class="side-by-side">
+            allow-custom-entity
+          ></ha-entity-picker>
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.name"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .value=${this._name}
             .configValue=${"name"}
             @value-changed=${this._valueChanged}
           ></paper-input>
+        </div>
+        <div slot="advanced" class="card-config">
+          <ha-entity-attribute-picker
+            .hass=${this.hass}
+            .entityId=${this._entity}
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.attribute"
+            )}
+            .value=${this._attribute}
+            .configValue=${"attribute"}
+            @value-changed=${this._valueChanged}
+          ></ha-entity-attribute-picker>
           <ha-icon-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.icon"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .value=${this._icon}
             .placeholder=${this._icon ||
             stateIcon(this.hass.states[this._entity])}
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
           ></ha-icon-input>
-        </div>
-        <div class="side-by-side">
-          <ha-entity-attribute-picker
-            .hass=${this.hass}
-            .entityId=${this._entity}
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.attribute"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._attribute}
-            .configValue=${"attribute"}
-            @value-changed=${this._valueChanged}
-          ></ha-entity-attribute-picker>
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.unit"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .value=${this._unit}
             .configValue=${"unit"}
             @value-changed=${this._valueChanged}
           ></paper-input>
+          <hui-theme-select-editor
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
         </div>
-        <hui-theme-select-editor
+      </hui-config-element-template>
-          .hass=${this.hass}
-          .value=${this._theme}
-          .configValue=${"theme"}
-          @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
-      </div>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts

@@ -1,7 +1,6 @@
 import "@polymer/paper-input/paper-input";
 import {
-  css,
+  CSSResult,
-  CSSResultArray,
   customElement,
   html,
   internalProperty,
@@ -11,14 +10,15 @@ import {
 } from "lit-element";
 import { assert, number, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import { HomeAssistant } from "../../../../types";
 import { GaugeCardConfig, SeverityConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -40,6 +40,8 @@ export class HuiGaugeCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: GaugeCardConfig;
 
   public setConfig(config: GaugeCardConfig): void {
@@ -81,141 +83,131 @@ export class HuiGaugeCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            allow-custom-entity
-          .hass=${this.hass}
+            .label="${this.hass.localize(
-          .value="${this._entity}"
+              "ui.panel.lovelace.editor.card.generic.entity"
-          .configValue=${"entity"}
+            )} (${this.hass.localize(
-          .includeDomains=${includeDomains}
-          @change="${this._valueChanged}"
-          allow-custom-entity
-        ></ha-entity-picker>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.name"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._name}"
-          .configValue=${"name"}
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.unit"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._unit}"
-          .configValue=${"unit"}
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <hui-theme-select-editor
-          .hass=${this.hass}
-          .value="${this._theme}"
-          .configValue="${"theme"}"
-          @value-changed="${this._valueChanged}"
-        ></hui-theme-select-editor>
-        <paper-input
-          type="number"
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.minimum"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._min}"
-          .configValue=${"min"}
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <paper-input
-          type="number"
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.maximum"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._max}"
-          .configValue=${"max"}
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.card.gauge.severity.define"
-          )}
-          .dir=${computeRTLDirection(this.hass)}
-        >
-          <ha-switch
-            .checked="${this._config!.severity !== undefined}"
-            @change="${this._toggleSeverity}"
-          ></ha-switch
-        ></ha-formfield>
-        ${this._config!.severity !== undefined
-          ? html`
-              <paper-input
-                type="number"
-                .label="${this.hass.localize(
-                  "ui.panel.lovelace.editor.card.gauge.severity.green"
-                )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.required"
             )})"
-                .value="${this._severity ? this._severity.green : 0}"
+            .hass=${this.hass}
-                .configValue=${"green"}
+            .value=${this._entity}
-                @value-changed="${this._severityChanged}"
+            .configValue=${"entity"}
-              ></paper-input>
+            .includeDomains=${includeDomains}
-              <paper-input
+            @change=${this._valueChanged}
-                type="number"
+          ></ha-entity-picker>
-                .label="${this.hass.localize(
+          <paper-input
-                  "ui.panel.lovelace.editor.card.gauge.severity.yellow"
+            .label=${this.hass.localize(
-                )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.name"
-              "ui.panel.lovelace.editor.card.config.required"
+            )}
-            )})"
+            .value=${this._name}
-                .value="${this._severity ? this._severity.yellow : 0}"
+            .configValue=${"name"}
-                .configValue=${"yellow"}
+            @value-changed=${this._valueChanged}
-                @value-changed="${this._severityChanged}"
+          ></paper-input>
-              ></paper-input>
+          <div class="side-by-side">
-              <paper-input
+            <paper-input
-                type="number"
+              type="number"
-                .label="${this.hass.localize(
+              .label="${this.hass.localize(
-                  "ui.panel.lovelace.editor.card.gauge.severity.red"
+                "ui.panel.lovelace.editor.card.generic.minimum"
-                )} (${this.hass.localize(
+              )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.required"
+                "ui.panel.lovelace.editor.card.config.optional"
-            )})"
+              )})"
-                .value="${this._severity ? this._severity.red : 0}"
+              .value=${this._min}
-                .configValue=${"red"}
+              .configValue=${"min"}
-                @value-changed="${this._severityChanged}"
+              @value-changed=${this._valueChanged}
-              ></paper-input>
+            ></paper-input>
+            <paper-input
+              type="number"
+              .label="${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.maximum"
+              )} (${this.hass.localize(
+                "ui.panel.lovelace.editor.card.config.optional"
+              )})"
+              .value=${this._max}
+              .configValue=${"max"}
+              @value-changed=${this._valueChanged}
+            ></paper-input>
           </div>
-          `
+        </div>
-          : ""}
+        <div slot="advanced" class="card-config">
-      </div>
+          <paper-input
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.unit"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
+            .value=${this._unit}
+            .configValue=${"unit"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.gauge.severity.define"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._config!.severity !== undefined}
+              @change=${this._toggleSeverity}
+            ></ha-switch>
+          </ha-settings-row>
+          ${this._config!.severity !== undefined
+            ? html`
+                <div class="side-by-side">
+                  <paper-input
+                    type="number"
+                    .label="${this.hass.localize(
+                      "ui.panel.lovelace.editor.card.gauge.severity.green"
+                    )} (${this.hass.localize(
+                      "ui.panel.lovelace.editor.card.config.required"
+                    )})"
+                    .value=${this._severity ? this._severity.green : 0}
+                    .configValue=${"green"}
+                    @value-changed=${this._severityChanged}
+                  ></paper-input>
+                  <paper-input
+                    type="number"
+                    .label="${this.hass.localize(
+                      "ui.panel.lovelace.editor.card.gauge.severity.yellow"
+                    )} (${this.hass.localize(
+                      "ui.panel.lovelace.editor.card.config.required"
+                    )})"
+                    .value=${this._severity ? this._severity.yellow : 0}
+                    .configValue=${"yellow"}
+                    @value-changed=${this._severityChanged}
+                  ></paper-input>
+                  <paper-input
+                    type="number"
+                    .label="${this.hass.localize(
+                      "ui.panel.lovelace.editor.card.gauge.severity.red"
+                    )} (${this.hass.localize(
+                      "ui.panel.lovelace.editor.card.config.required"
+                    )})"
+                    .value=${this._severity ? this._severity.red : 0}
+                    .configValue=${"red"}
+                    @value-changed=${this._severityChanged}
+                  ></paper-input>
+                </div>
+              `
+            : ""}
+          <hui-theme-select-editor
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResult {
-    return [
+    return configElementStyle;
-      configElementStyle,
-      css`
-        .severity {
-          display: none;
-          width: 100%;
-          padding-left: 16px;
-          flex-direction: row;
-          flex-wrap: wrap;
-        }
-        .severity > * {
-          flex: 1 0 30%;
-          padding-right: 4px;
-        }
-        ha-switch[checked] ~ .severity {
-          display: flex;
-        }
-      `,
-    ];
   }
 
   private _toggleSeverity(ev: EntitiesEditorEvent): void {

src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts

@@ -76,6 +76,7 @@ export class HuiGenericEntityRowEditor extends LitElement
     return html`
       <div class="card-config">
         <ha-entity-picker
+          hide-clear-icon
           allow-custom-entity
           .hass=${this.hass}
           .value=${this._config.entity}

src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts

@@ -21,17 +21,18 @@ import {
   union,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/entity/state-badge";
 import "../../../../components/ha-card";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import { HomeAssistant } from "../../../../types";
 import { ConfigEntity, GlanceCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { processEditorEntities } from "../process-editor-entities";
 import {
   EditorTarget,
@@ -57,6 +58,8 @@ export class HuiGlanceCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: GlanceCardConfig;
 
   @internalProperty() private _configEntities?: ConfigEntity[];
@@ -100,103 +103,94 @@ export class HuiGlanceCardEditor extends LitElement
       return html``;
     }
 
-    const dir = computeRTLDirection(this.hass!);
-
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value=${this._title}
+              "ui.panel.lovelace.editor.card.generic.title"
-          .configValue=${"title"}
+            )}
-          @value-changed=${this._valueChanged}
+            .value=${this._title}
-        ></paper-input>
+            .configValue=${"title"}
-        <div class="side-by-side">
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+        </div>
+        <hui-entity-editor
+          .hass=${this.hass}
+          .entities=${this._configEntities}
+          @entities-changed=${this._valueChanged}
+        ></hui-entity-editor>
+        <div slot="advanced" class="card-config">
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.glance.columns"
+            )}
+            type="number"
+            .value=${this._columns}
+            .configValue=${"columns"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_name"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._config!.show_name !== false}
+              .configValue=${"show_name"}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-settings-row>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_icon"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._config!.show_icon !== false}
+              .configValue=${"show_icon"}
+              @change=${this._valueChanged}
+            >
+            </ha-switch>
+          </ha-settings-row>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.show_state"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._config!.show_state !== false}
+              .configValue=${"show_state"}
+              @change=${this._valueChanged}
+            >
+            </ha-switch>
+          </ha-settings-row>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.state_color"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._config!.state_color}
+              .configValue=${"state_color"}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-settings-row>
           <hui-theme-select-editor
             .hass=${this.hass}
             .value=${this._theme}
             .configValue=${"theme"}
             @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.glance.columns"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            type="number"
-            .value=${this._columns}
-            .configValue=${"columns"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
         </div>
-        <div class="side-by-side">
+      </hui-config-element-template>
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_name"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._config!.show_name !== false}
-                .configValue=${"show_name"}
-                @change=${this._valueChanged}
-              ></ha-switch>
-            </ha-formfield>
-          </div>
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_icon"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._config!.show_icon !== false}
-                .configValue=${"show_icon"}
-                @change=${this._valueChanged}
-              >
-              </ha-switch>
-            </ha-formfield>
-          </div>
-          <div>
-            <ha-formfield
-              .label=${this.hass.localize(
-                "ui.panel.lovelace.editor.card.generic.show_state"
-              )}
-              .dir=${dir}
-            >
-              <ha-switch
-                .checked=${this._config!.show_state !== false}
-                .configValue=${"show_state"}
-                @change=${this._valueChanged}
-              >
-              </ha-switch>
-            </ha-formfield>
-          </div>
-        </div>
-        <ha-formfield
-          .label=${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.state_color"
-          )}
-          .dir=${computeRTLDirection(this.hass)}
-        >
-          <ha-switch
-            .checked=${this._config!.state_color}
-            .configValue=${"state_color"}
-            @change=${this._valueChanged}
-          ></ha-switch>
-        </ha-formfield>
-      </div>
-      <hui-entity-editor
-        .hass=${this.hass}
-        .entities=${this._configEntities}
-        @entities-changed=${this._valueChanged}
-      ></hui-entity-editor>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts

@@ -24,6 +24,7 @@ import { EntityId } from "../../common/structs/is-entity-id";
 import "../../components/hui-entity-editor";
 import { EntityConfig } from "../../entity-rows/types";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { processEditorEntities } from "../process-editor-entities";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
@@ -49,6 +50,8 @@ export class HuiHistoryGraphCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: HistoryGraphCardConfig;
 
   @internalProperty() private _configEntities?: EntityConfig[];
@@ -81,47 +84,48 @@ export class HuiHistoryGraphCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._title}"
-          .configValue="${"title"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <div class="side-by-side">
           <paper-input
-            type="number"
+            .label=${this.hass.localize(
-            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.title"
-              "ui.panel.lovelace.editor.card.generic.hours_to_show"
+            )}
-            )} (${this.hass.localize(
+            .value=${this._title}
-              "ui.panel.lovelace.editor.card.config.optional"
+            .configValue=${"title"}
-            )})"
+            @value-changed=${this._valueChanged}
-            .value="${this._hours_to_show}"
-            .configValue=${"hours_to_show"}
-            @value-changed="${this._valueChanged}"
           ></paper-input>
+          <div class="side-by-side">
+            <paper-input
+              type="number"
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.hours_to_show"
+              )}
+              .value=${this._hours_to_show}
+              .configValue=${"hours_to_show"}
+              @value-changed=${this._valueChanged}
+            ></paper-input>
+          </div>
+          <hui-entity-editor
+            .hass=${this.hass}
+            .entities=${this._configEntities}
+            @entities-changed=${this._valueChanged}
+          ></hui-entity-editor>
+        </div>
+        <div slot="advanced" class="card-config">
           <paper-input
             type="number"
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.refresh_interval"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
+            .value=${this._refresh_interval}
-            )})"
-            .value="${this._refresh_interval}"
             .configValue=${"refresh_interval"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></paper-input>
         </div>
-        <hui-entity-editor
+      </hui-config-element-template>
-          .hass=${this.hass}
-          .entities="${this._configEntities}"
-          @entities-changed="${this._valueChanged}"
-        ></hui-entity-editor>
-      </div>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts

@@ -15,6 +15,7 @@ import { HomeAssistant } from "../../../../types";
 import { HumidifierCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -32,6 +33,8 @@ export class HuiHumidifierCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: HumidifierCardConfig;
 
   public setConfig(config: HumidifierCardConfig): void {
@@ -57,37 +60,42 @@ export class HuiHumidifierCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            .label="${this.hass.localize(
-          .hass=${this.hass}
+              "ui.panel.lovelace.editor.card.generic.entity"
-          .value="${this._entity}"
+            )} (${this.hass.localize(
-          .configValue=${"entity"}
+              "ui.panel.lovelace.editor.card.config.required"
-          .includeDomains=${includeDomains}
+            )})"
-          @change="${this._valueChanged}"
+            .hass=${this.hass}
-          allow-custom-entity
+            .value=${this._entity}
-        ></ha-entity-picker>
+            .configValue=${"entity"}
-        <paper-input
+            .includeDomains=${includeDomains}
-          .label="${this.hass.localize(
+            @change=${this._valueChanged}
-            "ui.panel.lovelace.editor.card.generic.name"
+            allow-custom-entity
-          )} (${this.hass.localize(
+          ></ha-entity-picker>
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value="${this._name}"
+              "ui.panel.lovelace.editor.card.generic.name"
-          .configValue="${"name"}"
+            )}
-          @value-changed="${this._valueChanged}"
+            .value=${this._name}
-        ></paper-input>
+            .configValue=${"name"}
-        <hui-theme-select-editor
+            @value-changed=${this._valueChanged}
-          .hass=${this.hass}
+          ></paper-input>
-          .value="${this._theme}"
+        </div>
-          .configValue="${"theme"}"
+        <div slot="advanced" class="card-config">
-          @value-changed="${this._valueChanged}"
+          <hui-theme-select-editor
-        ></hui-theme-select-editor>
+            .hass=${this.hass}
-      </div>
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts

@@ -13,6 +13,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { IframeCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -28,6 +29,8 @@ export class HuiIframeCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: IframeCardConfig;
 
   public setConfig(config: IframeCardConfig): void {
@@ -53,40 +56,41 @@ export class HuiIframeCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.url"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
-          )})"
-          .value="${this._url}"
-          .configValue="${"url"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <div class="side-by-side">
           <paper-input
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.title"
+              "ui.panel.lovelace.editor.card.generic.url"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
+              "ui.panel.lovelace.editor.card.config.required"
             )})"
-            .value="${this._title}"
+            .value=${this._url}
-            .configValue="${"title"}"
+            .configValue=${"url"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></paper-input>
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+              "ui.panel.lovelace.editor.card.generic.title"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
+            .value=${this._title}
-            )})"
+            .configValue=${"title"}
-            .value="${this._aspect_ratio}"
+            @value-changed=${this._valueChanged}
-            .configValue="${"aspect_ratio"}"
-            @value-changed="${this._valueChanged}"
           ></paper-input>
         </div>
-      </div>
+        <div slot="advanced" class="card-config">
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+            )}
+            .value=${this._aspect_ratio}
+            .configValue=${"aspect_ratio"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts

@@ -19,6 +19,7 @@ import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { actionConfigStruct, EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -39,6 +40,8 @@ export class HuiLightCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: LightCardConfig;
 
   public setConfig(config: LightCardConfig): void {
@@ -85,78 +88,73 @@ export class HuiLightCardEditor extends LitElement
     ];
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
-          .hass=${this.hass}
-          .value=${this._entity}
-          .configValue=${"entity"}
-          .includeDomains=${includeDomains}
-          @value-changed=${this._valueChanged}
-          allow-custom-entity
-        ></ha-entity-picker>
-        <div class="side-by-side">
-          <paper-input
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.name"
+              "ui.panel.lovelace.editor.card.generic.entity"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
+              "ui.panel.lovelace.editor.card.config.required"
             )})"
+            .hass=${this.hass}
+            .value=${this._entity}
+            .configValue=${"entity"}
+            .includeDomains=${includeDomains}
+            @value-changed=${this._valueChanged}
+            allow-custom-entity
+          ></ha-entity-picker>
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.name"
+            )}
             .value=${this._name}
             .configValue=${"name"}
             @value-changed=${this._valueChanged}
           ></paper-input>
+        </div>
+        <div slot="advanced" class="card-config">
           <ha-icon-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.icon"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .value=${this._icon}
             .placeholder=${this._icon ||
             stateIcon(this.hass.states[this._entity])}
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
           ></ha-icon-input>
+          <hui-action-editor
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.hold_action"
+            )}
+            .hass=${this.hass}
+            .config=${this._hold_action}
+            .actions=${actions}
+            .configValue=${"hold_action"}
+            @value-changed=${this._valueChanged}
+          ></hui-action-editor>
+
+          <hui-action-editor
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.double_tap_action"
+            )}
+            .hass=${this.hass}
+            .config=${this._double_tap_action}
+            .actions=${actions}
+            .configValue=${"double_tap_action"}
+            @value-changed=${this._valueChanged}
+          ></hui-action-editor>
+          <hui-theme-select-editor
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
         </div>
-
+      </hui-config-element-template>
-        <hui-theme-select-editor
-          .hass=${this.hass}
-          .value=${this._theme}
-          .configValue=${"theme"}
-          @value-changed=${this._valueChanged}
-        ></hui-theme-select-editor>
-
-        <hui-action-editor
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.hold_action"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .config=${this._hold_action}
-          .actions=${actions}
-          .configValue=${"hold_action"}
-          @value-changed=${this._valueChanged}
-        ></hui-action-editor>
-
-        <hui-action-editor
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.double_tap_action"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .config=${this._double_tap_action}
-          .actions=${actions}
-          .configValue=${"double_tap_action"}
-          @value-changed=${this._valueChanged}
-        ></hui-action-editor>
-      </div>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-logbook-card-editor.ts

@@ -17,6 +17,7 @@ import { LogbookCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -33,6 +34,8 @@ export class HuiLogbookCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: LogbookCardConfig;
 
   @internalProperty() private _configEntities?: string[];
@@ -65,50 +68,51 @@ export class HuiLogbookCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value=${this._title}
+              "ui.panel.lovelace.editor.card.generic.title"
-          .configValue=${"title"}
+            )}
-          @value-changed=${this._valueChanged}
+            .value=${this._title}
-        ></paper-input>
+            .configValue=${"title"}
-        <div class="side-by-side">
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <paper-input
+            type="number"
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.hours_to_show"
+            )}
+            .value=${this._hours_to_show}
+            .configValue=${"hours_to_show"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <h3>
+            ${`${this.hass!.localize(
+              "ui.panel.lovelace.editor.card.generic.entities"
+            )} (${this.hass!.localize(
+              "ui.panel.lovelace.editor.card.config.required"
+            )})`}
+          </h3>
+          <ha-entities-picker
+            .hass=${this.hass}
+            .value=${this._configEntities}
+            @value-changed=${this._valueChanged}
+          >
+          </ha-entities-picker>
+        </div>
+        <div slot="advanced" class="card-config">
           <hui-theme-select-editor
             .hass=${this.hass}
             .value=${this._theme}
             .configValue=${"theme"}
             @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
-          <paper-input
-            type="number"
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.hours_to_show"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._hours_to_show}
-            .configValue=${"hours_to_show"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
         </div>
-        <h3>
+      </hui-config-element-template>
-          ${`${this.hass!.localize(
-            "ui.panel.lovelace.editor.card.generic.entities"
-          )} (${this.hass!.localize(
-            "ui.panel.lovelace.editor.card.config.required"
-          )})`}
-        </h3>
-        <ha-entities-picker
-          .hass=${this.hass}
-          .value=${this._configEntities}
-          @value-changed=${this._valueChanged}
-        >
-        </ha-entities-picker>
-      </div>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts

@@ -19,8 +19,8 @@ import {
   string,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import { PolymerChangedEvent } from "../../../../polymer-types";
 import { HomeAssistant } from "../../../../types";
@@ -29,6 +29,7 @@ import "../../components/hui-entity-editor";
 import "../../components/hui-input-list-editor";
 import { EntityConfig } from "../../entity-rows/types";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { processEditorEntities } from "../process-editor-entities";
 import {
   EditorTarget,
@@ -52,6 +53,8 @@ const cardConfigStruct = object({
 export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: MapCardConfig;
 
   @internalProperty() private _configEntities?: EntityConfig[];
@@ -94,87 +97,84 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._title}"
-          .configValue="${"title"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <div class="side-by-side">
           <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value="${this._aspect_ratio}"
-            .configValue="${"aspect_ratio"}"
-            @value-changed="${this._valueChanged}"
-          ></paper-input>
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.map.default_zoom"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            type="number"
-            .value="${this._default_zoom}"
-            .configValue="${"default_zoom"}"
-            @value-changed="${this._valueChanged}"
-          ></paper-input>
-        </div>
-        <div class="side-by-side">
-          <ha-formfield
             .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.map.dark_mode"
+              "ui.panel.lovelace.editor.card.generic.title"
             )}
-            .dir=${computeRTLDirection(this.hass)}
+            .value=${this._title}
-          >
+            .configValue=${"title"}
-            <ha-switch
+            @value-changed=${this._valueChanged}
-              .checked="${this._dark_mode}"
-              .configValue="${"dark_mode"}"
-              @change="${this._valueChanged}"
-            ></ha-switch
-          ></ha-formfield>
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.map.hours_to_show"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            type="number"
-            .value="${this._hours_to_show}"
-            .configValue="${"hours_to_show"}"
-            @value-changed="${this._valueChanged}"
           ></paper-input>
-        </div>
+          <div class="side-by-side">
-        <hui-entity-editor
+            <paper-input
-          .hass=${this.hass}
+              .label=${this.hass.localize(
-          .entities="${this._configEntities}"
+                "ui.panel.lovelace.editor.card.map.default_zoom"
-          @entities-changed="${this._entitiesValueChanged}"
+              )}
-        ></hui-entity-editor>
+              type="number"
-        <h3>
+              .value=${this._default_zoom}
-          ${this.hass.localize(
+              .configValue=${"default_zoom"}
-            "ui.panel.lovelace.editor.card.map.geo_location_sources"
+              @value-changed=${this._valueChanged}
-          )}
+            ></paper-input>
-        </h3>
+          </div>
-        <div class="geo_location_sources">
+          <paper-input
-          <hui-input-list-editor
+            .label=${this.hass.localize(
-            inputLabel=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.map.hours_to_show"
-              "ui.panel.lovelace.editor.card.map.source"
             )}
+            type="number"
+            .value=${this._hours_to_show}
+            .configValue=${"hours_to_show"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.map.dark_mode"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._dark_mode}
+              .configValue=${"dark_mode"}
+              @change=${this._valueChanged}
+            ></ha-switch>
+          </ha-settings-row>
+          <hui-entity-editor
             .hass=${this.hass}
-            .value="${this._geo_location_sources}"
+            .entities=${this._configEntities}
-            .configValue="${"geo_location_sources"}"
+            @entities-changed=${this._entitiesValueChanged}
-            @value-changed="${this._valueChanged}"
+          ></hui-entity-editor>
-          ></hui-input-list-editor>
         </div>
-      </div>
+        <div slot="advanced" class="card-config">
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+            )}
+            .value=${this._aspect_ratio}
+            .configValue=${"aspect_ratio"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <h3>
+            ${this.hass.localize(
+              "ui.panel.lovelace.editor.card.map.geo_location_sources"
+            )}
+          </h3>
+          <div class="geo_location_sources">
+            <hui-input-list-editor
+              inputLabel=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.map.source"
+              )}
+              .hass=${this.hass}
+              .value=${this._geo_location_sources}
+              .configValue=${"geo_location_sources"}
+              @value-changed=${this._valueChanged}
+            ></hui-input-list-editor>
+          </div>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts

@@ -15,6 +15,7 @@ import { HomeAssistant } from "../../../../types";
 import { MarkdownCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -30,6 +31,8 @@ export class HuiMarkdownCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: MarkdownCardConfig;
 
   public setConfig(config: MarkdownCardConfig): void {
@@ -55,38 +58,43 @@ export class HuiMarkdownCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value="${this._title}"
+              "ui.panel.lovelace.editor.card.generic.title"
-          .configValue="${"title"}"
+            )}
-          @value-changed="${this._valueChanged}"
+            .value=${this._title}
-        ></paper-input>
+            .configValue=${"title"}
-        <paper-textarea
+            @value-changed=${this._valueChanged}
-          .label="${this.hass.localize(
+          ></paper-input>
-            "ui.panel.lovelace.editor.card.markdown.content"
+          <paper-textarea
-          )} (${this.hass.localize(
+            .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.required"
+              "ui.panel.lovelace.editor.card.markdown.content"
-          )})"
+            )} (${this.hass.localize(
-          .value="${this._content}"
+              "ui.panel.lovelace.editor.card.config.required"
-          .configValue="${"content"}"
+            )})"
-          @keydown=${this._ignoreKeydown}
+            .value=${this._content}
-          @value-changed="${this._valueChanged}"
+            .configValue=${"content"}
-          autocapitalize="none"
+            @keydown=${this._ignoreKeydown}
-          autocomplete="off"
+            @value-changed=${this._valueChanged}
-          spellcheck="false"
+            autocapitalize="none"
-        ></paper-textarea>
+            autocomplete="off"
-        <hui-theme-select-editor
+            spellcheck="false"
-          .hass=${this.hass}
+          ></paper-textarea>
-          .value="${this._theme}"
+        </div>
-          .configValue="${"theme"}"
+        <div slot="advanced" class="card-config">
-          @value-changed="${this._valueChanged}"
+          <hui-theme-select-editor
-        ></hui-theme-select-editor>
+            .hass=${this.hass}
-      </div>
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts

@@ -1,18 +1,18 @@
 import {
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
+import { assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { MediaControlCardConfig } from "../../cards/types";
 import { LovelaceCardEditor } from "../../types";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
-import { assert, object, string, optional } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -45,17 +45,17 @@ export class HuiMediaControlCardEditor extends LitElement
     return html`
       <div class="card-config">
         <ha-entity-picker
+          allow-custom-entity
           .label="${this.hass.localize(
             "ui.panel.lovelace.editor.card.generic.entity"
           )} (${this.hass.localize(
             "ui.panel.lovelace.editor.card.config.required"
           )})"
           .hass=${this.hass}
-          .value="${this._entity}"
+          .value=${this._entity}
           .configValue=${"entity"}
           .includeDomains=${includeDomains}
-          @change="${this._valueChanged}"
+          @change=${this._valueChanged}
-          allow-custom-entity
         ></ha-entity-picker>
       </div>
     `;

src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts

@@ -16,6 +16,7 @@ import { PictureCardConfig } from "../../cards/types";
 import "../../components/hui-action-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { actionConfigStruct, EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -32,6 +33,8 @@ export class HuiPictureCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: PictureCardConfig;
 
   public setConfig(config: PictureCardConfig): void {
@@ -63,50 +66,51 @@ export class HuiPictureCardEditor extends LitElement
     const actions = ["navigate", "url", "call-service", "none"];
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.image"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <paper-input
-          )})"
-          .value="${this._image}"
-          .configValue="${"image"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <div class="side-by-side">
-          <hui-action-editor
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.tap_action"
+              "ui.panel.lovelace.editor.card.generic.image"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
+              "ui.panel.lovelace.editor.card.config.required"
             )})"
+            .value=${this._image}
+            .configValue=${"image"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+        </div>
+        <div slot="advanced" class="card-config">
+          <hui-action-editor
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.tap_action"
+            )}
             .hass=${this.hass}
-            .config="${this._tap_action}"
+            .config=${this._tap_action}
-            .actions="${actions}"
+            .actions=${actions}
-            .configValue="${"tap_action"}"
+            .configValue=${"tap_action"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-action-editor>
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.hold_action"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .hass=${this.hass}
-            .config="${this._hold_action}"
+            .config=${this._hold_action}
-            .actions="${actions}"
+            .actions=${actions}
-            .configValue="${"hold_action"}"
+            .configValue=${"hold_action"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-action-editor>
           <hui-theme-select-editor
             .hass=${this.hass}
-            .value="${this._theme}"
+            .value=${this._theme}
-            .configValue="${"theme"}"
+            .configValue=${"theme"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
         </div>
-      </div>
+      </hui-config-element-template>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts

@@ -3,7 +3,8 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
-  CSSResult,
+  css,
+  CSSResultArray,
   customElement,
   html,
   internalProperty,
@@ -13,8 +14,8 @@ import {
 } from "lit-element";
 import { assert, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -23,6 +24,7 @@ import "../../components/hui-action-editor";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { actionConfigStruct, EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -48,6 +50,8 @@ export class HuiPictureEntityCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: PictureEntityCardConfig;
 
   public setConfig(config: PictureEntityCardConfig): void {
@@ -106,148 +110,137 @@ export class HuiPictureEntityCardEditor extends LitElement
 
     const actions = ["more-info", "toggle", "navigate", "call-service", "none"];
     const views = ["auto", "live"];
-    const dir = computeRTLDirection(this.hass!);
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            allow-custom-entity
-          .hass=${this.hass}
-          .value="${this._entity}"
-          .configValue=${"entity"}
-          @value-changed="${this._valueChanged}"
-          allow-custom-entity
-        ></ha-entity-picker>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.name"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._name}"
-          .configValue="${"name"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.image"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._image}"
-          .configValue="${"image"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <ha-entity-picker
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.camera_image"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .value="${this._camera_image}"
-          .configValue=${"camera_image"}
-          @value-changed="${this._valueChanged}"
-          .includeDomains=${includeDomains}
-          allow-custom-entity
-        ></ha-entity-picker>
-        <div class="side-by-side">
-          <paper-dropdown-menu
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.camera_view"
+              "ui.panel.lovelace.editor.card.generic.entity"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
+              "ui.panel.lovelace.editor.card.config.required"
             )})"
-            .configValue="${"camera_view"}"
+            .hass=${this.hass}
-            @value-changed="${this._valueChanged}"
+            .value=${this._entity}
-          >
+            .configValue=${"entity"}
-            <paper-listbox
+            @value-changed=${this._valueChanged}
-              slot="dropdown-content"
+          ></ha-entity-picker>
-              .selected="${views.indexOf(this._camera_view)}"
-            >
-              ${views.map((view) => {
-                return html` <paper-item>${view}</paper-item> `;
-              })}
-            </paper-listbox>
-          </paper-dropdown-menu>
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+              "ui.panel.lovelace.editor.card.generic.name"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
+            .value=${this._name}
-            )})"
+            .configValue=${"name"}
-            .value="${this._aspect_ratio}"
+            @value-changed=${this._valueChanged}
-            .configValue="${"aspect_ratio"}"
-            @value-changed="${this._valueChanged}"
           ></paper-input>
-        </div>
+          <paper-input
-        <div class="side-by-side">
+            .label=${this.hass.localize(
-          <div>
+              "ui.panel.lovelace.editor.card.generic.image"
-            <ha-formfield
+            )}
-              .label=${this.hass.localize(
+            .value=${this._image}
+            .configValue=${"image"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
                 "ui.panel.lovelace.editor.card.generic.show_name"
               )}
-              .dir=${dir}
+            </span>
-            >
+            <ha-switch
-              <ha-switch
+              .checked=${this._config!.show_name !== false}
-                .checked="${this._config!.show_name !== false}"
+              .configValue=${"show_name"}
-                .configValue="${"show_name"}"
+              @change=${this._change}
-                @change="${this._change}"
+            ></ha-switch>
-              ></ha-switch
+          </ha-settings-row>
-            ></ha-formfield>
+          <ha-settings-row three-line>
-          </div>
+            <span slot="heading">
-          <div>
+              ${this.hass.localize(
-            <ha-formfield
-              .label=${this.hass.localize(
                 "ui.panel.lovelace.editor.card.generic.show_state"
               )}
-              .dir=${dir}
+            </span>
-            >
+            <ha-switch
-              <ha-switch
+              .checked=${this._config!.show_state !== false}
-                .checked="${this._config!.show_state !== false}"
+              .configValue=${"show_state"}
-                .configValue="${"show_state"}"
+              @change=${this._change}
-                @change="${this._change}"
+            ></ha-switch>
-              ></ha-switch
+          </ha-settings-row>
-            ></ha-formfield>
-          </div>
-        </div>
-        <div class="side-by-side">
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.tap_action"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .hass=${this.hass}
-            .config="${this._tap_action}"
+            .config=${this._tap_action}
-            .actions="${actions}"
+            .actions=${actions}
-            .configValue="${"tap_action"}"
+            .configValue=${"tap_action"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-action-editor>
+          <ha-expansion-panel>
+            <span class="title" slot="title">
+              ${this.hass.localize(
+                `ui.panel.lovelace.editor.card.picture-entity.camera_options`
+              )}
+            </span>
+            <ha-entity-picker
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.camera_image"
+              )}
+              .hass=${this.hass}
+              .value=${this._camera_image}
+              .configValue=${"camera_image"}
+              @value-changed=${this._valueChanged}
+              .includeDomains=${includeDomains}
+              allow-custom-entity
+            ></ha-entity-picker>
+            <paper-dropdown-menu
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.camera_view"
+              )}
+              .configValue=${"camera_view"}
+              @value-changed=${this._valueChanged}
+            >
+              <paper-listbox
+                slot="dropdown-content"
+                .selected=${views.indexOf(this._camera_view)}
+              >
+                ${views.map((view) => {
+                  return html`<paper-item>${view}</paper-item>`;
+                })}
+              </paper-listbox>
+            </paper-dropdown-menu>
+          </ha-expansion-panel>
+        </div>
+        <div slot="advanced" class="card-config">
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+            )}
+            .value=${this._aspect_ratio}
+            .configValue=${"aspect_ratio"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.hold_action"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .hass=${this.hass}
-            .config="${this._hold_action}"
+            .config=${this._hold_action}
-            .actions="${actions}"
+            .actions=${actions}
-            .configValue="${"hold_action"}"
+            .configValue=${"hold_action"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-action-editor>
           <hui-theme-select-editor
             .hass=${this.hass}
-            .value="${this._theme}"
+            .value=${this._theme}
-            .configValue="${"theme"}"
+            .configValue=${"theme"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
         </div>
-      </div>
+      </hui-config-element-template>
     `;
   }
 
@@ -294,8 +287,15 @@ export class HuiPictureEntityCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultArray {
-    return configElementStyle;
+    return [
+      configElementStyle,
+      css`
+        paper-dropdown-menu {
+          width: 100%;
+        }
+      `,
+    ];
   }
 }
 

src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts

@@ -3,7 +3,8 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
-  CSSResult,
+  css,
+  CSSResultArray,
   customElement,
   html,
   internalProperty,
@@ -22,6 +23,7 @@ import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { EntityConfig } from "../../entity-rows/types";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { processEditorEntities } from "../process-editor-entities";
 import {
   actionConfigStruct,
@@ -51,6 +53,8 @@ export class HuiPictureGlanceCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: PictureGlanceCardConfig;
 
   @internalProperty() private _configEntities?: EntityConfig[];
@@ -112,120 +116,114 @@ export class HuiPictureGlanceCardEditor extends LitElement
     const views = ["auto", "live"];
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <paper-input
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.title"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._title}"
-          .configValue="${"title"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.image"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value="${this._image}"
-          .configValue="${"image"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <ha-entity-picker
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.camera_image"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .value="${this._camera_image}"
-          .configValue=${"camera_image"}
-          @value-changed="${this._valueChanged}"
-          allow-custom-entity
-          .includeDomains=${includeDomains}
-        ></ha-entity-picker>
-        <div class="side-by-side">
-          <paper-dropdown-menu
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.camera_view"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .configValue="${"camera_view"}"
-            @value-changed="${this._valueChanged}"
-          >
-            <paper-listbox
-              slot="dropdown-content"
-              .selected="${views.indexOf(this._camera_view)}"
-            >
-              ${views.map((view) => {
-                return html` <paper-item>${view}</paper-item> `;
-              })}
-            </paper-listbox>
-          </paper-dropdown-menu>
           <paper-input
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+              "ui.panel.lovelace.editor.card.generic.title"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
+            .value=${this._title}
-            )})"
+            .configValue=${"title"}
-            .value="${this._aspect_ratio}"
+            @value-changed=${this._valueChanged}
-            .configValue="${"aspect_ratio"}"
+          ></paper-input>
-            @value-changed="${this._valueChanged}"
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.image"
+            )}
+            .value=${this._image}
+            .configValue=${"image"}
+            @value-changed=${this._valueChanged}
           ></paper-input>
-        </div>
-        <ha-entity-picker
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.picture-glance.state_entity"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .hass=${this.hass}
-          .value="${this._entity}"
-          .configValue=${"entity"}
-          @value-changed="${this._valueChanged}"
-          allow-custom-entity
-        ></ha-entity-picker>
-        <div class="side-by-side">
           <hui-action-editor
-            .label="${this.hass.localize(
+            .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.tap_action"
-            )} (${this.hass.localize(
+            )}
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
             .hass=${this.hass}
-            .config="${this._tap_action}"
+            .config=${this._tap_action}
-            .actions="${actions}"
+            .actions=${actions}
-            .configValue="${"tap_action"}"
+            .configValue=${"tap_action"}
-            @value-changed="${this._valueChanged}"
+            @value-changed=${this._valueChanged}
-          ></hui-action-editor>
-          <hui-action-editor
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.hold_action"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .hass=${this.hass}
-            .config="${this._hold_action}"
-            .actions="${actions}"
-            .configValue="${"hold_action"}"
-            @value-changed="${this._valueChanged}"
           ></hui-action-editor>
         </div>
         <hui-entity-editor
           .hass=${this.hass}
-          .entities="${this._configEntities}"
+          .entities=${this._configEntities}
-          @entities-changed="${this._valueChanged}"
+          @entities-changed=${this._valueChanged}
         ></hui-entity-editor>
-        <hui-theme-select-editor
+        <ha-expansion-panel>
-          .hass=${this.hass}
+          <span class="title" slot="title">
-          .value="${this._theme}"
+            ${this.hass.localize(
-          .configValue="${"theme"}"
+              `ui.panel.lovelace.editor.card.picture-entity.camera_options`
-          @value-changed="${this._valueChanged}"
+            )}
-        ></hui-theme-select-editor>
+          </span>
-      </div>
+          <ha-entity-picker
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.camera_image"
+            )}
+            .hass=${this.hass}
+            .value=${this._camera_image}
+            .configValue=${"camera_image"}
+            @value-changed=${this._valueChanged}
+            .includeDomains=${includeDomains}
+            allow-custom-entity
+          ></ha-entity-picker>
+          <paper-dropdown-menu
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.camera_view"
+            )}
+            .configValue=${"camera_view"}
+            @value-changed=${this._valueChanged}
+          >
+            <paper-listbox
+              slot="dropdown-content"
+              .selected=${views.indexOf(this._camera_view)}
+            >
+              ${views.map((view) => {
+                return html`<paper-item>${view}</paper-item>`;
+              })}
+            </paper-listbox>
+          </paper-dropdown-menu>
+        </ha-expansion-panel>
+        <div slot="advanced" class="card-config">
+          <ha-entity-picker
+            allow-custom-entity
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.entity"
+            )}
+            .hass=${this.hass}
+            .value=${this._entity}
+            .configValue=${"entity"}
+            @value-changed=${this._valueChanged}
+          ></ha-entity-picker>
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+            )}
+            .value=${this._aspect_ratio}
+            .configValue=${"aspect_ratio"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <hui-action-editor
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.hold_action"
+            )}
+            .hass=${this.hass}
+            .config=${this._hold_action}
+            .actions=${actions}
+            .configValue=${"hold_action"}
+            @value-changed=${this._valueChanged}
+          ></hui-action-editor>
+          <hui-theme-select-editor
+            .hass=${this.hass}
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 
@@ -258,8 +256,15 @@ export class HuiPictureGlanceCardEditor extends LitElement
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultArray {
-    return configElementStyle;
+    return [
+      configElementStyle,
+      css`
+        paper-dropdown-menu {
+          width: 100%;
+        }
+      `,
+    ];
   }
 }
 

src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts

@@ -16,6 +16,7 @@ import { HomeAssistant } from "../../../../types";
 import { PlantStatusCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -33,6 +34,8 @@ export class HuiPlantStatusCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: PlantStatusCardConfig;
 
   public setConfig(config: PlantStatusCardConfig): void {
@@ -58,37 +61,42 @@ export class HuiPlantStatusCardEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
+            allow-custom-entity
-          .hass=${this.hass}
+            .label="${this.hass.localize(
-          .value="${this._entity}"
+              "ui.panel.lovelace.editor.card.generic.entity"
-          .configValue=${"entity"}
+            )} (${this.hass.localize(
-          .includeDomains=${includeDomains}
+              "ui.panel.lovelace.editor.card.config.required"
-          @change="${this._valueChanged}"
+            )})"
-          allow-custom-entity
+            .hass=${this.hass}
-        ></ha-entity-picker>
+            .value=${this._entity}
-        <paper-input
+            .configValue=${"entity"}
-          .label="${this.hass.localize(
+            .includeDomains=${includeDomains}
-            "ui.panel.lovelace.editor.card.generic.name"
+            @change=${this._valueChanged}
-          )} (${this.hass.localize(
+          ></ha-entity-picker>
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value="${this._name}"
+              "ui.panel.lovelace.editor.card.generic.name"
-          .configValue="${"name"}"
+            )}
-          @value-changed="${this._valueChanged}"
+            .value=${this._name}
-        ></paper-input>
+            .configValue=${"name"}
-        <hui-theme-select-editor
+            @value-changed=${this._valueChanged}
-          .hass=${this.hass}
+          ></paper-input>
-          .value="${this._theme}"
+        </div>
-          .configValue="${"theme"}"
+        <div slot="advanced" class="card-config">
-          @value-changed="${this._valueChanged}"
+          <hui-theme-select-editor
-        ></hui-theme-select-editor>
+            .hass=${this.hass}
-      </div>
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts

@@ -17,11 +17,13 @@ import { stateIcon } from "../../../../common/entity/state_icon";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-input";
+import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
 import { HomeAssistant } from "../../../../types";
 import { SensorCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 
@@ -44,6 +46,8 @@ export class HuiSensorCardEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: SensorCardConfig;
 
   public setConfig(config: SensorCardConfig): void {
@@ -91,105 +95,99 @@ export class HuiSensorCardEditor extends LitElement
     const graphs = ["line", "none"];
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        <ha-entity-picker
+        .hass=${this.hass}
-          .label="${this.hass.localize(
+        .isAdvanced=${this.isAdvanced}
-            "ui.panel.lovelace.editor.card.generic.entity"
+      >
-          )} (${this.hass.localize(
+        <div class="card-config">
-            "ui.panel.lovelace.editor.card.config.required"
+          <ha-entity-picker
-          )})"
-          .hass=${this.hass}
-          .value=${this._entity}
-          .configValue=${"entity"}
-          .includeDomains=${includeDomains}
-          @change=${this._valueChanged}
-          allow-custom-entity
-        ></ha-entity-picker>
-        <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.name"
-          )} (${this.hass.localize(
-            "ui.panel.lovelace.editor.card.config.optional"
-          )})"
-          .value=${this._name}
-          .configValue=${"name"}
-          @value-changed=${this._valueChanged}
-        ></paper-input>
-        <div class="side-by-side">
-          <ha-icon-input
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.icon"
+              "ui.panel.lovelace.editor.card.generic.entity"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
+              "ui.panel.lovelace.editor.card.config.required"
             )})"
+            .hass=${this.hass}
+            .value=${this._entity}
+            .configValue=${"entity"}
+            .includeDomains=${includeDomains}
+            @change=${this._valueChanged}
+            allow-custom-entity
+          ></ha-entity-picker>
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.name"
+            )}
+            .value=${this._name}
+            .configValue=${"name"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <div class="side-by-side">
+            <paper-dropdown-menu
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.sensor.graph_type"
+              )}
+              .configValue=${"graph"}
+              @value-changed=${this._valueChanged}
+            >
+              <paper-listbox
+                slot="dropdown-content"
+                .selected=${graphs.indexOf(this._graph)}
+              >
+                ${graphs.map((graph) => {
+                  return html`<paper-item>${graph}</paper-item>`;
+                })}
+              </paper-listbox>
+            </paper-dropdown-menu>
+            <paper-input
+              .label=${this.hass.localize(
+                "ui.panel.lovelace.editor.card.generic.hours_to_show"
+              )}
+              type="number"
+              .value=${this._hours_to_show}
+              .configValue=${"hours_to_show"}
+              @value-changed=${this._valueChanged}
+            ></paper-input>
+          </div>
+        </div>
+        <div slot="advanced" class="card-config">
+          <ha-settings-row three-line>
+            <span slot="heading">
+              ${this.hass.localize(
+                "ui.panel.lovelace.editor.card.sensor.show_more_detail"
+              )}
+            </span>
+            <ha-switch
+              .checked=${this._detail === 2}
+              .configValue=${"detail"}
+              @change=${this._change}
+            ></ha-switch>
+          </ha-settings-row>
+          <paper-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.unit"
+            )}
+            .value=${this._unit}
+            .configValue=${"unit"}
+            @value-changed=${this._valueChanged}
+          ></paper-input>
+          <ha-icon-input
+            .label=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.icon"
+            )}
             .value=${this._icon}
             .placeholder=${this._icon ||
             stateIcon(this.hass.states[this._entity])}
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
           ></ha-icon-input>
-          <paper-dropdown-menu
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.sensor.graph_type"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .configValue=${"graph"}
-            @value-changed=${this._valueChanged}
-          >
-            <paper-listbox
-              slot="dropdown-content"
-              .selected=${graphs.indexOf(this._graph)}
-            >
-              ${graphs.map((graph) => {
-                return html`<paper-item>${graph}</paper-item>`;
-              })}
-            </paper-listbox>
-          </paper-dropdown-menu>
-        </div>
-        <div class="side-by-side">
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.unit"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            .value=${this._unit}
-            .configValue=${"unit"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
-          <ha-formfield
-            label=${this.hass.localize(
-              "ui.panel.lovelace.editor.card.sensor.show_more_detail"
-            )}
-          >
-            <ha-switch
-              .checked=${this._detail === 2}
-              .configValue=${"detail"}
-              @change=${this._change}
-            ></ha-switch>
-          </ha-formfield>
-        </div>
-        <div class="side-by-side">
           <hui-theme-select-editor
             .hass=${this.hass}
             .value=${this._theme}
             .configValue=${"theme"}
             @value-changed=${this._valueChanged}
           ></hui-theme-select-editor>
-          <paper-input
-            .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.generic.hours_to_show"
-            )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.config.optional"
-            )})"
-            type="number"
-            .value=${this._hours_to_show}
-            .configValue=${"hours_to_show"}
-            @value-changed=${this._valueChanged}
-          ></paper-input>
         </div>
-      </div>
+      </hui-config-element-template>
     `;
   }
 

src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts

@@ -4,19 +4,20 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
+import { assert, object, optional, string } from "superstruct";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { ShoppingListCardConfig } from "../../cards/types";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
+import "../hui-config-element-template";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
-import { string, assert, object, optional } from "superstruct";
 
 const cardConfigStruct = object({
   type: string(),
@@ -29,6 +30,8 @@ export class HuiShoppingListEditor extends LitElement
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
+  @property({ type: Boolean }) public isAdvanced?: boolean;
+
   @internalProperty() private _config?: ShoppingListCardConfig;
 
   public setConfig(config: ShoppingListCardConfig): void {
@@ -50,33 +53,38 @@ export class HuiShoppingListEditor extends LitElement
     }
 
     return html`
-      <div class="card-config">
+      <hui-config-element-template
-        ${!isComponentLoaded(this.hass, "shopping_list")
+        .hass=${this.hass}
-          ? html`
+        .isAdvanced=${this.isAdvanced}
-              <div class="error">
+      >
-                ${this.hass.localize(
+        <div class="card-config">
-                  "ui.panel.lovelace.editor.card.shopping-list.integration_not_loaded"
+          ${!isComponentLoaded(this.hass, "shopping_list")
-                )}
+            ? html`
-              </div>
+                <div class="error">
-            `
+                  ${this.hass.localize(
-          : ""}
+                    "ui.panel.lovelace.editor.card.shopping-list.integration_not_loaded"
-        <paper-input
+                  )}
-          .label="${this.hass.localize(
+                </div>
-            "ui.panel.lovelace.editor.card.generic.title"
+              `
-          )} (${this.hass.localize(
+            : ""}
-            "ui.panel.lovelace.editor.card.config.optional"
+          <paper-input
-          )})"
+            .label=${this.hass.localize(
-          .value="${this._title}"
+              "ui.panel.lovelace.editor.card.generic.title"
-          .configValue="${"title"}"
+            )}
-          @value-changed="${this._valueChanged}"
+            .value=${this._title}
-        ></paper-input>
+            .configValue=${"title"}
-        <hui-theme-select-editor
+            @value-changed=${this._valueChanged}
-          .hass=${this.hass}
+          ></paper-input>
-          .value="${this._theme}"
+        </div>
-          .configValue="${"theme"}"
+        <div slot="advanced" class="card-config">
-          @value-changed="${this._valueChanged}"
+          <hui-theme-select-editor
-        ></hui-theme-select-editor>
+            .hass=${this.hass}
-      </div>
+            .value=${this._theme}
+            .configValue=${"theme"}
+            @value-changed=${this._valueChanged}
+          ></hui-theme-select-editor>
+        </div>
+      </hui-config-element-template>
     `;
   }