diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 9a37da3..032e038 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -21,22 +21,33 @@ Other projects require a similar agreement: jQuery, Firefox, Apache, Node, and m
 
 Here's an easy guide that should get you up and running:
 
-1. Fork the project on github and pull down your copy.
-   > replace the {{ username }} with your username and {{ repository }} with the repository name
+1. Fork the project on github
+2. Pull down the polymer-all project.
 
-        git clone git@github.com:{{ username }}/{{ repository }}.git --recursive
+        git clone git@github.com:Polymer/polymer-all --recursive
 
-    Note the `--recursive`. This is necessary for submodules to initialize properly. If you don't do a recursive clone, you'll have to init them manually:
-
-        git submodule init
-        git submodule update
-
-2. Development happens on the `master` branch. Get yourself on it!
+3. Go to the polymer-elements directory and switch it to point to your origin.
 
+        git remote remove origin
+        git remote add origin git@github.com:{{ username }}/{{ repository }}
+        git fetch origin
         git checkout master
 
+4. Pull down node dependencies. In your polymer-elements directory run 'npm install' this will pull down the tools used for executing the test. 
+
 That's it for the one time setup. Now you're ready to make a change.
 
+## Running the tests
+
+To run the tests make sure you have a webserver running with its docroot pointing to the polymer-all directory.  Then navigate to /polymer-elements/test/runner.html
+
+For Example:
+
+      cd polymer-all
+      ruby -rwebrick -e'WEBrick::HTTPServer.new(:Port => 4000, :DocumentRoot => Dir.pwd).start'
+
+Then in your browser open: http://localhost:4000/polymer-elements/test/runner.html
+
 ## Submitting a pull request
 
 We iterate fast! To avoid potential merge conflicts, it's a good idea to pull from the main project before making a change and submitting a pull request. The easiest way to do this is setup a remote called `upstream` and do a pull before working on a change:
diff --git a/gruntfile.js b/gruntfile.js
index 9d0f9db..d778429 100644
--- a/gruntfile.js
+++ b/gruntfile.js
@@ -19,7 +19,7 @@ module.exports = function(grunt) {
           outdir: 'docs',
           linkNatives: 'true',
           tabtospace: 2,
-          themedir: 'tools/doc/themes/footstrap'
+          themedir: 'tools/doc/themes/polymerase'
         }
       }
     }
diff --git a/polymer-flex-layout/index.html b/polymer-flex-layout/index.html
index 655d1b5..aa4f0f1 100644
--- a/polymer-flex-layout/index.html
+++ b/polymer-flex-layout/index.html
@@ -54,7 +54,7 @@ <h3>Title</h3>
     </script>
   </polymer-element>
 
-  <polymer-element name="flex-container" extends="polymer-flex-panel">
+  <polymer-element name="flex-container" noscript extends="polymer-flex-panel">
     <template>
       <style>
         div, polymer-flex-panel {
@@ -82,7 +82,7 @@ <h3>Title</h3>
     </template>
   </polymer-element>
   
-  <polymer-element name="flex-nonvisual">
+  <polymer-element name="flex-nonvisual" noscript>
     <template>
       <style>
         div {
diff --git a/polymer-flex-layout/polymer-flex-panel.html b/polymer-flex-layout/polymer-flex-panel.html
index 6e1d4e2..9411452 100644
--- a/polymer-flex-layout/polymer-flex-panel.html
+++ b/polymer-flex-layout/polymer-flex-panel.html
@@ -3,8 +3,15 @@
 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>
+<link rel="import" href="polymer-flex-layout.html">
+
+<polymer-element name="polymer-flex-panel" extends="polymer-flex-layout">
   <template>
     <shadow></shadow>
   </template>
+  <script>
+    Polymer('polymer-flex-panel', {
+      isContainer: true
+    });
+  </script>
 </polymer-element>
diff --git a/polymer-grid-layout/polymer-grid-layout.html b/polymer-grid-layout/polymer-grid-layout.html
index 41f3ddc..00a08be 100644
--- a/polymer-grid-layout/polymer-grid-layout.html
+++ b/polymer-grid-layout/polymer-grid-layout.html
@@ -136,8 +136,9 @@
       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
+        //
+        // create rails for `count` tracks using sizing function `sizeFn(track)`
+        // for n tracks there are (n+1) rails
         //
         //   |track|track|track|
         //  0|->sz0|->sz1|<-sz2|0
@@ -145,7 +146,14 @@
         //   |track|track|track|
         //  0|->sz0|     |<-sz2|0
         //
-        //  0|
+        // there can be one elastic track per set
+        //
+        //   |track|track|track|track|
+        //  0|-->s0|-->s1|<--s1|<--s2|0
+        //
+        // sz1 spans two (>1) tracks which makes
+        // it elastic (it's underconstrained)
+        //
         var rails = [];
         var a = 0;
         for (var i=0; i<count; i++) {
@@ -170,21 +178,11 @@
         return rails;
       }
 
+      // TODO(sjmiles): this codes tries to preserve actual position,
+      // so 'unposition' is really 'naturalize' or something
       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.right = style.bottom = style.width = style.height = '';
         style.position = 'absolute';
         style.display = 'inline-block';
         style.boxSizing = style.mozBoxSizing = 'border-box';
diff --git a/polymer-list/polymer-grid.html b/polymer-list/polymer-grid.html
index e398108..4dfc977 100644
--- a/polymer-list/polymer-grid.html
+++ b/polymer-list/polymer-grid.html
@@ -94,7 +94,7 @@
   </script>
 </polymer-element>
 
-<polymer-element name="polymer-grid">
+<polymer-element name="polymer-grid" attributes="items">
   <template>
     <style>
       @host{*{
@@ -113,19 +113,21 @@
       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));
+        if (!this.items) {
+          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;
           }
-          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() {
diff --git a/polymer-overlay/index.html b/polymer-overlay/index.html
index 232273c..c3dc106 100644
--- a/polymer-overlay/index.html
+++ b/polymer-overlay/index.html
@@ -37,6 +37,39 @@
 		</style>
 	</head>
 	<body>
+		<polymer-element name="x-dialog" attributes="opened autoCloseDisabled">
+			<template>
+				<style>
+					@host {
+						:scope {
+							box-sizing: border-box;
+							-moz-box-sizing: border-box;
+							font-family: Arial, Helvetica, sans-serif;
+							font-size: 13px;
+							-webkit-user-select: none;
+							-moz-user-select: none;
+							overflow: hidden;
+							background: white;
+							padding:30px 42px;
+							outline: 1px solid rgba(0,0,0,0.2);
+							box-shadow: 0 4px 16px rgba(0,0,0,0.2);
+						}
+					}
+				</style>
+				<polymer-overlay id="overlay" opened="{{opened}}" autoCloseDisabled="{{autoCloseDisabled}}"></polymer-overlay>
+				<content></content>
+			</template>
+			<script>
+				Polymer('x-dialog', {
+					ready: function() {
+						this.$.overlay.target = this;
+					},
+					toggle: function() {
+						this.$.overlay.toggle();
+					}
+				});
+			</script>
+		</polymer-element>
 		<button overlay="#dialog">Toggle Dialog</button>
 		( open styling: 
 		<select onchange="changeOpening(event)">
@@ -49,51 +82,37 @@
 		<label>scrim: <input type="checkbox" onchange="scrimChange(event)"></label>
 		)
 		<br>
-		<div id="dialog" class="dialog polymer-overlay-scale-slideup">
-			<polymer-overlay></polymer-overlay>
+		<x-dialog id="dialog" class="dialog polymer-overlay-scale-slideup">
 			<h2>Dialog</h2>
 			<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla sapien sed enim sollicitudin laoreet. Suspendisse suscipit, metus ac volutpat sodales, libero magna semper lacus, molestie fringilla massa orci ut arcu. Nullam sodales urna sit amet odio vehicula mattis.</div><br><br>
 			<div>Ut aliquam vulputate congue. Vestibulum pretium pretium nulla quis sollicitudin. Praesent lacinia congue erat nec mattis. Fusce commodo lacus est. Duis turpis eros, ultrices sed aliquet non, blandit egestas velit. Integer a augue nec lorem tristique hendrerit. Curabitur imperdiet risus id enim bibendum vestibulum. Integer id magna at arcu faucibus fermentum vel a augue. Sed fringilla venenatis dolor, in blandit magna molestie luctus. Vestibulum dignissim posuere ultrices. Aenean urna nisl, tincidunt vitae iaculis ut, pharetra nec eros.</div><br><br>
 			<div>
 				<input placeholder="say something..." autofocus oninput="somethingCheck()"></input><br>
 				I agree with this wholeheartedly.
-				<div id="confirmation" class="dialog">
-					<polymer-overlay></polymer-overlay>
+				<x-dialog id="confirmation" class="dialog">
 					Thank you.
-				</div>
+				</x-dialog>
 			</div><br><br>
 			<button overlay-toggle>OK</button>
-		</div>
+		</x-dialog>
 
 		<br><br>
 
 		<button overlay="#dialog2">Toggle Dialog 2</button>
 
-		<div id="dialog2" class="dialog polymer-overlay-shake" autoCloseDisabled="true">
-			<polymer-overlay></polymer-overlay>
+		<x-dialog id="dialog2" class="dialog polymer-overlay-shake" autoCloseDisabled="true">
 			<div>
 				<h2>Dialog 2</h2>
 					I'm dizzy.
 			</div>
 			<br><br>
 			<button overlay-toggle>OK</button>
-		</div>
+		</x-dialog>
 		<script>
-			setupOverlays = function() {
-				var overlays = document.querySelectorAll('polymer-overlay');
-				Array.prototype.forEach.call(overlays, function(o) {
-					o.target = o.parentNode;
-				});
-			}
-
-			document.addEventListener('WebComponentsReady', function() {
-				setupOverlays();
-			});
-
 			$ = document.querySelector.bind(document);
 
 			somethingCheck = function() {
-				$('#confirmation').querySelector('polymer-overlay').opened = (event.target.value == 'something');
+				$('#confirmation').opened = (event.target.value == 'something');
 			}
 			
 			changeOpening = function(e) {
@@ -115,10 +134,7 @@ <h2>Dialog 2</h2>
 			var overlayButtons = document.querySelectorAll('button[overlay]');
 			Array.prototype.forEach.call(overlayButtons, function(b) {
 				b.addEventListener('tap', function(e) {
-					var overlay = document.querySelector(e.target.getAttribute('overlay'));
-					if (overlay) {
-						overlay.querySelector('polymer-overlay').toggle();
-					}
+					document.querySelector(e.target.getAttribute('overlay')).toggle();
 				})
 			});
 		</script>
diff --git a/polymer-overlay/polymer-overlay.css b/polymer-overlay/polymer-overlay.css
index 821b061..92c575a 100644
--- a/polymer-overlay/polymer-overlay.css
+++ b/polymer-overlay/polymer-overlay.css
@@ -28,7 +28,7 @@ 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;
@@ -129,3 +129,50 @@ We address this by using script based positioning =(
     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;
+}
+
+/*
+  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;
+}
+
+.backdrop {
+	position: fixed;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	background: rgba(0, 0, 0, 0.25);
+}
diff --git a/polymer-overlay/polymer-overlay.html b/polymer-overlay/polymer-overlay.html
index 08587c9..e6bf97d 100644
--- a/polymer-overlay/polymer-overlay.html
+++ b/polymer-overlay/polymer-overlay.html
@@ -71,8 +71,8 @@
 -->
 <polymer-element name="polymer-overlay" attributes="target opened autoCloseDisabled">
 	<template>
+		<link rel="stylesheet" polymer-scope="controller" href="polymer-overlay.css">
 		<link rel="stylesheet" href="polymer-overlay.css">
-		<link rel="stylesheet" polymer-scope="global" href="polymer-overlay-global.css">
 		<polymer-key-helper id="keyHelper"></polymer-key-helper>
 	</template>
 	<script>
@@ -163,6 +163,9 @@
 					}
 					this.setAttribute('touch-action', 'none');
 				},
+				inserted: function() {
+					this.installControllerStyles();
+				},
 				/** 
 				 * Toggle the opened state of the overlay.
 				 * @method toggle
@@ -253,10 +256,10 @@
 				continueRenderOpened: function() {
 					this.target.classList.toggle('opened', this.opened);
 					this.target.classList.toggle('closing', !this.opened);
-					//this.animating = this.asyncMethod('completeOpening', null, this.timeout);
+					this.animating = this.asyncMethod('completeOpening', null, this.timeout);
 				},
 				completeOpening: function() {
-					//clearTimeout(this.animating);
+					clearTimeout(this.animating);
 					this.animating = null;
 					this.target.classList.remove('closing');
 					this.target.classList.toggle('revealed', this.opened);
diff --git a/polymer-selector/polymer-selector.html b/polymer-selector/polymer-selector.html
index 3442185..f0e2d85 100644
--- a/polymer-selector/polymer-selector.html
+++ b/polymer-selector/polymer-selector.html
@@ -159,23 +159,27 @@
       notap: false,
       ready: function() {
         this.activateListener = this.activateHandler.bind(this);
-        this.addListener(this);
+        this.observer = new MutationObserver(this.updateSelected.bind(this));
+        if (!this.target) {
+          this.target = this;
+        }
       },
       get items() {
-        var nodes = this.target ? (this.itemsSelector ? 
+        var nodes = this.target !== this ? (this.itemsSelector ? 
             this.target.querySelectorAll(this.itemsSelector) : 
                 this.target.children) : this.$.items.getDistributedNodes();
-        return Array.prototype.filter.call(nodes, function(n) {
+        return Array.prototype.filter.call(nodes || [], function(n) {
           return n && n.localName !== 'template';
         });
       },
       targetChanged: function(old) {
         if (old) {
           this.removeListener(old);
+          this.observer.disconnect();
         }
         if (this.target) {
-          this.removeListener(this);
           this.addListener(this.target);
+          this.observer.observe(this.target, {childList: true});
         }
       },
       addListener: function(node) {
@@ -188,6 +192,9 @@
         return this.$.selection.getSelection();
       },
       selectedChanged: function() {
+        this.updateSelected();
+      },
+      updateSelected: function() {
         this.validateSelected();
         if (this.multi) {
           this.clearSelection();
diff --git a/test/html/polymer-selector-activate-event.html b/test/html/polymer-selector-activate-event.html
index 6184095..55e3c7b 100644
--- a/test/html/polymer-selector-activate-event.html
+++ b/test/html/polymer-selector-activate-event.html
@@ -31,6 +31,7 @@
           assert.equal(s.selected, 1);
           done();
         });
+        Platform.flush();
         assert.equal(s.selected, 0);
         s.children[1].dispatchEvent(new CustomEvent('tap', {bubbles: true}));
       });
diff --git a/test/html/polymer-selector-multi.html b/test/html/polymer-selector-multi.html
index 066fb88..bd49877 100644
--- a/test/html/polymer-selector-multi.html
+++ b/test/html/polymer-selector-multi.html
@@ -39,14 +39,16 @@
             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();
+          s.selected = [0, 2];
+          Platform.flush();
+          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);
         }.bind(this), 0);
-        
       });
     </script>
   </body>