Added Polymer 0.5.4

polymer_0.5.4/bower_components/paper-button/paper-button-base.html

 <!--
 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 
 <!--
 @group Paper Elements
 
 `paper-button-base` is the base class for button-like elements with ripple and optional shadow.
 
 @element paper-button-base
-@mixins Polymer.CoreFocusable
+@mixins Polymer.CoreFocusable https://github.com/polymer/core-focusable
 @status unstable
 -->
 
 <link href="../polymer/polymer.html" rel="import">
 <link href="../core-focusable/core-focusable.html" rel="import">
 <link href="../paper-ripple/paper-ripple.html" rel="import">
 
 <polymer-element name="paper-button-base" tabindex="0">
 
 <script>
 
   (function() {
 
     var p = {
 
       eventDelegates: {
-        down: 'downAction'
+        down: 'downAction',
+        up: 'upAction'
+      },
+
+      toggleBackground: function() {
+        if (this.active) {
+
+          if (!this.$.bg) {
+            var bg = document.createElement('div');
+            bg.setAttribute('id', 'bg');
+            bg.setAttribute('fit', '');
+            bg.style.opacity = 0.25;
+            this.$.bg = bg;
+            this.shadowRoot.insertBefore(bg, this.shadowRoot.firstChild);
+          }
+          this.$.bg.style.backgroundColor = getComputedStyle(this).color;
+
+        } else {
+
+          if (this.$.bg) {
+            this.$.bg.style.backgroundColor = '';
+          }
+        }
       },
 
       activeChanged: function() {
         this.super();
 
-        if (this.$.ripple) {
-          if (this.active) {
-            // FIXME: remove when paper-ripple can have a default 'down' state.
-            if (!this.lastEvent) {
-              var rect = this.getBoundingClientRect();
-              this.lastEvent = {
-                x: rect.left + rect.width / 2,
-                y: rect.top + rect.height / 2
-              }
-            }
+        if (this.toggle && (!this.lastEvent || this.matches(':host-context([noink])'))) {
+          this.toggleBackground();
+        }
+      },
+
+      pressedChanged: function() {
+        this.super();
+
+        if (!this.lastEvent) {
+          return;
+        }
+
+        if (this.$.ripple && !this.hasAttribute('noink')) {
+          if (this.pressed) {
             this.$.ripple.downAction(this.lastEvent);
           } else {
             this.$.ripple.upAction();
           }
         }
 
         this.adjustZ();
       },
 
+      focusedChanged: function() {
+        this.adjustZ();
+      },
+
       disabledChanged: function() {
         this._disabledChanged();
         this.adjustZ();
       },
 
       recenteringTouchChanged: function() {
         if (this.$.ripple) {
           this.$.ripple.classList.toggle('recenteringTouch', this.recenteringTouch);
         }
       },
 
       fillChanged: function() {
         if (this.$.ripple) {
           this.$.ripple.classList.toggle('fill', this.fill);
         }
       },
 
       adjustZ: function() {
         if (!this.$.shadow) {
           return;
         }
         if (this.active) {
           this.$.shadow.setZ(2);
         } else if (this.disabled) {
           this.$.shadow.setZ(0);
+        } else if (this.focused) {
+          this.$.shadow.setZ(3);
         } else {
           this.$.shadow.setZ(1);
         }
       },
 
       downAction: function(e) {
         this._downAction();
 
         if (this.hasAttribute('noink')) {
           return;
         }
 
         this.lastEvent = e;
         if (!this.$.ripple) {
           var ripple = document.createElement('paper-ripple');
           ripple.setAttribute('id', 'ripple');
           ripple.setAttribute('fit', '');
           if (this.recenteringTouch) {
             ripple.classList.add('recenteringTouch');
           }
           if (!this.fill) {
             ripple.classList.add('circle');
           }
           this.$.ripple = ripple;
           this.shadowRoot.insertBefore(ripple, this.shadowRoot.firstChild);
           // No need to forward the event to the ripple because the ripple
           // is triggered in activeChanged
         }
+      },
+
+      upAction: function() {
+        this._upAction();
+
+        if (this.toggle) {
+          this.toggleBackground();
+          if (this.$.ripple) {
+            this.$.ripple.cancel();
+          }
+        }
       }
 
     };
 
     Polymer.mixin2(p, Polymer.CoreFocusable);
     Polymer(p);
 
   })();
 
 </script>
 </polymer-element>