From 912bd57ca09f93d4e59737078a725b7fefa9d545 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Mon, 22 Feb 2016 12:20:38 -0500
Subject: [PATCH] update components

---
 .../iron-behaviors/.bower.json                |  16 +-
 .../iron-behaviors/.travis.yml                |  11 +-
 .../iron-behaviors/CONTRIBUTING.md            |  11 +-
 .../iron-behaviors/bower.json                 |   4 +-
 .../iron-behaviors/iron-control-state.html    |   1 +
 .../iron-behaviors/test/focused-state.html    |   8 +-
 .../iron-menu-behavior/.bower.json            |   8 +-
 .../iron-menu-behavior/bower.json             |   2 +-
 .../iron-menu-behavior.html                   |   2 +
 .../iron-menubar-behavior.html                |   6 +-
 .../bower_components/iron-meta/.bower.json    |   6 +-
 .../iron-overlay-behavior/.bower.json         |   9 +-
 .../iron-overlay-behavior/bower.json          |   3 +-
 .../iron-overlay-behavior/demo/index.html     | 235 +++++++++---------
 .../iron-overlay-behavior.html                |  36 ++-
 .../test/iron-overlay-behavior.html           |  24 +-
 .../paper-behaviors/.bower.json               |   4 +-
 .../paper-icon-button/.bower.json             |   6 +-
 .../bower_components/paper-ripple/.bower.json |   6 +-
 dashboard-ui/scripts/externalplayer.js        |  78 ++----
 20 files changed, 233 insertions(+), 243 deletions(-)

diff --git a/dashboard-ui/bower_components/iron-behaviors/.bower.json b/dashboard-ui/bower_components/iron-behaviors/.bower.json
index 17f68b335..85e8252b3 100644
--- a/dashboard-ui/bower_components/iron-behaviors/.bower.json
+++ b/dashboard-ui/bower_components/iron-behaviors/.bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-behaviors",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Provides a set of behaviors for the iron elements",
   "private": true,
   "authors": [
@@ -25,18 +25,18 @@
     "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
     "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
     "test-fixture": "polymerelements/test-fixture#^1.0.0",
-    "web-component-tester": "polymer/web-component-tester#^3.4.0",
+    "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
   "ignore": [],
-  "homepage": "https://github.com/polymerelements/iron-behaviors",
-  "_release": "1.0.12",
+  "homepage": "https://github.com/PolymerElements/iron-behaviors",
+  "_release": "1.0.13",
   "_resolution": {
     "type": "version",
-    "tag": "v1.0.12",
-    "commit": "657f526a2382a659cdf4e13be87ecc89261588a3"
+    "tag": "v1.0.13",
+    "commit": "a7bc3428a6da2beed21987b3a8028206826a12bc"
   },
-  "_source": "git://github.com/polymerelements/iron-behaviors.git",
+  "_source": "git://github.com/PolymerElements/iron-behaviors.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-behaviors"
+  "_originalSource": "PolymerElements/iron-behaviors"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/iron-behaviors/.travis.yml b/dashboard-ui/bower_components/iron-behaviors/.travis.yml
index 3fc6130eb..6cfa94dfa 100644
--- a/dashboard-ui/bower_components/iron-behaviors/.travis.yml
+++ b/dashboard-ui/bower_components/iron-behaviors/.travis.yml
@@ -1,22 +1,25 @@
 language: node_js
 sudo: false
 before_script:
-  - npm install bower
-  - npm install web-component-tester
-  - 'export PATH=$PWD/node_modules/.bin:$PATH'
+  - npm install -g bower polylint web-component-tester
   - bower install
+  - polylint
 env:
   global:
     - secure: ZOqj2XVNVwfT74rHxg/ljcAsS6FnmDpRSsXbsy1Icv9DcLHrMlmyQ10gWBjE/YXYF0Uv4akQ1qqn0TJaKOtp9HZeH+P6OPAYk2vJbWD7qp52pPtIqEFomcsUyflt4IjfaXKuN4FMod7PSWVSGJ+DxSguJvZKILkrs5d/rJdFv3c=
     - secure: clkqemGQG16TXyAPkv9LBv6x3SbT3ZM0eo8LETx4uNKi3WzlwgXxZA9b5Sr5wYzxyxFFpnhDXW7CL4+UjYu1atGNeTW2TuSaYUPHtgu67OFDr8Jbw047p1XQb5enPSt9+YxrHKfjHBiJvWulJ8rCSQshU9Rhe0DC6NrFRPFgk0A=
-node_js: 4
+    - CXX=g++-4.8
+node_js: stable
 addons:
   firefox: latest
   apt:
     sources:
       - google-chrome
+      - ubuntu-toolchain-r-test
     packages:
       - google-chrome-stable
+      - g++-4.8
+  sauce_connect: true
 script:
   - xvfb-run wct
   - "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
diff --git a/dashboard-ui/bower_components/iron-behaviors/CONTRIBUTING.md b/dashboard-ui/bower_components/iron-behaviors/CONTRIBUTING.md
index 7b1014156..f147978a3 100644
--- a/dashboard-ui/bower_components/iron-behaviors/CONTRIBUTING.md
+++ b/dashboard-ui/bower_components/iron-behaviors/CONTRIBUTING.md
@@ -5,6 +5,11 @@ https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
 
 If you edit that file, it will get updated everywhere else.
 If you edit this file, your changes will get overridden :)
+
+You can however override the jsbin link with one that's customized to this
+specific element:
+
+jsbin=https://jsbin.com/cagaye/edit?html,output
 -->
 # Polymer Elements
 ## Guide for Contributors
@@ -41,7 +46,7 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
  3. Click the `paper-foo` element.
  ```
 
- 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [http://jsbin.com/cagaye](http://jsbin.com/cagaye/edit?html,output).
+ 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
 
  3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
 
@@ -51,14 +56,14 @@ Polymer Elements are built in the open, and the Polymer authors eagerly encourag
 
 When submitting pull requests, please provide:
 
- 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues using the following syntax:
+ 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
 
  ```markdown
  (For a single issue)
  Fixes #20
 
  (For multiple issues)
- Fixes #32, #40
+ Fixes #32, fixes #40
  ```
 
  2. **A succinct description of the design** used to fix any related issues. For example:
diff --git a/dashboard-ui/bower_components/iron-behaviors/bower.json b/dashboard-ui/bower_components/iron-behaviors/bower.json
index f1f36412f..6f3b79d3f 100644
--- a/dashboard-ui/bower_components/iron-behaviors/bower.json
+++ b/dashboard-ui/bower_components/iron-behaviors/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-behaviors",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Provides a set of behaviors for the iron elements",
   "private": true,
   "authors": [
@@ -25,7 +25,7 @@
     "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
     "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
     "test-fixture": "polymerelements/test-fixture#^1.0.0",
-    "web-component-tester": "polymer/web-component-tester#^3.4.0",
+    "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
   "ignore": []
diff --git a/dashboard-ui/bower_components/iron-behaviors/iron-control-state.html b/dashboard-ui/bower_components/iron-behaviors/iron-control-state.html
index 83f7b566f..45ca87ddf 100644
--- a/dashboard-ui/bower_components/iron-behaviors/iron-control-state.html
+++ b/dashboard-ui/bower_components/iron-behaviors/iron-control-state.html
@@ -89,6 +89,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         this._oldTabIndex = this.tabIndex;
         this.focused = false;
         this.tabIndex = -1;
+        this.blur();
       } else if (this._oldTabIndex !== undefined) {
         this.tabIndex = this._oldTabIndex;
       }
diff --git a/dashboard-ui/bower_components/iron-behaviors/test/focused-state.html b/dashboard-ui/bower_components/iron-behaviors/test/focused-state.html
index e17c7f95a..b20b98b90 100644
--- a/dashboard-ui/bower_components/iron-behaviors/test/focused-state.html
+++ b/dashboard-ui/bower_components/iron-behaviors/test/focused-state.html
@@ -77,12 +77,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       });
 
       suite('when the focused state is disabled', function() {
-        setup(function() {
-          focusTarget.disabled = true;
-        });
-
         test('will not be focusable', function() {
+          var blurSpy = sinon.spy(focusTarget, 'blur');
+          MockInteractions.focus(focusTarget);
+          focusTarget.disabled = true;
           expect(focusTarget.getAttribute('tabindex')).to.be.eql('-1');
+          expect(blurSpy.called).to.be.eql(true);
         });
       });
     });
diff --git a/dashboard-ui/bower_components/iron-menu-behavior/.bower.json b/dashboard-ui/bower_components/iron-menu-behavior/.bower.json
index 6b8707e18..60d45c0d3 100644
--- a/dashboard-ui/bower_components/iron-menu-behavior/.bower.json
+++ b/dashboard-ui/bower_components/iron-menu-behavior/.bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-menu-behavior",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Provides accessible menu behavior",
   "authors": "The Polymer Authors",
   "keywords": [
@@ -34,11 +34,11 @@
     "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "_release": "1.1.1",
+  "_release": "1.1.2",
   "_resolution": {
     "type": "version",
-    "tag": "v1.1.1",
-    "commit": "0fc2c95803badd8e8f50cbe7f5d3669d647e7229"
+    "tag": "v1.1.2",
+    "commit": "8b09b6187b748499a0b8e9ddc789391d26e1d5d1"
   },
   "_source": "git://github.com/polymerelements/iron-menu-behavior.git",
   "_target": "^1.0.0",
diff --git a/dashboard-ui/bower_components/iron-menu-behavior/bower.json b/dashboard-ui/bower_components/iron-menu-behavior/bower.json
index 8bb7ada8f..21b6fc4d6 100644
--- a/dashboard-ui/bower_components/iron-menu-behavior/bower.json
+++ b/dashboard-ui/bower_components/iron-menu-behavior/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-menu-behavior",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Provides accessible menu behavior",
   "authors": "The Polymer Authors",
   "keywords": [
diff --git a/dashboard-ui/bower_components/iron-menu-behavior/iron-menu-behavior.html b/dashboard-ui/bower_components/iron-menu-behavior/iron-menu-behavior.html
index 2a5e549d1..315ab8cde 100644
--- a/dashboard-ui/bower_components/iron-menu-behavior/iron-menu-behavior.html
+++ b/dashboard-ui/bower_components/iron-menu-behavior/iron-menu-behavior.html
@@ -273,6 +273,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     _onUpKey: function(event) {
       // up and down arrows moves the focus
       this._focusPrevious();
+      event.detail.keyboardEvent.preventDefault();
     },
 
     /**
@@ -282,6 +283,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
      */
     _onDownKey: function(event) {
       this._focusNext();
+      event.detail.keyboardEvent.preventDefault();
     },
 
     /**
diff --git a/dashboard-ui/bower_components/iron-menu-behavior/iron-menubar-behavior.html b/dashboard-ui/bower_components/iron-menu-behavior/iron-menubar-behavior.html
index ae93511ea..f3b651861 100644
--- a/dashboard-ui/bower_components/iron-menu-behavior/iron-menubar-behavior.html
+++ b/dashboard-ui/bower_components/iron-menu-behavior/iron-menubar-behavior.html
@@ -43,20 +43,22 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       return window.getComputedStyle(this)['direction'] === 'rtl';
     },
 
-    _onLeftKey: function() {
+    _onLeftKey: function(event) {
       if (this._isRTL) {
         this._focusNext();
       } else {
         this._focusPrevious();
       }
+      event.detail.keyboardEvent.preventDefault();
     },
 
-    _onRightKey: function() {
+    _onRightKey: function(event) {
       if (this._isRTL) {
         this._focusPrevious();
       } else {
         this._focusNext();
       }
+      event.detail.keyboardEvent.preventDefault();
     },
 
     _onKeydown: function(event) {
diff --git a/dashboard-ui/bower_components/iron-meta/.bower.json b/dashboard-ui/bower_components/iron-meta/.bower.json
index f4bfef4a7..e1304d174 100644
--- a/dashboard-ui/bower_components/iron-meta/.bower.json
+++ b/dashboard-ui/bower_components/iron-meta/.bower.json
@@ -26,14 +26,14 @@
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
   "main": "iron-meta.html",
-  "homepage": "https://github.com/polymerelements/iron-meta",
+  "homepage": "https://github.com/PolymerElements/iron-meta",
   "_release": "1.1.1",
   "_resolution": {
     "type": "version",
     "tag": "v1.1.1",
     "commit": "e171ee234b482219c9514e6f9551df48ef48bd9f"
   },
-  "_source": "git://github.com/polymerelements/iron-meta.git",
+  "_source": "git://github.com/PolymerElements/iron-meta.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-meta"
+  "_originalSource": "PolymerElements/iron-meta"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/iron-overlay-behavior/.bower.json b/dashboard-ui/bower_components/iron-overlay-behavior/.bower.json
index f24ef5bd9..6352d03f0 100644
--- a/dashboard-ui/bower_components/iron-overlay-behavior/.bower.json
+++ b/dashboard-ui/bower_components/iron-overlay-behavior/.bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-overlay-behavior",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "license": "http://polymer.github.io/LICENSE.txt",
   "description": "Provides a behavior for making an element an overlay",
   "private": true,
@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
     "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
     "paper-styles": "PolymerElements/paper-styles#^1.0.2",
@@ -33,11 +34,11 @@
   },
   "ignore": [],
   "homepage": "https://github.com/polymerelements/iron-overlay-behavior",
-  "_release": "1.3.2",
+  "_release": "1.3.3",
   "_resolution": {
     "type": "version",
-    "tag": "v1.3.2",
-    "commit": "17d07bd2436f94af8de83b5f8b6444a194eb67a4"
+    "tag": "v1.3.3",
+    "commit": "7279b3bedd0f0dd70dbfb3d7557d1f49c7432941"
   },
   "_source": "git://github.com/polymerelements/iron-overlay-behavior.git",
   "_target": "^1.0.0",
diff --git a/dashboard-ui/bower_components/iron-overlay-behavior/bower.json b/dashboard-ui/bower_components/iron-overlay-behavior/bower.json
index 7b7371f2b..97f3076da 100644
--- a/dashboard-ui/bower_components/iron-overlay-behavior/bower.json
+++ b/dashboard-ui/bower_components/iron-overlay-behavior/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-overlay-behavior",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "license": "http://polymer.github.io/LICENSE.txt",
   "description": "Provides a behavior for making an element an overlay",
   "private": true,
@@ -25,6 +25,7 @@
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
     "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
     "paper-styles": "PolymerElements/paper-styles#^1.0.2",
diff --git a/dashboard-ui/bower_components/iron-overlay-behavior/demo/index.html b/dashboard-ui/bower_components/iron-overlay-behavior/demo/index.html
index c14f7ae45..c1bd1e23c 100644
--- a/dashboard-ui/bower_components/iron-overlay-behavior/demo/index.html
+++ b/dashboard-ui/bower_components/iron-overlay-behavior/demo/index.html
@@ -9,148 +9,143 @@ 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>
 
-    <title>simple-overlay demo</title>
+<head>
 
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+  <title>simple-overlay demo</title>
 
-    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
-    <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
-    <link rel="import" href="simple-overlay.html">
-    <link rel="import" href="../../paper-styles/demo-pages.html">
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
-    <style is="custom-style">
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="simple-overlay.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
 
-      .with-margin {
-        margin: 24px 40px;
+  <style is="custom-style" include="demo-pages-shared-styles">
+    demo-snippet {
+      --demo-snippet-code: {
+        max-height: 250px;
       }
+    }
+  </style>
 
-      .full-height {
-        height: 100%;
-      }
+</head>
 
-      .scrollable {
-        overflow: auto;
-      }
+<body unresolved class="centered">
 
-      .vertical {
-        @apply(--layout-vertical);
-      }
-
-      .flex {
-        @apply(--layout-flex);
-      }
-    </style>
-
-  </head>
-  <body onclick="clickHandler(event);">
-
-    <div class="vertical-section centered">
-      <button data-dialog="plain">plain</button>
-
-      <simple-overlay id="plain">
-        Hello world!
+  <h3>An element with <code>IronOverlayBehavior</code> can be opened, closed, toggled.</h3>
+  <demo-snippet>
+    <template>
+      <button onclick="plain.open()">Plain overlay</button>
+      <simple-overlay id="plain" tabindex=-1>
+        <h2>Hello world!</h2>
+        <p>This can be closed by pressing the ESC key too.</p>
+        <button onclick="plain.close()">Close</button>
       </simple-overlay>
+    </template>
+  </demo-snippet>
 
-      <button data-dialog="scrolling">scrolling</button>
-
-      <simple-overlay id="scrolling" class="with-margin scrollable">
-        <p>This dialog scrolls internally.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-      </simple-overlay>
-
-      <button data-dialog="scrolling-2">scrolling 2</button>
-
-      <simple-overlay id="scrolling-2" class="with-margin full-height vertical">
-        <p>This dialog has a scrolling child.</p>
-        <div class="flex scrollable">
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        </div>
-      </simple-overlay>
-
-      <button data-dialog="multiple">multiple</button>
-
-      <simple-overlay id="multiple">
-        <p>click to open another overlay</p>
-        <p><button data-dialog="multiple2">click</button></p>
-      </simple-overlay>
-
-      <simple-overlay id="multiple2">
-        Hi!
-      </simple-overlay>
-
-      <button data-dialog="backdrop">backdrop</button>
-
+  <h3>Use <code>with-backdrop</code> to add a backdrop to your overlay. Tabbing will be trapped within the overlay.</h3>
+  <demo-snippet>
+    <template>
+      <button onclick="backdrop.open()">Overlay with backdrop</button>
       <simple-overlay id="backdrop" with-backdrop>
         <p>Hello world!</p>
-        <button>button</button>
-        <button>button</button>
-        <button>button</button>
+        <button>Button</button>
+        <button onclick="backdrop.close()">Close</button>
       </simple-overlay>
+    </template>
+  </demo-snippet>
 
-      <button data-dialog="autofocus">autofocus</button>
-
-      <simple-overlay id="autofocus">
+  <h3>The child with <code>autofocus</code> gets focused when opening the overlay.</h3>
+  <demo-snippet>
+    <template>
+      <button onclick="withAutofocus.open()">Overlay with autofocus child</button>
+      <simple-overlay id="withAutofocus">
         <p>Hello world!</p>
-        <button>cancel</button>
         <button autofocus>autofocus</button>
+        <button onclick="withAutofocus.close()">Close</button>
+      </simple-overlay>
+    </template>
+  </demo-snippet>
+
+  <h3>Multiple overlays can be opened.</h3>
+  <demo-snippet>
+    <template>
+      <button onclick="multiple.open()">Open first overlay</button>
+      <simple-overlay id="multiple" tabindex=-1>
+        <p>click to open another overlay</p>
+        <button onclick="multiple2.open()">Open second overlay</button>
+        <button onclick="multiple.close()">Close this</button>
+      </simple-overlay>
+      <simple-overlay id="multiple2" tabindex=-1>
+        <h2>Hi!</h2>
+        <button onclick="multiple2.close()">Close</button>
+      </simple-overlay>
+    </template>
+  </demo-snippet>
+
+  <h3>An element with <code>IronOverlayBehavior</code> can be scrollable or contain scrollable content.</h3>
+  <demo-snippet>
+    <template>
+      <style>
+        .with-margin {
+          margin: 24px 40px;
+        }
+        .scrollable {
+          max-height: 300px;
+          overflow: auto;
+        }
+      </style>
+      <button onclick="scrolling.open()">Scrolling overlay</button>
+
+      <simple-overlay id="scrolling" class="with-margin scrollable" tabindex=-1>
+        <h2>This dialog scrolls internally.</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <button onclick="scrolling.close()">Close</button>
       </simple-overlay>
 
-    </div>
+      <button onclick="scrolling2.open()">Scrolling content</button>
 
-    <script>
+      <simple-overlay id="scrolling2" class="with-margin" tabindex=-1>
+        <h2>This dialog has a scrolling child.</h2>
+        <div class="scrollable">
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
+            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </div>
+        <p>
+          <button onclick="scrolling2.close()">Close</button>
+        </p>
 
-      function clickHandler(e) {
-        if (!e.target.hasAttribute('data-dialog')) {
-          return;
-        }
+      </simple-overlay>
+    </template>
+  </demo-snippet>
 
-        var id = e.target.getAttribute('data-dialog');
-        var dialog = document.getElementById(id);
-        if (dialog) {
-          dialog.open();
-        }
-      }
+</body>
 
-    </script>
-
-  </body>
 </html>
diff --git a/dashboard-ui/bower_components/iron-overlay-behavior/iron-overlay-behavior.html b/dashboard-ui/bower_components/iron-overlay-behavior/iron-overlay-behavior.html
index 4132067ba..e9f4f0776 100644
--- a/dashboard-ui/bower_components/iron-overlay-behavior/iron-overlay-behavior.html
+++ b/dashboard-ui/bower_components/iron-overlay-behavior/iron-overlay-behavior.html
@@ -179,9 +179,12 @@ context. You should place this element as a child of `<body>` whenever possible.
       if (this._callOpenedWhenReady) {
         this._openedChanged();
       }
+      this._observer = Polymer.dom(this).observeNodes(this._onNodesChange);
     },
 
     detached: function() {
+      Polymer.dom(this).unobserveNodes(this._observer);
+      this._observer = null;
       this.opened = false;
       this._manager.trackBackdrop(this);
       this._manager.removeOverlay(this);
@@ -212,7 +215,7 @@ context. You should place this element as a child of `<body>` whenever possible.
     },
 
     /**
-     * Cancels the overlay. 
+     * Cancels the overlay.
      * @param {?Event} event The original event
      */
     cancel: function(event) {
@@ -239,7 +242,6 @@ context. You should place this element as a child of `<body>` whenever possible.
         this.removeAttribute('aria-hidden');
       } else {
         this.setAttribute('aria-hidden', 'true');
-        Polymer.dom(this).unobserveNodes(this._observer);
       }
 
       // wait to call after ready only if we're initially open
@@ -330,6 +332,8 @@ context. You should place this element as a child of `<body>` whenever possible.
 
       this._manager.addOverlay(this);
 
+      // Needed to calculate the size of the overlay so that transitions on its size
+      // will have the correct starting points.
       this._preparePositioning();
       this.fit();
       this._finishPositioning();
@@ -362,23 +366,24 @@ context. You should place this element as a child of `<body>` whenever possible.
     },
 
     _finishRenderOpened: function() {
-      // focus the child node with [autofocus]
+      // This ensures the overlay is visible before we set the focus
+      // (by calling _onIronResize -> refit).
+      this.notifyResize();
+      // Focus the child node with [autofocus]
       this._applyFocus();
 
-      this._observer = Polymer.dom(this).observeNodes(this.notifyResize);
       this.fire('iron-overlay-opened');
     },
 
     _finishRenderClosed: function() {
-      // hide the overlay and remove the backdrop
+      // Hide the overlay and remove the backdrop.
       this.resetFit();
       this.style.display = 'none';
       this._manager.removeOverlay(this);
 
-      this._focusedChild = null;
       this._applyFocus();
-
       this.notifyResize();
+
       this.fire('iron-overlay-closed', this.closingReason);
     },
 
@@ -391,8 +396,9 @@ context. You should place this element as a child of `<body>` whenever possible.
     _finishPositioning: function() {
       this.style.display = 'none';
       this.style.transform = this.style.webkitTransform = '';
-      // force layout to avoid application of transform
-      /** @suppress {suspiciousCode} */ this.offsetWidth;
+      // Force layout layout to avoid application of transform.
+      // Set offsetWidth to itself so that compilers won't remove it.
+      this.offsetWidth = this.offsetWidth;
       this.style.transition = this.style.webkitTransition = '';
     },
 
@@ -403,6 +409,7 @@ context. You should place this element as a child of `<body>` whenever possible.
         }
       } else {
         this._focusNode.blur();
+        this._focusedChild = null;
         this._manager.focusOverlay();
       }
     },
@@ -444,6 +451,17 @@ context. You should place this element as a child of `<body>` whenever possible.
       if (this.opened) {
         this.refit();
       }
+    },
+
+    /**
+     * @protected
+     * Will call notifyResize if overlay is opened.
+     * Can be overridden in order to avoid multiple observers on the same node.
+     */
+    _onNodesChange: function() {
+      if (this.opened) {
+        this.notifyResize();
+      }
     }
 
 /**
diff --git a/dashboard-ui/bower_components/iron-overlay-behavior/test/iron-overlay-behavior.html b/dashboard-ui/bower_components/iron-overlay-behavior/test/iron-overlay-behavior.html
index 51b5411d1..b6cfa2274 100644
--- a/dashboard-ui/bower_components/iron-overlay-behavior/test/iron-overlay-behavior.html
+++ b/dashboard-ui/bower_components/iron-overlay-behavior/test/iron-overlay-behavior.html
@@ -134,16 +134,28 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
         });
 
         test('open() triggers iron-resize', function(done) {
+          // Ignore the iron-resize on attached.
+          var callCount = -1;
           // Ignore iron-resize triggered by window resize.
-          var callCount = 0;
           window.addEventListener('resize', function() { callCount--; }, true);
           overlay.addEventListener('iron-resize', function() { callCount++; });
           runAfterOpen(overlay, function() {
-            assert.equal(callCount, 1, 'iron-resize should be called once');
+            assert.equal(callCount, 1, 'iron-resize called once before iron-overlay-opened');
             done();
           });
         });
 
+        test('close() triggers iron-resize', function(done) {
+          runAfterOpen(overlay, function() {
+            var spy = sinon.stub();
+            overlay.addEventListener('iron-resize', spy);
+            runAfterClose(overlay, function() {
+              assert.equal(spy.callCount, 1, 'iron-resize called once before iron-overlay-closed');
+              done();
+            });
+          });
+        });
+
         test('closed overlay does not trigger iron-resize when its content changes', function(done) {
           // Ignore iron-resize triggered by window resize.
           var callCount = 0;
@@ -158,13 +170,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
         test('open overlay triggers iron-resize when its content changes', function(done) {
           runAfterOpen(overlay, function() {
-            // Ignore iron-resize triggered by window resize.
-            var callCount = 0;
-            window.addEventListener('resize', function() { callCount--; }, true);
-            overlay.addEventListener('iron-resize', function() { callCount++; });
+            var spy = sinon.stub();
+            overlay.addEventListener('iron-resize', spy);
             Polymer.dom(overlay).appendChild(document.createElement('div'));
             overlay.async(function() {
-              assert.equal(callCount, 1, 'iron-resize should be called once');
+              assert.equal(spy.callCount, 1, 'iron-resize should be called once');
               done();
             }, 10);
           });
diff --git a/dashboard-ui/bower_components/paper-behaviors/.bower.json b/dashboard-ui/bower_components/paper-behaviors/.bower.json
index 2b04bf9f8..a6b333d33 100644
--- a/dashboard-ui/bower_components/paper-behaviors/.bower.json
+++ b/dashboard-ui/bower_components/paper-behaviors/.bower.json
@@ -45,7 +45,7 @@
     "tag": "v1.0.11",
     "commit": "e3c1ab0c72905b58fb4d9adc2921ea73b5c085a5"
   },
-  "_source": "git://github.com/PolymerElements/paper-behaviors.git",
+  "_source": "git://github.com/polymerelements/paper-behaviors.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/paper-behaviors"
+  "_originalSource": "polymerelements/paper-behaviors"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/paper-icon-button/.bower.json b/dashboard-ui/bower_components/paper-icon-button/.bower.json
index 3b51f24a8..42e403d11 100644
--- a/dashboard-ui/bower_components/paper-icon-button/.bower.json
+++ b/dashboard-ui/bower_components/paper-icon-button/.bower.json
@@ -36,14 +36,14 @@
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0"
   },
   "ignore": [],
-  "homepage": "https://github.com/polymerelements/paper-icon-button",
+  "homepage": "https://github.com/PolymerElements/paper-icon-button",
   "_release": "1.0.6",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.6",
     "commit": "35347d81939093cd2abe2783ac1b17fa57b7b303"
   },
-  "_source": "git://github.com/polymerelements/paper-icon-button.git",
+  "_source": "git://github.com/PolymerElements/paper-icon-button.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/paper-icon-button"
+  "_originalSource": "PolymerElements/paper-icon-button"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/paper-ripple/.bower.json b/dashboard-ui/bower_components/paper-ripple/.bower.json
index 157225ee7..2f654d71c 100644
--- a/dashboard-ui/bower_components/paper-ripple/.bower.json
+++ b/dashboard-ui/bower_components/paper-ripple/.bower.json
@@ -32,14 +32,14 @@
     "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0"
   },
   "ignore": [],
-  "homepage": "https://github.com/PolymerElements/paper-ripple",
+  "homepage": "https://github.com/polymerelements/paper-ripple",
   "_release": "1.0.5",
   "_resolution": {
     "type": "version",
     "tag": "v1.0.5",
     "commit": "d72e7a9a8ab518b901ed18dde492df3b87a93be5"
   },
-  "_source": "git://github.com/PolymerElements/paper-ripple.git",
+  "_source": "git://github.com/polymerelements/paper-ripple.git",
   "_target": "^1.0.0",
-  "_originalSource": "PolymerElements/paper-ripple"
+  "_originalSource": "polymerelements/paper-ripple"
 }
\ No newline at end of file
diff --git a/dashboard-ui/scripts/externalplayer.js b/dashboard-ui/scripts/externalplayer.js
index 66a25ccfd..77af6457b 100644
--- a/dashboard-ui/scripts/externalplayer.js
+++ b/dashboard-ui/scripts/externalplayer.js
@@ -7,97 +7,45 @@
         var profile = {};
 
         profile.MaxStreamingBitrate = bitrateSetting;
-        profile.MaxStaticBitrate = 40000000;
-        profile.MusicStreamingTranscodingBitrate = Math.min(bitrateSetting, 192000);
+        profile.MaxStaticBitrate = 100000000;
+        profile.MusicStreamingTranscodingBitrate = 192000;
 
         profile.DirectPlayProfiles = [];
 
         profile.DirectPlayProfiles.push({
-            Container: 'mkv,mov,mp4,m4v,wmv',
+            Container: 'm4v,3gp,ts,mpegts,mov,xvid,vob,mkv,wmv,asf,ogm,ogv,m2v,avi,mpg,mpeg,mp4,webm,wtv,dvr-ms',
             Type: 'Video'
         });
 
         profile.DirectPlayProfiles.push({
-            Container: 'aac,mp3,flac,wma',
+            Container: 'aac,mp3,mpa,wav,wma,mp2,ogg,oga,webma,ape,opus,flac',
             Type: 'Audio'
         });
 
         profile.TranscodingProfiles = [];
 
         profile.TranscodingProfiles.push({
-            Container: 'ts',
+            Container: 'mkv',
             Type: 'Video',
-            AudioCodec: 'aac',
+            AudioCodec: 'aac,mp3,ac3',
             VideoCodec: 'h264',
-            Context: 'Streaming',
-            Protocol: 'hls'
+            Context: 'Streaming'
         });
 
         profile.TranscodingProfiles.push({
-            Container: 'aac',
+            Container: 'mp3',
             Type: 'Audio',
-            AudioCodec: 'aac',
+            AudioCodec: 'mp3',
             Context: 'Streaming',
-            Protocol: 'hls'
+            Protocol: 'http'
         });
 
         profile.ContainerProfiles = [];
 
-        var audioConditions = [];
-
-        var maxAudioChannels = '6';
-
-        audioConditions.push({
-            Condition: 'LessThanEqual',
-            Property: 'AudioChannels',
-            Value: maxAudioChannels
-        });
-
         profile.CodecProfiles = [];
-        profile.CodecProfiles.push({
-            Type: 'Audio',
-            Conditions: audioConditions
-        });
-
-        profile.CodecProfiles.push({
-            Type: 'VideoAudio',
-            Codec: 'mp3',
-            Conditions: [{
-                Condition: 'LessThanEqual',
-                Property: 'AudioChannels',
-                Value: maxAudioChannels
-            }]
-        });
-
-        profile.CodecProfiles.push({
-            Type: 'VideoAudio',
-            Codec: 'aac',
-            Conditions: [
-                {
-                    Condition: 'LessThanEqual',
-                    Property: 'AudioChannels',
-                    Value: maxAudioChannels
-                }
-            ]
-        });
-
-        profile.CodecProfiles.push({
-            Type: 'Video',
-            Codec: 'h264',
-            Conditions: [
-            {
-                Condition: 'EqualsAny',
-                Property: 'VideoProfile',
-                Value: 'high|main|baseline|constrained baseline'
-            },
-            {
-                Condition: 'LessThanEqual',
-                Property: 'VideoLevel',
-                Value: '50'
-            }]
-        });
 
         // Subtitle profiles
+        // External vtt or burn in
         profile.SubtitleProfiles = [];
         profile.SubtitleProfiles.push({
             Format: 'srt',
@@ -139,6 +87,10 @@
             Format: 'idx',
             Method: 'Embed'
         });
+        profile.SubtitleProfiles.push({
+            Format: 'smi',
+            Method: 'Embed'
+        });
 
         profile.ResponseProfiles = [];