From ce32139e491a9c791624938ed347aa1b5fa4e266 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Mon, 12 Aug 2013 14:30:58 -0700
Subject: [PATCH 01/15] update selectedItem after polymer-selection has done
 processing the item

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

diff --git a/polymer-selector/polymer-selector.html b/polymer-selector/polymer-selector.html
index f0e2d85..61d90e6 100644
--- a/polymer-selector/polymer-selector.html
+++ b/polymer-selector/polymer-selector.html
@@ -226,9 +226,11 @@
       valueToSelection: function(value) {
         var item = (value === null || value === undefined) ? 
             null : this.items[this.valueToIndex(value)];
-        this.selectedItem = item;
         this.$.selection.select(item);
       },
+      updateSelectedItem: function() {
+        this.selectedItem = this.selection;
+      },
       selectedItemChanged: function() {
         if (this.selectedItem) {
           var t = this.selectedItem.templateInstance;
@@ -252,6 +254,7 @@
       },
       // events fired from <polymer-selection> object
       selectionSelect: function(e, detail) {
+        this.updateSelectedItem();
         if (detail.item) {
           this.applySelection(detail.item, detail.isSelected)
         }

From 0471fe36314bab4639ee812817e37f1401e2d74a Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Mon, 12 Aug 2013 14:31:19 -0700
Subject: [PATCH 02/15] add more tests for polymer-selector

---
 test/html/polymer-selector-basic.html | 29 ++++++++++++++++++++++++++-
 test/html/polymer-selector-multi.html | 24 ++++++++++++++++++----
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/test/html/polymer-selector-basic.html b/test/html/polymer-selector-basic.html
index b12dcf5..93f0d62 100644
--- a/test/html/polymer-selector-basic.html
+++ b/test/html/polymer-selector-basic.html
@@ -50,7 +50,34 @@
         s = document.querySelector('#selector2');
         assert.equal(s.selected, "item3");
         assert.equal(s.selectedClass, 'my-selected');
-        done();
+        // setup listener for polymer-select event
+        var selectEventCounter = 0;
+        s.addEventListener('polymer-select', function(e) {
+          if (e.detail.isSelected) {
+            selectEventCounter++;
+            // selectedItem and detail.item should be the same
+            assert.equal(e.detail.item, s.selectedItem);
+          }
+        });
+        // set selected
+        s.selected = 'item5';
+        Platform.flush();
+        setTimeout(function() {
+          // check polymer-select event
+          assert.equal(selectEventCounter, 1);
+          // check selected class
+          assert.isTrue(s.children[4].classList.contains('my-selected'));
+          // check selectedItem
+          assert.equal(s.selectedItem, s.children[4]);
+          // selecting the same value shouldn't fire polymer-select
+          selectEventCounter = 0;
+          s.selected = 'item5';
+          Platform.flush();
+          setTimeout(function() {
+            assert.equal(selectEventCounter, 0);
+            done();
+          }.bind(this), 0);
+        }.bind(this), 0);
       });
     </script>
   </body>
diff --git a/test/html/polymer-selector-multi.html b/test/html/polymer-selector-multi.html
index bd49877..a94f820 100644
--- a/test/html/polymer-selector-multi.html
+++ b/test/html/polymer-selector-multi.html
@@ -32,20 +32,36 @@
         assert.isTrue(s.multi);
         assert.equal(s.valueattr, 'name');
         assert.equal(s.items.length, 5);
-        //
-        var eventCounter = 0;
+        // setup listener for polymer-select event
+        var selectEventCounter = 0;
         s.addEventListener('polymer-select', function(e) {
           if (e.detail.isSelected) {
-            eventCounter++;
+            selectEventCounter++;
+          } else {
+            selectEventCounter--;
           }
+          // check selectedItem in polymer-select event
+          assert.equal(this.selectedItem.length, selectEventCounter);
         });
         setTimeout(function() {
+          // set selected
           s.selected = [0, 2];
           Platform.flush();
           setTimeout(function() {
-            assert.equal(eventCounter, 2);
+            // check polymer-select event
+            assert.equal(selectEventCounter, 2);
+            // check selected class
             assert.isTrue(s.children[0].classList.contains('polymer-selected'));
             assert.isTrue(s.children[2].classList.contains('polymer-selected'));
+            // check selectedItem
+            assert.equal(s.selectedItem.length, 2);
+            assert.equal(s.selectedItem[0], s.children[0]);
+            assert.equal(s.selectedItem[1], s.children[2]);
+            // tap on already selected element should unselect it
+            s.children[0].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+            // check selected
+            assert.equal(s.selected.length, 1);
+            assert.isFalse(s.children[0].classList.contains('polymer-selected'));
             done();
           }.bind(this), 0);
         }.bind(this), 0);

From 749180818e03c9f892c39ac40856e20eb0a1f73f Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Mon, 12 Aug 2013 15:58:50 -0700
Subject: [PATCH 03/15] use local url for sample, bubble the internal signal
 event so it's not lost to the on-* delegation mechanism; TODO: dudupe the
 signals wrt bubbling

---
 polymer-signals/index.html           | 4 ++--
 polymer-signals/polymer-signals.html | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/polymer-signals/index.html b/polymer-signals/index.html
index 5e067cd..8f06c54 100644
--- a/polymer-signals/index.html
+++ b/polymer-signals/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
   <title></title>
-  <script src="http://www.polymer-project.org/polymer/polymer.min.js"></script>
+  <script src="../../polymer/polymer.js"></script>
   <link rel="import" href="polymer-signals.html">
 </head>
 <body>
@@ -13,7 +13,7 @@
   </template>
   <script>
     Polymer('my-element', {
-      ready: function() {
+      created: function() {
         this.asyncFire('polymer-signal', {name: "foo", data: "Foo!"});
       }
     });
diff --git a/polymer-signals/polymer-signals.html b/polymer-signals/polymer-signals.html
index ff48ba1..6170e53 100644
--- a/polymer-signals/polymer-signals.html
+++ b/polymer-signals/polymer-signals.html
@@ -23,7 +23,7 @@
       function notify(name, data) {
         // convert generic-signal event to named-signal event
         var signal = new CustomEvent('polymer-signal-' + name, {
-          bubbles: false,
+          bubbles: true,
           detail: data
         });
         // disptach named-signal to all 'signals' instances,

From 30af97c2b333a40723f3347ed713fea4819a230a Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Mon, 12 Aug 2013 16:00:01 -0700
Subject: [PATCH 04/15] update tools

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

diff --git a/tools b/tools
index 313f752..03ce077 160000
--- a/tools
+++ b/tools
@@ -1 +1 @@
-Subproject commit 313f7524ce37689ebfb60c81f7bda721535467cf
+Subproject commit 03ce077cc6676eda5d87baa185a1519c273430c5

From 796aa3b3efb1cfeeb1b5c265c4d42050b555facd Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Mon, 12 Aug 2013 17:43:27 -0700
Subject: [PATCH 05/15] polymer-flex-layout: update layoutContainer's class
 asynchronously to avoid unexpected enteredDoc callback firing

---
 polymer-flex-layout/polymer-flex-layout.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/polymer-flex-layout/polymer-flex-layout.html b/polymer-flex-layout/polymer-flex-layout.html
index 3578056..7742dfc 100644
--- a/polymer-flex-layout/polymer-flex-layout.html
+++ b/polymer-flex-layout/polymer-flex-layout.html
@@ -20,10 +20,13 @@
         if (!this.isContainer) {
           this.style.display = 'none';
         }
-        this.layoutContainer.classList.add('flexbox');
-        this.verticalChanged();
-        this.alignChanged();
-        this.justifyChanged();
+        this.asyncMethod(function() {
+          this.layoutContainer && this.layoutContainer.classList.add('flexbox');
+          this.verticalChanged();
+          this.alignChanged();
+          this.justifyChanged();
+        });
+        
       },
       switchContainerClass: function(prefix, old, name) {
         if (this.layoutContainer && name) {

From 09e9f1e9fb7464e524a5c1b167216bb1d7a1ba07 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 13 Aug 2013 16:47:33 -0700
Subject: [PATCH 06/15] update doc

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

diff --git a/polymer-selector/polymer-selector.html b/polymer-selector/polymer-selector.html
index 61d90e6..9730bff 100644
--- a/polymer-selector/polymer-selector.html
+++ b/polymer-selector/polymer-selector.html
@@ -8,9 +8,9 @@
  * @module Polymer Elements
  */
 /**
- * polymer-selector is used to display a list of elements that can be selected.
+ * polymer-selector is used to manage 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
+ * Tapping on the item element would fire "polymer-activate" event. Use
  * "polymer-select" event to listen for selection changes.
  *
  * Example:
@@ -43,7 +43,7 @@
  * 
  * @event polymer-select
  * @param {Object} detail
- *   @param {boolean} isSelected
+ *   @param {boolean} detail.isSelected true for selection and false for deselection
  *   @param {Object} detail.item the item element
  */
 /**
@@ -92,7 +92,7 @@
        *     this.$.selector.selected = ['foo', 'zot'];
        *
        * @attribute selected
-       * @type string or array
+       * @type Object
        * @default null
        */
       selected: null,
@@ -130,7 +130,8 @@
        */
       selectedProperty: 'active',
       /**
-       * Returns the currently selected element.
+       * Returns the currently selected element. In multi-selection this returns
+       * an array of selected elements.
        * 
        * @attribute selectedItem
        * @type Object
@@ -147,7 +148,8 @@
        */
       selectedModel: null,
       /**
-       * The target element that contains items.
+       * The target element that contains items.  If this is not set 
+       * polymer-selector is the container.
        * 
        * @attribute target
        * @type Object
@@ -206,7 +208,7 @@
         }
       },
       validateSelected: function() {
-        // convert to an arrray for multi-selection
+        // convert to an array for multi-selection
         if (this.multi && !Array.isArray(this.selected) && 
             this.selected !== null && this.selected !== undefined) {
           this.selected = [this.selected];

From 17296be2101a1f088084b427906e0f382ec3ae46 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 13 Aug 2013 16:47:42 -0700
Subject: [PATCH 07/15] update tests

---
 test/html/polymer-selector-activate-event.html | 6 ++++--
 test/html/polymer-selector-basic.html          | 8 ++++----
 test/html/polymer-selector-multi.html          | 8 ++++----
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/test/html/polymer-selector-activate-event.html b/test/html/polymer-selector-activate-event.html
index 55e3c7b..f5f14da 100644
--- a/test/html/polymer-selector-activate-event.html
+++ b/test/html/polymer-selector-activate-event.html
@@ -32,8 +32,10 @@
           done();
         });
         Platform.flush();
-        assert.equal(s.selected, 0);
-        s.children[1].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+        Platform.endOfMicrotask(function() {
+          assert.equal(s.selected, 0);
+          s.children[1].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
+        });
       });
     </script>
   </body>
diff --git a/test/html/polymer-selector-basic.html b/test/html/polymer-selector-basic.html
index 93f0d62..681e8ea 100644
--- a/test/html/polymer-selector-basic.html
+++ b/test/html/polymer-selector-basic.html
@@ -62,7 +62,7 @@
         // set selected
         s.selected = 'item5';
         Platform.flush();
-        setTimeout(function() {
+        Platform.endOfMicrotask(function() {
           // check polymer-select event
           assert.equal(selectEventCounter, 1);
           // check selected class
@@ -73,11 +73,11 @@
           selectEventCounter = 0;
           s.selected = 'item5';
           Platform.flush();
-          setTimeout(function() {
+          Platform.endOfMicrotask(function() {
             assert.equal(selectEventCounter, 0);
             done();
-          }.bind(this), 0);
-        }.bind(this), 0);
+          });
+        });
       });
     </script>
   </body>
diff --git a/test/html/polymer-selector-multi.html b/test/html/polymer-selector-multi.html
index a94f820..d647cf0 100644
--- a/test/html/polymer-selector-multi.html
+++ b/test/html/polymer-selector-multi.html
@@ -43,11 +43,11 @@
           // check selectedItem in polymer-select event
           assert.equal(this.selectedItem.length, selectEventCounter);
         });
-        setTimeout(function() {
+        Platform.endOfMicrotask(function() {
           // set selected
           s.selected = [0, 2];
           Platform.flush();
-          setTimeout(function() {
+          Platform.endOfMicrotask(function() {
             // check polymer-select event
             assert.equal(selectEventCounter, 2);
             // check selected class
@@ -63,8 +63,8 @@
             assert.equal(s.selected.length, 1);
             assert.isFalse(s.children[0].classList.contains('polymer-selected'));
             done();
-          }.bind(this), 0);
-        }.bind(this), 0);
+          });
+        });
       });
     </script>
   </body>

From a859e356e40b9a18cb77fda070aa4b7987577f27 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Tue, 13 Aug 2013 18:40:27 -0700
Subject: [PATCH 08/15] polymer-anchor-position: anchor-position polyfill

---
 polymer-anchor-position/index.html            |  67 +++++++++++
 .../polymer-anchor-position.html              | 112 ++++++++++++++++++
 2 files changed, 179 insertions(+)
 create mode 100644 polymer-anchor-position/index.html
 create mode 100644 polymer-anchor-position/polymer-anchor-position.html

diff --git a/polymer-anchor-position/index.html b/polymer-anchor-position/index.html
new file mode 100644
index 0000000..e569623
--- /dev/null
+++ b/polymer-anchor-position/index.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html>
+	<head>
+		<title>polymer-anchor-position</title>
+		<link rel="import" href="../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html">
+		<link rel="import" href="../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html">
+		<link rel="import" href="polymer-anchor-position.html">
+		<script src="../../polymer/polymer.js"></script>
+		<link rel="stylesheet" href="../../polymer-ui-elements/basic.css">
+		<style>
+			html, body {
+				margin: 0;
+				padding: 0;
+			}
+			html, body, #container {
+				height: 100%;
+			}
+			#target {
+				padding: 5px;
+				border: 1px solid black;
+				display: none;
+			}
+			#target.active {
+				display: block;
+			}
+		</style>
+	</head>
+	<body class="polymer-ui-body-text">
+		<div id="container">
+			<polymer-flex-layout vertical="true"></polymer-flex-layout>
+			<polymer-ui-toolbar theme="polymer-ui-light-theme" onclick="toggle(event)">
+				<polymer-ui-icon-button icon="menu" anchor-position="bottom left" target-anchor-position="top left"></polymer-ui-icon-button>
+				<div flex></div>
+				<polymer-ui-icon-button icon="refresh" anchor-position="bottom center" target-anchor-position="top center"></polymer-ui-icon-button>
+				<div flex></div>
+				<polymer-ui-icon-button icon="add" anchor-position="bottom right" target-anchor-position="top right"></polymer-ui-icon-button>
+			</polymer-ui-toolbar>
+			<div flex></div>
+			<polymer-ui-toolbar theme="polymer-ui-light-theme" onclick="toggle(event)">
+				<polymer-ui-icon-button icon="drawer" anchor-position="top left" target-anchor-position="bottom left"></polymer-ui-icon-button>
+				<polymer-ui-icon-button icon="dots" anchor-position="top center" target-anchor-position="bottom center"></polymer-ui-icon-button>
+				<div flex></div>
+				<polymer-ui-icon-button icon="search" anchor-position="top right" target-anchor-position="bottom right"></polymer-ui-icon-button>
+			</polymer-ui-toolbar>
+		</div>
+		<div id="target"></div>
+		<polymer-anchor-position id="anchorable"></polymer-anchor-position>
+		<script>
+			function toggle(e) {
+				var anchorable = document.querySelector('#anchorable');
+				var target = document.querySelector('#target');
+				var anchor = e.target;
+				if (target.classList.contains('active')) {
+					target.classList.remove('active');
+				} else {
+					var targetAnchorPos = anchor.getAttribute('target-anchor-position');
+					target.setAttribute('anchor-position', targetAnchorPos);
+					target.innerHTML = 'anchor-position: ' + anchor.getAttribute('anchor-position') + '<br>' + 'target anchor-position: ' + targetAnchorPos;
+					anchorable.target = target;
+					anchorable.anchor = anchor;
+					target.classList.add('active');
+					anchorable.apply();
+				}
+			}
+		</script>
+	</body>
+</html>
diff --git a/polymer-anchor-position/polymer-anchor-position.html b/polymer-anchor-position/polymer-anchor-position.html
new file mode 100644
index 0000000..0625885
--- /dev/null
+++ b/polymer-anchor-position/polymer-anchor-position.html
@@ -0,0 +1,112 @@
+<!--
+/**
+ * @module Polymer Elements
+ */
+/**
+ * polymer-anchor-position can be used to align two nodes. The node to
+ * use as the reference position is the anchor node, and the node to
+ * be positioned is the target node.
+ *
+ * Both the anchor and target nodes should have an anchor-position
+ * attribute. The target node is positioned such that its anchor-position
+ * aligns with the anchor node's anchor-position.
+ *
+ * Note: The target node is positioned with position: fixed, and will not
+ * scroll with the page.
+ *
+ * Example:
+ *
+ *    <div id="anchor" anchor-position="bottom left"></div>
+ *    <div id="target" anchor-position="top left"></div>
+ *    <polymer-anchor-position id="anchor-helper"></polymer-anchor-position>
+ *    <script>
+ *        var helper = document.querySelector('#anchor-helper');
+ *        helper.anchor = document.querySelector('#anchor');
+ *        helper.target = document.querySelector('#target');
+ *        helper.apply();
+ *    </script>
+ *
+ * @class polymer-anchor-position
+ */
+ -->
+<polymer-element name="polymer-anchor-position" attributes="target anchor">
+	<script>
+		var DEFAULT_ANCHOR_POSITION = 'center center';
+
+		function getAnchorPosition(node) {
+			return node.getAttribute('anchor-position') || DEFAULT_ANCHOR_POSITION;
+		};
+
+		(function() {
+			Polymer('polymer-anchor-position', {
+				/**
+				 * The node to be positioned.
+				 * @attribute target
+				 * @type Node
+				 */
+				target: null,
+				/**
+				 * The node to align the target to.
+				 * @attribute anchor
+				 * @type node
+				 */
+				anchor: null,
+				canPosition: function() {
+					return this.target && this.anchor;
+				},
+				apply: function() {
+					if (!this.canPosition()) {
+						return;
+					}
+					var pos = this.getAnchorPosition();
+					this.target.style.position = 'fixed';
+					this.target.style.top = pos.top + 'px';
+					this.target.style.left = pos.left + 'px';
+				},
+				getAnchorPosition: function() {
+					var pos;
+					var rect = this.anchor.getBoundingClientRect();
+					var anchorPos = getAnchorPosition(this.anchor);
+					if (anchorPos) {
+						pos = {};
+						if (anchorPos.indexOf('top') != -1) {
+							pos.top = rect.top;
+						} else if (anchorPos.indexOf('bottom') != -1) {
+							pos.top = rect.bottom;
+						} else {
+							pos.top = rect.top + rect.height / 2;
+						}
+						if (anchorPos.indexOf('left') != -1) {
+							pos.left = rect.left;
+						} else if (anchorPos.indexOf('right') != -1) {
+							pos.left = rect.right;
+						} else {
+							pos.left = rect.left + rect.width / 2;
+						}
+					} else {
+						pos = {
+							left: rect.left,
+							top: rect.top
+						}
+					}
+					// adjust by this element's target anchor pos
+					if (this.target) {
+						var targetRect = this.target.getBoundingClientRect();
+						var targetAnchorPos = getAnchorPosition(this.target);
+						if (targetAnchorPos.indexOf('bottom') != -1) {
+							pos.top -= targetRect.height;
+						} else if (targetAnchorPos.indexOf('top') === -1) {
+							pos.top -= targetRect.height / 2;
+						}
+						if (targetAnchorPos.indexOf('right') != -1) {
+							pos.left -= targetRect.width;
+						} else if (targetAnchorPos.indexOf('left') === -1) {
+							pos.left -= targetRect.width / 2;
+						}
+					}
+					return pos;
+				}
+			});
+		})();
+	</script>
+</polymer-element>

From f0d6941708a973f9301aad546d84f0b28d833244 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Wed, 14 Aug 2013 11:48:39 -0700
Subject: [PATCH 09/15] polymer-anchor-position -> polymer-anchor-point

---
 .../index.html                                | 24 ++++-----
 .../polymer-anchor-point.html                 | 52 +++++++++----------
 2 files changed, 38 insertions(+), 38 deletions(-)
 rename {polymer-anchor-position => polymer-anchor-point}/index.html (57%)
 rename polymer-anchor-position/polymer-anchor-position.html => polymer-anchor-point/polymer-anchor-point.html (59%)

diff --git a/polymer-anchor-position/index.html b/polymer-anchor-point/index.html
similarity index 57%
rename from polymer-anchor-position/index.html
rename to polymer-anchor-point/index.html
index e569623..70abd82 100644
--- a/polymer-anchor-position/index.html
+++ b/polymer-anchor-point/index.html
@@ -1,10 +1,10 @@
 <!doctype html>
 <html>
 	<head>
-		<title>polymer-anchor-position</title>
+		<title>polymer-anchor-point</title>
 		<link rel="import" href="../../polymer-ui-elements/polymer-ui-icon-button/polymer-ui-icon-button.html">
 		<link rel="import" href="../../polymer-ui-elements/polymer-ui-toolbar/polymer-ui-toolbar.html">
-		<link rel="import" href="polymer-anchor-position.html">
+		<link rel="import" href="polymer-anchor-point.html">
 		<script src="../../polymer/polymer.js"></script>
 		<link rel="stylesheet" href="../../polymer-ui-elements/basic.css">
 		<style>
@@ -29,22 +29,22 @@
 		<div id="container">
 			<polymer-flex-layout vertical="true"></polymer-flex-layout>
 			<polymer-ui-toolbar theme="polymer-ui-light-theme" onclick="toggle(event)">
-				<polymer-ui-icon-button icon="menu" anchor-position="bottom left" target-anchor-position="top left"></polymer-ui-icon-button>
+				<polymer-ui-icon-button icon="menu" anchor-point="bottom left" target-anchor-point="top left"></polymer-ui-icon-button>
 				<div flex></div>
-				<polymer-ui-icon-button icon="refresh" anchor-position="bottom center" target-anchor-position="top center"></polymer-ui-icon-button>
+				<polymer-ui-icon-button icon="refresh" anchor-point="bottom center" target-anchor-point="top center"></polymer-ui-icon-button>
 				<div flex></div>
-				<polymer-ui-icon-button icon="add" anchor-position="bottom right" target-anchor-position="top right"></polymer-ui-icon-button>
+				<polymer-ui-icon-button icon="add" anchor-point="bottom right" target-anchor-point="top right"></polymer-ui-icon-button>
 			</polymer-ui-toolbar>
 			<div flex></div>
 			<polymer-ui-toolbar theme="polymer-ui-light-theme" onclick="toggle(event)">
-				<polymer-ui-icon-button icon="drawer" anchor-position="top left" target-anchor-position="bottom left"></polymer-ui-icon-button>
-				<polymer-ui-icon-button icon="dots" anchor-position="top center" target-anchor-position="bottom center"></polymer-ui-icon-button>
+				<polymer-ui-icon-button icon="drawer" anchor-point="top left" target-anchor-point="bottom left"></polymer-ui-icon-button>
+				<polymer-ui-icon-button icon="dots" anchor-point="top center" target-anchor-point="bottom center"></polymer-ui-icon-button>
 				<div flex></div>
-				<polymer-ui-icon-button icon="search" anchor-position="top right" target-anchor-position="bottom right"></polymer-ui-icon-button>
+				<polymer-ui-icon-button icon="search" anchor-point="top right" target-anchor-point="bottom right"></polymer-ui-icon-button>
 			</polymer-ui-toolbar>
 		</div>
 		<div id="target"></div>
-		<polymer-anchor-position id="anchorable"></polymer-anchor-position>
+		<polymer-anchor-point id="anchorable"></polymer-anchor-point>
 		<script>
 			function toggle(e) {
 				var anchorable = document.querySelector('#anchorable');
@@ -53,9 +53,9 @@
 				if (target.classList.contains('active')) {
 					target.classList.remove('active');
 				} else {
-					var targetAnchorPos = anchor.getAttribute('target-anchor-position');
-					target.setAttribute('anchor-position', targetAnchorPos);
-					target.innerHTML = 'anchor-position: ' + anchor.getAttribute('anchor-position') + '<br>' + 'target anchor-position: ' + targetAnchorPos;
+					var targetAnchorPos = anchor.getAttribute('target-anchor-point');
+					target.setAttribute('anchor-point', targetAnchorPos);
+					target.innerHTML = 'anchor-point: ' + anchor.getAttribute('anchor-point') + '<br>' + 'target anchor-point: ' + targetAnchorPos;
 					anchorable.target = target;
 					anchorable.anchor = anchor;
 					target.classList.add('active');
diff --git a/polymer-anchor-position/polymer-anchor-position.html b/polymer-anchor-point/polymer-anchor-point.html
similarity index 59%
rename from polymer-anchor-position/polymer-anchor-position.html
rename to polymer-anchor-point/polymer-anchor-point.html
index 0625885..2b1d7ab 100644
--- a/polymer-anchor-position/polymer-anchor-position.html
+++ b/polymer-anchor-point/polymer-anchor-point.html
@@ -3,22 +3,22 @@
  * @module Polymer Elements
  */
 /**
- * polymer-anchor-position can be used to align two nodes. The node to
+ * polymer-anchor-point can be used to align two nodes. The node to
  * use as the reference position is the anchor node, and the node to
  * be positioned is the target node.
  *
- * Both the anchor and target nodes should have an anchor-position
- * attribute. The target node is positioned such that its anchor-position
- * aligns with the anchor node's anchor-position.
+ * Both the anchor and target nodes should have an anchor-point
+ * attribute. The target node is positioned such that its anchor-point
+ * aligns with the anchor node's anchor-point.
  *
  * Note: The target node is positioned with position: fixed, and will not
  * scroll with the page.
  *
  * Example:
  *
- *    <div id="anchor" anchor-position="bottom left"></div>
- *    <div id="target" anchor-position="top left"></div>
- *    <polymer-anchor-position id="anchor-helper"></polymer-anchor-position>
+ *    <div id="anchor" anchor-point="bottom left"></div>
+ *    <div id="target" anchor-point="top left"></div>
+ *    <polymer-anchor-point id="anchor-helper"></polymer-anchor-point>
  *    <script>
  *        var helper = document.querySelector('#anchor-helper');
  *        helper.anchor = document.querySelector('#anchor');
@@ -26,19 +26,19 @@
  *        helper.apply();
  *    </script>
  *
- * @class polymer-anchor-position
+ * @class polymer-anchor-point
  */
  -->
-<polymer-element name="polymer-anchor-position" attributes="target anchor">
+<polymer-element name="polymer-anchor-point" attributes="target anchor">
 	<script>
-		var DEFAULT_ANCHOR_POSITION = 'center center';
+		var DEFAULT_ANCHOR_POINT = 'center center';
 
-		function getAnchorPosition(node) {
-			return node.getAttribute('anchor-position') || DEFAULT_ANCHOR_POSITION;
+		function getAnchorPoint(node) {
+			return node.getAttribute('anchor-point') || DEFAULT_ANCHOR_POSITION;
 		};
 
 		(function() {
-			Polymer('polymer-anchor-position', {
+			Polymer('polymer-anchor-point', {
 				/**
 				 * The node to be positioned.
 				 * @attribute target
@@ -58,27 +58,27 @@
 					if (!this.canPosition()) {
 						return;
 					}
-					var pos = this.getAnchorPosition();
+					var pos = this.computePosition();
 					this.target.style.position = 'fixed';
 					this.target.style.top = pos.top + 'px';
 					this.target.style.left = pos.left + 'px';
 				},
-				getAnchorPosition: function() {
+				computePosition: function() {
 					var pos;
 					var rect = this.anchor.getBoundingClientRect();
-					var anchorPos = getAnchorPosition(this.anchor);
-					if (anchorPos) {
+					var anchorPt = getAnchorPoint(this.anchor);
+					if (anchorPt) {
 						pos = {};
-						if (anchorPos.indexOf('top') != -1) {
+						if (anchorPt.indexOf('top') != -1) {
 							pos.top = rect.top;
-						} else if (anchorPos.indexOf('bottom') != -1) {
+						} else if (anchorPt.indexOf('bottom') != -1) {
 							pos.top = rect.bottom;
 						} else {
 							pos.top = rect.top + rect.height / 2;
 						}
-						if (anchorPos.indexOf('left') != -1) {
+						if (anchorPt.indexOf('left') != -1) {
 							pos.left = rect.left;
-						} else if (anchorPos.indexOf('right') != -1) {
+						} else if (anchorPt.indexOf('right') != -1) {
 							pos.left = rect.right;
 						} else {
 							pos.left = rect.left + rect.width / 2;
@@ -92,15 +92,15 @@
 					// adjust by this element's target anchor pos
 					if (this.target) {
 						var targetRect = this.target.getBoundingClientRect();
-						var targetAnchorPos = getAnchorPosition(this.target);
-						if (targetAnchorPos.indexOf('bottom') != -1) {
+						var targetAnchorPt = getAnchorPoint(this.target);
+						if (targetAnchorPt.indexOf('bottom') != -1) {
 							pos.top -= targetRect.height;
-						} else if (targetAnchorPos.indexOf('top') === -1) {
+						} else if (targetAnchorPt.indexOf('top') === -1) {
 							pos.top -= targetRect.height / 2;
 						}
-						if (targetAnchorPos.indexOf('right') != -1) {
+						if (targetAnchorPt.indexOf('right') != -1) {
 							pos.left -= targetRect.width;
-						} else if (targetAnchorPos.indexOf('left') === -1) {
+						} else if (targetAnchorPt.indexOf('left') === -1) {
 							pos.left -= targetRect.width / 2;
 						}
 					}

From 793d7542e7753d4df66a8b350e780d5532bf7040 Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Wed, 14 Aug 2013 13:05:07 -0700
Subject: [PATCH 10/15] make polymer-animation not generate errors if its api
 is used when it has not enteredDocument

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

diff --git a/polymer-animation/polymer-animation.html b/polymer-animation/polymer-animation.html
index 35d8605..a7944c4 100644
--- a/polymer-animation/polymer-animation.html
+++ b/polymer-animation/polymer-animation.html
@@ -13,7 +13,7 @@
         if (p) {
           target = p.querySelector(inSelector);
         }
-        if (!target && p.host) {
+        if (!target && p && p.host) {
           target = findTarget(inSelector, p.host);
         }
         return target;

From 51162b958aafb13c71a4d72b32afd46f9c14ba6b Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Wed, 14 Aug 2013 14:04:14 -0700
Subject: [PATCH 11/15] ready -> created; inserted -> enteredDocument

---
 polymer-ajax/polymer-ajax.html                         | 2 +-
 polymer-animation/polymer-animation-group.html         | 2 +-
 polymer-animation/polymer-animation.html               | 2 +-
 polymer-animation/polymer-bounce.html                  | 2 +-
 polymer-animation/polymer-flip.html                    | 2 +-
 polymer-animation/polymer-shake.html                   | 2 +-
 polymer-cookie/polymer-cookie.html                     | 2 +-
 polymer-flex-layout/index.html                         | 2 +-
 polymer-flex-layout/polymer-flex-layout.html           | 2 +-
 polymer-google-jsapi/polymer-google-jsapi.html         | 2 +-
 polymer-grid-layout/index.html                         | 4 ++--
 polymer-layout/polymer-layout.html                     | 4 ++--
 polymer-layout/polymer-slide.html                      | 4 ++--
 polymer-list/polymer-grid.html                         | 6 +++---
 polymer-list/polymer-list.html                         | 8 ++++----
 polymer-localstorage/polymer-localstorage.html         | 2 +-
 polymer-media-query/polymer-media-query.html           | 2 +-
 polymer-meta/polymer-meta.html                         | 2 +-
 polymer-overlay/index.html                             | 2 +-
 polymer-overlay/polymer-overlay.html                   | 4 ++--
 polymer-page/polymer-page.html                         | 2 +-
 polymer-selector/index.html                            | 2 +-
 polymer-selector/polymer-selection.html                | 2 +-
 polymer-selector/polymer-selector.html                 | 2 +-
 polymer-shared-lib/polymer-shared-lib.html             | 2 +-
 polymer-signals/polymer-signals.html                   | 4 ++--
 polymer-view-source-link/polymer-view-source-link.html | 2 +-
 27 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/polymer-ajax/polymer-ajax.html b/polymer-ajax/polymer-ajax.html
index d9ad2b8..e9f8665 100644
--- a/polymer-ajax/polymer-ajax.html
+++ b/polymer-ajax/polymer-ajax.html
@@ -89,7 +89,7 @@
        * @type Object
        * @default null
        */
-      ready: function() {
+      created: function() {
         this.xhr = document.createElement('polymer-xhr');
       },
       response: '',
diff --git a/polymer-animation/polymer-animation-group.html b/polymer-animation/polymer-animation-group.html
index a09e8a1..62a3575 100644
--- a/polymer-animation/polymer-animation-group.html
+++ b/polymer-animation/polymer-animation-group.html
@@ -32,7 +32,7 @@
            */
           type: 'par'
         },
-        ready: function() {
+        created: function() {
           // TODO: need to do this for now.
           this.super();
         },
diff --git a/polymer-animation/polymer-animation.html b/polymer-animation/polymer-animation.html
index a7944c4..81584d0 100644
--- a/polymer-animation/polymer-animation.html
+++ b/polymer-animation/polymer-animation.html
@@ -133,7 +133,7 @@
           autoplay: false
         },
         animation: false,
-        ready: function() {
+        created: function() {
           this.asyncApply();
         },
         /**
diff --git a/polymer-animation/polymer-bounce.html b/polymer-animation/polymer-bounce.html
index 9a24ad7..e0a0180 100644
--- a/polymer-animation/polymer-bounce.html
+++ b/polymer-animation/polymer-bounce.html
@@ -5,7 +5,7 @@
 			targetSelector: '',
 			duration: 1,
 			magnitude: '-30px',
-      ready: function() {
+      created: function() {
         this.super();
         this.magnitudeChanged();
       },
diff --git a/polymer-animation/polymer-flip.html b/polymer-animation/polymer-flip.html
index b1613c7..46013f0 100644
--- a/polymer-animation/polymer-flip.html
+++ b/polymer-animation/polymer-flip.html
@@ -7,7 +7,7 @@
         duration: 0.5,
         axis: 'x',
 			},
-			ready: function() {
+			created: function() {
 				this.generate();
 			},
       axisChanged: function() {
diff --git a/polymer-animation/polymer-shake.html b/polymer-animation/polymer-shake.html
index 8201f2b..2a18977 100644
--- a/polymer-animation/polymer-shake.html
+++ b/polymer-animation/polymer-shake.html
@@ -45,7 +45,7 @@
 			magnitude: '10px',
 			period: 0.1,
 			easing: 'ease-in',
-      ready: function() {
+      created: function() {
         this.super();
         this.magnitudeChanged();
         this.periodChanged();
diff --git a/polymer-cookie/polymer-cookie.html b/polymer-cookie/polymer-cookie.html
index b25b944..1ec1f8a 100644
--- a/polymer-cookie/polymer-cookie.html
+++ b/polymer-cookie/polymer-cookie.html
@@ -16,7 +16,7 @@
       var cookieProps = ['expires', 'secure', 'max-age', 'domain', 'path'];
       Polymer('polymer-cookie', {
         expires: FOREVER,
-        ready: function() {
+        created: function() {
           this.load();
         },
         parseCookie: function() {
diff --git a/polymer-flex-layout/index.html b/polymer-flex-layout/index.html
index aa4f0f1..5b913b0 100644
--- a/polymer-flex-layout/index.html
+++ b/polymer-flex-layout/index.html
@@ -47,7 +47,7 @@ <h3>Title</h3>
     </template>
     <script>
       Polymer('flex-css', {
-        ready: function() {
+        created: function() {
           this.classList.add('flexbox');
         }
       });
diff --git a/polymer-flex-layout/polymer-flex-layout.html b/polymer-flex-layout/polymer-flex-layout.html
index 7742dfc..6e5ae2c 100644
--- a/polymer-flex-layout/polymer-flex-layout.html
+++ b/polymer-flex-layout/polymer-flex-layout.html
@@ -13,7 +13,7 @@
     Polymer('polymer-flex-layout', {
       vertical: false,
       isContainer: false,
-      inserted: function() {
+      enteredDocument: function() {
         this.installControllerStyles();
         this.layoutContainer = this.isContainer ? 
             this : (this.parentNode.host || this.parentNode);
diff --git a/polymer-google-jsapi/polymer-google-jsapi.html b/polymer-google-jsapi/polymer-google-jsapi.html
index 0818078..e3157d6 100644
--- a/polymer-google-jsapi/polymer-google-jsapi.html
+++ b/polymer-google-jsapi/polymer-google-jsapi.html
@@ -6,7 +6,7 @@
 <polymer-element name="polymer-google-jsapi">
   <script>
     Polymer('polymer-google-jsapi', {
-      ready: function() {
+      created: function() {
         switch (state) {
           case '':
             load();
diff --git a/polymer-grid-layout/index.html b/polymer-grid-layout/index.html
index 010f7a6..9d59d7c 100644
--- a/polymer-grid-layout/index.html
+++ b/polymer-grid-layout/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!doctype html>
 <html>
 <head>
   <title>polymer-grid-layout example</title>
@@ -63,7 +63,7 @@ <h1>Verbiage</h1>
           [5, 3]
         ]],
         outputLayout: 0,
-        ready: function() {
+        created: function() {
           this.nodes = [this.$.toolbar, this.$.sidebar, this.$.workspace, this.$.output, this.$.outputToolbar];
           this.outputLayoutChanged();
           setInterval(this.toggleLayout.bind(this), 2500);
diff --git a/polymer-layout/polymer-layout.html b/polymer-layout/polymer-layout.html
index 5b55a2a..a9dcfed 100644
--- a/polymer-layout/polymer-layout.html
+++ b/polymer-layout/polymer-layout.html
@@ -16,10 +16,10 @@
   <script>
     Polymer('polymer-layout', {
       vertical: false,
-      ready: function() {
+      created: function() {
         this.setAttribute('nolayout', '');
       },
-      inserted: function() {
+      enteredDocument: function() {
         this.asyncMethod(function() {
           this.prepare();
           this.layout();
diff --git a/polymer-layout/polymer-slide.html b/polymer-layout/polymer-slide.html
index 7a0a370..0e66031 100644
--- a/polymer-layout/polymer-slide.html
+++ b/polymer-layout/polymer-slide.html
@@ -20,10 +20,10 @@
       vertical: false,
       targetId: '',
       target: null,
-      ready: function() {
+      created: function() {
         this.setAttribute('nolayout', '');
       },
-      inserted: function() {
+      enteredDocument: function() {
         this.target = this.parentNode;
       },
       targetIdChanged: function() {
diff --git a/polymer-list/polymer-grid.html b/polymer-list/polymer-grid.html
index 4dfc977..01444a1 100644
--- a/polymer-list/polymer-grid.html
+++ b/polymer-list/polymer-grid.html
@@ -5,7 +5,7 @@
   </template>
   <script>
     Polymer('grid-item', {
-      ready: function() {
+      created: function() {
         /*
         var h = Math.floor(Math.random()*360);
         var light = Boolean(Math.random() > 0.5);
@@ -112,7 +112,7 @@
       limit: 20,
       items: null,
       scrub: 0,
-      ready: function() {
+      created: function() {
         if (!this.items) {
           this.items = [];
           for (var i = 0; i < 5000; i++) {
@@ -130,7 +130,7 @@
           }
         }
       },
-      inserted: function() {
+      enteredDocument: function() {
         this._move();
       },
       stop: function() {
diff --git a/polymer-list/polymer-list.html b/polymer-list/polymer-list.html
index 9ee6c86..1d750e2 100644
--- a/polymer-list/polymer-list.html
+++ b/polymer-list/polymer-list.html
@@ -1,10 +1,10 @@
-<polymer-element name="list-item" attributes="item">
+<polymer-element name="list-item" attributes="item">
   <template>
     <b>{{item}}</b>
   </template>
   <script>
     Polymer('list-item', {
-      ready: function() {
+      created: function() {
         var h = Math.floor(Math.random()*360);
         var light = Boolean(Math.random() > 0.5);
         if (light) {
@@ -122,7 +122,7 @@
       amplitude: 120,
       colWidth: 108,
       centerY: 200,
-      ready: function() {
+      created: function() {
         observeNodes(this.$.content, this.contentNodesChanged, this);
       },
       itemsChanged: function() {
@@ -197,7 +197,7 @@
       limit: 20,
       items: null,
       scrub: 0,
-      ready: function() {
+      created: function() {
         this.items = [];
         for (var i = 0; i < 5000; i++) {
           var n = '';
diff --git a/polymer-localstorage/polymer-localstorage.html b/polymer-localstorage/polymer-localstorage.html
index 202501c..b1e3872 100644
--- a/polymer-localstorage/polymer-localstorage.html
+++ b/polymer-localstorage/polymer-localstorage.html
@@ -52,7 +52,7 @@
        * @default false
        */
       useRaw: false,
-      ready: function() {
+      created: function() {
         this.load();
       },
       valueChanged: function() {
diff --git a/polymer-media-query/polymer-media-query.html b/polymer-media-query/polymer-media-query.html
index 811a11c..cd8aed4 100644
--- a/polymer-media-query/polymer-media-query.html
+++ b/polymer-media-query/polymer-media-query.html
@@ -22,7 +22,7 @@
     Polymer('polymer-media-query', {
       queryMatches: false,
       query: '',
-      ready: function() {
+      created: function() {
         this._mqHandler = this.queryHandler.bind(this);
         this._mq = null;
       },
diff --git a/polymer-meta/polymer-meta.html b/polymer-meta/polymer-meta.html
index 9f3b22e..a4e4bdd 100644
--- a/polymer-meta/polymer-meta.html
+++ b/polymer-meta/polymer-meta.html
@@ -24,7 +24,7 @@
 
       Polymer('polymer-meta', {
         type: 'default',
-        ready: function() {
+        created: function() {
           this.idChanged();
         },
         get metaArray() {
diff --git a/polymer-overlay/index.html b/polymer-overlay/index.html
index c3dc106..5f5f9c9 100644
--- a/polymer-overlay/index.html
+++ b/polymer-overlay/index.html
@@ -61,7 +61,7 @@
 			</template>
 			<script>
 				Polymer('x-dialog', {
-					ready: function() {
+					created: function() {
 						this.$.overlay.target = this;
 					},
 					toggle: function() {
diff --git a/polymer-overlay/polymer-overlay.html b/polymer-overlay/polymer-overlay.html
index e6bf97d..d3b5ae3 100644
--- a/polymer-overlay/polymer-overlay.html
+++ b/polymer-overlay/polymer-overlay.html
@@ -157,13 +157,13 @@
 				autoCloseDisabled: false,
 				timeout: 1000,
 				captureEventType: 'tap',
-				ready: function() {
+				created: function() {
 					if (this.tabIndex === undefined) {
 						this.tabIndex = -1;
 					}
 					this.setAttribute('touch-action', 'none');
 				},
-				inserted: function() {
+				enteredDocument: function() {
 					this.installControllerStyles();
 				},
 				/** 
diff --git a/polymer-page/polymer-page.html b/polymer-page/polymer-page.html
index 2bef02c..e32a406 100644
--- a/polymer-page/polymer-page.html
+++ b/polymer-page/polymer-page.html
@@ -7,7 +7,7 @@
   <script>
     Polymer('polymer-page', {
       fullbleed: true,
-      inserted: function() {
+      enteredDocument: function() {
         document.head.style.cssText += 'height: 100%; overflow: hidden; margin: 0;';
         document.body.style.cssText += 'position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; margin: 0;';
         document.body.style.transition = 'all 0.3s';
diff --git a/polymer-selector/index.html b/polymer-selector/index.html
index 94d097c..1ee957d 100644
--- a/polymer-selector/index.html
+++ b/polymer-selector/index.html
@@ -85,7 +85,7 @@ <h2>binding of a group of radio buttons to a variable</h2>
 
     <script>
       Polymer('selector-examples', {
-        ready: function() {
+        created: function() {
           this.multiSelected = [1, 3];
           this.color = 'green';
         }
diff --git a/polymer-selector/polymer-selection.html b/polymer-selector/polymer-selection.html
index 5c9ac16..b45d01f 100644
--- a/polymer-selector/polymer-selection.html
+++ b/polymer-selector/polymer-selection.html
@@ -21,7 +21,7 @@
   <script>
     Polymer('polymer-selection', {
       multi: false,
-      ready: function() {
+      created: function() {
         this.clear();
       },
       clear: function() {
diff --git a/polymer-selector/polymer-selector.html b/polymer-selector/polymer-selector.html
index 9730bff..25e0428 100644
--- a/polymer-selector/polymer-selector.html
+++ b/polymer-selector/polymer-selector.html
@@ -159,7 +159,7 @@
       itemsSelector: '',
       activateEvent: 'tap',
       notap: false,
-      ready: function() {
+      created: function() {
         this.activateListener = this.activateHandler.bind(this);
         this.observer = new MutationObserver(this.updateSelected.bind(this));
         if (!this.target) {
diff --git a/polymer-shared-lib/polymer-shared-lib.html b/polymer-shared-lib/polymer-shared-lib.html
index 81c50e7..5a1cb99 100644
--- a/polymer-shared-lib/polymer-shared-lib.html
+++ b/polymer-shared-lib/polymer-shared-lib.html
@@ -8,7 +8,7 @@
     (function() {
       Polymer('polymer-shared-lib', {
         notifyEvent: 'polymer-shared-lib-loaded',
-        ready: function() {
+        created: function() {
         },
         urlChanged: function() {
           requireApi(this);
diff --git a/polymer-signals/polymer-signals.html b/polymer-signals/polymer-signals.html
index 6170e53..4d0439f 100644
--- a/polymer-signals/polymer-signals.html
+++ b/polymer-signals/polymer-signals.html
@@ -1,4 +1,4 @@
-<!--
+<!--
 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.
@@ -7,7 +7,7 @@
   <script>
     (function(){
       Polymer('polymer-signals', {
-        inserted: function() {
+        enteredDocument: function() {
           signals.push(this);
         },
         removed: function() {
diff --git a/polymer-view-source-link/polymer-view-source-link.html b/polymer-view-source-link/polymer-view-source-link.html
index 164c6fb..c385b24 100644
--- a/polymer-view-source-link/polymer-view-source-link.html
+++ b/polymer-view-source-link/polymer-view-source-link.html
@@ -6,7 +6,7 @@
 <polymer-element name="polymer-view-source-link" target="_blank" extends="a">
   <script>
     Polymer('polymer-view-source-link', {
-      ready: function() {
+      created: function() {
         var href = this.getAttribute('href') || window.location;
         this.setAttribute('href', 'view-source:' + href); 
       }

From 3af712d9dcbea2e6c8d44fd20579131223ef2e35 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Wed, 14 Aug 2013 17:11:32 -0700
Subject: [PATCH 12/15] polymer-collapse: it was calling update only when
 closed is true which is a bug. Fix so it calls update in targetChanged no
 matter closed is true or false.

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

diff --git a/polymer-collapse/polymer-collapse.html b/polymer-collapse/polymer-collapse.html
index 2b282ab..15cc224 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 defaultClosed">
+<polymer-element name="polymer-collapse" attributes="targetId target horizontal closed duration fixedSize">
   <template>
     <style>
       @host {   
@@ -93,7 +93,6 @@
        */
       fixedSize: false,
       size: null,
-      defaultClosed: false,
       removed: function() {
         this.removeListeners(this.target);
       },
@@ -113,9 +112,7 @@
           this.target.style.overflow = 'hidden';
           this.addListeners(this.target);
         }
-        if (this.closed || this.defaultClosed) {
-          this.update();
-        }
+        this.update();
       },
       addListeners: function(node) {
         this.transitionEndListener = this.transitionEndListener || 

From 2c20bcfc70668dde779a75183a35c1c90477065f Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Wed, 14 Aug 2013 16:10:44 -0700
Subject: [PATCH 13/15] polymer-anchor-point: implement more position values

---
 polymer-anchor-point/index.html               |  37 +++-
 .../polymer-anchor-point.html                 | 165 +++++++++++++-----
 2 files changed, 155 insertions(+), 47 deletions(-)

diff --git a/polymer-anchor-point/index.html b/polymer-anchor-point/index.html
index 70abd82..f1ca94c 100644
--- a/polymer-anchor-point/index.html
+++ b/polymer-anchor-point/index.html
@@ -19,6 +19,8 @@
 				padding: 5px;
 				border: 1px solid black;
 				display: none;
+				position: absolute;
+				left: -99999px;
 			}
 			#target.active {
 				display: block;
@@ -36,6 +38,15 @@
 				<polymer-ui-icon-button icon="add" anchor-point="bottom right" target-anchor-point="top right"></polymer-ui-icon-button>
 			</polymer-ui-toolbar>
 			<div flex></div>
+			<div style="text-align:center">
+				<p><strong>Click icon buttons in the toolbars or enter custom <a href="http://dev.w3.org/csswg/css-backgrounds/#the-background-position" target="_blank">anchor-points</a> below.</strong></p>
+				<br>
+				anchor-point: <input id="customAnchorPt" value="bottom">
+				target anchor-point: <input id="customTargetAnchorPt" value="center -10px">
+				<br><br>
+				Click <polymer-ui-icon-button icon="settings" onclick="toggleCustom(event)"></polymer-ui-icon-button> for custom
+			</div>
+			<div flex></div>
 			<polymer-ui-toolbar theme="polymer-ui-light-theme" onclick="toggle(event)">
 				<polymer-ui-icon-button icon="drawer" anchor-point="top left" target-anchor-point="bottom left"></polymer-ui-icon-button>
 				<polymer-ui-icon-button icon="dots" anchor-point="top center" target-anchor-point="bottom center"></polymer-ui-icon-button>
@@ -43,7 +54,7 @@
 				<polymer-ui-icon-button icon="search" anchor-point="top right" target-anchor-point="bottom right"></polymer-ui-icon-button>
 			</polymer-ui-toolbar>
 		</div>
-		<div id="target"></div>
+		<div id="target" onclick="toggle(event)"></div>
 		<polymer-anchor-point id="anchorable"></polymer-anchor-point>
 		<script>
 			function toggle(e) {
@@ -53,9 +64,27 @@
 				if (target.classList.contains('active')) {
 					target.classList.remove('active');
 				} else {
-					var targetAnchorPos = anchor.getAttribute('target-anchor-point');
-					target.setAttribute('anchor-point', targetAnchorPos);
-					target.innerHTML = 'anchor-point: ' + anchor.getAttribute('anchor-point') + '<br>' + 'target anchor-point: ' + targetAnchorPos;
+					var targetAnchorPt = anchor.getAttribute('target-anchor-point');
+					target.setAttribute('anchor-point', targetAnchorPt);
+					target.innerHTML = 'anchor-point: ' + anchor.getAttribute('anchor-point') + '<br>' + 'target anchor-point: ' + targetAnchorPt;
+					anchorable.target = target;
+					anchorable.anchor = anchor;
+					target.classList.add('active');
+					anchorable.apply();
+				}
+			};
+			function toggleCustom(e) {
+				var anchorable = document.querySelector('#anchorable');
+				var target = document.querySelector('#target');
+				var anchor = e.target;
+				if (target.classList.contains('active')) {
+					target.classList.remove('active');
+				} else {
+					var anchorPt = document.querySelector('#customAnchorPt').value;
+					anchor.setAttribute('anchor-point', anchorPt);
+					var targetAnchorPt = document.querySelector('#customTargetAnchorPt').value;
+					target.setAttribute('anchor-point', targetAnchorPt);
+					target.innerHTML = 'anchor-point: ' + anchorPt + '<br>' + 'target anchor-point: ' + targetAnchorPt;
 					anchorable.target = target;
 					anchorable.anchor = anchor;
 					target.classList.add('active');
diff --git a/polymer-anchor-point/polymer-anchor-point.html b/polymer-anchor-point/polymer-anchor-point.html
index 2b1d7ab..5909ebf 100644
--- a/polymer-anchor-point/polymer-anchor-point.html
+++ b/polymer-anchor-point/polymer-anchor-point.html
@@ -31,13 +31,122 @@
  -->
 <polymer-element name="polymer-anchor-point" attributes="target anchor">
 	<script>
-		var DEFAULT_ANCHOR_POINT = 'center center';
+		(function() {
+			var DEFAULT_ANCHOR_POINT = 'center center';
 
-		function getAnchorPoint(node) {
-			return node.getAttribute('anchor-point') || DEFAULT_ANCHOR_POSITION;
-		};
+			function getAnchorPoint(node) {
+				var anchorPt = node.getAttribute('anchor-point');
+				if (!anchorPt || anchorPt === 'none') {
+					anchorPt = DEFAULT_ANCHOR_POINT;
+				}
+				return anchorPt;
+			};
+
+			function lengthIsPx(length) {
+				return length.slice(-2) === 'px';
+			};
+
+			function lengthIsPercent(length) {
+				return length.slice(-1) === '%';
+			};
+
+			function computeLength(length, ref) {
+				var computed = 0;
+				if (lengthIsPx(length)) {
+					computed  = length.slice(0, -2);
+				} else if (lengthIsPercent(length)) {
+					computed = ref * length.slice(0, -1) / 100;
+				}
+				return computed;
+			};
+
+			function partIsX(part) {
+				return part === 'left' || part === 'right' || part === 'center';
+			};
+
+			function partIsY(part) {
+				return part === 'top' || part === 'bottom' || part === 'center';
+			};
+
+			function partIsKeyword(part) {
+				return part.slice(-1) !== '%' && part.slice(-2) !== 'px';
+			};
+
+			function parsePosition(position) {
+				var parsed = {};
+				var parts = position.split(' ');
+				var i = 0;
+				var lastEdgeX = true;
+				do {
+					if (partIsX(parts[i])) {
+						parsed.x = parts[i];
+						lastEdgeX = parts[i] !== 'center';
+					} else if (partIsY(parts[i])) {
+						parsed.y = parts[i];
+						lastEdgeX = false;
+					} else if (lastEdgeX) {
+						parsed.xOffset = parts[i];
+						lastEdgeX = false;
+					} else {
+						parsed.yOffset = parts[i];
+					}
+				} while (++i < parts.length);
+				return parsed;
+			};
+
+			function computeAnchorOffset(rect, anchorPt) {
+				var offset = {
+					left: 0,
+					top: 0
+				};
+				var parsed = parsePosition(anchorPt);
+				if (!parsed.x && !parsed.xOffset) {
+					offset.left = rect.width / 2;
+				} else if (parsed.x && !parsed.xOffset) {
+					switch (parsed.x) {
+						case 'left':
+							offset.left = 0;
+							break;
+						case 'right':
+							offset.left = rect.width;
+							break;
+						case 'center':
+							offset.left = rect.width / 2;
+							break;
+					}
+				} else {
+					var computed = computeLength(parsed.xOffset, rect.width);
+					if (parsed.x === 'right') {
+						offset.left = rect.width - computed;
+					} else if (!parsed.x || parsed.x === 'left') {
+						offset.left = computed;
+					}
+				}
+				if (!parsed.y && !parsed.yOffset) {
+					offset.top = rect.height / 2;
+				} else if (parsed.y && !parsed.yOffset) {
+					switch (parsed.y) {
+						case 'top':
+							offset.top = 0;
+							break;
+						case 'bottom':
+							offset.top = rect.height;
+							break;
+						case 'center':
+							offset.top = rect.height / 2;
+							break;
+					}
+				} else {
+					var computed = computeLength(parsed.yOffset, rect.height);
+					if (parsed.y === 'bottom') {
+						offset.top = rect.height - computed;
+					} else if (!parsed.y || parsed.y === 'top') {
+						offset.top = computed;
+					}
+				}
+				return offset;
+			};
 
-		(function() {
 			Polymer('polymer-anchor-point', {
 				/**
 				 * The node to be positioned.
@@ -64,46 +173,16 @@
 					this.target.style.left = pos.left + 'px';
 				},
 				computePosition: function() {
-					var pos;
 					var rect = this.anchor.getBoundingClientRect();
 					var anchorPt = getAnchorPoint(this.anchor);
-					if (anchorPt) {
-						pos = {};
-						if (anchorPt.indexOf('top') != -1) {
-							pos.top = rect.top;
-						} else if (anchorPt.indexOf('bottom') != -1) {
-							pos.top = rect.bottom;
-						} else {
-							pos.top = rect.top + rect.height / 2;
-						}
-						if (anchorPt.indexOf('left') != -1) {
-							pos.left = rect.left;
-						} else if (anchorPt.indexOf('right') != -1) {
-							pos.left = rect.right;
-						} else {
-							pos.left = rect.left + rect.width / 2;
-						}
-					} else {
-						pos = {
-							left: rect.left,
-							top: rect.top
-						}
-					}
-					// adjust by this element's target anchor pos
-					if (this.target) {
-						var targetRect = this.target.getBoundingClientRect();
-						var targetAnchorPt = getAnchorPoint(this.target);
-						if (targetAnchorPt.indexOf('bottom') != -1) {
-							pos.top -= targetRect.height;
-						} else if (targetAnchorPt.indexOf('top') === -1) {
-							pos.top -= targetRect.height / 2;
-						}
-						if (targetAnchorPt.indexOf('right') != -1) {
-							pos.left -= targetRect.width;
-						} else if (targetAnchorPt.indexOf('left') === -1) {
-							pos.left -= targetRect.width / 2;
-						}
-					}
+					var anchorOffset = computeAnchorOffset(rect, anchorPt);
+					var targetRect = this.target.getBoundingClientRect();
+					var targetAnchorPt = getAnchorPoint(this.target);
+					var targetOffset = computeAnchorOffset(targetRect, targetAnchorPt);
+					var pos = {
+						left: rect.left + anchorOffset.left - targetOffset.left,
+						top: rect.top + anchorOffset.top - targetOffset.top
+					};
 					return pos;
 				}
 			});

From 31970cb05e38139f8fca0a0733a7c90c39756573 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Wed, 14 Aug 2013 17:27:20 -0700
Subject: [PATCH 14/15] polymer-anchor-point: add a comment about <dialog> spec

---
 polymer-anchor-point/polymer-anchor-point.html | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/polymer-anchor-point/polymer-anchor-point.html b/polymer-anchor-point/polymer-anchor-point.html
index 5909ebf..df1e0c4 100644
--- a/polymer-anchor-point/polymer-anchor-point.html
+++ b/polymer-anchor-point/polymer-anchor-point.html
@@ -14,6 +14,9 @@
  * Note: The target node is positioned with position: fixed, and will not
  * scroll with the page.
  *
+ * Note: This is meant to polyfill the <dialog> positioning behavior when
+ * an anchor is provided. Spec: http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#the-dialog-element
+ *
  * Example:
  *
  *    <div id="anchor" anchor-point="bottom left"></div>

From 73b51e407431ba0375414c5781890d5a68bde591 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Thu, 15 Aug 2013 12:42:50 -0700
Subject: [PATCH 15/15] polymer-overlay: use :host instead of @host

---
 polymer-overlay/polymer-overlay-global.css | 129 ---------------
 polymer-overlay/polymer-overlay.css        | 184 ++++-----------------
 polymer-overlay/polymer-overlay.html       |   2 +
 3 files changed, 36 insertions(+), 279 deletions(-)
 delete mode 100644 polymer-overlay/polymer-overlay-global.css

diff --git a/polymer-overlay/polymer-overlay-global.css b/polymer-overlay/polymer-overlay-global.css
deleted file mode 100644
index 021c67d..0000000
--- a/polymer-overlay/polymer-overlay-global.css
+++ /dev/null
@@ -1,129 +0,0 @@
-/*
- * 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-overlay {
-	position: fixed;
-	z-index: 10;
-	outline: none;
-	display: none;
-	opacity: 0.99;
-	-webkit-transition: opacity 0.001s;
-	transition: opacity 0.001s;
-}
-
-/*
-	The revealed class exists because it's necessary to 'show' a node
-	before applying a transition. When an overlay is opened, it is 
-	immediately revealed (display: block) and then asynchronously the 
-	opened or closing classes are added.
-
-	Because we don't want to actually show the node before a transition
-	or animation is applied, when the node is 
-	revealed, it is made display: block but visibility: hidden.
-	It is then made visibility: visible when it is opened.
-*/
-
-.polymer-overlay.revealed {
-	display: block;
-	visibility: hidden;
-}
-
-.polymer-overlay.revealed.opened {
-	opacity: 1;
-	display: block;
-	visibility: visible;
-}
-
-.polymer-overlay.revealed.closing {
-	display: block;
-	visibility: visible;
-}
-
-@-webkit-keyframes polymer-overlay-shakeFadeIn {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(0);
-  }
-  10% {
-    -webkit-transform: translateX(-50px);
-  }
-  30% {
-    -webkit-transform: translateX(50px);
-  }
-  50% {
-    -webkit-transform: translateX(-25px);
-  }
-  70% {
-    -webkit-transform: translateX(25px);
-  }
-  90% {
-    -webkit-transform: translateX(-13px);
-  }
-  100% {
-    -webkit-transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes polymer-overlay-shakeFadeIn {
-  0% {
-    opacity: 0;
-    transform: translateX(0);
-  }
-  10% {
-    transform: translateX(-50px);
-  }
-  30% {
-    transform: translateX(50px);
-  }
-  50% {
-    transform: translateX(-25px);
-  }
-  70% {
-    transform: translateX(25px);
-  }
-  90% {
-    transform: translateX(-13px);
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@-webkit-keyframes polymer-overlay-shakeFadeOut {
-  0% {
-    opacity: 1;
-    -webkit-transform: translateX(0);
-  }
-  10% {
-    -webkit-transform: translateX(-50px);
-  }
-  30% {
-    -webkit-transform: translateX(50px);
-  }
-  100% {
-    -webkit-transform: translateX(-100%);
-    opacity: 0;
-  }
-}
-
-@keyframes polymer-overlay-shakeFadeOut {
-  0% {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  10% {
-    transform: translateX(-50px);
-  }
-  30% {
-    transform: translateX(50px);
-  }
-  100% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-}
diff --git a/polymer-overlay/polymer-overlay.css b/polymer-overlay/polymer-overlay.css
index 92c575a..2bb49f2 100644
--- a/polymer-overlay/polymer-overlay.css
+++ b/polymer-overlay/polymer-overlay.css
@@ -4,175 +4,59 @@
  * license that can be found in the LICENSE file.
  */
 
-/*
-  TODO(sorvell): include a reasonable set of default overlay opening 
-  animations. What's here right now is ad hoc.
-*/
- 
- /*
-    Styling a polymer-overlay:
- 
-    1. use the 'opened' class to style the overlay when it is open.
-    A transition or animation can be applied to animate the overlay into place.
-    Note: there's no need to set the display property of an overlay. That's
-    managed automatically.
- 
-    2. To apply a different animation when the overlay closes, use the 
-    'closing' class.
- */
- 
 /* Note that trbl: 0 + position: fixed will not 'fit to window'
 if a transform is applied to a parent of this element. That parent
 becomes the containing block; see:
 http://dev.w3.org/csswg/css3-transforms/#transform-rendering
 We address this by using script based positioning =(
 */
-@host {
-  .polymer-overlay {
-    position: fixed;
-    z-index: 10;
-    outline: none;
-    display: none;
-    opacity: 0.99;
-    -webkit-transition: opacity 0.001s;
-    transition: opacity 0.001s;
-  }
-
-  /*
-    The revealed class exists because it's necessary to 'show' a node
-    before applying a transition. When an overlay is opened, it is 
-    immediately revealed (display: block) and then asynchronously the 
-    opened or closing classes are added.
-
-    Because we don't want to actually show the node before a transition
-    or animation is applied, when the node is 
-    revealed, it is made display: block but visibility: hidden.
-    It is then made visibility: visible when it is opened.
-  */
-
-  .revealed {
-    display: block;
-    visibility: hidden;
-  }
-
-  .revealed.opened {
-    opacity: 1;
-    display: block;
-    visibility: visible;
-  }
-
-  .revealed.closing {
-    display: block;
-    visibility: visible;
-  }
-
-  /* 
-    When an animation is detected (via an animationstart event) this class
-    is applied to remove any transition. This ensures only 1 animation end event
-    will be processed.
-
-    NOTE: if a rule such as a media query changes an overlay from using a css 
-    animation to a transition, the animation class must be altered or removed.
-  */
-  .animation {
-    -webkit-transition: none;
-    transition: none;
-  }
-
-  .polymer-overlay-fade {
-    opacity: 0;
-    -webkit-transition: all 0.218s;
-    transition: all 0.218s;
-  }
-
-  .polymer-overlay-fade.opened {
-    opacity: 1;
-  }
-
-  .polymer-overlay-scale-slideup {
-    opacity: 0.0;
-    -webkit-transform: scale(1.05);
-    transform: scale(1.05);
-  }
-
-  .polymer-overlay-scale-slideup.opened {
-    opacity: 1.0;
-    -webkit-transform: scale(1.0);
-    transform: scale(1.0);
-    -webkit-transition: all 0.218s;
-    transition: all 0.218s;
-  }
-
-  .polymer-overlay-scale-slideup.closing {
-    opacity: 0;
-    -webkit-transform: translateY(-100%);
-    transform: translateY(-100%);
-    -webkit-transition: all 0.4s;
-    transition: all 0.4s;
-  }
-  
-  .polymer-overlay-shake.opened {
-    -webkit-animation-duration: 0.5s;
-    -webkit-animation-fill-mode: both;
-    -webkit-animation-name: polymer-overlay-shakeFadeIn;
-    animation-duration: 0.5s;
-    animation-fill-mode: both;
-    animation-name: polymer-overlay-shakeFadeIn;
-  }
-
-  .polymer-overlay-shake.closing {
-    -webkit-animation-duration: 0.5s;
-    -webkit-animation-fill-mode: both;
-    -webkit-animation-name: polymer-overlay-shakeFadeOut;
-    animation-duration: 0.5s;
-    animation-fill-mode: both;
-    animation-name: polymer-overlay-shakeFadeOut;
-  }
-}
-
 .polymer-overlay {
-  position: fixed;
-  z-index: 10;
-  outline: none;
-  display: none;
-  opacity: 0.99;
-  -webkit-transition: opacity 0.001s;
-  transition: opacity 0.001s;
+	position: fixed;
+	z-index: 10;
+	outline: none;
+	display: none;
+	opacity: 0.99;
+	-webkit-transition: opacity 0.001s;
+	transition: opacity 0.001s;
 }
 
 /*
-  The revealed class exists because it's necessary to 'show' a node
-  before applying a transition. When an overlay is opened, it is 
-  immediately revealed (display: block) and then asynchronously the 
-  opened or closing classes are added.
-
-  Because we don't want to actually show the node before a transition
-  or animation is applied, when the node is 
-  revealed, it is made display: block but visibility: hidden.
-  It is then made visibility: visible when it is opened.
+	The revealed class exists because it's necessary to 'show' a node
+	before applying a transition. When an overlay is opened, it is 
+	immediately revealed (display: block) and then asynchronously the 
+	opened or closing classes are added.
+
+	Because we don't want to actually show the node before a transition
+	or animation is applied, when the node is 
+	revealed, it is made display: block but visibility: hidden.
+	It is then made visibility: visible when it is opened.
 */
 
 .revealed {
-  display: block;
-  visibility: hidden;
+	display: block;
+	visibility: hidden;
 }
 
 .revealed.opened {
-  opacity: 1;
-  display: block;
-  visibility: visible;
+	opacity: 1;
+	display: block;
+	visibility: visible;
 }
 
 .revealed.closing {
-  display: block;
-  visibility: visible;
+	display: block;
+	visibility: visible;
 }
 
-.backdrop {
-	position: fixed;
-	left: 0;
-	top: 0;
-	bottom: 0;
-	right: 0;
-	background: rgba(0, 0, 0, 0.25);
+/* 
+	When an animation is detected (via an animationstart event) this class
+	is applied to remove any transition. This ensures only 1 animation end event
+	will be processed.
+
+	NOTE: if a rule such as a media query changes an overlay from using a css 
+	animation to a transition, the animation class must be altered or removed.
+*/
+.animation {
+	-webkit-transition: none;
+	transition: none;
 }
diff --git a/polymer-overlay/polymer-overlay.html b/polymer-overlay/polymer-overlay.html
index d3b5ae3..0f10120 100644
--- a/polymer-overlay/polymer-overlay.html
+++ b/polymer-overlay/polymer-overlay.html
@@ -81,6 +81,8 @@
 			var overlays = [];
 			var trackOverlays = function(inOverlay) {
 				if (inOverlay.opened) {
+					//var overlayZ = window.getComputedStyle(inOverlay.target).zIndex;
+					//var z0 = Math.max(currentOverlayZ(), overlayZ);
 					var z0 = currentOverlayZ();
 					overlays.push(inOverlay);
 					var z1 = currentOverlayZ();