this kind of works :)

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -6,9 +6,9 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -48,12 +48,12 @@ class HaInputNumberForm extends LitElement {
       this._max = item.max ?? 100;
       this._min = item.min ?? 0;
       this._mode = item.mode || "slider";
-      this._step = item.step || 1;
+      this._step = item.step ?? 1;
       this._unit_of_measurement = item.unit_of_measurement;
     } else {
       this._item = {
         min: 0,
-        max: 0,
+        max: 100,
       };
       this._name = "";
       this._icon = "";
@@ -176,8 +176,10 @@ class HaInputNumberForm extends LitElement {
       return;
     }
     ev.stopPropagation();
-    const configValue = (ev.target as any).configValue;
+    const target = ev.target as any;
-    const value = ev.detail.value;
+    const configValue = target.configValue;
+    const value =
+      target.type === "number" ? Number(ev.detail.value) : ev.detail.value;
     if (this[`_${configValue}`] === value) {
       return;
     }

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

@@ -1,10 +1,7 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import "@material/mwc-list/mwc-list-item";
 import "../../../components/ha-icon-button";
-import "../../../components/ha-button-menu";
 import {
   css,
   CSSResult,
@@ -41,7 +38,7 @@ import { HaDeviceAction } from "../automation/action/types/ha-automation-action-
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "../../../components/ha-svg-icon";
-import { mdiContentSave, mdiDotsVertical } from "@mdi/js";
+import { mdiContentSave } from "@mdi/js";
 import { PaperListboxElement } from "@polymer/paper-listbox";
 import { slugify } from "../../../common/string/slugify";
 
@@ -66,8 +63,6 @@ export class HaScriptEditor extends LitElement {
 
   @internalProperty() private _errors?: string;
 
-  @internalProperty() private _yamlMode = false;
-
   protected render(): TemplateResult {
     return html`
       <hass-tabs-subpage
@@ -77,46 +72,19 @@ export class HaScriptEditor extends LitElement {
         .backCallback=${() => this._backTapped()}
         .tabs=${configSections.automation}
       >
-        <ha-button-menu
+        ${!this.scriptEntityId
-          corner="BOTTOM_START"
+          ? ""
-          slot="toolbar-icon"
+          : html`
-          @action=${this._handleAction}
+              <ha-icon-button
-        >
+                class="warning"
-          <mwc-icon-button
+                slot="toolbar-icon"
-            slot="trigger"
+                title="${this.hass.localize(
-            .title=${this.hass.localize("ui.common.menu")}
+                  "ui.panel.config.script.editor.delete_script"
-            .label=${this.hass.localize("ui.common.overflow_menu")}
+                )}"
-            ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+                icon="hass:delete"
-          </mwc-icon-button>
+                @click=${this._deleteConfirm}
-          <mwc-list-item
+              ></ha-icon-button>
-            aria-label=${this._yamlMode
+            `}
-              ? this.hass.localize("ui.panel.config.automation.editor.edit_ui")
-              : this.hass.localize(
-                  "ui.panel.config.automation.editor.edit_yaml"
-                )}
-          >
-            ${this._yamlMode
-              ? this.hass.localize("ui.panel.config.automation.editor.edit_ui")
-              : this.hass.localize(
-                  "ui.panel.config.automation.editor.edit_yaml"
-                )}
-          </mwc-list-item>
-          ${!this.scriptEntityId
-            ? ""
-            : html`
-                <mwc-list-item
-                  class="warning"
-                  aria-label=${this.hass.localize(
-                    "ui.panel.config.script.editor.delete_script"
-                  )}
-                >
-                  ${this.hass.localize(
-                    "ui.panel.config.script.editor.delete_script"
-                  )}
-                </mwc-list-item>
-              `}
-        </ha-button-menu>
-
         ${this.narrow
           ? html` <span slot="header">${this._config?.alias}</span> `
           : ""}
@@ -130,195 +98,151 @@ export class HaScriptEditor extends LitElement {
             })}"
           >
             ${this._config
-              ? this._yamlMode
+              ? html`
-                ? html`
+                  <ha-config-section .isWide=${this.isWide}>
-                    <ha-config-section .isWide=${false}>
+                    ${!this.narrow
-                      ${!this.narrow
+                      ? html` <span slot="header">${this._config.alias}</span> `
-                        ? html`
+                      : ""}
-                            <span slot="header">${this._config.alias}</span>
+                    <span slot="introduction">
-                          `
+                      ${this.hass.localize(
-                        : ""}
+                        "ui.panel.config.script.editor.introduction"
-                      <ha-card>
+                      )}
-                        <div class="card-content">
+                    </span>
-                          <ha-yaml-editor
+                    <ha-card>
-                            .defaultValue=${this._config}
+                      <div class="card-content">
-                            @value-changed=${this._onYamlChange}
+                        <paper-input
-                          ></ha-yaml-editor>
+                          .label=${this.hass.localize(
-                        </div>
+                            "ui.panel.config.script.editor.alias"
-                        ${this.scriptEntityId
+                          )}
-                          ? html`
+                          name="alias"
-                              <div
+                          .value=${this._config.alias}
-                                class="card-actions layout horizontal justified center"
+                          @value-changed=${this._valueChanged}
-                              >
+                          @change=${this._aliasChanged}
-                                <span></span>
+                        >
-                                <mwc-button
+                        </paper-input>
-                                  @click=${this._runScript}
+                        <ha-icon-input
-                                  title="${this.hass.localize(
+                          .label=${this.hass.localize(
-                                    "ui.panel.config.script.picker.activate_script"
+                            "ui.panel.config.script.editor.icon"
-                                  )}"
+                          )}
-                                  ?disabled=${this._dirty}
+                          .name=${"icon"}
-                                >
+                          .value=${this._config.icon}
-                                  ${this.hass.localize(
+                          @value-changed=${this._valueChanged}
-                                    "ui.card.script.execute"
+                        >
-                                  )}
+                        </ha-icon-input>
-                                </mwc-button>
+                        ${!this.scriptEntityId
-                              </div>
+                          ? html` <paper-input
-                            `
+                              .label=${this.hass.localize(
-                          : ``}
+                                "ui.panel.config.script.editor.id"
-                      </ha-card>
-                    </ha-config-section>
-                  `
-                : html`
-                    <ha-config-section .isWide=${this.isWide}>
-                      ${!this.narrow
-                        ? html`
-                            <span slot="header">${this._config.alias}</span>
-                          `
-                        : ""}
-                      <span slot="introduction">
-                        ${this.hass.localize(
-                          "ui.panel.config.script.editor.introduction"
-                        )}
-                      </span>
-                      <ha-card>
-                        <div class="card-content">
-                          <paper-input
-                            .label=${this.hass.localize(
-                              "ui.panel.config.script.editor.alias"
-                            )}
-                            name="alias"
-                            .value=${this._config.alias}
-                            @value-changed=${this._valueChanged}
-                            @change=${this._aliasChanged}
-                          >
-                          </paper-input>
-                          <ha-icon-input
-                            .label=${this.hass.localize(
-                              "ui.panel.config.script.editor.icon"
-                            )}
-                            .name=${"icon"}
-                            .value=${this._config.icon}
-                            @value-changed=${this._valueChanged}
-                          >
-                          </ha-icon-input>
-                          ${!this.scriptEntityId
-                            ? html` <paper-input
-                                .label=${this.hass.localize(
-                                  "ui.panel.config.script.editor.id"
-                                )}
-                                .errorMessage=${this.hass.localize(
-                                  "ui.panel.config.script.editor.id_already_exists"
-                                )}
-                                .invalid=${this._idError}
-                                .value=${this._entityId}
-                                @value-changed=${this._idChanged}
-                              >
-                              </paper-input>`
-                            : ""}
-                          <p>
-                            ${this.hass.localize(
-                              "ui.panel.config.script.editor.modes.description",
-                              "documentation_link",
-                              html`<a
-                                href="https://www.home-assistant.io/integrations/script/#script-modes"
-                                target="_blank"
-                                rel="noreferrer"
-                                >${this.hass.localize(
-                                  "ui.panel.config.script.editor.modes.documentation"
-                                )}</a
-                              >`
-                            )}
-                          </p>
-                          <paper-dropdown-menu-light
-                            .label=${this.hass.localize(
-                              "ui.panel.config.script.editor.modes.label"
-                            )}
-                            no-animations
-                          >
-                            <paper-listbox
-                              slot="dropdown-content"
-                              .selected=${this._config.mode
-                                ? MODES.indexOf(this._config.mode)
-                                : 0}
-                              @iron-select=${this._modeChanged}
-                            >
-                              ${MODES.map(
-                                (mode) => html`
-                                  <paper-item .mode=${mode}>
-                                    ${this.hass.localize(
-                                      `ui.panel.config.script.editor.modes.${mode}`
-                                    ) || mode}
-                                  </paper-item>
-                                `
                               )}
-                            </paper-listbox>
+                              .errorMessage=${this.hass.localize(
-                          </paper-dropdown-menu-light>
+                                "ui.panel.config.script.editor.id_already_exists"
-                          ${this._config.mode &&
+                              )}
-                          MODES_MAX.includes(this._config.mode)
+                              .invalid=${this._idError}
-                            ? html` <paper-input
+                              .value=${this._entityId}
-                                .label=${this.hass.localize(
+                              @value-changed=${this._idChanged}
-                                  `ui.panel.config.script.editor.max.${this._config.mode}`
+                            >
-                                )}
+                            </paper-input>`
-                                type="number"
+                          : ""}
-                                name="max"
-                                .value=${this._config.max || "10"}
-                                @value-changed=${this._valueChanged}
-                              >
-                              </paper-input>`
-                            : html``}
-                        </div>
-                        ${this.scriptEntityId
-                          ? html`
-                              <div
-                                class="card-actions layout horizontal justified center"
-                              >
-                                <span></span>
-                                <mwc-button
-                                  @click=${this._runScript}
-                                  title="${this.hass.localize(
-                                    "ui.panel.config.script.picker.activate_script"
-                                  )}"
-                                  ?disabled=${this._dirty}
-                                >
-                                  ${this.hass.localize(
-                                    "ui.card.script.execute"
-                                  )}
-                                </mwc-button>
-                              </div>
-                            `
-                          : ``}
-                      </ha-card>
-                    </ha-config-section>
-
-                    <ha-config-section .isWide=${this.isWide}>
-                      <span slot="header">
-                        ${this.hass.localize(
-                          "ui.panel.config.script.editor.sequence"
-                        )}
-                      </span>
-                      <span slot="introduction">
                         <p>
                           ${this.hass.localize(
-                            "ui.panel.config.script.editor.sequence_sentence"
+                            "ui.panel.config.script.editor.modes.description",
+                            "documentation_link",
+                            html`<a
+                              href="https://www.home-assistant.io/integrations/script/#script-modes"
+                              target="_blank"
+                              rel="noreferrer"
+                              >${this.hass.localize(
+                                "ui.panel.config.script.editor.modes.documentation"
+                              )}</a
+                            >`
                           )}
                         </p>
-                        <a
+                        <paper-dropdown-menu-light
-                          href="https://home-assistant.io/docs/scripts/"
+                          .label=${this.hass.localize(
-                          target="_blank"
+                            "ui.panel.config.script.editor.modes.label"
-                          rel="noreferrer"
-                        >
-                          ${this.hass.localize(
-                            "ui.panel.config.script.editor.link_available_actions"
                           )}
-                        </a>
+                          no-animations
-                      </span>
+                        >
-                      <ha-automation-action
+                          <paper-listbox
-                        .actions=${this._config.sequence}
+                            slot="dropdown-content"
-                        @value-changed=${this._sequenceChanged}
+                            .selected=${this._config.mode
-                        .hass=${this.hass}
+                              ? MODES.indexOf(this._config.mode)
-                      ></ha-automation-action>
+                              : 0}
-                    </ha-config-section>
+                            @iron-select=${this._modeChanged}
-                  `
+                          >
+                            ${MODES.map(
+                              (mode) => html`
+                                <paper-item .mode=${mode}>
+                                  ${this.hass.localize(
+                                    `ui.panel.config.script.editor.modes.${mode}`
+                                  ) || mode}
+                                </paper-item>
+                              `
+                            )}
+                          </paper-listbox>
+                        </paper-dropdown-menu-light>
+                        ${this._config.mode &&
+                        MODES_MAX.includes(this._config.mode)
+                          ? html` <paper-input
+                              .label=${this.hass.localize(
+                                `ui.panel.config.script.editor.max.${this._config.mode}`
+                              )}
+                              type="number"
+                              name="max"
+                              .value=${this._config.max || "10"}
+                              @value-changed=${this._valueChanged}
+                            >
+                            </paper-input>`
+                          : html``}
+                      </div>
+                      ${this.scriptEntityId
+                        ? html`
+                          <div class="card-actions layout horizontal justified center">
+                            <span></span>
+                            <mwc-button
+                              @click=${this._runScript}
+                              title="${this.hass.localize(
+                                "ui.panel.config.script.picker.activate_script"
+                             )}"
+                             ?disabled=${this._dirty}
+                            >
+                              ${this.hass.localize("ui.card.script.execute")}
+                           </mwc-button>
+                         </div>
+                          `
+                        : ``}
+                    </ha-card>
+                  </ha-config-section>
+
+                  <ha-config-section .isWide=${this.isWide}>
+                    <span slot="header">
+                      ${this.hass.localize(
+                        "ui.panel.config.script.editor.sequence"
+                      )}
+                    </span>
+                    <span slot="introduction">
+                      <p>
+                        ${this.hass.localize(
+                          "ui.panel.config.script.editor.sequence_sentence"
+                        )}
+                      </p>
+                      <a
+                        href="https://home-assistant.io/docs/scripts/"
+                        target="_blank"
+                        rel="noreferrer"
+                      >
+                        ${this.hass.localize(
+                          "ui.panel.config.script.editor.link_available_actions"
+                        )}
+                      </a>
+                    </span>
+                    <ha-automation-action
+                      .actions=${this._config.sequence}
+                      @value-changed=${this._sequenceChanged}
+                      .hass=${this.hass}
+                    ></ha-automation-action>
+                  </ha-config-section>
+                `
               : ""}
           </div>
         </div>
@@ -395,7 +319,7 @@ export class HaScriptEditor extends LitElement {
     }
   }
 
-  private async _runScript(ev: Event) {
+  private async _runScript(ev) {
     ev.stopPropagation();
     await triggerScript(this.hass, this.scriptEntityId);
     showToast(this, {
@@ -407,21 +331,6 @@ export class HaScriptEditor extends LitElement {
     });
   }
 
-  private _handleAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
-        this._switchYamlMode();
-        break;
-      case 1:
-        this._deleteConfirm();
-        break;
-    }
-  }
-
-  private _switchYamlMode() {
-    this._yamlMode = !this._yamlMode;
-  }
-
   private _modeChanged(ev: CustomEvent) {
     const mode = ((ev.target as PaperListboxElement)?.selectedItem as any)
       ?.mode;
@@ -461,15 +370,6 @@ export class HaScriptEditor extends LitElement {
     }
   }
 
-  private _onYamlChange(ev: CustomEvent) {
-    ev.stopPropagation();
-    if (!ev.detail.isValid) {
-      return;
-    }
-    this._config = ev.detail.value;
-    this._dirty = true;
-  }
-
   private _valueChanged(ev: CustomEvent) {
     ev.stopPropagation();
     const target = ev.target as any;

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

@@ -23,13 +23,13 @@ import { EditorTarget } from "../editor/types";
 
 @customElement("hui-action-editor")
 export class HuiActionEditor extends LitElement {
-  @property() public config?: ActionConfig;
+  @property({ attribute: false }) public config?: ActionConfig;
 
-  @property() public label?: string;
+  @property({ attribute: false }) public label?: string;
 
-  @property() public actions?: string[];
+  @property({ attribute: false }) public actions?: string[];
 
-  @property() protected hass?: HomeAssistant;
+  @property({ attribute: false }) protected hass?: HomeAssistant;
 
   get _action(): string {
     return this.config?.action || "";
@@ -55,17 +55,19 @@ export class HuiActionEditor extends LitElement {
       return html``;
     }
     return html`
-      <paper-dropdown-menu
+      <paper-dropdown-menu .label=${this.label}>
-        .label="${this.label}"
-        .configValue="${"action"}"
-        @value-changed="${this._valueChanged}"
-      >
         <paper-listbox
           slot="dropdown-content"
-          .selected="${this.actions.indexOf(this._action)}"
+          attr-for-selected="item-value"
+          .configValue=${"action"}
+          .selected=${this._action}
+          @iron-select=${this._valueChanged}
         >
+          <paper-item></paper-item>
           ${this.actions.map((action) => {
-            return html` <paper-item>${action}</paper-item> `;
+            return html`
+              <paper-item .itemValue=${action}>${action}</paper-item>
+            `;
           })}
         </paper-listbox>
       </paper-dropdown-menu>
@@ -73,9 +75,9 @@ export class HuiActionEditor extends LitElement {
         ? html`
             <paper-input
               label="Navigation Path"
-              .value="${this._navigation_path}"
+              .value=${this._navigation_path}
-              .configValue="${"navigation_path"}"
+              .configValue=${"navigation_path"}
-              @value-changed="${this._valueChanged}"
+              @value-changed=${this._valueChanged}
             ></paper-input>
           `
         : ""}
@@ -83,9 +85,9 @@ export class HuiActionEditor extends LitElement {
         ? html`
             <paper-input
               label="Url Path"
-              .value="${this._url_path}"
+              .value=${this._url_path}
-              .configValue="${"url_path"}"
+              .configValue=${"url_path"}
-              @value-changed="${this._valueChanged}"
+              @value-changed=${this._valueChanged}
             ></paper-input>
           `
         : ""}
@@ -93,9 +95,9 @@ export class HuiActionEditor extends LitElement {
         ? html`
             <ha-service-picker
               .hass=${this.hass}
-              .value="${this._service}"
+              .value=${this._service}
-              .configValue="${"service"}"
+              .configValue=${"service"}
-              @value-changed="${this._valueChanged}"
+              @value-changed=${this._valueChanged}
             ></ha-service-picker>
             <b>Service data can only be entered in the code editor</b>
           `
@@ -103,20 +105,26 @@ export class HuiActionEditor extends LitElement {
     `;
   }
 
-  private _valueChanged(ev: Event): void {
+  private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
-    if (!this.hass) {
+    if (!this.hass || !ev.detail.item?.itemValue) {
       return;
     }
+
     const target = ev.target! as EditorTarget;
-    if (this[`_${target.configValue}`] === target.value) {
+
+    if (this[`_${target.configValue}`] === ev.detail.item.itemValue) {
       return;
     }
+
     if (target.configValue) {
       const newConfig =
         target.configValue === "action"
-          ? { action: target.value }
+          ? { action: ev.detail.item.itemValue }
-          : { ...this.config!, [target.configValue!]: target.value };
+          : {
+              ...this.config!,
+              [target.configValue!]: ev.detail.item.itemValue,
+            };
       fireEvent(this, "value-changed", { value: newConfig });
     }
   }