From ab2cfb1274190e3ef920eae136bf96e866c7d291 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Fri, 12 Jul 2013 12:33:02 +0100
Subject: [PATCH 01/42] polymer-animation: properties -> keyframes

---
 polymer-animation/index.html                  | 53 +++++++++-----
 .../polymer-animation-group.html              | 23 ++----
 .../polymer-animation-keyframe.html           | 31 +++-----
 polymer-animation/polymer-animation-prop.html | 17 ++---
 polymer-animation/polymer-animation.html      | 71 ++++++++-----------
 polymer-animation/polymer-blink.html          |  7 +-
 polymer-animation/polymer-bounce.html         | 20 +++---
 polymer-animation/polymer-fadein.html         | 12 ++--
 polymer-animation/polymer-fadeout.html        |  9 +--
 polymer-animation/polymer-flip.html           | 39 +++++-----
 polymer-animation/polymer-shake.html          | 41 +++++++----
 11 files changed, 159 insertions(+), 164 deletions(-)

diff --git a/polymer-animation/index.html b/polymer-animation/index.html
index eff2cdf..cd5f559 100644
--- a/polymer-animation/index.html
+++ b/polymer-animation/index.html
@@ -40,32 +40,53 @@
     <div class="animations">
 			<polymer-animation duration="1">
 				raw
-				<polymer-animation-prop name="opacity" easing="ease-in-out">
-					<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
-					<polymer-animation-keyframe value="0.3"></polymer-animation-keyframe>
-					<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
-				</polymer-animation-prop>
+        <polymer-animation-keyframe>
+          <polymer-animation-prop name="opacity" value="1">
+          </polymer-animation-prop>
+				</polymer-animation-keyframe>
+        <polymer-animation-keyframe>
+          <polymer-animation-prop name="opacity" value="0.3">
+          </polymer-animation-prop>
+				</polymer-animation-keyframe>
+        <polymer-animation-keyframe>
+          <polymer-animation-prop name="opacity" value="1">
+          </polymer-animation-prop>
+				</polymer-animation-keyframe>
 			</polymer-animation>
 			<polymer-animation-group type="seq">
 				raw group
 				<polymer-animation duration="0.3">
-					<polymer-animation-prop name="opacity" easing="ease-in-out">
-						<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
-						<polymer-animation-keyframe value="0.3"></polymer-animation-keyframe>
-						<polymer-animation-keyframe value="1"></polymer-animation-keyframe>
-					</polymer-animation-prop>
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="opacity" value="1">
+            </polymer-animation-prop>
+          </polymer-animation-keyframe>
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="opacity" value="0.3">
+            </polymer-animation-prop>
+          </polymer-animation-keyframe>
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="opacity" value="1">
+            </polymer-animation-prop>
+          </polymer-animation-keyframe>
 				</polymer-animation>
 				<polymer-animation duration="0.3">
-					<polymer-animation-prop name="transform" easing="ease-in-out">
-						<polymer-animation-keyframe value="scale(1)"></polymer-animation-keyframe>
-						<polymer-animation-keyframe value="scale(1.2)"></polymer-animation-keyframe>
-						<polymer-animation-keyframe value="scale(1)"></polymer-animation-keyframe>
-					</polymer-animation-prop>
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="transform" value="scale(1)">
+            </polymer-animation-prop>
+          </polymer-animation-keyframe>
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="transform" value="scale(1.2)">
+            </polymer-animation-prop>
+          </polymer-animation-keyframe>
+          <polymer-animation-keyframe>
+            <polymer-animation-prop name="transform" value="scale(1)">
+            </polymer-animation-prop>
+          </polymer-animation-keyframe>
 				</polymer-animation>
 			</polymer-animation-group>
       <polymer-bounce duration="1">bounce</polymer-bounce>
       <polymer-shake>shake</polymer-shake>
-      <polymer-shake duration="Infinity">shake forever</polymer-shake>
+      <!--<polymer-shake duration="Infinity">shake forever</polymer-shake>//-->
       <polymer-flip>flip X</polymer-flip>
       <polymer-flip axis="y">flip Y</polymer-flip>
       <polymer-blink>blink</polymer-blink>
diff --git a/polymer-animation/polymer-animation-group.html b/polymer-animation/polymer-animation-group.html
index d371787..a09e8a1 100644
--- a/polymer-animation/polymer-animation-group.html
+++ b/polymer-animation/polymer-animation-group.html
@@ -12,22 +12,6 @@
       /**
        * Component for a group of animations.
        *
-       * A fade in and move animation in sequence:
-       *
-       *     <polymer-animation-group type="seq">
-       *       <polymer-animation>
-       *         <polymer-animation-prop name="opacity">
-       *           <polymer-animation-keyframe value="0.5" offset="0"></polymer-animation-keyframe>
-       *           <polymer-animation-keyframe value="1" offset="1"></polymer-animation-keyframe>
-       *         <polymer-animation-prop>
-       *       </polymer-animation>
-       *       <polymer-animation>
-       *         <polymer-animation-prop name="transform">
-       *           <polymer-animation-keyframe value="translateX(0)" offset="0"></polymer-animation-keyframe>
-       *           <polymer-animation-keyframe value="translateX(100px)" offset="1"></polymer-animation-keyframe>
-       *         <polymer-animation-prop>
-       *       </polymer-animation>
-       *     </polymer-animation-group>
        * @class polymer-animation-group
        */
       Polymer('polymer-animation-group', {
@@ -55,6 +39,13 @@
         makeAnimation: function() {
           return new ANIMATION_GROUPS[this.type](this.childAnimations, this.timingProps);
         },
+        doOnChildren: function(inFn) {
+          var children = this.children;
+          if (!children.length) {
+            children = this.webkitShadowRoot ? this.webkitShadowRoot.childNodes : [];
+          }
+          Array.prototype.forEach.call(children, inFn, this);
+        },
         completeApply: function() {
           this.doOnChildren(function(c) {
             c.completeApply();
diff --git a/polymer-animation/polymer-animation-keyframe.html b/polymer-animation/polymer-animation-keyframe.html
index 56b9f58..f114cfe 100644
--- a/polymer-animation/polymer-animation-keyframe.html
+++ b/polymer-animation/polymer-animation-keyframe.html
@@ -1,39 +1,28 @@
 <polymer-element name="polymer-animation-keyframe" attributes="offset value easing">
 	<script>
 		/**
-		 * Defines the value at a keyframe for the containing `polymer-animation-prop`.
+     * Defines a keyframe in an animation. Its children should be
+     * `<polymer-animation-prop>` elements specifying the css
+     * property value at the keyframe.
+     *
 		 * @class polymer-animation-keyframe
 		 */
 		/**
 		 * From 0 to 1.
 		 * @property offset
 		 * @type Number
-		 * @required
-		 */
-		/**
-		 * Property value at the animation offset.
-		 * @property value
-		 * @type String
-		 * @required
-		 */
-		/**
-		 * @property easing
-		 * @type String
 		 */
 		Polymer('polymer-animation-keyframe', {
 			get properties() {
-				var props = {
-					// TODO bug in webanimations polyfill
-					value: String(this.value) || "",
-				};
-				var more = this.offset !== null || this.easing;
+        var props = {};
+        var children = this.querySelectorAll('polymer-animation-prop');
+        Array.prototype.forEach.call(children, function(c) {
+          props[c.name] = c.value;
+        });
 				if (this.offset !== null) {
 					props.offset = this.offset;
 				}
-				if (this.easing) {
-					props.timingFunction = this.easing;
-				}
-				return more ? props : String(this.value);
+				return props;
 			}
 		});
 	</script>
diff --git a/polymer-animation/polymer-animation-prop.html b/polymer-animation/polymer-animation-prop.html
index d67a889..892a57c 100644
--- a/polymer-animation/polymer-animation-prop.html
+++ b/polymer-animation/polymer-animation-prop.html
@@ -1,17 +1,9 @@
 <link rel="import" href="polymer-animation-keyframe.html">
-<polymer-element name="polymer-animation-prop" attributes="name">
+<polymer-element name="polymer-animation-prop" attributes="name value">
   <script>
     /**
-     * An animated property. Its children should be `<polymer-animation-keyframe>`
-     * elements specifying the keyframe values.
+     * A CSS property and value to use in a `<polymer-animation-keyframe>`.
      *
-     * Declaring an property to move down and then right:
-     *
-     *     <polymer-animation-prop name="transform">
-     *       <polymer-animation-keyframe offset="0" value="translate(0,0)"></polymer-animation-keyframe>
-     *       <polymer-animation-keyframe offset="0.5" value="translate(0,100px)"></polymer-animation-keyframe>
-     *       <polymer-animation-keyframe offset="1" value="translate(100px,100px)"></polymer-animation-keyframe>
-     *     </polymer-animation-prop>
      * @class polymer-animation-prop
      */
 		/**
@@ -20,6 +12,11 @@
 		 * @type String
 		 * @required
 		 */
+     /**
+      * CSS property value.
+      * @property value
+      * @required
+      */
     Polymer('polymer-animation-prop');
   </script>
 </polymer-element>
diff --git a/polymer-animation/polymer-animation.html b/polymer-animation/polymer-animation.html
index 2e9ae28..9012f16 100644
--- a/polymer-animation/polymer-animation.html
+++ b/polymer-animation/polymer-animation.html
@@ -34,10 +34,14 @@
        * A animation component to fade out an element:
        *
        *     <polymer-animation id="fadeout">
-       *       <polymer-animation-prop name="opacity">
-       *         <polymer-animation-keyframe value="0" offset="0"></polymer-animation-keyframe>
-       *         <polymer-keyframe value="1" offset="1"></polymer-animation-keyframe>
-       *       <polymer-animation-prop>
+       *       <polymer-animation-keyframe offset="0">
+       *         <polymer-animation-prop name="opacity" value="0">
+       *         </polymer-animation-keyframe>
+       *       </polymer-animation-keyframe>
+       *       <polymer-animation-keyframe offset="1">
+       *         <polymer-animation-prop name="opacity" value="1">
+       *         <polymer-animation-prop>
+       *       </polymer-animation-keyframe>
        *     </polymer-animation>
        * @class polymer-animation
        */
@@ -61,16 +65,12 @@
           targetSelector: null,
           // animation
           /**
-           * Animation properties specified as a dictionary of
-           * <css properties>:<array of values>. For example,
-           * `{opacity: ['0','1']}` specifies animating the opacity
-           * from 0 to 1.
-           * The values must be strings.
-           * (https://github.com/web-animations/web-animations-js/issues/178)
-           * @property properties
+           * Animation keyframes specified as an array of dictionaries of
+           * <css properties>:<array of values> pairs. For example,
+           * @property keyframes
            * @type Object
            */
-          properties: null,
+          keyframes: null,
           //accumulate: null, // not working in polyfill
           /**
            * The composition behavior. "replace", "add" or "merge".
@@ -171,8 +171,8 @@
           return this.animation;
         },
         makeAnimation: function() {
-          //this.target && console.log('makeAnimation target', this.target, 'animation', this.animationProps, 'timing', this.timingProps);
-          return this.target ? new Animation(this.target, this.animationProps, this.timingProps) : null;
+          //this.target && console.log('makeAnimation target', this.target, 'animation', this.animationEffect, 'timing', this.timingProps);
+          return this.target ? new Animation(this.target, this.animationEffect, this.timingProps) : null;
         },
         asyncApply: function() {
           this.cancelApply();
@@ -199,7 +199,7 @@
             this.target = findTarget(this.targetSelector, this);
           }
         },
-        propertiesChanged: function() {
+        keyframesChanged: function() {
           this.asyncApply();
         },
         compositeChanged: function() {
@@ -226,13 +226,6 @@
         autoplayChanged: function() {
           this.asyncApply();
         },
-        doOnChildren: function(inFn) {
-          var children = this.children;
-          if (!children.length) {
-            children = this.webkitShadowRoot ? this.webkitShadowRoot.childNodes : [];
-          }
-          Array.prototype.forEach.call(children, inFn, this);
-        },
         get timingProps() {
           var props = {};
           var timing = {
@@ -241,7 +234,7 @@
             startDelay: {isNumber: true},
             iterationCount: {isNumber: true, allowInfinity: true},
             direction: {},
-            duration: {isNumber: true}
+            duration: {property: 'iterationDuration', isNumber: true}
           };
           for (t in timing) {
             if (this[t] !== null) {
@@ -249,32 +242,24 @@
               props[name] = timing[t].isNumber ? toNumber(this[t], timing[t].allowInfinity) : this[t];
             }
           }
+          console.log('timing', props);
           return props;
         },
-        get animationProps() {
+        get animationEffect() {
           var props = {};
-          if (!this.properties) {
-            this.doOnChildren(function(c) {
-              if (c.tagName && c.tagName.toLowerCase() === 'polymer-animation-prop') {
-                var property = c.name;
-                var values = [];
-                this.doOnChildren.call(c, function(f) {
-                  values.push(f.properties);
-                });
-                props[property] = values;
-              }
+          var frames = [];
+          if (!this.keyframes) {
+            var children = this.querySelectorAll('polymer-animation-keyframe');
+            if (children.length === 0) {
+              children = this.shadowRoot.querySelectorAll('polymer-animation-keyframe');
+            }
+            Array.prototype.forEach.call(children, function(c) {
+              frames.push(c.properties);
             });
           } else {
-            for (k in this.properties) {
-              if (this.properties.hasOwnProperty(k)) {
-                props[k] = this.properties[k];
-              }
-            }
-          }
-          if (this.composite) {
-            props.operation = this.composite;
+            frames = this.keyframes;
           }
-          return props;
+          return new KeyframeAnimationEffect(frames, this.composite);
         },
         monitor: function() {
           // TODO(sorvell): adding brittle support for an end event
diff --git a/polymer-animation/polymer-blink.html b/polymer-animation/polymer-blink.html
index b7c348b..61fcda9 100644
--- a/polymer-animation/polymer-blink.html
+++ b/polymer-animation/polymer-blink.html
@@ -6,9 +6,10 @@
 			duration: 0.7,
 			iterationCount: 'Infinity',
 			easing: 'cubic-bezier(1.0,0,0,1.0)',
-			properties: {
-				opacity: ["1","0"]
-			}
+			keyframes: [
+        {opacity: 1},
+        {opacity: 0}
+			]
     });
   </script>
 </polymer-element>
diff --git a/polymer-animation/polymer-bounce.html b/polymer-animation/polymer-bounce.html
index 58d2d7c..9a24ad7 100644
--- a/polymer-animation/polymer-bounce.html
+++ b/polymer-animation/polymer-bounce.html
@@ -14,17 +14,15 @@
       },
       generate: function() {
         var parsed = this.magnitude.match(/([\-0-9]+)(.*)/);
-        this.properties = {
-          transform: [
-            {offset: 0, value: 'translateY(0)'},
-            {offset: 0.2, value: 'translateY(0)'},
-            {offset: 0.4, value: 'translateY(' + this.magnitude + ')'},
-            {offset: 0.5, value: 'translateY(0)'},
-            {offset: 0.6, value:'translateY(' + Number(parsed[1]) / 2 + parsed[2] + ')'},
-            {offset: 0.8, value: 'translateY(0)'},
-            {offset: 1, value: 'translateY(0)'}
-          ]
-        };
+        this.keyframes = [
+          {offset: 0, transform: 'translateY(0)'},
+          {offset: 0.2, transform: 'translateY(0)'},
+          {offset: 0.4, transform: 'translateY(' + this.magnitude + ')'},
+          {offset: 0.5, transform: 'translateY(0)'},
+          {offset: 0.6, transform:'translateY(' + Number(parsed[1]) / 2 + parsed[2] + ')'},
+          {offset: 0.8, transform: 'translateY(0)'},
+          {offset: 1, transform: 'translateY(0)'}
+        ];
       }
     });
   </script>
diff --git a/polymer-animation/polymer-fadein.html b/polymer-animation/polymer-fadein.html
index 50f09ac..9c68bea 100644
--- a/polymer-animation/polymer-fadein.html
+++ b/polymer-animation/polymer-fadein.html
@@ -1,10 +1,14 @@
 <link rel="import" href="polymer-animation.html">
 <polymer-element name="polymer-fadein" extends="polymer-animation">
   <template>
-    <polymer-animation-prop name="opacity">
-      <polymer-animation-keyframe value="0"></polymer-animation-keyframe>
-      <polymer-animation-keyframe value="1"></polymer-animation-keyframe>
-    </polymer-animation-prop>
+    <polymer-animation-keyframe>
+      <polymer-animation-prop name="opacity" value="0">
+      </polymer-animation-prop>
+    </polymer-animation-keyframe>
+    <polymer-animation-keyframe>
+      <polymer-animation-prop name="opacity" value="1">
+      </polymer-animation-prop>
+    </polymer-animation-keyframe>
     <content></content>
   </template>
   <script>
diff --git a/polymer-animation/polymer-fadeout.html b/polymer-animation/polymer-fadeout.html
index 75670dc..d0d6bf4 100644
--- a/polymer-animation/polymer-fadeout.html
+++ b/polymer-animation/polymer-fadeout.html
@@ -3,10 +3,11 @@
   <script>
     Polymer('polymer-fadeout', {
       publish: {
-        properties: {
-          targetSelector: '',
-          opacity: ["1", "0"]
-        }
+        targetSelector: '',
+        keyframes: [
+          {opacity: 1},
+          {opacity: 0}
+        ]
       }
     });
   </script>
diff --git a/polymer-animation/polymer-flip.html b/polymer-animation/polymer-flip.html
index fdd91df..b1613c7 100644
--- a/polymer-animation/polymer-flip.html
+++ b/polymer-animation/polymer-flip.html
@@ -17,29 +17,22 @@
         var isY = this.axis === 'y' || this.axis === 'Y';
         var rotate = isY ? 'rotateY' : 'rotateX';
         var transZ = isY ? '150px' : '50px';
-        this.properties = {
-          transform: [{
-            easing: 'ease-out',
-            offset: 0,
-            value: 'perspective(400px) translateZ(0px) ' + rotate + '(0deg) scale(1)'
-          }, {
-            easing: 'ease-out',
-            offset: 0.4,
-            value: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(170deg) scale(1)'
-          }, {
-            easing: 'ease-in',
-            offset: 0.5,
-            value: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(190deg) scale(1)'
-          }, {
-            easing: 'ease-in',
-            offset: 0.8,
-            value: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(.95)'
-          }, {
-            easing: 'ease-in',
-            offset: 1,
-            value: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(1)'
-          }]
-        }
+        this.keyframes = [{
+          offset: 0,
+          transform: 'perspective(400px) translateZ(0px) ' + rotate + '(0deg) scale(1)'
+        }, {
+          offset: 0.4,
+          transform: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(170deg) scale(1)'
+        }, {
+          offset: 0.5,
+          transform: 'perspective(400px) translateZ(' + transZ + ') ' + rotate + '(190deg) scale(1)'
+        }, {
+          offset: 0.8,
+          transform: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(.95)'
+        }, {
+          offset: 1,
+          transform: 'perspective(400px) translateZ(0px) ' + rotate + '(360deg) scale(1)'
+        }];
       }
     });
   </script>
diff --git a/polymer-animation/polymer-shake.html b/polymer-animation/polymer-shake.html
index 208d0af..8201f2b 100644
--- a/polymer-animation/polymer-shake.html
+++ b/polymer-animation/polymer-shake.html
@@ -2,23 +2,38 @@
 <polymer-element name="polymer-shake" extends="polymer-animation-group">
   <template>
     <polymer-animation duration="{{period}}">
-      <polymer-animation-prop name="transform">
-        <polymer-animation-keyframe value="translateX(0px)"></polymer-animation-keyframe>
-        <polymer-animation-keyframe value="{{negTransform}}"></polymer-animation-keyframe>
-      </polymer-animation-prop>
+      <polymer-animation-keyframe>
+        <polymer-animation-prop name="transform" value="translateX(0px)">
+        </polymer-animation-prop>
+      </polymer-animation-keyframe>
+      <polymer-animation-keyframe>
+        <polymer-animation-prop name="transform" value="{{negTransform}}">
+        </polymer-animation-prop>
+      </polymer-animation-keyframe>
     </polymer-animation>
     <polymer-animation duration="{{shakeDuration}}" iterationCount="{{shakeIterations}}">
-      <polymer-animation-prop name="transform">
-        <polymer-animation-keyframe value="{{negTransform}}"></polymer-animation-keyframe>
-        <polymer-animation-keyframe value="{{posTransform}}"></polymer-animation-keyframe>
-        <polymer-animation-keyframe value="{{negTransform}}"></polymer-animation-keyframe>
-      </polymer-animation-prop>
+      <polymer-animation-keyframe>
+        <polymer-animation-prop name="transform" value="{{negTransform}}">
+        </polymer-animation-prop>
+      </polymer-animation-keyframe>
+      <polymer-animation-keyframe>
+        <polymer-animation-prop name="transform" value="{{posTransform}}">
+        </polymer-animation-prop>
+      </polymer-animation-keyframe>
+      <polymer-animation-keyframe>
+        <polymer-animation-prop name="transform" value="{{negTransform}}">
+        </polymer-animation-prop>
+      </polymer-animation-keyframe>
     </polymer-animation>
     <polymer-animation duration="{{period}}">
-      <polymer-animation-prop name="transform">
-        <polymer-animation-keyframe value="{{negTransform}}"></polymer-animation-keyframe>
-        <polymer-animation-keyframe value="translateX(0px)"></polymer-animation-keyframe>
-      </polymer-animation-prop>
+      <polymer-animation-keyframe>
+        <polymer-animation-prop name="transform" value="{{negTransform}}">
+        </polymer-animation-prop>
+      </polymer-animation-keyframe>
+      <polymer-animation-keyframe>
+        <polymer-animation-prop name="transform" value="translateX(0px)">
+        </polymer-animation-prop>
+      </polymer-animation-keyframe>
     </polymer-animation>
     <content></content>
   </template>

From b71cfc69163cece2a8ba2c690d4ebbff2ae75d77 Mon Sep 17 00:00:00 2001
From: Eric Bidelman <ebidel@gmail.com>
Date: Fri, 12 Jul 2013 12:50:28 -0700
Subject: [PATCH 02/42] Setting .responseType needs to come after open

---
 polymer-ajax/polymer-xhr.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polymer-ajax/polymer-xhr.html b/polymer-ajax/polymer-xhr.html
index 90d058e..2ae9d3c 100644
--- a/polymer-ajax/polymer-xhr.html
+++ b/polymer-ajax/polymer-xhr.html
@@ -79,10 +79,10 @@
         if (params && method == 'GET') {
           url += (url.indexOf('?') > 0 ? '&' : '?') + params;
         }
+        xhr.open(method, url, async);
         if (options.responseType) {
           xhr.responseType = options.responseType;
         }
-        xhr.open(method, url, async);
         this.makeReadyStateHandler(xhr, options.callback);
         this.setRequestHeaders(options.headers);
         xhr.send(method == 'POST' ? (options.body || params) : null);

From a3a4b84d9c8c74d5ee566f0a5fcd2dcbe0899093 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Fri, 12 Jul 2013 14:08:43 -0700
Subject: [PATCH 03/42] adjust transition duration from 0.5 to 0.33

---
 polymer-collapse/polymer-collapse.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polymer-collapse/polymer-collapse.html b/polymer-collapse/polymer-collapse.html
index 46478ba..fc3d85d 100644
--- a/polymer-collapse/polymer-collapse.html
+++ b/polymer-collapse/polymer-collapse.html
@@ -78,7 +78,7 @@
        * @type number
        * @default 0.5
        */
-      duration: 0.5,
+      duration: 0.33,
       /**
        * If true, the size of the target element is fixed and is set
        * on the element.  Otherwise it will try to 

From 22498e9f02b68edaa724d98607ac150467d20829 Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Fri, 12 Jul 2013 12:03:03 -0700
Subject: [PATCH 04/42] allow 'flex' as well as 'fit'

---
 polymer-layout/polymer-layout.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polymer-layout/polymer-layout.html b/polymer-layout/polymer-layout.html
index 0860d65..5b55a2a 100644
--- a/polymer-layout/polymer-layout.html
+++ b/polymer-layout/polymer-layout.html
@@ -63,7 +63,7 @@
               w: c.offsetWidth,
               h: c.offsetHeight
             };
-            if (!c.hasAttribute('fit')) {
+            if (!c.hasAttribute('fit') && !c.hasAttribute('flex')) {
               ww += c.offsetWidth;
               hh += c.offsetHeight;
               list.push(info);

From 3629cabbd89c43700003fd1820131cfa319eb6cf Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Fri, 12 Jul 2013 18:01:57 -0700
Subject: [PATCH 05/42] new polymer-elements

---
 polymer-grid-layout/index.html               |  81 +++++++
 polymer-grid-layout/polymer-grid-layout.html | 242 +++++++++++++++++++
 polymer-shared-lib/index.html                |  23 ++
 polymer-shared-lib/polymer-shared-lib.html   |  89 +++++++
 4 files changed, 435 insertions(+)
 create mode 100644 polymer-grid-layout/index.html
 create mode 100644 polymer-grid-layout/polymer-grid-layout.html
 create mode 100644 polymer-shared-lib/index.html
 create mode 100644 polymer-shared-lib/polymer-shared-lib.html

diff --git a/polymer-grid-layout/index.html b/polymer-grid-layout/index.html
new file mode 100644
index 0000000..6c6d26c
--- /dev/null
+++ b/polymer-grid-layout/index.html
@@ -0,0 +1,81 @@
+<!doctype html>
+<html>
+<head>
+  <title>polymer-grid-layout example</title>
+  <script src="../../../polymer/polymer.js"></script>
+  <link href="polymer-grid-layout.html" rel="import">
+  <style>
+    body {
+      font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+    }
+  </style>
+</head>
+<body>
+  <grid-test></grid-test>
+
+  <polymer-element name="grid-test">
+    <template>
+      <polymer-grid-layout nodes="{{nodes}}" layout="{{layout}}"></polymer-grid-layout>
+
+      <panel id="toolbar">toolbar</panel>
+      <panel id="sidebar" v-flex>sidebar</panel>
+      <panel id="workspace" flex>workspace</panel>
+      <panel id="outputToolbar">otherbar</panel>
+      <panel id="output" v-flex>
+        output
+        <h2>Documentation</h2>
+        <h1>Verbiage</h1>
+        <p>In backbone record integer LED amplified internet protocol a extension reflective. 
+        Array kilohertz LED. Wavelength extension patch supporting wave an by prompt.</p>
+      </panel>
+
+      <style>
+        * {
+          -webkit-transition: top, right, bottom, left;
+          -webkit-transition-duration: 0.3s;
+        }
+        panel {
+          display: inline-block;
+          border: 4px dotted lightblue;
+          padding: 16px;
+        }
+        #output {
+          width: 400px;
+        }
+        #workspace {
+          border-color: orange;
+        }
+      </style>
+    </template>
+    <script>
+      Polymer('grid-test', {
+        arrangements: [[
+          [1, 1, 1],
+          [2, 3, 5],
+          [2, 3, 4]
+        ], [
+          [5, 3, 2],
+          [4, 3, 2],
+          [4, 1, 1]
+        ], [
+          [1, 1],
+          [2, 3],
+          [5, 3]
+        ]],
+        outputLayout: 0,
+        ready: function() {
+          this.nodes = [this.$.toolbar, this.$.sidebar, this.$.workspace, this.$.output, this.$.outputToolbar];
+          this.outputLayoutChanged();
+          setInterval(this.toggleLayout.bind(this), 2500);
+        },
+        outputLayoutChanged: function() {
+          this.layout = this.arrangements[this.outputLayout];
+        },
+        toggleLayout: function() {
+          this.outputLayout = (this.outputLayout + 1) % this.arrangements.length;
+        }
+      });
+    </script>
+  </polymer-element>
+</body>
+</html>
diff --git a/polymer-grid-layout/polymer-grid-layout.html b/polymer-grid-layout/polymer-grid-layout.html
new file mode 100644
index 0000000..e3f9501
--- /dev/null
+++ b/polymer-grid-layout/polymer-grid-layout.html
@@ -0,0 +1,242 @@
+<polymer-element name="polymer-grid-layout" attributes="nodes layout">
+  <template>
+  </template>
+  <script>
+    (function() {
+      Polymer('polymer-grid-layout', {
+        nodes: null,
+        layout: null,
+        nodesChanged: function() {
+          this.invalidate();
+        },
+        layoutChanged: function() {
+          this.invalidate();
+        },
+        invalidate: function() {
+          if (this.layout && this.nodes) {
+            this.layoutJob = this.job(this.layoutJob, this.relayout);
+          }
+        },
+        relayout: function() {
+          layout(this.layout, this.nodes);
+        }
+      });
+
+      //
+
+      var lineParent;
+
+      function line(axis, p, d) {
+        var l = document.createElement('line');
+        var extent = (axis === 'left' ? 'width' : (axis === 'top' ? 'height' : axis));
+        l.setAttribute('extent', extent);
+        if (d < 0) {
+          axis = (axis === 'left' ? 'right' : (axis === 'top' ? 'bottom' : axis));
+        }
+        p = Math.abs(p);
+        l.style[axis] = p + 'px';
+        l.style[extent] = '0px';
+        lineParent.appendChild(l);
+      }
+
+      var colCount, colOwners, rowCount, rowOwners;
+
+      function matrixillate(matrix) {
+        // mesaure the matrix, must be rectangular
+        rowCount = matrix.length;
+        colCount = rowCount && matrix[0].length || 0;
+        // build a transposed matrix
+        var transpose = [];
+        for (var i=0; i<colCount; i++) {
+          var c = [];
+          for (var j=0; j<rowCount; j++) {
+            c.push(matrix[j][i]);
+          }
+          transpose.push(c);
+        }
+        // assign sizing control
+        colOwners = findOwners(matrix);
+        rowOwners = findOwners(transpose);
+        //console.log('colOwners', colOwners);
+        //console.log('rowOwners', rowOwners);
+      }
+
+      function findOwners(matrix) {
+        var majCount = matrix.length;
+        var minCount = majCount && matrix[0].length || 0;
+        var owners = [];
+        // for each column (e.g.)
+        for (var i=0; i<minCount; i++) {
+          // array of contained areas
+          var contained = {};
+          // look at each row to find a containing area
+          for (var j=0; j<majCount; j++) {
+            // get the row vector
+            var vector = matrix[j]
+            // node index at [i,j]
+            var nodei = vector[i];
+            // if a node is there
+            if (nodei) {
+              // determine if it bounds this column
+              var owns = false;
+              if (i === 0) {
+                owns = (i === minCount-1) || (nodei !== vector[i+1]);
+              } else if (i === minCount - 1) {
+                owns = (i === 0) || (nodei !== vector[i-1]);
+              } else {
+                owns = nodei !== vector[i-1] && nodei !== vector[i+1];
+              }
+              if (owns) {
+                contained[nodei] = 1;
+              }
+            }
+            // store the owners for this column
+            owners[i] = contained;
+          }
+        }
+        return owners;
+      }
+
+      var nodes;
+
+      function colWidth(i) {
+        for (var col in colOwners[i]) {
+          col = Number(col);
+          if (col === 0) {
+            return 96;
+          }
+          var node = nodes[col - 1];
+          if (node.hasAttribute('h-flex') || node.hasAttribute('flex')) {
+            return -1;
+          }
+          var w = node.offsetWidth;
+          //console.log('colWidth(' + i + ') ==', w);
+          return w;
+        }
+        return -1;
+      }
+
+      function rowHeight(i) {
+        for (var row in rowOwners[i]) {
+          row = Number(row);
+          if (row === 0) {
+            return 96;
+          }
+          var node = nodes[row - 1];
+          if (node.hasAttribute('v-flex') || node.hasAttribute('flex')) {
+            return -1;
+          }
+          var h = node.offsetHeight;
+          //console.log('rowHeight(' + i + ') ==', h);
+          return h;
+        }
+        return -1;
+      }
+
+      var m = 0;
+
+      function railize(count, sizeFn) {
+        var rails = [];
+        var a = 0;
+        for (var i=0; i<count; i++) {
+          rails[i] = {p: a, s: 1};
+          var x = sizeFn(i) + m + m;
+          if (x == -1) {
+            break;
+          }
+          a += x;
+        }
+        if (i === count) {
+          rails[i] = {p: 0, s: -1};
+        }
+        var b = 0;
+        for (var ii=count; ii>i; ii--) {
+          rails[ii] = {p: b, s: -1};
+          x = sizeFn(ii - 1) + m + m;
+          if (x !== -1) {
+            b += x;
+          }
+        }
+        return rails;
+      }
+
+      function _position(box, maj, min, ext, a, b) {
+        box.position = 'absolute';
+        box.boxSizing = box.mozBoxSizing = 'border-box';
+        box[maj] = box[min] = box[ext] = '';
+        if (a.s < 0 && b.s < 0) {
+          box[ext] = a.p - b.p - m - m + 'px';
+          //box[min] = b.p + m + 'px';
+          box[maj] = 'calc(100% - ' + (a.p - b.p - m - m) + 'px' + ')';
+        } else if (b.s < 0) {
+          box[maj] = a.p + m + 'px';
+          box[min] = b.p + m + 'px';
+        } else {
+          box[maj] = a.p + m + 'px';
+          box[ext] = b.p - a.p - m - m + 'px';
+        }
+      }
+
+      function position(elt, left, right, top, bottom) {
+        _position(elt.style, 'top', 'bottom', 'height', rows[top], rows[bottom]);
+        _position(elt.style, 'left', 'right', 'width', columns[left], columns[right]);
+      }
+
+      function layout(matrix, anodes, alineParent) {
+        //console.group('layout');
+
+        lineParent = alineParent;
+        nodes = anodes;
+        matrixillate(matrix);
+
+        columns = railize(colCount, colWidth);
+        rows = railize(rowCount, rowHeight);
+
+        if (alineParent) {
+          //console.group('column rails');
+          columns.forEach(function(c) {
+            //console.log(c.p, c.s);
+            line('left', c.p, c.s);
+          });
+          //console.groupEnd();
+
+          //console.group('row rails');
+          rows.forEach(function(r) {
+            //console.log(r.p, r.s);
+            line('top', r.p, r.s);
+          });
+          //console.groupEnd();
+        }
+
+        //console.group('rail boundaries');
+        nodes.forEach(function(node, i) {
+          // node indices are 1-based
+          var n = i + 1;
+          // boundary rails
+          var l, r, t = 1e10, b = -1e10;
+          matrix.forEach(function(vector, i) {
+            var f = vector.indexOf(n);
+            if (f > -1) {
+              l = f;
+              r = vector.lastIndexOf(n) + 1;
+              t = Math.min(t, i);
+              b = Math.max(b, i) + 1;
+            }
+          });
+          if (l == undefined) {
+            //console.log('unused');
+            node.style.visibility = 'hidden';
+          } else {
+            node.style.visibility = '';
+            //console.log(l, r, t, b);
+            position(node, l, r, t, b);
+          }
+        });
+        //console.groupEnd();
+
+        //console.groupEnd();
+      }
+
+    })();
+  </script>
+</polymer-element>
\ No newline at end of file
diff --git a/polymer-shared-lib/index.html b/polymer-shared-lib/index.html
new file mode 100644
index 0000000..532829b
--- /dev/null
+++ b/polymer-shared-lib/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<html>
+  <head>
+    <title></title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script src="../../polymer/polymer.min.js"></script>
+    <link rel="import" href="polymer-shared-lib.html">
+  </head>
+  <body>
+    <polymer-shared-lib id="share" url="https://apis.google.com/js/client.js?onload=%%callback%%"></polymer-shared-lib>
+    <script>
+      share.addEventListener('polymer-shared-lib-loaded', function() {
+        console.log('lib loaded');
+        console.dir(event.detail);
+      });
+    </script>
+  </body>
+</html>
diff --git a/polymer-shared-lib/polymer-shared-lib.html b/polymer-shared-lib/polymer-shared-lib.html
new file mode 100644
index 0000000..81c50e7
--- /dev/null
+++ b/polymer-shared-lib/polymer-shared-lib.html
@@ -0,0 +1,89 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<polymer-element name="polymer-shared-lib" attributes="url notifyEvent">
+  <script>
+    (function() {
+      Polymer('polymer-shared-lib', {
+        notifyEvent: 'polymer-shared-lib-loaded',
+        ready: function() {
+        },
+        urlChanged: function() {
+          requireApi(this);
+        },
+        provide: function() {
+          this.async('notify');
+        },
+        notify: function() {
+          this.fire(this.notifyEvent, arguments);
+        }
+      });
+
+      function nameFromInstance(instance) {
+        return instance.url.replace(/[\:\/\%\?\.\=]/g, '_') + '_api';
+      }
+
+      var apiMap = {};
+      function requireApi(instance) {
+        instance._api_name = nameFromInstance(instance);
+        var loader = apiMap[instance._api_name];
+        if (!loader) {
+          loader = new Loader(instance);
+          apiMap[name] = loader;
+        }
+        loader.requireApi(instance);
+      }
+      
+      Loader = function(instance) {
+        this.instances = [];
+        this.load(instance);
+      };
+      Loader.prototype = {
+        loaded: false,
+        requireApi: function(instance) {
+          if (this.loaded) {
+            this.provide(instance);
+          } else {
+            this.instances.push(instance);
+          }
+        },
+        load: function(instance) {
+          this.callbackName = instance._api_name + '_loaded';
+          window[this.callbackName] = this.success.bind(this);
+          var url = instance.url.replace('%%callback%%', this.callbackName);
+          this.addScript(url);
+        },
+        addScript: function(src) {
+          var script = document.createElement('script');
+          script.src = src;
+          script.onerror = this.error.bind(this);
+          var s = document.querySelector('script');
+          s.parentNode.insertBefore(script, s);
+          this.script = script;
+        },
+        removeScript: function() {
+          if (this.script.parentNode) {
+            this.script.parentNode.removeChild(this.script);
+          }
+          this.script = null;
+        },
+        error: function() {
+          this.cleanup();
+        },
+        success: function() {
+          this.cleanup();
+          this.result = Array.prototype.slice.call(arguments);
+          this.instances.forEach(this.provide, this);
+        },
+        cleanup: function() {
+          delete window[this.callbackName];
+        },
+        provide: function(instance) {
+          instance.notify.apply(instance, this.result);
+        }
+      };
+    })();
+  </script>
+</polymer-element>

From 62d82e800cd072102a1f3e1162d8c248a2a6f6a3 Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Sat, 13 Jul 2013 12:06:15 -0700
Subject: [PATCH 06/42] fix path to polymer.js

---
 polymer-grid-layout/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polymer-grid-layout/index.html b/polymer-grid-layout/index.html
index 6c6d26c..010f7a6 100644
--- a/polymer-grid-layout/index.html
+++ b/polymer-grid-layout/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <title>polymer-grid-layout example</title>
-  <script src="../../../polymer/polymer.js"></script>
+  <script src="../../polymer/polymer.js"></script>
   <link href="polymer-grid-layout.html" rel="import">
   <style>
     body {

From 76af4de181d9d9410cefd0c44dce5d548db01ab1 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Mon, 15 Jul 2013 16:54:34 -0700
Subject: [PATCH 07/42] polymer-meta: allow different type of metadata

---
 polymer-meta/polymer-meta.html | 36 +++++++++++++++++++++++++---------
 1 file changed, 27 insertions(+), 9 deletions(-)

diff --git a/polymer-meta/polymer-meta.html b/polymer-meta/polymer-meta.html
index 5278c9c..9f3b22e 100644
--- a/polymer-meta/polymer-meta.html
+++ b/polymer-meta/polymer-meta.html
@@ -16,38 +16,56 @@
  * @class polymer-meta
  */
 -->
-<polymer-element name="polymer-meta" attributes="list label">
+<polymer-element name="polymer-meta" attributes="list label type">
   <script>
     (function() {
       var SKIP_ID = 'meta';
-      var metaData = {}, metaArray = [];
+      var metaData = {}, metaArray = {};
 
       Polymer('polymer-meta', {
+        type: 'default',
         ready: function() {
           this.idChanged();
         },
+        get metaArray() {
+          var t = this.type;
+          if (!metaArray[t]) {
+            metaArray[t] = [];
+          }
+          return metaArray[t];
+        },
+        get metaData() {
+          var t = this.type;
+          if (!metaData[t]) {
+            metaData[t] = {};
+          }
+          return metaData[t];
+        },
         idChanged: function(old) {
           if (this.id && this.id !== SKIP_ID) {
             this.unregister(this, old);
-            metaData[this.id] = this;
-            metaArray.push(this);
+            this.metaData[this.id] = this;
+            this.metaArray.push(this);
           }
         },
         unregister: function(meta, id) {
-          delete metaData[id || meta.id];
-          var i = metaArray.indexOf(meta);
+          delete this.metaData[id || meta.id];
+          var i = this.metaArray.indexOf(meta);
           if (i >= 0) {
-            metaArray.splice(i, 1);
+            this.metaArray.splice(i, 1);
           }
         },
         get list() {
-          return metaArray;
+          return this.metaArray;
         },
         get archetype() {
           return this.querySelector('template');
         },
         byId: function(id) {
-          return metaData[id];
+          return this.metaData[id];
+        },
+        get childMetas() {
+          return this.querySelectorAll(this.localName);
         }
       });
     })();

From ab736e7613288988764677da14d13f8cfd3ed59a Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 16 Jul 2013 10:48:35 -0700
Subject: [PATCH 08/42] better support on multi-selection, allow to use
 selected to set selections

---
 polymer-selector/index.html            |  21 ++++-
 polymer-selector/polymer-selector.html | 114 +++++++++++++++++++------
 2 files changed, 107 insertions(+), 28 deletions(-)

diff --git a/polymer-selector/index.html b/polymer-selector/index.html
index 6c22f34..505a9dd 100644
--- a/polymer-selector/index.html
+++ b/polymer-selector/index.html
@@ -26,20 +26,33 @@
   </style>
 </head>
 <body>
-  <polymer-selector>
+  <polymer-selector id="selector1" selected="0">
+    <div>Item 0</div>
     <div>Item 1</div>
     <div>Item 2</div>
     <div>Item 3</div>
     <div>Item 4</div>
-    <div>Item 5</div>
   </polymer-selector>
   <h2>Multi-select</h2>
-  <polymer-selector multi>
+  <polymer-selector id="selector2" multi>
+    <div>Item 0</div>
     <div>Item 1</div>
     <div>Item 2</div>
     <div>Item 3</div>
     <div>Item 4</div>
-    <div>Item 5</div>
   </polymer-selector>
+  
+  <script>
+    document.addEventListener('WebComponentsReady', function() {
+      document.querySelector('#selector2').selected = [1, 3];
+      
+      /* document.querySelector('#selector1').addEventListener('polymer-select', function(e) {
+        console.log('polymer-select1', e.detail.isSelected, e.detail.item);
+      });
+      document.querySelector('#selector2').addEventListener('polymer-select', function(e) {
+        console.log('polymer-select2', e.detail.isSelected, e.detail.item);
+      }); */
+    });
+  </script>
 </body>
 </html>
diff --git a/polymer-selector/polymer-selector.html b/polymer-selector/polymer-selector.html
index 4018fd6..8dd1d98 100644
--- a/polymer-selector/polymer-selector.html
+++ b/polymer-selector/polymer-selector.html
@@ -9,13 +9,13 @@
  */
 /**
  * polymer-selector is used to display a list of elements that can be selected.
- * The attribute "selected" indicates which element is being selected.
- * Tapping on the element to change selection would fire "polymer-activate"
- * event.
+ * The attribute "selected" indicates which item element is being selected.
+ * Tapping on the item element would fire "polymer-activate" event. And use
+ * "polymer-select" event to listen for selection changes.
  *
  * Example:
  *
- *     <polymer-selector selected="0" on-polymer-activate="activateAction">
+ *     <polymer-selector selected="0">
  *       <div>Item 1</div>
  *       <div>Item 2</div>
  *       <div>Item 3</div>
@@ -39,11 +39,19 @@
  * @class polymer-selector
  */
 /**
- * Fired when an element is selected via tap.
+ * Fired when selection changes.
  * 
- * @event activate
+ * @event polymer-select
  * @param {Object} detail
- *   @param {Object} detail.item the selected element
+ *   @param {boolean} isSelected
+ *   @param {Object} detail.item the item element
+ */
+/**
+ * Fired when an item element is tapped.
+ * 
+ * @event polymer-activate
+ * @param {Object} detail
+ *   @param {Object} detail.item the item element
  */
 -->
 <link rel="import" href="polymer-selection.html">
@@ -57,10 +65,10 @@
   <script>
     Polymer('polymer-selector', {
       /**
-       * Gets or sets the selected element.  Default is to use the index
-       * of the currently selected element.
+       * Gets or sets the selected element.  Default to use the index
+       * of the item element.
        *
-       * If you want a specific attribute value of the selected element to be
+       * If you want a specific attribute value of the element to be
        * used instead of index, set "valueattr" to that attribute name.
        *
        * Example:
@@ -71,8 +79,20 @@
        *       <div label="zot"></div>
        *     </polymer-selector>
        *
+       * In multi-selection this should be an array of values.
+       *
+       * Example:
+       *
+       *     <polymer-selector id="selector" valueattr="label" multi>
+       *       <div label="foo"></div>
+       *       <div label="bar"></div>
+       *       <div label="zot"></div>
+       *     </polymer-selector>
+       *
+       *     this.$.selector.selected = ['foo', 'zot'];
+       *
        * @attribute selected
-       * @type string
+       * @type string or array
        * @default null
        */
       selected: null,
@@ -110,7 +130,15 @@
        */
       setectedProperty: 'active',
       /**
-       * Returns the model associated with the selected element.
+       * In single selection this returns the currently selected element.
+       * 
+       * @attribute selectedItem
+       * @type Object
+       * @default null
+       */
+      selectedItem: null,
+      /**
+       * Returns the model associated with the selectedItem.
        * 
        * @attribute selectedModel
        * @type Object
@@ -127,10 +155,34 @@
         return this.$.selection.getSelection();
       },
       selectedChanged: function() {
-        this.valueToSelection(this.selected);
+        if (this.multi) {
+          if (!Array.isArray(this.selected) && 
+              this.selected !== null && this.selected !== undefined) {
+            this.selected = [this.selected];
+            return;
+          }
+          this.clearSelection();
+          this.selected && this.selected.forEach(function(s) {
+            this.valueToSelection(s);
+          }.bind(this));
+        } else {
+          this.valueToSelection(this.selected);
+        }
+      },
+      clearSelection: function() {
+        if (this.multi) {
+          this.selection.slice().forEach(function(s) {
+            this.$.selection.setItemSelected(s, false);
+          }.bind(this));
+        } else {
+          this.$.selection.setItemSelected(this.selection, false);
+        }
+        this.selectedItem = null;
+        this.$.selection.clear();
       },
       valueToSelection: function(value) {
-        var item = this.items[this.valueToIndex(value)];
+        var item = (value === null || value === undefined) ? 
+            null : this.items[this.valueToIndex(value)];
         this.selectedItem = item;
         this.$.selection.select(item);
       },
@@ -158,12 +210,15 @@
       // events fired from <polymer-selection> object
       selectionSelect: function(e, detail) {
         if (detail.item) {
-          if (this.selectedClass) {
-            detail.item.classList.toggle(this.selectedClass, detail.isSelected);
-          }
-          if (this.setectedProperty) {
-            detail.item[this.setectedProperty] = detail.isSelected;
-          }
+          this.applySelection(detail.item, detail.isSelected)
+        }
+      },
+      applySelection: function(item, isSelected) {
+        if (this.selectedClass) {
+          item.classList.toggle(this.selectedClass, isSelected);
+        }
+        if (this.setectedProperty) {
+          item[this.setectedProperty] = isSelected;
         }
       },
       // event fired from host
@@ -171,19 +226,30 @@
         if (!this.notap) {
           var i = this.findDistributedTarget(e.target, this.items);
           if (i >= 0) {
-            var selected = this.valueForNode(this.items[i]) || i;
+            var item = this.items[i];
+            var selected = this.valueForNode(item) || i;
             if (this.multi) {
-              this.valueToSelection(selected);
+              if (this.selected) {
+                this.valueToSelection(selected);
+                var si = this.selected.indexOf(selected);
+                if (si >= 0) {
+                  this.selected.splice(si, 1);
+                } else {
+                  this.selected.push(selected);
+                }
+              } else {
+                this.selected = [selected];
+              }
             } else {
               this.selected = selected;
             }
-            this.asyncFire('polymer-activate', {item: this.items[i]});
+            this.asyncFire('polymer-activate', {item: item});
           }
         }
       },
       findDistributedTarget: function(target, nodes) {
         // find first ancestor of target (including itself) that
-        // is in inNodes, if any
+        // is in nodes, if any
         while (target && target != this) {
           var i = Array.prototype.indexOf.call(nodes, target);
           if (i >= 0) {

From e554b4d4c616a23a91e89cc593084542af844b04 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 16 Jul 2013 10:50:45 -0700
Subject: [PATCH 09/42] create polymer-flex-panel which is a flexbox container

---
 polymer-flex-layout/index.html              | 27 +++++++++++----------
 polymer-flex-layout/polymer-flex-layout.css |  5 ++++
 polymer-flex-layout/polymer-flex-panel.html | 10 ++++++++
 3 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 polymer-flex-layout/polymer-flex-panel.html

diff --git a/polymer-flex-layout/index.html b/polymer-flex-layout/index.html
index 0da82fb..655d1b5 100644
--- a/polymer-flex-layout/index.html
+++ b/polymer-flex-layout/index.html
@@ -4,6 +4,7 @@
   <title>polymer-flex-layout</title>
   <script src="../../polymer/polymer.js"></script>
   <link rel="import" href="polymer-flex-layout.html">
+  <link rel="import" href="polymer-flex-panel.html">
   <style>
     body {
       font-size: 20px;
@@ -53,30 +54,30 @@ <h3>Title</h3>
     </script>
   </polymer-element>
 
-  <polymer-element name="flex-container" extends="polymer-flex-layout" isContainer>
+  <polymer-element name="flex-container" extends="polymer-flex-panel">
     <template>
       <style>
-        div, polymer-flex-layout {
+        div, polymer-flex-panel {
           box-sizing: border-box;
           -moz-box-sizing: border-box;
           border: 2px solid #ccc;
         }
       </style>
       <div>Hi I'm some content</div>
-      <polymer-flex-layout isContainer vertical flex>
-        <polymer-flex-layout isContainer align="center">
+      <polymer-flex-panel vertical flex>
+        <polymer-flex-panel align="center">
           <h3>Title</h3>
           <button>hello</button>
-        </polymer-flex-layout>
-        <polymer-flex-layout isContainer flex>
+        </polymer-flex-panel>
+        <polymer-flex-panel flex>
           <div flex>Main content</div>
           <div>Sidebar content</div>
-        </polymer-flex-layout>
+        </polymer-flex-panel>
         <div>Some more stuffs...</div>
-        <polymer-flex-layout isContainer justify="end">
+        <polymer-flex-panel justify="end">
           <b>Footer</b>
-        </polymer-flex-layout>
-      </polymer-flex-layout>
+        </polymer-flex-panel>
+      </polymer-flex-panel>
       <div>A last bit, like a panel</div>
     </template>
   </polymer-element>
@@ -117,13 +118,13 @@ <h3>Title</h3>
     </template>
   </polymer-element>
 
-  <h3>Using CSS class from polymer-flex-layout.css</h3>
+  <h3>polymer-flex-layout.css</h3>
   <flex-css></flex-css>
   <br>
-  <h3>polymer-flex-layout as a flexbox container</h3>
+  <h3>polymer-flex-panel element</h3>
   <flex-container></flex-container>
   <br>
-  <h3>Using polymer-flex-layout to add flexbox behavior to the parent node</h3>
+  <h3>polymer-flex-layout element</h3>
   <flex-nonvisual></flex-nonvisual>
 </body>
 </html>
diff --git a/polymer-flex-layout/polymer-flex-layout.css b/polymer-flex-layout/polymer-flex-layout.css
index 6b41a08..6d0c177 100644
--- a/polymer-flex-layout/polymer-flex-layout.css
+++ b/polymer-flex-layout/polymer-flex-layout.css
@@ -1,3 +1,8 @@
+/*
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+*/
 .flexbox {
   display: -webkit-box !important;
   display: -ms-flexbox !important;
diff --git a/polymer-flex-layout/polymer-flex-panel.html b/polymer-flex-layout/polymer-flex-panel.html
new file mode 100644
index 0000000..6e1d4e2
--- /dev/null
+++ b/polymer-flex-layout/polymer-flex-panel.html
@@ -0,0 +1,10 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<polymer-element name="polymer-flex-panel" extends="polymer-flex-layout" isContainer>
+  <template>
+    <shadow></shadow>
+  </template>
+</polymer-element>

From b3d6b99293d568c4d9b6a2b4afb85185e009b3a9 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 16 Jul 2013 10:51:11 -0700
Subject: [PATCH 10/42] remove listeners correctly

---
 polymer-collapse/polymer-collapse.html | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/polymer-collapse/polymer-collapse.html b/polymer-collapse/polymer-collapse.html
index fc3d85d..eecfbc7 100644
--- a/polymer-collapse/polymer-collapse.html
+++ b/polymer-collapse/polymer-collapse.html
@@ -8,7 +8,9 @@
  * @module Polymer Elements
  */
 /**
- * polymer-collapse is used to add collapsible behavior to another element.
+ * polymer-collapse is used to add collapsible behavior to the
+ * target element.  It adjusts the height or width of the target element
+ * to make the element collapse and expand.
  *
  * Example:
  *
@@ -76,7 +78,7 @@
        *
        * @attribute duration
        * @type number
-       * @default 0.5
+       * @default 0.33
        */
       duration: 0.33,
       /**
@@ -114,12 +116,14 @@
         }
       },
       addListeners: function(node) {
-        node.addEventListener('webkitTransitionEnd', this.transitionEnd.bind(this));
-        node.addEventListener('transitionend', this.transitionEnd.bind(this));
+        this.transitionEndListener = this.transitionEndListener || 
+            this.transitionEnd.bind(this);
+        node.addEventListener('webkitTransitionEnd', this.transitionEndListener);
+        node.addEventListener('transitionend', this.transitionEndListener);
       },
       removeListeners: function(node) {
-        node.removeEventListener('webkitTransitionEnd', this.transitionEnd.bind(this));
-        node.removeEventListener('transitionend', this.transitionEnd.bind(this));
+        node.removeEventListener('webkitTransitionEnd', this.transitionEndListener);
+        node.removeEventListener('transitionend', this.transitionEndListener);
       },
       horizontalChanged: function() {
         this.dimension = this.horizontal ? 'width' : 'height';
@@ -132,7 +136,8 @@
       },
       setTransitionDuration: function(duration) {
         var s = this.target.style;
-        s.webkitTransition = s.transition = duration ? (this.dimension + ' ' + duration + 's') : null;
+        s.webkitTransition = s.transition = duration ? 
+            (this.dimension + ' ' + duration + 's') : null;
         if (duration === 0) {
           this.asyncMethod('transitionEnd');
         }

From 2b27a61287a67157478cc229ac14dac0ae8e13df Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 16 Jul 2013 14:38:48 -0700
Subject: [PATCH 11/42] add test for multi-selection in polymer-selector

---
 .../html/polymer-selector-activate-event.html |  5 ++
 test/html/polymer-selector-basic.html         | 11 ++++
 test/html/polymer-selector-multi.html         | 53 +++++++++++++++++++
 test/js/polymer-selector.js                   |  1 +
 4 files changed, 70 insertions(+)
 create mode 100644 test/html/polymer-selector-multi.html

diff --git a/test/html/polymer-selector-activate-event.html b/test/html/polymer-selector-activate-event.html
index a2b099c..6184095 100644
--- a/test/html/polymer-selector-activate-event.html
+++ b/test/html/polymer-selector-activate-event.html
@@ -6,6 +6,11 @@
     <script src="../../../polymer/tools/test/htmltest.js"></script>
     <script src="../../node_modules/chai/chai.js"></script>
     <link rel="import" href="../../polymer-selector/polymer-selector.html">
+    <style>
+      .polymer-selected {
+        background: #ccc;
+      }
+    </style>
   </head>
   <body>
 
diff --git a/test/html/polymer-selector-basic.html b/test/html/polymer-selector-basic.html
index f995573..b12dcf5 100644
--- a/test/html/polymer-selector-basic.html
+++ b/test/html/polymer-selector-basic.html
@@ -6,6 +6,15 @@
     <script src="../../../polymer/tools/test/htmltest.js"></script>
     <script src="../../node_modules/chai/chai.js"></script>
     <link rel="import" href="../../polymer-selector/polymer-selector.html">
+    <style>
+      .polymer-selected {
+        background: #ccc;
+      }
+      
+      .my-selected {
+        background: red;
+      }
+    </style>
   </head>
   <body>
 
@@ -17,6 +26,8 @@
       <div>Item 5</div>
     </polymer-selector>
     
+    <br><br>
+    
     <polymer-selector id="selector2" selected="item3" selectedClass="my-selected" valueattr="id">
       <div id="item1">Item 1</div>
       <div id="item2">Item 2</div>
diff --git a/test/html/polymer-selector-multi.html b/test/html/polymer-selector-multi.html
new file mode 100644
index 0000000..066fb88
--- /dev/null
+++ b/test/html/polymer-selector-multi.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html>
+  <head>
+    <title>polymer-selector-multi</title>
+    <script src="../../../polymer/polymer.js"></script>
+    <script src="../../../polymer/tools/test/htmltest.js"></script>
+    <script src="../../node_modules/chai/chai.js"></script>
+    <link rel="import" href="../../polymer-selector/polymer-selector.html">
+    <style>
+      .polymer-selected {
+        background: #ccc;
+      }
+    </style>
+  </head>
+  <body>
+
+    <polymer-selector id="selector" multi>
+      <div>Item 1</div>
+      <div>Item 2</div>
+      <div>Item 3</div>
+      <div>Item 4</div>
+      <div>Item 5</div>
+    </polymer-selector>
+    
+    <script>
+      var assert = chai.assert;
+      document.addEventListener('WebComponentsReady', function() {
+        //
+        var s = document.querySelector('#selector');
+        assert.equal(s.selected, null);
+        assert.equal(s.selectedClass, 'polymer-selected');
+        assert.isTrue(s.multi);
+        assert.equal(s.valueattr, 'name');
+        assert.equal(s.items.length, 5);
+        //
+        var eventCounter = 0;
+        s.addEventListener('polymer-select', function(e) {
+          if (e.detail.isSelected) {
+            eventCounter++;
+          }
+        });
+        s.selected = [0, 2];
+        setTimeout(function() {
+          assert.equal(eventCounter, 2);
+          assert.isTrue(s.children[0].classList.contains('polymer-selected'));
+          assert.isTrue(s.children[2].classList.contains('polymer-selected'));
+          done();
+        }.bind(this), 0);
+        
+      });
+    </script>
+  </body>
+</html>
diff --git a/test/js/polymer-selector.js b/test/js/polymer-selector.js
index fbbc048..537fa39 100644
--- a/test/js/polymer-selector.js
+++ b/test/js/polymer-selector.js
@@ -7,4 +7,5 @@
 htmlSuite('polymer-selector', function() {
   htmlTest('html/polymer-selector-basic.html');
   htmlTest('html/polymer-selector-activate-event.html');
+  htmlTest('html/polymer-selector-multi.html');
 });
\ No newline at end of file

From a3c8a99cdca4d95664049c4759204ecea95f9251 Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Wed, 17 Jul 2013 12:41:32 -0700
Subject: [PATCH 12/42] add gruntfile for building docs, and manifest.xml for
 discovery

---
 .gitignore                                   |   1 +
 gruntfile.js                                 |  35 ++++++
 manifest.xml                                 |  22 ++++
 polymer-file/polymer-file.html               |  35 +++---
 polymer-grid-layout/polymer-grid-layout.html |  56 ++++++---
 polymer-selector/polymer-selector.html       | 118 ++++---------------
 6 files changed, 144 insertions(+), 123 deletions(-)
 create mode 100644 gruntfile.js
 create mode 100644 manifest.xml

diff --git a/.gitignore b/.gitignore
index 07e6e47..7a42667 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
 /node_modules
+/docs
diff --git a/gruntfile.js b/gruntfile.js
new file mode 100644
index 0000000..2c12c35
--- /dev/null
+++ b/gruntfile.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2013 The Polymer Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+module.exports = function(grunt) {
+  grunt.initConfig({
+    yuidoc: {
+      compile: {
+        name: '<%= pkg.name %>',
+        description: '<%= pkg.description %>',
+        version: '<%= pkg.version %>',
+        url: '<%= pkg.homepage %>',
+        options: {
+          exclude: 'third_party',
+          extension: '.js,.html',
+          paths: '.',
+          outdir: 'docs',
+          linkNatives: 'true',
+          tabtospace: 2,
+          themedir: '../docs/doc_themes/footstrap'
+        }
+      }
+    },
+    pkg: grunt.file.readJSON('package.json')
+  });
+
+  // plugins
+  grunt.loadNpmTasks('grunt-contrib-yuidoc');
+  
+  // tasks
+  grunt.registerTask('default', ['yuidoc']);
+  grunt.registerTask('docs', ['yuidoc']);
+};
+
diff --git a/manifest.xml b/manifest.xml
new file mode 100644
index 0000000..e821eaf
--- /dev/null
+++ b/manifest.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0"?>
+<meta>
+  <polymer-element-meta name="polymer-ajax"></polymer-element-meta>
+  <polymer-element-meta name="polymer-animation"></polymer-element-meta>
+  <polymer-element-meta name="polymer-collapse"></polymer-element-meta>
+  <polymer-element-meta name="polymer-file"></polymer-element-meta>
+  <polymer-element-meta name="polymer-flex-layout"></polymer-element-meta>
+  <polymer-element-meta name="polymer-google-jsapi"></polymer-element-meta>
+  <polymer-element-meta name="polymer-grid-layout"></polymer-element-meta>
+  <polymer-element-meta name="polymer-flex-layout"></polymer-element-meta>
+  <polymer-element-meta name="polymer-jsonp"></polymer-element-meta>
+  <polymer-element-meta name="polymer-key-helper"></polymer-element-meta>
+  <polymer-element-meta name="polymer-layout"></polymer-element-meta>
+  <polymer-element-meta name="polymer-localstorage"></polymer-element-meta>
+  <polymer-element-meta name="polymer-media-query"></polymer-element-meta>
+  <polymer-element-meta name="polymer-meta"></polymer-element-meta>
+  <polymer-element-meta name="polymer-overlay"></polymer-element-meta>
+  <polymer-element-meta name="polymer-page"></polymer-element-meta>
+  <polymer-element-meta name="polymer-selector"></polymer-element-meta>
+  <polymer-element-meta name="polymer-shared-lib"></polymer-element-meta>
+  <polymer-element-meta name="polymer-view-source-link"></polymer-element-meta>
+</meta>
\ No newline at end of file
diff --git a/polymer-file/polymer-file.html b/polymer-file/polymer-file.html
index 94590d3..6ecb17d 100644
--- a/polymer-file/polymer-file.html
+++ b/polymer-file/polymer-file.html
@@ -10,14 +10,12 @@
  */
 
 /**
- * @class polymer-file
- *
  * polymer-file provides File API operations.
  *
  * Examples:
  *
  *     <polymer-file id="file" readas="dataurl" 
-                     on-polymer-result="handleResult"></polymer-file>
+ *                   on-polymer-result="handleResult"></polymer-file>
  *     ...
  *     this.$.file.blob = new Blob(['abc', {type: 'text/plain'}]);
  *     this.$.file.read();
@@ -28,21 +26,24 @@
  *                   result="{{result}}"></polymer-file>
  *     ...
  *     this.$.file.blob = new Blob(['abc', {type: 'text/plain'}]);
+ *
+ * @class polymer-file
+ */
+/**
+ * Fired when a file read has complete.
+ * 
+ * @event polymer-result
+ * @param {Object} detail
+ * @param {Object} detail.result The result of the read.
+ */
+/**
+ * Fired if there is an error in the file read.
+ * 
+ * @event polymer-error
+ * @param {Object} detail
+ * @param {Object} detail.error Information on the error.
+ * 
  */
- /**
-  * Fired when a file read has complete.
-  * 
-  * @event polymer-result
-  * @param {Object} detail
-  * @param {Object} detail.result The result of the read.
-  */
-  /**
-  * Fired if there is an error in the file read.
-  * 
-  * @event polymer-error
-  * @param {Object} detail
-  * @param {Object} detail.error Information on the error.
-  */
 -->
 <polymer-element name="polymer-file" attributes="blob result auto readas">
 <template>
diff --git a/polymer-grid-layout/polymer-grid-layout.html b/polymer-grid-layout/polymer-grid-layout.html
index e3f9501..0501bda 100644
--- a/polymer-grid-layout/polymer-grid-layout.html
+++ b/polymer-grid-layout/polymer-grid-layout.html
@@ -45,7 +45,7 @@
         // mesaure the matrix, must be rectangular
         rowCount = matrix.length;
         colCount = rowCount && matrix[0].length || 0;
-        // build a transposed matrix
+        // transpose matrix
         var transpose = [];
         for (var i=0; i<colCount; i++) {
           var c = [];
@@ -136,6 +136,16 @@
       var m = 0;
 
       function railize(count, sizeFn) {
+        // create rails for `count` tracks using `sizeFn(track)`
+        // tracks are bounded, so for n tracks there are (n+1) rails
+        //
+        //   |track|track|track|
+        //  0|->sz0|->sz1|<-sz2|0
+        //
+        //   |track|track|track|
+        //  0|->sz0|     |<-sz2|0
+        //
+        //  0|
         var rails = [];
         var a = 0;
         for (var i=0; i<count; i++) {
@@ -160,20 +170,33 @@
         return rails;
       }
 
-      function _position(box, maj, min, ext, a, b) {
-        box.position = 'absolute';
-        box.boxSizing = box.mozBoxSizing = 'border-box';
-        box[maj] = box[min] = box[ext] = '';
+      function unposition(box) {
+        var style = box.style;
+        //style.left = style.right = style.top = style.bottom = style.width = style.height = '';
+        if (style.left && style.right) {
+          style.left = '';
+        }
+        if (style.top && style.bottom) {
+          style.top = '';
+        }
+        style.width = style.height = '';
+      }
+
+      function _position(style, maj, min, ext, a, b) {
+        style.position = 'absolute';
+        style.boxSizing = style.mozBoxSizing = 'border-box';
+        style[maj] = style[min] = '';
+        style[ext] = 'auto';
         if (a.s < 0 && b.s < 0) {
-          box[ext] = a.p - b.p - m - m + 'px';
-          //box[min] = b.p + m + 'px';
-          box[maj] = 'calc(100% - ' + (a.p - b.p - m - m) + 'px' + ')';
+          var siz = a.p - b.p - m - m;
+          style[ext] = siz + 'px';
+          style[maj] = 'calc(100% - ' + (b.p + siz + m) + 'px' + ')';
         } else if (b.s < 0) {
-          box[maj] = a.p + m + 'px';
-          box[min] = b.p + m + 'px';
+          style[maj] = a.p + m + 'px';
+          style[min] = b.p + m + 'px';
         } else {
-          box[maj] = a.p + m + 'px';
-          box[ext] = b.p - a.p - m - m + 'px';
+          style[maj] = a.p + m + 'px';
+          style[ext] = b.p - a.p - m - m + 'px';
         }
       }
 
@@ -189,6 +212,8 @@
         nodes = anodes;
         matrixillate(matrix);
 
+        nodes.forEach(unposition);
+
         columns = railize(colCount, colWidth);
         rows = railize(rowCount, rowHeight);
 
@@ -225,9 +250,12 @@
           });
           if (l == undefined) {
             //console.log('unused');
-            node.style.visibility = 'hidden';
+            //node.style.visibility = 'hidden';
+            node.style.position = 'absolute';
+            node.style[Math.random() >= 0.5 ? 'left' : 'top'] = '110%';
           } else {
-            node.style.visibility = '';
+            //node.style.visibility = '';
+            node.style.left = node.style.top = '';
             //console.log(l, r, t, b);
             position(node, l, r, t, b);
           }
diff --git a/polymer-selector/polymer-selector.html b/polymer-selector/polymer-selector.html
index 8dd1d98..bfbdc3d 100644
--- a/polymer-selector/polymer-selector.html
+++ b/polymer-selector/polymer-selector.html
@@ -9,13 +9,13 @@
  */
 /**
  * polymer-selector is used to display a list of elements that can be selected.
- * The attribute "selected" indicates which item element is being selected.
- * Tapping on the item element would fire "polymer-activate" event. And use
- * "polymer-select" event to listen for selection changes.
+ * The attribute "selected" indicates which element is being selected.
+ * Tapping on the element to change selection would fire "polymer-activate"
+ * event.
  *
  * Example:
  *
- *     <polymer-selector selected="0">
+ *     <polymer-selector selected="0" on-polymer-activate="activateAction">
  *       <div>Item 1</div>
  *       <div>Item 2</div>
  *       <div>Item 3</div>
@@ -39,25 +39,17 @@
  * @class polymer-selector
  */
 /**
- * Fired when selection changes.
+ * Fired when an element is selected via tap.
  * 
- * @event polymer-select
+ * @event activate
  * @param {Object} detail
- *   @param {boolean} isSelected
- *   @param {Object} detail.item the item element
- */
-/**
- * Fired when an item element is tapped.
- * 
- * @event polymer-activate
- * @param {Object} detail
- *   @param {Object} detail.item the item element
+ *   @param {Object} detail.item the selected element
  */
 -->
 <link rel="import" href="polymer-selection.html">
 
 <polymer-element name="polymer-selector" on-tap="activateHandler" touch-action="none"
-    attributes="selected multi valueattr selectedClass setectedProperty selectedModel notap">
+    attributes="selected multi valueattr selectedClass selectedProperty selectedModel notap">
   <template>
     <polymer-selection id="selection" multi="{{multi}}" on-polymer-select="selectionSelect"></polymer-selection>
     <content id="items" select="*"></content>
@@ -65,10 +57,10 @@
   <script>
     Polymer('polymer-selector', {
       /**
-       * Gets or sets the selected element.  Default to use the index
-       * of the item element.
+       * Gets or sets the selected element.  Default is to use the index
+       * of the currently selected element.
        *
-       * If you want a specific attribute value of the element to be
+       * If you want a specific attribute value of the selected element to be
        * used instead of index, set "valueattr" to that attribute name.
        *
        * Example:
@@ -79,20 +71,8 @@
        *       <div label="zot"></div>
        *     </polymer-selector>
        *
-       * In multi-selection this should be an array of values.
-       *
-       * Example:
-       *
-       *     <polymer-selector id="selector" valueattr="label" multi>
-       *       <div label="foo"></div>
-       *       <div label="bar"></div>
-       *       <div label="zot"></div>
-       *     </polymer-selector>
-       *
-       *     this.$.selector.selected = ['foo', 'zot'];
-       *
        * @attribute selected
-       * @type string or array
+       * @type string
        * @default null
        */
       selected: null,
@@ -128,17 +108,9 @@
        * @type string
        * @default 'active'
        */
-      setectedProperty: 'active',
-      /**
-       * In single selection this returns the currently selected element.
-       * 
-       * @attribute selectedItem
-       * @type Object
-       * @default null
-       */
-      selectedItem: null,
+      selectedProperty: 'active',
       /**
-       * Returns the model associated with the selectedItem.
+       * Returns the model associated with the selected element.
        * 
        * @attribute selectedModel
        * @type Object
@@ -155,34 +127,10 @@
         return this.$.selection.getSelection();
       },
       selectedChanged: function() {
-        if (this.multi) {
-          if (!Array.isArray(this.selected) && 
-              this.selected !== null && this.selected !== undefined) {
-            this.selected = [this.selected];
-            return;
-          }
-          this.clearSelection();
-          this.selected && this.selected.forEach(function(s) {
-            this.valueToSelection(s);
-          }.bind(this));
-        } else {
-          this.valueToSelection(this.selected);
-        }
-      },
-      clearSelection: function() {
-        if (this.multi) {
-          this.selection.slice().forEach(function(s) {
-            this.$.selection.setItemSelected(s, false);
-          }.bind(this));
-        } else {
-          this.$.selection.setItemSelected(this.selection, false);
-        }
-        this.selectedItem = null;
-        this.$.selection.clear();
+        this.valueToSelection(this.selected);
       },
       valueToSelection: function(value) {
-        var item = (value === null || value === undefined) ? 
-            null : this.items[this.valueToIndex(value)];
+        var item = this.items[this.valueToIndex(value)];
         this.selectedItem = item;
         this.$.selection.select(item);
       },
@@ -210,15 +158,12 @@
       // events fired from <polymer-selection> object
       selectionSelect: function(e, detail) {
         if (detail.item) {
-          this.applySelection(detail.item, detail.isSelected)
-        }
-      },
-      applySelection: function(item, isSelected) {
-        if (this.selectedClass) {
-          item.classList.toggle(this.selectedClass, isSelected);
-        }
-        if (this.setectedProperty) {
-          item[this.setectedProperty] = isSelected;
+          if (this.selectedClass) {
+            detail.item.classList.toggle(this.selectedClass, detail.isSelected);
+          }
+          if (this.selectedProperty) {
+            detail.item[this.selectedProperty] = detail.isSelected;
+          }
         }
       },
       // event fired from host
@@ -226,30 +171,19 @@
         if (!this.notap) {
           var i = this.findDistributedTarget(e.target, this.items);
           if (i >= 0) {
-            var item = this.items[i];
-            var selected = this.valueForNode(item) || i;
+            var selected = this.valueForNode(this.items[i]) || i;
             if (this.multi) {
-              if (this.selected) {
-                this.valueToSelection(selected);
-                var si = this.selected.indexOf(selected);
-                if (si >= 0) {
-                  this.selected.splice(si, 1);
-                } else {
-                  this.selected.push(selected);
-                }
-              } else {
-                this.selected = [selected];
-              }
+              this.valueToSelection(selected);
             } else {
               this.selected = selected;
             }
-            this.asyncFire('polymer-activate', {item: item});
+            this.asyncFire('polymer-activate', {item: this.items[i]});
           }
         }
       },
       findDistributedTarget: function(target, nodes) {
         // find first ancestor of target (including itself) that
-        // is in nodes, if any
+        // is in inNodes, if any
         while (target && target != this) {
           var i = Array.prototype.indexOf.call(nodes, target);
           if (i >= 0) {

From f91b89eb9b4caed6477326e84e5135eaab3d5e07 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Wed, 17 Jul 2013 14:04:40 -0700
Subject: [PATCH 13/42] fix commit:a3c8a99 which overwrites some previous
 changes

---
 polymer-selector/polymer-selector.html | 114 +++++++++++++++++++------
 1 file changed, 90 insertions(+), 24 deletions(-)

diff --git a/polymer-selector/polymer-selector.html b/polymer-selector/polymer-selector.html
index bfbdc3d..a8f4593 100644
--- a/polymer-selector/polymer-selector.html
+++ b/polymer-selector/polymer-selector.html
@@ -9,13 +9,13 @@
  */
 /**
  * polymer-selector is used to display a list of elements that can be selected.
- * The attribute "selected" indicates which element is being selected.
- * Tapping on the element to change selection would fire "polymer-activate"
- * event.
+ * The attribute "selected" indicates which item element is being selected.
+ * Tapping on the item element would fire "polymer-activate" event. And use
+ * "polymer-select" event to listen for selection changes.
  *
  * Example:
  *
- *     <polymer-selector selected="0" on-polymer-activate="activateAction">
+ *     <polymer-selector selected="0">
  *       <div>Item 1</div>
  *       <div>Item 2</div>
  *       <div>Item 3</div>
@@ -39,11 +39,19 @@
  * @class polymer-selector
  */
 /**
- * Fired when an element is selected via tap.
+ * Fired when selection changes.
  * 
- * @event activate
+ * @event polymer-select
  * @param {Object} detail
- *   @param {Object} detail.item the selected element
+ *   @param {boolean} isSelected
+ *   @param {Object} detail.item the item element
+ */
+/**
+ * Fired when an item element is tapped.
+ * 
+ * @event polymer-activate
+ * @param {Object} detail
+ *   @param {Object} detail.item the item element
  */
 -->
 <link rel="import" href="polymer-selection.html">
@@ -57,10 +65,10 @@
   <script>
     Polymer('polymer-selector', {
       /**
-       * Gets or sets the selected element.  Default is to use the index
-       * of the currently selected element.
+       * Gets or sets the selected element.  Default to use the index
+       * of the item element.
        *
-       * If you want a specific attribute value of the selected element to be
+       * If you want a specific attribute value of the element to be
        * used instead of index, set "valueattr" to that attribute name.
        *
        * Example:
@@ -71,8 +79,20 @@
        *       <div label="zot"></div>
        *     </polymer-selector>
        *
+       * In multi-selection this should be an array of values.
+       *
+       * Example:
+       *
+       *     <polymer-selector id="selector" valueattr="label" multi>
+       *       <div label="foo"></div>
+       *       <div label="bar"></div>
+       *       <div label="zot"></div>
+       *     </polymer-selector>
+       *
+       *     this.$.selector.selected = ['foo', 'zot'];
+       *
        * @attribute selected
-       * @type string
+       * @type string or array
        * @default null
        */
       selected: null,
@@ -110,7 +130,15 @@
        */
       selectedProperty: 'active',
       /**
-       * Returns the model associated with the selected element.
+       * In single selection this returns the currently selected element.
+       * 
+       * @attribute selectedItem
+       * @type Object
+       * @default null
+       */
+      selectedItem: null,
+      /**
+       * Returns the model associated with the selectedItem.
        * 
        * @attribute selectedModel
        * @type Object
@@ -127,10 +155,34 @@
         return this.$.selection.getSelection();
       },
       selectedChanged: function() {
-        this.valueToSelection(this.selected);
+        if (this.multi) {
+          if (!Array.isArray(this.selected) && 
+              this.selected !== null && this.selected !== undefined) {
+            this.selected = [this.selected];
+            return;
+          }
+          this.clearSelection();
+          this.selected && this.selected.forEach(function(s) {
+            this.valueToSelection(s);
+          }.bind(this));
+        } else {
+          this.valueToSelection(this.selected);
+        }
+      },
+      clearSelection: function() {
+        if (this.multi) {
+          this.selection.slice().forEach(function(s) {
+            this.$.selection.setItemSelected(s, false);
+          }.bind(this));
+        } else {
+          this.$.selection.setItemSelected(this.selection, false);
+        }
+        this.selectedItem = null;
+        this.$.selection.clear();
       },
       valueToSelection: function(value) {
-        var item = this.items[this.valueToIndex(value)];
+        var item = (value === null || value === undefined) ? 
+            null : this.items[this.valueToIndex(value)];
         this.selectedItem = item;
         this.$.selection.select(item);
       },
@@ -158,12 +210,15 @@
       // events fired from <polymer-selection> object
       selectionSelect: function(e, detail) {
         if (detail.item) {
-          if (this.selectedClass) {
-            detail.item.classList.toggle(this.selectedClass, detail.isSelected);
-          }
-          if (this.selectedProperty) {
-            detail.item[this.selectedProperty] = detail.isSelected;
-          }
+          this.applySelection(detail.item, detail.isSelected)
+        }
+      },
+      applySelection: function(item, isSelected) {
+        if (this.selectedClass) {
+          item.classList.toggle(this.selectedClass, isSelected);
+        }
+        if (this.selectedProperty) {
+          item[this.selectedProperty] = isSelected;
         }
       },
       // event fired from host
@@ -171,19 +226,30 @@
         if (!this.notap) {
           var i = this.findDistributedTarget(e.target, this.items);
           if (i >= 0) {
-            var selected = this.valueForNode(this.items[i]) || i;
+            var item = this.items[i];
+            var selected = this.valueForNode(item) || i;
             if (this.multi) {
-              this.valueToSelection(selected);
+              if (this.selected) {
+                this.valueToSelection(selected);
+                var si = this.selected.indexOf(selected);
+                if (si >= 0) {
+                  this.selected.splice(si, 1);
+                } else {
+                  this.selected.push(selected);
+                }
+              } else {
+                this.selected = [selected];
+              }
             } else {
               this.selected = selected;
             }
-            this.asyncFire('polymer-activate', {item: this.items[i]});
+            this.asyncFire('polymer-activate', {item: item});
           }
         }
       },
       findDistributedTarget: function(target, nodes) {
         // find first ancestor of target (including itself) that
-        // is in inNodes, if any
+        // is in nodes, if any
         while (target && target != this) {
           var i = Array.prototype.indexOf.call(nodes, target);
           if (i >= 0) {

From 0af42539f185f8e3a0c77f28d95b2893ef186c2a Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Wed, 17 Jul 2013 15:31:20 -0700
Subject: [PATCH 14/42] add attributes h-flex and v-flex for flexbox
 (row/column)

---
 polymer-flex-layout/polymer-flex-layout.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/polymer-flex-layout/polymer-flex-layout.css b/polymer-flex-layout/polymer-flex-layout.css
index 6d0c177..d3605db 100644
--- a/polymer-flex-layout/polymer-flex-layout.css
+++ b/polymer-flex-layout/polymer-flex-layout.css
@@ -3,7 +3,7 @@ Copyright 2013 The Polymer Authors. All rights reserved.
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 */
-.flexbox {
+.flexbox, [h-flex], [v-flex] {
   display: -webkit-box !important;
   display: -ms-flexbox !important;
   display: -moz-flex !important;
@@ -11,7 +11,7 @@ license that can be found in the LICENSE file.
   display: flex !important;
 }
 
-.flexbox.row {
+.flexbox.row, [h-flex] {
   -webkit-box-orient: horizontal;
   -ms-flex-direction: row;
   -moz-flex-direction: row;
@@ -19,7 +19,7 @@ license that can be found in the LICENSE file.
   flex-direction: row;
 }
 
-.flexbox.column {
+.flexbox.column, [v-flex] {
   -webkit-box-orient: vertical;
   -ms-flex-direction: column;
   -moz-flex-direction: column;
@@ -102,7 +102,7 @@ content::-webkit-distributed([fit]) {
 }
 
 @host {
-  .flexbox {
+  .flexbox, [h-flex], [v-flex] {
     display: -webkit-box !important;
     display: -ms-flexbox !important;
     display: -moz-flex !important;
@@ -110,7 +110,7 @@ content::-webkit-distributed([fit]) {
     display: flex !important;
   }
   
-  .flexbox.row {
+  .flexbox.row, [h-flex] {
     -webkit-box-orient: horizontal;
     -ms-flex-direction: row;
     -moz-flex-direction: row;
@@ -118,7 +118,7 @@ content::-webkit-distributed([fit]) {
     flex-direction: row;
   }
   
-  .flexbox.column {
+  .flexbox.column, [v-flex] {
     -webkit-box-orient: vertical;
     -ms-flex-direction: column;
     -moz-flex-direction: column;

From d68e0425f20bff4fd63d334c486162cf857d431d Mon Sep 17 00:00:00 2001
From: Scott Miles <sjmiles@google.com>
Date: Thu, 18 Jul 2013 14:25:09 -0700
Subject: [PATCH 15/42] fix doc tool provisioning

---
 gruntfile.js |  2 +-
 package.json | 10 +---------
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/gruntfile.js b/gruntfile.js
index 2c12c35..16c32c2 100644
--- a/gruntfile.js
+++ b/gruntfile.js
@@ -18,7 +18,7 @@ module.exports = function(grunt) {
           outdir: 'docs',
           linkNatives: 'true',
           tabtospace: 2,
-          themedir: '../docs/doc_themes/footstrap'
+          themedir: 'tools/doc/themes/footstrap'
         }
       }
     },
diff --git a/package.json b/package.json
index 3b8c527..1a5ed1e 100644
--- a/package.json
+++ b/package.json
@@ -2,15 +2,7 @@
   "name": "PolymerElements",
   "version": "0.0.1",
   "devDependencies": {
-    "mocha": "*",
-    "chai": "*",
     "grunt": "*",
-    "grunt-contrib-uglify": "*",
-    "grunt-contrib-yuidoc": "*",
-    "grunt-karma-0.9.1": "~0.4.3",
-    "karma-mocha": "*",
-    "karma-browserstack-launcher": "*",
-    "karma-script-launcher": "*",
-    "karma-crbot-reporter": "*"
+    "grunt-contrib-yuidoc": "*"
   }
 }

From dd9cb8fe0b651b28cf564813ee24bf7cce359ec1 Mon Sep 17 00:00:00 2001
From: Scott Miles <sjmiles@google.com>
Date: Thu, 18 Jul 2013 18:52:34 -0700
Subject: [PATCH 16/42] add 'tools' submodule for doc support

---
 .gitmodules | 3 +++
 tools       | 1 +
 2 files changed, 4 insertions(+)
 create mode 100644 .gitmodules
 create mode 160000 tools

diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..fdec30a
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "tools"]
+	path = tools
+	url = https://sjmiles@github.com/Polymer/tools.git
diff --git a/tools b/tools
new file mode 160000
index 0000000..d4194fe
--- /dev/null
+++ b/tools
@@ -0,0 +1 @@
+Subproject commit d4194fed0aa30e89fd3ba405f64ade3e45bd6d47

From bedd75fb7ec3c8ed83b62f620a11389acbd9e06a Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Thu, 18 Jul 2013 19:40:39 -0700
Subject: [PATCH 17/42] don't need to collapse if the target's initial size is
 0 (closed)

---
 polymer-collapse/polymer-collapse.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/polymer-collapse/polymer-collapse.html b/polymer-collapse/polymer-collapse.html
index eecfbc7..8718d34 100644
--- a/polymer-collapse/polymer-collapse.html
+++ b/polymer-collapse/polymer-collapse.html
@@ -29,7 +29,7 @@
  * @class polymer-collapse
  */
 -->
-<polymer-element name="polymer-collapse" attributes="targetId target horizontal closed duration fixedSize">
+<polymer-element name="polymer-collapse" attributes="targetId target horizontal closed duration fixedSize defaultClosed">
   <template>
     <style>
       @host {   
@@ -93,6 +93,7 @@
        */
       fixedSize: false,
       size: null,
+      defaultClosed: false,
       removed: function() {
         this.removeListeners(this.target);
       },
@@ -111,7 +112,7 @@
         if (this.target) {
           this.addListeners(this.target);
         }
-        if (this.closed) {
+        if (this.closed && !this.defaultClosed) {
           this.update();
         }
       },
@@ -168,9 +169,10 @@
           this.size = getComputedStyle(this.target)[this.dimension];
         }
         this.target.style.overflow = 'hidden';
-        if (!this.size) {
+        if (!this.size && !this.defaultClosed) {
           this.updateSize(this.calcSize(), null);
         }
+        this.defaultClosed = false;
       },
       show: function() {
         if (!this.size) {

From 5320f18955628541a68896b599fba52531fca17b Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Thu, 18 Jul 2013 22:49:38 -0700
Subject: [PATCH 18/42] don't need to collapse/hide if the target's initial
 size is 0

---
 polymer-collapse/polymer-collapse.html | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/polymer-collapse/polymer-collapse.html b/polymer-collapse/polymer-collapse.html
index 8718d34..cf94346 100644
--- a/polymer-collapse/polymer-collapse.html
+++ b/polymer-collapse/polymer-collapse.html
@@ -110,6 +110,7 @@
         }
         this.horizontalChanged();
         if (this.target) {
+          this.target.style.overflow = 'hidden';
           this.addListeners(this.target);
         }
         if (this.closed && !this.defaultClosed) {
@@ -158,6 +159,10 @@
           return;
         }
         this.horizontalChanged();
+        if (this.closed && this.defaultClosed) {
+          this.defaultClosed = false;
+          return;
+        }
         this.prepare();
         this[this.closed ? 'hide' : 'show']();
       },
@@ -168,11 +173,9 @@
         if (this.fixedSize && this.closed) {
           this.size = getComputedStyle(this.target)[this.dimension];
         }
-        this.target.style.overflow = 'hidden';
-        if (!this.size && !this.defaultClosed) {
+        if (!this.size) {
           this.updateSize(this.calcSize(), null);
         }
-        this.defaultClosed = false;
       },
       show: function() {
         if (!this.size) {

From d448fd5755924749ec0bf2d000557f05ee48b6d9 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Mon, 15 Jul 2013 10:19:37 +0100
Subject: [PATCH 19/42] polymer-animation: update polymer-translate

---
 polymer-animation/polymer-animation.html |  1 -
 polymer-animation/polymer-translate.html | 28 ++++++++----------------
 2 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/polymer-animation/polymer-animation.html b/polymer-animation/polymer-animation.html
index 9012f16..48a43b1 100644
--- a/polymer-animation/polymer-animation.html
+++ b/polymer-animation/polymer-animation.html
@@ -242,7 +242,6 @@
               props[name] = timing[t].isNumber ? toNumber(this[t], timing[t].allowInfinity) : this[t];
             }
           }
-          console.log('timing', props);
           return props;
         },
         get animationEffect() {
diff --git a/polymer-animation/polymer-translate.html b/polymer-animation/polymer-translate.html
index 77ad25a..b83c3a9 100644
--- a/polymer-animation/polymer-translate.html
+++ b/polymer-animation/polymer-translate.html
@@ -1,21 +1,13 @@
 <link rel="import" href="polymer-animation.html">
-<polymer-element name="polymer-translate" extends="polymer-animation">
+<polymer-element name="polymer-translate" extends="polymer-animation" attributes="fromX fromY toX toY">
   <template>
-  <!--
-    <g-property name="transform">
-      <g-keyframe value="translate({{fromX}},{{fromY}})"></g-keyframe>
-      <g-keyframe value="translate({{toX}},{{toY}})"></g-keyframe>
-    </g-property>
-  //-->
   </template>
   <script>
     Polymer('polymer-translate', {
-      publish: {
-        fromX: '0',
-        fromY: '0',
-        toX: '0',
-        toY: '0'
-      },
+      fromX: '0',
+      fromY: '0',
+      toX: '0',
+      toY: '0',
       fromXChanged: function() {
         this.generate();
       },
@@ -29,12 +21,10 @@
         this.generate();
       },
       generate: function() {
-        this.properties = {
-          transform: [
-            'translate(' + this.fromX + ',' + this.fromY + ')',
-            'translate(' + this.toX + ',' + this.toY + ')'
-          ]
-        };
+        this.keyframes = [
+          {transform: 'translate(' + this.fromX + ',' + this.fromY + ')'},
+          {transform: 'translate(' + this.toX + ',' + this.toY + ')'}
+        ];
       }
     });
   </script>

From 32a21819c1aa0f56c06d5bb7ab42b6d1967c76af Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Mon, 22 Jul 2013 17:40:37 -0700
Subject: [PATCH 20/42] polymer-animation: use TimingEvents

---
 polymer-animation/index.html             | 16 ++++++++++------
 polymer-animation/polymer-animation.html | 13 +++----------
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/polymer-animation/index.html b/polymer-animation/index.html
index cd5f559..e5b7073 100644
--- a/polymer-animation/index.html
+++ b/polymer-animation/index.html
@@ -91,16 +91,20 @@
       <polymer-flip axis="y">flip Y</polymer-flip>
       <polymer-blink>blink</polymer-blink>
       <polymer-fadein>fade in</polymer-fadein>
-      <polymer-fadeout>fade out</polymer-fadeout>
+      <polymer-fadeout>fade out (with event)</polymer-fadeout>
     </div>
     <script>
       document.addEventListener('WebComponentsReady', function() {
         document.querySelector('.animations').addEventListener('click',
-            function(e) {
-              var animation = e.target;
-              animation.target = target;
-              animation.play();
-            });
+					function(e) {
+						var animation = e.target;
+						animation.target = target;
+						animation.play();
+					});
+					document.querySelector('polymer-fadeout').addEventListener(
+						'complete', function(e) {
+							alert('complete!');
+						});
       });
     </script>
   </body>
diff --git a/polymer-animation/polymer-animation.html b/polymer-animation/polymer-animation.html
index 48a43b1..4a107bd 100644
--- a/polymer-animation/polymer-animation.html
+++ b/polymer-animation/polymer-animation.html
@@ -145,10 +145,12 @@
             //this.animation && console.log('play', this.animation);
             if (this.animation) {
               this.cancel();
+							if (!this.animation.onend) {
+								this.animation.onend = this.complete.bind(this);
+							}
               this.player = document.timeline.play(this.animation);
               this.player.paused = false;
               this.player.currentTime = 0;
-              this.monitor();
             }
           });
         },
@@ -260,15 +262,6 @@
           }
           return new KeyframeAnimationEffect(frames, this.composite);
         },
-        monitor: function() {
-          // TODO(sorvell): adding brittle support for an end event
-          if (this.player && this.player.source &&
-              this.player.source._isPastEndOfActiveInterval()) {
-            this.complete();
-          } else {
-            requestAnimationFrame(this.monitor.bind(this));
-          }
-        },
         // intended for user implementation
         complete: function() {
           this.fire('complete');

From c69074b9970e2464a738fba57c54c16d89f9a746 Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Thu, 18 Jul 2013 09:32:30 -0700
Subject: [PATCH 21/42] include docs infrastructure

---
 .gitignore   | 2 ++
 .gitmodules  | 2 +-
 gruntfile.js | 6 +++---
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index 7a42667..f2630ac 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,4 @@
 /node_modules
 /docs
+
+/build.bat
diff --git a/.gitmodules b/.gitmodules
index fdec30a..f30fbaa 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,3 @@
 [submodule "tools"]
 	path = tools
-	url = https://sjmiles@github.com/Polymer/tools.git
+	url = https://github.com/Polymer/tools.git
diff --git a/gruntfile.js b/gruntfile.js
index 16c32c2..9d0f9db 100644
--- a/gruntfile.js
+++ b/gruntfile.js
@@ -5,6 +5,7 @@
  */
 module.exports = function(grunt) {
   grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
     yuidoc: {
       compile: {
         name: '<%= pkg.name %>',
@@ -12,7 +13,7 @@ module.exports = function(grunt) {
         version: '<%= pkg.version %>',
         url: '<%= pkg.homepage %>',
         options: {
-          exclude: 'third_party',
+          exclude: 'docs',
           extension: '.js,.html',
           paths: '.',
           outdir: 'docs',
@@ -21,8 +22,7 @@ module.exports = function(grunt) {
           themedir: 'tools/doc/themes/footstrap'
         }
       }
-    },
-    pkg: grunt.file.readJSON('package.json')
+    }
   });
 
   // plugins

From 6f418492b7b6a963494276bd5925bfa99a3f2d7d Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Tue, 23 Jul 2013 00:01:34 -0700
Subject: [PATCH 22/42] consolidate unpositioning

---
 polymer-grid-layout/polymer-grid-layout.html | 11 +++---
 polymer-signals/index.html                   | 41 ++++++++++++++++++++
 polymer-signals/polymer-signals.html         | 41 ++++++++++++++++++++
 3 files changed, 87 insertions(+), 6 deletions(-)
 create mode 100644 polymer-signals/index.html
 create mode 100644 polymer-signals/polymer-signals.html

diff --git a/polymer-grid-layout/polymer-grid-layout.html b/polymer-grid-layout/polymer-grid-layout.html
index 0501bda..daccabd 100644
--- a/polymer-grid-layout/polymer-grid-layout.html
+++ b/polymer-grid-layout/polymer-grid-layout.html
@@ -180,11 +180,12 @@
           style.top = '';
         }
         style.width = style.height = '';
+        style.position = 'absolute';
+        style.display = 'inline-block';
+        style.boxSizing = style.mozBoxSizing = 'border-box';
       }
 
       function _position(style, maj, min, ext, a, b) {
-        style.position = 'absolute';
-        style.boxSizing = style.mozBoxSizing = 'border-box';
         style[maj] = style[min] = '';
         style[ext] = 'auto';
         if (a.s < 0 && b.s < 0) {
@@ -250,18 +251,16 @@
           });
           if (l == undefined) {
             //console.log('unused');
-            //node.style.visibility = 'hidden';
             node.style.position = 'absolute';
             node.style[Math.random() >= 0.5 ? 'left' : 'top'] = '110%';
+            //node.style.opacity = 0.2;
           } else {
-            //node.style.visibility = '';
-            node.style.left = node.style.top = '';
+            //node.style.opacity = '';
             //console.log(l, r, t, b);
             position(node, l, r, t, b);
           }
         });
         //console.groupEnd();
-
         //console.groupEnd();
       }
 
diff --git a/polymer-signals/index.html b/polymer-signals/index.html
new file mode 100644
index 0000000..5e067cd
--- /dev/null
+++ b/polymer-signals/index.html
@@ -0,0 +1,41 @@
+<!doctype html>
+<html>
+<head>
+  <title></title>
+  <script src="http://www.polymer-project.org/polymer/polymer.min.js"></script>
+  <link rel="import" href="polymer-signals.html">
+</head>
+<body>
+
+<polymer-element name="my-element">
+  <template>
+    Hello
+  </template>
+  <script>
+    Polymer('my-element', {
+      ready: function() {
+        this.asyncFire('polymer-signal', {name: "foo", data: "Foo!"});
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="my-app">
+  <template>
+    <polymer-signals on-polymer-signal-foo="fooSignal"></polymer-signals>
+    <content></cotnent>
+  </template>
+  <script>
+    Polymer('my-app', {
+      fooSignal: function(e, detail, sender) {
+        this.innerHTML += '<br>[my-app] got a [' + detail + '] signal<br>';
+      }
+    });
+  </script>
+</polymer-element>
+
+<my-element></my-element>
+<my-app></my-app>
+
+</body>
+</html>
diff --git a/polymer-signals/polymer-signals.html b/polymer-signals/polymer-signals.html
new file mode 100644
index 0000000..ff48ba1
--- /dev/null
+++ b/polymer-signals/polymer-signals.html
@@ -0,0 +1,41 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<polymer-element name="polymer-signals">
+  <script>
+    (function(){
+      Polymer('polymer-signals', {
+        inserted: function() {
+          signals.push(this);
+        },
+        removed: function() {
+          var i = signals.indexOf(this);
+          if (i >= 0) {
+            signals.splice(i, 1);
+          }
+        }
+      });
+      // private shared database
+      var signals = [];
+      // signal dispatcher
+      function notify(name, data) {
+        // convert generic-signal event to named-signal event
+        var signal = new CustomEvent('polymer-signal-' + name, {
+          bubbles: false,
+          detail: data
+        });
+        // disptach named-signal to all 'signals' instances,
+        // only interested listeners will react
+        signals.forEach(function(s) {
+          s.dispatchEvent(signal);
+        });
+      }
+      // signal listener at document
+      document.addEventListener('polymer-signal', function(e) {
+        notify(e.detail.name, e.detail.data);
+      });
+    })();
+  </script>
+</polymer-element>

From 3648208dc7df554a92ee31f804690096688ebae3 Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Tue, 23 Jul 2013 00:11:45 -0700
Subject: [PATCH 23/42] freshen tools

---
 tools | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools b/tools
index d4194fe..313f752 160000
--- a/tools
+++ b/tools
@@ -1 +1 @@
-Subproject commit d4194fed0aa30e89fd3ba405f64ade3e45bd6d47
+Subproject commit 313f7524ce37689ebfb60c81f7bda721535467cf

From d3f3ba3610f43609bd6e224fff6649adc314a2a4 Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Wed, 24 Jul 2013 11:22:34 -0700
Subject: [PATCH 24/42] tweak the hiding code to try to get less janky
 transitions

---
 polymer-grid-layout/polymer-grid-layout.html | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/polymer-grid-layout/polymer-grid-layout.html b/polymer-grid-layout/polymer-grid-layout.html
index daccabd..c23e7c4 100644
--- a/polymer-grid-layout/polymer-grid-layout.html
+++ b/polymer-grid-layout/polymer-grid-layout.html
@@ -173,12 +173,17 @@
       function unposition(box) {
         var style = box.style;
         //style.left = style.right = style.top = style.bottom = style.width = style.height = '';
+        // TODO(sjmiles): this codes tries to preserve position,
+        // so 'unposition' is really 'naturalize' or something
+        /*
         if (style.left && style.right) {
           style.left = '';
         }
         if (style.top && style.bottom) {
           style.top = '';
         }
+        */
+        style.right = style.bottom = '';
         style.width = style.height = '';
         style.position = 'absolute';
         style.display = 'inline-block';
@@ -252,10 +257,12 @@
           if (l == undefined) {
             //console.log('unused');
             node.style.position = 'absolute';
-            node.style[Math.random() >= 0.5 ? 'left' : 'top'] = '110%';
-            //node.style.opacity = 0.2;
+            node.style[Math.random() >= 0.5 ? 'left' : 'top'] = '-110%';
+            node.style.opacity = 0;
+            node.style.pointerEvents = 'none';
           } else {
-            //node.style.opacity = '';
+            node.style.pointerEvents = '';
+            node.style.opacity = '';
             //console.log(l, r, t, b);
             position(node, l, r, t, b);
           }

From 49318f91c0ef57e62da410e320966057cc405fee Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Wed, 24 Jul 2013 11:22:58 -0700
Subject: [PATCH 25/42] (only a) starting point for polymer-list

---
 polymer-list/index.html        |  16 +++
 polymer-list/polymer-list.html | 242 +++++++++++++++++++++++++++++++++
 2 files changed, 258 insertions(+)
 create mode 100644 polymer-list/index.html
 create mode 100644 polymer-list/polymer-list.html

diff --git a/polymer-list/index.html b/polymer-list/index.html
new file mode 100644
index 0000000..9f9bf3b
--- /dev/null
+++ b/polymer-list/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+  <title>List</title>
+  <style>
+    body {
+      font-family: 'Helvectica Neue', Roboto, Helvectica, Arial, sans-serif;
+    }
+  </style>
+  <script src="../../polymer/polymer.js"></script>
+  <link rel="import" href="polymer-list.html">
+</head>
+<body>
+  <polymer-list></polymer-list>
+</body>
+</html>
diff --git a/polymer-list/polymer-list.html b/polymer-list/polymer-list.html
new file mode 100644
index 0000000..9ee6c86
--- /dev/null
+++ b/polymer-list/polymer-list.html
@@ -0,0 +1,242 @@
+<polymer-element name="list-item" attributes="item">
+  <template>
+    <b>{{item}}</b>
+  </template>
+  <script>
+    Polymer('list-item', {
+      ready: function() {
+        var h = Math.floor(Math.random()*360);
+        var light = Boolean(Math.random() > 0.5);
+        if (light) {
+          var l = 0.7;
+          var color = '#222';
+        } else {
+          l = 0.2;
+          color = '#EEE';
+        }
+        this.style.backgroundColor = 'hsl(' + h + ', 100%, ' + Math.floor(l*100) + '%)';
+        this.style.color = color;
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="items-list-view" attributes="items offset limit">
+  <template>
+    <style>
+      @host{*{
+        display: block;
+        border: 1px solid orange;
+        height: 500px;
+        overflow: hidden;
+      }}
+      #content {
+      }
+      list-item {
+        display: block;
+        padding: 8px;
+        border: 1px dotted silver;
+        height: 32px;
+      }
+    </style>
+    <div id="content">
+      <template repeat="{{live}}">
+        <list-item item="{{}}"></list-item>
+      </template>
+    </div>
+  </template>
+  <script>
+    Polymer('items-list-view', {
+      offset: 0,
+      limit: 50,
+      items: null,
+      last: null,
+      itemsChanged: function() {
+        this.invalidate();
+      },
+      offsetChanged: function() {
+        this.invalidate();
+      },
+      invalidate: function() {
+        this.relist();
+      },
+      relist: function() {
+        var frac = this.offset - Math.floor(this.offset);
+        var offset = this.offset - frac;
+        //
+        var l = this.items.length;
+        offset = (l*10 + offset) % l;
+        //
+        var limit = Math.min(this.limit, this.items.length - offset);
+        //
+        if (this.last !== offset) {
+          this.live = this.items.slice(offset, offset + limit);
+          if (limit < this.limit) {
+            this.live = this.live.concat(this.items.slice(0, this.limit - limit));
+          }
+          this.last = offset;
+        }
+        //
+        var rowHeight = 50;
+        var y = Math.round(frac * rowHeight);
+        this.$.content.style.webkitTransform = 'translateY(-' + y + 'px)';
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="items-view" attributes="items offset limit">
+  <template>
+    <style>
+      @host{*{
+        display: block;
+        border: 1px solid orange;
+        height: 500px;
+        overflow: hidden;
+      }}
+      #content {
+        position: relative;
+      }
+      list-item {
+        display: block;
+        padding: 8px;
+        border-radius: 8px;
+        position: absolute;
+        left: 0;
+        top: 0;
+        visibility: hidden;
+      }
+    </style>
+    <div id="content">
+      <template repeat="{{live}}">
+        <list-item item="{{}}"></list-item>
+      </template>
+    </div>
+  </template>
+  <script>
+    Polymer('items-view', {
+      offset: 0,
+      limit: 50,
+      items: null,
+      last: null,
+      amplitude: 120,
+      colWidth: 108,
+      centerY: 200,
+      ready: function() {
+        observeNodes(this.$.content, this.contentNodesChanged, this);
+      },
+      itemsChanged: function() {
+        this.invalidate();
+      },
+      offsetChanged: function() {
+        this.invalidate();
+      },
+      invalidate: function() {
+        this.relist();
+      },
+      contentNodesChanged: function() {
+        this.layout();
+      },
+      layout: function() {
+        var frac = this.offset - Math.floor(this.offset);
+        var offset = this.offset - frac;
+        //
+        var l = this.items.length;
+        offset = (l*10 + offset) % l;
+        //
+        //var pulse = new Date().getTime();
+        //pulse = pulse - Math.floor(pulse / 1e4) * 1e4;
+        //amplitude = Math.floor(100 * Math.sin(pulse / 10 * Math.PI / 180) + 50);
+        //
+        var nodes = this.$.content.children;
+        for (var i=0, j=0, n; n=nodes[i]; i++) {
+          if (n.localName === 'list-item') {
+            var x = Math.round((j - frac) * this.colWidth);
+            var y = Math.round(Math.sin((j - frac) / 5 * 180 * Math.PI/180) * this.amplitude) + this.centerY;
+            j++;
+            n.style.transform = n.style.webkitTransform = 'translateX(' + x + 'px)' + ' translateY(' + y + 'px)';  
+            n.style.visibility = 'visible';
+          }
+        }
+      },
+      relist: function() {
+        var frac = this.offset - Math.floor(this.offset);
+        var offset = this.offset - frac;
+        //
+        var l = this.items.length;
+        offset = (l*10 + offset) % l;
+        //
+        var limit = Math.min(this.limit, this.items.length - offset);
+        //
+        if (this.last !== offset) {
+          this.live = this.items.slice(offset, offset + limit);
+          if (limit < this.limit) {
+            this.live = this.live.concat(this.items.slice(0, this.limit - limit));
+          }
+          this.last = offset;
+        } else {
+          this.layout();
+        }
+      }
+    });
+    function observeNodes(parent, cb, context) {
+      new MutationObserver(cb.bind(context)).observe(parent, {childList: true});
+    }
+  </script>
+</polymer-element>
+
+<polymer-element name="polymer-list">
+  <template>
+    <button on-tap="up" on-pointerup="release">Up</button><button on-tap="down">Down</button><button on-tap="stop">Stop</button>
+    <br><input style="width: 95%;" type="range" min="-10000" max="10000" value="{{scrub}}">
+    <items-view items="{{items}}" offset="{{offset}}" limit="{{limit}}"></items-view>
+  </template>
+  <script>
+    Polymer('polymer-list', {
+      offset: 0,
+      limit: 20,
+      items: null,
+      scrub: 0,
+      ready: function() {
+        this.items = [];
+        for (var i = 0; i < 5000; i++) {
+          var n = '';
+          var l = Math.floor(Math.random() * 8) + 2;
+          for (var j=0; j<l; j++) {
+            n += String.fromCharCode((j === 0 ? 'A' : 'a').charCodeAt(0) + Math.floor(Math.random()*26));
+          }
+          n += ' ';
+          var l = Math.floor(Math.random() * 8) + 2;
+          for (var j=0; j<l; j++) {
+            n += String.fromCharCode((j === 0 ? 'A' : 'a').charCodeAt(0) + Math.floor(Math.random()*26));
+          }
+          this.items[i] = n;
+        }
+        this._move();
+      },
+      stop: function() {
+        this.move(0);
+      },
+      up: function() {
+        this.move(0.1);
+      },
+      down: function() {
+        this.move(-0.1);
+      },
+      move: function(amount) {
+        this.delta = amount;
+      },
+      _move: function() {
+        if (this.delta) {
+          this.offset += this.delta;
+          Platform.flush();
+        }
+        this.async(this._move);
+      },
+      scrubChanged: function() {
+        this.offset = this.scrub / 500;
+        Platform.flush();
+      }
+    });
+  </script>
+</polymer-element>

From a312d1849bad7933c42029f33780aae882b2df72 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Wed, 24 Jul 2013 18:31:00 -0700
Subject: [PATCH 26/42] allow items to be not inside polymer-selector; using
 "target" to specify the element that contains items and "itemsSelector" to
 query which items selector should care.

---
 polymer-selector/index.html            | 134 ++++++++++++++++---------
 polymer-selector/polymer-selector.html |  82 +++++++++++----
 2 files changed, 147 insertions(+), 69 deletions(-)

diff --git a/polymer-selector/index.html b/polymer-selector/index.html
index 505a9dd..94d097c 100644
--- a/polymer-selector/index.html
+++ b/polymer-selector/index.html
@@ -1,58 +1,98 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>polymer-selector</title>
+  <title>Selector</title>
   <script src="../../polymer/polymer.js"></script>
   <link rel="import" href="polymer-selector.html">
-  <style>
-    polymer-selector {
-      display: block;
-      border: 1px solid #ccc;
-      border-bottom: none;
-      background: #666;
-      color: white;
-    }
-    
-    polymer-selector > * {
-      height: 40px;
-      line-height: 40px;
-      padding: 0 20px;
-      border-bottom: 1px solid #ccc;
-    }
-    
-    polymer-selector > *.polymer-selected {
-      background: #333;
-    }
-  </style>
 </head>
 <body>
-  <polymer-selector id="selector1" selected="0">
-    <div>Item 0</div>
-    <div>Item 1</div>
-    <div>Item 2</div>
-    <div>Item 3</div>
-    <div>Item 4</div>
-  </polymer-selector>
-  <h2>Multi-select</h2>
-  <polymer-selector id="selector2" multi>
-    <div>Item 0</div>
-    <div>Item 1</div>
-    <div>Item 2</div>
-    <div>Item 3</div>
-    <div>Item 4</div>
-  </polymer-selector>
-  
-  <script>
-    document.addEventListener('WebComponentsReady', function() {
-      document.querySelector('#selector2').selected = [1, 3];
+  <polymer-element name="selector-examples">
+    <template>
+      <style>
+        .list {
+          display: block;
+          border: 1px solid #ccc;
+          border-bottom: none;
+          background: #666;
+          color: white;
+          list-style: none;
+          margin: 0;
+          padding: 0;
+        }
+        
+        .list > * {
+          height: 40px;
+          line-height: 40px;
+          padding: 0 20px;
+          border-bottom: 1px solid #ccc;
+        }
+        
+        .list > *.polymer-selected {
+          background: #333;
+        }
+        
+        li {
+          height: 30px;
+        }
+        
+        li.polymer-selected:after {
+          content: "\2713";
+          position: absolute;
+          padding-left: 10px;
+        }
+      </style>
+      
+      <h2>basic</h2>
+      <polymer-selector class="list" selected="0">
+        <div>Item 0</div>
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+        <div>Item 4</div>
+      </polymer-selector>
+      
+      <h2>multi-selection</h2>
+      <polymer-selector class="list" selected="{{multiSelected}}" multi>
+        <div>Item 0</div>
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+        <div>Item 4</div>
+      </polymer-selector>
       
-      /* document.querySelector('#selector1').addEventListener('polymer-select', function(e) {
-        console.log('polymer-select1', e.detail.isSelected, e.detail.item);
+      <h2>list</h2>
+      <polymer-selector target="{{$.list}}" selected="0"></polymer-selector>
+      <ul id="list">
+        <li>Item 0</li>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+        <li>Item 4</li>
+      </ul>
+      
+      <h2>binding of a group of radio buttons to a variable</h2>
+      <polymer-selector target="{{$.myForm}}" itemsSelector="input[type=radio]" 
+          selected="{{color}}" valueattr="value" selectedProperty="checked" 
+          activateEvent="change"></polymer-selector>
+      <form id="myForm">
+        <label><input type="radio" name="color" value="red"> Red</label> <br>
+        <label><input type="radio" name="color" value="green"> Green</label> <br>
+        <label><input type="radio" name="color" value="blue"> Blue</label> <br>
+        <p>color = {{color}}</p>
+      </form>
+      
+    </template>
+
+    <script>
+      Polymer('selector-examples', {
+        ready: function() {
+          this.multiSelected = [1, 3];
+          this.color = 'green';
+        }
       });
-      document.querySelector('#selector2').addEventListener('polymer-select', function(e) {
-        console.log('polymer-select2', e.detail.isSelected, e.detail.item);
-      }); */
-    });
-  </script>
+    </script>
+  </polymer-element>
+  
+  <selector-examples></selector-examples>
 </body>
 </html>
diff --git a/polymer-selector/polymer-selector.html b/polymer-selector/polymer-selector.html
index a8f4593..4d50474 100644
--- a/polymer-selector/polymer-selector.html
+++ b/polymer-selector/polymer-selector.html
@@ -21,8 +21,8 @@
  *       <div>Item 3</div>
  *     </polymer-selector>
  *
- * polymer-selector is not styled.  So one needs to use "selected" CSS class
- * to style the selected element.
+ * polymer-selector is not styled.  So one needs to use "polymer-selected" CSS
+ * class to style the selected element.
  * 
  *     <style>
  *       .item.polymer-selected {
@@ -56,8 +56,8 @@
 -->
 <link rel="import" href="polymer-selection.html">
 
-<polymer-element name="polymer-selector" on-tap="activateHandler" touch-action="none"
-    attributes="selected multi valueattr selectedClass selectedProperty selectedModel notap">
+<polymer-element name="polymer-selector"
+    attributes="selected multi valueattr selectedClass selectedProperty selectedModel notap target itemsSelector activateEvent">
   <template>
     <polymer-selection id="selection" multi="{{multi}}" on-polymer-select="selectionSelect"></polymer-selection>
     <content id="items" select="*"></content>
@@ -145,35 +145,70 @@
        * @default null
        */
       selectedModel: null,
+      /**
+       * The target element that contains items.
+       * 
+       * @attribute target
+       * @type Object
+       * @default null
+       */
+      target: null,
+      itemsSelector: '',
+      activateEvent: 'tap',
+      notap: false,
+      ready: function() {
+        this.activateListener = this.activateHandler.bind(this);
+        this.addListener(this);
+      },
       get items() {
-        var nodes = this.$.items.getDistributedNodes();
+        var nodes = this.target ? (this.itemsSelector ? 
+            this.target.querySelectorAll(this.itemsSelector) : 
+                this.target.children) : this.$.items.getDistributedNodes();
         return Array.prototype.filter.call(nodes, function(n) {
           return n && n.localName !== 'template';
         });
       },
+      targetChanged: function(old) {
+        if (old) {
+          this.removeListener(old);
+        }
+        if (this.target) {
+          this.removeListener(this);
+          this.addListener(this.target);
+        }
+      },
+      addListener: function(node) {
+        node.addEventListener(this.activateEvent, this.activateListener);
+      },
+      removeListener: function(node) {
+        node.removeEventListener(this.activateEvent, this.activateListener);
+      },
       get selection() {
         return this.$.selection.getSelection();
       },
       selectedChanged: function() {
+        this.validateSelected();
         if (this.multi) {
-          if (!Array.isArray(this.selected) && 
-              this.selected !== null && this.selected !== undefined) {
-            this.selected = [this.selected];
-            return;
-          }
           this.clearSelection();
           this.selected && this.selected.forEach(function(s) {
             this.valueToSelection(s);
-          }.bind(this));
+          }, this);
         } else {
           this.valueToSelection(this.selected);
         }
       },
+      validateSelected: function() {
+        // convert to an arrray for multi-selection
+        if (this.multi && !Array.isArray(this.selected) && 
+            this.selected !== null && this.selected !== undefined) {
+          this.selected = [this.selected];
+        }
+      },
       clearSelection: function() {
         if (this.multi) {
           this.selection.slice().forEach(function(s) {
             this.$.selection.setItemSelected(s, false);
-          }.bind(this));
+          }, this);
         } else {
           this.$.selection.setItemSelected(this.selection, false);
         }
@@ -227,26 +262,29 @@
           var i = this.findDistributedTarget(e.target, this.items);
           if (i >= 0) {
             var item = this.items[i];
-            var selected = this.valueForNode(item) || i;
+            var s = this.valueForNode(item) || i;
             if (this.multi) {
               if (this.selected) {
-                this.valueToSelection(selected);
-                var si = this.selected.indexOf(selected);
-                if (si >= 0) {
-                  this.selected.splice(si, 1);
-                } else {
-                  this.selected.push(selected);
-                }
+                this.addRemoveSelected(s);
               } else {
-                this.selected = [selected];
+                this.selected = [s];
               }
             } else {
-              this.selected = selected;
+              this.selected = s;
             }
             this.asyncFire('polymer-activate', {item: item});
           }
         }
       },
+      addRemoveSelected: function(value) {
+        var i = this.selected.indexOf(value);
+        if (i >= 0) {
+          this.selected.splice(i, 1);
+        } else {
+          this.selected.push(value);
+        }
+        this.valueToSelection(value);
+      },
       findDistributedTarget: function(target, nodes) {
         // find first ancestor of target (including itself) that
         // is in nodes, if any

From fd6d2dbeab2ce4441f2d12ddd7ae7fa5e96f3619 Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Thu, 25 Jul 2013 08:37:03 -0700
Subject: [PATCH 27/42] remove inline styling

---
 polymer-overlay/polymer-overlay.html | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/polymer-overlay/polymer-overlay.html b/polymer-overlay/polymer-overlay.html
index 6b8e186..3cccae8 100644
--- a/polymer-overlay/polymer-overlay.html
+++ b/polymer-overlay/polymer-overlay.html
@@ -73,13 +73,6 @@
 	<template>
 		<link rel="stylesheet" href="polymer-overlay.css">
 		<link rel="stylesheet" polymer-scope="global" href="polymer-overlay-global.css">
-		<style>
-			@host {
-				* {
-					display: none;
-				}
-			}
-		</style>
 		<polymer-key-helper id="keyHelper"></polymer-key-helper>
 	</template>
 	<script>

From a1f945faff638721eb749fee2cc6466b5bf4a452 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Thu, 25 Jul 2013 10:20:43 -0700
Subject: [PATCH 28/42] collapse: make opening and closing have the same delay

---
 polymer-collapse/polymer-collapse.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polymer-collapse/polymer-collapse.html b/polymer-collapse/polymer-collapse.html
index cf94346..88153ee 100644
--- a/polymer-collapse/polymer-collapse.html
+++ b/polymer-collapse/polymer-collapse.html
@@ -186,7 +186,7 @@
         }
         this.asyncMethod(function() {
           this.updateSize(this.size || s, this.duration);
-        });
+        }, null, 1);
       },
       hide: function() {
         this.asyncMethod(function() {

From 8972b137649733311468edc416bc454e353c7f74 Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Thu, 25 Jul 2013 10:25:57 -0700
Subject: [PATCH 29/42] Avoid conflicts between click and tap by asynchronously
 listening for a tap event to close the overlay.

---
 polymer-overlay/polymer-overlay.html | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/polymer-overlay/polymer-overlay.html b/polymer-overlay/polymer-overlay.html
index 3cccae8..08587c9 100644
--- a/polymer-overlay/polymer-overlay.html
+++ b/polymer-overlay/polymer-overlay.html
@@ -206,9 +206,11 @@
 				openedChanged: function() {
 					this.renderOpened();
 					trackOverlays(this);
-					if (!this.autoCloseDisabled) {
-						this.enableCaptureHandler(this.opened);
-					}
+          this.async(function() {
+            if (!this.autoCloseDisabled) {
+              this.enableCaptureHandler(this.opened);
+            }
+          });
 					this.enableResizeHandler(this.opened);
 					this.fire('opened', this.opened);
 				},

From 98c6c9e2526bc5aec4f6c4a6389bd58ede9c66b5 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Thu, 25 Jul 2013 14:12:16 -0700
Subject: [PATCH 30/42] add missing polymer-grid.html

---
 polymer-list/polymer-grid.html | 159 +++++++++++++++++++++++++++++++++
 1 file changed, 159 insertions(+)
 create mode 100644 polymer-list/polymer-grid.html

diff --git a/polymer-list/polymer-grid.html b/polymer-list/polymer-grid.html
new file mode 100644
index 0000000..e398108
--- /dev/null
+++ b/polymer-list/polymer-grid.html
@@ -0,0 +1,159 @@
+
+<polymer-element name="grid-item" attributes="item">
+  <template>
+    <b>{{item}}</b>
+  </template>
+  <script>
+    Polymer('grid-item', {
+      ready: function() {
+        /*
+        var h = Math.floor(Math.random()*360);
+        var light = Boolean(Math.random() > 0.5);
+        if (light) {
+          var l = 0.7;
+          var color = '#222';
+        } else {
+          l = 0.2;
+          color = '#EEE';
+        }
+        this.style.backgroundColor = 'hsl(' + h + ', 100%, ' + Math.floor(l*100) + '%)';
+        this.style.color = color;
+        */
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="items-grid-view" attributes="items offset limit">
+  <template>
+    <style>
+      @host{*{
+        display: block;
+        height: 100%;
+        overflow: hidden;
+      }}
+      #content {
+      }
+      grid-item {
+        display: inline-block;
+        width: 106px;
+        height: 106px;
+        box-sizing: border-box;
+        padding: 40px 20px 4px 20px;
+        color: #F6F6F6;
+        vertical-align: bottom;
+        background-color: #B3B3B3;
+        border: 1px solid silver;
+        overflow: hidden;
+        font-size: 0.8em;
+      }
+    </style>
+    <div id="content">
+      <template repeat="{{live}}"><grid-item item="{{}}"></grid-item></template>
+    </div>
+  </template>
+  <script>
+    Polymer('items-grid-view', {
+      offset: 0,
+      limit: 50,
+      items: null,
+      last: null,
+      itemsChanged: function() {
+        this.invalidate();
+      },
+      offsetChanged: function() {
+        this.invalidate();
+      },
+      invalidate: function() {
+        this.relist();
+      },
+      relist: function() {
+        var frac = this.offset - Math.floor(this.offset);
+        var offset = this.offset - frac;
+        //
+        var l = this.items.length;
+        offset = (l*10 + offset) % l;
+        //
+        var limit = Math.min(this.limit, this.items.length - offset);
+        //
+        if (this.last !== offset) {
+          this.live = this.items.slice(offset, offset + limit);
+          if (limit < this.limit) {
+            this.live = this.live.concat(this.items.slice(0, this.limit - limit));
+          }
+          this.last = offset;
+        }
+        //
+        /*
+        var rowHeight = 50;
+        var y = Math.round(frac * rowHeight);
+        this.$.content.style.webkitTransform = 'translateY(-' + y + 'px)';
+        */
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="polymer-grid">
+  <template>
+    <style>
+      @host{*{
+        display: block;
+        overflow: hidden;
+      }}
+    </style>
+    <!--    <button on-tap="up" on-pointerup="release">Up</button><button on-tap="down">Down</button><button on-tap="stop">Stop</button><br>-->
+    <input style="width: 95%;" type="range" min="-10000" max="10000" value="{{scrub}}">
+    <items-grid-view items="{{items}}" offset="{{offset}}" limit="{{limit}}"></items-grid-view>
+  </template>
+  <script>
+    Polymer('polymer-grid', {
+      offset: 0,
+      limit: 20,
+      items: null,
+      scrub: 0,
+      ready: function() {
+        this.items = [];
+        for (var i = 0; i < 5000; i++) {
+          var n = '';
+          var l = Math.floor(Math.random() * 8) + 2;
+          for (var j=0; j<l; j++) {
+            n += String.fromCharCode((j === 0 ? 'A' : 'a').charCodeAt(0) + Math.floor(Math.random()*26));
+          }
+          n += ' ';
+          var l = Math.floor(Math.random() * 8) + 2;
+          for (var j=0; j<l; j++) {
+            n += String.fromCharCode((j === 0 ? 'A' : 'a').charCodeAt(0) + Math.floor(Math.random()*26));
+          }
+          this.items[i] = n;
+        }
+      },
+      inserted: function() {
+        this._move();
+      },
+      stop: function() {
+        this.move(0);
+      },
+      up: function() {
+        this.move(0.1);
+      },
+      down: function() {
+        this.move(-0.1);
+      },
+      move: function(amount) {
+        this.delta = amount;
+      },
+      _move: function() {
+        if (this.delta) {
+          this.offset += this.delta;
+          Platform.flush();
+        }
+        this.async(this._move);
+      },
+      scrubChanged: function() {
+        this.offset = this.scrub / 500;
+        Platform.flush();
+      }
+    });
+  </script>
+</polymer-element>

From c88b9b3edc4cfda068ebd9387ad50bc000915dbc Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Wed, 10 Jul 2013 14:43:55 -0700
Subject: [PATCH 31/42] polymer-overlay: overlay animations

---
 polymer-overlay/polymer-overlay-scale.html   | 18 ++++++++++++++++++
 polymer-overlay/polymer-overlay-slideup.html | 18 ++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 polymer-overlay/polymer-overlay-scale.html
 create mode 100644 polymer-overlay/polymer-overlay-slideup.html

diff --git a/polymer-overlay/polymer-overlay-scale.html b/polymer-overlay/polymer-overlay-scale.html
new file mode 100644
index 0000000..edf7b53
--- /dev/null
+++ b/polymer-overlay/polymer-overlay-scale.html
@@ -0,0 +1,18 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<link rel="import" href="../polymer-animation/polymer-animation.html">
+
+<polymer-element name="polymer-overlay-scale" extends="polymer-animation">
+	<script>
+		Polymer('polymer-overlay-scale', {
+			duration: 0.218,
+			properties: {
+				opacity: ['0', '1'],
+				transform: ['scale(1.05)', 'scale(1)']
+			}
+		};
+	</script>
+</polymer-element>
diff --git a/polymer-overlay/polymer-overlay-slideup.html b/polymer-overlay/polymer-overlay-slideup.html
new file mode 100644
index 0000000..5af6b13
--- /dev/null
+++ b/polymer-overlay/polymer-overlay-slideup.html
@@ -0,0 +1,18 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<link rel="import" href="../polymer-animation/polymer-animation.html">
+
+<polymer-element name="polymer-overlay-slideup" extends="polymer-animation">
+	<script>
+		Polymer('polymer-overlay-slideup', {
+			duration: 0.4,
+			properties: {
+				opacity: ['1', '0'],
+				transform: ['translateY(0)', 'translateY(-100%)']
+			}
+		};
+	</script>
+</polymer-element>

From 6f743edd19348673624f43fb5e60ec7de6c8d32e Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Tue, 23 Jul 2013 11:25:26 -0700
Subject: [PATCH 32/42] polymer-animation: fix declarative

---
 polymer-animation/polymer-animation-prop.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/polymer-animation/polymer-animation-prop.html b/polymer-animation/polymer-animation-prop.html
index 892a57c..e576a72 100644
--- a/polymer-animation/polymer-animation-prop.html
+++ b/polymer-animation/polymer-animation-prop.html
@@ -1,5 +1,4 @@
-<link rel="import" href="polymer-animation-keyframe.html">
-<polymer-element name="polymer-animation-prop" attributes="name value">
+<polymer-element name="polymer-animation-prop" attributes="name value" noscript>
   <script>
     /**
      * A CSS property and value to use in a `<polymer-animation-keyframe>`.
@@ -17,6 +16,5 @@
       * @property value
       * @required
       */
-    Polymer('polymer-animation-prop');
   </script>
 </polymer-element>

From b88dc311231bc54a0ba4d412a2da4b25157dd96d Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Tue, 23 Jul 2013 13:14:36 -0700
Subject: [PATCH 33/42] polymer-animation: refactor some event stuff

---
 polymer-animation/polymer-animation.html | 30 ++++++++++++++++--------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/polymer-animation/polymer-animation.html b/polymer-animation/polymer-animation.html
index 4a107bd..35d8605 100644
--- a/polymer-animation/polymer-animation.html
+++ b/polymer-animation/polymer-animation.html
@@ -46,8 +46,12 @@
        * @class polymer-animation
        */
        /**
-        * Fired when an animation completes
-        * @event complete
+			  * Fired when the animation starts
+			  * @event animation-start
+				*
+        * Fired when the animation completes
+        * @event animation-end
+				* 
         */
       Polymer('polymer-animation', {
         publish: {
@@ -145,12 +149,8 @@
             //this.animation && console.log('play', this.animation);
             if (this.animation) {
               this.cancel();
-							if (!this.animation.onend) {
-								this.animation.onend = this.complete.bind(this);
-							}
+							this.bindAnimationEvents();
               this.player = document.timeline.play(this.animation);
-              this.player.paused = false;
-              this.player.currentTime = 0;
             }
           });
         },
@@ -262,9 +262,19 @@
           }
           return new KeyframeAnimationEffect(frames, this.composite);
         },
-        // intended for user implementation
-        complete: function() {
-          this.fire('complete');
+				bindAnimationEvents: function() {
+					if (!this.animation.onstart) {
+						this.animation.onstart = this.animationStartHandler.bind(this);
+					}
+					if (!this.animation.onend) {
+						this.animation.onend = this.animationEndHandler.bind(this);
+					}
+				},
+				animationStartHandler: function() {
+					this.fire('animation-start');
+				},
+        animationEndHandler: function() {
+          this.fire('animation-end');
         }
       });
     })();

From d473e0155b224b1bb4ee0518862f777d9c2dbe77 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Mon, 29 Jul 2013 10:37:45 -0700
Subject: [PATCH 34/42] just use ::-webkit-distributed without content prefix

---
 polymer-flex-layout/polymer-flex-layout.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/polymer-flex-layout/polymer-flex-layout.css b/polymer-flex-layout/polymer-flex-layout.css
index d3605db..aa2dfc6 100644
--- a/polymer-flex-layout/polymer-flex-layout.css
+++ b/polymer-flex-layout/polymer-flex-layout.css
@@ -35,9 +35,9 @@ license that can be found in the LICENSE file.
   flex: 1;
 }
 
-content::-webkit-distributed(.flex), 
-content::-webkit-distributed([flex]),
-content::-webkit-distributed([fit]) {
+::-webkit-distributed(.flex), 
+::-webkit-distributed([flex]),
+::-webkit-distributed([fit]) {
   -webkit-box-flex: 1;
   -ms-flex: 1;
   -moz-flex: 1;

From 1ce11ae7b4315b3c16e34ff8250cf2bf3763a886 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Mon, 29 Jul 2013 10:38:28 -0700
Subject: [PATCH 35/42] add selectedItem to published

---
 polymer-selector/polymer-selector.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/polymer-selector/polymer-selector.html b/polymer-selector/polymer-selector.html
index 4d50474..24e013c 100644
--- a/polymer-selector/polymer-selector.html
+++ b/polymer-selector/polymer-selector.html
@@ -57,7 +57,7 @@
 <link rel="import" href="polymer-selection.html">
 
 <polymer-element name="polymer-selector"
-    attributes="selected multi valueattr selectedClass selectedProperty selectedModel notap target itemsSelector activateEvent">
+    attributes="selected multi valueattr selectedClass selectedProperty selectedItem selectedModel notap target itemsSelector activateEvent">
   <template>
     <polymer-selection id="selection" multi="{{multi}}" on-polymer-select="selectionSelect"></polymer-selection>
     <content id="items" select="*"></content>
@@ -130,7 +130,7 @@
        */
       selectedProperty: 'active',
       /**
-       * In single selection this returns the currently selected element.
+       * Returns the currently selected element.
        * 
        * @attribute selectedItem
        * @type Object
@@ -138,7 +138,8 @@
        */
       selectedItem: null,
       /**
-       * Returns the model associated with the selectedItem.
+       * In single selection, this returns the model associated with the
+       * selected element.
        * 
        * @attribute selectedModel
        * @type Object
@@ -218,8 +219,8 @@
       valueToSelection: function(value) {
         var item = (value === null || value === undefined) ? 
             null : this.items[this.valueToIndex(value)];
-        this.selectedItem = item;
         this.$.selection.select(item);
+        this.selectedItem = this.selection;
       },
       selectedItemChanged: function() {
         if (this.selectedItem) {

From 7ba9633d9e178639038412db5451a7b745fd0eb2 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Mon, 29 Jul 2013 10:39:01 -0700
Subject: [PATCH 36/42] remove async fire

---
 polymer-selector/polymer-selection.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/polymer-selector/polymer-selection.html b/polymer-selector/polymer-selection.html
index 318a61e..5c9ac16 100644
--- a/polymer-selector/polymer-selection.html
+++ b/polymer-selector/polymer-selection.html
@@ -43,9 +43,7 @@
               this.selection.splice(i, 1);
             }
           }
-          // TODO(sjmiles): consider replacing with summary
-          // notifications (asynchronous job)
-          this.asyncFire("polymer-select", {isSelected: isSelected, item: item});
+          this.fire("polymer-select", {isSelected: isSelected, item: item});
         }
       },
       select: function(item) {

From fe2da1add67582f581dce192bd19f042dcb95c78 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 30 Jul 2013 10:10:34 -0700
Subject: [PATCH 37/42] h-flex to h-flexbox and v-flex to v-flexbox

---
 polymer-flex-layout/polymer-flex-layout.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/polymer-flex-layout/polymer-flex-layout.css b/polymer-flex-layout/polymer-flex-layout.css
index aa2dfc6..da98d18 100644
--- a/polymer-flex-layout/polymer-flex-layout.css
+++ b/polymer-flex-layout/polymer-flex-layout.css
@@ -3,7 +3,7 @@ Copyright 2013 The Polymer Authors. All rights reserved.
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
 */
-.flexbox, [h-flex], [v-flex] {
+.flexbox, [flexbox], [h-flexbox], [v-flexbox] {
   display: -webkit-box !important;
   display: -ms-flexbox !important;
   display: -moz-flex !important;
@@ -11,7 +11,7 @@ license that can be found in the LICENSE file.
   display: flex !important;
 }
 
-.flexbox.row, [h-flex] {
+.flexbox.row, [flexbox], [h-flexbox] {
   -webkit-box-orient: horizontal;
   -ms-flex-direction: row;
   -moz-flex-direction: row;
@@ -19,7 +19,7 @@ license that can be found in the LICENSE file.
   flex-direction: row;
 }
 
-.flexbox.column, [v-flex] {
+.flexbox.column, [v-flexbox] {
   -webkit-box-orient: vertical;
   -ms-flex-direction: column;
   -moz-flex-direction: column;
@@ -102,7 +102,7 @@ license that can be found in the LICENSE file.
 }
 
 @host {
-  .flexbox, [h-flex], [v-flex] {
+  .flexbox, [flexbox], [h-flexbox], [v-flexbox] {
     display: -webkit-box !important;
     display: -ms-flexbox !important;
     display: -moz-flex !important;
@@ -110,7 +110,7 @@ license that can be found in the LICENSE file.
     display: flex !important;
   }
   
-  .flexbox.row, [h-flex] {
+  .flexbox.row, [flexbox], [h-flexbox] {
     -webkit-box-orient: horizontal;
     -ms-flex-direction: row;
     -moz-flex-direction: row;
@@ -118,7 +118,7 @@ license that can be found in the LICENSE file.
     flex-direction: row;
   }
   
-  .flexbox.column, [v-flex] {
+  .flexbox.column, [v-flexbox] {
     -webkit-box-orient: vertical;
     -ms-flex-direction: column;
     -moz-flex-direction: column;

From 1866e990ab6b5e03d9665fa9800638955d55976b Mon Sep 17 00:00:00 2001
From: Scott Miles <sjmiles@google.com>
Date: Tue, 30 Jul 2013 10:57:44 -0700
Subject: [PATCH 38/42] experiments with grid layout handling of 'unused'
 panels

---
 polymer-grid-layout/polymer-grid-layout.html | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/polymer-grid-layout/polymer-grid-layout.html b/polymer-grid-layout/polymer-grid-layout.html
index c23e7c4..aab1b01 100644
--- a/polymer-grid-layout/polymer-grid-layout.html
+++ b/polymer-grid-layout/polymer-grid-layout.html
@@ -183,8 +183,6 @@
           style.top = '';
         }
         */
-        style.right = style.bottom = '';
-        style.width = style.height = '';
         style.position = 'absolute';
         style.display = 'inline-block';
         style.boxSizing = style.mozBoxSizing = 'border-box';
@@ -207,6 +205,8 @@
       }
 
       function position(elt, left, right, top, bottom) {
+        //elt.style.right = elt.style.bottom = '';
+        //elt.style.width = elt.style.height = '';
         _position(elt.style, 'top', 'bottom', 'height', rows[top], rows[bottom]);
         _position(elt.style, 'left', 'right', 'width', columns[left], columns[right]);
       }
@@ -255,12 +255,15 @@
             }
           });
           if (l == undefined) {
-            //console.log('unused');
-            node.style.position = 'absolute';
-            node.style[Math.random() >= 0.5 ? 'left' : 'top'] = '-110%';
-            node.style.opacity = 0;
+            if (!node.hasAttribute('static')) {
+              node.style.position = 'absolute';
+              node.style[Math.random() >= 0.5 ? 'left' : 'top'] = '-110%';
+              //node.style.opacity = 0;
+            }
+            //node.style.zIndex = 0;
             node.style.pointerEvents = 'none';
           } else {
+            //node.style.zIndex = 1;
             node.style.pointerEvents = '';
             node.style.opacity = '';
             //console.log(l, r, t, b);

From aa44365b4511e34744e99e752cd504ab2a8cce18 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 30 Jul 2013 14:50:42 -0700
Subject: [PATCH 39/42] use defaultClosed to indicate the target is already
 closed

---
 polymer-collapse/polymer-collapse.html | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/polymer-collapse/polymer-collapse.html b/polymer-collapse/polymer-collapse.html
index 88153ee..2b282ab 100644
--- a/polymer-collapse/polymer-collapse.html
+++ b/polymer-collapse/polymer-collapse.html
@@ -113,7 +113,7 @@
           this.target.style.overflow = 'hidden';
           this.addListeners(this.target);
         }
-        if (this.closed && !this.defaultClosed) {
+        if (this.closed || this.defaultClosed) {
           this.update();
         }
       },
@@ -159,10 +159,6 @@
           return;
         }
         this.horizontalChanged();
-        if (this.closed && this.defaultClosed) {
-          this.defaultClosed = false;
-          return;
-        }
         this.prepare();
         this[this.closed ? 'hide' : 'show']();
       },

From db5afa2f64b91c9e1939f69bf551a05c57cecb29 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 30 Jul 2013 14:51:44 -0700
Subject: [PATCH 40/42] set selectedItem before setting selection

---
 polymer-selector/polymer-selector.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polymer-selector/polymer-selector.html b/polymer-selector/polymer-selector.html
index 24e013c..3442185 100644
--- a/polymer-selector/polymer-selector.html
+++ b/polymer-selector/polymer-selector.html
@@ -219,8 +219,8 @@
       valueToSelection: function(value) {
         var item = (value === null || value === undefined) ? 
             null : this.items[this.valueToIndex(value)];
+        this.selectedItem = item;
         this.$.selection.select(item);
-        this.selectedItem = this.selection;
       },
       selectedItemChanged: function() {
         if (this.selectedItem) {

From aae8ab54eac00144a9b9ba4b92f76bab8f337829 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 30 Jul 2013 19:02:18 -0700
Subject: [PATCH 41/42] revert previous checkin

---
 polymer-grid-layout/polymer-grid-layout.html | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/polymer-grid-layout/polymer-grid-layout.html b/polymer-grid-layout/polymer-grid-layout.html
index aab1b01..41f3ddc 100644
--- a/polymer-grid-layout/polymer-grid-layout.html
+++ b/polymer-grid-layout/polymer-grid-layout.html
@@ -1,4 +1,4 @@
-<polymer-element name="polymer-grid-layout" attributes="nodes layout">
+<polymer-element name="polymer-grid-layout" attributes="nodes layout">
   <template>
   </template>
   <script>
@@ -183,6 +183,8 @@
           style.top = '';
         }
         */
+        style.right = style.bottom = '';
+        style.width = style.height = '';
         style.position = 'absolute';
         style.display = 'inline-block';
         style.boxSizing = style.mozBoxSizing = 'border-box';
@@ -205,8 +207,6 @@
       }
 
       function position(elt, left, right, top, bottom) {
-        //elt.style.right = elt.style.bottom = '';
-        //elt.style.width = elt.style.height = '';
         _position(elt.style, 'top', 'bottom', 'height', rows[top], rows[bottom]);
         _position(elt.style, 'left', 'right', 'width', columns[left], columns[right]);
       }
@@ -255,15 +255,12 @@
             }
           });
           if (l == undefined) {
-            if (!node.hasAttribute('static')) {
-              node.style.position = 'absolute';
-              node.style[Math.random() >= 0.5 ? 'left' : 'top'] = '-110%';
-              //node.style.opacity = 0;
-            }
-            //node.style.zIndex = 0;
+            //console.log('unused');
+            node.style.position = 'absolute';
+            node.style[Math.random() >= 0.5 ? 'left' : 'top'] = '-110%';
+            node.style.opacity = 0;
             node.style.pointerEvents = 'none';
           } else {
-            //node.style.zIndex = 1;
             node.style.pointerEvents = '';
             node.style.opacity = '';
             //console.log(l, r, t, b);

From 605905a01044e5b05e484ffdc0215d3aa6254b0d Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Wed, 31 Jul 2013 11:20:46 -0700
Subject: [PATCH 42/42] remove use of noscript.

---
 polymer-animation/polymer-animation-prop.html | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/polymer-animation/polymer-animation-prop.html b/polymer-animation/polymer-animation-prop.html
index e576a72..34bacb5 100644
--- a/polymer-animation/polymer-animation-prop.html
+++ b/polymer-animation/polymer-animation-prop.html
@@ -1,4 +1,4 @@
-<polymer-element name="polymer-animation-prop" attributes="name value" noscript>
+<polymer-element name="polymer-animation-prop" attributes="name value">
   <script>
     /**
      * A CSS property and value to use in a `<polymer-animation-keyframe>`.
@@ -16,5 +16,6 @@
       * @property value
       * @required
       */
+      Polymer('polymer-animation-prop');
   </script>
 </polymer-element>