Project import generated by Copybara.
GitOrigin-RevId: 63746295f1a5ab5a619056791995793d65529e62
diff --git a/node_modules/mdl-ext/src/demo/accordion.html b/node_modules/mdl-ext/src/demo/accordion.html
new file mode 100644
index 0000000..6a65bda
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/accordion.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Accordion</title>
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+ <include src="../../src/accordion/snippets/accordion.html"></include>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Accordion';
+ }
+ });
+ }());
+</script>
+
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/assets/android-desktop.png b/node_modules/mdl-ext/src/demo/assets/android-desktop.png
new file mode 100644
index 0000000..f4408f5
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/assets/android-desktop.png
Binary files differ
diff --git a/node_modules/mdl-ext/src/demo/assets/favicon.png b/node_modules/mdl-ext/src/demo/assets/favicon.png
new file mode 100644
index 0000000..11ec0b5
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/assets/favicon.png
Binary files differ
diff --git a/node_modules/mdl-ext/src/demo/assets/ios-desktop.png b/node_modules/mdl-ext/src/demo/assets/ios-desktop.png
new file mode 100644
index 0000000..ac65454
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/assets/ios-desktop.png
Binary files differ
diff --git a/node_modules/mdl-ext/src/demo/assets/welcome_card.jpg b/node_modules/mdl-ext/src/demo/assets/welcome_card.jpg
new file mode 100644
index 0000000..8003e3a
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/assets/welcome_card.jpg
Binary files differ
diff --git a/node_modules/mdl-ext/src/demo/bordered-fields.html b/node_modules/mdl-ext/src/demo/bordered-fields.html
new file mode 100644
index 0000000..f1b2dae
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/bordered-fields.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Bordered Fields</title>
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+ <include src="../../src/bordered-fields/snippets/bordered-fields.html"></include>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Bordered Fields';
+ }
+ });
+ }());
+</script>
+
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/carousel.html b/node_modules/mdl-ext/src/demo/carousel.html
new file mode 100644
index 0000000..ddd66e0
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/carousel.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Carousel</title>
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+ <include src="../../src/carousel/snippets/carousel.html"></include>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Carousel';
+ }
+ });
+ }());
+</script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/chrome-ripple-issue.html b/node_modules/mdl-ext/src/demo/chrome-ripple-issue.html
new file mode 100644
index 0000000..363a295
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/chrome-ripple-issue.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Chrome Ripple Issue</title>
+ <!-- styles -->
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+ <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
+</head>
+<body>
+<!-- Always shows a header, even in smaller screens. -->
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+ <header class="mdl-layout__header">
+ <div class="mdl-layout__header-row">
+ <!-- Title -->
+ <span class="mdl-layout-title">Title</span>
+ <!-- Add spacer, to align navigation to the right -->
+ <div class="mdl-layout-spacer"></div>
+ <!-- Navigation. We hide it in small screens. -->
+ <nav class="mdl-navigation mdl-layout--large-screen-only">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ </header>
+ <div class="mdl-layout__drawer">
+ <span class="mdl-layout-title">Title</span>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ <main class="mdl-layout__content">
+ <div class="page-content" style="padding: 128px 0 0 32px"><!-- Your content goes here -->
+
+ <h2>Ripple Issue</h2>
+ <ul>
+ <li>What MDL Version: material-design-lite-1.2.1</li>
+ <li>What browser(s) is this bug affecting (including version)? Chrome Version 53.0.2785.116 (64-bit)</li>
+ <li>What OS (and version) are you using? OSX, 10.11.6</li>
+ <li>What are the steps to reproduce the bug?
+ <ol>
+ <li>Resize browser until a scrollbar appears</li>
+ <li>Scroll the menu button into view</li>
+ <li>It's important to scroll, at least some pixels, to see the effect of this issue</li>
+ <li>Click the button to open the menu</li>
+ <li>The position of the content changes position while button ripple is animatings</li>
+ <li>Click on a menu item to close the menu</li>
+ <li>The position of the content changes while menu ripple is animating</li>
+ </ol>
+ </li>
+ <li>What is the expected behavior? The position of the should stay fixed</li>
+ <li>What is the actual behavior? The position of the page content changes</li>
+ </ul>
+
+ <div style="margin: 32px 0 640px 32px;">
+ <p><strong>Click the button</strong></p>
+ <button id="demo-menu-lower-left" style="height:46px; width:46px;"
+ class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect">
+ <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>
+ </div>
+
+ <p>Some text</p>
+
+ </div>
+ </main>
+</div>
+<script src="https://code.getmdl.io/1.2.1/material.min.js" type="text/javascript" charset="utf-8"></script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/collapsible.html b/node_modules/mdl-ext/src/demo/collapsible.html
new file mode 100644
index 0000000..c685333
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/collapsible.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Menu Button</title>
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+ <include src="../../src/collapsible/snippets/collapsible.html"></include>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Collapsible';
+ }
+ });
+ }());
+</script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/color-themes.html b/node_modules/mdl-ext/src/demo/color-themes.html
new file mode 100644
index 0000000..390e0b3
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/color-themes.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Color Themes</title>
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+ <include src="../../src/color-themes/snippets/color-themes.html"></include>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Color Themes';
+ }
+ });
+ }());
+</script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/etc/buildpages.js b/node_modules/mdl-ext/src/demo/etc/buildpages.js
new file mode 100644
index 0000000..4671609
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/etc/buildpages.js
@@ -0,0 +1,15 @@
+'use strict';
+
+// TODO: Automate this. Use Gulp
+const posthtml = require('posthtml');
+const html = require('fs').readFileSync('partials/lightbox.html').toString();
+
+posthtml()
+ .use(require('posthtml-include')({ encoding: 'utf-8', root: 'partials/' }))
+ .process(html /*, options */)
+ .then(function(result) {
+ console.log(result.html);
+ })
+ .catch(function(error) {
+ console.error(error);
+ });
diff --git a/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.html b/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.html
new file mode 100644
index 0000000..cd4d22f
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>A basic MDL component</title>
+ <link rel="stylesheet" href="../node_modules/material-design-lite/material.css" />
+</head>
+<body>
+ <div id="mount">
+ <div class="mdl-basic mdl-js-basic mdl-js-ripple-effect">
+ <p>My basic MDL component</p>
+ </div>
+ </div>
+ <script type="text/javascript" src="../node_modules/material-design-lite/material.js" charset="utf-8"></script>
+ <script type="text/javascript" src="./mdl-basic-component.js" charset="utf-8"></script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.js b/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.js
new file mode 100644
index 0000000..05db9c1
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/etc/mdl-basic-component.js
@@ -0,0 +1,79 @@
+(function() {
+ 'use strict';
+
+ /**
+ * https://github.com/google/material-design-lite/issues/4205
+ * @constructor
+ * @param {Element} element The element that will be upgraded.
+ */
+ const MaterialBasic = function MaterialBasic(element) {
+ // Stores the element.
+ this.element_ = element;
+
+ console.log('***** ctor', this.element_.classList, 'data-upgraded', this.element_.getAttribute('data-upgraded'));
+
+ // Initialize instance.
+ this.init();
+ };
+ window['MaterialBasic'] = MaterialBasic;
+
+ /**
+ * Store constants in one place so they can be updated easily.
+ *
+ * @enum {string}
+ * @private
+ */
+ MaterialBasic.prototype.Constant_ = {
+ RIPPLE_COMPONENT: 'MaterialRipple'
+ };
+
+ /**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ *
+ * @enum {string}
+ * @private
+ */
+ MaterialBasic.prototype.CssClasses_ = {
+ IS_UPGRADED: 'is-upgraded',
+ JS_RIPPLE_EFFECT: 'mdl-js-ripple-effect',
+ JS_RIPPLE_EFFECT_IGNORE_EVENTS: 'mdl-js-ripple-effect--ignore-events'
+ };
+
+ /**
+ * Initialize component
+ */
+ MaterialBasic.prototype.init = function() {
+ console.log('***** init', this.element_.classList, 'data-upgraded', this.element_.getAttribute('data-upgraded'));
+
+ if (this.element_) {
+ if (this.element_.classList.contains(this.CssClasses_.JS_RIPPLE_EFFECT)) {
+ this.element_.classList.add(this.CssClasses_.JS_RIPPLE_EFFECT_IGNORE_EVENTS);
+ }
+
+ // Do the init required for this component to work
+
+ // Set upgraded flag
+ this.element_.classList.add(this.CssClasses_.IS_UPGRADED);
+ }
+ };
+
+ /**
+ * Downgrade component
+ * E.g remove listeners and clean up resources
+ */
+ MaterialBasic.prototype.mdlDowngrade_ = function() {
+ 'use strict';
+ };
+
+ // The component registers itself. It can assume componentHandler is available
+ // in the global scope.
+ /* eslint no-undef: 0 */
+ /* jshint undef:false */
+ componentHandler.register({
+ constructor: MaterialBasic,
+ classAsString: 'MaterialBasic',
+ cssClass: 'mdl-js-basic'
+ });
+})();
diff --git a/node_modules/mdl-ext/src/demo/etc/mdl-iframe-loader.js b/node_modules/mdl-ext/src/demo/etc/mdl-iframe-loader.js
new file mode 100644
index 0000000..abade92
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/etc/mdl-iframe-loader.js
@@ -0,0 +1,100 @@
+'use strict';
+
+/**
+ * Inject required CSS and JS into html fragment loaded into an <iframe>
+ * @type {{}}
+ */
+var mdlIframeLoader = {};
+(function(self) {
+
+ // The CSS and JS needed to run MDL snippets in an <iframe>
+
+ // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent
+ try {
+ new window.CustomEvent('test');
+ } catch(e) {
+ var CustomEvent = function(event, params) {
+ var evt;
+ params = params || {
+ bubbles: false,
+ cancelable: false,
+ detail: undefined
+ };
+
+ evt = document.createEvent('CustomEvent');
+ evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+ return evt;
+ };
+
+ CustomEvent.prototype = window.Event.prototype;
+ window.CustomEvent = CustomEvent; // expose definition to window
+ }
+
+ var docs = [
+ { 'type': 'css', 'id': 'font-roboto-css', 'src': 'https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' },
+ { 'type': 'css', 'id': 'material-icon-css', 'src': 'https://fonts.googleapis.com/icon?family=Material+Icons' },
+ { 'type': 'css', 'id': 'dialog-polyfill-css', 'src': 'demo/styles/dialog-polyfill.css' },
+ { 'type': 'css', 'id': 'material-css', 'src': 'https://code.getmdl.io/1.1.3/material.grey-orange.min.css' },
+ { 'type': 'css', 'id': 'mdlext-css', 'src': 'lib/mdl-ext-eqjs.css' },
+ { 'type': 'css', 'id': 'demo-css', 'src': 'demo/styles/demo.css' },
+ { 'type': 'js', 'id': 'dialog-polyfill-js', 'src': 'demo/scripts/dialog-polyfill.js' },
+ { 'type': 'js', 'id': 'material-js', 'src': 'https://code.getmdl.io/1.1.3/material.min.js' },
+ { 'type': 'js', 'id': 'eq-js', 'src': 'demo/scripts/eq.min.js' },
+ { 'type': 'js', 'id': 'mdlext-js', 'src': 'lib/index.js' }
+ ];
+
+ var joinOrigin = function(origin, src) {
+ return src.startsWith('http') ? src : origin.concat(src);
+ };
+
+ var loadResources = function( origin, loadCompleted ) {
+ var expectToLoad = docs.length;
+ var filesLoaded = 0;
+
+ for (var i = 0; i < docs.length; i++) {
+ if (document.getElementById(docs[i].id) === null) {
+ var el;
+ var src = joinOrigin(origin, docs[i].src);
+
+ if (docs[i].type === 'css') {
+ el = document.createElement('link');
+ el.href = src;
+ el.rel = 'stylesheet';
+ el.type = 'text/css';
+ }
+ else {
+ el = document.createElement('script');
+ el.src = src;
+ el.type = 'text/javascript';
+ el.async = false;
+ el.charset = 'utf-8';
+ }
+ el.id = docs[i].id;
+ el.onload = function () {
+ filesLoaded++;
+ if(filesLoaded >= expectToLoad) {
+ loadCompleted();
+ }
+ };
+ document.head.appendChild(el);
+ }
+ else {
+ expectToLoad--;
+ }
+ }
+ };
+
+ /**
+ * Inject required CSS and JS into html fragment loaded into an <iframe>
+ * @param origin path relative to root of this project, e.g. "../../../
+ */
+ self.load = function( origin ) {
+ loadResources( origin, function () {
+ if(window.componentHandler) {
+ window.componentHandler.upgradeDom();
+ }
+ });
+ };
+
+ return self;
+})(mdlIframeLoader);
diff --git a/node_modules/mdl-ext/src/demo/formatfield.html b/node_modules/mdl-ext/src/demo/formatfield.html
new file mode 100644
index 0000000..8e55b6a
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/formatfield.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Format Field</title>
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+ <include src="../../src/formatfield/snippets/formatfield.html"></include>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Formatted Fields';
+ }
+ });
+ }());
+</script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/grid.html b/node_modules/mdl-ext/src/demo/grid.html
new file mode 100644
index 0000000..1336b07
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/grid.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Grid</title>
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+ <include src="../../src/grid/snippets/grid.html"></include>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Grid';
+ }
+ });
+ }());
+</script>
+
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/include/_drawer.html b/node_modules/mdl-ext/src/demo/include/_drawer.html
new file mode 100644
index 0000000..b6bafd4
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_drawer.html
@@ -0,0 +1,81 @@
+<style>
+ /* Ugly CSS! Only for demo. */
+
+ #demo-drawer-accordion {
+ height: 100%;
+ }
+
+ #demo-drawer-accordion .mdlext-accordion__tab {
+ height: 64px;
+ min-height: 64px;
+ min-width: 64px;
+ padding-left: 16px;
+ }
+
+ .is-small-screen #demo-drawer-accordion .mdlext-accordion__tab {
+ height: 56px;
+ min-height: 56px;
+ min-width: 56px;
+ }
+
+ #demo-drawer-accordion .mdlext-accordion__tabpanel,
+ #demo-drawer-accordion .mdlext-accordion__tabpanel nav {
+ padding: 0;
+ }
+
+ #demo-drawer-accordion .mdlext-accordion__tabpanel .mdl-navigation__link {
+ color: rgba(255, 255, 255, 0.87);
+ }
+
+ #demo-drawer-accordion .mdlext-accordion__tabpanel .mdl-navigation__link:hover {
+ background-color: #212121;
+ }
+
+</style>
+
+
+<aside class="mdl-layout__drawer">
+
+ <ul id="demo-drawer-accordion"
+ class="mdlext-accordion mdlext-js-accordion mdlext-accordion--vertical mdlext-js-ripple-effect mdlext-js-animation-effect mdlext-dark-color-theme"
+ aria-multiselectable="false">
+
+ <li class="mdlext-accordion__panel">
+ <header class="mdlext-accordion__tab" aria-expanded="true">
+ <span class="mdlext-accordion__tab__caption">MDL Extensions</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel">
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="accordion.html">Accordion</a>
+ <a class="mdl-navigation__link" href="bordered-fields.html">Bordered Fields</a>
+ <a class="mdl-navigation__link" href="collapsible.html">Collapsible</a>
+ <a class="mdl-navigation__link" href="color-themes.html">Color Themes</a>
+ <a class="mdl-navigation__link" href="formatfield.html">Formatted Fields</a>
+ <a class="mdl-navigation__link" href="grid.html">Grid</a>
+ <a class="mdl-navigation__link" href="carousel.html">Image Carousel</a>
+ <a class="mdl-navigation__link" href="lightboard.html">Lightboard</a>
+ <a class="mdl-navigation__link" href="lightbox.html">Lightbox</a>
+ <a class="mdl-navigation__link" href="menu-button.html">Menu Button</a>
+ <a class="mdl-navigation__link" href="selectfield.html">Selectfield</a>
+ </nav>
+ </section>
+ </li>
+ <li class="mdlext-accordion__panel">
+ <header class="mdlext-accordion__tab">
+ <span class="mdlext-accordion__tab__caption">Sticky headers</span>
+ <i class="mdlext-aria-toggle-material-icons"></i>
+ </header>
+ <section class="mdlext-accordion__tabpanel">
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="sticky-header.html">Sticky Header I</a>
+ <a class="mdl-navigation__link" href="sticky-header-ii.html">Sticky Header II</a>
+ <a class="mdl-navigation__link" href="sticky-header-iii.html">Sticky Header III</a>
+ <a class="mdl-navigation__link" href="sticky-header-iv.html">Sticky Header IV</a>
+ <a class="mdl-navigation__link" href="sticky-header-v.html">Sticky Header V</a>
+ <a class="mdl-navigation__link" href="sticky-header-vi.html">Sticky Header VI</a>
+ </nav>
+ </section>
+ </li>
+ </ul>
+</aside>
diff --git a/node_modules/mdl-ext/src/demo/include/_head.html b/node_modules/mdl-ext/src/demo/include/_head.html
new file mode 100644
index 0000000..1f582ce
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_head.html
@@ -0,0 +1,26 @@
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
+<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+<title>Material Design Lite Extensions</title>
+
+<!-- Fallback to homescreen for Chrome <39 on Android -->
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="application-name" content="Material Design Lite Extensions">
+<link rel="icon" sizes="192x192" href="./assets/android-desktop.png">
+
+<!-- Add to homescreen for Safari on iOS -->
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black">
+<meta name="apple-mobile-web-app-title" content="Material Design Lite Extensions">
+<link rel="apple-touch-icon" href="./assets/ios-desktop.png">
+
+<link rel="shortcut icon" href="./assets/favicon.png">
+
+<!-- styles -->
+<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+<link rel="stylesheet" href="styles/dialog-polyfill.css">
+<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
+<link rel="stylesheet" href="../lib/mdl-ext-eqjs.min.css">
+<link rel="stylesheet" href="./styles/demo.css">
diff --git a/node_modules/mdl-ext/src/demo/include/_header-row.html b/node_modules/mdl-ext/src/demo/include/_header-row.html
new file mode 100644
index 0000000..4bd3add
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_header-row.html
@@ -0,0 +1,24 @@
+<div class="mdl-layout__header-row">
+
+ <!-- Title -->
+ <span id="header-title" class="mdl-layout-title">Title goes here</span>
+
+ <!-- Add spacer, to align navigation to the right -->
+ <div class="mdl-layout-spacer"></div>
+
+ <label id="go-home" class="mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
+ <a href="index.html">
+ <i class="material-icons">home</i>
+ </a>
+ </label>
+
+ <button id="header-menu" 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="header-menu">
+ <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>
+</div>
diff --git a/node_modules/mdl-ext/src/demo/include/_header.html b/node_modules/mdl-ext/src/demo/include/_header.html
new file mode 100644
index 0000000..b11f9bf
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_header.html
@@ -0,0 +1,3 @@
+<header class="mdl-layout__header mdlext-layout__sticky-header mdlext-js-sticky-header">
+ <include src="include/_header-row.html"></include>
+</header>
diff --git a/node_modules/mdl-ext/src/demo/include/_index.html b/node_modules/mdl-ext/src/demo/include/_index.html
new file mode 100644
index 0000000..1945e28
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_index.html
@@ -0,0 +1,54 @@
+<h5 class="mdlext-demo-header">mdl-ext</h5>
+<p>Material Design Lite Ext (MDLEXT).
+ Components built with the
+ <a href="https://github.com/google/material-design-lite">Google Material Design Lite</a>
+ framework.
+</p>
+
+<h3>Components provided</h3>
+
+<h4>Accordion</h4>
+<p>A WAI-ARIA friendly accordion component with vertcial or horizontal layout.</p>
+
+<h4>Bordered Fields</h4>
+<p>The Material Design Lite Ext (MDLEXT) bordered fieldscomponent demonstrates
+ how you can create your own theme of MDL text fields.
+</p>
+
+<h4>Collapsible</h4>
+<p>A collapsible is a component to mark expandable and collapsible regions.</p>
+
+<h4>Color Themes</h4>
+<p>MDL provides only one color theme. Many designs require more than one theme, e.g. a dark theme and a light theme.</p>
+
+<h4>Grid</h4>
+<p>A responsive grid based on element queries in favour of media queries.</p>
+
+<h4>Image Carousel</h4>
+<p>A responsive, WAI-ARIA friendly, image carousel.</p>
+
+<h4>Lightboard</h4>
+<p>A lightboard is a translucent surface illuminated from behind, used for
+ situations where a shape laid upon the surface needs to be seen with high contrast.
+ In the "old days" of photography photograpers used a lightboard to get a quick
+ view of, sorting and organizing their slides.
+</p>
+
+<h4>Lightbox</h4>
+<p>A lightbox displays an image filling the screen, and dimming out the rest of
+ the web page. It acts as a modal dialog using the <code><dialog></code>
+ element as a container for the lightbox.
+</p>
+
+<h4>Menu Button</h4>
+<p>A WAI-ARIA friendly menu button component/widget with roles, attributes and behavior in accordance with the
+ specification given in WAI-ARIA Authoring Practices, section 2.20.
+</p>
+
+<h4>Selectfield</h4>
+<p>The Material Design Lite Ext (MDLEXT) select field component is an enhanced version
+ of the standard [HTML <code><select></code> element.
+</p>
+
+<h4>Sticky Header</h4>
+<p>A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.</p>
diff --git a/node_modules/mdl-ext/src/demo/include/_interactive-body-filler.html b/node_modules/mdl-ext/src/demo/include/_interactive-body-filler.html
new file mode 100644
index 0000000..e8103c1
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_interactive-body-filler.html
@@ -0,0 +1,52 @@
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Sticky Header';
+ }
+ });
+
+ var btn = document.querySelector('#a-button');
+ btn.addEventListener('click', function() {
+
+ var content = document.querySelector('.mdl-layout__content');
+ content.insertAdjacentHTML('beforeend',
+ '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor lorem eu faucibus aliquet. ' +
+ 'In vehicula risus turpis, ut dictum ante tristique et. Aenean ultricies sed urna ac condimentum. ' +
+ 'Vivamus nisl tortor, ultricies at aliquam nec, semper at purus. Duis purus tortor, laoreet eget ante a, ' +
+ 'rhoncus vulputate lorem. Pellentesque id enim ut massa posuere vestibulum sit amet eget elit. Nulla quis ' +
+ 'euismod massa, id varius dui. Ut congue urna non ipsum placerat rhoncus. Curabitur a sollicitudin diam. ' +
+ 'Donec id lectus eleifend, blandit magna a, mattis turpis. Fusce non tellus pulvinar, finibus dui ac, ' +
+ 'porttitor ante. Vestibulum et commodo purus, et tincidunt nulla. Suspendisse blandit sodales est, nec ' +
+ 'luctus sem sollicitudin in. Etiam libero tellus, porttitor sit amet velit a, commodo sodales neque.</p>' +
+ '<p>Maecenas id sodales lacus, eu ullamcorper nibh. Sed posuere consectetur nunc nec dapibus. Nam tristique ' +
+ 'ex vel urna dapibus luctus. Phasellus eget mi ac tortor aliquet auctor non vitae risus. Cum sociis natoque ' +
+ 'penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec et egestas elit. Sed id lorem enim.' +
+ 'Aliquam maximus enim sed tincidunt pretium.</p>' +
+ '<p>Phasellus dictum, leo vel bibendum efficitur, mauris metus volutpat magna, at pharetra libero dolor id ' +
+ 'tellus. Mauris convallis tempus libero, sit amet suscipit massa maximus a. Duis ut dignissim nulla, nec ' +
+ 'gravida purus. Proin eget erat justo. Phasellus congue sapien eleifend sapien mollis, nec molestie eros ' +
+ 'efficitur. Pellentesque et diam at risus ultrices pharetra nec in augue. Phasellus vestibulum, lacus a ' +
+ 'dictum vulputate, mauris nisi dictum massa, in venenatis felis sapien a nunc. Integer mi tellus, imperdiet ' +
+ 'vel dignissim sed, fringilla ut urna.</p>' +
+ '<p>Suspendisse potenti. Pellentesque eget suscipit orci, at tempor est. Cras sed sollicitudin nunc. Donec ' +
+ 'convallis, arcu a euismod cursus, arcu odio pharetra lectus, vitae feugiat diam massa vestibulum metus. In ' +
+ 'odio tellus, consectetur eget est et, vehicula hendrerit dolor. Ut ultrices nulla tellus, sit amet ' +
+ 'consectetur dolor aliquet quis. Etiam non fermentum dolor.</p>' +
+ '<p>Donec accumsan risus in lectus sollicitudin ' +
+ 'vulputate. Praesent condimentum a leo at interdum. Donec ' +
+ 'pharetra congue erat a accumsan. Aliquam gravida ' +
+ 'lobortis mi, id elementum sapien ultrices vel. ' +
+ 'Pellentesque habitant morbi tristique senectus et ' +
+ 'netus et malesuada fames ac turpis egestas. Proin ' +
+ 'consequat enim orci, nec blandit lorem luctus ut. ' +
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
+ 'Etiam pretium nunc non metus gravida, nec tincidunt ' +
+ 'tortor volutpat. Aliquam erat volutpat. Curabitur ' +
+ 'varius purus ac auctor pharetra.</p>');
+ });
+
+ }());
+</script>
diff --git a/node_modules/mdl-ext/src/demo/include/_scripts.html b/node_modules/mdl-ext/src/demo/include/_scripts.html
new file mode 100644
index 0000000..97011e6
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/include/_scripts.html
@@ -0,0 +1,5 @@
+<script src="scripts/dialog-polyfill.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6"></script>
+<script src="scripts/eq.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="https://code.getmdl.io/1.2.1/material.min.js" type="text/javascript" charset="utf-8"></script>
+<script src="../lib/mdl-ext.min.js" type="text/javascript" charset="utf-8"></script>
diff --git a/node_modules/mdl-ext/src/demo/index.html b/node_modules/mdl-ext/src/demo/index.html
new file mode 100644
index 0000000..3aa4e01
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions</title>
+</head>
+
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+ <include src="include/_index.html"></include>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Material Design Lite Extensions';
+ }
+ });
+ }());
+</script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/lightboard.html b/node_modules/mdl-ext/src/demo/lightboard.html
new file mode 100644
index 0000000..93adf1c
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/lightboard.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Lightboard</title>
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+ <include src="../../src/lightboard/snippets/lightboard.html"></include>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Lightboard';
+ }
+ });
+ }());
+</script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/lightbox.html b/node_modules/mdl-ext/src/demo/lightbox.html
new file mode 100644
index 0000000..6b774bf
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/lightbox.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Lightbox</title>
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+ <include src="../../src/lightbox/snippets/lightbox.html"></include>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Lightbox';
+ }
+ });
+ }());
+</script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/menu-button.html b/node_modules/mdl-ext/src/demo/menu-button.html
new file mode 100644
index 0000000..0ea10e4
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/menu-button.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Menu Button</title>
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+ <include src="../../src/menu-button/snippets/menu-button.html"></include>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Menu Button';
+ }
+ });
+ }());
+</script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/resize-observer.html b/node_modules/mdl-ext/src/demo/resize-observer.html
new file mode 100644
index 0000000..905db53
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/resize-observer.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Resize Observer</title>
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+ <include src="../../src/utils/snippets/resize-observer.html"></include>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Resize Observer';
+ }
+ });
+ }());
+</script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/selectfield.html b/node_modules/mdl-ext/src/demo/selectfield.html
new file mode 100644
index 0000000..089b5d9
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/selectfield.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Selectfield</title>
+</head>
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+ <include src="../../src/selectfield/snippets/selectfield.html"></include>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<script>
+ (function() {
+ 'use strict';
+ document.addEventListener('DOMContentLoaded', function() {
+ var title = document.querySelector('#header-title');
+ if(title) {
+ title.innerHTML = 'Selectfield';
+ }
+ });
+ }());
+</script>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/sticky-header-ii.html b/node_modules/mdl-ext/src/demo/sticky-header-ii.html
new file mode 100644
index 0000000..794c54e
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/sticky-header-ii.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Sticky Header</title>
+</head>
+
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+
+ <main id="mount" class="mdl-layout__content">
+
+ <h5>Sticky Header, Drawer (not fixed)</h5>
+
+ <p>A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.</p>
+ <p>The header should auto-hide, i.e. hiding the header automatically when a user starts scrolling down the page
+ and bringing the header back when a user might need it: they reach the bottom of the page or start scrolling up.</p>
+ <p class="mdl-typography--subhead">To see how the sticky header works, click the button a few
+ times to add content. Next scroll the page up and down.</p>
+ <button id="a-button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+ Click to add more content
+ </button>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<include src="include/_interactive-body-filler.html"></include>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/sticky-header-iii.html b/node_modules/mdl-ext/src/demo/sticky-header-iii.html
new file mode 100644
index 0000000..e6da56b
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/sticky-header-iii.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Sticky Header</title>
+</head>
+
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+
+ <include src="include/_header.html"></include>
+
+ <main id="mount" class="mdl-layout__content">
+
+ <h5>Sticky Header, No Drawer</h5>
+
+ <p>A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.</p>
+ <p>The header should auto-hide, i.e. hiding the header automatically when a user starts scrolling down the page
+ and bringing the header back when a user might need it: they reach the bottom of the page or start scrolling up.</p>
+ <p class="mdl-typography--subhead">To see how the sticky header works, click the button a few
+ times to add content. Next scroll the page up and down.</p>
+ <button id="a-button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+ Click to add more content
+ </button>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<include src="include/_interactive-body-filler.html"></include>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/sticky-header-iv.html b/node_modules/mdl-ext/src/demo/sticky-header-iv.html
new file mode 100644
index 0000000..2b91ae3
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/sticky-header-iv.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Sticky Header</title>
+</head>
+
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+
+ <header class="mdl-layout__header mdl-layout__header--waterfall mdlext-layout__sticky-header mdlext-js-sticky-header">
+ <include src="include/_header-row.html"></include>
+
+ <div class="mdl-layout__header-row">
+ <div class="mdl-layout-spacer"></div>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ </header>
+
+ <include src="include/_drawer.html"></include>
+
+ <main id="mount" class="mdl-layout__content">
+
+ <h5>Sticky Header, Waterfall, Fixed Drawer</h5>
+
+ <p>A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.</p>
+ <p>The header should auto-hide, i.e. hiding the header automatically when a user starts scrolling down the page
+ and bringing the header back when a user might need it: they reach the bottom of the page or start scrolling up.</p>
+ <p class="mdl-typography--subhead">To see how the sticky header works, click the button a few
+ times to add content. Next scroll the page up and down.</p>
+ <button id="a-button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+ Click to add more content
+ </button>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<include src="include/_interactive-body-filler.html"></include>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/sticky-header-v.html b/node_modules/mdl-ext/src/demo/sticky-header-v.html
new file mode 100644
index 0000000..99027e4
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/sticky-header-v.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Sticky Header</title>
+</head>
+
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+
+ <header class="mdl-layout__header mdl-layout__header--waterfall mdlext-layout__sticky-header mdlext-js-sticky-header">
+ <include src="include/_header-row.html"></include>
+
+ <div class="mdl-layout__header-row">
+ <div class="mdl-layout-spacer"></div>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ </header>
+
+ <include src="include/_drawer.html"></include>
+
+ <main id="mount" class="mdl-layout__content">
+
+ <h5>Sticky Header, Waterfall, Drawer (not fixed)</h5>
+
+ <p>A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.</p>
+ <p>The header should auto-hide, i.e. hiding the header automatically when a user starts scrolling down the page
+ and bringing the header back when a user might need it: they reach the bottom of the page or start scrolling up.</p>
+ <p class="mdl-typography--subhead">To see how the sticky header works, click the button a few
+ times to add content. Next scroll the page up and down.</p>
+ <button id="a-button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+ Click to add more content
+ </button>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<include src="include/_interactive-body-filler.html"></include>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/sticky-header-vi.html b/node_modules/mdl-ext/src/demo/sticky-header-vi.html
new file mode 100644
index 0000000..840b8bc
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/sticky-header-vi.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Sticky Header</title>
+</head>
+
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+
+ <header class="mdl-layout__header mdl-layout__header--waterfall mdlext-layout__sticky-header mdlext-js-sticky-header">
+ <include src="include/_header-row.html"></include>
+
+ <div class="mdl-layout__header-row">
+ <div class="mdl-layout-spacer"></div>
+ <nav class="mdl-navigation">
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ <a class="mdl-navigation__link" href="">Link</a>
+ </nav>
+ </div>
+ </header>
+
+ <main id="mount" class="mdl-layout__content">
+
+ <h5>Sticky Header, Waterfall, No Drawer</h5>
+
+ <p>A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.</p>
+ <p>The header should auto-hide, i.e. hiding the header automatically when a user starts scrolling down the page
+ and bringing the header back when a user might need it: they reach the bottom of the page or start scrolling up.</p>
+ <p class="mdl-typography--subhead">To see how the sticky header works, click the button a few
+ times to add content. Next scroll the page up and down.</p>
+ <button id="a-button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+ Click to add more content
+ </button>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<include src="include/_interactive-body-filler.html"></include>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/sticky-header.html b/node_modules/mdl-ext/src/demo/sticky-header.html
new file mode 100644
index 0000000..6e7080a
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/sticky-header.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <include src="include/_head.html"></include>
+ <title>Material Design Lite Extensions - Sticky Header</title>
+</head>
+
+<body>
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
+ <include src="include/_header.html"></include>
+ <include src="include/_drawer.html"></include>
+ <main id="mount" class="mdl-layout__content">
+
+ <h5>Sticky Header, Fixed Drawer Example</h5>
+
+ <p>A sticky header makes site navigation easily accessible anywhere on the page and saves content space at the same.</p>
+ <p>The header should auto-hide, i.e. hiding the header automatically when a user starts scrolling down the page
+ and bringing the header back when a user might need it: they reach the bottom of the page or start scrolling up.</p>
+ <p class="mdl-typography--subhead">To see how the sticky header works, click the button a few
+ times to add content. Next scroll the page up and down.</p>
+ <button id="a-button" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
+ Click to add more content
+ </button>
+ </main>
+</div>
+<include src="include/_scripts.html"></include>
+<include src="include/_interactive-body-filler.html"></include>
+</body>
+</html>
diff --git a/node_modules/mdl-ext/src/demo/styles/demo.css b/node_modules/mdl-ext/src/demo/styles/demo.css
new file mode 100644
index 0000000..28151ef
--- /dev/null
+++ b/node_modules/mdl-ext/src/demo/styles/demo.css
@@ -0,0 +1,69 @@
+html {
+ box-sizing: border-box;
+}
+*, *::before, *::after, input[type="search"] {
+ box-sizing: inherit;
+}
+
+body {
+ overflow: hidden; /* Needed by Chrome OSX and IOS to avoid "double" scrollbars when a menu opens */
+}
+
+#mount {
+ padding-left: 12px;
+ padding-right: 8px;
+ height:100%;
+}
+
+#mount > *:first-child:not(h5) {
+ padding-top: 16px;
+}
+
+.is-small-screen #mount {
+ padding-left: 4px;
+ padding-right: 4px;
+}
+
+/* Rules for sizing the icon */
+/* Not provided in "material-design-icons/iconfont/material-icon.css" */
+
+.material-icons.md-12 {
+ font-size: 12px;
+ }
+.material-icons.md-16 {
+ font-size: 16px;
+}
+.material-icons.md-18 {
+ font-size: 18px;
+ }
+.material-icons.md-24 {
+ font-size: 24px;
+ }
+.material-icons.md-32 {
+ font-size: 24px;
+ }
+.material-icons.md-36 {
+ font-size: 36px;
+ }
+.material-icons.md-48 {
+ font-size: 48px;
+ }
+.material-icons.md-56 {
+ font-size: 56px;
+}
+
+/* Rules for using icons as black on a light background. */
+.material-icons.md-dark {
+ color: rgba(0, 0, 0, 0.54);
+}
+.material-icons.md-dark.md-inactive {
+ color: rgba(0, 0, 0, 0.26);
+ }
+
+/* Rules for using icons as white on a dark background. */
+.material-icons.md-light {
+ color: rgba(255, 255, 255, 1);
+}
+.material-icons.md-light.md-inactive {
+ color: rgba(255, 255, 255, 0.3);
+ }
