From 8f50f11f0e82c692247b767848edfe97e8123ca5 Mon Sep 17 00:00:00 2001
From: Chris Joel <cdata@google.com>
Date: Thu, 16 Jul 2015 10:58:48 -0700
Subject: [PATCH] Implement paper-menu-button for Polymer 1.0.

 - A `.dropdown-trigger` can be declared, which will open and close the
   menu.
 - A `.dropdown-content` can be declared which will be the content of
   the menu.
 - The `paper-menu-button` will auto-close when its content fires an
   `iron-select` event.
 - Animations use `neon-animations` and have been matched to the
   Material Design spec for menus.
---
 .gitignore                        |   1 +
 README.md                         |   2 +-
 bower.json                        |  50 +++--
 demo/index.html                   | 308 ++++++++++++++----------------
 index.html                        |  12 +-
 metadata.html                     |  21 --
 paper-menu-button-animations.html | 109 +++++++++++
 paper-menu-button.css             | 101 ----------
 paper-menu-button.html            | 269 ++++++++++++++++++++++----
 test/index.html                   |  25 +++
 test/paper-menu-button.html       |  96 ++++++++++
 11 files changed, 648 insertions(+), 346 deletions(-)
 create mode 100644 .gitignore
 delete mode 100644 metadata.html
 create mode 100644 paper-menu-button-animations.html
 delete mode 100644 paper-menu-button.css
 create mode 100644 test/index.html
 create mode 100644 test/paper-menu-button.html

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..8d4ae25
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+bower_components
diff --git a/README.md b/README.md
index f2d11ea..dba0ff1 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
 paper-menu-button
 =================
 
-See the [component page](https://www.polymer-project.org/0.5/docs/elements/paper-menu-button.html) for more information.
+An element that allows composing a trigger and content as a dropdown menu.
diff --git a/bower.json b/bower.json
index ba29591..d3cb912 100644
--- a/bower.json
+++ b/bower.json
@@ -1,16 +1,44 @@
 {
   "name": "paper-menu-button",
+  "version": "1.0.0",
+  "description": "",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "web-component",
+    "polymer"
+  ],
+  "main": "paper-menu-button.html",
   "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-menu-button"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/PolymerElements/paper-menu-button",
   "dependencies": {
-    "polymer": "Polymer/polymer#master",
-    "core-a11y-keys": "Polymer/core-a11y-keys#master",
-    "core-collapse": "Polymer/core-collapse#master",
-    "core-dropdown": "Polymer/core-dropdown#master",
-    "core-icons": "Polymer/core-icons#master",
-    "core-menu": "Polymer/core-menu#master",
-    "paper-button": "Polymer/paper-button#master",
-    "paper-dropdown": "Polymer/paper-dropdown#master",
-    "paper-icon-button": "Polymer/paper-icon-button#master",
-    "paper-item": "Polymer/paper-item#master"
+    "polymer": "polymer/polymer#^1.0.0",
+    "neon-animation": "polymerelements/neon-animation#^1.0.0",
+    "paper-material": "polymerelements/paper-material#^1.0.0",
+    "paper-styles": "polymerelements/paper-styles#^1.0.0",
+    "iron-dropdown": "polymerelements/iron-dropdown#^1.0.0",
+    "iron-a11y-keys-behavior": "polymerelements/iron-a11y-keys-behavior#^1.0.0",
+    "iron-behaviors": "polymerelements/iron-behaviors#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
+    "test-fixture": "polymerelements/test-fixture#^1.0.0",
+    "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "web-component-tester": "*",
+    "paper-menu": "polymerelements/paper-menu#^1.0.0",
+    "paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
+    "iron-icons": "polymerelements/iron-icons#^1.0.0",
+    "paper-button": "polymerelements/paper-button#^1.0.0",
+    "paper-item": "polymerelements/paper-item#^1.0.0",
+    "iron-image": "polymerelements/iron-image#^1.0.0",
+    "iron-icon": "polymerelements/iron-icon#^1.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/demo/index.html b/demo/index.html
index 061fc14..5a7127e 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
@@ -17,194 +18,169 @@
 
   <title>paper-menu-button</title>
 
-  <script src="../webcomponentsjs/webcomponents.js"></script>
-
-  <link href="../core-collapse/core-collapse.html" rel="import">
-  <link href="../core-icons/core-icons.html" rel="import">
-  <link href="../core-menu/core-menu.html" rel="import">
-  <link href="../paper-button/paper-button.html" rel="import">
-  <link href="../paper-dropdown/paper-dropdown.html" rel="import">
-  <link href="../paper-icon-button/paper-icon-button.html" rel="import">
-  <link href="../paper-item/paper-item.html" rel="import">
-
-  <link href="paper-menu-button.html" rel="import">
-
-  <style shim-shadowdom>
-    body {
-      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
-      font-size: 14px;
-      margin: 0;
-      padding: 24px;
-      -webkit-tap-highlight-color: rgba(0,0,0,0);
-      -webkit-touch-callout: none;
-    }
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
-    section {
-      padding: 20px 0;
-    }
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../iron-icon/iron-icon.html">
+  <link rel="import" href="../../iron-image/iron-image.html">
+  <link rel="import" href="../../paper-menu/paper-menu.html">
+  <link rel="import" href="../../paper-item/paper-item.html">
+  <link rel="import" href="../../paper-button/paper-button.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../paper-styles/demo-pages.html">
 
-    section > div {
-      padding: 14px;
-      font-size: 16px;
-    }
+  <link rel="import" href="../paper-menu-button.html">
 
-    paper-item {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+  <style>
+    paper-button {
+      display: block;
+      background: #4285f4;
+      color: #fff;
     }
 
-    html /deep/ core-collapse {
-      border: 1px solid #ccc;
-      padding: 8px;
+    paper-menu {
+      display: block;
     }
 
-    .constrained-height {
-      height: 150px;
+    paper-menu-button {
+      margin: auto;
     }
 
-    .colored {
-      color: #0f9d58;
+    iron-image {
+      padding: 1em;
     }
 
-    .dropdown.colored::shadow #ripple,
-    .dropdown.colored::shadow #background {
-      border: 1px solid #0f9d58;
-      background-color: #b7e1cd;
+    .item {
+      max-width: 300px;
     }
 
+    .horizontal-section {
+      text-align: center;
+    }
   </style>
 
 </head>
 <body>
 
-  <template is="auto-binding">
-
-    <section>
-
-      <div>Absolutely positioned menu buttons</div>
-
-      <paper-menu-button>
-        <paper-icon-button icon="menu" noink></paper-icon-button>
-        <paper-dropdown class="dropdown">
-          <core-menu class="menu">
-            <template repeat="{{pastries}}">
-              <paper-item>{{}}</paper-item>
-            </template>
-          </core-menu>
-        </paper-dropdown>
-      </paper-menu-button>
-
-      <paper-menu-button>
-        <paper-icon-button icon="menu"></paper-icon-button>
-        <paper-dropdown class="dropdown" transition="">
-          <core-menu class="menu">
-            <paper-item>No Transition</paper-item>
-            <template repeat="{{pastries}}">
-              <paper-item>{{}}</paper-item>
-            </template>
-          </core-menu>
-        </paper-dropdown>
-      </paper-menu-button>
-
-      <paper-menu-button disabled>
-        <paper-icon-button icon="menu"></paper-icon-button>
-        <paper-dropdown class="dropdown">
-          <core-menu>
-            <paper-item>Should not see this</paper-item>
-          </core-menu>
-        </paper-dropdown>
-      </paper-menu-button>
-
-      <br><br>
-
-      <paper-menu-button>
-        <paper-button noink>
-          <core-icon icon="add"></core-icon>
-          <span style="vertical-align:middle;">add</span>
-        </paper-button>
-        <paper-dropdown class="dropdown">
-          <core-menu class="menu">
-            <template repeat="{{pastries}}">
-              <paper-item>{{}}</paper-item>
-            </template>
-          </core-menu>
-        </paper-dropdown>
-      </paper-menu-button>
-
-    </section>
-
-    <section>
-
-      <div>Layered menu buttons</div>
-
-      <button onclick="document.getElementById('collapse').toggle()">toggle core-collapse</button>
-
-      <br>
-
-      <core-collapse id="collapse">
-
-        <paper-menu-button>
-          <paper-icon-button icon="menu"></paper-icon-button>
-          <paper-dropdown layered class="dropdown">
-            <core-menu class="menu">
-              <template repeat="{{pastries}}">
-                <paper-item>{{}}</paper-item>
-              </template>
-            </core-menu>
-          </paper-dropdown>
-        </paper-menu-button>
-
-      </core-collapse>
-
-    </section>
-
-    <section>
-
-      <div>Custom styling</div>
-
-      <paper-menu-button label="Constrained height">
-        <paper-icon-button icon="menu"></paper-icon-button>
-        <paper-dropdown class="dropdown constrained-height">
-          <core-menu class="menu">
-            <template repeat="{{pastries}}">
-              <paper-item>{{}}</paper-item>
-            </template>
-          </core-menu>
-        </paper-dropdown>
-      </paper-menu-button>
-
-      <paper-menu-button label="Colored">
-        <paper-icon-button icon="menu" class="colored"></paper-icon-button>
-        <paper-dropdown class="dropdown colored">
-          <core-menu class="menu">
-            <template repeat="{{pastries}}">
-              <paper-item>{{}}</paper-item>
-            </template>
-          </core-menu>
-        </paper-dropdown>
-      </paper-menu-button>
-
-    </section>
 
+  <template id="Demo" is="dom-bind">
+
+    <div class="horizontal-section-container">
+      <div>
+        <h4>Paper Icon Button + Paper Menu</h4>
+        <div class="horizontal-section">
+          <paper-menu-button>
+            <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
+            <paper-menu class="dropdown-content">
+              <template is="dom-repeat" items="[[letters]]" as="letter">
+                <paper-item>[[letter]]</paper-item>
+              </template>
+            </paper-menu>
+          </paper-menu-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="horizontal-section-container">
+      <div>
+        <h4>Disabled</h4>
+        <div class="horizontal-section">
+          <paper-menu-button disabled>
+            <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
+            <paper-menu class="dropdown-content">
+              <template is="dom-repeat" items="[[letters]]" as="letter">
+                <paper-item>[[letter]]</paper-item>
+              </template>
+            </paper-menu>
+          </paper-menu-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="horizontal-section-container">
+      <div>
+        <h4>Alternate Alignment</h4>
+        <div class="horizontal-section">
+          <paper-menu-button vertical-align="bottom" horizontal-align="right">
+            <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
+            <paper-menu class="dropdown-content">
+              <template is="dom-repeat" items="[[letters]]" as="letter">
+                <paper-item>[[letter]]</paper-item>
+              </template>
+            </paper-menu>
+          </paper-menu-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="horizontal-section-container">
+      <div>
+        <h4>Alternate Button</h4>
+        <div class="horizontal-section">
+          <paper-menu-button>
+            <paper-button class="dropdown-trigger" raised>
+              <iron-icon icon="check"></iron-icon>
+              <span>Dinosaurs</span>
+            </paper-button>
+            <paper-menu class="dropdown-content">
+              <template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
+                <paper-item>[[dinosaur]]</paper-item>
+              </template>
+            </paper-menu>
+          </paper-menu-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="horizontal-section-container">
+      <div>
+        <h4>Alternate Content</h4>
+        <div class="horizontal-section">
+          <paper-menu-button vertical-align="bottom">
+            <paper-icon-button class="dropdown-trigger" icon="polymer"></paper-icon-button>
+            <iron-image class="dropdown-content" src="../../iron-image/demo/polymer.svg"></iron-image>
+          </paper-menu-button>
+        </div>
+      </div>
+    </div>
   </template>
 
   <script>
-
-    scope = document.querySelector('template[is=auto-binding]');
-
-    scope.pastries = [
-      'Apple fritter',
-      'Croissant',
-      'Donut',
-      'Financier',
-      'Jello',
-      'Madeleine',
-      'Pound cake',
-      'Pretzel',
-      'Sfogliatelle'
+    Demo.letters = [
+      'alpha',
+      'beta',
+      'gamma',
+      'delta',
+      'epsilon'
+    ];
+    Demo.dinosaurs = [
+      'allosaurus',
+      'brontosaurus',
+      'carcharodontosaurus',
+      'diplodocus',
+      'ekrixinatosaurus',
+      'fukuiraptor',
+      'gallimimus',
+      'hadrosaurus',
+      'iguanodon',
+      'jainosaurus',
+      'kritosaurus',
+      'liaoceratops',
+      'megalosaurus',
+      'nemegtosaurus',
+      'ornithomimus',
+      'protoceratops',
+      'quetecsaurus',
+      'rajasaurus',
+      'stegosaurus',
+      'triceratops',
+      'utahraptor',
+      'vulcanodon',
+      'wannanosaurus',
+      'xenoceratops',
+      'yandusaurus',
+      'zephyrosaurus'
     ];
-
   </script>
 
 </body>
diff --git a/index.html b/index.html
index 2697102..040b195 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE
 The complete set of authors may be found at http://polymer.github.io/AUTHORS
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
@@ -10,13 +11,14 @@
 <html>
 <head>
 
-  <script src="../webcomponentsjs/webcomponents.js"></script>
-  <link rel="import" href="../core-component-page/core-component-page.html">
+  <title>paper-menu-button</title>
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
 
 </head>
-<body unresolved>
+<body>
 
-  <core-component-page sources="['paper-menu-button.html','paper-menu-button-overlay.html']"></core-component-page>
+  <iron-component-page></iron-component-page>
 
 </body>
 </html>
diff --git a/metadata.html b/metadata.html
deleted file mode 100644
index e07439e..0000000
--- a/metadata.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-    @license
-    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
-    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-    Code distributed by Google as part of the polymer project is also
-    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<x-meta id="paper-menu-button" label="Menu Button" group="Paper" isContainer>
-  <template>
-    <paper-menu-button icon="menu">
-      <div>Menu Item 1</div>
-      <div>Menu Item 2</div>
-      <div>Menu Item 3</div>
-    </paper-menu-button>
-  </template>
-  <template id="imports">
-    <link rel="import" href="paper-menu-button.html">
-  </template>
-</x-meta>
diff --git a/paper-menu-button-animations.html b/paper-menu-button-animations.html
new file mode 100644
index 0000000..b1339f2
--- /dev/null
+++ b/paper-menu-button-animations.html
@@ -0,0 +1,109 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../neon-animation/web-animations.html">
+<link rel="import" href="../neon-animation/neon-animation-behavior.html">
+<script>
+  Polymer({
+    is: 'paper-menu-grow-height-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+      var rect = node.getBoundingClientRect();
+      var height = rect.height;
+
+      this._effect = new KeyframeEffect(node, [{
+        height: (height / 2) + 'px'
+      }, {
+        height: height + 'px'
+      }], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+  });
+
+  Polymer({
+    is: 'paper-menu-grow-width-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+      var rect = node.getBoundingClientRect();
+      var width = rect.width;
+
+      this._effect = new KeyframeEffect(node, [{
+        width: (width / 2) + 'px'
+      }, {
+        width: width + 'px'
+      }], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+  });
+
+  Polymer({
+    is: 'paper-menu-shrink-width-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+      var rect = node.getBoundingClientRect();
+      var width = rect.width;
+
+      this._effect = new KeyframeEffect(node, [{
+        width: width + 'px'
+      }, {
+        width: width - (width / 20) + 'px'
+      }], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+  });
+
+  Polymer({
+    is: 'paper-menu-shrink-height-animation',
+
+    behaviors: [
+      Polymer.NeonAnimationBehavior
+    ],
+
+    configure: function(config) {
+      var node = config.node;
+      var rect = node.getBoundingClientRect();
+      var height = rect.height;
+      var top = rect.top;
+
+      this.setPrefixedProperty(node, 'transformOrigin', '0 0');
+
+      this._effect = new KeyframeEffect(node, [{
+        height: height + 'px',
+        transform: 'translateY(0)'
+      }, {
+        height: height / 2 + 'px',
+        transform: 'translateY(-20px)'
+      }], this.timingFromConfig(config));
+
+      return this._effect;
+    }
+  });
+</script>
+
+
diff --git a/paper-menu-button.css b/paper-menu-button.css
deleted file mode 100644
index a8eb599..0000000
--- a/paper-menu-button.css
+++ /dev/null
@@ -1,101 +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.
-*/
-
-:host {
-  display: inline-block;
-  padding: 8px;
-  position: relative;
-  background-image: none;
-  outline: none;
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: pointer;
-}
-
-:host([disabled]) {
-  cursor: auto;
-}
-
-core-icon {
-  position: relative;
-}
-
-core-icon::shadow svg {
-  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-  transform-origin: 50% 50%;
-  -webkit-transform-origin: 50% 50%;
-}
-
-:host(:hover) core-icon::shadow svg {
-  transform: scale(1.2);
-  -webkit-transform: scale(1.2);
-}
-
-:host([disabled]:hover) core-icon::shadow svg {
-  transform: none;
-  -webkit-transform: none;
-}
-
-:host([disabled]) core-icon::shadow path {
-  fill: #c9c9c9;
-}
-
-#dropdown {
-  background-color: transparent;
-  margin: 12px;
-  color: #000;
-  overflow: visible;
-}
-
-#menu {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  margin: 0;
-}
-
-.paper-menu-button-overlay-ink {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 40px;
-  height: 40px;
-  border-radius: 20px;
-  opacity: 0;
-  transform: scale(0);
-  -webkit-transform: scale(0);
-}
-
-:host([halign="right"]) .paper-menu-button-overlay-ink {
-  left: auto;
-  right: 0;
-}
-
-:host([valign="bottom"]) .paper-menu-button-overlay-ink {
-  top: auto;
-  bottom: 0;
-}
-
-.paper-menu-button-overlay-bg {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  border-radius: 3px;
-  opacity: 0;
-  z-index: -1;
-}
-
-:host([noTransition]) .paper-menu-button-overlay-bg {
-  opacity: 1;
-}
-
-.paper-menu-button-menu-container {
-  overflow: auto;
-  max-height: 100%;
-  max-width: 100%;
-}
\ No newline at end of file
diff --git a/paper-menu-button.html b/paper-menu-button.html
index 18a24df..6bd2089 100644
--- a/paper-menu-button.html
+++ b/paper-menu-button.html
@@ -1,80 +1,267 @@
 <!--
-Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-dropdown/iron-dropdown.html">
+<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import" href="../iron-behaviors/iron-control-state.html">
+<link rel="import" href="../paper-material/paper-material.html">
+<link rel="import" href="../paper-styles/default-theme.html">
+<link rel="import" href="../neon-animation/animations/fade-in-animation.html">
+<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
+<link rel="import" href="paper-menu-button-animations.html">
+
 <!--
+`paper-menu-button` allows one to compose a designated "trigger" element with
+another element that represents "content", to create a dropdown menu that
+displays the "content" when the "trigger" is clicked.
 
-`paper-menu-button` works together with a button and a `paper-dropdown` to
-implement a button that displays a drop-down when tapped on.
+The child element with the class `dropdown-trigger` will be used as the
+"trigger" element. The child element with the class `dropdown-content` will be
+used as the "content" element.
 
-The child element with the class `dropdown` will be used as the drop-down
-menu. It should be a `paper-dropdown` or other overlay element.
+The `paper-menu-button` is sensitive to its content's `iron-select` events. If
+the "content" element triggers an `iron-select` event, the `paper-menu-button`
+will close automatically.
 
 Example:
 
     <paper-menu-button>
-        <paper-icon-button icon="menu" noink></paper-icon-button>
-        <paper-dropdown class="dropdown">
-            <core-menu class="menu">
-                <paper-item>Share</paper-item>
-                <paper-item>Settings</paper-item>
-                <paper-item>Help</paper-item>
-            </core-menu>
-        </paper-dropdown>
+      <paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
+      <paper-menu class="dropdown-content">
+        <paper-item>Share</paper-item>
+        <paper-item>Settings</paper-item>
+        <paper-item>Help</paper-item>
+      </paper-menu>
     </paper-menu-button>
 
-@group Paper Elements
-@element paper-menu-button
-@status unstable
+### Styling
+
+The following custom properties and mixins are also available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-menu-button-dropdown-background` | Background color of the paper-menu-button dropdown | `#fff`
+`--paper-menu-button` | Mixin applied to the paper-menu-button | `{}`
+`--paper-menu-button-disabled` | Mixin applied to the paper-menu-button when disabled | `{}`
+`--paper-menu-button-dropdown` | Mixin applied to the paper-menu-button dropdown | `{}`
+
+
 @hero hero.svg
 @demo demo/index.html
 -->
-<link href="../polymer/polymer.html" rel="import">
-<link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
-<link href="../core-dropdown/core-dropdown-base.html" rel="import">
-
-<polymer-element name="paper-menu-button" extends="core-dropdown-base" relative>
-<template>
 
+<dom-module id="paper-menu-button">
   <style>
     :host {
       display: inline-block;
+      position: relative;
+      padding: 8px;
+      outline: none;
+
+      @apply(--paper-menu-button);
     }
 
     :host([disabled]) {
-      pointer-events: none;
-      color: #a8a8a8;
+      cursor: auto;
+      color: var(--disabled-text-color);
+
+      @apply(--paper-menu-button-disabled);
     }
 
-    polyfill-next-selector { content: ':host([disabled]) *'; }
-    :host([disabled]) ::content * {
-      pointer-events: none;
+    :host([vertical-align="top"]) paper-material {
+      margin-bottom: 20px;
+      margin-top: -10px;
+      top: 10px;
     }
-  </style>
 
-  <core-a11y-keys target="{{}}" keys="enter space" on-keys-pressed="{{toggleOverlay}}"></core-a11y-keys>
+    :host([vertical-align="bottom"]) paper-material {
+      bottom: 10px;
+      margin-bottom: -10px;
+      margin-top: 20px;
+    }
 
-  <content></content>
+    paper-material {
+      border-radius: 2px;
+      background-color: var(--paper-menu-button-dropdown-background, --primary-background-color);
 
-</template>
+      @apply(--paper-menu-button-dropdown);
+    }
+  </style>
+  <template>
+    <div id="trigger" on-tap="open">
+      <content select=".dropdown-trigger"></content>
+    </div>
+    <iron-dropdown
+      id="dropdown"
+      opened="{{opened}}"
+      horizontal-align="[[horizontalAlign]]"
+      vertical-align="[[verticalAlign]]"
+      open-animation-config="[[openAnimationConfig]]"
+      close-animation-config="[[closeAnimationConfig]]"
+      no-animations="[[noAnimations]]">
+      <paper-material class="dropdown-content">
+        <content select=".dropdown-content"></content>
+      </paper-material>
+    </iron-dropdown>
+  </template>
+</dom-module>
 <script>
+  (function() {
+    'use strict';
 
-  Polymer({
+    var PaperMenuButton = Polymer({
 
-    overlayListeners: {
-      'core-overlay-open': 'openAction',
-      'core-activate': 'activateAction'
-    },
+      is: 'paper-menu-button',
 
-    activateAction: function() {
-      this.opened = false;
-    }
+      behaviors: [
+        Polymer.IronA11yKeysBehavior,
+        Polymer.IronControlState
+      ],
 
-  });
+      properties: {
 
+        /**
+         * True if the content is currently displayed.
+         */
+        opened: {
+          type: Boolean,
+          value: false,
+          notify: true
+        },
+
+        /**
+         * The orientation against which to align the menu dropdown
+         * horizontally relative to the dropdown trigger.
+         */
+        horizontalAlign: {
+          type: String,
+          value: 'left',
+          reflectToAttribute: true
+        },
+
+        /**
+         * The orientation against which to align the menu dropdown
+         * vertically relative to the dropdown trigger.
+         */
+        verticalAlign: {
+          type: String,
+          value: 'top',
+          reflectToAttribute: true
+        },
+
+        /**
+         * Set to true to disable animations when opening and closing the
+         * dropdown.
+         */
+        noAnimations: {
+          type: Boolean,
+          value: false
+        },
+
+        /**
+         * An animation config. If provided, this will be used to animate the
+         * opening of the dropdown.
+         */
+        openAnimationConfig: {
+          type: Object,
+          value: function() {
+            return [{
+              name: 'fade-in-animation',
+              timing: {
+                delay: 100,
+                duration: 200
+              }
+            }, {
+              name: 'paper-menu-grow-width-animation',
+              timing: {
+                delay: 100,
+                duration: 150,
+                easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER
+              }
+            }, {
+              name: 'paper-menu-grow-height-animation',
+              timing: {
+                delay: 100,
+                duration: 275,
+                easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER
+              }
+            }];
+          }
+        },
+
+        /**
+         * An animation config. If provided, this will be used to animate the
+         * closing of the dropdown.
+         */
+        closeAnimationConfig: {
+          type: Object,
+          value: function() {
+            return [{
+              name: 'fade-out-animation',
+              timing: {
+                duration: 150
+              }
+            }, {
+              name: 'paper-menu-shrink-width-animation',
+              timing: {
+                delay: 100,
+                duration: 50,
+                easing: PaperMenuButton.ANIMATION_CUBIC_BEZIER
+              }
+            }, {
+              name: 'paper-menu-shrink-height-animation',
+              timing: {
+                duration: 200,
+                easing: 'ease-in'
+              }
+            }];
+          }
+        }
+      },
+
+      hostAttributes: {
+        role: 'group',
+        'aria-haspopup': 'true'
+      },
+
+      listeners: {
+        'iron-activate': '_onIronActivate'
+      },
+
+      /**
+       * Make the dropdown content appear as an overlay positioned relative
+       * to the dropdown trigger.
+       */
+      open: function() {
+        this.fire('paper-open');
+        this.$.dropdown.open();
+      },
+
+      /**
+       * Hide the dropdown content.
+       */
+      close: function() {
+        this.fire('paper-close');
+        this.$.dropdown.close();
+      },
+
+      _onIronActivate: function(event) {
+        this.close();
+      }
+    });
+
+    PaperMenuButton.ANIMATION_CUBIC_BEZIER = 'cubic-bezier(.3,.95,.5,1)';
+    PaperMenuButton.MAX_ANIMATION_TIME_MS = 400;
+
+    Polymer.PaperMenuButton = PaperMenuButton;
+  })();
 </script>
-</polymer-element>
+
diff --git a/test/index.html b/test/index.html
new file mode 100644
index 0000000..2339910
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+  <title>paper-menu-button tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+</head>
+<body>
+  <script>
+    WCT.loadSuites([
+      'paper-menu-button.html'
+    ]);
+  </script>
+</body>
+</html>
diff --git a/test/paper-menu-button.html b/test/paper-menu-button.html
new file mode 100644
index 0000000..72a5358
--- /dev/null
+++ b/test/paper-menu-button.html
@@ -0,0 +1,96 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>paper-menu-button basic tests</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../test-fixture/test-fixture-mocha.js"></script>
+  <script src="../../iron-test-helpers/mock-interactions.js"></script>
+
+  <link rel="import" href="../paper-menu-button.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+
+</head>
+<body>
+
+  <test-fixture id="TrivialMenuButton">
+    <template>
+      <paper-menu-button no-animations>
+        <span class="dropdown-trigger">trigger</span>
+        <span class="dropdown-content">content</span>
+      </paper-menu-button>
+    </template>
+  </test-fixture>
+
+  <script>
+    suite('<paper-menu-button>', function() {
+      var menuButton;
+      var trigger;
+      var content;
+
+      setup(function() {
+        menuButton = fixture('TrivialMenuButton');
+        trigger = Polymer.dom(menuButton).querySelector('.dropdown-trigger');
+        content = Polymer.dom(menuButton).querySelector('.dropdown-content');
+      });
+
+      test('opens when trigger is clicked', function(done) {
+        var contentRect;
+
+        contentRect = content.getBoundingClientRect();
+
+        expect(contentRect.width).to.be.equal(0);
+        expect(contentRect.height).to.be.equal(0);
+
+        MockInteractions.tap(trigger);
+
+        Polymer.Base.async(function() {
+          contentRect = content.getBoundingClientRect();
+
+          expect(menuButton.opened).to.be.equal(true);
+
+          expect(contentRect.width).to.be.greaterThan(0);
+          expect(contentRect.height).to.be.greaterThan(0);
+          done();
+        });
+      });
+
+      test('closes when trigger is clicked again', function(done) {
+        MockInteractions.tap(trigger);
+
+        Polymer.Base.async(function() {
+
+          MockInteractions.tap(trigger);
+
+          Polymer.Base.async(function() {
+            var contentRect = content.getBoundingClientRect();
+
+            expect(menuButton.opened).to.be.equal(false);
+
+            expect(contentRect.width).to.be.equal(0);
+            expect(contentRect.height).to.be.equal(0);
+
+            done();
+          }, Polymer.PaperMenuButton.MAX_ANIMATION_TIME_MS);
+        }, 100);
+      });
+
+      test('has aria-haspopup attribute', function() {
+        expect(menuButton.hasAttribute('aria-haspopup')).to.be.equal(true);
+      });
+    });
+  </script>
+</body>
+</html>