From 8dbb08403ae40b16dd16d5b923af934535d652a1 Mon Sep 17 00:00:00 2001
From: Steve Orvell <steve@orvellia.com>
Date: Thu, 1 Aug 2013 15:01:08 -0700
Subject: [PATCH 01/20] use shadows for icon-button.

---
 .../polymer-ui-icon-button.css                | 47 +++++++++++++++----
 .../polymer-ui-icon-button.html               |  2 +-
 2 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/polymer-ui-icon-button/polymer-ui-icon-button.css b/polymer-ui-icon-button/polymer-ui-icon-button.css
index 88e91b5..a0e7b2c 100644
--- a/polymer-ui-icon-button/polymer-ui-icon-button.css
+++ b/polymer-ui-icon-button/polymer-ui-icon-button.css
@@ -8,25 +8,52 @@ license that can be found in the LICENSE file.
     display: inline-block;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
-    width: 44px;
-    height: 44px;
-    padding: 10px;
+    width: 38px;
+    height: 38px;
+    background-image: none;
+    border-radius: 2px;
+    padding: 7px;
+    margin: 2px;
     vertical-align: middle;
     cursor: pointer;
-    background: url(btn_light.png) top left no-repeat;
-    background-size: cover;
+  }
+  
+  .outline {
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
   }
 
-  *:hover {
-    background-position: 0 -44px;
+  *:hover, .hover {
+    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.1);
   }
 
-  *.selected {
-    background-position: 0 -88px;
+  .selected {
+    background-color: rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12);
   }
 
   *:active, *.selected:active {
-    background-position: 0 -132px;
+    background-color: rgba(0, 0, 0, 0.05);
+    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.12);
+  }
+  
+  .polymer-ui-dark-theme.outline {
+    background-color: rgba(200, 200, 200, 0.05);
+    box-shadow: 0 0 0 1px rgba(200, 200, 200, 0.1);
+  }
+
+  .polymer-ui-dark-theme:hover, .polymer-ui-dark-theme.hover {
+    background-color: rgba(200, 200, 200, 0.05);
+    box-shadow: 0 1px 0 0 rgba(200, 200, 200, 0.12), 0 0 0 1px rgba(200, 200, 200, 0.1);
+  }
+
+  .polymer-ui-dark-theme.selected {
+    background-color: rgba(220, 220, 220, 0.05);
+    box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.05), 0 0 0 1px rgba(200, 200, 200, 0.12);
+  }
+
+  .polymer-ui-dark-theme:active, .polymer-ui-dark-theme.selected:active {
+    background-color: rgba(200, 200, 200, 0.05);
+    box-shadow: inset 0 1px 0 0 rgba(200, 200, 200, 0.1), 0 0 0 1px rgba(200, 200, 200, 0.12);
   }
 }
 
diff --git a/polymer-ui-icon-button/polymer-ui-icon-button.html b/polymer-ui-icon-button/polymer-ui-icon-button.html
index 0ebbee2..446873c 100644
--- a/polymer-ui-icon-button/polymer-ui-icon-button.html
+++ b/polymer-ui-icon-button/polymer-ui-icon-button.html
@@ -27,7 +27,7 @@
 
 <link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html">
 
-<polymer-element name="polymer-ui-icon-button" attributes="src index icon active">
+<polymer-element name="polymer-ui-icon-button" extends="polymer-ui-theme-aware" attributes="src index icon active">
   <template>
     <link rel="stylesheet" href="polymer-ui-icon-button.css">
     <polymer-ui-icon src="{{src}}" index="{{index}}" icon="{{icon}}"><content></content></polymer-ui-icon>

From 5d7cd5ef4938e0964aef6d9f24cbf6b804e02d90 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Thu, 1 Aug 2013 15:31:23 -0700
Subject: [PATCH 02/20] polymer-ui-field: style tweaks

---
 polymer-ui-field/index.html            | 16 +++++++++++---
 polymer-ui-field/polymer-ui-field.html | 29 +++++++++++++++++---------
 2 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/polymer-ui-field/index.html b/polymer-ui-field/index.html
index 4e9ff2a..1247bd6 100644
--- a/polymer-ui-field/index.html
+++ b/polymer-ui-field/index.html
@@ -5,7 +5,9 @@
     <title>Polymer UI Field</title>
     <script src="../../polymer/polymer.js" debug></script>
     <link rel="import" href="polymer-ui-field.html" />
+    <link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html" />
     <link rel="import" href="../polymer-ui-icon-button/polymer-ui-icon-button.html" />
+    <link rel="import" href="../polymer-ui-menu-button/polymer-ui-menu-button.html" />
     <style>
       html {
         font-family: 'Helvetica Neue', 'Roboto', 'Arial', sans-serif;
@@ -14,9 +16,17 @@
     </style>
   </head>
   <body>
-    <polymer-ui-field>
-      <polymer-ui-icon-button icon="add"></polymer-ui-icon-button>
-      <input value="Field input">
+		<polymer-ui-field>
+			<polymer-ui-icon icon="contact"></polymer-ui-icon>
+			<input placeholder="hi!">
+    </polymer-ui-field>
+		<polymer-ui-field>
+		<polymer-ui-icon icon="plus"></polymer-ui-icon>
+			<label>I'm a label!</label>
+			<input placeholder="I have a label">
+    </polymer-ui-field>
+		<polymer-ui-field>
+			<input placeholder="I have no icon">
     </polymer-ui-field>
   </body>
 </html>
diff --git a/polymer-ui-field/polymer-ui-field.html b/polymer-ui-field/polymer-ui-field.html
index 1af28a9..6a1f91a 100644
--- a/polymer-ui-field/polymer-ui-field.html
+++ b/polymer-ui-field/polymer-ui-field.html
@@ -1,31 +1,40 @@
+<link rel="import" href="../../polymer-elements/polymer-flex-layout/polymer-flex-layout.html">
+
 <polymer-element name="polymer-ui-field">
   <template>
     <style>
       @host {
         * {
           display: block;
-          padding: 18px;
           border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+					color: #333;
+          font-size: 14px;
         }
       }
+			::-webkit-distributed(polymer-ui-icon) {
+				margin: 18px;
+			}
+			::-webkit-distributed(polymer-ui-menu-button) {
+				margin: 8px;
+			}
       ::-webkit-distributed(input) {
-          font-size: 14px;
-          height: 40px;
+					background: transparent;
           color: #333;
           border: 0;
+					padding: 0;
+          font-size: 14px;
           flex: 1 auto;
       }
+			::-webkit-distributed(input:focus) {
+				outline: none;
+			}
       ::-webkit-distributed(input::placeholder) {
         color: #b3b3b3;
       }
-      div {
-        display: flex;
-        flex-direction: row;
-      }
     </style>
-    <div>
-      <content select="*"></content>
-    </div>
+		<polymer-flex-layout align="center"></polymer-flex-layout>
+		<content select="polymer-ui-icon,polymer-ui-icon-button,polymer-ui-menu-button"></content>
+		<content select="*"></content>
   </template>
   <script>
     Polymer('polymer-ui-field');

From c82c9454478bd9628f9511afb2291fc5fb0dc145 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Fri, 2 Aug 2013 12:23:53 -0700
Subject: [PATCH 03/20] polymer-ui-field: add @polyfill rules

---
 polymer-ui-field/polymer-ui-field.html | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/polymer-ui-field/polymer-ui-field.html b/polymer-ui-field/polymer-ui-field.html
index 6a1f91a..9e60bcf 100644
--- a/polymer-ui-field/polymer-ui-field.html
+++ b/polymer-ui-field/polymer-ui-field.html
@@ -11,12 +11,15 @@
           font-size: 14px;
         }
       }
-			::-webkit-distributed(polymer-ui-icon) {
+      /*@polyfill @host > polymer-ui-icon*/
+      ::-webkit-distributed(> polymer-ui-icon) {
 				margin: 18px;
 			}
-			::-webkit-distributed(polymer-ui-menu-button) {
+      /*@polyfill @host > polymer-ui-menu-button*/
+      ::-webkit-distributed(> polymer-ui-menu-button) {
 				margin: 8px;
 			}
+      /*@polyfill @host input*/
       ::-webkit-distributed(input) {
 					background: transparent;
           color: #333;
@@ -25,9 +28,11 @@
           font-size: 14px;
           flex: 1 auto;
       }
-			::-webkit-distributed(input:focus) {
+      /*@polyfill @host input:focus*/
+      ::-webkit-distributed(input:focus) {
 				outline: none;
 			}
+      /*@polyfill @host input::placeholder*/
       ::-webkit-distributed(input::placeholder) {
         color: #b3b3b3;
       }

From d25da9bba975468a4d36d61592f2ce4673811a81 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Fri, 2 Aug 2013 16:13:23 -0700
Subject: [PATCH 04/20] polymer-ui-overlay: add optional backdrop

---
 polymer-ui-overlay/index.html              | 72 ++++++----------------
 polymer-ui-overlay/polymer-ui-overlay.html | 26 ++++++--
 2 files changed, 41 insertions(+), 57 deletions(-)

diff --git a/polymer-ui-overlay/index.html b/polymer-ui-overlay/index.html
index 31fd119..c57b583 100644
--- a/polymer-ui-overlay/index.html
+++ b/polymer-ui-overlay/index.html
@@ -3,12 +3,9 @@
 	<head>
 		<title>polymer-overlay</title>
 		<link rel="import" href="polymer-ui-overlay.html">
-		<link rel="import" href="polymer-ui-overlay-dialog.html">
 		<script src="../../polymer/polymer.js"></script>
-		<link rel="stylesheet" href="../../dialog-polyfill/dialog-polyfill.css">
-		<script src="../../dialog-polyfill/dialog-polyfill.js"></script>
 		<style>
-			polymer-ui-overlay-dialog,
+      /*
 			polymer-ui-overlay {
 				box-sizing: border-box;
 				-moz-box-sizing: border-box;
@@ -22,6 +19,7 @@
 				outline: 1px solid rgba(0,0,0,0.2);
 				box-shadow: 0 4px 16px rgba(0,0,0,0.2);
 			}
+      */
 			.dialog {
 				box-sizing: border-box;
 				-moz-box-sizing: border-box;
@@ -55,29 +53,24 @@
 	</head>
 	<body>
 		<button overlay="#dialog">Toggle Dialog</button>
-		( open styling: 
-		<select onchange="changeOpening(event)">
-			<option>polymer-overlay-scale-slideup</option>
-			<option>polymer-overlay-shake</option>
-			<option>polymer-overlay-fade</option>
-			<option>none</option>
-		</select>,
 		<label>modal: <input type="checkbox" onchange="modalChange(event)"></label>
-		<label>scrim: <input type="checkbox" onchange="scrimChange(event)"></label>
+		<label>backdrop: <input type="checkbox" onchange="backdropChange(event)"></label>
 		)
 		<br>
-		<polymer-ui-overlay 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.
-				<polymer-ui-overlay id="confirmation" class="dialog">
-					Thank you.
-				</polymer-ui-overlay>
-			</div><br><br>
-			<button overlay-toggle>OK</button>
+		<polymer-ui-overlay id="dialog">
+      <div class="dialog">
+        <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.
+          <polymer-ui-overlay id="confirmation" class="dialog">
+            Thank you.
+          </polymer-ui-overlay>
+        </div><br><br>
+        <button overlay-toggle>OK</button>
+      </div>
 		</polymer-ui-overlay>
 
 		<br><br>
@@ -93,34 +86,7 @@ <h2>Dialog 2</h2>
 			<button overlay-toggle>OK</button>
 		</polymer-ui-overlay>
 
-		<button overlay="#dialog3">Toggle Dialog 3</button>
-		<label>modal: <input type="checkbox" onchange="modalChange(event, dialog3)"></label>
-
-		<polymer-ui-overlay-dialog id="dialog3">
-			<h3>I'm a &lt;dialog&gt;!</h3>
-			It works!<br>
-			<button overlay-toggle>OK</button>
-		</polymer-ui-overlay-dialog>
-
-		<button overlay="#dialog4">Toggle Dialog 4</button>
-
-		<dialog id="dialog4">
-			<h3>A native &lt;dialog&gt;</h3>
-		</dialog>
-
 		<script>
-			document.addEventListener('DOMContentLoaded', function() {
-				dialogPolyfill.registerDialog(dialog4);
-				dialog4.toggle = function() {
-					console.log('asdasd');
-					if (!dialog4.open) {
-						dialog4.show();
-					} else {
-						dialog4.close()
-					}
-				};
-			});
-
 			$ = document.querySelector.bind(document);
 
 			somethingCheck = function() {
@@ -142,8 +108,8 @@ <h3>A native &lt;dialog&gt;</h3>
 				d.modal = e.target.checked;
 			}
 			
-			scrimChange = function(e) {
-				dialog.scrim = e.target.checked;
+			backdropChange = function(e) {
+				dialog.backdrop = e.target.checked;
 			}
 			
 			var overlayButtons = document.querySelectorAll('button[overlay]');
diff --git a/polymer-ui-overlay/polymer-ui-overlay.html b/polymer-ui-overlay/polymer-ui-overlay.html
index 267b46e..f4ea8f2 100644
--- a/polymer-ui-overlay/polymer-ui-overlay.html
+++ b/polymer-ui-overlay/polymer-ui-overlay.html
@@ -1,17 +1,35 @@
 <link rel="import" href="../../polymer-elements/polymer-overlay/polymer-overlay.html">
 
-<polymer-element name="polymer-ui-overlay" attributes="active modal">
+<polymer-element name="polymer-ui-overlay" attributes="active modal backdrop">
 	<template>
-		<polymer-overlay id="overlay" opened="{{active}}" autoCloseDisabled="{{modal}}"></polymer-overlay>
-		<content></content>
+    <style>
+      #backdrop {
+        background: rgba(0, 0, 0, 0.25);
+        position: fixed;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        z-index: -1;
+      }
+      #container {
+        background: white;
+      }
+    </style>
+		<polymer-overlay id="overlay" opened="{{active}}" modal="{{modal}}"></polymer-overlay>
+    <div id="backdrop" hidden?="{{!backdrop}}" pseudo="x-backdrop"></div>
+    <div id="container" pseudo="x-overlay">
+      <content></content>
+    </div>
 	</template>
 	<script>
 		Polymer('polymer-ui-overlay', {
+      backdrop: false,
 			ready: function() {
 				this.$.overlay.target = this;
 			},
 			toggle: function() {
-				this.$.overlay.toggle();
+        this.active = !this.active;
 			}
 		});
 	</script>

From 9e85a5eab01a2dad995ad84f41d6d032e998bad8 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Fri, 2 Aug 2013 16:25:41 -0700
Subject: [PATCH 05/20] polymer-ui-menu-button: tweak style

---
 polymer-ui-menu-button/polymer-ui-menu-button.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/polymer-ui-menu-button/polymer-ui-menu-button.css b/polymer-ui-menu-button/polymer-ui-menu-button.css
index d3886ab..29cb79d 100644
--- a/polymer-ui-menu-button/polymer-ui-menu-button.css
+++ b/polymer-ui-menu-button/polymer-ui-menu-button.css
@@ -8,6 +8,7 @@
 }
 
 #menuOverlay {
+  position: absolute;
 	box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	background: white;
@@ -38,7 +39,7 @@
 
 #arrow {
 	position: absolute;
-	bottom: -8px;
+	bottom: -10px;
 }
 
 .arrow {

From 41e7997c9943c5364fbac374664011087e9052b1 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Fri, 2 Aug 2013 16:50:49 -0700
Subject: [PATCH 06/20] simple arrow ui

---
 polymer-ui-arrow/index.html            | 26 +++++++++
 polymer-ui-arrow/polymer-ui-arrow.css  | 20 +++++++
 polymer-ui-arrow/polymer-ui-arrow.html | 79 ++++++++++++++++++++++++++
 3 files changed, 125 insertions(+)
 create mode 100644 polymer-ui-arrow/index.html
 create mode 100644 polymer-ui-arrow/polymer-ui-arrow.css
 create mode 100644 polymer-ui-arrow/polymer-ui-arrow.html

diff --git a/polymer-ui-arrow/index.html b/polymer-ui-arrow/index.html
new file mode 100644
index 0000000..2b03da0
--- /dev/null
+++ b/polymer-ui-arrow/index.html
@@ -0,0 +1,26 @@
+
+<!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>polymer-ui-arrow</title>
+    <script src="../../polymer/polymer.js"></script>
+    <link rel="import" href="polymer-ui-arrow.html">
+    <link rel="stylesheet" href="../basic.css">
+    <style>
+      polymer-ui-arrow {
+        background: #aaa;
+      }
+    </style>
+  </head>
+  <body>
+    <polymer-ui-arrow direction="up"></polymer-ui-arrow>
+    <polymer-ui-arrow direction="down"></polymer-ui-arrow>
+    <polymer-ui-arrow direction="right"></polymer-ui-arrow>
+    <polymer-ui-arrow direction="left"></polymer-ui-arrow>
+  </body>
+</html>
diff --git a/polymer-ui-arrow/polymer-ui-arrow.css b/polymer-ui-arrow/polymer-ui-arrow.css
new file mode 100644
index 0000000..b358bd7
--- /dev/null
+++ b/polymer-ui-arrow/polymer-ui-arrow.css
@@ -0,0 +1,20 @@
+@host {
+	* {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  [hidden] {
+    display: none;
+  }
+}
+      
+.arrow {
+  border-color: transparent;
+  border-style: solid;
+}
+
+.arrow-inner {
+	position: absolute;
+}
diff --git a/polymer-ui-arrow/polymer-ui-arrow.html b/polymer-ui-arrow/polymer-ui-arrow.html
new file mode 100644
index 0000000..aa7e8bb
--- /dev/null
+++ b/polymer-ui-arrow/polymer-ui-arrow.html
@@ -0,0 +1,79 @@
+<!--
+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 Polymer UI Elements
+ */
+/**
+ * @class polymer-ui-arrow
+ */
+-->
+<polymer-element name="polymer-ui-arrow" attributes="direction size color borderColor borderWidth">
+  <template>
+    <link rel="stylesheet" href="polymer-ui-arrow.css">
+    <div id="outer" class="arrow arrow-outer" style="border-width: {{size}}px;"></div>
+    <div id="inner" class="arrow arrow-inner" style="border-width: {{size}}px;"></div>
+  </template>
+  <script>
+    Polymer('polymer-ui-arrow', {
+      borders: {
+        up: 'Bottom',
+        down: 'Top',
+        left: 'Right',
+        right: 'Left'
+      },
+      tops: {
+        up: 1,
+        down: -1,
+        left: 0,
+        right: 0
+      },
+      lefts: {
+        up: 0,
+        down: 0,
+        left: 1,
+        right: -1
+      },
+      direction: 'up',
+      size: 10,
+      color: '#fff',
+      borderColor: '#ccc',
+      borderWidth: 1,
+      ready: function() {
+        this.asyncUpdate();
+      },
+      directionChanged: function() {
+        this.asyncUpdate();
+      },
+      sizeChanged: function() {
+        this.asyncUpdate();
+      },
+      colorChanged: function() {
+        this.asyncUpdate();
+      },
+      borderColorChanged: function() {
+        this.asyncUpdate();
+      },
+      borderWidthChanged: function() {
+        this.asyncUpdate();
+      },
+      asyncUpdate: function() {
+        this.updateJob = this.job(this.updateJob, this.update, 1);
+      },
+      update: function() {
+        var os = this.$.outer.style;
+        var is = this.$.inner.style;
+        os.borderColor = 'transparent';
+        is.borderColor = 'transparent';
+        var bc = 'border' + this.borders[this.direction] + 'Color';
+        os[bc] = this.borderColor;
+        is[bc] = this.color;
+        is.top = this.tops[this.direction] * this.borderWidth + 'px';
+        is.left = this.lefts[this.direction] * this.borderWidth + 'px';
+      }
+    });
+  </script>
+</polymer-element>

From f91bfc820c2babd01d1113a07d7a4354025cb750 Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Fri, 2 Aug 2013 21:25:02 -0700
Subject: [PATCH 07/20] fix gruntfile for docs

---
 gruntfile.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/gruntfile.js b/gruntfile.js
index 16c32c2..75570eb 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,13 +13,13 @@ module.exports = function(grunt) {
         version: '<%= pkg.version %>',
         url: '<%= pkg.homepage %>',
         options: {
-          exclude: 'third_party',
+          exclude: 'docs',
           extension: '.js,.html',
           paths: '.',
           outdir: 'docs',
           linkNatives: 'true',
           tabtospace: 2,
-          themedir: 'tools/doc/themes/footstrap'
+          themedir: 'tools/doc/themes/polymerase'
         }
       }
     },

From 685ef588c469c6a24753c38167cb4af96f5bb4bb Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Sun, 4 Aug 2013 17:51:25 -0700
Subject: [PATCH 08/20] add 'item' as generic published property on
 ui-menu-item

---
 .gitignore                                     | 1 +
 polymer-ui-menu-item/polymer-ui-menu-item.html | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 268eba2..c342af4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 /docs
 
 /node_modules
+build.bat
diff --git a/polymer-ui-menu-item/polymer-ui-menu-item.html b/polymer-ui-menu-item/polymer-ui-menu-item.html
index 0d2190d..26f284a 100644
--- a/polymer-ui-menu-item/polymer-ui-menu-item.html
+++ b/polymer-ui-menu-item/polymer-ui-menu-item.html
@@ -14,7 +14,7 @@
 <link rel="import" href="../polymer-ui-icon/polymer-ui-icon.html">
 <link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html">
 
-<polymer-element name="polymer-ui-menu-item" extends="polymer-ui-theme-aware" attributes="src label icon">
+<polymer-element name="polymer-ui-menu-item" extends="polymer-ui-theme-aware" attributes="src label icon item">
   <template>
     <link rel="stylesheet" href="polymer-ui-menu-item.css">
     <polymer-ui-icon src="{{src}}" icon="{{icon}}" showing?="{{icon || src}}"></polymer-ui-icon>

From 91cd18c047d0f5193ce9c805e7f610210b3c4785 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Mon, 5 Aug 2013 15:16:11 -0700
Subject: [PATCH 09/20] make polymer-ui-nav-arrow extends from
 polymer-ui-arrow; update polymer-ui-arrow examples

---
 polymer-ui-arrow/index.html                   | 19 ++++++++-----------
 polymer-ui-arrow/polymer-ui-arrow.css         |  2 +-
 polymer-ui-menu/polymer-ui-menu.html          |  1 +
 polymer-ui-nav-arrow/polymer-ui-nav-arrow.css | 10 ----------
 .../polymer-ui-nav-arrow.html                 | 13 +++++++++++--
 5 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/polymer-ui-arrow/index.html b/polymer-ui-arrow/index.html
index 2b03da0..a667a3b 100644
--- a/polymer-ui-arrow/index.html
+++ b/polymer-ui-arrow/index.html
@@ -7,20 +7,17 @@
 -->
 <html>
   <head>
-    <title>polymer-ui-arrow</title>
+    <title>Arrows</title>
     <script src="../../polymer/polymer.js"></script>
     <link rel="import" href="polymer-ui-arrow.html">
-    <link rel="stylesheet" href="../basic.css">
-    <style>
-      polymer-ui-arrow {
-        background: #aaa;
-      }
-    </style>
   </head>
-  <body>
+  <body style="background: whitesmoke;">
     <polymer-ui-arrow direction="up"></polymer-ui-arrow>
-    <polymer-ui-arrow direction="down"></polymer-ui-arrow>
-    <polymer-ui-arrow direction="right"></polymer-ui-arrow>
-    <polymer-ui-arrow direction="left"></polymer-ui-arrow>
+    <br><br>
+    <polymer-ui-arrow direction="down" size="20" color="whitesmoke" borderWidth="8"></polymer-ui-arrow>
+    <br><br>
+    <polymer-ui-arrow direction="right" size="30" color="blue" borderColor="lightblue" borderWidth="6"></polymer-ui-arrow>
+    <br><br>
+    <polymer-ui-arrow direction="left" color="#aaa" borderColor="#aaa"></polymer-ui-arrow>
   </body>
 </html>
diff --git a/polymer-ui-arrow/polymer-ui-arrow.css b/polymer-ui-arrow/polymer-ui-arrow.css
index b358bd7..048d936 100644
--- a/polymer-ui-arrow/polymer-ui-arrow.css
+++ b/polymer-ui-arrow/polymer-ui-arrow.css
@@ -5,7 +5,7 @@
     overflow: hidden;
   }
   
-  [hidden] {
+  [hidden], .hidden {
     display: none;
   }
 }
diff --git a/polymer-ui-menu/polymer-ui-menu.html b/polymer-ui-menu/polymer-ui-menu.html
index 11771ad..ada5c8b 100644
--- a/polymer-ui-menu/polymer-ui-menu.html
+++ b/polymer-ui-menu/polymer-ui-menu.html
@@ -65,6 +65,7 @@
   </template>
   <script>
     Polymer('polymer-ui-menu', {
+      selected: -1,
       selectedItem: null,
       inserted: function() {
         if (!this.theme) {
diff --git a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.css b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.css
index 8d62d9a..deaf23b 100644
--- a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.css
+++ b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.css
@@ -6,21 +6,11 @@ license that can be found in the LICENSE file.
 
 @host {
   * {
-    display: none;
     position: absolute;
     top: 0;
     right: 0;
-    width: 0; 
-    height: 0; 
     margin-top: -8px;
-    border-top: 9px solid transparent;
-    border-bottom: 9px solid transparent; 
-    border-right: 9px solid white;
     -webkit-transition: -webkit-transform 0.5s;
     transition: transform 0.33s;
   }
-  
-  .show {
-    display: inline;
-  }
 }
\ No newline at end of file
diff --git a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html
index 49f0795..45cd168 100644
--- a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html
+++ b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html
@@ -11,15 +11,24 @@
  * @class polymer-ui-nav-arrow
  */
 -->
-<polymer-element name="polymer-ui-nav-arrow" attributes="target top item">
+<link rel="import" href="../polymer-ui-arrow/polymer-ui-arrow.html">
+
+<polymer-element name="polymer-ui-nav-arrow" extends="polymer-ui-arrow" attributes="target top item">
   <template>
     <link rel="stylesheet" href="polymer-ui-nav-arrow.css">
+    <shadow></shadow>
   </template>
   <script>
     Polymer('polymer-ui-nav-arrow', {
+      direction: 'left',
+      size: 9,
+      borderColor: 'white',
       show: false,
+      inserted: function() {
+        this.showChanged();
+      },
       showChanged: function() {
-        this.classList.toggle('show', this.show);
+        this.classList.toggle('hidden', !this.show);
       },
       targetChanged: function() {
         this.show = !!this.target;

From 13158d249f10e0347a76fe1dcaee06d268beaead Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Mon, 5 Aug 2013 16:11:44 -0700
Subject: [PATCH 10/20] add dark-theme to ratings

---
 .../ic_star_rate_darkalt.png}                 | Bin 3415 -> 3078 bytes
 .../ic_star_rate_darkreg.png}                 | Bin 3463 -> 3096 bytes
 .../assets/ic_star_rate_lightalt.png          | Bin 0 -> 3049 bytes
 .../assets/ic_star_rate_lightreg.png          | Bin 0 -> 3076 bytes
 polymer-ui-ratings/index.html                 |  10 ++++++----
 polymer-ui-ratings/polymer-ui-ratings.css     |  12 ++++++++++--
 polymer-ui-ratings/polymer-ui-ratings.html    |  14 +++++++++-----
 7 files changed, 25 insertions(+), 11 deletions(-)
 rename polymer-ui-ratings/{star_blank.png => assets/ic_star_rate_darkalt.png} (78%)
 rename polymer-ui-ratings/{star_full.png => assets/ic_star_rate_darkreg.png} (77%)
 create mode 100644 polymer-ui-ratings/assets/ic_star_rate_lightalt.png
 create mode 100644 polymer-ui-ratings/assets/ic_star_rate_lightreg.png

diff --git a/polymer-ui-ratings/star_blank.png b/polymer-ui-ratings/assets/ic_star_rate_darkalt.png
similarity index 78%
rename from polymer-ui-ratings/star_blank.png
rename to polymer-ui-ratings/assets/ic_star_rate_darkalt.png
index f034646d7d93b754ccd2094c2d9ab52371279096..7077a9cf4a4fad482043b6e7509cfedf420e7ce0 100644
GIT binary patch
delta 372
zcmV-)0gL|E8ip7liBL{Q4GJ0x0000DNk~Le0000O0000O2nGNE0N{5$_^~0L3V#7H
zNkl<Zc-rihv2MaJ6h)7rqSQl0g)#+s2vR}nny<(w<|Fb4`HYTibV=1A12ideZx<t>
zN)1rR#+9CQW&6Er`##G?5`AJo&$tO(SHKuEGRBO~$+<gc@oYAm1X}eXu-R-LdlLv(
zGu(4YUsv@Yj^ha+K!KmOvA<rjF@GioqJtq1w1MC6PZRJi>Ful&NZJ-fQCn-9P`Evq
zZh_WX+Z07nOWM*=s4K=*Rk<`x7r+vD4zWzrbWv56lQizCam<4zilVjmUVsVLG6anG
zUQraSf#zQx9C$GVUI0Iz&%XgytJNR~y-M;Ib&<993Gi8#?aH#O%d)JqEJ@n|KFoFF
zhzB_5l0457NmEIK5Ys%*6X#rVEZ>~);Y@)~;CH83-~sr!$b;K|a1%I+p8){Z@YE7y
S<Yl1%0000<MNUMnLSTZHHlaTN

delta 712
zcmV;(0yq7J7}pvhiBL{Q4GJ0x0000DNk~Le0000m0000m2nGNE09OL}hp{1^3V#BE
zNkl<Zc-rik&x#sB5XQeA#Xp-|dfX8bCW{$QP7t^C>|^)@`Ubv=S1%rY46ourm%ze0
zCNPq~Dtj5TS$EaSA#ISLYmAOM&>s}kp{ARk{Z-eDjEE3qX$ZI!fC5ke3P1rU00po~
zj4_=tru(@^*w4jn+rE_PLm&ZM*ME)qZK1HA_5rY1=0x-ms2;Fw+W;^JFqe6-n%H&S
zIDi>|naqP@p%wcO0C=9a@XJQNoIoa%NlN=L86<?b42*@w<8k~ifS2KL_|})x-u0W9
zG4>I_yDeppGFEjV<28LJqA$Ll01?evt=5yS>k|MI0OK|BxB+Ti?L^o0Nq?)=dLp9P
zF)ZX3i^aQszps@_B@I9vK<Gc#2?2<gN+qq|?`y?k@eY7{tRC<<=Qqt})2r2LA<lUO
zKy-)aqnz_dtyT*)n@x{%egnWeN)N12vfJ&xFPF>cbUFm!=a%|-p-^D;dL6l3?i+yn
zqc-sdT>wa>)9J`yFnE?X(0^LnSe6xW9OoIp*A2aL5&$s9q5wVt__3w*4S>%?G(D?1
zV47xf`SP|!3t4+!gKRpTCIGyw46mrXq2e<CGt^}5`2aA+qNCABTk(F(vMjCF>uJ4S
zPqQpb1F-xyn2$yyO<L|e09Nc11`w-MDy-dZ&$HR=Z8n>|ZMWO=N`IxoBt-b2HX@?E
z!!Qg1Kyc1QqtVC{QHqE{D>We^N;MjdJm*{h5QbrhL+ri(0>6LNf)FC_IL<W@C0?md
zIF55IgvbLZ0EnF&z%<RPYPFgtBAbXJ|L{zNi0o>$nm0}JYTx}2GKu9av+H}z2LRJ^
unZ)X!IR&5q6o3Ly038ZI0VseI=+^)%PD$Nkm02<X0000<MNUMnLSTZ=97HDo

diff --git a/polymer-ui-ratings/star_full.png b/polymer-ui-ratings/assets/ic_star_rate_darkreg.png
similarity index 77%
rename from polymer-ui-ratings/star_full.png
rename to polymer-ui-ratings/assets/ic_star_rate_darkreg.png
index 911b822a85ecee93b1ab97aea2b8cd7362130d1e..22cd1d66407d03b400fbe9e70f32f87f798948d7 100644
GIT binary patch
delta 390
zcmV;10eSw18<-d&iBL{Q4GJ0x0000DNk~Le0000O0000O2nGNE0N{5$_^~0L3V#7Z
zNkl<Zc-rh$v1-FG6uj5gO&m&1AO#PZMP^Z&UnrzQKA@ZD?EavTFQ}k&$R`9c1v+=I
zX&}%f5DLn5k&BnQb{lU#I5_m4^mNh_5|XGBXQ&xXfzuWck)DY3s?52llHBQZw39Ej
zIIz|Zt+m5i9Jr(DWt!yrqz-)FzkdZF0L1BX8~f=ci^wB@``pkcfSuD<04{T}XOh!O
z4oJ@9IG%c*w+65Uu+JPgz4bhA9mnyM<h-(jY^RIGLXAeFha^ct09mqxVVD?Wp0w7l
zIcJscV5hZSl03NFZ<0J{t(QfMm+B%BX#*Glu-$I=9RN0)%}tu70}*MH+*|*vi(0ML
z9e|@!YGsU>8DnNjsTF{uixq=pA%h^8L{T&**(Z7K*pH%U90bASxA{`y!|4O~aLnV{
k@$FCVp!pA)0;Taa0NF#RWQFtQ5dZ)H07*qoM6N<$f;UyL`v3p{

delta 760
zcmV<U0tfw=7>64niBL{Q4GJ0x0000DNk~Le0000m0000m2nGNE09OL}hp{1^3V#B!
zNkl<Zc-riku}fP~6vn@!kvv0(n+U$(P$<|GOqW_sqs1Y+1qbb9oa&TS{3`-N7MD6`
z0>Mf_=q6-ws5EW2rb7u9I|vy{E+Hh*m*#ZnO-YN!gyd-++ye*RyPW$DzjwcT?s<=x
z8BVq#INUUV2G9T+Km%w14RD<i(SIxv&Dxp6W#_}k#>T?x@}naGN~O|6$4ZEZLY8GU
zEX!&TQOI!sN<IvLTcqS1fKsXSs0pC1odclc^Y`AeEZ8L@TL64M-@JPJL(19j_djt=
z6{=RN4*)a(kQ!=8DW_~%?QXw`iRcx87dM0z0Mz~)GXR)3%zMYouWgkOGk+f^5{Z4o
zFwOv+1Nd=;U#Pd=>KE6<o*Ra7mPjP_nfciE6;S5Q=kqg5OG|UPTy6ruFQxgeaswC+
z27~8^hleMVlarqS6mJWlxqpIdYisid2M1HNTFs?&-_gn&hEZQxS^2uRxAz`E4nX}@
z_P`Z(Kb1;7-PqW8RwxvNT7QjpHf)-vjK||2R##U)D;eG1Cceh*0eI~7dS6N@jdp=T
zh+45&d;{PMfbyV}(J~R80uWbJpMOkBDTwHlnall1+_!^F2(i$ij_WFRuukI3%gg7g
z5;e=F3&4nSSIao7*ueoHqVY<l;%fmI5kgec>GV-LojwvmR22vT;D1V`;v=H*foUa#
z5DQYudb9Tlg+kwx$>d2O5Xb_+^z`)4Xf!&P&1Rb|MpH&_drr>GJ-f%_*#fZRcDuJ@
zvDi8@2btN`660d#U@R6}ce~x&0Cqec&sINj_x^xC{mrgvn(<5~v&hU7ZQ>^~narYT
znsETT0L(iF5JD_RB2AG^W)3s+Xa{pfnK>MZL^g#G%f06B%So&{&2L@K3#c<=AWmZa
qXHElX01co4G=K)s02<&9?DqiSbXr68vCYW<0000<MNUMnLSTZTZdgzN

diff --git a/polymer-ui-ratings/assets/ic_star_rate_lightalt.png b/polymer-ui-ratings/assets/ic_star_rate_lightalt.png
new file mode 100644
index 0000000000000000000000000000000000000000..baf62b69d1f85d0742d1c16817989e66b8787893
GIT binary patch
literal 3049
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

literal 0
HcmV?d00001

diff --git a/polymer-ui-ratings/assets/ic_star_rate_lightreg.png b/polymer-ui-ratings/assets/ic_star_rate_lightreg.png
new file mode 100644
index 0000000000000000000000000000000000000000..e5953bb20826470508e6aee0b812872629330ebe
GIT binary patch
literal 3076
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
SN`e6Z0000<MNUMnLSTYNE45<)

literal 0
HcmV?d00001

diff --git a/polymer-ui-ratings/index.html b/polymer-ui-ratings/index.html
index a7b74b9..db49c1c 100644
--- a/polymer-ui-ratings/index.html
+++ b/polymer-ui-ratings/index.html
@@ -7,17 +7,19 @@
 -->
 <html>
   <head>
-    <title>polymer-ui-ratings</title>
+    <title>Ratings</title>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <!-- load toolkit -->
     <script src="../../polymer/polymer.js"></script>
-    <!-- import elements-->
     <link rel="import" href="polymer-ui-ratings.html">
+    <link rel="stylesheet" href="../basic.css">
   </head>
   <body>
     <polymer-ui-ratings value="3"></polymer-ui-ratings>
     <br><br>
     <polymer-ui-ratings value="5" count="10"></polymer-ui-ratings>
+    <br><br>
+    <div theme="polymer-ui-dark-theme" class="polymer-ui-dark-bg">
+      <polymer-ui-ratings value="3"></polymer-ui-ratings>
+    </div>
   </body>
 </html>
diff --git a/polymer-ui-ratings/polymer-ui-ratings.css b/polymer-ui-ratings/polymer-ui-ratings.css
index bba8420..3725990 100644
--- a/polymer-ui-ratings/polymer-ui-ratings.css
+++ b/polymer-ui-ratings/polymer-ui-ratings.css
@@ -20,10 +20,18 @@ license that can be found in the LICENSE file.
   height: 24px;
   margin: 0 5px;
   background-size: 100% 100%;
-  background-image: url('star_blank.png');
+  background-image: url('assets/ic_star_rate_darkalt.png');
   cursor: pointer;
 }
 
 #star.full {
-  background-image: url('star_full.png');
+  background-image: url('assets/ic_star_rate_darkreg.png');
+}
+
+#star.polymer-ui-dark-theme {
+  background-image: url('assets/ic_star_rate_lightalt.png');
+}
+
+#star.full.polymer-ui-dark-theme {
+  background-image: url('assets/ic_star_rate_lightreg.png');
 }
diff --git a/polymer-ui-ratings/polymer-ui-ratings.html b/polymer-ui-ratings/polymer-ui-ratings.html
index 39e4ecb..c6d7fba 100644
--- a/polymer-ui-ratings/polymer-ui-ratings.html
+++ b/polymer-ui-ratings/polymer-ui-ratings.html
@@ -18,18 +18,21 @@
  *
  *     <polymer-ui-ratings value="3"></polymer-ui-ratings>
  *
- * By default g-ratings shows 5 stars but can be configured using "count" attribute:
+ * By default polymer-ui-ratings shows 5 stars but can be configured using 
+ * "count" attribute:
  *
  *     <polymer-ui-ratings value="3" count="10"></polymer-ui-ratings>
  *
  * @class polymer-ui-ratings
  */
 -->
-<polymer-element name="polymer-ui-ratings" attributes="count value">
+<link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html">
+
+<polymer-element name="polymer-ui-ratings" extends="polymer-ui-theme-aware" attributes="count value color">
   <template>
     <link rel="stylesheet" href="polymer-ui-ratings.css">
-    <template repeat="{{stars}}">
-      <span id="star" index="{{index}}" class="{{starClass}}" on-tap="updateValue"></span>
+    <template repeat="{{star in stars}}">
+      <span id="star" index="{{star.index}}" class="{{star.starClass}} {{color}} {{theme}}" on-tap="updateValue"></span>
     </template>
   </template>
   <script>
@@ -50,6 +53,7 @@
        * @default 0
        */
       value: 0,
+      color: '',
       ready: function() {
         this.countChanged();
       },
@@ -66,7 +70,7 @@
         }.bind(this));
       },
       updateValue: function(event, detail, sender) {
-        var s = sender.templateInstance.model;
+        var s = sender.templateInstance.model.star;
         this.value = s.index + (s.starClass ? 0 : 1);
       }
     });

From c2eb60f8f67f95bc2ed5e9ca162d58d83c822699 Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Mon, 5 Aug 2013 18:13:49 -0700
Subject: [PATCH 11/20] make polymer-ui-nav-arrow slightly more robust when
 timings are off

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

diff --git a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html
index 45cd168..a217463 100644
--- a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html
+++ b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html
@@ -50,9 +50,12 @@
           var subitems = p.items;
           var i = Array.prototype.indexOf.call(subitems, this.item);
           if (i >= 0) {
-            var item = subitems[i].$.item || subitems[i];
-            var h = item.offsetHeight;
-            this.top = i * h + h/2 + subitems[0].offsetTop;
+            var item = subitems[i];
+            if (item) {
+              item = (item.$ && item.$.item) || item;
+              var h = item.offsetHeight;
+              this.top = i * h + h/2 + subitems[0].offsetTop;
+            }
           }
         }
       },

From 9bc2ab4e1b286d7c6aff9877e716b11f85564cc6 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Mon, 5 Aug 2013 21:42:08 -0700
Subject: [PATCH 12/20] polymer-ui-overlay: backdrop click toggles the overlay

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

diff --git a/polymer-ui-overlay/polymer-ui-overlay.html b/polymer-ui-overlay/polymer-ui-overlay.html
index f4ea8f2..88ed8cd 100644
--- a/polymer-ui-overlay/polymer-ui-overlay.html
+++ b/polymer-ui-overlay/polymer-ui-overlay.html
@@ -17,7 +17,7 @@
       }
     </style>
 		<polymer-overlay id="overlay" opened="{{active}}" modal="{{modal}}"></polymer-overlay>
-    <div id="backdrop" hidden?="{{!backdrop}}" pseudo="x-backdrop"></div>
+    <div id="backdrop" hidden?="{{!backdrop}}" pseudo="x-backdrop" on-click="toggle"></div>
     <div id="container" pseudo="x-overlay">
       <content></content>
     </div>

From 09eeafaa84f06f7c0ba0976f2c89b61be789190f Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 6 Aug 2013 10:00:13 -0700
Subject: [PATCH 13/20] remove the logic that calc item's pos, instead check if
 target has getOffsetMiddle and use that instead

---
 .../polymer-ui-nav-arrow.html                 | 29 +++----------------
 1 file changed, 4 insertions(+), 25 deletions(-)

diff --git a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html
index a217463..0e4248d 100644
--- a/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html
+++ b/polymer-ui-nav-arrow/polymer-ui-nav-arrow.html
@@ -13,7 +13,7 @@
 -->
 <link rel="import" href="../polymer-ui-arrow/polymer-ui-arrow.html">
 
-<polymer-element name="polymer-ui-nav-arrow" extends="polymer-ui-arrow" attributes="target top item">
+<polymer-element name="polymer-ui-nav-arrow" extends="polymer-ui-arrow" attributes="target">
   <template>
     <link rel="stylesheet" href="polymer-ui-nav-arrow.css">
     <shadow></shadow>
@@ -36,29 +36,6 @@
           this.asyncMethod('move');
         }
       },
-      topChanged: function() {
-        this.show = true;
-        this.translateY(this.top);
-      },
-      itemChanged: function() {
-        if (!this.item) {
-          this.show = false;
-          return;
-        }
-        var p = this.item.parentNode;
-        if (p) {
-          var subitems = p.items;
-          var i = Array.prototype.indexOf.call(subitems, this.item);
-          if (i >= 0) {
-            var item = subitems[i];
-            if (item) {
-              item = (item.$ && item.$.item) || item;
-              var h = item.offsetHeight;
-              this.top = i * h + h/2 + subitems[0].offsetTop;
-            }
-          }
-        }
-      },
       translateY: function(y) {
         var s = this.style;
         s.webkitTransform = s.mozTransform = s.msTransform = s.transform = 
@@ -66,7 +43,9 @@
       },
       move: function() {
         var t = this.target;
-        var y = t.offsetTop + t.offsetHeight/2;
+        // if the target has getOffsetMiddle(), use that instead
+        var y = t.getOffsetMiddle ? t.getOffsetMiddle() : 
+            (t.offsetTop + t.offsetHeight/2);
         this.translateY(y);
       }
     });

From 7856dd44e52ddf5d0ac486da6e25ee4af374b7db Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 6 Aug 2013 10:01:20 -0700
Subject: [PATCH 14/20] getOffsetMiddle which can be consumed by
 polymer-ui-nav-arrow

---
 polymer-ui-menu-item/polymer-ui-menu-item.html | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/polymer-ui-menu-item/polymer-ui-menu-item.html b/polymer-ui-menu-item/polymer-ui-menu-item.html
index 26f284a..7d56676 100644
--- a/polymer-ui-menu-item/polymer-ui-menu-item.html
+++ b/polymer-ui-menu-item/polymer-ui-menu-item.html
@@ -21,6 +21,21 @@
     <span id="label">{{label}}<content></content></span>
   </template>
   <script>
-    Polymer('polymer-ui-menu-item');
+    Polymer('polymer-ui-menu-item', {
+      getItemHeight: function() {
+        return this.offsetHeight;
+      },
+      // calc item's offset middle pos instead of using offsetTop/Height 
+      // directly which requires to wait for submenu's collapsing transition to 
+      // complete first before it can return the correct pos.
+      getOffsetMiddle: function() {
+        var p = this.parentNode;
+        if (p) {
+          var i = Array.prototype.indexOf.call(p.items, this);
+          var h = this.getItemHeight();
+          return i * h + h/2 + p.items[0].offsetTop;
+        }
+      }
+    });
   </script>
 </polymer-element>

From 0570bc484bf455d10ac0fb1bf51dba1156ff60b8 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 6 Aug 2013 10:02:00 -0700
Subject: [PATCH 15/20] polymer-ui-submenu-item extends polymer-ui-menu-item

---
 polymer-ui-submenu-item/polymer-ui-submenu-item.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/polymer-ui-submenu-item/polymer-ui-submenu-item.html b/polymer-ui-submenu-item/polymer-ui-submenu-item.html
index 42e9e83..ee319fe 100644
--- a/polymer-ui-submenu-item/polymer-ui-submenu-item.html
+++ b/polymer-ui-submenu-item/polymer-ui-submenu-item.html
@@ -32,7 +32,7 @@
 <link rel="import" href="../polymer-ui-menu/polymer-ui-menu.html">
 <link rel="import" href="../../polymer-elements/polymer-collapse/polymer-collapse.html">
 
-<polymer-element name="polymer-ui-submenu-item" extends="polymer-ui-theme-aware" attributes="src label icon active selected selectedItem item">
+<polymer-element name="polymer-ui-submenu-item" extends="polymer-ui-menu-item" attributes="active selected selectedItem">
   <template>
     <link rel="stylesheet" href="polymer-ui-submenu-item.css">
     <polymer-ui-menu-item id="item" src="{{src}}" label="{{label}}" icon="{{icon}}" active?="{{active}}" on-tap="activate">
@@ -47,7 +47,6 @@
     Polymer('polymer-ui-submenu-item', {
       active: false,
       collapsed: true,
-      item: null,
       get items() {
         return this.$.menu.items;
       },
@@ -73,6 +72,9 @@
           this.unselectAllItems();
           this.fire("polymer-select", {isSelected: true, item: this});
         }
+      },
+      getItemHeight: function() {
+        return this.$ && this.$.item && this.$.item.offsetHeight;
       }
     });
   </script>

From 084f9ecebd4ef3bea515858d0c245be1c7e2a540 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Tue, 6 Aug 2013 10:02:23 -0700
Subject: [PATCH 16/20] bind target instead of item

---
 polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html b/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html
index 58c417f..6fd646a 100644
--- a/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html
+++ b/polymer-ui-sidebar-menu/polymer-ui-sidebar-menu.html
@@ -37,7 +37,7 @@
     </polymer-ui-sidebar-header>
     <div class="sidebar-menu" flex>
       <shadow></shadow>
-      <polymer-ui-nav-arrow item="{{selectedItem}}"></polymer-ui-nav-arrow>
+      <polymer-ui-nav-arrow target="{{selectedItem}}"></polymer-ui-nav-arrow>
     </div>
   </template>
   <script>
@@ -56,7 +56,7 @@
       <content select="[logo]"></content>
       <div class="sidebar-menu" flex>
         <shadow></shadow>
-        <polymer-ui-nav-arrow item="{{selectedItem}}"></polymer-ui-nav-arrow>
+        <polymer-ui-nav-arrow target="{{selectedItem}}"></polymer-ui-nav-arrow>
       </div>
     </polymer-ui-sidebar>
   </template>

From 70ffcf8364543b31469a5210360034946ecc88cb Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Wed, 7 Aug 2013 12:23:01 -0700
Subject: [PATCH 17/20] polymer-ui-dialog: add demos using native <dialog>

---
 polymer-ui-overlay/index.html                 |  7 +++--
 .../polymer-ui-overlay-dialog.html            | 28 ++++---------------
 2 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/polymer-ui-overlay/index.html b/polymer-ui-overlay/index.html
index c57b583..8b5a3cf 100644
--- a/polymer-ui-overlay/index.html
+++ b/polymer-ui-overlay/index.html
@@ -3,6 +3,7 @@
 	<head>
 		<title>polymer-overlay</title>
 		<link rel="import" href="polymer-ui-overlay.html">
+		<link rel="import" href="polymer-ui-overlay-dialog.html">
 		<script src="../../polymer/polymer.js"></script>
 		<style>
       /*
@@ -34,7 +35,7 @@
 				box-shadow: 0 4px 16px rgba(0,0,0,0.2);
 			}
 
-			#dialog, #dialog2 {
+			#dialog {
 				top: 72px;
 				left: 50%;
 				width: 512px;
@@ -77,14 +78,14 @@ <h2>Dialog</h2>
 
 		<button overlay="#dialog2">Toggle Dialog 2</button>
 
-		<polymer-ui-overlay id="dialog2" class="dialog polymer-overlay-shake" modal="true">
+		<polymer-ui-overlay-dialog id="dialog2">
 			<div>
 				<h2>Dialog 2</h2>
 					I'm dizzy.
 			</div>
 			<br><br>
 			<button overlay-toggle>OK</button>
-		</polymer-ui-overlay>
+		</polymer-ui-overlay-dialog>
 
 		<script>
 			$ = document.querySelector.bind(document);
diff --git a/polymer-ui-overlay/polymer-ui-overlay-dialog.html b/polymer-ui-overlay/polymer-ui-overlay-dialog.html
index ac091b8..f370dde 100644
--- a/polymer-ui-overlay/polymer-ui-overlay-dialog.html
+++ b/polymer-ui-overlay/polymer-ui-overlay-dialog.html
@@ -1,38 +1,22 @@
-<script src="../../dialog-polyfill/dialog-polyfill.js"></script>
-
 <polymer-element name="polymer-ui-overlay-dialog" attributes="active modal" on-click="clickHandler">
 	<template>
-		<link rel="stylesheet" polymer-scope="global" href="../../dialog-polyfill/dialog-polyfill.css">
-		<style>
-			@host {
-				:scope {
-					position: absolute;
-					left: 0;
-					right: 0;
-					width: 200px;
-					margin: auto;
-					display: none;
-				}
-			}
-		</style>
-		<content></content>
+		<dialog id="dialog">
+			<content></content>
+		</dialog>
 	</template>
 	<script>
 		Polymer('polymer-ui-overlay-dialog', {
 			active: false,
 			modal: false,
-			ready: function() {
-				dialogPolyfill.registerDialog(this);
-			},
 			activeChanged: function() {
 				if (this.active) {
 					if (this.modal) {
-						this.showModal();
+						this.$.dialog.showModal();
 					} else {
-						this.show();
+						this.$.dialog.show();
 					}
 				} else {
-					this.close();
+					this.$.dialog.close();
 				}
 			},
 			clickHandler: function(e) {

From 205ded37cda60204bb28c97c6e7b7209c69d8297 Mon Sep 17 00:00:00 2001
From: frankiefu <frankiefu@yahoo.com>
Date: Wed, 7 Aug 2013 13:05:58 -0700
Subject: [PATCH 18/20] polymer-ui-menu-item: reorg functions

---
 polymer-ui-menu-item/polymer-ui-menu-item.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/polymer-ui-menu-item/polymer-ui-menu-item.html b/polymer-ui-menu-item/polymer-ui-menu-item.html
index 7d56676..8f10fb6 100644
--- a/polymer-ui-menu-item/polymer-ui-menu-item.html
+++ b/polymer-ui-menu-item/polymer-ui-menu-item.html
@@ -22,9 +22,6 @@
   </template>
   <script>
     Polymer('polymer-ui-menu-item', {
-      getItemHeight: function() {
-        return this.offsetHeight;
-      },
       // calc item's offset middle pos instead of using offsetTop/Height 
       // directly which requires to wait for submenu's collapsing transition to 
       // complete first before it can return the correct pos.
@@ -35,6 +32,9 @@
           var h = this.getItemHeight();
           return i * h + h/2 + p.items[0].offsetTop;
         }
+      },
+      getItemHeight: function() {
+        return this.offsetHeight;
       }
     });
   </script>

From ebea89157af86610d27746be2de40e9f20e914ef Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Thu, 8 Aug 2013 10:13:43 -0700
Subject: [PATCH 19/20] polymer-ui-menu-button: fix z-order?

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

diff --git a/polymer-ui-menu-button/polymer-ui-menu-button.html b/polymer-ui-menu-button/polymer-ui-menu-button.html
index 850cf0d..85035d3 100644
--- a/polymer-ui-menu-button/polymer-ui-menu-button.html
+++ b/polymer-ui-menu-button/polymer-ui-menu-button.html
@@ -29,8 +29,8 @@
 			</polymer-ui-menu>
 		</div>
 		<polymer-media-query query="{{mediaQuery}}" on-polymer-mediachange="mediaChangeAction"></polymer-media-query>
-		<polymer-overlay target="{{$.menuOverlay}}" opened="{{opened}}" modal></polymer-overlay>
 		<polymer-overlay target="{{$.arrow}}" opened="{{opened}}" modal></polymer-overlay>
+		<polymer-overlay target="{{$.menuOverlay}}" opened="{{opened}}" modal></polymer-overlay>
   </template>
   <script>
     Polymer('polymer-ui-menu-button', {

From d727f02dcda12b11919ee2a09eedf1a85ba9a1f8 Mon Sep 17 00:00:00 2001
From: Yvonne Yip <ykyyip@google.com>
Date: Thu, 8 Aug 2013 11:14:45 -0700
Subject: [PATCH 20/20] polymer-ui-menu-button: quick impl for top anchoring

---
 polymer-ui-menu-button/index.html             | 13 +++++++++--
 .../polymer-ui-menu-button.css                | 22 +++++++++++++++++--
 .../polymer-ui-menu-button.html               |  9 ++++----
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/polymer-ui-menu-button/index.html b/polymer-ui-menu-button/index.html
index f4426a7..d90d94d 100644
--- a/polymer-ui-menu-button/index.html
+++ b/polymer-ui-menu-button/index.html
@@ -29,12 +29,12 @@
 			<polymer-ui-icon-button icon="menu"></polymer-ui-icon-button>
 			<div flex>Toolbar: polymer-ui-light-theme</div>
 			<polymer-ui-icon-button icon="refresh"></polymer-ui-icon-button>
-			<polymer-ui-menu-button selected="0" valign="right">
+			<polymer-ui-menu-button selected="0" align="right">
 				<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
 				<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
 				<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
 			</polymer-ui-menu-button>
-			<polymer-ui-menu-button selected="0" valign="right">
+			<polymer-ui-menu-button selected="0" align="right">
 				<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
 				<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
 				<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
@@ -46,6 +46,15 @@
 			<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
 			<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
 		</polymer-ui-menu-button>
+		<polymer-ui-menu-button selected="0" theme="polymer-ui-light-theme" valign="top">
+			<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
+			<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
+			<polymer-ui-menu-item icon="search" label="Search"></polymer-ui-menu-item>
+		</polymer-ui-menu-button>
+		<polymer-ui-menu-button selected="0" theme="polymer-ui-light-theme" valign="top">
+			<polymer-ui-menu-item icon="settings" label="Settings"></polymer-ui-menu-item>
+			<polymer-ui-menu-item icon="dialog" label="Dialog"></polymer-ui-menu-item>
+		</polymer-ui-menu-button>
 		<br><br><br><br><br><br><br><br><br><br>
 	</div>
 </body>
diff --git a/polymer-ui-menu-button/polymer-ui-menu-button.css b/polymer-ui-menu-button/polymer-ui-menu-button.css
index 29cb79d..293ca7a 100644
--- a/polymer-ui-menu-button/polymer-ui-menu-button.css
+++ b/polymer-ui-menu-button/polymer-ui-menu-button.css
@@ -17,14 +17,18 @@
 	margin: 7px 0 0 7px;
 }
 
-#menuOverlay[valign=right] {
+#menuOverlay[align=right] {
   position: absolute !important;
 	right: 10px;
 }
 
+#menuOverlay[valign=top] {
+	bottom: 36px;
+}
+
 @media screen and (max-width: 800px) {
   #menuOverlay,
-	#menuOverlay[valign=right] {
+	#menuOverlay[align=right] {
     left: 0;
     width: 100%;
     -webkit-transform: none;
@@ -64,3 +68,17 @@
 	border-bottom-color: white;
 	margin-top: -16px;
 }
+
+#arrow[valign=top] {
+	top: -10px;
+}
+
+[valign=top] .arrow {
+	margin: 0px 4px 0;
+	border-color: #cfcfcf transparent transparent transparent;
+}
+
+[valign=top] .arrow-inner {
+	border-top-color: white;
+	margin-top: -18px;
+}
diff --git a/polymer-ui-menu-button/polymer-ui-menu-button.html b/polymer-ui-menu-button/polymer-ui-menu-button.html
index 85035d3..e251e79 100644
--- a/polymer-ui-menu-button/polymer-ui-menu-button.html
+++ b/polymer-ui-menu-button/polymer-ui-menu-button.html
@@ -13,17 +13,17 @@
 <link rel="import" href="../polymer-ui-icon-button/polymer-ui-icon-button.html">
 <link rel="import" href="../polymer-ui-menu/polymer-ui-menu.html">
 
-<polymer-element name="polymer-ui-menu-button" attributes="src icon opened responsive valign selected selectedItem selectedClass valueattr multi">
+<polymer-element name="polymer-ui-menu-button" attributes="src icon opened responsive align valign selected selectedItem selectedClass valueattr multi">
   <template>
     <link rel="stylesheet" href="polymer-ui-menu-button.css">
 		<link rel="stylesheet" href="../../polymer-elements/polymer-overlay/polymer-overlay-global.css">
 		<polymer-ui-icon-button id="button" on-tap="toggle" src="{{src}}" icon="{{icon}}" active="{{opened}}">
-			<div id="arrow">
+			<div id="arrow" valign="{{valign}}">
 				<div class="arrow"></div>
 				<div class="arrow arrow-inner"></div>
 			</div>
 		</polymer-ui-icon-button>
-		<div id="menuOverlay" valign="{{valign}}">
+		<div id="menuOverlay" align="{{align}}" valign="{{valign}}">
 			<polymer-ui-menu id="menu" selected="{{selected}}" selectedItem="{{selectedItem}}" selectedClass="{{selectedClass}}" valueattr="{{valueattr}}" multi="{{multi}}">
 				<content select="*"></content>
 			</polymer-ui-menu>
@@ -38,7 +38,8 @@
       src: '',
       selected: '',
       opened: false,
-      valign: 'center',
+      align: 'center',
+			valign: 'bottom',
       multi: false,
 			mediaQuery: 'max-width: 800px',
 			mediaChangeAction: function(e) {