cleanup editors (#3786)

* cleanup editors

* address review comments

src/panels/lovelace/cards/hui-plant-status-card.ts

@@ -37,7 +37,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
   }
 
   public static getStubConfig(): object {
-    return {};
+    return { entity: "" };
   }
 
   @property() public hass?: HomeAssistant;

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

@@ -22,13 +22,25 @@ export class HuiEntityEditor extends LitElement {
 
   @property() protected entities?: EntityConfig[];
 
+  @property() protected label?: string;
+
   protected render(): TemplateResult | void {
     if (!this.entities) {
       return html``;
     }
 
     return html`
-      <h3>Entities</h3>
+      <h3>
+        ${this.label ||
+          this.hass!.localize(
+            "ui.panel.lovelace.editor.card.generic.entities"
+          ) +
+            " (" +
+            this.hass!.localize(
+              "ui.panel.lovelace.editor.card.config.required"
+            ) +
+            ")"}
+      </h3>
       <div class="entities">
         ${this.entities.map((entityConf, index) => {
           return html`

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

@@ -37,7 +37,12 @@ export class HuiThemeSelectEditor extends LitElement {
     return html`
       <paper-dropdown-menu
         .label=${this.label ||
-          this.hass!.localize("ui.panel.lovelace.editor.theme_select.theme")}
+          this.hass!.localize("ui.panel.lovelace.editor.card.generic.theme") +
+            " (" +
+            this.hass!.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            ) +
+            ")"}
         dynamic-align
         @value-changed="${this._changed}"
       >

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

@@ -63,14 +63,12 @@ export class HuiAlarmPanelCardEditor extends LitElement
     return html`
       ${configElementStyle}
       <div class="card-config">
-        <div class="side-by-side">
-          <paper-input
-            label="Name"
-            .value="${this._name}"
-            .configValue="${"name"}"
-            @value-changed="${this._valueChanged}"
-          ></paper-input>
         <ha-entity-picker
+          .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}"
           .configValue=${"entity"}
@@ -78,7 +76,16 @@ export class HuiAlarmPanelCardEditor extends LitElement
           @change="${this._valueChanged}"
           allow-custom-entity
         ></ha-entity-picker>
-        </div>
+        <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>
         <span>Used States</span> ${this._states.map((state, index) => {
           return html`
             <div class="states">
@@ -93,7 +100,9 @@ export class HuiAlarmPanelCardEditor extends LitElement
           `;
         })}
         <paper-dropdown-menu
-          label="Available States"
+          .label="${this.hass.localize(
+            "ui.panel.lovelace.editor.card.alarm_panel.available_states"
+          )}"
           @value-changed="${this._stateAdded}"
         >
           <paper-listbox slot="dropdown-content">

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

@@ -77,7 +77,11 @@ export class HuiEntitiesCardEditor extends LitElement
       ${configElementStyle}
       <div class="card-config">
         <paper-input
-          label="Title"
+          .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}"
@@ -92,7 +96,9 @@ export class HuiEntitiesCardEditor extends LitElement
           ?checked="${this._config!.show_header_toggle !== false}"
           .configValue="${"show_header_toggle"}"
           @change="${this._valueChanged}"
-          >Show Header Toggle?</ha-switch
+          >${this.hass.localize(
+            "ui.panel.lovelace.editor.card.entities.show_header_toggle"
+          )}</ha-switch
         >
       </div>
       <hui-entity-editor

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

@@ -105,6 +105,11 @@ export class HuiEntityButtonCardEditor extends LitElement
       ${configElementStyle}
       <div class="card-config">
         <ha-entity-picker
+        .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}"
           .configValue=${"entity"}
@@ -113,13 +118,21 @@ export class HuiEntityButtonCardEditor extends LitElement
         ></ha-entity-picker>
         <div class="side-by-side">
           <paper-input
-            label="Name (Optional)"
+          .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="Icon (Optional)"
+          .label="${this.hass.localize(
+            "ui.panel.lovelace.editor.card.generic.icon"
+          )} (${this.hass.localize(
+      "ui.panel.lovelace.editor.card.config.optional"
+    )})"
             .value="${this._icon}"
             .configValue="${"icon"}"
             @value-changed="${this._valueChanged}"
@@ -130,18 +143,26 @@ export class HuiEntityButtonCardEditor extends LitElement
             ?checked="${this._config!.show_name !== false}"
             .configValue="${"show_name"}"
             @change="${this._valueChanged}"
-            >Show Name?</ha-switch
+            >${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.show_name"
+            )}</ha-switch
           >
           <ha-switch
             ?checked="${this._config!.show_icon !== false}"
             .configValue="${"show_icon"}"
             @change="${this._valueChanged}"
-            >Show Icon?</ha-switch
+            >${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.show_icon"
+            )}</ha-switch
           >
         </div>
         <div class="side-by-side">
           <paper-input
-            label="Icon Height (Optional)"
+          .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}"
@@ -159,7 +180,11 @@ export class HuiEntityButtonCardEditor extends LitElement
         </div>
         <div class="side-by-side">
           <hui-action-editor
-            label="Tap Action"
+          .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}"
@@ -167,7 +192,11 @@ export class HuiEntityButtonCardEditor extends LitElement
             @action-changed="${this._valueChanged}"
           ></hui-action-editor>
           <hui-action-editor
-            label="Hold Action"
+          .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}"

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

@@ -83,14 +83,12 @@ export class HuiGaugeCardEditor extends LitElement
     return html`
       ${configElementStyle}
       <div class="card-config">
-        <div class="side-by-side">
-          <paper-input
-            label="Name"
-            .value="${this._name}"
-            .configValue=${"name"}
-            @value-changed="${this._valueChanged}"
-          ></paper-input>
         <ha-entity-picker
+          .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}"
           .configValue=${"entity"}
@@ -98,10 +96,23 @@ export class HuiGaugeCardEditor extends LitElement
           @change="${this._valueChanged}"
           allow-custom-entity
         ></ha-entity-picker>
-        </div>
+        <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">
           <paper-input
-            label="Unit"
+            .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}"
@@ -116,49 +127,74 @@ export class HuiGaugeCardEditor extends LitElement
         <div class="side-by-side">
           <paper-input
             type="number"
-            label="Minimum"
+            .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="Maximum"
+            .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 class="side-by-side">
         <ha-switch
           ?checked="${this._useSeverity !== false}"
           @change="${this._toggleSeverity}"
-            >Define Severity?</ha-switch
+          >${this.hass.localize(
+            "ui.panel.lovelace.editor.card.gauge.severity.define"
+          )}</ha-switch
         >
-          <div class="severity">
+        ${this._useSeverity
+          ? html`
+            <div class="severity side-by-side">
               <paper-input
                 type="number"
-              label="Green"
+                .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="Yellow"
+                .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="Red"
+                .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>
           </div>
+          `
+          : ""}
       </div>
     `;
   }

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

@@ -93,7 +93,11 @@ export class HuiGlanceCardEditor extends LitElement
       ${configElementStyle}
       <div class="card-config">
         <paper-input
-          label="Title"
+          .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}"
@@ -106,7 +110,11 @@ export class HuiGlanceCardEditor extends LitElement
             @theme-changed="${this._valueChanged}"
           ></hui-theme-select-editor>
           <paper-input
-            label="Columns"
+            .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"}"
@@ -118,19 +126,25 @@ export class HuiGlanceCardEditor extends LitElement
             ?checked="${this._show_name !== false}"
             .configValue="${"show_name"}"
             @change="${this._valueChanged}"
-            >Show Name?</ha-switch
+            >${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.show_name"
+            )}</ha-switch
           >
           <ha-switch
             ?checked="${this._show_icon !== false}"
             .configValue="${"show_icon"}"
             @change="${this._valueChanged}"
-            >Show Icon?</ha-switch
+            >${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.show_icon"
+            )}</ha-switch
           >
           <ha-switch
             ?checked="${this._show_state !== false}"
             .configValue="${"show_state"}"
             @change="${this._valueChanged}"
-            >Show State?</ha-switch
+            >${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.show_state"
+            )}</ha-switch
           >
         </div>
       </div>

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

@@ -54,27 +54,39 @@ export class HuiIframeCardEditor extends LitElement
     return html`
       ${configElementStyle}
       <div class="card-config">
+        <paper-input
+          .label="${this.hass.localize(
+            "ui.panel.lovelace.editor.card.generic.url"
+          )} (${this.hass.localize(
+            "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="Title"
+            .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}"
           ></paper-input>
           <paper-input
-            label="Aspect Ratio"
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
             type="number"
             .value="${Number(this._aspect_ratio.replace("%", ""))}"
             .configValue="${"aspect_ratio"}"
             @value-changed="${this._valueChanged}"
           ></paper-input>
         </div>
-        <paper-input
-          label="Url"
-          .value="${this._url}"
-          .configValue="${"url"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
       </div>
     `;
   }

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

@@ -63,7 +63,11 @@ export class HuiLightCardEditor extends LitElement
       ${configElementStyle}
       <div class="card-config">
         <ha-entity-picker
-          label="Light Entity (Required)"
+          .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}"
           .configValue=${"entity"}
@@ -73,13 +77,21 @@ export class HuiLightCardEditor extends LitElement
         ></ha-entity-picker>
         <div class="side-by-side">
           <paper-input
-            label="Name (Optional)"
+            .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="Icon (Optional)"
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.icon"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
             .value="${this._icon}"
             .configValue="${"icon"}"
             @value-changed="${this._valueChanged}"
@@ -87,7 +99,6 @@ export class HuiLightCardEditor extends LitElement
         </div>
 
         <hui-theme-select-editor
-          label="Theme (Optional)"
           .hass="${this.hass}"
           .value="${this._theme}"
           .configValue="${"theme"}"

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

@@ -85,20 +85,32 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
       ${configElementStyle}
       <div class="card-config">
         <paper-input
-          label="Title"
+          .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}"
         ></paper-input>
         <div class="side-by-side">
           <paper-input
-            label="Aspect Ratio"
+            .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="Default Zoom"
+            .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"}"
@@ -109,17 +121,25 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
           ?checked="${this._dark_mode !== false}"
           .configValue="${"dark_mode"}"
           @change="${this._valueChanged}"
-          >Dark Mode?</ha-switch
+          >${this.hass.localize(
+            "ui.panel.lovelace.editor.card.map.dark_mode"
+          )}</ha-switch
         >
         <hui-entity-editor
           .hass="${this.hass}"
           .entities="${this._configEntities}"
           @entities-changed="${this._entitiesValueChanged}"
         ></hui-entity-editor>
-        <h3>Geolocation Sources</h3>
+        <h3>
+          ${this.hass.localize(
+            "ui.panel.lovelace.editor.card.map.geo_location_sources"
+          )}
+        </h3>
         <div class="geo_location_sources">
           <hui-input-list-editor
-            inputLabel="Source"
+            inputLabel=${this.hass.localize(
+              "ui.panel.lovelace.editor.card.map.source"
+            )}
             .hass="${this.hass}"
             .value="${this._geo_location_sources}"
             .configValue="${"geo_location_sources"}"

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

@@ -51,13 +51,21 @@ export class HuiMarkdownCardEditor extends LitElement
       ${configElementStyle}
       <div class="card-config">
         <paper-input
-          label="Title"
+          .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}"
         ></paper-input>
         <paper-textarea
-          label="Content"
+          .label="${this.hass.localize(
+            "ui.panel.lovelace.editor.card.markdown.content"
+          )} (${this.hass.localize(
+            "ui.panel.lovelace.editor.card.config.required"
+          )})"
           .value="${this._content}"
           .configValue="${"content"}"
           @value-changed="${this._valueChanged}"

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

@@ -44,6 +44,11 @@ export class HuiMediaControlCardEditor extends LitElement
     return html`
       <div class="card-config">
         <ha-entity-picker
+          .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}"
           .configValue=${"entity"}

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

@@ -64,14 +64,22 @@ export class HuiPictureCardEditor extends LitElement
       ${configElementStyle}
       <div class="card-config">
         <paper-input
-          label="Image Url"
+          .label="${this.hass.localize(
+            "ui.panel.lovelace.editor.card.generic.image"
+          )} (${this.hass.localize(
+            "ui.panel.lovelace.editor.card.config.required"
+          )})"
           .value="${this._image}"
           .configValue="${"image"}"
           @value-changed="${this._valueChanged}"
         ></paper-input>
         <div class="side-by-side">
           <hui-action-editor
-            label="Tap Action"
+            .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}"
@@ -79,7 +87,11 @@ export class HuiPictureCardEditor extends LitElement
             @action-changed="${this._valueChanged}"
           ></hui-action-editor>
           <hui-action-editor
-            label="Hold Action"
+            .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}"

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

@@ -105,8 +105,10 @@ export class HuiPictureEntityCardEditor extends LitElement
       <div class="card-config">
         <ha-entity-picker
           .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.entity"
+            "ui.panel.lovelace.editor.card.generic.entity"
-          )} (${this.hass.localize("ui.panel.lovelace.editor.card.required")})"
+          )} (${this.hass.localize(
+            "ui.panel.lovelace.editor.card.config.required"
+          )})"
           .hass="${this.hass}"
           .value="${this._entity}"
           .configValue=${"entity"}
@@ -115,24 +117,30 @@ export class HuiPictureEntityCardEditor extends LitElement
         ></ha-entity-picker>
         <paper-input
           .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.name"
+            "ui.panel.lovelace.editor.card.generic.name"
-          )} (${this.hass.localize("ui.panel.lovelace.editor.card.optional")})"
+          )} (${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.image"
+            "ui.panel.lovelace.editor.card.generic.image"
-          )} (${this.hass.localize("ui.panel.lovelace.editor.card.optional")})"
+          )} (${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.camera_image"
+            "ui.panel.lovelace.editor.card.generic.camera_image"
-          )} (${this.hass.localize("ui.panel.lovelace.editor.card.optional")})"
+          )} (${this.hass.localize(
+            "ui.panel.lovelace.editor.card.config.optional"
+          )})"
           .hass="${this.hass}"
           .value="${this._camera_image}"
           .configValue=${"camera_image"}
@@ -143,9 +151,9 @@ export class HuiPictureEntityCardEditor extends LitElement
         <div class="side-by-side">
           <paper-dropdown-menu
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.camera_view"
+              "ui.panel.lovelace.editor.card.generic.camera_view"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.optional"
+              "ui.panel.lovelace.editor.card.config.optional"
             )})"
             .configValue="${"camera_view"}"
             @value-changed="${this._valueChanged}"
@@ -163,9 +171,9 @@ export class HuiPictureEntityCardEditor extends LitElement
           </paper-dropdown-menu>
           <paper-input
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.aspect_ratio"
+              "ui.panel.lovelace.editor.card.generic.aspect_ratio"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.optional"
+              "ui.panel.lovelace.editor.card.config.optional"
             )})"
             type="number"
             .value="${Number(this._aspect_ratio.replace("%", ""))}"
@@ -179,7 +187,7 @@ export class HuiPictureEntityCardEditor extends LitElement
             .configValue="${"show_name"}"
             @change="${this._valueChanged}"
             >${this.hass.localize(
-              "ui.panel.lovelace.editor.card.show_name"
+              "ui.panel.lovelace.editor.card.generic.show_name"
             )}</ha-switch
           >
           <ha-switch
@@ -187,16 +195,16 @@ export class HuiPictureEntityCardEditor extends LitElement
             .configValue="${"show_state"}"
             @change="${this._valueChanged}"
             >${this.hass.localize(
-              "ui.panel.lovelace.editor.card.show_state"
+              "ui.panel.lovelace.editor.card.generic.show_state"
             )}</ha-switch
           >
         </div>
         <div class="side-by-side">
           <hui-action-editor
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.tap_action"
+              "ui.panel.lovelace.editor.card.generic.tap_action"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.optional"
+              "ui.panel.lovelace.editor.card.config.optional"
             )})"
             .hass="${this.hass}"
             .config="${this._tap_action}"
@@ -206,9 +214,9 @@ export class HuiPictureEntityCardEditor extends LitElement
           ></hui-action-editor>
           <hui-action-editor
             .label="${this.hass.localize(
-              "ui.panel.lovelace.editor.card.hold_action"
+              "ui.panel.lovelace.editor.card.generic.hold_action"
             )} (${this.hass.localize(
-              "ui.panel.lovelace.editor.card.optional"
+              "ui.panel.lovelace.editor.card.config.optional"
             )})"
             .hass="${this.hass}"
             .config="${this._hold_action}"

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

@@ -52,14 +52,12 @@ export class HuiPlantStatusCardEditor extends LitElement
     return html`
       ${configElementStyle}
       <div class="card-config">
-        <div class="side-by-side">
-          <paper-input
-            label="Name"
-            .value="${this._name}"
-            .configValue="${"name"}"
-            @value-changed="${this._valueChanged}"
-          ></paper-input>
         <ha-entity-picker
+          .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}"
           .configValue=${"entity"}
@@ -67,7 +65,16 @@ export class HuiPlantStatusCardEditor extends LitElement
           @change="${this._valueChanged}"
           allow-custom-entity
         ></ha-entity-picker>
-        </div>
+        <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>
     `;
   }

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

@@ -87,14 +87,12 @@ export class HuiSensorCardEditor extends LitElement
     return html`
       ${configElementStyle}
       <div class="card-config">
-        <div class="side-by-side">
-          <paper-input
-            label="Name"
-            .value="${this._name}"
-            .configValue="${"name"}"
-            @value-changed="${this._valueChanged}"
-          ></paper-input>
         <ha-entity-picker
+          .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}"
           .configValue=${"entity"}
@@ -102,16 +100,33 @@ export class HuiSensorCardEditor extends LitElement
           @change="${this._valueChanged}"
           allow-custom-entity
         ></ha-entity-picker>
-        </div>
+        <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">
           <paper-input
-            label="Icon"
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.icon"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
             .value="${this._icon}"
             .configValue="${"icon"}"
             @value-changed="${this._valueChanged}"
           ></paper-input>
           <paper-dropdown-menu
-            label="Graph Type"
+            .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}"
           >
@@ -129,13 +144,21 @@ export class HuiSensorCardEditor extends LitElement
         </div>
         <div class="side-by-side">
           <paper-input
-            label="Units"
+            .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>
           <paper-input
-            label="Graph Detail"
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.sensor.graph_detail"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
             type="number"
             .value="${this._detail}"
             .configValue="${"detail"}"
@@ -150,7 +173,11 @@ export class HuiSensorCardEditor extends LitElement
             @theme-changed="${this._valueChanged}"
           ></hui-theme-select-editor>
           <paper-input
-            label="Hours To Show"
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.sensor.hours_to_show"
+            )} (${this.hass.localize(
+              "ui.panel.lovelace.editor.card.config.optional"
+            )})"
             type="number"
             .value="${this._hours_to_show}"
             .configValue="${"hours_to_show"}"

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

@@ -43,7 +43,11 @@ export class HuiShoppingListEditor extends LitElement
     return html`
       <div class="card-config">
         <paper-input
-          label="Title"
+          .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}"

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

@@ -57,14 +57,12 @@ export class HuiThermostatCardEditor extends LitElement
     return html`
       ${configElementStyle}
       <div class="card-config">
-        <paper-input
-          label="Name"
-          .value="${this._name}"
-          .configValue="${"name"}"
-          @value-changed="${this._valueChanged}"
-        ></paper-input>
-        <div class="side-by-side">
         <ha-entity-picker
+          .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}"
           .configValue=${"entity"}
@@ -72,6 +70,16 @@ export class HuiThermostatCardEditor extends LitElement
           @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>
         <hui-theme-select-editor
           .hass="${this.hass}"
           .value="${this._theme}"
@@ -79,7 +87,6 @@ export class HuiThermostatCardEditor extends LitElement
           @theme-changed="${this._valueChanged}"
         ></hui-theme-select-editor>
       </div>
-      </div>
     `;
   }
 

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

@@ -50,14 +50,12 @@ export class HuiWeatherForecastCardEditor extends LitElement
     return html`
       ${configElementStyle}
       <div class="card-config">
-        <div class="side-by-side">
-          <paper-input
-            label="Name"
-            .value="${this._name}"
-            .configValue="${"name"}"
-            @value-changed="${this._valueChanged}"
-          ></paper-input>
         <ha-entity-picker
+          .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}"
           .configValue=${"entity"}
@@ -65,7 +63,16 @@ export class HuiWeatherForecastCardEditor extends LitElement
           @change="${this._valueChanged}"
           allow-custom-entity
         ></ha-entity-picker>
-        </div>
+        <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>
     `;
   }

src/translations/en.json

@@ -1130,19 +1130,63 @@
             "migrate": "Migrate config"
           },
           "card": {
+            "alarm_panel": {
+              "available_states": "Available States"
+            },
+            "config": {
               "required": "Required",
-            "optional": "Optional",
+              "optional": "Optional"
+            },
+            "entities": {
+              "show_header_toggle": "Show Header Toggle?"
+            },
+            "gauge": {
+              "severity": {
+                "define": "Define Severity?",
+                "green": "Green",
+                "red": "Red",
+                "yellow": "Yellow"
+              }
+            },
+            "glance": {
+              "columns": "Columns"
+            },
+            "generic": {
               "aspect_ratio": "Aspect Ratio",
               "camera_image": "Camera Entity",
               "camera_view": "Camera View",
+              "entities": "Entities",
               "entity": "Entity",
               "hold_action": "Hold Action",
+              "icon": "Icon",
+              "icon_height": "Icon Height",
               "image": "Image Path",
+              "maximum": "Maximum",
+              "minimum": "Minimum",
               "name": "Name",
+              "show_icon": "Show Icon?",
               "show_name": "Show Name?",
               "show_state": "Show State?",
               "tap_action": "Tap Action",
-            "theme": "Theme"
+              "title": "Title",
+              "theme": "Theme",
+              "unit": "Unit",
+              "url": "Url"
+            },
+            "map": {
+              "geo_location_sources": "Geolocation Sources",
+              "dark_mode": "Dark Mode?",
+              "default_zoom": "Default Zoom",
+              "source": "Source"
+            },
+            "markdown": {
+              "content": "Content"
+            },
+            "sensor": {
+              "graph_detail": "Graph Detail",
+              "graph_type": "Graph Type",
+              "hours_to_show": "Hours to Show"
+            }
           }
         },
         "warning": {