Update paper-radio-button to 0.5.4.

The latest <paper-radio-button> matches the Material Design spec. The
MD-Settings page will make use of the cr-checkbox which wraps a paper-checkbox which extends paper-radio-button.

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

BUG=457513

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

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

third_party/polymer/bower.json

@@ -55,7 +55,7 @@
     "paper-input": "Polymer/paper-input#0.5.2",
     "paper-item": "Polymer/paper-item#0.5.2",
     "paper-progress": "Polymer/paper-progress#0.5.2",
-    "paper-radio-button": "Polymer/paper-radio-button#0.5.2",
+    "paper-radio-button": "Polymer/paper-radio-button#0.5.4",
     "paper-radio-group": "Polymer/paper-radio-group#0.5.2",
     "paper-ripple": "Polymer/paper-ripple#0.5.2",
     "paper-shadow": "Polymer/paper-shadow#0.5.2",

third_party/polymer/components-chromium/paper-radio-button/.bower.json

@@ -2,21 +2,21 @@
   "name": "paper-radio-button",
   "private": true,
   "dependencies": {
-    "core-a11y-keys": "Polymer/core-a11y-keys#^0.5.0",
-    "paper-ripple": "Polymer/paper-ripple#^0.5.0"
+    "core-a11y-keys": "Polymer/core-a11y-keys#^0.5",
+    "paper-ripple": "Polymer/paper-ripple#^0.5"
   },
   "ignore": [
     "externs/**"
   ],
-  "version": "0.5.2",
+  "version": "0.5.4",
   "homepage": "https://github.com/Polymer/paper-radio-button",
-  "_release": "0.5.2",
+  "_release": "0.5.4",
   "_resolution": {
     "type": "version",
-    "tag": "0.5.2",
-    "commit": "2006c13a5577a2c4a3eb7823f84cc894d1a3c259"
+    "tag": "0.5.4",
+    "commit": "e9a1003678d4c66d24521bfe776a52807c69b0a1"
   },
   "_source": "git://github.com/Polymer/paper-radio-button.git",
-  "_target": "0.5.2",
+  "_target": "0.5.4",
   "_originalSource": "Polymer/paper-radio-button"
 }
\ No newline at end of file

third_party/polymer/components-chromium/paper-radio-button/bower.json

@@ -2,11 +2,11 @@
   "name": "paper-radio-button",
   "private": true,
   "dependencies": {
-    "core-a11y-keys": "Polymer/core-a11y-keys#^0.5.0",
-    "paper-ripple": "Polymer/paper-ripple#^0.5.0"
+    "core-a11y-keys": "Polymer/core-a11y-keys#^0.5",
+    "paper-ripple": "Polymer/paper-ripple#^0.5"
   },
   "ignore": [
     "externs/**"
   ],
-  "version": "0.5.2"
+  "version": "0.5.4"
 }
\ No newline at end of file

third_party/polymer/components-chromium/paper-radio-button/demo.html

@@ -25,17 +25,12 @@
     body {
       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
       margin: 0;
-      -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;
     }
     
     .label {
       height: 40px;
-      color: #4285f4;
       font-size: 20px;
     }
     
@@ -50,6 +45,10 @@
     paper-radio-button.blue::shadow #onRadio {
       background-color: #4285f4;
     }
+
+    paper-radio-button[checked].blue::shadow #offRadio {
+      border-color: #4285f4;
+    }
     
   </style>
   
@@ -65,6 +64,16 @@
     <div class="label">Radio button (toggles)</div>
     <paper-radio-button toggles></paper-radio-button>
   </section>
+
+  <section>
+    <div class="label">Radio button (disabled)</div>
+    <paper-radio-button disabled toggles></paper-radio-button>
+  </section>
+
+  <section>
+    <div class="label">Radio button (checked, disabled)</div>
+    <paper-radio-button checked disabled toggles></paper-radio-button>
+  </section>
   
   <section>
     <div class="label">Radio button (toggles, Blue)</div>

third_party/polymer/components-chromium/paper-radio-button/paper-radio-button-extracted.js

@@ -74,8 +74,7 @@
     },
     
     checkedChanged: function() {
-      this.$.onRadio.classList.toggle('fill', this.checked);
-      this.setAttribute('aria-checked', this.checked ? 'true': 'false');
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
       this.fire('core-change');
     },
     

third_party/polymer/components-chromium/paper-radio-button/paper-radio-button.css

@@ -50,25 +50,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   border-radius: 50%;
   border: solid 2px;
   border-color: #5a5a5a;
+  transition: border-color 0.28s;
+}
+
+:host([checked]) #offRadio {
+  border-color: #009688;
 }
 
 #onRadio {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 16px;
-  height: 16px;
+  top: 4px;
+  left: 4px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
-  background-color: #0f9d58;
+  background-color: #009688;
   -webkit-transform: scale(0);
   transform: scale(0);
   transition: -webkit-transform ease 0.28s;
   transition: transform ease 0.28s;
 }
 
-#onRadio.fill {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
+:host([checked]) #onRadio {
+  -webkit-transform: scale(1);
+  transform: scale(1);
 }
 
 #radioLabel {
@@ -89,16 +94,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   pointer-events: none;
 }
 
+:host([disabled]) #offRadio,
 :host([disabled]) #onRadio {
-  display: none;
+  opacity: 0.33;
 }
 
 :host([disabled]) #offRadio {
-  opacity: 0.33;
   border-color: #5a5a5a;
 }
 
-:host([disabled][checked]) #offRadio {
-  opacity: 0.33;
+:host([disabled][checked]) #onRadio {
   background-color: #5a5a5a;
 }

third_party/polymer/components-chromium/paper-radio-button/paper-radio-button.html

@@ -30,7 +30,11 @@ To change the radio checked color:
     paper-radio-button::shadow #onRadio {
       background-color: #4285f4;
     }
-    
+
+    paper-radio-button[checked]::shadow #offRadio {
+      border-color: #4285f4;
+    }
+
 To change the ink color for unchecked state:
 
     paper-radio-button::shadow #ink {

third_party/polymer/components/paper-radio-button/.bower.json

@@ -2,21 +2,21 @@
   "name": "paper-radio-button",
   "private": true,
   "dependencies": {
-    "core-a11y-keys": "Polymer/core-a11y-keys#^0.5.0",
-    "paper-ripple": "Polymer/paper-ripple#^0.5.0"
+    "core-a11y-keys": "Polymer/core-a11y-keys#^0.5",
+    "paper-ripple": "Polymer/paper-ripple#^0.5"
   },
   "ignore": [
     "externs/**"
   ],
-  "version": "0.5.2",
+  "version": "0.5.4",
   "homepage": "https://github.com/Polymer/paper-radio-button",
-  "_release": "0.5.2",
+  "_release": "0.5.4",
   "_resolution": {
     "type": "version",
-    "tag": "0.5.2",
-    "commit": "2006c13a5577a2c4a3eb7823f84cc894d1a3c259"
+    "tag": "0.5.4",
+    "commit": "e9a1003678d4c66d24521bfe776a52807c69b0a1"
   },
   "_source": "git://github.com/Polymer/paper-radio-button.git",
-  "_target": "0.5.2",
+  "_target": "0.5.4",
   "_originalSource": "Polymer/paper-radio-button"
 }
\ No newline at end of file

third_party/polymer/components/paper-radio-button/bower.json

@@ -2,11 +2,11 @@
   "name": "paper-radio-button",
   "private": true,
   "dependencies": {
-    "core-a11y-keys": "Polymer/core-a11y-keys#^0.5.0",
-    "paper-ripple": "Polymer/paper-ripple#^0.5.0"
+    "core-a11y-keys": "Polymer/core-a11y-keys#^0.5",
+    "paper-ripple": "Polymer/paper-ripple#^0.5"
   },
   "ignore": [
     "externs/**"
   ],
-  "version": "0.5.2"
+  "version": "0.5.4"
 }
\ No newline at end of file

third_party/polymer/components/paper-radio-button/demo.html

@@ -25,17 +25,12 @@
     body {
       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
       margin: 0;
-      -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;
     }
     
     .label {
       height: 40px;
-      color: #4285f4;
       font-size: 20px;
     }
     
@@ -50,6 +45,10 @@
     paper-radio-button.blue::shadow #onRadio {
       background-color: #4285f4;
     }
+
+    paper-radio-button[checked].blue::shadow #offRadio {
+      border-color: #4285f4;
+    }
     
   </style>
   
@@ -65,6 +64,16 @@
     <div class="label">Radio button (toggles)</div>
     <paper-radio-button toggles></paper-radio-button>
   </section>
+
+  <section>
+    <div class="label">Radio button (disabled)</div>
+    <paper-radio-button disabled toggles></paper-radio-button>
+  </section>
+
+  <section>
+    <div class="label">Radio button (checked, disabled)</div>
+    <paper-radio-button checked disabled toggles></paper-radio-button>
+  </section>
   
   <section>
     <div class="label">Radio button (toggles, Blue)</div>

third_party/polymer/components/paper-radio-button/paper-radio-button.css

@@ -50,25 +50,30 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   border-radius: 50%;
   border: solid 2px;
   border-color: #5a5a5a;
+  transition: border-color 0.28s;
+}
+
+:host([checked]) #offRadio {
+  border-color: #009688;
 }
 
 #onRadio {
   position: absolute;
-  top: 0;
-  left: 0;
-  width: 16px;
-  height: 16px;
+  top: 4px;
+  left: 4px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
-  background-color: #0f9d58;
+  background-color: #009688;
   -webkit-transform: scale(0);
   transform: scale(0);
   transition: -webkit-transform ease 0.28s;
   transition: transform ease 0.28s;
 }
 
-#onRadio.fill {
-  -webkit-transform: scale(1.1);
-  transform: scale(1.1);
+:host([checked]) #onRadio {
+  -webkit-transform: scale(1);
+  transform: scale(1);
 }
 
 #radioLabel {
@@ -89,16 +94,15 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   pointer-events: none;
 }
 
+:host([disabled]) #offRadio,
 :host([disabled]) #onRadio {
-  display: none;
+  opacity: 0.33;
 }
 
 :host([disabled]) #offRadio {
-  opacity: 0.33;
   border-color: #5a5a5a;
 }
 
-:host([disabled][checked]) #offRadio {
-  opacity: 0.33;
+:host([disabled][checked]) #onRadio {
   background-color: #5a5a5a;
 }

third_party/polymer/components/paper-radio-button/paper-radio-button.html

@@ -32,7 +32,11 @@ To change the radio checked color:
     paper-radio-button::shadow #onRadio {
       background-color: #4285f4;
     }
-    
+
+    paper-radio-button[checked]::shadow #offRadio {
+      border-color: #4285f4;
+    }
+
 To change the ink color for unchecked state:
 
     paper-radio-button::shadow #ink {
@@ -148,8 +152,7 @@ To change the radio unchecked color:
     },
     
     checkedChanged: function() {
-      this.$.onRadio.classList.toggle('fill', this.checked);
-      this.setAttribute('aria-checked', this.checked ? 'true': 'false');
+      this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
       this.fire('core-change');
     },