Project import generated by Copybara.

GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/material-design-lite/src/menu/snippets/codepen-lower-buttons.css b/node_modules/material-design-lite/src/menu/snippets/codepen-lower-buttons.css
new file mode 100644
index 0000000..ce22b7c
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/codepen-lower-buttons.css
@@ -0,0 +1,3 @@
+#demo-menu-lower-left {
+  margin-left: 40%;
+}
diff --git a/node_modules/material-design-lite/src/menu/snippets/codepen-top-buttons.css b/node_modules/material-design-lite/src/menu/snippets/codepen-top-buttons.css
new file mode 100644
index 0000000..9cd7e66
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/codepen-top-buttons.css
@@ -0,0 +1,8 @@
+#demo-menu-top-left {
+  margin-left: 40%;
+}
+
+#demo-menu-top-left,
+#demo-menu-top-right {
+  margin-top: 250px;
+}
diff --git a/node_modules/material-design-lite/src/menu/snippets/lower-left-demo.html b/node_modules/material-design-lite/src/menu/snippets/lower-left-demo.html
new file mode 100644
index 0000000..ee3b3fc
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/lower-left-demo.html
@@ -0,0 +1,25 @@
+<style>
+  .demo-menu.demo-menu__lower-left .container {
+    position: relative;
+    width: 200px;
+  }
+  .demo-menu.demo-menu__lower-left .background {
+    background: white;
+    height: 148px;
+    width: 100%;
+  }
+  .demo-menu.demo-menu__lower-left .bar {
+    box-sizing: border-box;
+    background: #3F51B5;
+    color: white;
+    width: 100%;
+    padding: 16px;
+  }
+</style>
+
+<div class="container mdl-shadow--2dp">
+  <div class="bar">
+    {% include "lower-left.html" %}
+  </div>
+  <div class="background"></div>
+</div>
diff --git a/node_modules/material-design-lite/src/menu/snippets/lower-left.html b/node_modules/material-design-lite/src/menu/snippets/lower-left.html
new file mode 100644
index 0000000..71bc922
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/lower-left.html
@@ -0,0 +1,13 @@
+<!-- Left aligned menu below button -->
+<button id="demo-menu-lower-left"
+        class="mdl-button mdl-js-button mdl-button--icon">
+  <i class="material-icons">more_vert</i>
+</button>
+
+<ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
+    for="demo-menu-lower-left">
+  <li class="mdl-menu__item">Some Action</li>
+  <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
+  <li disabled class="mdl-menu__item">Disabled Action</li>
+  <li class="mdl-menu__item">Yet Another Action</li>
+</ul>
diff --git a/node_modules/material-design-lite/src/menu/snippets/lower-right-demo.html b/node_modules/material-design-lite/src/menu/snippets/lower-right-demo.html
new file mode 100644
index 0000000..d8ad651
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/lower-right-demo.html
@@ -0,0 +1,34 @@
+<style>
+  .demo-menu.demo-menu__lower-right .container {
+    position: relative;
+    width: 200px;
+  }
+  .demo-menu.demo-menu__lower-right .background {
+    background: white;
+    height: 148px;
+    width: 100%;
+  }
+  .demo-menu.demo-menu__lower-right .bar {
+    box-sizing: border-box;
+    position: relative;
+    background: #3F51B5;
+    color: white;
+    height: 64px;
+    width: 100%;
+    padding: 16px;
+  }
+  .demo-menu.demo-menu__lower-right .wrapper {
+    box-sizing: border-box;
+    position: absolute;
+    right: 16px;
+  }
+</style>
+
+<div class="container mdl-shadow--2dp">
+  <div class="bar">
+    <div class="wrapper">
+      {% include "lower-right.html" %}
+    </div>
+  </div>
+  <div class="background"></div>
+</div>
diff --git a/node_modules/material-design-lite/src/menu/snippets/lower-right.html b/node_modules/material-design-lite/src/menu/snippets/lower-right.html
new file mode 100644
index 0000000..1ce8f9c
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/lower-right.html
@@ -0,0 +1,13 @@
+<!-- Right aligned menu below button -->
+<button id="demo-menu-lower-right"
+        class="mdl-button mdl-js-button mdl-button--icon">
+  <i class="material-icons">more_vert</i>
+</button>
+
+<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
+    for="demo-menu-lower-right">
+  <li class="mdl-menu__item">Some Action</li>
+  <li class="mdl-menu__item">Another Action</li>
+  <li disabled class="mdl-menu__item">Disabled Action</li>
+  <li class="mdl-menu__item">Yet Another Action</li>
+</ul>
diff --git a/node_modules/material-design-lite/src/menu/snippets/top-left-demo.html b/node_modules/material-design-lite/src/menu/snippets/top-left-demo.html
new file mode 100644
index 0000000..3ad0e33
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/top-left-demo.html
@@ -0,0 +1,25 @@
+<style>
+  .demo-menu.demo-menu__top-left .container {
+    position: relative;
+    width: 200px;
+  }
+  .demo-menu.demo-menu__top-left .background {
+    background: white;
+    height: 148px;
+    width: 100%;
+  }
+  .demo-menu.demo-menu__top-left .bar {
+    box-sizing: border-box;
+    background: #3F51B5;
+    color: white;
+    width: 100%;
+    padding: 16px;
+  }
+</style>
+
+<div class="container mdl-shadow--2dp">
+  <div class="background"></div>
+  <div class="bar">
+    {% include "top-left.html" %}
+  </div>
+</div>
diff --git a/node_modules/material-design-lite/src/menu/snippets/top-left.html b/node_modules/material-design-lite/src/menu/snippets/top-left.html
new file mode 100644
index 0000000..19a38aa
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/top-left.html
@@ -0,0 +1,13 @@
+<!-- Left aligned menu on top of button  -->
+<button id="demo-menu-top-left"
+        class="mdl-button mdl-js-button mdl-button--icon">
+  <i class="material-icons">more_vert</i>
+</button>
+
+<ul class="mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
+    data-mdl-for="demo-menu-top-left">
+  <li class="mdl-menu__item">Some Action</li>
+  <li class="mdl-menu__item">Another Action</li>
+  <li disabled class="mdl-menu__item">Disabled Action</li>
+  <li class="mdl-menu__item">Yet Another Action</li>
+</ul>
diff --git a/node_modules/material-design-lite/src/menu/snippets/top-right-demo.html b/node_modules/material-design-lite/src/menu/snippets/top-right-demo.html
new file mode 100644
index 0000000..6087bff
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/top-right-demo.html
@@ -0,0 +1,34 @@
+<style>
+  .demo-menu.demo-menu__top-right .container {
+    position: relative;
+    width: 200px;
+  }
+  .demo-menu.demo-menu__top-right .background {
+    background: white;
+    height: 148px;
+    width: 100%;
+  }
+  .demo-menu.demo-menu__top-right .bar {
+    box-sizing: border-box;
+    position: relative;
+    background: #3F51B5;
+    color: white;
+    height: 64px;
+    width: 100%;
+    padding: 16px;
+  }
+  .demo-menu.demo-menu__top-right .wrapper {
+    box-sizing: border-box;
+    position: absolute;
+    right: 16px;
+  }
+</style>
+
+<div class="container mdl-shadow--2dp">
+  <div class="background"></div>
+  <div class="bar">
+    <div class="wrapper">
+      {% include "top-right.html" %}
+    </div>
+  </div>
+</div>
diff --git a/node_modules/material-design-lite/src/menu/snippets/top-right.html b/node_modules/material-design-lite/src/menu/snippets/top-right.html
new file mode 100644
index 0000000..803668e
--- /dev/null
+++ b/node_modules/material-design-lite/src/menu/snippets/top-right.html
@@ -0,0 +1,13 @@
+<!-- Right aligned menu on top of button  -->
+<button id="demo-menu-top-right"
+        class="mdl-button mdl-js-button mdl-button--icon">
+  <i class="material-icons">more_vert</i>
+</button>
+
+<ul class="mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
+    data-mdl-for="demo-menu-top-right">
+  <li class="mdl-menu__item">Some Action</li>
+  <li class="mdl-menu__item">Another Action</li>
+  <li disabled class="mdl-menu__item">Disabled Action</li>
+  <li class="mdl-menu__item">Yet Another Action</li>
+</ul>