Update paper-toggle-button to 0.5.4

The latest <paper-toggle-button> matches the Material Design spec. The
MD-Settings page will make use of this button in a follow-up CL.

Since paper-toggle-button isn't currently used in Chromium there shouldn't
be any side effects for this change.

R=rsadam@chromium.org

Review URL: https://codereview.chromium.org/899383002

Cr-Commit-Position: refs/heads/master@{#315078}

13 files changed, 339 insertions, 192 deletions

diff --git a/third_party/polymer/README.chromium b/third_party/polymer/README.chromium
index d9e89a9..70422b1 100644
--- a/third_party/polymer/README.chromium
+++ b/third_party/polymer/README.chromium
@@ -1,7 +1,7 @@
 Name: Polymer
 Short Name: polymer
 URL: http://www.polymer-project.org
-Version: 0.5.2
+Version: 0.5.2-4
 Revision: (See components/<component>/.bower.json)
 License: BSD
 License File: LICENSE.polymer
diff --git a/third_party/polymer/bower.json b/third_party/polymer/bower.json
index 65a1f33..16d9743 100644
--- a/third_party/polymer/bower.json
+++ b/third_party/polymer/bower.json
@@ -63,6 +63,6 @@
     "paper-spinner": "Polymer/paper-spinner#0.5.2",
     "paper-tabs": "Polymer/paper-tabs#0.5.2",
     "paper-toast": "Polymer/paper-toast#0.5.2",
-    "paper-toggle-button": "Polymer/paper-toggle-button#0.5.2"
+    "paper-toggle-button": "Polymer/paper-toggle-button#0.5.4"
   }
 }
diff --git a/third_party/polymer/components-chromium/paper-toggle-button/.bower.json b/third_party/polymer/components-chromium/paper-toggle-button/.bower.json
index d56df55..5561f5e 100644
--- a/third_party/polymer/components-chromium/paper-toggle-button/.bower.json
+++ b/third_party/polymer/components-chromium/paper-toggle-button/.bower.json
@@ -2,18 +2,18 @@
   "name": "paper-toggle-button",
   "private": true,
   "dependencies": {
-    "font-roboto": "Polymer/font-roboto#^0.5.0",
-    "paper-radio-button": "Polymer/paper-radio-button#^0.5.0"
+    "font-roboto": "Polymer/font-roboto#^0.5",
+    "paper-radio-button": "Polymer/paper-radio-button#^0.5"
   },
-  "version": "0.5.2",
+  "version": "0.5.4",
   "homepage": "https://github.com/Polymer/paper-toggle-button",
-  "_release": "0.5.2",
+  "_release": "0.5.4",
   "_resolution": {
     "type": "version",
-    "tag": "0.5.2",
-    "commit": "3fd4732c10180252a54d0199a4c15fafd220523a"
+    "tag": "0.5.4",
+    "commit": "b4cc158803ac87b1571f8c07c0d862ec89b10786"
   },
   "_source": "git://github.com/Polymer/paper-toggle-button.git",
-  "_target": "0.5.2",
+  "_target": "0.5.4",
   "_originalSource": "Polymer/paper-toggle-button"
 }
\ No newline at end of file
diff --git a/third_party/polymer/components-chromium/paper-toggle-button/bower.json b/third_party/polymer/components-chromium/paper-toggle-button/bower.json
index 11c9322..8c30db1 100644
--- a/third_party/polymer/components-chromium/paper-toggle-button/bower.json
+++ b/third_party/polymer/components-chromium/paper-toggle-button/bower.json
@@ -2,8 +2,8 @@
   "name": "paper-toggle-button",
   "private": true,
   "dependencies": {
-    "font-roboto": "Polymer/font-roboto#^0.5.0",
-    "paper-radio-button": "Polymer/paper-radio-button#^0.5.0"
+    "font-roboto": "Polymer/font-roboto#^0.5",
+    "paper-radio-button": "Polymer/paper-radio-button#^0.5"
   },
-  "version": "0.5.2"
+  "version": "0.5.4"
 }
\ No newline at end of file
diff --git a/third_party/polymer/components-chromium/paper-toggle-button/demo.html b/third_party/polymer/components-chromium/paper-toggle-button/demo.html
index 960ac56..370280b 100644
--- a/third_party/polymer/components-chromium/paper-toggle-button/demo.html
+++ b/third_party/polymer/components-chromium/paper-toggle-button/demo.html
@@ -27,10 +27,6 @@
       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
       margin: 0;
       padding: 24px;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
       -webkit-tap-highlight-color: rgba(0,0,0,0);
       -webkit-touch-callout: none;
     }
@@ -38,17 +34,25 @@
     section {
       width: 200px;
     }
-    
-    paper-toggle-button.blue::shadow paper-radio-button::shadow #ink[checked] {
+
+    paper-toggle-button.bluetooth::shadow [checked] .toggle-ink {
       color: #4285f4;
     }
-    
-    paper-toggle-button.blue::shadow paper-radio-button::shadow #onRadio {
+
+    paper-toggle-button.bluetooth::shadow [checked] .toggle {
       background-color: #4285f4;
     }
     
-    paper-toggle-button.blue::shadow #toggleBar[checked] {
-      background-color: #4285f4;
+    paper-toggle-button.fun::shadow .toggle-ink {
+      color: #009688;
+    }
+
+    paper-toggle-button.fun::shadow .toggle-bar {
+      background-color: #5677fc;
+    }
+
+    paper-toggle-button.fun::shadow .toggle-button {
+      background-color: #9c27b0;
     }
     
   </style>
@@ -68,7 +72,23 @@
     
     <div center horizontal layout>
       <div flex>Bluetooth</div>
-      <paper-toggle-button class="blue"></paper-toggle-button>
+      <paper-toggle-button class="bluetooth"></paper-toggle-button>
+    </div>
+    
+    <br>
+    <br>
+  
+    <div center horizontal layout>
+      <div flex>Custom Colors</div>
+      <paper-toggle-button class="fun"></paper-toggle-button>
+    </div>
+    
+    <br>
+    <br>
+    
+    <div center horizontal layout>
+      <div flex>Disabled</div>
+      <paper-toggle-button disabled></paper-toggle-button>
     </div>
     
   </section>
diff --git a/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button-extracted.js b/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button-extracted.js
index 7b006be..72d672e 100644
--- a/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button-extracted.js
+++ b/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button-extracted.js
@@ -22,7 +22,7 @@
      * @default false
      */
     checked: false,
-    
+
     /**
      * If true, the toggle button is disabled.  A disabled toggle button cannot
      * be tapped or dragged to change the checked state.
@@ -33,23 +33,55 @@
      */
     disabled: false,
 
+    eventDelegates: {
+      down: 'downAction',
+      up: 'upAction',
+      tap: 'tap',
+      trackstart: 'trackStart',
+      trackx: 'trackx',
+      trackend: 'trackEnd'
+    },
+
+    downAction: function(e) {
+      var rect = this.$.ink.getBoundingClientRect();
+      this.$.ink.downAction({
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2
+      });
+    },
+
+    upAction: function(e) {
+      this.$.ink.upAction();
+    },
+
+    tap: function() {
+      if (this.disabled) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.fire('change');
+    },
+
     trackStart: function(e) {
-      this._w = this.$.toggleBar.offsetLeft + this.$.toggleBar.offsetWidth;
+      if (this.disabled) {
+        return;
+      }
+      this._w = this.$.toggleBar.offsetWidth / 2;
       e.preventTap();
     },
 
     trackx: function(e) {
       this._x = Math.min(this._w, 
           Math.max(0, this.checked ? this._w + e.dx : e.dx));
-      this.$.toggleRadio.classList.add('dragging');
-      var s =  this.$.toggleRadio.style;
+      this.$.toggleButton.classList.add('dragging');
+      var s =  this.$.toggleButton.style;
       s.webkitTransform = s.transform = 'translate3d(' + this._x + 'px,0,0)';
     },
 
     trackEnd: function() {
-      var s =  this.$.toggleRadio.style;
+      var s =  this.$.toggleButton.style;
       s.transform = s.webkitTransform = '';
-      this.$.toggleRadio.classList.remove('dragging');
+      this.$.toggleButton.classList.remove('dragging');
       var old = this.checked;
       this.checked = Math.abs(this._x) > this._w / 2;
       if (this.checked !== old) {
@@ -60,15 +92,6 @@
     checkedChanged: function() {
       this.setAttribute('aria-pressed', Boolean(this.checked));
       this.fire('core-change');
-    },
-    
-    changeAction: function(e) {
-      e.stopPropagation();
-      this.fire('change');
-    },
-    
-    stopPropagation: function(e) {
-      e.stopPropagation();
     }
 
   });
diff --git a/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.css b/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.css
index 67e8930..5ffe045 100644
--- a/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.css
+++ b/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.css
@@ -15,53 +15,81 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   outline: none;
 }
 
-#toggleContainer {
-  position: relative;
-  width: 64px;
-  height: 16px;
+/* Class selectors can be overridden by users. */
+
+.toggle-bar {
+  background-color: #000000;
 }
 
-#toggleBar {
-  position: absolute;
-  top: 8px;
-  left: 16px;
-  height: 1px;
-  width: 32px;
-  background-color: #5a5a5a;
-  pointer-events: none;
+.toggle-button {
+  background-color: #f1f1f1;
 }
 
-#toggleBar[checked] {
+[checked] .toggle {
   background-color: #0f9d58;
 }
 
-#toggleContainer[checked] #checkedBar {
-  width: 100%;
+.toggle-ink {
+  color: #bbb;
+}
+
+[checked] .toggle-ink {
+  color: #0f9d58;
+}
+
+/* ID selectors should not be overriden by users. */
+
+#toggleContainer {
+  position: relative;
+  width: 36px;
+  height: 14px;
+}
+
+#toggleContainer[disabled] {
+  opacity: 0.3;
+  pointer-events: none;
 }
 
-#toggleRadio {
+#toggleBar {
   position: absolute;
-  left: 0;
-  padding: 8px 48px 8px 0;
-  margin: -8px -48px -8px 0;
-  transition: -webkit-transform linear .08s;
-  transition: transform linear .08s;
+  height: 100%;
+  width: 100%;
+  border-radius: 8px;
+  pointer-events: none;
+  opacity: 0.26;
+  transition: background-color linear .08s;
 }
 
-#toggleRadio[checked] {
-  -webkit-transform: translate(48px, 0);
-  transform: translate(48px, 0);
-  padding: 8px 0 8px 48px;
-  margin: -8px 0 -8px -48px;
+[checked] #toggleBar {
+  opacity: 0.5;
 }
 
-#toggleRadio.dragging {
+#toggleButton {
+  position: absolute;
+  top: -3px;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
+  transition: -webkit-transform linear .08s, background-color linear .08s;
+  transition: transform linear .08s, background-color linear .08s;
+}
+
+#toggleButton.dragging {
   -webkit-transition: none;
   transition: none;
 }
 
-/* disabled state */
-#toggleContainer[disabled] {
-  opacity: 0.3;
+[checked] #toggleButton {
+  -webkit-transform: translate(16px, 0);
+  transform: translate(16px, 0);
+}
+
+#ink {
+  position: absolute;
+  top: -14px;
+  left: -14px;
+  width: 48px;
+  height: 48px;
   pointer-events: none;
 }
diff --git a/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.html b/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.html
index a6323ee..8140724 100644
--- a/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.html
+++ b/third_party/polymer/components-chromium/paper-toggle-button/paper-toggle-button.html
@@ -15,61 +15,64 @@ Example:
 
 Styling toggle button:
 
-To change the ink color for checked state:
+To change the toggle color:
 
-    paper-toggle-button::shadow paper-radio-button::shadow #ink[checked] {
-      color: #4285f4;
+    paper-toggle-button::shadow .toggle {
+      background-color: #9c27b0;
     }
+
+To change the ink color:
     
-To change the radio checked color:
-    
-    paper-toggle-button::shadow paper-radio-button::shadow #onRadio {
-      background-color: #4285f4;
+    paper-toggle-button::shadow .toggle-ink {
+      color: #009688;
     }
-    
-To change the bar color for checked state:
 
-    paper-toggle-button::shadow #toggleBar[checked] {
+To change the checked toggle color:
+
+    paper-toggle-button::shadow [checked] .toggle {
       background-color: #4285f4;
     }
-    
-To change the ink color for unchecked state:
 
-    paper-toggle-button::shadow paper-radio-button::shadow #ink {
-      color: #b5b5b5;
-    }
-    
-To change the radio unchecked color:
-    
-    paper-toggle-button::shadow paper-radio-button::shadow #offRadio {
-      border-color: #b5b5b5;
+To change the checked ink color:
+
+    paper-toggle-button::shadow [checked] .toggle-ink {
+      color: #4285f4;
     }
 
-To change the bar color for unchecked state:
+To change the toggle bar and toggle button colors separately:
 
-    paper-toggle-button::shadow #toggleBar {
-      background-color: red;
+    paper-toggle-button::shadow .toggle-bar {
+      background-color: #5677fc;
+    }
+
+    paper-toggle-button::shadow .toggle-button {
+      background-color: #9c27b0;
     }
 
 @group Paper Elements
 @element paper-toggle-button
 @homepage github.io
 --><html><head><link rel="import" href="../paper-radio-button/paper-radio-button.html">
+<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
 
 </head><body><polymer-element name="paper-toggle-button" attributes="checked disabled" role="button" aria-pressed="false" tabindex="0" assetpath="">
 <template>
 
   <link rel="stylesheet" href="paper-toggle-button.css">
 
-  <div id="toggleContainer" disabled?="{{disabled}}">
-  
-    <div id="toggleBar" checked?="{{checked}}"></div>
+  <core-a11y-keys target="{{}}" keys="space" on-keys-pressed="{{tap}}"></core-a11y-keys>
+
+  <div id="toggleContainer" checked?="{{checked}}" disabled?="{{disabled}}">
   
-    <paper-radio-button id="toggleRadio" toggles="" checked="{{checked}}" on-change="{{changeAction}}" on-core-change="{{stopPropagation}}" on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-radio-button>
-    
+    <div id="toggleBar" class="toggle toggle-bar"></div>
+
+    <div id="toggleButton" class="toggle toggle-button">
+      <paper-ripple id="ink" class="toggle-ink circle"></paper-ripple>
+    </div>
+
   </div>
 
 </template>
 
 </polymer-element>
-<script src="paper-toggle-button-extracted.js"></script></body></html>
\ No newline at end of file
+<script charset="utf-8" src="paper-toggle-button-extracted.js"></script></body></html>
\ No newline at end of file
diff --git a/third_party/polymer/components/paper-toggle-button/.bower.json b/third_party/polymer/components/paper-toggle-button/.bower.json
index d56df55..5561f5e 100644
--- a/third_party/polymer/components/paper-toggle-button/.bower.json
+++ b/third_party/polymer/components/paper-toggle-button/.bower.json
@@ -2,18 +2,18 @@
   "name": "paper-toggle-button",
   "private": true,
   "dependencies": {
-    "font-roboto": "Polymer/font-roboto#^0.5.0",
-    "paper-radio-button": "Polymer/paper-radio-button#^0.5.0"
+    "font-roboto": "Polymer/font-roboto#^0.5",
+    "paper-radio-button": "Polymer/paper-radio-button#^0.5"
   },
-  "version": "0.5.2",
+  "version": "0.5.4",
   "homepage": "https://github.com/Polymer/paper-toggle-button",
-  "_release": "0.5.2",
+  "_release": "0.5.4",
   "_resolution": {
     "type": "version",
-    "tag": "0.5.2",
-    "commit": "3fd4732c10180252a54d0199a4c15fafd220523a"
+    "tag": "0.5.4",
+    "commit": "b4cc158803ac87b1571f8c07c0d862ec89b10786"
   },
   "_source": "git://github.com/Polymer/paper-toggle-button.git",
-  "_target": "0.5.2",
+  "_target": "0.5.4",
   "_originalSource": "Polymer/paper-toggle-button"
 }
\ No newline at end of file
diff --git a/third_party/polymer/components/paper-toggle-button/bower.json b/third_party/polymer/components/paper-toggle-button/bower.json
index 11c9322..8c30db1 100644
--- a/third_party/polymer/components/paper-toggle-button/bower.json
+++ b/third_party/polymer/components/paper-toggle-button/bower.json
@@ -2,8 +2,8 @@
   "name": "paper-toggle-button",
   "private": true,
   "dependencies": {
-    "font-roboto": "Polymer/font-roboto#^0.5.0",
-    "paper-radio-button": "Polymer/paper-radio-button#^0.5.0"
+    "font-roboto": "Polymer/font-roboto#^0.5",
+    "paper-radio-button": "Polymer/paper-radio-button#^0.5"
   },
-  "version": "0.5.2"
+  "version": "0.5.4"
 }
\ No newline at end of file
diff --git a/third_party/polymer/components/paper-toggle-button/demo.html b/third_party/polymer/components/paper-toggle-button/demo.html
index 960ac56..370280b 100644
--- a/third_party/polymer/components/paper-toggle-button/demo.html
+++ b/third_party/polymer/components/paper-toggle-button/demo.html
@@ -27,10 +27,6 @@
       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
       margin: 0;
       padding: 24px;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
-      user-select: none;
       -webkit-tap-highlight-color: rgba(0,0,0,0);
       -webkit-touch-callout: none;
     }
@@ -38,17 +34,25 @@
     section {
       width: 200px;
     }
-    
-    paper-toggle-button.blue::shadow paper-radio-button::shadow #ink[checked] {
+
+    paper-toggle-button.bluetooth::shadow [checked] .toggle-ink {
       color: #4285f4;
     }
-    
-    paper-toggle-button.blue::shadow paper-radio-button::shadow #onRadio {
+
+    paper-toggle-button.bluetooth::shadow [checked] .toggle {
       background-color: #4285f4;
     }
     
-    paper-toggle-button.blue::shadow #toggleBar[checked] {
-      background-color: #4285f4;
+    paper-toggle-button.fun::shadow .toggle-ink {
+      color: #009688;
+    }
+
+    paper-toggle-button.fun::shadow .toggle-bar {
+      background-color: #5677fc;
+    }
+
+    paper-toggle-button.fun::shadow .toggle-button {
+      background-color: #9c27b0;
     }
     
   </style>
@@ -68,7 +72,23 @@
     
     <div center horizontal layout>
       <div flex>Bluetooth</div>
-      <paper-toggle-button class="blue"></paper-toggle-button>
+      <paper-toggle-button class="bluetooth"></paper-toggle-button>
+    </div>
+    
+    <br>
+    <br>
+  
+    <div center horizontal layout>
+      <div flex>Custom Colors</div>
+      <paper-toggle-button class="fun"></paper-toggle-button>
+    </div>
+    
+    <br>
+    <br>
+    
+    <div center horizontal layout>
+      <div flex>Disabled</div>
+      <paper-toggle-button disabled></paper-toggle-button>
     </div>
     
   </section>
diff --git a/third_party/polymer/components/paper-toggle-button/paper-toggle-button.css b/third_party/polymer/components/paper-toggle-button/paper-toggle-button.css
index 67e8930..5ffe045 100644
--- a/third_party/polymer/components/paper-toggle-button/paper-toggle-button.css
+++ b/third_party/polymer/components/paper-toggle-button/paper-toggle-button.css
@@ -15,53 +15,81 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   outline: none;
 }
 
-#toggleContainer {
-  position: relative;
-  width: 64px;
-  height: 16px;
+/* Class selectors can be overridden by users. */
+
+.toggle-bar {
+  background-color: #000000;
 }
 
-#toggleBar {
-  position: absolute;
-  top: 8px;
-  left: 16px;
-  height: 1px;
-  width: 32px;
-  background-color: #5a5a5a;
-  pointer-events: none;
+.toggle-button {
+  background-color: #f1f1f1;
 }
 
-#toggleBar[checked] {
+[checked] .toggle {
   background-color: #0f9d58;
 }
 
-#toggleContainer[checked] #checkedBar {
-  width: 100%;
+.toggle-ink {
+  color: #bbb;
+}
+
+[checked] .toggle-ink {
+  color: #0f9d58;
+}
+
+/* ID selectors should not be overriden by users. */
+
+#toggleContainer {
+  position: relative;
+  width: 36px;
+  height: 14px;
+}
+
+#toggleContainer[disabled] {
+  opacity: 0.3;
+  pointer-events: none;
 }
 
-#toggleRadio {
+#toggleBar {
   position: absolute;
-  left: 0;
-  padding: 8px 48px 8px 0;
-  margin: -8px -48px -8px 0;
-  transition: -webkit-transform linear .08s;
-  transition: transform linear .08s;
+  height: 100%;
+  width: 100%;
+  border-radius: 8px;
+  pointer-events: none;
+  opacity: 0.26;
+  transition: background-color linear .08s;
 }
 
-#toggleRadio[checked] {
-  -webkit-transform: translate(48px, 0);
-  transform: translate(48px, 0);
-  padding: 8px 0 8px 48px;
-  margin: -8px 0 -8px -48px;
+[checked] #toggleBar {
+  opacity: 0.5;
 }
 
-#toggleRadio.dragging {
+#toggleButton {
+  position: absolute;
+  top: -3px;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.4);
+  transition: -webkit-transform linear .08s, background-color linear .08s;
+  transition: transform linear .08s, background-color linear .08s;
+}
+
+#toggleButton.dragging {
   -webkit-transition: none;
   transition: none;
 }
 
-/* disabled state */
-#toggleContainer[disabled] {
-  opacity: 0.3;
+[checked] #toggleButton {
+  -webkit-transform: translate(16px, 0);
+  transform: translate(16px, 0);
+}
+
+#ink {
+  position: absolute;
+  top: -14px;
+  left: -14px;
+  width: 48px;
+  height: 48px;
   pointer-events: none;
 }
diff --git a/third_party/polymer/components/paper-toggle-button/paper-toggle-button.html b/third_party/polymer/components/paper-toggle-button/paper-toggle-button.html
index d224bd0..a72e2a0 100644
--- a/third_party/polymer/components/paper-toggle-button/paper-toggle-button.html
+++ b/third_party/polymer/components/paper-toggle-button/paper-toggle-button.html
@@ -17,40 +17,38 @@ Example:
 
 Styling toggle button:
 
-To change the ink color for checked state:
+To change the toggle color:
 
-    paper-toggle-button::shadow paper-radio-button::shadow #ink[checked] {
-      color: #4285f4;
+    paper-toggle-button::shadow .toggle {
+      background-color: #9c27b0;
     }
+
+To change the ink color:
     
-To change the radio checked color:
-    
-    paper-toggle-button::shadow paper-radio-button::shadow #onRadio {
-      background-color: #4285f4;
+    paper-toggle-button::shadow .toggle-ink {
+      color: #009688;
     }
-    
-To change the bar color for checked state:
 
-    paper-toggle-button::shadow #toggleBar[checked] {
+To change the checked toggle color:
+
+    paper-toggle-button::shadow [checked] .toggle {
       background-color: #4285f4;
     }
-    
-To change the ink color for unchecked state:
 
-    paper-toggle-button::shadow paper-radio-button::shadow #ink {
-      color: #b5b5b5;
-    }
-    
-To change the radio unchecked color:
-    
-    paper-toggle-button::shadow paper-radio-button::shadow #offRadio {
-      border-color: #b5b5b5;
+To change the checked ink color:
+
+    paper-toggle-button::shadow [checked] .toggle-ink {
+      color: #4285f4;
     }
 
-To change the bar color for unchecked state:
+To change the toggle bar and toggle button colors separately:
 
-    paper-toggle-button::shadow #toggleBar {
-      background-color: red;
+    paper-toggle-button::shadow .toggle-bar {
+      background-color: #5677fc;
+    }
+
+    paper-toggle-button::shadow .toggle-button {
+      background-color: #9c27b0;
     }
 
 @group Paper Elements
@@ -59,19 +57,23 @@ To change the bar color for unchecked state:
 -->
 
 <link rel="import" href="../paper-radio-button/paper-radio-button.html">
+<link rel="import" href="../core-a11y-keys/core-a11y-keys.html">
 
 <polymer-element name="paper-toggle-button" attributes="checked disabled" role="button" aria-pressed="false" tabindex="0">
 <template>
 
   <link rel="stylesheet" href="paper-toggle-button.css">
 
-  <div id="toggleContainer" disabled?="{{disabled}}">
-  
-    <div id="toggleBar" checked?="{{checked}}"></div>
+  <core-a11y-keys target="{{}}" keys="space" on-keys-pressed="{{tap}}"></core-a11y-keys>
+
+  <div id="toggleContainer" checked?="{{checked}}" disabled?="{{disabled}}">
   
-    <paper-radio-button id="toggleRadio" toggles checked="{{checked}}" on-change="{{changeAction}}" on-core-change="{{stopPropagation}}"
-        on-trackstart="{{trackStart}}" on-trackx="{{trackx}}" on-trackend="{{trackEnd}}"></paper-radio-button>
-    
+    <div id="toggleBar" class="toggle toggle-bar"></div>
+
+    <div id="toggleButton" class="toggle toggle-button">
+      <paper-ripple id="ink" class="toggle-ink circle"></paper-ripple>
+    </div>
+
   </div>
 
 </template>
@@ -99,7 +101,7 @@ To change the bar color for unchecked state:
      * @default false
      */
     checked: false,
-    
+
     /**
      * If true, the toggle button is disabled.  A disabled toggle button cannot
      * be tapped or dragged to change the checked state.
@@ -110,23 +112,55 @@ To change the bar color for unchecked state:
      */
     disabled: false,
 
+    eventDelegates: {
+      down: 'downAction',
+      up: 'upAction',
+      tap: 'tap',
+      trackstart: 'trackStart',
+      trackx: 'trackx',
+      trackend: 'trackEnd'
+    },
+
+    downAction: function(e) {
+      var rect = this.$.ink.getBoundingClientRect();
+      this.$.ink.downAction({
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2
+      });
+    },
+
+    upAction: function(e) {
+      this.$.ink.upAction();
+    },
+
+    tap: function() {
+      if (this.disabled) {
+        return;
+      }
+      this.checked = !this.checked;
+      this.fire('change');
+    },
+
     trackStart: function(e) {
-      this._w = this.$.toggleBar.offsetLeft + this.$.toggleBar.offsetWidth;
+      if (this.disabled) {
+        return;
+      }
+      this._w = this.$.toggleBar.offsetWidth / 2;
       e.preventTap();
     },
 
     trackx: function(e) {
       this._x = Math.min(this._w, 
           Math.max(0, this.checked ? this._w + e.dx : e.dx));
-      this.$.toggleRadio.classList.add('dragging');
-      var s =  this.$.toggleRadio.style;
+      this.$.toggleButton.classList.add('dragging');
+      var s =  this.$.toggleButton.style;
       s.webkitTransform = s.transform = 'translate3d(' + this._x + 'px,0,0)';
     },
 
     trackEnd: function() {
-      var s =  this.$.toggleRadio.style;
+      var s =  this.$.toggleButton.style;
       s.transform = s.webkitTransform = '';
-      this.$.toggleRadio.classList.remove('dragging');
+      this.$.toggleButton.classList.remove('dragging');
       var old = this.checked;
       this.checked = Math.abs(this._x) > this._w / 2;
       if (this.checked !== old) {
@@ -137,15 +171,6 @@ To change the bar color for unchecked state:
     checkedChanged: function() {
       this.setAttribute('aria-pressed', Boolean(this.checked));
       this.fire('core-change');
-    },
-    
-    changeAction: function(e) {
-      e.stopPropagation();
-      this.fire('change');
-    },
-    
-    stopPropagation: function(e) {
-      e.stopPropagation();
     }
 
   });