Switch paper-toggle-button to mwc-switch (#3683)

* Switch paper-toggle-button to mwc-switch

Closes https://github.com/home-assistant/home-assistant-polymer/issues/3352

* ha-switch

* apply not-checked theming

Thanks @bramkragten!

* address review comments

gallery/src/components/demo-cards.js

@@ -1,9 +1,9 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "./demo-card";
+import "../../../src/components/ha-switch";
 
 class DemoCards extends PolymerElement {
   static get template() {
@@ -26,9 +26,7 @@ class DemoCards extends PolymerElement {
       </style>
       <app-toolbar>
         <div class="filters">
-          <paper-toggle-button checked="{{_showConfig}}"
+          <ha-switch checked="{{_showConfig}}">Show config</ha-switch>
-            >Show config</paper-toggle-button
-          >
         </div>
       </app-toolbar>
       <div class="cards">

gallery/src/components/demo-more-infos.js

@@ -1,9 +1,9 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "./demo-more-info";
+import "../../../src/components/ha-switch";
 
 class DemoMoreInfos extends PolymerElement {
   static get template() {
@@ -26,9 +26,7 @@ class DemoMoreInfos extends PolymerElement {
       </style>
       <app-toolbar>
         <div class="filters">
-          <paper-toggle-button checked="{{_showConfig}}"
+          <ha-switch checked="{{_showConfig}}">Show entity</ha-switch>
-            >Show entity</paper-toggle-button
-          >
         </div>
       </app-toolbar>
       <div class="cards">

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

@@ -2,19 +2,19 @@ import "@polymer/iron-icon/iron-icon";
 import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-tooltip/paper-tooltip";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../src/components/ha-label-badge";
 import "../../../src/components/ha-markdown";
 import "../../../src/components/buttons/ha-call-api-button";
+import "../../../src/components/ha-switch";
 import "../../../src/resources/ha-style";
+import "../components/hassio-card-content";
+
 import { EventsMixin } from "../../../src/mixins/events-mixin";
 import { navigate } from "../../../src/common/navigate";
-
 import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
-import "../components/hassio-card-content";
 
 const PERMIS_DESC = {
   rating: {
@@ -122,7 +122,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           width: 16px;
           color: var(--secondary-text-color);
         }
-        paper-toggle-button {
+        ha-switch {
           display: inline;
         }
         iron-icon.running {
@@ -348,26 +348,26 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           <template is="dom-if" if="[[addon.version]]">
             <div class="state">
               <div>Start on boot</div>
-              <paper-toggle-button
+              <ha-switch
                 on-change="startOnBootToggled"
                 checked="[[computeStartOnBoot(addon.boot)]]"
-              ></paper-toggle-button>
+              ></ha-switch>
             </div>
             <div class="state">
               <div>Auto update</div>
-              <paper-toggle-button
+              <ha-switch
                 on-change="autoUpdateToggled"
                 checked="[[addon.auto_update]]"
-              ></paper-toggle-button>
+              ></ha-switch>
             </div>
             <template is="dom-if" if="[[addon.ingress]]">
               <div class="state">
                 <div>Show in sidebar</div>
-                <paper-toggle-button
+                <ha-switch
                   on-change="panelToggled"
                   checked="[[addon.ingress_panel]]"
                   disabled="[[_computeCannotIngressSidebar(hass, addon)]]"
-                ></paper-toggle-button>
+                ></ha-switch>
                 <template is="dom-if" if="[[_computeCannotIngressSidebar(hass, addon)]]">
                   <span>This option requires Home Assistant 0.92 or later.</span>
                 </template>
@@ -381,10 +381,10 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                   <paper-tooltip>Grant the add-on elevated system access.</paper-tooltip>
                 </span>
               </div>
-              <paper-toggle-button
+              <ha-switch
                 on-change="protectionToggled"
                 checked="[[addon.protected]]"
-              ></paper-toggle-button>
+              ></ha-switch>
             </div>
           </template>
         </div>

package.json

@@ -23,6 +23,7 @@
     "@material/mwc-checkbox": "^0.8.0",
     "@material/mwc-fab": "^0.8.0",
     "@material/mwc-ripple": "0.8.0",
+    "@material/mwc-switch": "^0.8.0",
     "@mdi/svg": "4.4.95",
     "@polymer/app-layout": "^3.0.2",
     "@polymer/app-localize-behavior": "^3.0.1",
@@ -63,7 +64,6 @@
     "@polymer/paper-styles": "^3.0.1",
     "@polymer/paper-tabs": "^3.0.1",
     "@polymer/paper-toast": "^3.0.1",
-    "@polymer/paper-toggle-button": "^3.0.1",
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.1.0",
     "@thomasloven/round-slider": "^0.2.2",

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

@@ -1,8 +1,6 @@
 import "@polymer/paper-icon-button/paper-icon-button";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import { STATES_OFF } from "../../common/const";
-import computeStateDomain from "../../common/entity/compute_state_domain";
 import {
   LitElement,
   TemplateResult,
@@ -15,8 +13,12 @@ import {
 import { HomeAssistant } from "../../types";
 import { HassEntity } from "home-assistant-js-websocket";
 import { forwardHaptic } from "../../data/haptics";
+
+import computeStateDomain from "../../common/entity/compute_state_domain";
 import computeStateName from "../../common/entity/compute_state_name";
 
+import "../ha-switch";
+
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined && !STATES_OFF.includes(stateObj.state);
 
@@ -29,7 +31,7 @@ class HaEntityToggle extends LitElement {
   protected render(): TemplateResult | void {
     if (!this.stateObj) {
       return html`
-        <paper-toggle-button disabled></paper-toggle-button>
+        <ha-switch disabled></ha-switch>
       `;
     }
 
@@ -51,13 +53,13 @@ class HaEntityToggle extends LitElement {
     }
 
     return html`
-      <paper-toggle-button
+      <ha-switch
         aria-label=${`Toggle ${computeStateName(this.stateObj)} ${
           this._isOn ? "off" : "on"
         }`}
         .checked=${this._isOn}
         @change=${this._toggleChanged}
-      ></paper-toggle-button>
+      ></ha-switch>
     `;
   }
 
@@ -149,9 +151,7 @@ class HaEntityToggle extends LitElement {
       paper-icon-button[state-active] {
         color: var(--paper-icon-button-active-color, var(--primary-color));
       }
-      paper-toggle-button {
+      ha-switch {
-        cursor: pointer;
-        --paper-toggle-button-label-spacing: 0;
         padding: 13px 5px;
         margin: -4px -5px;
       }

src/components/ha-push-notifications-toggle.js

@@ -1,11 +1,11 @@
-import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import { getAppKey } from "../data/notify_html5";
-
 import { EventsMixin } from "../mixins/events-mixin";
 
+import "./ha-switch";
+
 export const pushSupported =
   "serviceWorker" in navigator &&
   "PushManager" in window &&
@@ -19,11 +19,11 @@ export const pushSupported =
 class HaPushNotificationsToggle extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
-      <paper-toggle-button
+      <ha-switch
         disabled="[[_compDisabled(disabled, loading)]]"
         checked="{{pushChecked}}"
         on-change="handlePushChange"
-      ></paper-toggle-button>
+      ></ha-switch>
     `;
   }
 

src/components/ha-switch.ts

@@ -0,0 +1,37 @@
+import { Constructor, customElement, CSSResult, css } from "lit-element";
+import "@material/mwc-switch";
+import { style } from "@material/mwc-switch/mwc-switch-css";
+// tslint:disable-next-line
+import { Switch } from "@material/mwc-switch";
+// tslint:disable-next-line
+const MwcSwitch = customElements.get("mwc-switch") as Constructor<Switch>;
+
+@customElement("ha-switch")
+export class HaSwitch extends MwcSwitch {
+  protected firstUpdated() {
+    super.firstUpdated();
+    this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
+  }
+
+  protected static get styles(): CSSResult[] {
+    return [
+      style,
+      css`
+        .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
+          background-color: var(--paper-toggle-button-unchecked-button-color);
+          border-color: var(--paper-toggle-button-unchecked-button-color);
+        }
+        .mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
+          background-color: var(--paper-toggle-button-unchecked-bar-color;
+          border-color: var(--paper-toggle-button-unchecked-bar-color);
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-switch": HaSwitch;
+  }
+}

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts

@@ -11,6 +11,8 @@ import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 
 import "../../components/dialog/ha-paper-dialog";
+import "../../components/ha-switch";
+
 import { HomeAssistant } from "../../types";
 import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";
 import {
@@ -19,6 +21,8 @@ import {
 } from "../../data/config_entries";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { haStyleDialog } from "../../resources/styles";
+// tslint:disable-next-line: no-duplicate-imports
+import { HaSwitch } from "../../components/ha-switch";
 
 @customElement("dialog-config-entry-system-options")
 class DialogConfigEntrySystemOptions extends LitElement {
@@ -72,9 +76,9 @@ class DialogConfigEntrySystemOptions extends LitElement {
                     `
                   : ""}
                 <div class="form">
-                  <paper-toggle-button
+                  <ha-switch
                     .checked=${!this._disableNewEntities}
-                    @checked-changed=${this._disableNewEntitiesChanged}
+                    @change=${this._disableNewEntitiesChanged}
                     .disabled=${this._submitting}
                   >
                     <div>
@@ -87,7 +91,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
                         "ui.dialogs.config_entry_system_options.enable_new_entities_description"
                       )}
                     </div>
-                  </paper-toggle-button>
+                  </ha-switch>
                 </div>
               `}
         </paper-dialog-scrollable>
@@ -109,9 +113,9 @@ class DialogConfigEntrySystemOptions extends LitElement {
     `;
   }
 
-  private _disableNewEntitiesChanged(ev: PolymerChangedEvent<boolean>): void {
+  private _disableNewEntitiesChanged(ev: Event): void {
     this._error = undefined;
-    this._disableNewEntities = !ev.detail.value;
+    this._disableNewEntities = !(ev.target as HaSwitch).checked;
   }
 
   private async _updateEntry(): Promise<void> {
@@ -152,6 +156,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
         }
 
         .form {
+          padding-top: 6px;
           padding-bottom: 24px;
           color: var(--primary-text-color);
         }

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

@@ -1,7 +1,6 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 import {
   LitElement,
   html,
@@ -15,6 +14,7 @@ import {
 import "../../../components/ha-climate-control";
 import "../../../components/ha-paper-slider";
 import "../../../components/ha-paper-dropdown-menu";
+import "../../../components/ha-switch";
 
 import { supportsFeature } from "../../../common/entity/supports-feature";
 
@@ -279,10 +279,10 @@ class MoreInfoClimate extends LitElement {
                   <div class="flex">
                     ${hass.localize("ui.card.climate.aux_heat")}
                   </div>
-                  <paper-toggle-button
+                  <ha-switch
                     .checked=${stateObj.attributes.aux_heat === "on"}
                     @change=${this._auxToggleChanged}
-                  ></paper-toggle-button>
+                  ></ha-switch>
                 </div>
               </div>
             `

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

@@ -2,15 +2,16 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../components/ha-attributes";
 import "../../../components/ha-paper-dropdown-menu";
+import "../../../components/ha-switch";
+
+import { EventsMixin } from "../../../mixins/events-mixin";
 
 import attributeClassNames from "../../../common/entity/attribute_class_names";
-import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
@@ -68,11 +69,11 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
         <div class="container-oscillating">
           <div class="center horizontal layout single-row">
             <div class="flex">[[localize('ui.card.fan.oscillate')]]</div>
-            <paper-toggle-button
+            <ha-switch
               checked="[[oscillationToggleChecked]]"
               on-change="oscillationToggleChanged"
             >
-            </paper-toggle-button>
+            </ha-switch>
           </div>
         </div>
 

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

@@ -1,7 +1,6 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 import { timeOut } from "@polymer/polymer/lib/utils/async";
 import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -10,11 +9,12 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../components/ha-water_heater-control";
 import "../../../components/ha-paper-slider";
 import "../../../components/ha-paper-dropdown-menu";
+import "../../../components/ha-switch";
+
+import { supportsFeature } from "../../../common/entity/supports-feature";
+import { EventsMixin } from "../../../mixins/events-mixin";
 
 import featureClassNames from "../../../common/entity/feature_class_names";
-import { supportsFeature } from "../../../common/entity/supports-feature";
-
-import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 
 /*
@@ -124,11 +124,11 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
               <div class="flex">
                 [[localize('ui.card.water_heater.away_mode')]]
               </div>
-              <paper-toggle-button
+              <ha-switch
                 checked="[[awayToggleChecked]]"
                 on-change="awayToggleChanged"
               >
-              </paper-toggle-button>
+              </ha-switch>
             </div>
           </div>
         </template>

src/panels/config/cloud/account/cloud-account.js

@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
@@ -8,18 +7,18 @@ import "../../../../components/ha-card";
 import "../../../../components/buttons/ha-call-api-button";
 import "../../../../layouts/hass-subpage";
 import "../../../../resources/ha-style";
-
 import "../../ha-config-section";
 import "./cloud-webhooks";
-
-import formatDateTime from "../../../../common/datetime/format_date_time";
-import { EventsMixin } from "../../../../mixins/events-mixin";
-import LocalizeMixin from "../../../../mixins/localize-mixin";
-import { fetchCloudSubscriptionInfo } from "../../../../data/cloud";
 import "./cloud-alexa-pref";
 import "./cloud-google-pref";
 import "./cloud-remote-pref";
 
+import { EventsMixin } from "../../../../mixins/events-mixin";
+import { fetchCloudSubscriptionInfo } from "../../../../data/cloud";
+
+import formatDateTime from "../../../../common/datetime/format_date_time";
+import LocalizeMixin from "../../../../mixins/localize-mixin";
+
 /*
  * @appliesMixin EventsMixin
  * @appliesMixin LocalizeMixin

src/panels/config/cloud/account/cloud-alexa-pref.ts

@@ -7,12 +7,12 @@ import {
   property,
 } from "lit-element";
 import "@material/mwc-button";
-import "@polymer/paper-toggle-button/paper-toggle-button";
-// tslint:disable-next-line
-import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "../../../../components/ha-card";
+import "../../../../components/ha-switch";
 
+// tslint:disable-next-line: no-duplicate-imports
+import { HaSwitch } from "../../../../components/ha-switch";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
@@ -32,10 +32,10 @@ export class CloudAlexaPref extends LitElement {
 
     return html`
       <ha-card header="Alexa">
-        <paper-toggle-button
+        <ha-switch
           .checked=${alexa_enabled}
           @change=${this._enabledToggleChanged}
-        ></paper-toggle-button>
+        ></ha-switch>
         <div class="card-content">
           With the Alexa integration for Home Assistant Cloud you'll be able to
           control all your Home Assistant devices via any Alexa-enabled device.
@@ -70,10 +70,10 @@ export class CloudAlexaPref extends LitElement {
                   allows you to always see the latest states in the Alexa app
                   and use the state changes to create routines.
                 </p>
-                <paper-toggle-button
+                <ha-switch
                   .checked=${alexa_report_state}
                   @change=${this._reportToggleChanged}
-                ></paper-toggle-button>
+                ></ha-switch>
               `
             : ""}
         </div>
@@ -102,7 +102,7 @@ export class CloudAlexaPref extends LitElement {
   }
 
   private async _enabledToggleChanged(ev) {
-    const toggle = ev.target as PaperToggleButtonElement;
+    const toggle = ev.target as HaSwitch;
     try {
       await updateCloudPref(this.hass!, { alexa_enabled: toggle.checked! });
       fireEvent(this, "ha-refresh-cloud-status");
@@ -112,7 +112,7 @@ export class CloudAlexaPref extends LitElement {
   }
 
   private async _reportToggleChanged(ev) {
-    const toggle = ev.target as PaperToggleButtonElement;
+    const toggle = ev.target as HaSwitch;
     try {
       await updateCloudPref(this.hass!, {
         alexa_report_state: toggle.checked!,
@@ -133,7 +133,7 @@ export class CloudAlexaPref extends LitElement {
       a {
         color: var(--primary-color);
       }
-      ha-card > paper-toggle-button {
+      ha-card > ha-switch {
         margin: -4px 0;
         position: absolute;
         right: 8px;

src/panels/config/cloud/account/cloud-google-pref.ts

@@ -7,13 +7,13 @@ import {
   css,
 } from "lit-element";
 import "@material/mwc-button";
-import "@polymer/paper-toggle-button/paper-toggle-button";
-// tslint:disable-next-line
-import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
 import "../../../../components/buttons/ha-call-api-button";
 
 import "../../../../components/ha-card";
+import "../../../../components/ha-switch";
 
+// tslint:disable-next-line
+import { HaSwitch } from "../../../../components/ha-switch";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
@@ -43,11 +43,11 @@ export class CloudGooglePref extends LitElement {
 
     return html`
       <ha-card header="Google Assistant">
-        <paper-toggle-button
+        <ha-switch
           id="google_enabled"
           .checked="${google_enabled}"
           @change="${this._toggleChanged}"
-        ></paper-toggle-button>
+        ></ha-switch>
         <div class="card-content">
           With the Google Assistant integration for Home Assistant Cloud you'll
           be able to control all your Home Assistant devices via any Google
@@ -110,7 +110,7 @@ export class CloudGooglePref extends LitElement {
   }
 
   private async _toggleChanged(ev) {
-    const toggle = ev.target as PaperToggleButtonElement;
+    const toggle = ev.target as HaSwitch;
     try {
       await updateCloudPref(this.hass!, { [toggle.id]: toggle.checked! });
       fireEvent(this, "ha-refresh-cloud-status");
@@ -138,7 +138,7 @@ export class CloudGooglePref extends LitElement {
       a {
         color: var(--primary-color);
       }
-      ha-card > paper-toggle-button {
+      ha-card > ha-switch {
         margin: -4px 0;
         position: absolute;
         right: 8px;

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -8,13 +8,13 @@ import {
   css,
 } from "lit-element";
 import "@material/mwc-button";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 import "@polymer/paper-item/paper-item-body";
-// tslint:disable-next-line
-import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "../../../../components/ha-card";
+import "../../../../components/ha-switch";
 
+// tslint:disable-next-line
+import { HaSwitch } from "../../../../components/ha-switch";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
 import {
@@ -59,10 +59,10 @@ export class CloudRemotePref extends LitElement {
 
     return html`
       <ha-card header="Remote Control">
-        <paper-toggle-button
+        <ha-switch
           .checked="${remote_connected}"
           @change="${this._toggleChanged}"
-        ></paper-toggle-button>
+        ></ha-switch>
         <div class="card-content">
           Home Assistant Cloud provides a secure remote connection to your
           instance while away from home. Your instance
@@ -95,7 +95,7 @@ export class CloudRemotePref extends LitElement {
   }
 
   private async _toggleChanged(ev) {
-    const toggle = ev.target as PaperToggleButtonElement;
+    const toggle = ev.target as HaSwitch;
 
     try {
       if (toggle.checked) {
@@ -118,7 +118,7 @@ export class CloudRemotePref extends LitElement {
       a {
         color: var(--primary-color);
       }
-      ha-card > paper-toggle-button {
+      ha-card > ha-switch {
         margin: -4px 0;
         position: absolute;
         right: 8px;

src/panels/config/cloud/account/cloud-webhooks.ts

@@ -4,11 +4,12 @@ import {
   PropertyDeclarations,
   PropertyValues,
 } from "lit-element";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-spinner/paper-spinner";
+
 import "../../../../components/ha-card";
+import "../../../../components/ha-switch";
 
 import { HomeAssistant, WebhookError } from "../../../../types";
 import { Webhook, fetchWebhooks } from "../../../../data/webhook";
@@ -116,9 +117,7 @@ export class CloudWebhooks extends LitElement {
                 </mwc-button>
               `
             : html`
-                <paper-toggle-button
+                <ha-switch @click="${this._enableWebhook}"></ha-switch>
-                  @click="${this._enableWebhook}"
-                ></paper-toggle-button>
               `}
         </div>
       `

src/panels/config/cloud/alexa/cloud-alexa.ts

@@ -7,12 +7,15 @@ import {
   customElement,
   property,
 } from "lit-element";
-import "@polymer/paper-toggle-button";
 import "@polymer/paper-icon-button";
+import memoizeOne from "memoize-one";
+
 import "../../../../layouts/hass-subpage";
 import "../../../../layouts/hass-loading-screen";
 import "../../../../components/ha-card";
+import "../../../../components/ha-switch";
 import "../../../../components/entity/state-info";
+
 import { HomeAssistant } from "../../../../types";
 import {
   CloudStatusLoggedIn,
@@ -20,19 +23,20 @@ import {
   updateCloudAlexaEntityConfig,
   AlexaEntityConfig,
 } from "../../../../data/cloud";
-import memoizeOne from "memoize-one";
 import {
   generateFilter,
   isEmptyFilter,
   EntityFilter,
 } from "../../../../common/entity/entity_filter";
 import { compare } from "../../../../common/string/compare";
-import computeStateName from "../../../../common/entity/compute_state_name";
 import { fireEvent } from "../../../../common/dom/fire_event";
-import { PolymerChangedEvent } from "../../../../polymer-types";
 import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show-dialog-domain-toggler";
-import computeDomain from "../../../../common/entity/compute_domain";
 import { AlexaEntity, fetchCloudAlexaEntities } from "../../../../data/alexa";
+// tslint:disable-next-line: no-duplicate-imports
+import { HaSwitch } from "../../../../components/ha-switch";
+
+import computeStateName from "../../../../common/entity/compute_state_name";
+import computeDomain from "../../../../common/entity/compute_domain";
 
 const DEFAULT_CONFIG_EXPOSE = true;
 const IGNORE_INTERFACES = ["Alexa.EndpointHealth"];
@@ -126,14 +130,14 @@ class CloudAlexa extends LitElement {
                 )
                 .join(", ")}
             </state-info>
-            <paper-toggle-button
+            <ha-switch
               .entityId=${entity.entity_id}
               .disabled=${!emptyFilter}
               .checked=${isExposed}
-              @checked-changed=${this._exposeChanged}
+              @change=${this._exposeChanged}
             >
               Expose to Alexa
-            </paper-toggle-button>
+            </ha-switch>
           </div>
         </ha-card>
       `);
@@ -227,9 +231,9 @@ class CloudAlexa extends LitElement {
     fireEvent(this, "hass-more-info", { entityId });
   }
 
-  private async _exposeChanged(ev: PolymerChangedEvent<boolean>) {
+  private async _exposeChanged(ev: Event) {
     const entityId = (ev.currentTarget as any).entityId;
-    const newExposed = ev.detail.value;
+    const newExposed = (ev.target as HaSwitch).checked;
     await this._updateExposed(entityId, newExposed);
   }
 
@@ -328,9 +332,8 @@ class CloudAlexa extends LitElement {
         display: flex;
         flex-wrap: wrap;
         padding: 4px;
-        --paper-toggle-button-label-spacing: 16px;
       }
-      paper-toggle-button {
+      ha-switch {
         clear: both;
       }
       ha-card {
@@ -344,7 +347,7 @@ class CloudAlexa extends LitElement {
       state-info {
         cursor: pointer;
       }
-      paper-toggle-button {
+      ha-switch {
         padding: 8px 0;
       }
 

src/panels/config/cloud/google-assistant/cloud-google-assistant.ts

@@ -7,12 +7,15 @@ import {
   customElement,
   property,
 } from "lit-element";
-import "@polymer/paper-toggle-button";
+import memoizeOne from "memoize-one";
 import "@polymer/paper-icon-button";
+
 import "../../../../layouts/hass-subpage";
 import "../../../../layouts/hass-loading-screen";
 import "../../../../components/ha-card";
 import "../../../../components/entity/state-info";
+import "../../../../components/ha-switch";
+
 import { HomeAssistant } from "../../../../types";
 import {
   CloudStatusLoggedIn,
@@ -21,23 +24,24 @@ import {
   cloudSyncGoogleAssistant,
   GoogleEntityConfig,
 } from "../../../../data/cloud";
-import memoizeOne from "memoize-one";
 import {
   generateFilter,
   isEmptyFilter,
   EntityFilter,
 } from "../../../../common/entity/entity_filter";
 import { compare } from "../../../../common/string/compare";
-import computeStateName from "../../../../common/entity/compute_state_name";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { showToast } from "../../../../util/toast";
-import { PolymerChangedEvent } from "../../../../polymer-types";
 import { showDomainTogglerDialog } from "../../../../dialogs/domain-toggler/show-dialog-domain-toggler";
-import computeDomain from "../../../../common/entity/compute_domain";
 import {
   GoogleEntity,
   fetchCloudGoogleEntities,
 } from "../../../../data/google_assistant";
+// tslint:disable-next-line: no-duplicate-imports
+import { HaSwitch } from "../../../../components/ha-switch";
+
+import computeStateName from "../../../../common/entity/compute_state_name";
+import computeDomain from "../../../../common/entity/compute_domain";
 
 const DEFAULT_CONFIG_EXPOSE = true;
 
@@ -122,23 +126,23 @@ class CloudGoogleAssistant extends LitElement {
                 .map((trait) => trait.substr(trait.lastIndexOf(".") + 1))
                 .join(", ")}
             </state-info>
-            <paper-toggle-button
+            <ha-switch
               .entityId=${entity.entity_id}
               .disabled=${!emptyFilter}
               .checked=${isExposed}
-              @checked-changed=${this._exposeChanged}
+              @change=${this._exposeChanged}
             >
               Expose to Google Assistant
-            </paper-toggle-button>
+            </ha-switch>
             ${entity.might_2fa
               ? html`
-                  <paper-toggle-button
+                  <ha-switch
                     .entityId=${entity.entity_id}
                     .checked=${Boolean(config.disable_2fa)}
-                    @checked-changed=${this._disable2FAChanged}
+                    @change=${this._disable2FAChanged}
                   >
                     Disable two factor authentication
-                  </paper-toggle-button>
+                  </ha-switch>
                 `
               : ""}
           </div>
@@ -234,9 +238,9 @@ class CloudGoogleAssistant extends LitElement {
     fireEvent(this, "hass-more-info", { entityId });
   }
 
-  private async _exposeChanged(ev: PolymerChangedEvent<boolean>) {
+  private async _exposeChanged(ev: Event) {
     const entityId = (ev.currentTarget as any).entityId;
-    const newExposed = ev.detail.value;
+    const newExposed = (ev.target as HaSwitch).checked;
     await this._updateExposed(entityId, newExposed);
   }
 
@@ -251,9 +255,9 @@ class CloudGoogleAssistant extends LitElement {
     this._ensureEntitySync();
   }
 
-  private async _disable2FAChanged(ev: PolymerChangedEvent<boolean>) {
+  private async _disable2FAChanged(ev: Event) {
     const entityId = (ev.currentTarget as any).entityId;
-    const newDisable2FA = ev.detail.value;
+    const newDisable2FA = (ev.target as HaSwitch).checked;
     const curDisable2FA = Boolean(
       (this._entityConfigs[entityId] || {}).disable_2fa
     );
@@ -348,7 +352,6 @@ class CloudGoogleAssistant extends LitElement {
         display: flex;
         flex-wrap: wrap;
         padding: 4px;
-        --paper-toggle-button-label-spacing: 16px;
       }
       ha-card {
         margin: 4px;
@@ -361,7 +364,7 @@ class CloudGoogleAssistant extends LitElement {
       state-info {
         cursor: pointer;
       }
-      paper-toggle-button {
+      ha-switch {
         padding: 8px 0;
       }
 

src/panels/config/entity_registry/dialog-entity-registry-detail.ts

@@ -8,16 +8,19 @@ import {
 } from "lit-element";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "../../../components/dialog/ha-paper-dialog";
+import "../../../components/ha-switch";
 
 import { EntityRegistryDetailDialogParams } from "./show-dialog-entity-registry-detail";
 import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
-import computeDomain from "../../../common/entity/compute_domain";
 import { HassEntity } from "home-assistant-js-websocket";
+// tslint:disable-next-line: no-duplicate-imports
+import { HaSwitch } from "../../../components/ha-switch";
+
+import computeDomain from "../../../common/entity/compute_domain";
 import computeStateName from "../../../common/entity/compute_state_name";
 
 class DialogEntityRegistryDetail extends LitElement {
@@ -95,9 +98,9 @@ class DialogEntityRegistryDetail extends LitElement {
               .disabled=${this._submitting}
             ></paper-input>
             <div class="row">
-              <paper-toggle-button
+              <ha-switch
                 .checked=${!this._disabledBy}
-                @checked-changed=${this._disabledByChanged}
+                @change=${this._disabledByChanged}
               >
                 <div>
                   <div>
@@ -121,7 +124,7 @@ class DialogEntityRegistryDetail extends LitElement {
                     <br />Note: this might not work yet with all integrations.
                   </div>
                 </div>
-              </paper-toggle-button>
+              </ha-switch>
             </div>
           </div>
         </paper-dialog-scrollable>
@@ -190,8 +193,8 @@ class DialogEntityRegistryDetail extends LitElement {
       this._params = undefined;
     }
   }
-  private _disabledByChanged(ev: PolymerChangedEvent<boolean>): void {
+  private _disabledByChanged(ev: Event): void {
-    this._disabledBy = ev.detail.value ? null : "user";
+    this._disabledBy = (ev.target as HaSwitch).checked ? null : "user";
   }
 
   static get styles(): CSSResult[] {

src/panels/lovelace/components/hui-entities-toggle.ts

@@ -8,8 +8,11 @@ import {
   css,
   CSSResult,
 } from "lit-element";
-import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
 
+import "../../../components/ha-switch";
+
+// tslint:disable-next-line: no-duplicate-imports
+import { HaSwitch } from "../../../components/ha-switch";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { turnOnOffEntities } from "../common/entity/turn-on-off-entities";
 import { HomeAssistant } from "../../../types";
@@ -40,14 +43,14 @@ class HuiEntitiesToggle extends LitElement {
     }
 
     return html`
-      <paper-toggle-button
+      <ha-switch
         aria-label="Toggle entities."
         ?checked="${this._toggleEntities!.some((entityId) => {
           const stateObj = this.hass!.states[entityId];
           return stateObj && stateObj.state === "on";
         })}"
         @change="${this._callService}"
-      ></paper-toggle-button>
+      ></ha-switch>
     `;
   }
 
@@ -57,9 +60,7 @@ class HuiEntitiesToggle extends LitElement {
         width: 38px;
         display: block;
       }
-      paper-toggle-button {
+      ha-switch {
-        cursor: pointer;
-        --paper-toggle-button-label-spacing: 0;
         padding: 13px 5px;
         margin: -4px -5px;
       }
@@ -68,7 +69,7 @@ class HuiEntitiesToggle extends LitElement {
 
   private _callService(ev: MouseEvent): void {
     forwardHaptic("light");
-    const turnOn = (ev.target as PaperToggleButtonElement).checked;
+    const turnOn = (ev.target as HaSwitch).checked;
     turnOnOffEntities(this.hass!, this._toggleEntities!, turnOn!);
   }
 }

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

@@ -1,5 +1,3 @@
-import "@polymer/paper-toggle-button/paper-toggle-button";
-
 import { STATES_OFF } from "../../../common/const";
 
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";

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

@@ -2,7 +2,7 @@ import { html } from "lit-element";
 
 export const configElementStyle = html`
   <style>
-    paper-toggle-button {
+    ha-switch {
       padding-top: 16px;
     }
     .side-by-side {

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

@@ -8,13 +8,13 @@ import {
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "../../../../components/entity/state-badge";
 import "../../components/hui-theme-select-editor";
 import "../../components/hui-entity-editor";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon";
+import "../../../../components/ha-switch";
 
 import { processEditorEntities } from "../process-editor-entities";
 import { struct } from "../../common/structs/struct";
@@ -88,11 +88,11 @@ export class HuiEntitiesCardEditor extends LitElement
           .configValue="${"theme"}"
           @theme-changed="${this._valueChanged}"
         ></hui-theme-select-editor>
-        <paper-toggle-button
+        <ha-switch
           ?checked="${this._config!.show_header_toggle !== false}"
           .configValue="${"show_header_toggle"}"
           @change="${this._valueChanged}"
-          >Show Header Toggle?</paper-toggle-button
+          >Show Header Toggle?</ha-switch
         >
       </div>
       <hui-entity-editor

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

@@ -119,17 +119,17 @@ export class HuiEntityButtonCardEditor extends LitElement
           ></paper-input>
         </div>
         <div class="side-by-side">
-          <paper-toggle-button
+          <ha-switch
             ?checked="${this._config!.show_name !== false}"
             .configValue="${"show_name"}"
             @change="${this._valueChanged}"
-            >Show Name?</paper-toggle-button
+            >Show Name?</ha-switch
           >
-          <paper-toggle-button
+          <ha-switch
             ?checked="${this._config!.show_icon !== false}"
             .configValue="${"show_icon"}"
             @change="${this._valueChanged}"
-            >Show Icon?</paper-toggle-button
+            >Show Icon?</ha-switch
           >
         </div>
         <div class="side-by-side">

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

@@ -8,10 +8,10 @@ import {
   CSSResult,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "../../components/hui-theme-select-editor";
 import "../../components/hui-entity-editor";
+import "../../../../components/ha-switch";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
@@ -130,10 +130,10 @@ export class HuiGaugeCardEditor extends LitElement
           ></paper-input>
         </div>
         <div class="side-by-side">
-          <paper-toggle-button
+          <ha-switch
             ?checked="${this._useSeverity !== false}"
             @change="${this._toggleSeverity}"
-            >Define Severity?</paper-toggle-button
+            >Define Severity?</ha-switch
           >
           <div class="severity">
             <paper-input
@@ -176,7 +176,7 @@ export class HuiGaugeCardEditor extends LitElement
         flex: 1 0 30%;
         padding-right: 4px;
       }
-      paper-toggle-button[checked] ~ .severity {
+      ha-switch[checked] ~ .severity {
         display: flex;
       }
     `;

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

@@ -8,13 +8,13 @@ import {
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "../../../../components/entity/state-badge";
 import "../../components/hui-theme-select-editor";
 import "../../components/hui-entity-editor";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon";
+import "../../../../components/ha-switch";
 
 import { struct } from "../../common/structs/struct";
 import { processEditorEntities } from "../process-editor-entities";
@@ -114,23 +114,23 @@ export class HuiGlanceCardEditor extends LitElement
           ></paper-input>
         </div>
         <div class="side-by-side">
-          <paper-toggle-button
+          <ha-switch
             ?checked="${this._show_name !== false}"
             .configValue="${"show_name"}"
             @change="${this._valueChanged}"
-            >Show Name?</paper-toggle-button
+            >Show Name?</ha-switch
           >
-          <paper-toggle-button
+          <ha-switch
             ?checked="${this._show_icon !== false}"
             .configValue="${"show_icon"}"
             @change="${this._valueChanged}"
-            >Show Icon?</paper-toggle-button
+            >Show Icon?</ha-switch
           >
-          <paper-toggle-button
+          <ha-switch
             ?checked="${this._show_state !== false}"
             .configValue="${"show_state"}"
             @change="${this._valueChanged}"
-            >Show State?</paper-toggle-button
+            >Show State?</ha-switch
           >
         </div>
       </div>

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

@@ -105,11 +105,11 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
             @value-changed="${this._valueChanged}"
           ></paper-input>
         </div>
-        <paper-toggle-button
+        <ha-switch
           ?checked="${this._dark_mode !== false}"
           .configValue="${"dark_mode"}"
           @change="${this._valueChanged}"
-          >Dark Mode?</paper-toggle-button
+          >Dark Mode?</ha-switch
         >
         <hui-entity-editor
           .hass="${this.hass}"

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -6,17 +6,17 @@ import {
   property,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import { EditorTarget } from "../types";
 import { HomeAssistant } from "../../../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { configElementStyle } from "../config-elements/config-elements-style";
-
-import "../../components/hui-theme-select-editor";
 import { LovelaceViewConfig } from "../../../../data/lovelace";
 import { slugify } from "../../../../common/string/slugify";
 
+import "../../components/hui-theme-select-editor";
+import "../../../../components/ha-switch";
+
 declare global {
   interface HASSDomEvents {
     "view-config-changed": {
@@ -104,11 +104,11 @@ export class HuiViewEditor extends LitElement {
           .configValue=${"theme"}
           @theme-changed=${this._valueChanged}
         ></hui-theme-select-editor>
-        <paper-toggle-button
+        <ha-switch
           ?checked=${this._panel !== false}
           .configValue=${"panel"}
           @change=${this._valueChanged}
-          >Panel Mode?</paper-toggle-button
+          >Panel Mode?</ha-switch
         >
       </div>
     `;

src/panels/profile/ha-advanced-mode-card.ts

@@ -24,11 +24,11 @@ class AdvancedModeCard extends LitElement {
       <ha-card>
         <div class="card-header">
           <div class="title">Advanced mode</div>
-          <paper-toggle-button
+          <ha-switch
             .checked=${this.coreUserData && this.coreUserData.showAdvanced}
             .disabled=${this.coreUserData === undefined}
             @change=${this._advancedToggled}
-          ></paper-toggle-button>
+          ></ha-switch>
         </div>
         <div class="card-content">
           Home Assistant hides advanced features and options by default. You can

src/panels/profile/ha-force-narrow-row.ts

@@ -5,12 +5,14 @@ import {
   property,
   customElement,
 } from "lit-element";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "./ha-settings-row";
+import "../../components/ha-switch";
+
 import { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
-import { PolymerChangedEvent } from "../../polymer-types";
+// tslint:disable-next-line: no-duplicate-imports
+import { HaSwitch } from "../../components/ha-switch";
 
 @customElement("ha-force-narrow-row")
 class HaPushNotificationsRow extends LitElement {
@@ -26,16 +28,16 @@ class HaPushNotificationsRow extends LitElement {
         <span slot="description">
           ${this.hass.localize("ui.panel.profile.force_narrow.description")}
         </span>
-        <paper-toggle-button
+        <ha-switch
           .checked=${this.hass.dockedSidebar === "always_hidden"}
-          @checked-changed=${this._checkedChanged}
+          @change=${this._checkedChanged}
-        ></paper-toggle-button>
+        ></ha-switch>
       </ha-settings-row>
     `;
   }
 
-  private async _checkedChanged(ev: PolymerChangedEvent<boolean>) {
+  private async _checkedChanged(ev: Event) {
-    const newValue = ev.detail.value;
+    const newValue = (ev.target as HaSwitch).checked;
     if (newValue === (this.hass.dockedSidebar === "always_hidden")) {
       return;
     }

src/resources/ha-style.ts

@@ -72,7 +72,7 @@ documentContainer.innerHTML = `<custom-style>
         from paper-styles/color.html to here.
       */
 
-      --paper-grey-50: #fafafa; /* default for: --paper-toggle-button-unchecked-button-color */
+      --paper-grey-50: #fafafa; /* default for: --mwc-switch-unchecked-button-color */
       --paper-grey-200: #eeeeee;  /* for ha-date-picker-style */
       --paper-grey-500: #9e9e9e;  /* --label-badge-grey */
 

yarn.lock

@@ -661,6 +661,16 @@
     lit-html "^1.0.0"
     tslib "^1.10.0"
 
+"@material/mwc-switch@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-switch/-/mwc-switch-0.8.0.tgz#5a2afc95e5f65ad077781fe16b6231cf5caddc9b"
+  integrity sha512-q6VWrtOJIOjyl35xo6G2npq0guac0avqUH+gR8TvQXSO0E2+pB+2GX+PhSryVBbFxgJRiVmfRlWBeIzlYtI4mg==
+  dependencies:
+    "@material/mwc-base" "^0.8.0"
+    "@material/mwc-ripple" "^0.8.0"
+    "@material/switch" "^3.0.0"
+    tslib "^1.10.0"
+
 "@material/ripple@^3.0.0", "@material/ripple@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-3.1.0.tgz#5cb581e9a70415c50c8b92ecd8628d5eeae34c74"
@@ -685,6 +695,21 @@
   dependencies:
     "@material/feature-targeting" "^3.1.0"
 
+"@material/switch@^3.0.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@material/switch/-/switch-3.1.0.tgz#6a610b05339ce4d145f7791debb37302b8f2ef70"
+  integrity sha512-DhxFN3aRrShkkiDG1fFLp1TZZCinnkLlCoxhhyCKEdCl+jaCaTl2Ii3SIw2SvN1KwMLHBX33jIzm+odOLsz7/Q==
+  dependencies:
+    "@material/animation" "^3.1.0"
+    "@material/base" "^3.1.0"
+    "@material/dom" "^3.1.0"
+    "@material/elevation" "^3.1.0"
+    "@material/feature-targeting" "^3.1.0"
+    "@material/ripple" "^3.1.0"
+    "@material/rtl" "^3.1.0"
+    "@material/theme" "^3.1.0"
+    tslib "^1.9.3"
+
 "@material/theme@^3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@material/theme/-/theme-3.1.0.tgz#d31147bbc9e20bdaa3e322c9e898e4fc98807d8c"
@@ -1222,16 +1247,6 @@
     "@polymer/iron-overlay-behavior" "^3.0.0-pre.27"
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/paper-toggle-button@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@polymer/paper-toggle-button/-/paper-toggle-button-3.0.1.tgz#7d855420f0df96e7f812a9f1bdcfbc5ab082e819"
-  integrity sha512-jadZB60fycT7YnSAH0H23LYo6/2HYmMZTtNr9LpdSIRFPLX6mqqxewex92cFz019bMKaRJgORn308hRlJo2u6A==
-  dependencies:
-    "@polymer/iron-checked-element-behavior" "^3.0.0-pre.26"
-    "@polymer/paper-behaviors" "^3.0.0-pre.27"
-    "@polymer/paper-styles" "^3.0.0-pre.26"
-    "@polymer/polymer" "^3.0.0"
-
 "@polymer/paper-tooltip@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@polymer/paper-tooltip/-/paper-tooltip-3.0.1.tgz#cdbb06442737513f081437c6302842170ce714dc"