npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

polymer_0.5.0/bower_components/core-collapse/core-collapse.html

Index: polymer_0.5.0/bower_components/core-collapse/core-collapse.html
diff --git a/bower_components/core-collapse/core-collapse.html b/polymer_0.5.0/bower_components/core-collapse/core-collapse.html
similarity index 81%
rename from bower_components/core-collapse/core-collapse.html
rename to polymer_0.5.0/bower_components/core-collapse/core-collapse.html
index 17ba6381b6b8c7cd44c7b750dad9dc95c3017142..6d7f5b0b11992996c1357d88ff7f1940621188c9 100644
--- a/bower_components/core-collapse/core-collapse.html
+++ b/polymer_0.5.0/bower_components/core-collapse/core-collapse.html
@@ -9,12 +9,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 <!--
 `core-collapse` creates a collapsible block of content.  By default, the content
-will be collapsed.  Use `opened` to show/hide the content.
+will be collapsed.  Use `opened` or `toggle()` to show/hide the content.
 
     <button on-click="{{toggle}}">toggle collapse</button>
     
     <core-collapse id="collapse">
-      ...
+      Content goes here...
     </core-collapse>
     
     ...
@@ -22,6 +22,23 @@ will be collapsed.  Use `opened` to show/hide the content.
     toggle: function() {
       this.$.collapse.toggle();
     }
+    
+`core-collapse` adjusts the height/width of the collapsible element to show/hide
+the content.  So avoid putting padding/margin/border on the collapsible directly,
+and instead put a div inside and style that.
+
+    <style>
+      .collapse-content {
+        padding: 15px;
+        border: 1px solid #dedede;
+      }
+    </style>
+
+    <core-collapse>
+      <div class="collapse-content">
+        Content goes here...
+      </div>
+    </core-collapse>
 
 @group Polymer Core Elements
 @element core-collapse
@@ -31,7 +48,7 @@ will be collapsed.  Use `opened` to show/hide the content.
 
 <link rel="stylesheet" href="core-collapse.css" shim-shadowdom>
 
-<polymer-element name="core-collapse" attributes="target horizontal opened duration fixedSize">
+<polymer-element name="core-collapse" attributes="target horizontal opened duration fixedSize allowOverflow">
 <template>
 
   <content></content>
@@ -55,7 +72,8 @@ will be collapsed.  Use `opened` to show/hide the content.
      */
 
     /**
-     * The target element.
+     * The target element that will be opened when the `core-collapse` is 
+     * opened. If unspecified, the `core-collapse` itself is the target.
      *
      * @attribute target
      * @type object
@@ -101,6 +119,18 @@ will be collapsed.  Use `opened` to show/hide the content.
      * @default false
      */
     fixedSize: false,
+    
+    /**
+     * By default the collapsible element is set to overflow hidden. This helps
+     * avoid element bleeding outside the region and provides consistent overflow
+     * style across opened and closed states. Set this property to true to allow 
+     * the collapsible element to overflow when it's opened.
+     *
+     * @attribute allowOverflow
+     * @type boolean
+     * @default false
+     */
+    allowOverflow: false,
 
     created: function() {
       this.transitionEndListener = this.transitionEnd.bind(this);
@@ -131,7 +161,7 @@ will be collapsed.  Use `opened` to show/hide the content.
       }
       this.isTargetReady = !!this.target;
       this.classList.toggle('core-collapse-closed', this.target !== this);
-      this.target.style.overflow = 'hidden';
+      this.toggleOpenedStyle(false);
       this.horizontalChanged();
       this.addListeners(this.target);
       // set core-collapse-closed class initially to hide the target
@@ -178,6 +208,7 @@ will be collapsed.  Use `opened` to show/hide the content.
         this.updateSize('auto', null);
       }
       this.setTransitionDuration(null);
+      this.toggleOpenedStyle(this.opened);
       this.toggleClosedClass(!this.opened);
       this.asyncFire('core-resize', null, this.target);
     },
@@ -186,6 +217,10 @@ will be collapsed.  Use `opened` to show/hide the content.
       this.hasClosedClass = closed;
       this.target.classList.toggle('core-collapse-closed', closed);
     },
+    
+    toggleOpenedStyle: function(opened) {
+      this.target.style.overflow = this.allowOverflow && opened ? '' : 'hidden';
+    },
 
     updateSize: function(size, duration, forceEnd) {
       this.setTransitionDuration(duration);
@@ -241,6 +276,7 @@ will be collapsed.  Use `opened` to show/hide the content.
     },
 
     hide: function() {
+      this.toggleOpenedStyle(false);
       // don't need to do anything if it's already hidden
       if (this.hasClosedClass && !this.fixedSize) {
         return;