diff --git a/README.md b/README.md
index 053ff85a9..a345c5cff 100644
--- a/README.md
+++ b/README.md
@@ -19,6 +19,75 @@ Sass is an important part of Ember-paper. Using sass you can override default va
 All the components and styles are ready to use in your application templates.
 Navigate through the docs to understand how to use each component.
 
+# Content Security Policy
+
+This is no longer used in newer ember-cli apps. However, here are the instructions if you need them. Ember Paper uses fonts from Google Fonts, so the URL to them has to be white listed. You can set this by adding to the Content Security Policy defined in config/environment.js like so:
+
+```js
+ENV.contentSecurityPolicy = {
+  'default-src': "'none'",
+  'script-src': "'self' 'unsafe-inline'",
+  'style-src': "'self' 'unsafe-inline' https://fonts.googleapis.com",
+  'font-src': "'self' fonts.gstatic.com",
+  'connect-src': "'self'",
+  'img-src': "'self' data:",
+  'media-src': "'self'"
+};
+```
+
+You can find out more information on the CSP addon page here. We also need to allow data: in img-src because of a current hack in paper-button styles.
+
+# Options
+
+Ember-paper supports the following options, specified in your ember-cli-build.js file:
+
+```
+ENV['autoprefixer'] (defaults to { browsers: ['last 2 versions'] })
+```
+
+By default ember-paper will run autoprefixer on your styles. This option allows you to override the default autoprefixer target.
+
+```
+ENV['ember-paper'].insertFontLinks (defaults to true)
+```
+
+Consuming apps can specify this option to prevent the insertion of google fonts links inside the head tag. This is especially useful if you want to include your own fonts.
+
+```
+ENV['ember-paper'].whitelist (defaults to [])
+```
+
+Consuming apps can optionally specify this array to only include these components into the build. You should use either whitelist or blacklist, not both.
+
+```js
+ENV['ember-paper'] = {
+    whitelist: [
+        'paper-card',
+        'paper-tooltip',
+        'paper-button'
+    ]
+};
+```
+
+The dependencies of the specified components will be included as well. This is the recommended approach, blacklist is harder to get right.
+
+```
+ENV['ember-paper'].blacklist (defaults to [])
+```
+
+Consuming apps can optionally specify this array to exclude these components from the build.
+
+```
+ENV['ember-paper'] = {
+    blacklist: [
+        'paper-card',
+        'paper-item'
+    ]
+};
+```
+
+This only bans from the build the specified components, not its dependencies. whitelist is easier to maintain.
+
 ## Resources
 
 - Contributors can often be found on the [#e-paper channel on discord](https://discord.gg/zT3asNS).
diff --git a/app/styles/ember-paper.scss b/app/styles/ember-paper.scss
index f5b831cd0..96b06494c 100644
--- a/app/styles/ember-paper.scss
+++ b/app/styles/ember-paper.scss
@@ -68,4 +68,4 @@
 
 // some overrides that are needed for ember-paper (avoid if possible)
 @import './overrides/paper-autocomplete';
-
+@import './overrides/paper-tabs';
diff --git a/app/styles/overrides/paper-tabs.scss b/app/styles/overrides/paper-tabs.scss
new file mode 100644
index 000000000..5b2002684
--- /dev/null
+++ b/app/styles/overrides/paper-tabs.scss
@@ -0,0 +1,7 @@
+md-tabs.md-primary > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > a.md-tab:not([disabled]).md-active {
+  color: paper-var(--primary-contrast);
+}
+
+md-tabs.md-primary > md-tabs-wrapper > md-tabs-canvas > md-pagination-wrapper > a.md-tab:not([disabled]) {
+  color: paper-var(--primary-100);
+}
diff --git a/ember-cli-build.js b/ember-cli-build.js
index 8e1ebdaa4..678c7403b 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -1,19 +1,12 @@
 'use strict';
+
 const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
 
 module.exports = function(defaults) {
-  let app = new EmberAddon(defaults, {
-    // Add options here
+  const app = new EmberAddon(defaults, {
     snippetPaths: ['tests/dummy/snippets'],
     snippetSearchPaths: ['tests/dummy/app']
   });
 
-  /*
-    This build file specifies the options for the dummy test app of this
-    addon, located in `/tests/dummy`
-    This build file does *not* influence how the addon or the app using it
-    behave. You most likely want to be modifying `./index.js` or app's build file
-  */
-
   return app.toTree();
 };
diff --git a/package-lock.json b/package-lock.json
index 9fe547b66..f72028736 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -340,6 +340,12 @@
         "@babel/types": "^7.7.4"
       }
     },
+    "@babel/helper-validator-identifier": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
+      "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
+      "dev": true
+    },
     "@babel/helper-wrap-function": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.7.4.tgz",
@@ -590,6 +596,24 @@
         "@babel/plugin-syntax-nullish-coalescing-operator": "^7.7.4"
       }
     },
+    "@babel/plugin-proposal-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-73/G7QoRoeNkLZFxsoCCvlg4ezE4eM+57PnOqgaPOozd5myfj7p0muD1mRVJvbUWbOzD+q3No2bWbaKy+DJ8DA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4",
+        "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
+          "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
+          "dev": true
+        }
+      }
+    },
     "@babel/plugin-proposal-object-rest-spread": {
       "version": "7.7.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.7.7.tgz",
@@ -618,6 +642,194 @@
         "@babel/plugin-syntax-optional-chaining": "^7.7.4"
       }
     },
+    "@babel/plugin-proposal-private-methods": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.10.4.tgz",
+      "integrity": "sha512-wh5GJleuI8k3emgTg5KkJK6kHNsGEr0uBTDBuQUBJwckk9xs1ez79ioheEVVxMLyPscB0LfkbVHslQqIzWV6Bw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.10.4",
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
+          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.4"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.5.tgz",
+          "integrity": "sha512-3vXxr3FEW7E7lJZiWQ3bM4+v/Vyr9C+hpolQ8BGFr9Y8Ri2tFLWTixmwKBafDujO1WVah4fhZBeU1bieKdghig==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.5",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-create-class-features-plugin": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz",
+          "integrity": "sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-function-name": "^7.10.4",
+            "@babel/helper-member-expression-to-functions": "^7.10.5",
+            "@babel/helper-optimise-call-expression": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/helper-replace-supers": "^7.10.4",
+            "@babel/helper-split-export-declaration": "^7.10.4"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
+          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.4",
+            "@babel/template": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
+          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.5.tgz",
+          "integrity": "sha512-HiqJpYD5+WopCXIAbQDG0zye5XYVvcO9w/DHp5GsaGkRUaamLj2bEtu6i8rnGGprAhHM3qidCMgp71HF4endhA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.5"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz",
+          "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
+          "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
+          "dev": true
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz",
+          "integrity": "sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.10.4",
+            "@babel/helper-optimise-call-expression": "^7.10.4",
+            "@babel/traverse": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz",
+          "integrity": "sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/highlight": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
+          "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.4",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.5.tgz",
+          "integrity": "sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
+          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/parser": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.5.tgz",
+          "integrity": "sha512-yc/fyv2gUjPqzTz0WHeRJH2pv7jA9kA7mBX2tXl/x5iOE81uaVPuGPtaYk7wmkx4b67mQ7NqI8rmT2pF47KYKQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/generator": "^7.10.5",
+            "@babel/helper-function-name": "^7.10.4",
+            "@babel/helper-split-export-declaration": "^7.10.4",
+            "@babel/parser": "^7.10.5",
+            "@babel/types": "^7.10.5",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.5.tgz",
+          "integrity": "sha512-ixV66KWfCI6GKoA/2H9v6bQdbfXEwwpOdQ8cRvb4F+eyvhlaHxWFMQB4+3d9QFJXZsiiiqVrewNV0DFEQpyT4Q==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.4",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "lodash": {
+          "version": "4.17.19",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+          "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        }
+      }
+    },
     "@babel/plugin-proposal-unicode-property-regex": {
       "version": "7.7.7",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.7.7.tgz",
@@ -635,6 +847,23 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
+    "@babel/plugin-syntax-class-properties": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.10.4.tgz",
+      "integrity": "sha512-GCSBF7iUle6rNugfURwNmCGG3Z/2+opxAMLs1nND4bhEG5PuxTIggDBoeYYSujAlLtsupzOHYJQgPS3pivwXIA==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
+          "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
+          "dev": true
+        }
+      }
+    },
     "@babel/plugin-syntax-decorators": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.8.3.tgz",
@@ -675,6 +904,23 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
+    "@babel/plugin-syntax-numeric-separator": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+      "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
+          "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
+          "dev": true
+        }
+      }
+    },
     "@babel/plugin-syntax-object-rest-spread": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.7.4.tgz",
@@ -1047,6 +1293,23 @@
         "@babel/plugin-syntax-typescript": "^7.7.4"
       }
     },
+    "@babel/plugin-transform-unicode-escapes": {
+      "version": "7.10.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.10.4.tgz",
+      "integrity": "sha512-y5XJ9waMti2J+e7ij20e+aH+fho7Wb7W8rNuu72aKRwCHFqQdhkdU2lo3uZ9tQuboEJcUFayXdARhcxLQ3+6Fg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.10.4"
+      },
+      "dependencies": {
+        "@babel/helper-plugin-utils": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
+          "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
+          "dev": true
+        }
+      }
+    },
     "@babel/plugin-transform-unicode-regex": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.7.4.tgz",
@@ -1123,6 +1386,19 @@
         "semver": "^5.5.0"
       }
     },
+    "@babel/preset-modules": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.3.tgz",
+      "integrity": "sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+        "@babel/plugin-transform-dotall-regex": "^7.4.4",
+        "@babel/types": "^7.4.4",
+        "esutils": "^2.0.2"
+      }
+    },
     "@babel/runtime": {
       "version": "7.8.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.8.4.tgz",
@@ -1193,9 +1469,9 @@
       },
       "dependencies": {
         "minimist": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
           "dev": true
         }
       }
@@ -2069,62 +2345,57 @@
         "fastq": "^1.6.0"
       }
     },
-    "@simple-dom/document": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@simple-dom/document/-/document-1.4.0.tgz",
-      "integrity": "sha512-/RUeVH4kuD3rzo5/91+h4Z1meLSLP66eXqpVAw/4aZmYozkeqUkMprq0znL4psX/adEed5cBgiNJcfMz/eKZLg==",
-      "dev": true,
-      "requires": {
-        "@simple-dom/interface": "^1.4.0"
-      }
-    },
-    "@simple-dom/interface": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@simple-dom/interface/-/interface-1.4.0.tgz",
-      "integrity": "sha512-l5qumKFWU0S+4ZzMaLXFU8tQZsicHEMEyAxI5kDFGhJsRqDwe0a7/iPA/GdxlGyDKseQQAgIz5kzU7eXTrlSpA==",
-      "dev": true
-    },
-    "@simple-dom/parser": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@simple-dom/parser/-/parser-1.4.0.tgz",
-      "integrity": "sha512-TNjDkOehueRIKr1df416qk9ELj+qWuVVJNIT25y1aZg3pQvxv4UPGrgaDFte7dsWBTbF3V8NYPNQ5FDUZQ8Wlg==",
-      "dev": true,
-      "requires": {
-        "@simple-dom/interface": "^1.4.0"
-      }
-    },
-    "@simple-dom/serializer": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@simple-dom/serializer/-/serializer-1.4.0.tgz",
-      "integrity": "sha512-mI1yRahsVs8atXLiQksineDsFEFqeG7RHwnnBTDOK6inbzl4tZQgjR+Z7edjgIJq5j5RhZvwPI6EuCji9B3eQw==",
-      "dev": true,
-      "requires": {
-        "@simple-dom/interface": "^1.4.0"
-      }
-    },
-    "@simple-dom/void-map": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@simple-dom/void-map/-/void-map-1.4.0.tgz",
-      "integrity": "sha512-VDhLEyVCbuhOBBgHol9ShzIv9O8UCzdXeH4FoXu2DOcu/nnvTjLTck+BgXsCLv5ynDiUdoqsREEVFnoyPpFKVw==",
-      "dev": true
-    },
     "@sindresorhus/is": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
       "integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==",
       "dev": true
     },
+    "@types/body-parser": {
+      "version": "1.19.0",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.0.tgz",
+      "integrity": "sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==",
+      "dev": true,
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
     "@types/broccoli-plugin": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@types/broccoli-plugin/-/broccoli-plugin-1.3.0.tgz",
       "integrity": "sha512-SLk4/hFc2kGvgwNFrpn2O1juxFOllcHAywvlo7VwxfExLzoz1GGJ0oIZCwj5fwSpvHw4AWpZjJ1fUvb62PDayQ=="
     },
+    "@types/chai": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-4.2.11.tgz",
+      "integrity": "sha512-t7uW6eFafjO+qJ3BIV2gGUyZs27egcNRkUdalkud+Qa3+kg//f129iuOFivHDXQ+vnU3fDXuwgv0cqMCbcE8sw==",
+      "dev": true
+    },
+    "@types/chai-as-promised": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@types/chai-as-promised/-/chai-as-promised-7.1.3.tgz",
+      "integrity": "sha512-FQnh1ohPXJELpKhzjuDkPLR2BZCAqed+a6xV4MI/T3XzHfd2FlarfUGUdZYgqYe8oxkYn0fchHEeHfHqdZ96sg==",
+      "dev": true,
+      "requires": {
+        "@types/chai": "*"
+      }
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
       "integrity": "sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==",
       "dev": true
     },
+    "@types/connect": {
+      "version": "3.4.33",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.33.tgz",
+      "integrity": "sha512-2+FrkXY4zllzTNfJth7jOqEHC+enpLeGslEhpnTAkg21GkRrWV4SsAtqchtT4YS9/nODBU2/ZfsBY2X4J/dX7A==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/estree": {
       "version": "0.0.41",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.41.tgz",
@@ -2135,6 +2406,29 @@
       "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
       "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g=="
     },
+    "@types/express": {
+      "version": "4.17.7",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.7.tgz",
+      "integrity": "sha512-dCOT5lcmV/uC2J9k0rPafATeeyz+99xTt54ReX11/LObZgfzJqZNcW27zGhYyX+9iSEGXGt5qLPwRSvBZcLvtQ==",
+      "dev": true,
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "*",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.17.8",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.8.tgz",
+      "integrity": "sha512-1SJZ+R3Q/7mLkOD9ewCBDYD2k0WyZQtWYqF/2VvoNN2/uhI49J9CDN4OAm+wGMA0DbArA4ef27xl4+JwMtGggw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
     "@types/fs-extra": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-5.1.0.tgz",
@@ -2153,6 +2447,12 @@
         "@types/node": "*"
       }
     },
+    "@types/mime": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.2.tgz",
+      "integrity": "sha512-4kPlzbljFcsttWEq6aBW0OZe6BDajAmyvr2xknBG92tejQnvdGtT9+kXSZ580DqpxY9qG2xeQVF9Dq0ymUTo5Q==",
+      "dev": true
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -2163,6 +2463,18 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-13.1.2.tgz",
       "integrity": "sha512-B8emQA1qeKerqd1dmIsQYnXi+mmAzTB7flExjmy5X1aVAKFNNNDubkavwR13kR6JnpeLp3aLoJhwn9trWPAyFQ=="
     },
+    "@types/qs": {
+      "version": "6.9.3",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.3.tgz",
+      "integrity": "sha512-7s9EQWupR1fTc2pSMtXRQ9w9gLOcrJn+h7HOXw4evxyvVqMi4f+q7d2tnFe3ng3SNHjtK+0EzGMGFUQX4/AQRA==",
+      "dev": true
+    },
+    "@types/range-parser": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.3.tgz",
+      "integrity": "sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==",
+      "dev": true
+    },
     "@types/rimraf": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@types/rimraf/-/rimraf-2.0.3.tgz",
@@ -2172,6 +2484,16 @@
         "@types/node": "*"
       }
     },
+    "@types/serve-static": {
+      "version": "1.13.4",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.4.tgz",
+      "integrity": "sha512-jTDt0o/YbpNwZbQmE/+2e+lfjJEJJR0I3OFaKQKPWkASkCoW3i6fsUnqudSMcNAfbtmADGu8f4MV4q+GqULmug==",
+      "dev": true,
+      "requires": {
+        "@types/express-serve-static-core": "*",
+        "@types/mime": "*"
+      }
+    },
     "@types/symlink-or-copy": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@types/symlink-or-copy/-/symlink-or-copy-1.2.0.tgz",
@@ -3984,16 +4306,25 @@
       }
     },
     "bower-config": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/bower-config/-/bower-config-1.4.1.tgz",
-      "integrity": "sha1-hf2d82fCuNu9DKpMXyutQM2Ewsw=",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/bower-config/-/bower-config-1.4.3.tgz",
+      "integrity": "sha512-MVyyUk3d1S7d2cl6YISViwJBc2VXCkxF5AUFykvN0PQj5FsUiMNSgAYTso18oRFfyZ6XEtjrgg9MAaufHbOwNw==",
       "dev": true,
       "requires": {
         "graceful-fs": "^4.1.3",
+        "minimist": "^0.2.1",
         "mout": "^1.0.0",
-        "optimist": "^0.6.1",
         "osenv": "^0.1.3",
-        "untildify": "^2.1.0"
+        "untildify": "^2.1.0",
+        "wordwrap": "^0.0.3"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.2.1.tgz",
+          "integrity": "sha512-GY8fANSrTMfBVfInqJAY41QkOM+upUTytK1jZ0c8+3HdHrJxBJ3rF5i9moClXTE8uUSnUo8cAsCoxDXvSY4DHg==",
+          "dev": true
+        }
       }
     },
     "bower-endpoint-parser": {
@@ -4039,62 +4370,165 @@
       }
     },
     "broccoli": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/broccoli/-/broccoli-3.2.0.tgz",
-      "integrity": "sha512-n58yqAbV2Zbg+HXmBGBOUoDOgbCM0hMJtqvnPDF89Jwk3ZBVhD5/UKW0diY6l3DbB5+j92NCDQVd9HqO+WYFYA==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/broccoli/-/broccoli-3.4.2.tgz",
+      "integrity": "sha512-OZ0QEyL2i08xJWwhg9Fe0x5IScjBur986QRWrj5mAyHRZqF1nShEz01BPFoLt6L2tqJT0gyZsf8nfUvm8CcJgA==",
       "dev": true,
       "requires": {
+        "@types/chai": "^4.2.9",
+        "@types/chai-as-promised": "^7.1.2",
+        "@types/express": "^4.17.2",
         "ansi-html": "^0.0.7",
         "broccoli-node-info": "^2.1.0",
         "broccoli-slow-trees": "^3.0.1",
-        "broccoli-source": "^1.1.0",
-        "commander": "^2.15.1",
+        "broccoli-source": "^3.0.0",
+        "commander": "^4.1.1",
         "connect": "^3.6.6",
         "console-ui": "^3.0.4",
         "esm": "^3.2.4",
-        "findup-sync": "^2.0.0",
-        "handlebars": "^4.0.11",
+        "findup-sync": "^4.0.0",
+        "handlebars": "^4.7.3",
         "heimdalljs": "^0.2.6",
         "heimdalljs-logger": "^0.1.9",
         "https": "^1.0.0",
-        "mime-types": "^2.1.19",
-        "promise.prototype.finally": "^3.1.0",
+        "mime-types": "^2.1.26",
         "resolve-path": "^1.4.0",
-        "rimraf": "^2.6.2",
+        "rimraf": "^3.0.2",
         "sane": "^4.0.0",
-        "tmp": "0.0.33",
-        "tree-sync": "^1.2.2",
+        "tmp": "^0.0.33",
+        "tree-sync": "^2.0.0",
         "underscore.string": "^3.2.2",
-        "watch-detector": "^0.1.0"
+        "watch-detector": "^1.0.0"
       },
       "dependencies": {
-        "rsvp": {
-          "version": "4.8.5",
-          "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
-          "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==",
+        "broccoli-source": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/broccoli-source/-/broccoli-source-3.0.0.tgz",
+          "integrity": "sha512-G4Zc8HngZIdASyQOiz/9H/0Gjc2F02EFwhWF4wiueaI+/FBrM9Ixj6Prno/1aiLIYcN0JvRC3oytN9uOVonTww==",
+          "dev": true,
+          "requires": {
+            "broccoli-node-api": "^1.6.0"
+          }
+        },
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
           "dev": true
         },
-        "tmp": {
-          "version": "0.0.33",
-          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
-          "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
           "dev": true,
           "requires": {
-            "os-tmpdir": "~1.0.2"
+            "ms": "^2.1.1"
           }
         },
-        "watch-detector": {
-          "version": "0.1.0",
-          "resolved": "https://registry.npmjs.org/watch-detector/-/watch-detector-0.1.0.tgz",
-          "integrity": "sha512-vfzMMfpjQc88xjETwl2HuE6PjEuxCBeyC4bQmqrHrofdfYWi/4mEJklYbNgSzpqM9PxubsiPIrE5SZ1FDyiQ2w==",
+        "fs-tree-diff": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fs-tree-diff/-/fs-tree-diff-2.0.1.tgz",
+          "integrity": "sha512-x+CfAZ/lJHQqwlD64pYM5QxWjzWhSjroaVsr8PW831zOApL55qPibed0c+xebaLWVr2BnHFoHdrwOv8pzt8R5A==",
           "dev": true,
           "requires": {
-            "heimdalljs-logger": "^0.1.9",
-            "quick-temp": "^0.1.8",
-            "rsvp": "^4.7.0",
-            "semver": "^5.4.1",
-            "silent-error": "^1.1.0"
-          }
+            "@types/symlink-or-copy": "^1.2.0",
+            "heimdalljs-logger": "^0.1.7",
+            "object-assign": "^4.1.0",
+            "path-posix": "^1.0.0",
+            "symlink-or-copy": "^1.1.8"
+          }
+        },
+        "handlebars": {
+          "version": "4.7.6",
+          "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.6.tgz",
+          "integrity": "sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5",
+            "neo-async": "^2.6.0",
+            "source-map": "^0.6.1",
+            "uglify-js": "^3.1.4",
+            "wordwrap": "^1.0.0"
+          }
+        },
+        "mime-db": {
+          "version": "1.44.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
+          "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
+          "dev": true
+        },
+        "mime-types": {
+          "version": "2.1.27",
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
+          "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
+          "dev": true,
+          "requires": {
+            "mime-db": "1.44.0"
+          }
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "tmp": {
+          "version": "0.0.33",
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+          "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+          "dev": true,
+          "requires": {
+            "os-tmpdir": "~1.0.2"
+          }
+        },
+        "tree-sync": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tree-sync/-/tree-sync-2.1.0.tgz",
+          "integrity": "sha512-OLWW+Nd99NOM53aZ8ilT/YpEiOo6mXD3F4/wLbARqybSZ3Jb8IxHK5UGVbZaae0wtXAyQshVV+SeqVBik+Fbmw==",
+          "dev": true,
+          "requires": {
+            "debug": "^4.1.1",
+            "fs-tree-diff": "^2.0.1",
+            "mkdirp": "^0.5.5",
+            "quick-temp": "^0.1.5",
+            "walk-sync": "^0.3.3"
+          }
+        },
+        "wordwrap": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+          "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
+          "dev": true
         }
       }
     },
@@ -4510,7 +4944,6 @@
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/broccoli-flatiron/-/broccoli-flatiron-0.1.3.tgz",
       "integrity": "sha512-dD/4ck+LKOLTBzFlxP2zX7fhWt1TFMVR/88b9/wd8LkAHUyAzWs1vBah94ObSvajYGZ7ic+XvMXw+OhmvdlYoQ==",
-      "dev": true,
       "requires": {
         "broccoli-plugin": "^1.3.0",
         "mkdirp": "^0.5.1"
@@ -4618,45 +5051,6 @@
         }
       }
     },
-    "broccoli-module-normalizer": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/broccoli-module-normalizer/-/broccoli-module-normalizer-1.3.0.tgz",
-      "integrity": "sha512-0idZCOtdVG6xXoQ36Psc1ApMCr3lW5DB+WEAOEwHcUoESIBHzwcRPQTxheGIjZ5o0hxpsRYAUH5x0ErtNezbrQ==",
-      "dev": true,
-      "requires": {
-        "broccoli-plugin": "^1.3.0",
-        "merge-trees": "^1.0.1",
-        "rimraf": "^2.6.2",
-        "symlink-or-copy": "^1.1.8"
-      },
-      "dependencies": {
-        "merge-trees": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/merge-trees/-/merge-trees-1.0.1.tgz",
-          "integrity": "sha1-zL5nRWl4f53vF/1G5lJfVwC70j4=",
-          "dev": true,
-          "requires": {
-            "can-symlink": "^1.0.0",
-            "fs-tree-diff": "^0.5.4",
-            "heimdalljs": "^0.2.1",
-            "heimdalljs-logger": "^0.1.7",
-            "rimraf": "^2.4.3",
-            "symlink-or-copy": "^1.0.0"
-          }
-        }
-      }
-    },
-    "broccoli-module-unification-reexporter": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/broccoli-module-unification-reexporter/-/broccoli-module-unification-reexporter-1.0.0.tgz",
-      "integrity": "sha512-HTi9ua520M20aBZomaiBopsSt3yjL7J/paR3XPjieygK7+ShATBiZdn0B+ZPiniBi4I8JuMn1q0fNFUevtP//A==",
-      "dev": true,
-      "requires": {
-        "broccoli-plugin": "^1.3.0",
-        "mkdirp": "^0.5.1",
-        "walk-sync": "^0.3.2"
-      }
-    },
     "broccoli-node-api": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/broccoli-node-api/-/broccoli-node-api-1.7.0.tgz",
@@ -4812,9 +5206,9 @@
       }
     },
     "broccoli-slow-trees": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/broccoli-slow-trees/-/broccoli-slow-trees-3.0.1.tgz",
-      "integrity": "sha1-m/Kp4vjrPtOj8qvd6YjaQ3zNybQ=",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/broccoli-slow-trees/-/broccoli-slow-trees-3.1.0.tgz",
+      "integrity": "sha512-FRI7mRTk2wjIDrdNJd6znS7Kmmne4VkAkl8Ix1R/VoePFMD0g0tEl671xswzFqaRjpT9Qu+CC4hdXDLDJBuzMw==",
       "dev": true,
       "requires": {
         "heimdalljs": "^0.2.1"
@@ -4899,59 +5293,6 @@
         }
       }
     },
-    "broccoli-static-compiler": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/broccoli-static-compiler/-/broccoli-static-compiler-0.1.4.tgz",
-      "integrity": "sha1-cT0Y8I6zExUwV1oMWtKVG7oQr0E=",
-      "dev": true,
-      "requires": {
-        "broccoli-kitchen-sink-helpers": "^0.2.0",
-        "broccoli-writer": "^0.1.1",
-        "mkdirp": "^0.3.5"
-      },
-      "dependencies": {
-        "broccoli-kitchen-sink-helpers": {
-          "version": "0.2.9",
-          "resolved": "https://registry.npmjs.org/broccoli-kitchen-sink-helpers/-/broccoli-kitchen-sink-helpers-0.2.9.tgz",
-          "integrity": "sha1-peCYbtjXb7WYS2jD8EUNOpbjbsw=",
-          "dev": true,
-          "requires": {
-            "glob": "^5.0.10",
-            "mkdirp": "^0.5.1"
-          },
-          "dependencies": {
-            "mkdirp": {
-              "version": "0.5.1",
-              "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-              "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-              "dev": true,
-              "requires": {
-                "minimist": "0.0.8"
-              }
-            }
-          }
-        },
-        "glob": {
-          "version": "5.0.15",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
-          "integrity": "sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=",
-          "dev": true,
-          "requires": {
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "2 || 3",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "mkdirp": {
-          "version": "0.3.5",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.3.5.tgz",
-          "integrity": "sha1-3j5fiWHIjHh+4TaN+EmsRBPsqNc=",
-          "dev": true
-        }
-      }
-    },
     "broccoli-stew": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/broccoli-stew/-/broccoli-stew-1.6.0.tgz",
@@ -5132,16 +5473,6 @@
         }
       }
     },
-    "broccoli-writer": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/broccoli-writer/-/broccoli-writer-0.1.1.tgz",
-      "integrity": "sha1-1NcaqPKvvGejhmuRotp5CEuWqy0=",
-      "dev": true,
-      "requires": {
-        "quick-temp": "^0.1.0",
-        "rsvp": "^3.0.6"
-      }
-    },
     "brorand": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/brorand/-/brorand-1.1.0.tgz",
@@ -5618,9 +5949,9 @@
       }
     },
     "cli-spinners": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.2.0.tgz",
-      "integrity": "sha512-tgU3fKwzYjiLEQgPMD9Jt+JjHVL9kW93FiIMX/l7rivvOD4/LL0Mf7gda3+4U2KJBloybwgj5KEoQgGRioMiKQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/cli-spinners/-/cli-spinners-2.3.0.tgz",
+      "integrity": "sha512-Xs2Hf2nzrvJMFKimOR7YR0QwZ8fc0u98kdtwN1eNAZzNQgH3vK2pXzff6GJtKh7S5hoJ87ECiAiZFS2fb5Ii2w==",
       "dev": true
     },
     "cli-table": {
@@ -5689,6 +6020,18 @@
       "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=",
       "dev": true
     },
+    "clipboard": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.6.tgz",
+      "integrity": "sha512-g5zbiixBRk/wyKakSwCKd7vQXDjFnAMGHoEyBogG/bw9kTD9GvdAvaoRR1ALcEzt3pVKxZR0pViekPMIS0QyGg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "good-listener": "^1.2.2",
+        "select": "^1.1.2",
+        "tiny-emitter": "^2.0.0"
+      }
+    },
     "clone": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
@@ -5787,9 +6130,9 @@
       },
       "dependencies": {
         "mime-db": {
-          "version": "1.43.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
-          "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==",
+          "version": "1.44.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
+          "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
           "dev": true
         }
       }
@@ -5869,9 +6212,9 @@
       },
       "dependencies": {
         "make-dir": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.0.2.tgz",
-          "integrity": "sha512-rYKABKutXa6vXTXhoV18cBE7PaewPXHe/Bdq4v+ZLMhxbWApkFFplT0LcbMW+6BbjnQXzZ/sAvSE/JdguApG5w==",
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
+          "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
           "dev": true,
           "requires": {
             "semver": "^6.0.0"
@@ -6021,9 +6364,9 @@
           }
         },
         "safe-buffer": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz",
-          "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==",
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
           "dev": true
         },
         "string-width": {
@@ -6074,11 +6417,12 @@
           }
         },
         "through2": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz",
-          "integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==",
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.2.tgz",
+          "integrity": "sha512-enaDQ4MUyP2W6ZyT6EsMzqBPZaM/avg8iuo+l2d3QCs0J+6RaqkHV/2/lOwDTueBHeJ/2LG9lrLW3d5rWPucuQ==",
           "dev": true,
           "requires": {
+            "inherits": "^2.0.4",
             "readable-stream": "2 || 3"
           }
         }
@@ -6419,6 +6763,13 @@
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
+    "delegate": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
+      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==",
+      "dev": true,
+      "optional": true
+    },
     "delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -7005,20 +7356,20 @@
       }
     },
     "ember-cli": {
-      "version": "3.16.0",
-      "resolved": "https://registry.npmjs.org/ember-cli/-/ember-cli-3.16.0.tgz",
-      "integrity": "sha512-he5uLPapZT3kZpItseUlAoe05qurFx46e3AcS1jLqzsZW0a5tQosX3yhsEAWQaNZaJr1izMpmdPx4kF5/UN6pw==",
+      "version": "3.17.0",
+      "resolved": "https://registry.npmjs.org/ember-cli/-/ember-cli-3.17.0.tgz",
+      "integrity": "sha512-0GVer7AyV/g8hclbD64FmsNkULQ0N1pEQytB+utuJl8c6NFU4EUMJL7NyM/NRd7rzupMMR1jwzhxYTCY50ZRcg==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.7.7",
+        "@babel/core": "^7.8.4",
         "@babel/plugin-transform-modules-amd": "^7.7.5",
         "amd-name-resolver": "^1.3.1",
         "babel-plugin-module-resolver": "^4.0.0",
         "bower-config": "^1.4.1",
         "bower-endpoint-parser": "0.2.2",
-        "broccoli": "^3.2.0",
+        "broccoli": "^3.3.3",
         "broccoli-amd-funnel": "^2.0.1",
-        "broccoli-babel-transpiler": "^7.3.0",
+        "broccoli-babel-transpiler": "^7.4.0",
         "broccoli-builder": "^0.18.14",
         "broccoli-concat": "^3.7.4",
         "broccoli-config-loader": "^1.0.1",
@@ -7028,8 +7379,6 @@
         "broccoli-funnel-reducer": "^1.0.0",
         "broccoli-merge-trees": "^3.0.2",
         "broccoli-middleware": "^2.1.1",
-        "broccoli-module-normalizer": "^1.3.0",
-        "broccoli-module-unification-reexporter": "^1.0.0",
         "broccoli-slow-trees": "^3.0.1",
         "broccoli-source": "^3.0.0",
         "broccoli-stew": "^3.0.0",
@@ -7039,7 +7388,7 @@
         "ci-info": "^2.0.0",
         "clean-base-url": "^1.0.0",
         "compression": "^1.7.4",
-        "configstore": "^5.0.0",
+        "configstore": "^5.0.1",
         "console-ui": "^3.1.1",
         "core-object": "^3.1.5",
         "dag-map": "^2.0.2",
@@ -7074,25 +7423,24 @@
         "json-stable-stringify": "^1.0.1",
         "leek": "0.0.24",
         "lodash.template": "^4.5.0",
-        "markdown-it": "^9.1.0",
-        "markdown-it-terminal": "0.1.0",
+        "markdown-it": "^10.0.0",
+        "markdown-it-terminal": "0.1.1",
         "minimatch": "^3.0.4",
         "morgan": "^1.9.1",
         "nopt": "^3.0.6",
-        "npm-package-arg": "^6.1.1",
+        "npm-package-arg": "^8.0.0",
         "p-defer": "^3.0.0",
         "portfinder": "^1.0.25",
         "promise-map-series": "^0.3.0",
-        "promise.prototype.finally": "^3.1.2",
+        "promise.hash.helper": "^1.0.2",
         "quick-temp": "^0.1.8",
-        "resolve": "^1.12.0",
+        "resolve": "^1.15.1",
         "resolve-package-path": "^2.0.0",
-        "rsvp": "^4.8.5",
         "sane": "^4.1.0",
         "semver": "^6.3.0",
         "silent-error": "^1.1.1",
         "sort-package-json": "^1.39.1",
-        "symlink-or-copy": "^1.2.0",
+        "symlink-or-copy": "^1.3.1",
         "temp": "0.9.1",
         "testem": "^3.0.1",
         "tiny-lr": "^1.1.1",
@@ -7103,94 +7451,319 @@
         "yam": "^1.0.0"
       },
       "dependencies": {
-        "babel-plugin-module-resolver": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/babel-plugin-module-resolver/-/babel-plugin-module-resolver-4.0.0.tgz",
-          "integrity": "sha512-3pdEq3PXALilSJ6dnC4wMWr0AZixHRM4utpdpBR9g5QG7B7JwWyukQv7a9hVxkbGFl+nQbrHDqqQOIBtTXTP/Q==",
+        "@babel/code-frame": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
+          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
           "dev": true,
           "requires": {
-            "find-babel-config": "^1.2.0",
-            "glob": "^7.1.6",
-            "pkg-up": "^3.1.0",
-            "reselect": "^4.0.0",
-            "resolve": "^1.13.1"
+            "@babel/highlight": "^7.10.4"
           }
         },
-        "broccoli-plugin": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/broccoli-plugin/-/broccoli-plugin-2.1.0.tgz",
-          "integrity": "sha512-ElE4caljW4slapyEhSD9jU9Uayc8SoSABWdmY9SqbV8DHNxU6xg1jJsPcMm+cXOvggR3+G+OXAYQeFjWVnznaw==",
-          "dev": true,
-          "requires": {
-            "promise-map-series": "^0.2.1",
-            "quick-temp": "^0.1.3",
-            "rimraf": "^2.3.4",
-            "symlink-or-copy": "^1.1.8"
+        "@babel/core": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.5.tgz",
+          "integrity": "sha512-O34LQooYVDXPl7QWCdW9p4NR+QlzOr7xShPPJz8GsuCU3/8ua/wqTr7gmnxXv+WBESiGU/G5s16i6tUvHkNb+w==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/generator": "^7.10.5",
+            "@babel/helper-module-transforms": "^7.10.5",
+            "@babel/helpers": "^7.10.4",
+            "@babel/parser": "^7.10.5",
+            "@babel/template": "^7.10.4",
+            "@babel/traverse": "^7.10.5",
+            "@babel/types": "^7.10.5",
+            "convert-source-map": "^1.7.0",
+            "debug": "^4.1.0",
+            "gensync": "^1.0.0-beta.1",
+            "json5": "^2.1.2",
+            "lodash": "^4.17.19",
+            "resolve": "^1.3.2",
+            "semver": "^5.4.1",
+            "source-map": "^0.5.0"
           },
           "dependencies": {
-            "promise-map-series": {
-              "version": "0.2.3",
-              "resolved": "https://registry.npmjs.org/promise-map-series/-/promise-map-series-0.2.3.tgz",
-              "integrity": "sha1-wtN3r8kyU/a9A9u3d1XriKsgqEc=",
-              "dev": true,
-              "requires": {
-                "rsvp": "^3.0.14"
-              }
-            },
-            "rsvp": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.6.2.tgz",
-              "integrity": "sha512-OfWGQTb9vnwRjwtA2QwpG2ICclHC3pgXZO5xt8H2EfgDquO0qVdSb5T88L4qJVAEugbS56pAuV4XZM58UX8ulw==",
+            "semver": {
+              "version": "5.7.1",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+              "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
               "dev": true
             }
           }
         },
-        "broccoli-source": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/broccoli-source/-/broccoli-source-3.0.0.tgz",
-          "integrity": "sha512-G4Zc8HngZIdASyQOiz/9H/0Gjc2F02EFwhWF4wiueaI+/FBrM9Ixj6Prno/1aiLIYcN0JvRC3oytN9uOVonTww==",
+        "@babel/generator": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.5.tgz",
+          "integrity": "sha512-3vXxr3FEW7E7lJZiWQ3bM4+v/Vyr9C+hpolQ8BGFr9Y8Ri2tFLWTixmwKBafDujO1WVah4fhZBeU1bieKdghig==",
           "dev": true,
           "requires": {
-            "broccoli-node-api": "^1.6.0"
+            "@babel/types": "^7.10.5",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
           }
         },
-        "broccoli-stew": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/broccoli-stew/-/broccoli-stew-3.0.0.tgz",
-          "integrity": "sha512-NXfi+Vas24n3Ivo21GvENTI55qxKu7OwKRnCLWXld8MiLiQKQlWIq28eoARaFj0lTUFwUa4jKZeA7fW9PiWQeg==",
+        "@babel/helper-function-name": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
+          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
           "dev": true,
           "requires": {
-            "broccoli-debug": "^0.6.5",
-            "broccoli-funnel": "^2.0.0",
-            "broccoli-merge-trees": "^3.0.1",
-            "broccoli-persistent-filter": "^2.3.0",
-            "broccoli-plugin": "^2.1.0",
-            "chalk": "^2.4.1",
-            "debug": "^4.1.1",
-            "ensure-posix-path": "^1.0.1",
-            "fs-extra": "^8.0.1",
-            "minimatch": "^3.0.4",
-            "resolve": "^1.11.1",
-            "rsvp": "^4.8.5",
-            "symlink-or-copy": "^1.2.0",
-            "walk-sync": "^1.1.3"
-          },
-          "dependencies": {
-            "chalk": {
-              "version": "2.4.2",
-              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-              "dev": true,
-              "requires": {
-                "ansi-styles": "^3.2.1",
-                "escape-string-regexp": "^1.0.5",
-                "supports-color": "^5.3.0"
-              }
-            },
-            "walk-sync": {
-              "version": "1.1.4",
-              "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-1.1.4.tgz",
-              "integrity": "sha512-nowc9thB/Jg0KW4TgxoRjLLYRPvl3DB/98S89r4ZcJqq2B0alNcKDh6pzLkBSkPMzRSMsJghJHQi79qw0YWEkA==",
+            "@babel/helper-get-function-arity": "^7.10.4",
+            "@babel/template": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
+          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.5.tgz",
+          "integrity": "sha512-HiqJpYD5+WopCXIAbQDG0zye5XYVvcO9w/DHp5GsaGkRUaamLj2bEtu6i8rnGGprAhHM3qidCMgp71HF4endhA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.5"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz",
+          "integrity": "sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.10.5.tgz",
+          "integrity": "sha512-4P+CWMJ6/j1W915ITJaUkadLObmCRRSC234uctJfn/vHrsLNxsR8dwlcXv9ZhJWzl77awf+mWXSZEKt5t0OnlA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "^7.10.4",
+            "@babel/helper-replace-supers": "^7.10.4",
+            "@babel/helper-simple-access": "^7.10.4",
+            "@babel/helper-split-export-declaration": "^7.10.4",
+            "@babel/template": "^7.10.4",
+            "@babel/types": "^7.10.5",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz",
+          "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz",
+          "integrity": "sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.10.4",
+            "@babel/helper-optimise-call-expression": "^7.10.4",
+            "@babel/traverse": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz",
+          "integrity": "sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz",
+          "integrity": "sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helpers": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.4.tgz",
+          "integrity": "sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.10.4",
+            "@babel/traverse": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/highlight": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
+          "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.4",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "2.4.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+              }
+            }
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.5.tgz",
+          "integrity": "sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ==",
+          "dev": true
+        },
+        "@babel/template": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
+          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/parser": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.5.tgz",
+          "integrity": "sha512-yc/fyv2gUjPqzTz0WHeRJH2pv7jA9kA7mBX2tXl/x5iOE81uaVPuGPtaYk7wmkx4b67mQ7NqI8rmT2pF47KYKQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/generator": "^7.10.5",
+            "@babel/helper-function-name": "^7.10.4",
+            "@babel/helper-split-export-declaration": "^7.10.4",
+            "@babel/parser": "^7.10.5",
+            "@babel/types": "^7.10.5",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.5.tgz",
+          "integrity": "sha512-ixV66KWfCI6GKoA/2H9v6bQdbfXEwwpOdQ8cRvb4F+eyvhlaHxWFMQB4+3d9QFJXZsiiiqVrewNV0DFEQpyT4Q==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.4",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "babel-plugin-module-resolver": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-module-resolver/-/babel-plugin-module-resolver-4.0.0.tgz",
+          "integrity": "sha512-3pdEq3PXALilSJ6dnC4wMWr0AZixHRM4utpdpBR9g5QG7B7JwWyukQv7a9hVxkbGFl+nQbrHDqqQOIBtTXTP/Q==",
+          "dev": true,
+          "requires": {
+            "find-babel-config": "^1.2.0",
+            "glob": "^7.1.6",
+            "pkg-up": "^3.1.0",
+            "reselect": "^4.0.0",
+            "resolve": "^1.13.1"
+          }
+        },
+        "broccoli-plugin": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/broccoli-plugin/-/broccoli-plugin-2.1.0.tgz",
+          "integrity": "sha512-ElE4caljW4slapyEhSD9jU9Uayc8SoSABWdmY9SqbV8DHNxU6xg1jJsPcMm+cXOvggR3+G+OXAYQeFjWVnznaw==",
+          "dev": true,
+          "requires": {
+            "promise-map-series": "^0.2.1",
+            "quick-temp": "^0.1.3",
+            "rimraf": "^2.3.4",
+            "symlink-or-copy": "^1.1.8"
+          },
+          "dependencies": {
+            "promise-map-series": {
+              "version": "0.2.3",
+              "resolved": "https://registry.npmjs.org/promise-map-series/-/promise-map-series-0.2.3.tgz",
+              "integrity": "sha1-wtN3r8kyU/a9A9u3d1XriKsgqEc=",
+              "dev": true,
+              "requires": {
+                "rsvp": "^3.0.14"
+              }
+            },
+            "rsvp": {
+              "version": "3.6.2",
+              "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.6.2.tgz",
+              "integrity": "sha512-OfWGQTb9vnwRjwtA2QwpG2ICclHC3pgXZO5xt8H2EfgDquO0qVdSb5T88L4qJVAEugbS56pAuV4XZM58UX8ulw==",
+              "dev": true
+            }
+          }
+        },
+        "broccoli-source": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/broccoli-source/-/broccoli-source-3.0.0.tgz",
+          "integrity": "sha512-G4Zc8HngZIdASyQOiz/9H/0Gjc2F02EFwhWF4wiueaI+/FBrM9Ixj6Prno/1aiLIYcN0JvRC3oytN9uOVonTww==",
+          "dev": true,
+          "requires": {
+            "broccoli-node-api": "^1.6.0"
+          }
+        },
+        "broccoli-stew": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/broccoli-stew/-/broccoli-stew-3.0.0.tgz",
+          "integrity": "sha512-NXfi+Vas24n3Ivo21GvENTI55qxKu7OwKRnCLWXld8MiLiQKQlWIq28eoARaFj0lTUFwUa4jKZeA7fW9PiWQeg==",
+          "dev": true,
+          "requires": {
+            "broccoli-debug": "^0.6.5",
+            "broccoli-funnel": "^2.0.0",
+            "broccoli-merge-trees": "^3.0.1",
+            "broccoli-persistent-filter": "^2.3.0",
+            "broccoli-plugin": "^2.1.0",
+            "chalk": "^2.4.1",
+            "debug": "^4.1.1",
+            "ensure-posix-path": "^1.0.1",
+            "fs-extra": "^8.0.1",
+            "minimatch": "^3.0.4",
+            "resolve": "^1.11.1",
+            "rsvp": "^4.8.5",
+            "symlink-or-copy": "^1.2.0",
+            "walk-sync": "^1.1.3"
+          },
+          "dependencies": {
+            "chalk": {
+              "version": "2.4.2",
+              "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+              "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+              "dev": true,
+              "requires": {
+                "ansi-styles": "^3.2.1",
+                "escape-string-regexp": "^1.0.5",
+                "supports-color": "^5.3.0"
+              }
+            },
+            "walk-sync": {
+              "version": "1.1.4",
+              "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-1.1.4.tgz",
+              "integrity": "sha512-nowc9thB/Jg0KW4TgxoRjLLYRPvl3DB/98S89r4ZcJqq2B0alNcKDh6pzLkBSkPMzRSMsJghJHQi79qw0YWEkA==",
               "dev": true,
               "requires": {
                 "@types/minimatch": "^3.0.3",
@@ -7321,6 +7894,15 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
         "locate-path": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -7331,6 +7913,27 @@
             "path-exists": "^3.0.0"
           }
         },
+        "lodash": {
+          "version": "4.17.19",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+          "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
+          "dev": true
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
         "ms": {
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -7338,9 +7941,9 @@
           "dev": true
         },
         "p-limit": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.2.2.tgz",
-          "integrity": "sha512-WGR+xHecKTr7EbUEhyLSh5Dube9JtdiG78ufaeLxTgpudf/20KqyMioIUZJAezlTIi6evxuoUs9YXc11cU+yzQ==",
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
+          "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
           "dev": true,
           "requires": {
             "p-try": "^2.0.0"
@@ -7393,6 +7996,15 @@
           "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA==",
           "dev": true
         },
+        "resolve": {
+          "version": "1.17.0",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
+          "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
+          "dev": true,
+          "requires": {
+            "path-parse": "^1.0.6"
+          }
+        },
         "resolve-package-path": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/resolve-package-path/-/resolve-package-path-2.0.0.tgz",
@@ -7416,45 +8028,18 @@
           "dev": true
         },
         "tree-sync": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/tree-sync/-/tree-sync-2.0.0.tgz",
-          "integrity": "sha512-AzeJnbmJjGVfWMTJ0T152fv8NDTbQc9ERY4nEs7Lmxd94Xah2bUS56+CcoTh6FB8qn2KjBMjC0mLNc731aVBqw==",
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tree-sync/-/tree-sync-2.1.0.tgz",
+          "integrity": "sha512-OLWW+Nd99NOM53aZ8ilT/YpEiOo6mXD3F4/wLbARqybSZ3Jb8IxHK5UGVbZaae0wtXAyQshVV+SeqVBik+Fbmw==",
           "dev": true,
           "requires": {
-            "debug": "^2.2.0",
-            "fs-tree-diff": "^0.5.6",
-            "mkdirp": "^0.5.1",
+            "debug": "^4.1.1",
+            "fs-tree-diff": "^2.0.1",
+            "mkdirp": "^0.5.5",
             "quick-temp": "^0.1.5",
             "walk-sync": "^0.3.3"
           },
           "dependencies": {
-            "debug": {
-              "version": "2.6.9",
-              "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-              "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-              "dev": true,
-              "requires": {
-                "ms": "2.0.0"
-              }
-            },
-            "fs-tree-diff": {
-              "version": "0.5.9",
-              "resolved": "https://registry.npmjs.org/fs-tree-diff/-/fs-tree-diff-0.5.9.tgz",
-              "integrity": "sha512-872G8ax0kHh01m9n/2KDzgYwouKza0Ad9iFltBpNykvROvf2AGtoOzPJgGx125aolGPER3JuC7uZFrQ7bG1AZw==",
-              "dev": true,
-              "requires": {
-                "heimdalljs-logger": "^0.1.7",
-                "object-assign": "^4.1.0",
-                "path-posix": "^1.0.0",
-                "symlink-or-copy": "^1.1.8"
-              }
-            },
-            "ms": {
-              "version": "2.0.0",
-              "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-              "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-              "dev": true
-            },
             "walk-sync": {
               "version": "0.3.4",
               "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-0.3.4.tgz",
@@ -7474,14 +8059,15 @@
           "dev": true
         },
         "walk-sync": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-2.0.2.tgz",
-          "integrity": "sha512-dCZkrxfHjPn7tIvdYrX3uMD/R0beVrHpA8lROQ5wWrl8psJgR6xwCkwqTFes0dNujbS2o/ITpvSYgIFsLsf13A==",
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-2.2.0.tgz",
+          "integrity": "sha512-IC8sL7aB4/ZgFcGI2T1LczZeFWZ06b3zoHH7jBPyHxOtIIz1jppWHjjEXkOFvFojBVAK9pV7g47xOZ4LW3QLfg==",
           "dev": true,
           "requires": {
             "@types/minimatch": "^3.0.3",
             "ensure-posix-path": "^1.1.0",
-            "matcher-collection": "^2.0.0"
+            "matcher-collection": "^2.0.0",
+            "minimatch": "^3.0.4"
           },
           "dependencies": {
             "matcher-collection": {
@@ -8785,188 +9371,16 @@
         }
       }
     },
-    "ember-cli-fastboot": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/ember-cli-fastboot/-/ember-cli-fastboot-1.1.3.tgz",
-      "integrity": "sha512-9TuF4O/rTF82LdefWvNm8mLiLP1RpAAuufrC6EnTiHmhdyL0Ni4kb7uhkYd356zF+n1F2Cj6fNQu/JfwMbjG1g==",
-      "dev": true,
-      "requires": {
-        "broccoli-concat": "^3.2.2",
-        "broccoli-funnel": "^2.0.0",
-        "broccoli-merge-trees": "^2.0.0",
-        "broccoli-plugin": "^1.2.1",
-        "chalk": "^2.0.1",
-        "ember-cli-babel": "^6.7.2",
-        "ember-cli-lodash-subset": "2.0.1",
-        "ember-cli-preprocess-registry": "^3.1.0",
-        "ember-cli-version-checker": "^2.1.0",
-        "fastboot": "^1.1.3",
-        "fastboot-express-middleware": "^1.1.0",
-        "fastboot-transform": "^0.1.2",
-        "fs-extra": "^4.0.2",
-        "json-stable-stringify": "^1.0.1",
-        "md5-hex": "^2.0.0",
-        "silent-error": "^1.0.0"
-      },
-      "dependencies": {
-        "amd-name-resolver": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/amd-name-resolver/-/amd-name-resolver-1.2.0.tgz",
-          "integrity": "sha512-hlSTWGS1t6/xq5YCed7YALg7tKZL3rkl7UwEZ/eCIkn8JxmM6fU6Qs/1hwtjQqfuYxlffuUcgYEm0f5xP4YKaA==",
-          "dev": true,
-          "requires": {
-            "ensure-posix-path": "^1.0.1"
-          }
-        },
-        "babel-plugin-debug-macros": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/babel-plugin-debug-macros/-/babel-plugin-debug-macros-0.2.0.tgz",
-          "integrity": "sha512-Wpmw4TbhR3Eq2t3W51eBAQSdKlr+uAyF0GI4GtPfMCD12Y4cIdpKC9l0RjNTH/P9isFypSqqewMPm7//fnZlNA==",
-          "dev": true,
-          "requires": {
-            "semver": "^5.3.0"
-          }
-        },
-        "broccoli-babel-transpiler": {
-          "version": "6.5.1",
-          "resolved": "https://registry.npmjs.org/broccoli-babel-transpiler/-/broccoli-babel-transpiler-6.5.1.tgz",
-          "integrity": "sha512-w6GcnkxvHcNCte5FcLGEG1hUdQvlfvSN/6PtGWU/otg69Ugk8rUk51h41R0Ugoc+TNxyeFG1opRt2RlA87XzNw==",
-          "dev": true,
-          "requires": {
-            "babel-core": "^6.26.0",
-            "broccoli-funnel": "^2.0.1",
-            "broccoli-merge-trees": "^2.0.0",
-            "broccoli-persistent-filter": "^1.4.3",
-            "clone": "^2.0.0",
-            "hash-for-dep": "^1.2.3",
-            "heimdalljs-logger": "^0.1.7",
-            "json-stable-stringify": "^1.0.0",
-            "rsvp": "^4.8.2",
-            "workerpool": "^2.3.0"
-          }
-        },
-        "broccoli-merge-trees": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/broccoli-merge-trees/-/broccoli-merge-trees-2.0.1.tgz",
-          "integrity": "sha512-WjaexJ+I8BxP5V5RNn6um/qDRSmKoiBC/QkRi79FT9ClHfldxRyCDs9mcV7mmoaPlsshmmPaUz5jdtcKA6DClQ==",
-          "dev": true,
-          "requires": {
-            "broccoli-plugin": "^1.3.0",
-            "merge-trees": "^1.0.1"
-          }
-        },
-        "broccoli-persistent-filter": {
-          "version": "1.4.6",
-          "resolved": "https://registry.npmjs.org/broccoli-persistent-filter/-/broccoli-persistent-filter-1.4.6.tgz",
-          "integrity": "sha512-0RejLwoC95kv4kta8KAa+FmECJCK78Qgm8SRDEK7YyU0N9Cx6KpY3UCDy9WELl3mCXLN8TokNxc7/hp3lL4lfw==",
-          "dev": true,
-          "requires": {
-            "async-disk-cache": "^1.2.1",
-            "async-promise-queue": "^1.0.3",
-            "broccoli-plugin": "^1.0.0",
-            "fs-tree-diff": "^0.5.2",
-            "hash-for-dep": "^1.0.2",
-            "heimdalljs": "^0.2.1",
-            "heimdalljs-logger": "^0.1.7",
-            "mkdirp": "^0.5.1",
-            "promise-map-series": "^0.2.1",
-            "rimraf": "^2.6.1",
-            "rsvp": "^3.0.18",
-            "symlink-or-copy": "^1.0.1",
-            "walk-sync": "^0.3.1"
-          },
-          "dependencies": {
-            "rsvp": {
-              "version": "3.6.2",
-              "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-3.6.2.tgz",
-              "integrity": "sha512-OfWGQTb9vnwRjwtA2QwpG2ICclHC3pgXZO5xt8H2EfgDquO0qVdSb5T88L4qJVAEugbS56pAuV4XZM58UX8ulw==",
-              "dev": true
-            }
-          }
-        },
-        "ember-cli-babel": {
-          "version": "6.18.0",
-          "resolved": "https://registry.npmjs.org/ember-cli-babel/-/ember-cli-babel-6.18.0.tgz",
-          "integrity": "sha512-7ceC8joNYxY2wES16iIBlbPSxwKDBhYwC8drU3ZEvuPDMwVv1KzxCNu1fvxyFEBWhwaRNTUxSCsEVoTd9nosGA==",
-          "dev": true,
-          "requires": {
-            "amd-name-resolver": "1.2.0",
-            "babel-plugin-debug-macros": "^0.2.0-beta.6",
-            "babel-plugin-ember-modules-api-polyfill": "^2.6.0",
-            "babel-plugin-transform-es2015-modules-amd": "^6.24.0",
-            "babel-polyfill": "^6.26.0",
-            "babel-preset-env": "^1.7.0",
-            "broccoli-babel-transpiler": "^6.5.0",
-            "broccoli-debug": "^0.6.4",
-            "broccoli-funnel": "^2.0.0",
-            "broccoli-source": "^1.1.0",
-            "clone": "^2.0.0",
-            "ember-cli-version-checker": "^2.1.2",
-            "semver": "^5.5.0"
-          }
-        },
-        "ember-cli-version-checker": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/ember-cli-version-checker/-/ember-cli-version-checker-2.2.0.tgz",
-          "integrity": "sha512-G+KtYIVlSOWGcNaTFHk76xR4GdzDLzAS4uxZUKdASuFX0KJE43C6DaqL+y3VTpUFLI2FIkAS6HZ4I1YBi+S3hg==",
-          "dev": true,
-          "requires": {
-            "resolve": "^1.3.3",
-            "semver": "^5.3.0"
-          }
-        },
-        "fs-extra": {
-          "version": "4.0.3",
-          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
-          "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "jsonfile": "^4.0.0",
-            "universalify": "^0.1.0"
-          }
-        },
-        "merge-trees": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/merge-trees/-/merge-trees-1.0.1.tgz",
-          "integrity": "sha1-zL5nRWl4f53vF/1G5lJfVwC70j4=",
-          "dev": true,
-          "requires": {
-            "can-symlink": "^1.0.0",
-            "fs-tree-diff": "^0.5.4",
-            "heimdalljs": "^0.2.1",
-            "heimdalljs-logger": "^0.1.7",
-            "rimraf": "^2.4.3",
-            "symlink-or-copy": "^1.0.0"
-          }
-        },
-        "rsvp": {
-          "version": "4.8.5",
-          "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
-          "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==",
-          "dev": true
-        },
-        "workerpool": {
-          "version": "2.3.3",
-          "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-2.3.3.tgz",
-          "integrity": "sha512-L1ovlYHp6UObYqElXXpbd214GgbEKDED0d3sj7pRdFXjNkb2+un/AUcCkceHizO0IVI6SOGGncrcjozruCkRgA==",
-          "dev": true,
-          "requires": {
-            "object-assign": "4.1.1"
-          }
-        }
-      }
-    },
-    "ember-cli-get-component-path-option": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/ember-cli-get-component-path-option/-/ember-cli-get-component-path-option-1.0.0.tgz",
-      "integrity": "sha1-DXtZVVni+QUKvtgE8djv8bCLx3E=",
-      "dev": true
-    },
-    "ember-cli-htmlbars": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/ember-cli-htmlbars/-/ember-cli-htmlbars-4.2.2.tgz",
-      "integrity": "sha512-xhVYhdbS2H+XNHzSYfOZKRFIpZ8zOrNGMuAc7vJd6oUE8Aad2r5xjncIVQDioPp8sQfUpXt0uvkUZaOll/thXw==",
+    "ember-cli-get-component-path-option": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ember-cli-get-component-path-option/-/ember-cli-get-component-path-option-1.0.0.tgz",
+      "integrity": "sha1-DXtZVVni+QUKvtgE8djv8bCLx3E=",
+      "dev": true
+    },
+    "ember-cli-htmlbars": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/ember-cli-htmlbars/-/ember-cli-htmlbars-4.2.2.tgz",
+      "integrity": "sha512-xhVYhdbS2H+XNHzSYfOZKRFIpZ8zOrNGMuAc7vJd6oUE8Aad2r5xjncIVQDioPp8sQfUpXt0uvkUZaOll/thXw==",
       "requires": {
         "@ember/edition-utils": "^1.2.0",
         "babel-plugin-htmlbars-inline-precompile": "^3.0.1",
@@ -9094,6 +9508,60 @@
       "integrity": "sha1-IMtop5D+D94kiN39jvu332/nZvI=",
       "dev": true
     },
+    "ember-cli-node-assets": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/ember-cli-node-assets/-/ember-cli-node-assets-0.2.2.tgz",
+      "integrity": "sha1-0tVWJufMZhn4gtf+VXUfkmYCJwg=",
+      "dev": true,
+      "requires": {
+        "broccoli-funnel": "^1.0.1",
+        "broccoli-merge-trees": "^1.1.1",
+        "broccoli-source": "^1.1.0",
+        "debug": "^2.2.0",
+        "lodash": "^4.5.1",
+        "resolve": "^1.1.7"
+      },
+      "dependencies": {
+        "broccoli-funnel": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/broccoli-funnel/-/broccoli-funnel-1.2.0.tgz",
+          "integrity": "sha1-zdw6/F/xaFqAI0iP/3TOb7WlEpY=",
+          "dev": true,
+          "requires": {
+            "array-equal": "^1.0.0",
+            "blank-object": "^1.0.1",
+            "broccoli-plugin": "^1.3.0",
+            "debug": "^2.2.0",
+            "exists-sync": "0.0.4",
+            "fast-ordered-set": "^1.0.0",
+            "fs-tree-diff": "^0.5.3",
+            "heimdalljs": "^0.2.0",
+            "minimatch": "^3.0.0",
+            "mkdirp": "^0.5.0",
+            "path-posix": "^1.0.0",
+            "rimraf": "^2.4.3",
+            "symlink-or-copy": "^1.0.0",
+            "walk-sync": "^0.3.1"
+          }
+        },
+        "broccoli-merge-trees": {
+          "version": "1.2.4",
+          "resolved": "https://registry.npmjs.org/broccoli-merge-trees/-/broccoli-merge-trees-1.2.4.tgz",
+          "integrity": "sha1-oAFRm7UGfwZYnZGvopQkRaLQ/bU=",
+          "dev": true,
+          "requires": {
+            "broccoli-plugin": "^1.3.0",
+            "can-symlink": "^1.0.0",
+            "fast-ordered-set": "^1.0.2",
+            "fs-tree-diff": "^0.5.4",
+            "heimdalljs": "^0.2.1",
+            "heimdalljs-logger": "^0.1.7",
+            "rimraf": "^2.4.3",
+            "symlink-or-copy": "^1.0.0"
+          }
+        }
+      }
+    },
     "ember-cli-normalize-entity-name": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/ember-cli-normalize-entity-name/-/ember-cli-normalize-entity-name-1.0.0.tgz",
@@ -9140,6 +9608,11 @@
           "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.582.tgz",
           "integrity": "sha512-0nCJ7cSqnkMC+kUuPs0YgklFHraWGl/xHqtZWWtOeVtyi+YqkoAOMGuZQad43DscXCQI/yizcTa3u6B5r+BLww=="
         },
+        "escalade": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+          "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+        },
         "node-releases": {
           "version": "1.1.64",
           "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.64.tgz",
@@ -9768,15 +10241,15 @@
       }
     },
     "ember-code-snippet": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/ember-code-snippet/-/ember-code-snippet-2.4.2.tgz",
-      "integrity": "sha512-JO2HKVsL2tUAGj9atJ7Q3bS9DK2ZijdhXDUsu6iJPS2PBvWGKKktHq572sl5cPc4tj+Girgrq3zp/5Wy95Xmsg==",
-      "dev": true,
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/ember-code-snippet/-/ember-code-snippet-3.0.0.tgz",
+      "integrity": "sha512-pvIpGPLma7m6WQ5+uOjwkzozIzRAqlUSQk9TMCrQQ/AeEGWtqTJvZyAtH9LoarPtudHtWCZkUqJXIqKsjIqAbw==",
       "requires": {
         "broccoli-flatiron": "^0.1.3",
         "broccoli-merge-trees": "^1.0.0",
-        "broccoli-static-compiler": "^0.1.4",
-        "broccoli-writer": "^0.1.1",
+        "broccoli-plugin": "^1.3.1",
+        "ember-cli-babel": "^7.7.3",
+        "ember-cli-htmlbars": "^3.0.1",
         "es6-promise": "^1.0.0",
         "glob": "^7.1.3"
       },
@@ -9785,7 +10258,6 @@
           "version": "1.2.4",
           "resolved": "https://registry.npmjs.org/broccoli-merge-trees/-/broccoli-merge-trees-1.2.4.tgz",
           "integrity": "sha1-oAFRm7UGfwZYnZGvopQkRaLQ/bU=",
-          "dev": true,
           "requires": {
             "broccoli-plugin": "^1.3.0",
             "can-symlink": "^1.0.0",
@@ -9796,6 +10268,17 @@
             "rimraf": "^2.4.3",
             "symlink-or-copy": "^1.0.0"
           }
+        },
+        "ember-cli-htmlbars": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/ember-cli-htmlbars/-/ember-cli-htmlbars-3.1.0.tgz",
+          "integrity": "sha512-cgvRJM73IT0aePUG7oQ/afB7vSRBV3N0wu9BrWhHX2zkR7A7cUBI7KC9VPk6tbctCXoM7BRGsCC4aIjF7yrfXA==",
+          "requires": {
+            "broccoli-persistent-filter": "^2.3.1",
+            "hash-for-dep": "^1.5.1",
+            "json-stable-stringify": "^1.0.1",
+            "strip-bom": "^3.0.0"
+          }
         }
       }
     },
@@ -11180,35 +11663,104 @@
         }
       }
     },
-    "ember-qunit": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/ember-qunit/-/ember-qunit-4.6.0.tgz",
-      "integrity": "sha512-i5VOGn0RP8XH+5qkYDOZshbqAvO6lHgF65D0gz8vRx4DszCIvJMJO+bbftBTfYMxp6rqG85etAA6pfNxE0DqsQ==",
+    "ember-prism": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/ember-prism/-/ember-prism-0.6.1.tgz",
+      "integrity": "sha512-owdRVIaL8K66SlB+NtV/N72zi1ZrcBnnWAn9FlxcxCz7qj1mESxFKcCC1Dwic4MsXEvmAERgLlL9EM6fTJOddQ==",
       "dev": true,
       "requires": {
-        "@ember/test-helpers": "^1.7.1",
-        "broccoli-funnel": "^2.0.2",
-        "broccoli-merge-trees": "^3.0.2",
-        "common-tags": "^1.4.0",
-        "ember-cli-babel": "^7.12.0",
-        "ember-cli-test-loader": "^2.2.0",
-        "qunit": "^2.9.3"
-      }
-    },
-    "ember-raf-scheduler": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/ember-raf-scheduler/-/ember-raf-scheduler-0.1.0.tgz",
-      "integrity": "sha1-oioC0jjDdEmSMcA6ucW5iHxyqFM=",
-      "requires": {
-        "ember-cli-babel": "^6.6.0"
+        "ember-cli-babel": "^7.17.2",
+        "ember-cli-htmlbars": "^4.2.2",
+        "ember-cli-node-assets": "^0.2.2",
+        "ember-in-element-polyfill": "^0.3.0",
+        "prismjs": "^1.19.0"
       },
       "dependencies": {
-        "amd-name-resolver": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/amd-name-resolver/-/amd-name-resolver-1.2.0.tgz",
-          "integrity": "sha512-hlSTWGS1t6/xq5YCed7YALg7tKZL3rkl7UwEZ/eCIkn8JxmM6fU6Qs/1hwtjQqfuYxlffuUcgYEm0f5xP4YKaA==",
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "dev": true,
           "requires": {
-            "ensure-posix-path": "^1.0.1"
+            "ms": "^2.1.1"
+          }
+        },
+        "ember-cli-version-checker": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/ember-cli-version-checker/-/ember-cli-version-checker-4.1.1.tgz",
+          "integrity": "sha512-bzEWsTMXUGEJfxcAGWPe6kI7oHEGD3jaxUWDYPTqzqGhNkgPwXTBgoWs9zG1RaSMaOPFnloWuxRcoHi4TrYS3Q==",
+          "dev": true,
+          "requires": {
+            "resolve-package-path": "^2.0.0",
+            "semver": "^6.3.0",
+            "silent-error": "^1.1.1"
+          }
+        },
+        "ember-in-element-polyfill": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/ember-in-element-polyfill/-/ember-in-element-polyfill-0.3.0.tgz",
+          "integrity": "sha512-tTo2y4M7k/q2RGvD0rqfM/L4ktfGCh4jG6BmjPb6NewJ0DQB8LQDuqoKpwRQmDMxyfMVZSm6GL+wsDoiMbTYXQ==",
+          "dev": true,
+          "requires": {
+            "debug": "^4.1.1",
+            "ember-cli-babel": "^7.17.2",
+            "ember-cli-htmlbars": "^4.2.0",
+            "ember-cli-version-checker": "^4.1.0"
+          }
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "resolve-package-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-package-path/-/resolve-package-path-2.0.0.tgz",
+          "integrity": "sha512-/CLuzodHO2wyyHTzls5Qr+EFeG6RcW4u6//gjYvUfcfyuplIX1SSccU+A5A9A78Gmezkl3NBkFAMxLbzTY9TJA==",
+          "dev": true,
+          "requires": {
+            "path-root": "^0.1.1",
+            "resolve": "^1.13.1"
+          }
+        },
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
+    "ember-qunit": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/ember-qunit/-/ember-qunit-4.6.0.tgz",
+      "integrity": "sha512-i5VOGn0RP8XH+5qkYDOZshbqAvO6lHgF65D0gz8vRx4DszCIvJMJO+bbftBTfYMxp6rqG85etAA6pfNxE0DqsQ==",
+      "dev": true,
+      "requires": {
+        "@ember/test-helpers": "^1.7.1",
+        "broccoli-funnel": "^2.0.2",
+        "broccoli-merge-trees": "^3.0.2",
+        "common-tags": "^1.4.0",
+        "ember-cli-babel": "^7.12.0",
+        "ember-cli-test-loader": "^2.2.0",
+        "qunit": "^2.9.3"
+      }
+    },
+    "ember-raf-scheduler": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/ember-raf-scheduler/-/ember-raf-scheduler-0.1.0.tgz",
+      "integrity": "sha1-oioC0jjDdEmSMcA6ucW5iHxyqFM=",
+      "requires": {
+        "ember-cli-babel": "^6.6.0"
+      },
+      "dependencies": {
+        "amd-name-resolver": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/amd-name-resolver/-/amd-name-resolver-1.2.0.tgz",
+          "integrity": "sha512-hlSTWGS1t6/xq5YCed7YALg7tKZL3rkl7UwEZ/eCIkn8JxmM6fU6Qs/1hwtjQqfuYxlffuUcgYEm0f5xP4YKaA==",
+          "requires": {
+            "ensure-posix-path": "^1.0.1"
           }
         },
         "babel-plugin-debug-macros": {
@@ -11505,6 +12057,1238 @@
         "recast": "^0.18.1"
       }
     },
+    "ember-router-helpers": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/ember-router-helpers/-/ember-router-helpers-0.4.0.tgz",
+      "integrity": "sha512-DiPyncEAACKV/XcmYqUwh0iHBPvGW75Fw1uerDudblofXTtAH/+QzeE/0wK2G6MUBWKyn0HyIuLXE3pJm0zKFg==",
+      "dev": true,
+      "requires": {
+        "ember-cli-babel": "^7.20.0"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
+          "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+          "dev": true,
+          "requires": {
+            "@babel/highlight": "^7.10.4"
+          }
+        },
+        "@babel/compat-data": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.10.5.tgz",
+          "integrity": "sha512-mPVoWNzIpYJHbWje0if7Ck36bpbtTvIxOi9+6WSK9wjGEXearAqlwBoTQvVjsAY2VIwgcs8V940geY3okzRCEw==",
+          "dev": true,
+          "requires": {
+            "browserslist": "^4.12.0",
+            "invariant": "^2.2.4",
+            "semver": "^5.5.0"
+          }
+        },
+        "@babel/core": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.5.tgz",
+          "integrity": "sha512-O34LQooYVDXPl7QWCdW9p4NR+QlzOr7xShPPJz8GsuCU3/8ua/wqTr7gmnxXv+WBESiGU/G5s16i6tUvHkNb+w==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/generator": "^7.10.5",
+            "@babel/helper-module-transforms": "^7.10.5",
+            "@babel/helpers": "^7.10.4",
+            "@babel/parser": "^7.10.5",
+            "@babel/template": "^7.10.4",
+            "@babel/traverse": "^7.10.5",
+            "@babel/types": "^7.10.5",
+            "convert-source-map": "^1.7.0",
+            "debug": "^4.1.0",
+            "gensync": "^1.0.0-beta.1",
+            "json5": "^2.1.2",
+            "lodash": "^4.17.19",
+            "resolve": "^1.3.2",
+            "semver": "^5.4.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/generator": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.5.tgz",
+          "integrity": "sha512-3vXxr3FEW7E7lJZiWQ3bM4+v/Vyr9C+hpolQ8BGFr9Y8Ri2tFLWTixmwKBafDujO1WVah4fhZBeU1bieKdghig==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.5",
+            "jsesc": "^2.5.1",
+            "source-map": "^0.5.0"
+          }
+        },
+        "@babel/helper-annotate-as-pure": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz",
+          "integrity": "sha512-XQlqKQP4vXFB7BN8fEEerrmYvHp3fK/rBkRFz9jaJbzK0B1DSfej9Kc7ZzE8Z/OnId1jpJdNAZ3BFQjWG68rcA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-builder-binary-assignment-operator-visitor": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.10.4.tgz",
+          "integrity": "sha512-L0zGlFrGWZK4PbT8AszSfLTM5sDU1+Az/En9VrdT8/LmEiJt4zXt+Jve9DCAnQcbqDhCI+29y/L93mrDzddCcg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-explode-assignable-expression": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-compilation-targets": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.10.4.tgz",
+          "integrity": "sha512-a3rYhlsGV0UHNDvrtOXBg8/OpfV0OKTkxKPzIplS1zpx7CygDcWWxckxZeDd3gzPzC4kUT0A4nVFDK0wGMh4MQ==",
+          "dev": true,
+          "requires": {
+            "@babel/compat-data": "^7.10.4",
+            "browserslist": "^4.12.0",
+            "invariant": "^2.2.4",
+            "levenary": "^1.1.1",
+            "semver": "^5.5.0"
+          }
+        },
+        "@babel/helper-create-class-features-plugin": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.10.5.tgz",
+          "integrity": "sha512-0nkdeijB7VlZoLT3r/mY3bUkw3T8WG/hNw+FATs/6+pG2039IJWjTYL0VTISqsNHMUTEnwbVnc89WIJX9Qed0A==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-function-name": "^7.10.4",
+            "@babel/helper-member-expression-to-functions": "^7.10.5",
+            "@babel/helper-optimise-call-expression": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/helper-replace-supers": "^7.10.4",
+            "@babel/helper-split-export-declaration": "^7.10.4"
+          }
+        },
+        "@babel/helper-create-regexp-features-plugin": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.10.4.tgz",
+          "integrity": "sha512-2/hu58IEPKeoLF45DBwx3XFqsbCXmkdAay4spVr2x0jYgRxrSNp+ePwvSsy9g6YSaNDcKIQVPXk1Ov8S2edk2g==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.10.4",
+            "@babel/helper-regex": "^7.10.4",
+            "regexpu-core": "^4.7.0"
+          }
+        },
+        "@babel/helper-define-map": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-define-map/-/helper-define-map-7.10.5.tgz",
+          "integrity": "sha512-fMw4kgFB720aQFXSVaXr79pjjcW5puTCM16+rECJ/plGS+zByelE8l9nCpV1GibxTnFVmUuYG9U8wYfQHdzOEQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-function-name": "^7.10.4",
+            "@babel/types": "^7.10.5",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/helper-explode-assignable-expression": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.10.4.tgz",
+          "integrity": "sha512-4K71RyRQNPRrR85sr5QY4X3VwG4wtVoXZB9+L3r1Gp38DhELyHCtovqydRi7c1Ovb17eRGiQ/FD5s8JdU0Uy5A==",
+          "dev": true,
+          "requires": {
+            "@babel/traverse": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz",
+          "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.4",
+            "@babel/template": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-get-function-arity": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz",
+          "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-hoist-variables": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.10.4.tgz",
+          "integrity": "sha512-wljroF5PgCk2juF69kanHVs6vrLwIPNp6DLD+Lrl3hoQ3PpPPikaDRNFA+0t81NOoMt2DL6WW/mdU8k4k6ZzuA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-member-expression-to-functions": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.5.tgz",
+          "integrity": "sha512-HiqJpYD5+WopCXIAbQDG0zye5XYVvcO9w/DHp5GsaGkRUaamLj2bEtu6i8rnGGprAhHM3qidCMgp71HF4endhA==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.5"
+          }
+        },
+        "@babel/helper-module-imports": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz",
+          "integrity": "sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.10.5.tgz",
+          "integrity": "sha512-4P+CWMJ6/j1W915ITJaUkadLObmCRRSC234uctJfn/vHrsLNxsR8dwlcXv9ZhJWzl77awf+mWXSZEKt5t0OnlA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "^7.10.4",
+            "@babel/helper-replace-supers": "^7.10.4",
+            "@babel/helper-simple-access": "^7.10.4",
+            "@babel/helper-split-export-declaration": "^7.10.4",
+            "@babel/template": "^7.10.4",
+            "@babel/types": "^7.10.5",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/helper-optimise-call-expression": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz",
+          "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-plugin-utils": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz",
+          "integrity": "sha512-O4KCvQA6lLiMU9l2eawBPMf1xPP8xPfB3iEQw150hOVTqj/rfXz0ThTb4HEzqQfs2Bmo5Ay8BzxfzVtBrr9dVg==",
+          "dev": true
+        },
+        "@babel/helper-regex": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/helper-regex/-/helper-regex-7.10.5.tgz",
+          "integrity": "sha512-68kdUAzDrljqBrio7DYAEgCoJHxppJOERHOgOrDN7WjOzP0ZQ1LsSDRXcemzVZaLvjaJsJEESb6qt+znNuENDg==",
+          "dev": true,
+          "requires": {
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/helper-remap-async-to-generator": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.10.4.tgz",
+          "integrity": "sha512-86Lsr6NNw3qTNl+TBcF1oRZMaVzJtbWTyTko+CQL/tvNvcGYEFKbLXDPxtW0HKk3McNOk4KzY55itGWCAGK5tg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.10.4",
+            "@babel/helper-wrap-function": "^7.10.4",
+            "@babel/template": "^7.10.4",
+            "@babel/traverse": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-replace-supers": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz",
+          "integrity": "sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-member-expression-to-functions": "^7.10.4",
+            "@babel/helper-optimise-call-expression": "^7.10.4",
+            "@babel/traverse": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-simple-access": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz",
+          "integrity": "sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-split-export-declaration": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz",
+          "integrity": "sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==",
+          "dev": true,
+          "requires": {
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helper-wrap-function": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.10.4.tgz",
+          "integrity": "sha512-6py45WvEF0MhiLrdxtRjKjufwLL1/ob2qDJgg5JgNdojBAZSAKnAjkyOCNug6n+OBl4VW76XjvgSFTdaMcW0Ug==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-function-name": "^7.10.4",
+            "@babel/template": "^7.10.4",
+            "@babel/traverse": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/helpers": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.4.tgz",
+          "integrity": "sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==",
+          "dev": true,
+          "requires": {
+            "@babel/template": "^7.10.4",
+            "@babel/traverse": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/highlight": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
+          "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.4",
+            "chalk": "^2.0.0",
+            "js-tokens": "^4.0.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.5.tgz",
+          "integrity": "sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ==",
+          "dev": true
+        },
+        "@babel/plugin-proposal-async-generator-functions": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.5.tgz",
+          "integrity": "sha512-cNMCVezQbrRGvXJwm9fu/1sJj9bHdGAgKodZdLqOQIpfoH3raqmRPBM17+lh7CzhiKRRBrGtZL9WcjxSoGYUSg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/helper-remap-async-to-generator": "^7.10.4",
+            "@babel/plugin-syntax-async-generators": "^7.8.0"
+          }
+        },
+        "@babel/plugin-proposal-class-properties": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.10.4.tgz",
+          "integrity": "sha512-vhwkEROxzcHGNu2mzUC0OFFNXdZ4M23ib8aRRcJSsW8BZK9pQMD7QB7csl97NBbgGZO7ZyHUyKDnxzOaP4IrCg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-create-class-features-plugin": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-proposal-decorators": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.10.5.tgz",
+          "integrity": "sha512-Sc5TAQSZuLzgY0664mMDn24Vw2P8g/VhyLyGPaWiHahhgLqeZvcGeyBZOrJW0oSKIK2mvQ22a1ENXBIQLhrEiQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-create-class-features-plugin": "^7.10.5",
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/plugin-syntax-decorators": "^7.10.4"
+          }
+        },
+        "@babel/plugin-proposal-dynamic-import": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.10.4.tgz",
+          "integrity": "sha512-up6oID1LeidOOASNXgv/CFbgBqTuKJ0cJjz6An5tWD+NVBNlp3VNSBxv2ZdU7SYl3NxJC7agAQDApZusV6uFwQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/plugin-syntax-dynamic-import": "^7.8.0"
+          }
+        },
+        "@babel/plugin-proposal-json-strings": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.10.4.tgz",
+          "integrity": "sha512-fCL7QF0Jo83uy1K0P2YXrfX11tj3lkpN7l4dMv9Y9VkowkhkQDwFHFd8IiwyK5MZjE8UpbgokkgtcReH88Abaw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/plugin-syntax-json-strings": "^7.8.0"
+          }
+        },
+        "@babel/plugin-proposal-nullish-coalescing-operator": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz",
+          "integrity": "sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0"
+          }
+        },
+        "@babel/plugin-proposal-object-rest-spread": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.10.4.tgz",
+          "integrity": "sha512-6vh4SqRuLLarjgeOf4EaROJAHjvu9Gl+/346PbDH9yWbJyfnJ/ah3jmYKYtswEyCoWZiidvVHjHshd4WgjB9BA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+            "@babel/plugin-transform-parameters": "^7.10.4"
+          }
+        },
+        "@babel/plugin-proposal-optional-catch-binding": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.10.4.tgz",
+          "integrity": "sha512-LflT6nPh+GK2MnFiKDyLiqSqVHkQnVf7hdoAvyTnnKj9xB3docGRsdPuxp6qqqW19ifK3xgc9U5/FwrSaCNX5g==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/plugin-syntax-optional-catch-binding": "^7.8.0"
+          }
+        },
+        "@babel/plugin-proposal-optional-chaining": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.4.tgz",
+          "integrity": "sha512-ZIhQIEeavTgouyMSdZRap4VPPHqJJ3NEs2cuHs5p0erH+iz6khB0qfgU8g7UuJkG88+fBMy23ZiU+nuHvekJeQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/plugin-syntax-optional-chaining": "^7.8.0"
+          }
+        },
+        "@babel/plugin-proposal-unicode-property-regex": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.10.4.tgz",
+          "integrity": "sha512-H+3fOgPnEXFL9zGYtKQe4IDOPKYlZdF1kqFDQRRb8PK4B8af1vAGK04tF5iQAAsui+mHNBQSAtd2/ndEDe9wuA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-create-regexp-features-plugin": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-syntax-async-generators": {
+          "version": "7.8.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+          "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-decorators": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.10.4.tgz",
+          "integrity": "sha512-2NaoC6fAk2VMdhY1eerkfHV+lVYC1u8b+jmRJISqANCJlTxYy19HGdIkkQtix2UtkcPuPu+IlDgrVseZnU03bw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-syntax-dynamic-import": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+          "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-json-strings": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+          "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-nullish-coalescing-operator": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+          "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-object-rest-spread": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+          "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-optional-catch-binding": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+          "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-optional-chaining": {
+          "version": "7.8.3",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+          "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.8.0"
+          }
+        },
+        "@babel/plugin-syntax-top-level-await": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.10.4.tgz",
+          "integrity": "sha512-ni1brg4lXEmWyafKr0ccFWkJG0CeMt4WV1oyeBW6EFObF4oOHclbkj5cARxAPQyAQ2UTuplJyK4nfkXIMMFvsQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-syntax-typescript": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.10.4.tgz",
+          "integrity": "sha512-oSAEz1YkBCAKr5Yiq8/BNtvSAPwkp/IyUnwZogd8p+F0RuYQQrLeRUzIQhueQTTBy/F+a40uS7OFKxnkRvmvFQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-arrow-functions": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.10.4.tgz",
+          "integrity": "sha512-9J/oD1jV0ZCBcgnoFWFq1vJd4msoKb/TCpGNFyyLt0zABdcvgK3aYikZ8HjzB14c26bc7E3Q1yugpwGy2aTPNA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-async-to-generator": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.10.4.tgz",
+          "integrity": "sha512-F6nREOan7J5UXTLsDsZG3DXmZSVofr2tGNwfdrVwkDWHfQckbQXnXSPfD7iO+c/2HGqycwyLST3DnZ16n+cBJQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/helper-remap-async-to-generator": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-block-scoped-functions": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.10.4.tgz",
+          "integrity": "sha512-WzXDarQXYYfjaV1szJvN3AD7rZgZzC1JtjJZ8dMHUyiK8mxPRahynp14zzNjU3VkPqPsO38CzxiWO1c9ARZ8JA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-block-scoping": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.10.5.tgz",
+          "integrity": "sha512-6Ycw3hjpQti0qssQcA6AMSFDHeNJ++R6dIMnpRqUjFeBBTmTDPa8zgF90OVfTvAo11mXZTlVUViY1g8ffrURLg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-classes": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.10.4.tgz",
+          "integrity": "sha512-2oZ9qLjt161dn1ZE0Ms66xBncQH4In8Sqw1YWgBUZuGVJJS5c0OFZXL6dP2MRHrkU/eKhWg8CzFJhRQl50rQxA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.10.4",
+            "@babel/helper-define-map": "^7.10.4",
+            "@babel/helper-function-name": "^7.10.4",
+            "@babel/helper-optimise-call-expression": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/helper-replace-supers": "^7.10.4",
+            "@babel/helper-split-export-declaration": "^7.10.4",
+            "globals": "^11.1.0"
+          }
+        },
+        "@babel/plugin-transform-computed-properties": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.10.4.tgz",
+          "integrity": "sha512-JFwVDXcP/hM/TbyzGq3l/XWGut7p46Z3QvqFMXTfk6/09m7xZHJUN9xHfsv7vqqD4YnfI5ueYdSJtXqqBLyjBw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-destructuring": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.4.tgz",
+          "integrity": "sha512-+WmfvyfsyF603iPa6825mq6Qrb7uLjTOsa3XOFzlYcYDHSS4QmpOWOL0NNBY5qMbvrcf3tq0Cw+v4lxswOBpgA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-dotall-regex": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.10.4.tgz",
+          "integrity": "sha512-ZEAVvUTCMlMFAbASYSVQoxIbHm2OkG2MseW6bV2JjIygOjdVv8tuxrCTzj1+Rynh7ODb8GivUy7dzEXzEhuPaA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-create-regexp-features-plugin": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-duplicate-keys": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.10.4.tgz",
+          "integrity": "sha512-GL0/fJnmgMclHiBTTWXNlYjYsA7rDrtsazHG6mglaGSTh0KsrW04qml+Bbz9FL0LcJIRwBWL5ZqlNHKTkU3xAA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-exponentiation-operator": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.10.4.tgz",
+          "integrity": "sha512-S5HgLVgkBcRdyQAHbKj+7KyuWx8C6t5oETmUuwz1pt3WTWJhsUV0WIIXuVvfXMxl/QQyHKlSCNNtaIamG8fysw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-builder-binary-assignment-operator-visitor": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-for-of": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.10.4.tgz",
+          "integrity": "sha512-ItdQfAzu9AlEqmusA/65TqJ79eRcgGmpPPFvBnGILXZH975G0LNjP1yjHvGgfuCxqrPPueXOPe+FsvxmxKiHHQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-function-name": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.10.4.tgz",
+          "integrity": "sha512-OcDCq2y5+E0dVD5MagT5X+yTRbcvFjDI2ZVAottGH6tzqjx/LKpgkUepu3hp/u4tZBzxxpNGwLsAvGBvQ2mJzg==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-function-name": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-literals": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.10.4.tgz",
+          "integrity": "sha512-Xd/dFSTEVuUWnyZiMu76/InZxLTYilOSr1UlHV+p115Z/Le2Fi1KXkJUYz0b42DfndostYlPub3m8ZTQlMaiqQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-member-expression-literals": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.10.4.tgz",
+          "integrity": "sha512-0bFOvPyAoTBhtcJLr9VcwZqKmSjFml1iVxvPL0ReomGU53CX53HsM4h2SzckNdkQcHox1bpAqzxBI1Y09LlBSw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-modules-amd": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.10.5.tgz",
+          "integrity": "sha512-elm5uruNio7CTLFItVC/rIzKLfQ17+fX7EVz5W0TMgIHFo1zY0Ozzx+lgwhL4plzl8OzVn6Qasx5DeEFyoNiRw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-transforms": "^7.10.5",
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "babel-plugin-dynamic-import-node": "^2.3.3"
+          }
+        },
+        "@babel/plugin-transform-modules-commonjs": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.10.4.tgz",
+          "integrity": "sha512-Xj7Uq5o80HDLlW64rVfDBhao6OX89HKUmb+9vWYaLXBZOma4gA6tw4Ni1O5qVDoZWUV0fxMYA0aYzOawz0l+1w==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-transforms": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/helper-simple-access": "^7.10.4",
+            "babel-plugin-dynamic-import-node": "^2.3.3"
+          }
+        },
+        "@babel/plugin-transform-modules-systemjs": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.10.5.tgz",
+          "integrity": "sha512-f4RLO/OL14/FP1AEbcsWMzpbUz6tssRaeQg11RH1BP/XnPpRoVwgeYViMFacnkaw4k4wjRSjn3ip1Uw9TaXuMw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-hoist-variables": "^7.10.4",
+            "@babel/helper-module-transforms": "^7.10.5",
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "babel-plugin-dynamic-import-node": "^2.3.3"
+          }
+        },
+        "@babel/plugin-transform-modules-umd": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.10.4.tgz",
+          "integrity": "sha512-mohW5q3uAEt8T45YT7Qc5ws6mWgJAaL/8BfWD9Dodo1A3RKWli8wTS+WiQ/knF+tXlPirW/1/MqzzGfCExKECA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-transforms": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-named-capturing-groups-regex": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.10.4.tgz",
+          "integrity": "sha512-V6LuOnD31kTkxQPhKiVYzYC/Jgdq53irJC/xBSmqcNcqFGV+PER4l6rU5SH2Vl7bH9mLDHcc0+l9HUOe4RNGKA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-create-regexp-features-plugin": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-new-target": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.10.4.tgz",
+          "integrity": "sha512-YXwWUDAH/J6dlfwqlWsztI2Puz1NtUAubXhOPLQ5gjR/qmQ5U96DY4FQO8At33JN4XPBhrjB8I4eMmLROjjLjw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-object-super": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.10.4.tgz",
+          "integrity": "sha512-5iTw0JkdRdJvr7sY0vHqTpnruUpTea32JHmq/atIWqsnNussbRzjEDyWep8UNztt1B5IusBYg8Irb0bLbiEBCQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/helper-replace-supers": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-parameters": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.10.5.tgz",
+          "integrity": "sha512-xPHwUj5RdFV8l1wuYiu5S9fqWGM2DrYc24TMvUiRrPVm+SM3XeqU9BcokQX/kEUe+p2RBwy+yoiR1w/Blq6ubw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-get-function-arity": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-property-literals": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.10.4.tgz",
+          "integrity": "sha512-ofsAcKiUxQ8TY4sScgsGeR2vJIsfrzqvFb9GvJ5UdXDzl+MyYCaBj/FGzXuv7qE0aJcjWMILny1epqelnFlz8g==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-regenerator": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.10.4.tgz",
+          "integrity": "sha512-3thAHwtor39A7C04XucbMg17RcZ3Qppfxr22wYzZNcVIkPHfpM9J0SO8zuCV6SZa265kxBJSrfKTvDCYqBFXGw==",
+          "dev": true,
+          "requires": {
+            "regenerator-transform": "^0.14.2"
+          }
+        },
+        "@babel/plugin-transform-reserved-words": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.10.4.tgz",
+          "integrity": "sha512-hGsw1O6Rew1fkFbDImZIEqA8GoidwTAilwCyWqLBM9f+e/u/sQMQu7uX6dyokfOayRuuVfKOW4O7HvaBWM+JlQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-runtime": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.10.5.tgz",
+          "integrity": "sha512-tV4V/FjElJ9lQtyjr5xD2IFFbgY46r7EeVu5a8CpEKT5laheHKSlFeHjpkPppW3PqzGLAuv5k2qZX5LgVZIX5w==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-module-imports": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "resolve": "^1.8.1",
+            "semver": "^5.5.1"
+          }
+        },
+        "@babel/plugin-transform-shorthand-properties": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.10.4.tgz",
+          "integrity": "sha512-AC2K/t7o07KeTIxMoHneyX90v3zkm5cjHJEokrPEAGEy3UCp8sLKfnfOIGdZ194fyN4wfX/zZUWT9trJZ0qc+Q==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-spread": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.10.4.tgz",
+          "integrity": "sha512-1e/51G/Ni+7uH5gktbWv+eCED9pP8ZpRhZB3jOaI3mmzfvJTWHkuyYTv0Z5PYtyM+Tr2Ccr9kUdQxn60fI5WuQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-sticky-regex": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.10.4.tgz",
+          "integrity": "sha512-Ddy3QZfIbEV0VYcVtFDCjeE4xwVTJWTmUtorAJkn6u/92Z/nWJNV+mILyqHKrUxXYKA2EoCilgoPePymKL4DvQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/helper-regex": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-template-literals": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.10.5.tgz",
+          "integrity": "sha512-V/lnPGIb+KT12OQikDvgSuesRX14ck5FfJXt6+tXhdkJ+Vsd0lDCVtF6jcB4rNClYFzaB2jusZ+lNISDk2mMMw==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-annotate-as-pure": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-typeof-symbol": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.10.4.tgz",
+          "integrity": "sha512-QqNgYwuuW0y0H+kUE/GWSR45t/ccRhe14Fs/4ZRouNNQsyd4o3PG4OtHiIrepbM2WKUBDAXKCAK/Lk4VhzTaGA==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-typescript": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.10.5.tgz",
+          "integrity": "sha512-YCyYsFrrRMZ3qR7wRwtSSJovPG5vGyG4ZdcSAivGwTfoasMp3VOB/AKhohu3dFtmB4cCDcsndCSxGtrdliCsZQ==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-create-class-features-plugin": "^7.10.5",
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/plugin-syntax-typescript": "^7.10.4"
+          }
+        },
+        "@babel/plugin-transform-unicode-regex": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.10.4.tgz",
+          "integrity": "sha512-wNfsc4s8N2qnIwpO/WP2ZiSyjfpTamT2C9V9FDH/Ljub9zw6P3SjkXcFmc0RQUt96k2fmIvtla2MMjgTwIAC+A==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-create-regexp-features-plugin": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4"
+          }
+        },
+        "@babel/polyfill": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.10.4.tgz",
+          "integrity": "sha512-8BYcnVqQ5kMD2HXoHInBH7H1b/uP3KdnwCYXOqFnXqguOyuu443WXusbIUbWEfY3Z0Txk0M1uG/8YuAMhNl6zg==",
+          "dev": true,
+          "requires": {
+            "core-js": "^2.6.5",
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "@babel/preset-env": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.10.4.tgz",
+          "integrity": "sha512-tcmuQ6vupfMZPrLrc38d0sF2OjLT3/bZ0dry5HchNCQbrokoQi4reXqclvkkAT5b+gWc23meVWpve5P/7+w/zw==",
+          "dev": true,
+          "requires": {
+            "@babel/compat-data": "^7.10.4",
+            "@babel/helper-compilation-targets": "^7.10.4",
+            "@babel/helper-module-imports": "^7.10.4",
+            "@babel/helper-plugin-utils": "^7.10.4",
+            "@babel/plugin-proposal-async-generator-functions": "^7.10.4",
+            "@babel/plugin-proposal-class-properties": "^7.10.4",
+            "@babel/plugin-proposal-dynamic-import": "^7.10.4",
+            "@babel/plugin-proposal-json-strings": "^7.10.4",
+            "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.4",
+            "@babel/plugin-proposal-numeric-separator": "^7.10.4",
+            "@babel/plugin-proposal-object-rest-spread": "^7.10.4",
+            "@babel/plugin-proposal-optional-catch-binding": "^7.10.4",
+            "@babel/plugin-proposal-optional-chaining": "^7.10.4",
+            "@babel/plugin-proposal-private-methods": "^7.10.4",
+            "@babel/plugin-proposal-unicode-property-regex": "^7.10.4",
+            "@babel/plugin-syntax-async-generators": "^7.8.0",
+            "@babel/plugin-syntax-class-properties": "^7.10.4",
+            "@babel/plugin-syntax-dynamic-import": "^7.8.0",
+            "@babel/plugin-syntax-json-strings": "^7.8.0",
+            "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.0",
+            "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+            "@babel/plugin-syntax-object-rest-spread": "^7.8.0",
+            "@babel/plugin-syntax-optional-catch-binding": "^7.8.0",
+            "@babel/plugin-syntax-optional-chaining": "^7.8.0",
+            "@babel/plugin-syntax-top-level-await": "^7.10.4",
+            "@babel/plugin-transform-arrow-functions": "^7.10.4",
+            "@babel/plugin-transform-async-to-generator": "^7.10.4",
+            "@babel/plugin-transform-block-scoped-functions": "^7.10.4",
+            "@babel/plugin-transform-block-scoping": "^7.10.4",
+            "@babel/plugin-transform-classes": "^7.10.4",
+            "@babel/plugin-transform-computed-properties": "^7.10.4",
+            "@babel/plugin-transform-destructuring": "^7.10.4",
+            "@babel/plugin-transform-dotall-regex": "^7.10.4",
+            "@babel/plugin-transform-duplicate-keys": "^7.10.4",
+            "@babel/plugin-transform-exponentiation-operator": "^7.10.4",
+            "@babel/plugin-transform-for-of": "^7.10.4",
+            "@babel/plugin-transform-function-name": "^7.10.4",
+            "@babel/plugin-transform-literals": "^7.10.4",
+            "@babel/plugin-transform-member-expression-literals": "^7.10.4",
+            "@babel/plugin-transform-modules-amd": "^7.10.4",
+            "@babel/plugin-transform-modules-commonjs": "^7.10.4",
+            "@babel/plugin-transform-modules-systemjs": "^7.10.4",
+            "@babel/plugin-transform-modules-umd": "^7.10.4",
+            "@babel/plugin-transform-named-capturing-groups-regex": "^7.10.4",
+            "@babel/plugin-transform-new-target": "^7.10.4",
+            "@babel/plugin-transform-object-super": "^7.10.4",
+            "@babel/plugin-transform-parameters": "^7.10.4",
+            "@babel/plugin-transform-property-literals": "^7.10.4",
+            "@babel/plugin-transform-regenerator": "^7.10.4",
+            "@babel/plugin-transform-reserved-words": "^7.10.4",
+            "@babel/plugin-transform-shorthand-properties": "^7.10.4",
+            "@babel/plugin-transform-spread": "^7.10.4",
+            "@babel/plugin-transform-sticky-regex": "^7.10.4",
+            "@babel/plugin-transform-template-literals": "^7.10.4",
+            "@babel/plugin-transform-typeof-symbol": "^7.10.4",
+            "@babel/plugin-transform-unicode-escapes": "^7.10.4",
+            "@babel/plugin-transform-unicode-regex": "^7.10.4",
+            "@babel/preset-modules": "^0.1.3",
+            "@babel/types": "^7.10.4",
+            "browserslist": "^4.12.0",
+            "core-js-compat": "^3.6.2",
+            "invariant": "^2.2.2",
+            "levenary": "^1.1.1",
+            "semver": "^5.5.0"
+          }
+        },
+        "@babel/runtime": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.5.tgz",
+          "integrity": "sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "@babel/template": {
+          "version": "7.10.4",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz",
+          "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/parser": "^7.10.4",
+            "@babel/types": "^7.10.4"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.5.tgz",
+          "integrity": "sha512-yc/fyv2gUjPqzTz0WHeRJH2pv7jA9kA7mBX2tXl/x5iOE81uaVPuGPtaYk7wmkx4b67mQ7NqI8rmT2pF47KYKQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/generator": "^7.10.5",
+            "@babel/helper-function-name": "^7.10.4",
+            "@babel/helper-split-export-declaration": "^7.10.4",
+            "@babel/parser": "^7.10.5",
+            "@babel/types": "^7.10.5",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0",
+            "lodash": "^4.17.19"
+          }
+        },
+        "@babel/types": {
+          "version": "7.10.5",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.5.tgz",
+          "integrity": "sha512-ixV66KWfCI6GKoA/2H9v6bQdbfXEwwpOdQ8cRvb4F+eyvhlaHxWFMQB4+3d9QFJXZsiiiqVrewNV0DFEQpyT4Q==",
+          "dev": true,
+          "requires": {
+            "@babel/helper-validator-identifier": "^7.10.4",
+            "lodash": "^4.17.19",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "babel-plugin-dynamic-import-node": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz",
+          "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==",
+          "dev": true,
+          "requires": {
+            "object.assign": "^4.1.0"
+          }
+        },
+        "babel-plugin-ember-modules-api-polyfill": {
+          "version": "2.13.4",
+          "resolved": "https://registry.npmjs.org/babel-plugin-ember-modules-api-polyfill/-/babel-plugin-ember-modules-api-polyfill-2.13.4.tgz",
+          "integrity": "sha512-uxQPkEQAzCYdwhZk16O9m1R4xtCRNy4oEUTBrccOPfzlIahRZJic/JeP/ZEL0BC6Mfq6r55eOg6gMF/zdFoCvA==",
+          "dev": true,
+          "requires": {
+            "ember-rfc176-data": "^0.3.13"
+          }
+        },
+        "broccoli-babel-transpiler": {
+          "version": "7.6.0",
+          "resolved": "https://registry.npmjs.org/broccoli-babel-transpiler/-/broccoli-babel-transpiler-7.6.0.tgz",
+          "integrity": "sha512-VjqIl4qe3zEkGjsPA2jgw/jakjfLjw2IpQ62d4f1kArZyMW/cQ6o54VD0Cd6cai4J08nb4WPLu4cr4Z62vr5uw==",
+          "dev": true,
+          "requires": {
+            "@babel/core": "^7.10.2",
+            "@babel/polyfill": "^7.10.1",
+            "broccoli-funnel": "^2.0.2",
+            "broccoli-merge-trees": "^3.0.2",
+            "broccoli-persistent-filter": "^2.2.1",
+            "clone": "^2.1.2",
+            "hash-for-dep": "^1.4.7",
+            "heimdalljs": "^0.2.1",
+            "heimdalljs-logger": "^0.1.9",
+            "json-stable-stringify": "^1.0.1",
+            "rsvp": "^4.8.4",
+            "workerpool": "^3.1.1"
+          }
+        },
+        "browserslist": {
+          "version": "4.13.0",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.13.0.tgz",
+          "integrity": "sha512-MINatJ5ZNrLnQ6blGvePd/QOz9Xtu+Ne+x29iQSCHfkU5BugKVJwZKn/iiL8UbpIpa3JhviKjz+XxMo0m2caFQ==",
+          "dev": true,
+          "requires": {
+            "caniuse-lite": "^1.0.30001093",
+            "electron-to-chromium": "^1.3.488",
+            "escalade": "^3.0.1",
+            "node-releases": "^1.1.58"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001099",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001099.tgz",
+          "integrity": "sha512-sdS9A+sQTk7wKoeuZBN/YMAHVztUfVnjDi4/UV3sDE8xoh7YR12hKW+pIdB3oqKGwr9XaFL2ovfzt9w8eUI5CA==",
+          "dev": true
+        },
+        "core-js-compat": {
+          "version": "3.6.5",
+          "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.6.5.tgz",
+          "integrity": "sha512-7ItTKOhOZbznhXAQ2g/slGg1PJV5zDO/WdkTwi7UEOJmkvsE32PWvx6mKtDjiMpjnR2CNf6BAD6sSxIlv7ptng==",
+          "dev": true,
+          "requires": {
+            "browserslist": "^4.8.5",
+            "semver": "7.0.0"
+          },
+          "dependencies": {
+            "semver": {
+              "version": "7.0.0",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-7.0.0.tgz",
+              "integrity": "sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==",
+              "dev": true
+            }
+          }
+        },
+        "debug": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
+          "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
+          "dev": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "electron-to-chromium": {
+          "version": "1.3.497",
+          "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.497.tgz",
+          "integrity": "sha512-sPdW5bUDZwiFtoonuZCUwRGzsZmKzcLM0bMVhp6SMCfUG+B3faENLx3cE+o+K0Jl+MPuNA9s9cScyFjOlixZpQ==",
+          "dev": true
+        },
+        "ember-cli-babel": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/ember-cli-babel/-/ember-cli-babel-7.21.0.tgz",
+          "integrity": "sha512-jHVi9melAibo0DrAG3GAxid+29xEyjBoU53652B4qcu3Xp58feZGTH/JGXovH7TjvbeNn65zgNyoV3bk1onULw==",
+          "dev": true,
+          "requires": {
+            "@babel/core": "^7.10.2",
+            "@babel/helper-compilation-targets": "^7.10.2",
+            "@babel/plugin-proposal-class-properties": "^7.10.1",
+            "@babel/plugin-proposal-decorators": "^7.10.1",
+            "@babel/plugin-transform-modules-amd": "^7.10.1",
+            "@babel/plugin-transform-runtime": "^7.10.1",
+            "@babel/plugin-transform-typescript": "^7.10.1",
+            "@babel/polyfill": "^7.10.1",
+            "@babel/preset-env": "^7.10.2",
+            "@babel/runtime": "^7.10.2",
+            "amd-name-resolver": "^1.2.1",
+            "babel-plugin-debug-macros": "^0.3.3",
+            "babel-plugin-ember-data-packages-polyfill": "^0.1.2",
+            "babel-plugin-ember-modules-api-polyfill": "^2.13.4",
+            "babel-plugin-module-resolver": "^3.1.1",
+            "broccoli-babel-transpiler": "^7.5.0",
+            "broccoli-debug": "^0.6.4",
+            "broccoli-funnel": "^2.0.1",
+            "broccoli-source": "^1.1.0",
+            "clone": "^2.1.2",
+            "ember-cli-babel-plugin-helpers": "^1.1.0",
+            "ember-cli-version-checker": "^4.1.0",
+            "ensure-posix-path": "^1.0.2",
+            "fixturify-project": "^1.10.0",
+            "rimraf": "^3.0.1",
+            "semver": "^5.5.0"
+          }
+        },
+        "ember-cli-version-checker": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/ember-cli-version-checker/-/ember-cli-version-checker-4.1.1.tgz",
+          "integrity": "sha512-bzEWsTMXUGEJfxcAGWPe6kI7oHEGD3jaxUWDYPTqzqGhNkgPwXTBgoWs9zG1RaSMaOPFnloWuxRcoHi4TrYS3Q==",
+          "dev": true,
+          "requires": {
+            "resolve-package-path": "^2.0.0",
+            "semver": "^6.3.0",
+            "silent-error": "^1.1.1"
+          },
+          "dependencies": {
+            "semver": {
+              "version": "6.3.0",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+              "dev": true
+            }
+          }
+        },
+        "ember-rfc176-data": {
+          "version": "0.3.13",
+          "resolved": "https://registry.npmjs.org/ember-rfc176-data/-/ember-rfc176-data-0.3.13.tgz",
+          "integrity": "sha512-m9JbwQlT6PjY7x/T8HslnXP7Sz9bx/pz3FrNfNi2NesJnbNISly0Lix6NV1fhfo46572cpq4jrM+/6yYlMefTQ==",
+          "dev": true
+        },
+        "json5": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
+          "integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
+          "dev": true,
+          "requires": {
+            "minimist": "^1.2.5"
+          }
+        },
+        "lodash": {
+          "version": "4.17.19",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.19.tgz",
+          "integrity": "sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==",
+          "dev": true
+        },
+        "minimist": {
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+          "dev": true
+        },
+        "ms": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+          "dev": true
+        },
+        "node-releases": {
+          "version": "1.1.59",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.59.tgz",
+          "integrity": "sha512-H3JrdUczbdiwxN5FuJPyCHnGHIFqQ0wWxo+9j1kAXAzqNMAHlo+4I/sYYxpyK0irQ73HgdiyzD32oqQDcU2Osw==",
+          "dev": true
+        },
+        "regenerate-unicode-properties": {
+          "version": "8.2.0",
+          "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz",
+          "integrity": "sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==",
+          "dev": true,
+          "requires": {
+            "regenerate": "^1.4.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA==",
+          "dev": true
+        },
+        "regenerator-transform": {
+          "version": "0.14.5",
+          "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.14.5.tgz",
+          "integrity": "sha512-eOf6vka5IO151Jfsw2NO9WpGX58W6wWmefK3I1zEGr0lOD0u8rwPaNqQL1aRxUaxLeKO3ArNh3VYg1KbaD+FFw==",
+          "dev": true,
+          "requires": {
+            "@babel/runtime": "^7.8.4"
+          }
+        },
+        "regexpu-core": {
+          "version": "4.7.0",
+          "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.0.tgz",
+          "integrity": "sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==",
+          "dev": true,
+          "requires": {
+            "regenerate": "^1.4.0",
+            "regenerate-unicode-properties": "^8.2.0",
+            "regjsgen": "^0.5.1",
+            "regjsparser": "^0.6.4",
+            "unicode-match-property-ecmascript": "^1.0.4",
+            "unicode-match-property-value-ecmascript": "^1.2.0"
+          }
+        },
+        "regjsparser": {
+          "version": "0.6.4",
+          "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.6.4.tgz",
+          "integrity": "sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==",
+          "dev": true,
+          "requires": {
+            "jsesc": "~0.5.0"
+          },
+          "dependencies": {
+            "jsesc": {
+              "version": "0.5.0",
+              "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+              "integrity": "sha1-597mbjXW/Bb3EP6R1c9p9w8IkR0=",
+              "dev": true
+            }
+          }
+        },
+        "resolve-package-path": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-package-path/-/resolve-package-path-2.0.0.tgz",
+          "integrity": "sha512-/CLuzodHO2wyyHTzls5Qr+EFeG6RcW4u6//gjYvUfcfyuplIX1SSccU+A5A9A78Gmezkl3NBkFAMxLbzTY9TJA==",
+          "dev": true,
+          "requires": {
+            "path-root": "^0.1.1",
+            "resolve": "^1.13.1"
+          }
+        },
+        "rimraf": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+          "dev": true,
+          "requires": {
+            "glob": "^7.1.3"
+          }
+        },
+        "rsvp": {
+          "version": "4.8.5",
+          "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
+          "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==",
+          "dev": true
+        },
+        "unicode-match-property-value-ecmascript": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz",
+          "integrity": "sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==",
+          "dev": true
+        }
+      }
+    },
     "ember-source": {
       "version": "3.16.2",
       "resolved": "https://registry.npmjs.org/ember-source/-/ember-source-3.16.2.tgz",
@@ -12080,9 +13864,9 @@
       }
     },
     "engine.io": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-3.4.0.tgz",
-      "integrity": "sha512-XCyYVWzcHnK5cMz7G4VTu2W7zJS7SM1QkcelghyIk/FmobWBtXE7fwhBusEKvCSqc3bMh8fNFMlUkCKTFRxH2w==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-3.4.2.tgz",
+      "integrity": "sha512-b4Q85dFkGw+TqgytGPrGgACRUhsdKc9S9ErRAXpPGy/CXKs4tYoHDkvIRdsseAF7NjfVwjRFIn6KTnbw7LwJZg==",
       "dev": true,
       "requires": {
         "accepts": "~1.3.4",
@@ -12115,20 +13899,20 @@
           "dev": true
         },
         "ws": {
-          "version": "7.2.1",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-7.2.1.tgz",
-          "integrity": "sha512-sucePNSafamSKoOqoNfBd8V0StlkzJKL2ZAhGQinCfNQ+oacw+Pk7lcdAElecBF2VkLNZRiIb5Oi1Q5lVUVt2A==",
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-7.3.1.tgz",
+          "integrity": "sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==",
           "dev": true
         }
       }
     },
     "engine.io-client": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.4.0.tgz",
-      "integrity": "sha512-a4J5QO2k99CM2a0b12IznnyQndoEvtA4UAldhGzKqnHf42I3Qs2W5SPnDvatZRcMaNZs4IevVicBPayxYt6FwA==",
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.4.3.tgz",
+      "integrity": "sha512-0NGY+9hioejTEJCaSJZfWZLk4FPI9dN+1H1C4+wj2iuFba47UgZbJzfWs4aNFajnX/qAaYKbe2lLTfEEWzCmcw==",
       "dev": true,
       "requires": {
-        "component-emitter": "1.2.1",
+        "component-emitter": "~1.3.0",
         "component-inherit": "0.0.3",
         "debug": "~4.1.0",
         "engine.io-parser": "~2.2.0",
@@ -12141,12 +13925,6 @@
         "yeast": "0.1.2"
       },
       "dependencies": {
-        "component-emitter": {
-          "version": "1.2.1",
-          "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
-          "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=",
-          "dev": true
-        },
         "debug": {
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -12257,13 +14035,13 @@
     "es6-promise": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-1.0.0.tgz",
-      "integrity": "sha1-+Q02KfqnwmFmrk33fIm6zeuNyn8=",
-      "dev": true
+      "integrity": "sha1-+Q02KfqnwmFmrk33fIm6zeuNyn8="
     },
     "escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.0.2.tgz",
+      "integrity": "sha512-gPYAU37hYCUhW5euPeR+Y74F7BL+IBsV93j5cvGriSaD1aG6MGsqsV1yamRdrWrb2j3aiZvb0X+UBOWpx3JWtQ==",
+      "dev": true
     },
     "escape-html": {
       "version": "1.0.3",
@@ -12649,9 +14427,9 @@
       "dev": true
     },
     "eventemitter3": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
-      "integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==",
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.4.tgz",
+      "integrity": "sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==",
       "dev": true
     },
     "events": {
@@ -12921,16 +14699,17 @@
       "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
     },
     "fast-glob": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.1.1.tgz",
-      "integrity": "sha512-nTCREpBY8w8r+boyFYAx21iL6faSsQynliPHM4Uf56SbkyohCNxpVPEH9xrF5TXKy+IsjkPUHDKiUkzBVRXn9g==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",
+      "integrity": "sha512-kr/Oo6PX51265qeuCYsyGypiO5uJFgBS0jksyG7FUeCyQzNwYnzrNIMR1NXfkZXsMYXYLRAHgISHBz8gQcxKHQ==",
       "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
         "glob-parent": "^5.1.0",
         "merge2": "^1.3.0",
-        "micromatch": "^4.0.2"
+        "micromatch": "^4.0.2",
+        "picomatch": "^2.2.1"
       },
       "dependencies": {
         "braces": {
@@ -12952,9 +14731,9 @@
           }
         },
         "glob-parent": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz",
-          "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==",
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
+          "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
           "dev": true,
           "requires": {
             "is-glob": "^4.0.1"
@@ -13040,78 +14819,6 @@
         }
       }
     },
-    "fastboot": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/fastboot/-/fastboot-1.2.1.tgz",
-      "integrity": "sha512-WK5Jy71Q6FPoGkooEnWt7Yc2vb23f6C2RtBUutO459TskFnUhzOF8ZJASNNjURQYq8U/pTha2LI4Ix7UInffgg==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.0.1",
-        "cookie": "^0.3.1",
-        "debug": "^3.0.0",
-        "exists-sync": "0.0.4",
-        "najax": "^1.0.2",
-        "rsvp": "^4.7.0",
-        "simple-dom": "^1.0.0",
-        "source-map-support": "^0.5.0"
-      },
-      "dependencies": {
-        "cookie": {
-          "version": "0.3.1",
-          "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz",
-          "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=",
-          "dev": true
-        },
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        },
-        "rsvp": {
-          "version": "4.8.5",
-          "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",
-          "integrity": "sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==",
-          "dev": true
-        },
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "dev": true
-        },
-        "source-map-support": {
-          "version": "0.5.16",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.16.tgz",
-          "integrity": "sha512-efyLRJDr68D9hBBNIPWFjhpFzURh+KJykQwvMyW5UiZzYwoF6l4YMMDIJJEyFWxWCqfyxLzz6tSfUFR+kXXsVQ==",
-          "dev": true,
-          "requires": {
-            "buffer-from": "^1.0.0",
-            "source-map": "^0.6.0"
-          }
-        }
-      }
-    },
-    "fastboot-express-middleware": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/fastboot-express-middleware/-/fastboot-express-middleware-1.2.0.tgz",
-      "integrity": "sha1-PzL7IdjQGtfAx9h2snhgFmXqF/o=",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.0.1",
-        "fastboot": "^1.2.0",
-        "request": "^2.81.0"
-      }
-    },
     "fastboot-transform": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/fastboot-transform/-/fastboot-transform-0.1.3.tgz",
@@ -13122,12 +14829,12 @@
       }
     },
     "fastq": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.6.0.tgz",
-      "integrity": "sha512-jmxqQ3Z/nXoeyDmWAzF9kH1aGZSis6e/SbfPmJpUnyZ0ogr6iscHQaml4wsEepEWSdtmpy+eVXmCRIMpxaXqOA==",
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.8.0.tgz",
+      "integrity": "sha512-SMIZoZdLh/fgofivvIkmknUXyPnvxRE3DhtZ5Me3Mrsk5gyPL42F0xr51TdRXskBxHfMp+07bcYzfsYEsSQA9Q==",
       "dev": true,
       "requires": {
-        "reusify": "^1.0.0"
+        "reusify": "^1.0.4"
       }
     },
     "faye-websocket": {
@@ -13282,24 +14989,58 @@
       }
     },
     "findup-sync": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-2.0.0.tgz",
-      "integrity": "sha1-kyaxSIwi0aYIhlCoaQGy2akKLLw=",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-4.0.0.tgz",
+      "integrity": "sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==",
       "dev": true,
       "requires": {
         "detect-file": "^1.0.0",
-        "is-glob": "^3.1.0",
-        "micromatch": "^3.0.4",
+        "is-glob": "^4.0.0",
+        "micromatch": "^4.0.2",
         "resolve-dir": "^1.0.1"
       },
       "dependencies": {
-        "is-glob": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
-          "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+        "braces": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
+          "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
           "dev": true,
           "requires": {
-            "is-extglob": "^2.1.0"
+            "fill-range": "^7.0.1"
+          }
+        },
+        "fill-range": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
+          "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+          "dev": true,
+          "requires": {
+            "to-regex-range": "^5.0.1"
+          }
+        },
+        "is-number": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+          "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+          "dev": true
+        },
+        "micromatch": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
+          "integrity": "sha512-y7FpHSbMUMoyPbYUSzO6PaZ6FyRnQOpHuKwbo1G+Knck95XVU4QAiKdGEnj5wwoS7PlOgthX/09u5iFJ+aYf5Q==",
+          "dev": true,
+          "requires": {
+            "braces": "^3.0.1",
+            "picomatch": "^2.0.5"
+          }
+        },
+        "to-regex-range": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+          "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+          "dev": true,
+          "requires": {
+            "is-number": "^7.0.0"
           }
         }
       }
@@ -13444,30 +15185,10 @@
       }
     },
     "follow-redirects": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.10.0.tgz",
-      "integrity": "sha512-4eyLK6s6lH32nOvLLwlIOnr9zrL8Sm+OvW4pVTJNoXeGzYIkHVf+pADQi+OJ0E67hiuSLezPVPyBcIZO50TmmQ==",
-      "dev": true,
-      "requires": {
-        "debug": "^3.0.0"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.6",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz",
-          "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        },
-        "ms": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-          "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-          "dev": true
-        }
-      }
+      "version": "1.12.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.12.1.tgz",
+      "integrity": "sha512-tmRv0AVuR7ZyouUHLeNSiO6pqulF7dYa3s19c6t+wz9LD69/uSzdMxJ2S91nTI9U3rt/IldxpzMOFejp6f0hjg==",
+      "dev": true
     },
     "for-in": {
       "version": "1.0.2",
@@ -14251,9 +15972,9 @@
       }
     },
     "git-hooks-list": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/git-hooks-list/-/git-hooks-list-1.0.2.tgz",
-      "integrity": "sha512-C3c/FG6Pgh053+yK/CnNNYJo5mgCa3OeI+cPxPIl0tyMLm1mGfiV0NX0LrhnjVoX7dfkR78WyW2kvFVHvAlneg==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/git-hooks-list/-/git-hooks-list-1.0.3.tgz",
+      "integrity": "sha512-Y7wLWcrLUXwk2noSka166byGCvhMtDRpgHdzCno1UQv/n/Hegp++a2xBWJL1lJarnKD3SWaljD+0z1ztqxuKyQ==",
       "dev": true
     },
     "git-packed-ref-parse": {
@@ -14405,9 +16126,9 @@
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
     "globby": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.1.tgz",
-      "integrity": "sha512-sSs4inE1FB2YQiymcmTv6NWENryABjUNPeWhOvmn4SjtKybglsyPZxFB3U1/+L1bYi0rNZDqCLlHyLYDl1Pq5A==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-10.0.0.tgz",
+      "integrity": "sha512-3LifW9M4joGZasyYPz2A1U74zbC/45fvpXUvO/9KbSa+VV0aGZarWkfdgKyR9sExNP0t0x0ss/UMJpNpcaTspw==",
       "dev": true,
       "requires": {
         "@types/glob": "^7.1.1",
@@ -14428,6 +16149,16 @@
         }
       }
     },
+    "good-listener": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
+      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "delegate": "^3.1.2"
+      }
+    },
     "got": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
@@ -14720,10 +16451,30 @@
       }
     },
     "hosted-git-info": {
-      "version": "2.8.5",
-      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
-      "integrity": "sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg==",
-      "dev": true
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.5.tgz",
+      "integrity": "sha512-i4dpK6xj9BIpVOTboXIlKG9+8HMKggcrMX7WA24xZtKwX0TPelq/rbaS5rCKeNX8sJXZJGdSxpnEGtta+wismQ==",
+      "dev": true,
+      "requires": {
+        "lru-cache": "^6.0.0"
+      },
+      "dependencies": {
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "dev": true,
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+          "dev": true
+        }
+      }
     },
     "html-encoding-sniffer": {
       "version": "1.0.2",
@@ -14760,15 +16511,15 @@
       }
     },
     "http-parser-js": {
-      "version": "0.4.10",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.10.tgz",
-      "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=",
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.2.tgz",
+      "integrity": "sha512-opCO9ASqg5Wy2FNo7A0sxy71yGbbkJJXLdgMK04Tcypw9jr2MgWbyubb0+WdmDmGnFflO7fRbqbaihh/ENDlRQ==",
       "dev": true
     },
     "http-proxy": {
-      "version": "1.18.0",
-      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.0.tgz",
-      "integrity": "sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==",
+      "version": "1.18.1",
+      "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz",
+      "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==",
       "dev": true,
       "requires": {
         "eventemitter3": "^4.0.0",
@@ -14917,9 +16668,9 @@
           }
         },
         "minimist": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
           "dev": true
         },
         "supports-color": {
@@ -14987,9 +16738,9 @@
       }
     },
     "ipaddr.js": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz",
-      "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==",
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
+      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
       "dev": true
     },
     "is-accessor-descriptor": {
@@ -15282,12 +17033,6 @@
       "integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==",
       "dev": true
     },
-    "jquery-deferred": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/jquery-deferred/-/jquery-deferred-0.3.1.tgz",
-      "integrity": "sha1-WW7KHKr/VPYbEQlisjyv6nTDU1U=",
-      "dev": true
-    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -15933,28 +17678,36 @@
       }
     },
     "markdown-it": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-9.1.0.tgz",
-      "integrity": "sha512-xHKG4C8iPriyfu/jc2hsCC045fKrMQ0VexX2F1FGYiRxDxqMB2aAhF8WauJ3fltn2kb90moGBkiiEdooGIg55w==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-10.0.0.tgz",
+      "integrity": "sha512-YWOP1j7UbDNz+TumYP1kpwnP0aEa711cJjrAQrzd0UXlbJfc5aAq0F/PZHjiioqDC1NKgvIMX+o+9Bk7yuM2dg==",
       "dev": true,
       "requires": {
         "argparse": "^1.0.7",
-        "entities": "~1.1.1",
+        "entities": "~2.0.0",
         "linkify-it": "^2.0.0",
         "mdurl": "^1.0.1",
         "uc.micro": "^1.0.5"
+      },
+      "dependencies": {
+        "entities": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz",
+          "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==",
+          "dev": true
+        }
       }
     },
     "markdown-it-terminal": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/markdown-it-terminal/-/markdown-it-terminal-0.1.0.tgz",
-      "integrity": "sha1-VFq9jdAcPWI1O/zqcdtYC1HSK9k=",
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/markdown-it-terminal/-/markdown-it-terminal-0.1.1.tgz",
+      "integrity": "sha512-8v4pHGEh7eiw+UbD28PRyrpu+WrnRR/HefC6NRs+Ttbk1ZQoOY6ViMrkZcdO9Y+PoBsfxNsmiJZtG9BRHEGZ2A==",
       "dev": true,
       "requires": {
         "ansi-styles": "^3.0.0",
         "cardinal": "^1.0.0",
         "cli-table": "^0.3.1",
-        "lodash.merge": "^4.6.0",
+        "lodash.merge": "^4.6.2",
         "markdown-it": "^8.3.1"
       },
       "dependencies": {
@@ -16251,16 +18004,24 @@
       "integrity": "sha1-bQUVYRyKjITkhKogABKbmOmB/ws="
     },
     "morgan": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.9.1.tgz",
-      "integrity": "sha512-HQStPIV4y3afTiCYVxirakhlCfGkI161c76kKFca7Fk1JusM//Qeo1ej2XaMniiNeaZklMVrh3vTtIzpzwbpmA==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.10.0.tgz",
+      "integrity": "sha512-AbegBVI4sh6El+1gNwvD5YIck7nSA36weD7xvIxG4in80j/UoK8AEGaWnnz8v1GxonMCltmlNs5ZKbGvl9b1XQ==",
       "dev": true,
       "requires": {
-        "basic-auth": "~2.0.0",
+        "basic-auth": "~2.0.1",
         "debug": "2.6.9",
-        "depd": "~1.1.2",
+        "depd": "~2.0.0",
         "on-finished": "~2.3.0",
-        "on-headers": "~1.0.1"
+        "on-headers": "~1.0.2"
+      },
+      "dependencies": {
+        "depd": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+          "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
+          "dev": true
+        }
       }
     },
     "mout": {
@@ -16299,17 +18060,6 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
-    "najax": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/najax/-/najax-1.0.4.tgz",
-      "integrity": "sha512-wsSacA+RkgY1wxRxXCT3tdqzmamEv9PLeoV/ub9SlLf2RngbPMSqc3A7H35XJDfURC0twMmZsnPdsYPkuuFSVg==",
-      "dev": true,
-      "requires": {
-        "jquery-deferred": "^0.3.0",
-        "lodash.defaultsdeep": "^4.6.0",
-        "qs": "^6.2.0"
-      }
-    },
     "nan": {
       "version": "2.14.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.0.tgz",
@@ -16525,15 +18275,22 @@
       "dev": true
     },
     "npm-package-arg": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-6.1.1.tgz",
-      "integrity": "sha512-qBpssaL3IOZWi5vEKUKW0cO7kzLeT+EQO9W8RsLOZf76KF9E/K9+wH0C7t06HXPpaH8WH5xF1MExLuCwbTqRUg==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/npm-package-arg/-/npm-package-arg-8.0.1.tgz",
+      "integrity": "sha512-/h5Fm6a/exByzFSTm7jAyHbgOqErl9qSNJDQF32Si/ZzgwT2TERVxRxn3Jurw1wflgyVVAxnFR4fRHPM7y1ClQ==",
       "dev": true,
       "requires": {
-        "hosted-git-info": "^2.7.1",
-        "osenv": "^0.1.5",
-        "semver": "^5.6.0",
+        "hosted-git-info": "^3.0.2",
+        "semver": "^7.0.0",
         "validate-npm-package-name": "^3.0.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+          "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==",
+          "dev": true
+        }
       }
     },
     "npm-run-path": {
@@ -17107,9 +18864,9 @@
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
     },
     "picomatch": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.1.tgz",
-      "integrity": "sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==",
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz",
+      "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==",
       "dev": true
     },
     "pify": {
@@ -17199,9 +18956,9 @@
       "integrity": "sha1-wT2RWBZ/aMoBl0iwv4MbDcXXmRA="
     },
     "portfinder": {
-      "version": "1.0.25",
-      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz",
-      "integrity": "sha512-6ElJnHBbxVA1XSLgBp7G1FiCkQdlqGzuF7DswL5tcea+E8UpuvPU7beVAjjRwCioTS9ZluNbu+ZyRvgTsmqEBg==",
+      "version": "1.0.26",
+      "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.26.tgz",
+      "integrity": "sha512-Xi7mKxJHHMI3rIUrnm/jjUgwhbYMkp/XKEcZX3aG4BrumLpq3nmoQMX+ClYnDZnZ/New7IatC1no5RX0zo1vXQ==",
       "dev": true,
       "requires": {
         "async": "^2.6.2",
@@ -17243,11 +19000,20 @@
       "dev": true
     },
     "printf": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/printf/-/printf-0.5.2.tgz",
-      "integrity": "sha512-Hn0UuWqTRd94HiCJoiCNGZTnSyXJdIF3t4/4I293hezIzyH4pQ3ai4TlH/SmRCiMvR5aNMxSYWshjQWWW6J8MQ==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/printf/-/printf-0.5.3.tgz",
+      "integrity": "sha512-t3lYN6vPU5PZXDiEZZqoyXvN8wCsBfi8gPoxTKo2e5hhV673t/KUh+mfO8P8lCOCDC/BWcOGIxKyebxc5FuqLA==",
       "dev": true
     },
+    "prismjs": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.20.0.tgz",
+      "integrity": "sha512-AEDjSrVNkynnw6A+B1DsFkd6AVdTnp+/WoUixFRULlCLZVRZlVQMVWio/16jv7G1FscUxQxOQhWwApgbnxr6kQ==",
+      "dev": true,
+      "requires": {
+        "clipboard": "^2.0.0"
+      }
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -17291,16 +19057,11 @@
         "rsvp": "^3.0.14"
       }
     },
-    "promise.prototype.finally": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/promise.prototype.finally/-/promise.prototype.finally-3.1.2.tgz",
-      "integrity": "sha512-A2HuJWl2opDH0EafgdjwEw7HysI8ff/n4lW4QEVBCUXFk9QeGecBWv0Deph0UmLe3tTNYegz8MOjsVuE6SMoJA==",
-      "dev": true,
-      "requires": {
-        "define-properties": "^1.1.3",
-        "es-abstract": "^1.17.0-next.0",
-        "function-bind": "^1.1.1"
-      }
+    "promise.hash.helper": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/promise.hash.helper/-/promise.hash.helper-1.0.7.tgz",
+      "integrity": "sha512-0qhWYyCV9TYDMSooYw1fShIb7R6hsWYja7JLqbeb1MvHqDTvP/uy/R1RsyVqDi6GCiHOI4G5p2Hpr3IA+/l/+Q==",
+      "dev": true
     },
     "propagating-hammerjs": {
       "version": "1.4.7",
@@ -17311,13 +19072,13 @@
       }
     },
     "proxy-addr": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz",
-      "integrity": "sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
+      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
       "dev": true,
       "requires": {
         "forwarded": "~0.1.2",
-        "ipaddr.js": "1.9.0"
+        "ipaddr.js": "1.9.1"
       }
     },
     "prr": {
@@ -18190,9 +19951,9 @@
       },
       "dependencies": {
         "minimist": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "version": "1.2.5",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
           "dev": true
         }
       }
@@ -18222,6 +19983,13 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "select": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
+      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=",
+      "dev": true,
+      "optional": true
+    },
     "semver": {
       "version": "5.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -18374,19 +20142,6 @@
         "debug": "^2.2.0"
       }
     },
-    "simple-dom": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/simple-dom/-/simple-dom-1.4.0.tgz",
-      "integrity": "sha512-TnBPkmOyjdaOqyBMb4ick+n8c0Xv9Iwg1PykFV7hz9Se3UCiacTbRb+25cPmvozFNJLBUNvUzX/KsPfXF14ivA==",
-      "dev": true,
-      "requires": {
-        "@simple-dom/document": "^1.4.0",
-        "@simple-dom/interface": "^1.4.0",
-        "@simple-dom/parser": "^1.4.0",
-        "@simple-dom/serializer": "^1.4.0",
-        "@simple-dom/void-map": "^1.4.0"
-      }
-    },
     "simple-html-tokenizer": {
       "version": "0.5.8",
       "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.5.8.tgz",
@@ -18641,9 +20396,9 @@
       }
     },
     "socket.io-parser": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.4.0.tgz",
-      "integrity": "sha512-/G/VOI+3DBp0+DJKW4KesGnQkQPFmUCbA/oO2QGT6CWxU7hLGWqU3tyuzeSK/dqcyeHsQg1vTe9jiZI8GU9SCQ==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.4.1.tgz",
+      "integrity": "sha512-11hMgzL+WCLWf1uFtHSNvliI++tcRUWdoeYuwIl+Axvwy9z2gQM+7nJyN3STj1tLj5JyIUH8/gpDGxzAlDdi0A==",
       "dev": true,
       "requires": {
         "component-emitter": "1.2.1",
@@ -18696,15 +20451,16 @@
       "dev": true
     },
     "sort-package-json": {
-      "version": "1.39.1",
-      "resolved": "https://registry.npmjs.org/sort-package-json/-/sort-package-json-1.39.1.tgz",
-      "integrity": "sha512-ibynHvDF6jfSpA7tok+larZUPQ4YLm4YO6nP9Iov1NuGsMyvkYm3hmKAA6LdXxwOXzqBqJjedk0rMZ2Sbyra4Q==",
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/sort-package-json/-/sort-package-json-1.44.0.tgz",
+      "integrity": "sha512-u9GUZvpavUCXV5SbEqXu9FRbsJrYU6WM10r3zA0gymGPufK5X82MblCLh9GW9l46pXKEZvK+FA3eVTqC4oMp4A==",
       "dev": true,
       "requires": {
         "detect-indent": "^6.0.0",
         "detect-newline": "3.1.0",
-        "git-hooks-list": "1.0.2",
-        "globby": "10.0.1",
+        "git-hooks-list": "1.0.3",
+        "globby": "10.0.0",
+        "is-plain-obj": "2.1.0",
         "sort-object-keys": "^1.1.3"
       },
       "dependencies": {
@@ -18713,6 +20469,12 @@
           "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-6.0.0.tgz",
           "integrity": "sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==",
           "dev": true
+        },
+        "is-plain-obj": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-2.1.0.tgz",
+          "integrity": "sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==",
+          "dev": true
         }
       }
     },
@@ -19298,9 +21060,9 @@
       }
     },
     "testem": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/testem/-/testem-3.0.2.tgz",
-      "integrity": "sha512-mUcPL7MZtmg3UUkOe6sIFXoY1ysv06qxQ7VEKnAHIAiKbf21DOdAJzVqR9YsOZcvennP9gKAUbL/607z9RQt/g==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/testem/-/testem-3.2.0.tgz",
+      "integrity": "sha512-FkFzNRCIzCxjbNSTxIQSC2tWn1Q2MTR/GTxusSw6uZA4byEQ7wc86TKutNnoCyZ5XIaD9wo4q+dmlK0GUEqFVA==",
       "dev": true,
       "requires": {
         "backbone": "^1.1.2",
@@ -19414,6 +21176,13 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tiny-emitter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
+      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==",
+      "dev": true,
+      "optional": true
+    },
     "tiny-lr": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/tiny-lr/-/tiny-lr-1.1.1.tgz",
@@ -19665,9 +21434,9 @@
       }
     },
     "underscore": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.2.tgz",
-      "integrity": "sha512-D39qtimx0c1fI3ya1Lnhk3E9nONswSKhnffBI0gME9C99fYOkNi04xs8K6pePLhvl1frbDemkaBQ5ikWllR2HQ==",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.10.2.tgz",
+      "integrity": "sha512-N4P+Q/BuyuEKFJ43B9gYuOj4TQUHXX+j2FqguVOpjkssLUUrnJofCcBccJSCoeturDoZU6GorDTHSvUDlSQbTg==",
       "dev": true
     },
     "underscore.string": {
@@ -20112,20 +21881,20 @@
       }
     },
     "websocket-driver": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz",
-      "integrity": "sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==",
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
       "dev": true,
       "requires": {
-        "http-parser-js": ">=0.4.0 <0.4.11",
+        "http-parser-js": ">=0.5.1",
         "safe-buffer": ">=5.1.0",
         "websocket-extensions": ">=0.1.1"
       }
     },
     "websocket-extensions": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.3.tgz",
-      "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
       "dev": true
     },
     "whatwg-encoding": {
@@ -20252,9 +22021,9 @@
       }
     },
     "write-file-atomic": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.1.tgz",
-      "integrity": "sha512-JPStrIyyVJ6oCSz/691fAjFtefZ6q+fP6tm+OS4Qw6o+TGQxNp1ziY2PgS+X/m0V8OWhZiO/m4xSj+Pr4RrZvw==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-3.0.3.tgz",
+      "integrity": "sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q==",
       "dev": true,
       "requires": {
         "imurmurhash": "^0.1.4",
diff --git a/package.json b/package.json
index 00d1ace04..2ccaa5d89 100644
--- a/package.json
+++ b/package.json
@@ -23,18 +23,16 @@
     "@glimmer/tracking": "^1.0.0",
     "babel-eslint": "^8.2.6",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.16.0",
+    "ember-cli": "~3.17.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-deploy": "^1.0.2",
     "ember-cli-deploy-build": "^1.1.1",
     "ember-cli-deploy-git": "^1.3.4",
     "ember-cli-eslint": "^5.1.0",
-    "ember-cli-fastboot": "~1.1.0",
     "ember-cli-inject-live-reload": "^2.0.2",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-template-lint": "^1.0.0-beta.3",
     "ember-cli-uglify": "^3.0.0",
-    "ember-code-snippet": "^2.3.1",
     "ember-cp-validations": "^4.0.0-beta.10",
     "ember-data": "^3.14.0",
     "ember-deferred-content": "~1.0.0",
@@ -43,8 +41,10 @@
     "ember-href-to": "^3.1.0",
     "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
+    "ember-prism": "^0.6.1",
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^7.0.0",
+    "ember-router-helpers": "^0.4.0",
     "ember-source": "~3.16.0",
     "ember-source-channel-url": "^2.0.1",
     "ember-try": "^1.4.0",
@@ -70,6 +70,7 @@
     "ember-cli-htmlbars": "^4.2.2",
     "ember-cli-polyfill-importer": "^0.0.4",
     "ember-cli-sass": "^10.0.1",
+    "ember-code-snippet": "^3.0.0",
     "ember-composability-tools": "^0.0.12",
     "ember-css-transitions": "^0.1.16",
     "ember-decorators": "^6.1.1",
diff --git a/tests/dummy/app/components/custom-button.js b/tests/dummy/app/components/custom-button.js
deleted file mode 100644
index f3c45bfdc..000000000
--- a/tests/dummy/app/components/custom-button.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// BEGIN-SNIPPET buttons.component
-// app/components/custom-button.js
-import Component from '@ember/component';
-
-export default Component.extend({
-  actions: {
-    targetButton() {
-      alert('You pressed a target button. -from component');
-    }
-  }
-});
-// END-SNIPPET
diff --git a/tests/dummy/app/components/doc-content.js b/tests/dummy/app/components/doc-content.js
deleted file mode 100644
index d4d9beed2..000000000
--- a/tests/dummy/app/components/doc-content.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import Component from '@ember/component';
-
-export default Component.extend({
-  tagName: '' // if wrapped in <div>, the scrollbar doesn't show
-});
diff --git a/tests/dummy/app/components/doc.hbs b/tests/dummy/app/components/doc.hbs
new file mode 100644
index 000000000..ac255b352
--- /dev/null
+++ b/tests/dummy/app/components/doc.hbs
@@ -0,0 +1,8 @@
+<PaperContent class="flex layout-row">
+  <PaperContent @scroll-y={{true}} @padding={{true}} class="flex-offset-10 flex-60">
+    {{yield}}
+  </PaperContent>
+  <PaperContent @padding={{true}} class="flex-offset-5 flex-30">
+    <Toc/>
+  </PaperContent>
+</PaperContent>
diff --git a/tests/dummy/app/templates/components/example-item.hbs b/tests/dummy/app/components/example-item.hbs
similarity index 100%
rename from tests/dummy/app/templates/components/example-item.hbs
rename to tests/dummy/app/components/example-item.hbs
diff --git a/tests/dummy/app/templates/components/menu-item.hbs b/tests/dummy/app/components/menu-item.hbs
similarity index 100%
rename from tests/dummy/app/templates/components/menu-item.hbs
rename to tests/dummy/app/components/menu-item.hbs
diff --git a/tests/dummy/app/templates/components/not-found.hbs b/tests/dummy/app/components/not-found.hbs
similarity index 100%
rename from tests/dummy/app/templates/components/not-found.hbs
rename to tests/dummy/app/components/not-found.hbs
diff --git a/tests/dummy/app/templates/components/page-toolbar.hbs b/tests/dummy/app/components/page-toolbar.hbs
similarity index 100%
rename from tests/dummy/app/templates/components/page-toolbar.hbs
rename to tests/dummy/app/components/page-toolbar.hbs
diff --git a/tests/dummy/app/components/paper-api.hbs b/tests/dummy/app/components/paper-api.hbs
new file mode 100644
index 000000000..266714b78
--- /dev/null
+++ b/tests/dummy/app/components/paper-api.hbs
@@ -0,0 +1,38 @@
+{{#if title}}
+  <i class="paper-api--title">{{title}}</i>
+{{/if}}
+
+{{yield}}
+{{! template-lint-disable table-groups }}
+<table class="paper-api--table">
+  {{#if header}}
+    <thead>
+      <tr>
+        {{#each header as |heading|}}
+          <th>{{heading}}</th>
+        {{/each}}
+      </tr>
+    </thead>
+  {{/if}}
+  {{#each categories as |category|}}
+    <tbody>
+      {{#each category as |row|}}
+        {{#if (is-subheading row)}}
+          <tr class="subheading">
+            <td colspan="3">{{row}}</td>
+          </tr>
+        {{else}}
+          <tr>
+            {{#each row as |cell index|}}
+              {{#if index}}
+                <td>{{cell}}</td>
+              {{else}}
+                <td><code>{{cell}}</code></td>
+              {{/if}}
+            {{/each}}
+          </tr>
+        {{/if}}
+      {{/each}}
+    </tbody>
+  {{/each}}
+</table>
diff --git a/tests/dummy/app/templates/components/submenu-item.hbs b/tests/dummy/app/components/submenu-item.hbs
similarity index 100%
rename from tests/dummy/app/templates/components/submenu-item.hbs
rename to tests/dummy/app/components/submenu-item.hbs
diff --git a/tests/dummy/app/components/toc.hbs b/tests/dummy/app/components/toc.hbs
new file mode 100644
index 000000000..627328467
--- /dev/null
+++ b/tests/dummy/app/components/toc.hbs
@@ -0,0 +1,10 @@
+<div class="toc">
+  <div class="toc-title">Contents</div>
+  <ul class="toc-list" {{did-insert this.onInsert}}>
+    {{#each this.headers as |header|}}
+      <li class="toc-list-item {{if (eq selected header.hashValue) "toc-list-item--selected"}}">
+        <a href="#{{header.hashValue}}">{{header.value}}</a>
+      </li>
+    {{/each}}
+  </ul>
+</div>
diff --git a/tests/dummy/app/components/toc.js b/tests/dummy/app/components/toc.js
new file mode 100644
index 000000000..5bcc39e17
--- /dev/null
+++ b/tests/dummy/app/components/toc.js
@@ -0,0 +1,43 @@
+import Component from '@glimmer/component';
+import { dasherize } from '@ember/string';
+import { action } from '@ember/object';
+import { A } from '@ember/array';
+import { tracked } from '@glimmer/tracking';
+
+function offset(el) {
+    var rect = el.getBoundingClientRect(),
+    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
+    scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
+}
+
+export default class extends Component {
+  @tracked selected;
+
+  headers = A([]);
+
+  @action
+  onInsert() {
+    const onPageHeaders = Array.from(document.querySelectorAll(".header"));
+
+    onPageHeaders.forEach((header) => {
+      const hashValue = dasherize(header.innerHTML.trim());
+      header.id = hashValue;
+
+      this.headers.pushObject({
+        tagName: header.tagName,
+        value: header.innerHTML,
+        hashValue,
+        top: offset(header).top
+      });
+    });
+
+    document.addEventListener('scroll', () => {
+      const maybeSelected = this.headers.sort((a, b) => {
+        return Math.abs(window.scrollY - a.top) - Math.abs(window.scrollY - b.top);
+      })[0];
+
+      this.selected = maybeSelected.hashValue;
+    })
+  }
+}
diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js
index 356c54f29..e9314feb1 100644
--- a/tests/dummy/app/controllers/application.js
+++ b/tests/dummy/app/controllers/application.js
@@ -4,6 +4,7 @@ import { computed } from '@ember/object';
 
 export default Controller.extend({
   actions: {
+    noop() {},
     toggleExpandedItem(value, ev) {
       if (this.get('expandedItem') === value) {
         value = null;
diff --git a/tests/dummy/app/controllers/components.js b/tests/dummy/app/controllers/components.js
new file mode 100644
index 000000000..737d86f72
--- /dev/null
+++ b/tests/dummy/app/controllers/components.js
@@ -0,0 +1,123 @@
+import Controller from '@ember/controller';
+
+export default class extends Controller {
+  get links() {
+    return [
+      {
+        text: 'Autocomplete',
+        route: 'components.autocomplete',
+        icon: 'done'
+      },
+      {
+        text: 'Button',
+        route: 'components.button',
+        icon: 'smart_button'
+      },
+      {
+        text: 'Card',
+        route: 'components.card',
+        icon: 'view_carousel'
+      },
+      {
+        text: 'Chips',
+        route: 'components.chips',
+        icon: 'label'
+      },
+      {
+        text: 'Dialog',
+        route: 'components.dialog',
+        icon: 'call'
+      },
+      {
+        text: 'Divider',
+        route: 'components.divider',
+        icon: 'linear_scale'
+      },
+      {
+        text: 'Forms',
+        route: 'components.forms',
+        icon: 'edit'
+      },
+      {
+        text: 'Grid List',
+        route: 'components.grid-list',
+        icon: 'view_compact'
+      },
+      {
+        text: 'Icon',
+        route: 'components.icon',
+        icon: 'category'
+      },
+      {
+        text: 'Input',
+        route: 'components.input',
+        icon: 'keyboard'
+      },
+      {
+        text: 'List',
+        route: 'components.list',
+        icon: 'reorder'
+      },
+      {
+        text: 'Loading',
+        route: 'components.loading',
+        icon: 'hourglass_top'
+      },
+      {
+        text: 'Menu',
+        route: 'components.menu',
+        icon: 'menu'
+      },
+      {
+        text: 'Select',
+        route: 'components.select',
+        icon: 'select_all'
+      },
+      {
+        text: 'Sidenav',
+        route: 'components.sidenav',
+        icon: 'menu_open'
+      },
+      {
+        text: 'Slider',
+        route: 'components.slider',
+        icon: 'linear_scale'
+      },
+      {
+        text: 'Sidenav',
+        route: 'components.sidenav',
+        icon: 'menu_open'
+      },
+      {
+        text: 'Speed Dial',
+        route: 'components.speed-dial',
+        icon: 'dialpad'
+      },
+      {
+        text: 'Tabs',
+        route: 'components.tabs.index',
+        icon: 'table_chart'
+      },
+      {
+        text: 'Toast',
+        route: 'components.toast',
+        icon: 'notifications_active'
+      },
+      {
+        text: 'Toggles',
+        route: 'components.toggles',
+        icon: 'toggle_on'
+      },
+      {
+        text: 'Toolbar',
+        route: 'components.toolbar',
+        icon: 'call_to_action'
+      },
+      {
+        text: 'Tooltip',
+        route: 'components.tooltip',
+        icon: 'speaker_notes'
+      },
+    ]
+  }
+}
diff --git a/tests/dummy/app/controllers/demo/autocomplete.js b/tests/dummy/app/controllers/components/autocomplete.js
similarity index 90%
rename from tests/dummy/app/controllers/demo/autocomplete.js
rename to tests/dummy/app/controllers/components/autocomplete.js
index 41d067241..9e8df7c06 100644
--- a/tests/dummy/app/controllers/demo/autocomplete.js
+++ b/tests/dummy/app/controllers/components/autocomplete.js
@@ -1,67 +1,74 @@
 import { run } from '@ember/runloop';
 import RSVP from 'rsvp';
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
 import { A } from '@ember/array';
 
 // per MDN https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions
 const escapeRegExp = (input) => {
-
   // $& means the whole matched string
   return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 };
 
-export default Controller.extend({
-  myModel: Object.freeze({ name: 'United States', code: 'US' }),
+export default class extends Controller {
+  myModel = Object.freeze({ name: 'United States', code: 'US' });
+
+  @tracked
+  searchText = '';
 
-  searchText: '',
+  @tracked
+  enableDefaultHighlighted = false;
 
   highlightFirstMatch(api) {
     if (api && api.results && api.results.length) {
       return api.results[0];
     }
     return null;
-  },
+  }
 
-  actions: {
-    updateFilter(str) {
-      this.set('searchText', str);
-    },
-    addCountry(name) {
-      this.get('items').addObject({ name, code: '' });
-    },
+  @action
+  updateFilter(str) {
+    this.searchText = str;
+  }
 
-    searchCountries(term) {
-      let XHR_TIMEOUT = Math.floor(Math.random() * 1000) + 100;
+  @action
+  addCountry(name) {
+    this.items.addObject({ name, code: '' });
+  }
 
-      return new RSVP.Promise((resolve) => {
-        run.cancel(this.searchTimer);
+  @action
+  searchCountries(term) {
+    let XHR_TIMEOUT = Math.floor(Math.random() * 1000) + 100;
 
-        this.searchTimer = run.later(this, () => {
-          let nameRegExp = new RegExp(escapeRegExp(`${term}`), 'i', 'g');
-          let countries = this.get('items');
-          let results = countries.filter((c) => nameRegExp.exec(c.name)) || [];
-          resolve(results);
-        }, XHR_TIMEOUT);
-      });
-    }
-  },
+    return new RSVP.Promise((resolve) => {
+      run.cancel(this.searchTimer);
+
+      this.searchTimer = run.later(this, () => {
+        let nameRegExp = new RegExp(escapeRegExp(`${term}`), 'i', 'g');
+        let countries = this.get('items');
+        let results = countries.filter((c) => nameRegExp.exec(c.name)) || [];
+        resolve(results);
+      }, XHR_TIMEOUT);
+    });
+  }
 
-  arrayOfItems: A(['Ember1.0', 'Ember2.0', 'Paper', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve']),
+  arrayOfItems = A(['Ember1.0', 'Ember2.0', 'Paper', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten', 'Eleven', 'Twelve']);
 
   /*
    * Array of static Objects.
    * When having objects, use lookupKey="name" on the paper-autocomplete component so it knows to use "name" to search in.
    */
-  shorterItems: A([
+  shorterItems = A([
     { name: 'Afghanistan', code: 'AF' },
     { name: 'Åland Islands', code: 'AX' },
     { name: 'Albania', code: 'AL' },
     { name: 'Algeria', code: 'DZ' },
     { name: 'American Samoa', code: 'AS' },
     { name: 'AndorrA', code: 'AD' }
-  ]),
+  ]);
 
-  items: A([
+  items = A([
     { name: 'Afghanistan', code: 'AF' },
     { name: 'Åland Islands', code: 'AX' },
     { name: 'Albania', code: 'AL' },
@@ -305,6 +312,6 @@ export default Controller.extend({
     { name: 'Yemen', code: 'YE' },
     { name: 'Zambia', code: 'ZM' },
     { name: 'Zimbabwe', code: 'ZW' }
-  ])
+  ]);
 
-});
+}
diff --git a/tests/dummy/app/controllers/components/button.js b/tests/dummy/app/controllers/components/button.js
new file mode 100644
index 000000000..7e981d294
--- /dev/null
+++ b/tests/dummy/app/controllers/components/button.js
@@ -0,0 +1,9 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class extends Controller {
+  @action
+  click() {
+    alert('You pressed a target button.');
+  }
+}
diff --git a/tests/dummy/app/controllers/components/chips.js b/tests/dummy/app/controllers/components/chips.js
new file mode 100644
index 000000000..2a15f1d7f
--- /dev/null
+++ b/tests/dummy/app/controllers/components/chips.js
@@ -0,0 +1,165 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { A } from '@ember/array';
+import faker from 'faker';
+
+function getContacts(amount) {
+  let contacts = [];
+
+  for (let i = 0; i < amount; i++) {
+    contacts.push({
+      name: faker.name.findName(),
+      email: faker.internet.email(),
+      image: faker.internet.avatar()
+    });
+  }
+
+  return contacts;
+}
+
+function getAltContacts(numOfContacts) {
+  let contacts = [];
+
+  for (let i = 0; i < numOfContacts; i++) {
+    let firstName = faker.name.firstName();
+    let lastName = faker.name.lastName();
+
+    contacts.push({
+      shortName: `${firstName} ${lastName[0]}`,
+      emailAddress: `${firstName.toLowerCase()}.${lastName[0].toLowerCase()}@example.com`,
+      profileImage: faker.internet.avatar()
+    });
+  }
+
+  return contacts;
+}
+
+export default class extends Controller {
+  numOfContacts = 10;
+
+  contacts = getContacts(10);
+
+  selectedContacts = A(this.contacts.filter((c, index) => index % 2 === 0));
+
+  altContacts = getAltContacts(10);
+
+  selectedAltContacts = A(this.altContacts.filter((c, index) => index % 2 === 0));
+
+  fruitNames = A(['Apple', 'Banana', 'Orange']);
+
+  customFruitNames = A(['Apple', 'Banana', 'Orange']);
+
+  vegetables = A([{
+    name: 'Broccoli',
+    family: 'Brassica'
+  }]);
+
+  allVegetables = A([{
+    name: 'Broccoli',
+    family: 'Brassica'
+  }, {
+    name: 'Cabbage',
+    family: 'Brassica'
+  }, {
+    name: 'Carrot',
+    family: 'Umbelliferous'
+  }, {
+    name: 'Lettuce',
+    family: 'Composite'
+  }, {
+    name: 'Spinach',
+    family: 'Goosefoot'
+  }]);
+
+  vegeNames = A(['Broccoli']);
+
+  allVegeNames = A(['Broccoli', 'Cabbage', 'Carrot', 'Lettuce', 'Spinach']);
+
+  get remainingContacts() {
+    return this.contacts.filter((c) => {
+      return this.selectedContacts.indexOf(c) === -1;
+    });
+  }
+
+  get remainingAltContacts() {
+    return this.altContacts.filter((c) => {
+      return this.selectedAltContacts.indexOf(c) === -1;
+    });
+  }
+
+  get remainingVegetables() {
+    return this.allVegetables.filter((source) => {
+      return !this.vegetables.some(function(myVegetable) {
+        return source.name === myVegetable.name;
+      });
+    });
+  }
+
+  get remainingVegeNames() {
+    return this.allVegeNames.filter((source) => {
+      return !this.vegeNames.some(function(myVegeName) {
+        return source === myVegeName;
+      });
+    });
+  }
+
+  @action
+  removeItem(item) {
+    this.fruitNames.removeObject(item);
+  }
+
+  @action
+  addItem(item) {
+    this.fruitNames.pushObject(item);
+  }
+
+  @action
+  removeCustomItem(item) {
+    this.customFruitNames.removeObject(item);
+  }
+
+  @action
+  addCustomItem(item) {
+    this.customFruitNames.pushObject(item);
+  }
+
+  @action
+  removeVegetable(item) {
+    this.vegetables.removeObject(item);
+  }
+
+  @action
+  addVegetable(item) {
+    this.vegetables.pushObject(item);
+  }
+
+  @action
+  removeVegeName(item) {
+    this.vegeNames.removeObject(item);
+  }
+
+  @action
+  addVegeName(item) {
+    this.vegeNames.pushObject(item);
+  }
+
+  @action
+  addContact(item) {
+    this.selectedContacts.pushObject(item);
+  }
+
+  @action
+  removeContact(item) {
+    this.selectedContacts.removeObject(item);
+  }
+
+  @action
+  addAltContact(item) {
+    this.selectedAltContacts.pushObject(item);
+  }
+
+  @action
+  removeAltContact(item) {
+    this.selectedAltContacts.removeObject(item);
+  }
+}
diff --git a/tests/dummy/app/controllers/components/dialog.js b/tests/dummy/app/controllers/components/dialog.js
new file mode 100644
index 000000000..e442cb332
--- /dev/null
+++ b/tests/dummy/app/controllers/components/dialog.js
@@ -0,0 +1,51 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Controller {
+  @tracked
+  dogName = '';
+
+  @action
+  openDialog(event) {
+    this.set('dialogOrigin', event.currentTarget);
+    this.set('showDialog', true);
+  }
+
+  @action
+  closeDialog(result) {
+    this.set('result', result);
+    this.set('showDialog', false);
+  }
+
+
+  @action
+  openPromptDialog() {
+    this.set('dialogOrigin', null);
+    this.set('showPromptDialog', true);
+  }
+
+  @action
+  closePromptDialog(result, dogName) {
+    if (result === 'ok') {
+      result = `${result} and dog named ${dogName}`;
+    }
+    this.set('result', result);
+    this.set('showPromptDialog', false);
+  }
+
+  @action
+  toggleSourceCode() {
+    this.toggleProperty('showSourceCode');
+  }
+
+  @action
+  openAnimatedDialog() {
+    this.set('showAnimatedDialog', true);
+  }
+
+  @action
+  closeAnimatedDialog() {
+    this.set('showAnimatedDialog', false);
+  }
+}
diff --git a/tests/dummy/app/controllers/demo/divider.js b/tests/dummy/app/controllers/components/divider.js
similarity index 58%
rename from tests/dummy/app/controllers/demo/divider.js
rename to tests/dummy/app/controllers/components/divider.js
index fbaef8764..4d164804c 100644
--- a/tests/dummy/app/controllers/demo/divider.js
+++ b/tests/dummy/app/controllers/components/divider.js
@@ -1,46 +1,31 @@
 import Controller from '@ember/controller';
 import { A } from '@ember/array';
 
-export default Controller.extend({
-  showSourceCodeFull: false,
-  showSourceCodeInset: false,
-
-  messages: A([{
-    face: 'tomster.png',
+export default class extends Controller {
+  messages = A([{
+    face: '/assets/tomster.png',
     who: 'tomster 1',
     what: 'a message for you',
     notes: 'this is a message for you about ember'
   }, {
-    face: 'tomster.png',
+    face: '/assets/tomster.png',
     who: 'tomster 2',
     what: 'a message for you',
     notes: 'this is a message for you about ember'
   }, {
-    face: 'tomster.png',
+    face: '/assets/tomster.png',
     who: 'tomster 3',
     what: 'a message for you',
     notes: 'this is a message for you about ember'
   }, {
-    face: 'tomster.png',
+    face: '/assets/tomster.png',
     who: 'tomster 4',
     what: 'a message for you',
     notes: 'this is a message for you about ember'
   }, {
-    face: 'tomster.png',
+    face: '/assets/tomster.png',
     who: 'tomster 5',
     what: 'a message for you',
     notes: 'this is a message for you about ember'
-  }]),
-
-  actions: {
-
-    toggleSourceCodeFull() {
-      this.toggleProperty('showSourceCodeFull');
-    },
-
-    toggleSourceCodeInset() {
-      this.toggleProperty('showSourceCodeInset');
-    }
-
-  }
-});
+  }]);
+}
diff --git a/tests/dummy/app/controllers/forms.js b/tests/dummy/app/controllers/components/forms.js
similarity index 53%
rename from tests/dummy/app/controllers/forms.js
rename to tests/dummy/app/controllers/components/forms.js
index 0ed90bd8e..50abfd501 100644
--- a/tests/dummy/app/controllers/forms.js
+++ b/tests/dummy/app/controllers/components/forms.js
@@ -1,8 +1,9 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 import { A } from '@ember/array';
 
-export default Controller.extend({
-  items: A([
+export default class extends Controller {
+  items = A([
     { name: 'Afghanistan', code: 'AF' },
     { name: 'Åland Islands', code: 'AX' },
     { name: 'Albania', code: 'AL' },
@@ -13,20 +14,23 @@ export default Controller.extend({
     { name: 'Anguilla', code: 'AI' },
     { name: 'Antarctica', code: 'AQ' },
     { name: 'Antigua and Barbuda', code: 'AG' }
-  ]),
+  ]);
 
-  actions: {
-    basicSubmitAction() {
-      this.set('firstName', '');
-      this.set('lastName', '');
-      this.set('age', '');
-      this.set('selectedCountry', null);
-    },
-    disabledSubmitAction() {
-      this.set('favoriteLetter', '');
-    },
-    customSubmitAction() {
-      this.set('favoriteNumber', '');
-    }
+  @action
+  basicSubmitAction() {
+    this.set('firstName', '');
+    this.set('lastName', '');
+    this.set('age', '');
+    this.set('selectedCountry', null);
   }
-});
+
+  @action
+  disabledSubmitAction() {
+    this.set('favoriteLetter', '');
+  }
+
+  @action
+  customSubmitAction() {
+    this.set('favoriteNumber', '');
+  }
+}
diff --git a/tests/dummy/app/controllers/demo/grid-list.js b/tests/dummy/app/controllers/components/grid-list.js
similarity index 100%
rename from tests/dummy/app/controllers/demo/grid-list.js
rename to tests/dummy/app/controllers/components/grid-list.js
diff --git a/tests/dummy/app/controllers/demo/input.js b/tests/dummy/app/controllers/components/input.js
similarity index 100%
rename from tests/dummy/app/controllers/demo/input.js
rename to tests/dummy/app/controllers/components/input.js
diff --git a/tests/dummy/app/controllers/components/list.js b/tests/dummy/app/controllers/components/list.js
new file mode 100644
index 000000000..6e500dc7e
--- /dev/null
+++ b/tests/dummy/app/controllers/components/list.js
@@ -0,0 +1,96 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import faker from 'faker';
+
+export default class extends Controller {
+  numOfRows = 3;
+
+  get listData() {
+    let contacts = [];
+
+    for (let i = 0; i < this.numOfRows; i++) {
+      contacts.push({
+        name: faker.name.findName(),
+        email: faker.internet.email(),
+        img: faker.internet.avatar()
+      });
+    }
+
+    return contacts;
+  }
+
+  phoneNumbers = Object.freeze([
+    {
+      number: '(555) 251-1234',
+      type: 'Home'
+    },
+    {
+      number: '(555) 786-9841',
+      type: 'Mobile'
+    },
+    {
+      number: '(555) 314-1592',
+      type: 'Office'
+    }
+  ]);
+
+  toppings = Object.freeze([
+    {
+      name: 'Pepperoni',
+      enabled: false
+    }, {
+      name: 'Sausage',
+      enabled: false
+    }, {
+      name: 'Black Olives',
+      enabled: true
+    }, {
+      name: 'Green Peppers',
+      enabled: false
+    }
+  ]);
+
+  messageData = Object.freeze([{
+    message: 'Message A'
+  }, {
+    message: 'Message B'
+  }, {
+    message: 'Message C'
+  }]);
+
+  @action
+  transitionTo(value) {
+    alert(`Imagine you transition to "${value}" here.`);
+  }
+
+  @action
+  transitionToWifiMenu() {
+    alert('Imagine you transition to wifi settings here.');
+  }
+
+  @action
+  transitionToBluetoothMenu() {
+    alert('Imagine you transition to Bluetooth settings here.');
+  }
+
+  @action
+  secondaryMessageClick() {
+    alert('Secondary actions can be used for one click actions.');
+  }
+
+  @action
+  goToPerson(person) {
+    alert(`Imagine you transition to the person full view for '${person.name}' here.`);
+  }
+
+  @action
+  secondaryPersonClick(person) {
+    alert(`'${person.name}'. Secondary actions can be used for one click actions.`);
+  }
+
+  @action
+  transitionToDataUsage() {
+    alert('Imagine you would be taken to data-usage.');
+  }
+
+}
diff --git a/tests/dummy/app/controllers/components/loading.js b/tests/dummy/app/controllers/components/loading.js
new file mode 100644
index 000000000..0f13d3731
--- /dev/null
+++ b/tests/dummy/app/controllers/components/loading.js
@@ -0,0 +1,66 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { run } from '@ember/runloop';
+
+export default class extends Controller {
+  @tracked mode = 'query';
+  @tracked determinateValue = 0;
+  @tracked determinateValue2 = 0;
+  @tracked timer = null;
+  @tracked timer2 = null;
+  @tracked sliderDiameter = 100;
+  @tracked sliderValue = null;
+  @tracked isIndeterminate = true;
+  @tracked strokeRatio = 0.1;
+
+  start() {
+    this.determinateValue = 30;
+    this.determinateValue = 30;
+    this.setupTimer();
+    this.setupTimer2();
+  }
+
+  setupTimer() {
+    this.timer = run.later(this, function() {
+      this.determinateValue += 1;
+      this.determinateValue2 += 1.5;
+      if (this.determinateValue > 100) {
+        this.determinateValue = 30;
+        this.determinateValue2 = 30;
+      }
+      this.setupTimer();
+    }, 100);
+  }
+
+  setupTimer2() {
+    this.timer2 = run.later(this, function() {
+      this.mode = this.mode === 'query' ? 'determinate' : 'query';
+      this.determinateValue = 30;
+      this.determinateValue2 = 30;
+      run.later(this, this.setupTimer2);
+    }, 7200);
+  }
+
+  stop() {
+    run.cancel(this.timer);
+    run.cancel(this.timer2);
+  }
+
+  @action
+  setValue(v) {
+    this.isIndeterminate = false;
+    this.sliderValue = v;
+  }
+
+  @action
+  setIndeterminate(value) {
+    if (value) {
+      this.isIndeterminate = true;
+      this.sliderValue = null;
+    } else {
+      this.isIndeterminate = false;
+      this.sliderValue = 50;
+    }
+  }
+}
diff --git a/tests/dummy/app/controllers/demo/menu.js b/tests/dummy/app/controllers/components/menu.js
similarity index 89%
rename from tests/dummy/app/controllers/demo/menu.js
rename to tests/dummy/app/controllers/components/menu.js
index 2df8da56e..bce4fa48b 100644
--- a/tests/dummy/app/controllers/demo/menu.js
+++ b/tests/dummy/app/controllers/components/menu.js
@@ -2,7 +2,7 @@ import Controller from '@ember/controller';
 import { A } from '@ember/array';
 import { action } from '@ember/object';
 
-export default class MenuController extends Controller {
+export default class extends Controller {
 
   options = A([1, 2, 3, 4, 5]);
 
diff --git a/tests/dummy/app/controllers/demo/select.js b/tests/dummy/app/controllers/components/select.js
similarity index 72%
rename from tests/dummy/app/controllers/demo/select.js
rename to tests/dummy/app/controllers/components/select.js
index f86a0836e..cab24070b 100644
--- a/tests/dummy/app/controllers/demo/select.js
+++ b/tests/dummy/app/controllers/components/select.js
@@ -1,39 +1,46 @@
 import Controller from '@ember/controller';
-import { computed } from '@ember/object';
 import RSVP from 'rsvp';
 import { A } from '@ember/array';
 import { run } from '@ember/runloop';
 
-export default Controller.extend({
-
-  states: computed(function() {
-    return A('AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI WY'
-      .split(' ').map((state) => ({ abbrev: state })));
-  }),
-
-  userState: computed(function() {
-    return this.get('states').objectAt(4);
-  }),
-
-  sizes: A([
+export default class extends Controller {
+  sizes = A([
     'small (12-inch)',
     'medium (14-inch)',
     'large (16-inch)',
     'insane (42-inch)'
-  ]),
+  ]);
 
-  vegetables: A([
+  vegetables = A([
     { name: 'Corn', checked: false },
     { name: 'Onions', checked: false },
     { name: 'Kale', checked: false },
     { name: 'Arugula', checked: false },
     { name: 'Peas', checked: false },
     { name: 'Zucchini', checked: false }
-  ]),
+  ]);
+
+  groupedToppings = Object.freeze([
+    { groupName: 'Meats', options: ['Pepperoni', 'Sausage', 'Ground Beef', 'Bacon'] },
+    { groupName: 'Veg', options: ['Mushrooms', 'Onion', 'Green Pepper', 'Green Olives'] }
+  ]);
+
+  get states() {
+    return A(
+      'AL AK AZ AR CA CO CT DE FL GA HI ID IL IN IA KS KY LA ME MD MA MI MN MS MO MT NE NV NH NJ NM NY NC ND OH OK OR PA RI SC SD TN TX UT VT VA WA WV WI WY'
+      .split(' ')
+      .map((state) => ({ abbrev: state }))
+    );
+  }
+
+  get userState() {
+    return this.states.objectAt(4);
+  }
+
   /*
    * Fake promise to fetch data, here you would use ember-data, jQuery.ajax or whatever you want.
    */
-  users: computed(function() {
+  get users() {
     return new RSVP.Promise((resolve) => {
       // Just wait for 800ms to 2 seconds for a fake progress, so it feels like a query.
       let waitMS = Math.floor(Math.random() * 2000) + 800;
@@ -56,9 +63,5 @@ export default Controller.extend({
       }, waitMS);
 
     });
-  }),
-  groupedToppings: Object.freeze([
-    { groupName: 'Meats', options: ['Pepperoni', 'Sausage', 'Ground Beef', 'Bacon'] },
-    { groupName: 'Veg', options: ['Mushrooms', 'Onion', 'Green Pepper', 'Green Olives'] }
-  ])
-});
+  }
+}
diff --git a/tests/dummy/app/controllers/components/sidenav.js b/tests/dummy/app/controllers/components/sidenav.js
new file mode 100644
index 000000000..0d062cef1
--- /dev/null
+++ b/tests/dummy/app/controllers/components/sidenav.js
@@ -0,0 +1,9 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class extends Controller {
+  @action
+  toggle(propName) {
+    this.toggleProperty(propName);
+  }
+}
diff --git a/tests/dummy/app/controllers/components/slider.js b/tests/dummy/app/controllers/components/slider.js
new file mode 100644
index 000000000..2de57b806
--- /dev/null
+++ b/tests/dummy/app/controllers/components/slider.js
@@ -0,0 +1,25 @@
+import Controller from '@ember/controller';
+import { htmlSafe } from '@ember/string';
+import { tracked } from '@glimmer/tracking';
+
+export default class extends Controller {
+  @tracked red = Math.floor(Math.random() * 255);
+  @tracked green =  Math.floor(Math.random() * 255);
+  @tracked blue =  Math.floor(Math.random() * 255);
+
+  rating1 = 3;
+  rating2 = 2;
+  rating3 = 4;
+
+  disabled1 = 22;
+  disabled2 = 70;
+
+  descreteDisabled1 = 2;
+  discreteDisabled2 = 6;
+
+  isSliderDisabled = true;
+
+  get colorStyle() {
+    return htmlSafe(`border: 1px solid #333; background: rgb(${this.red}, ${this.green}, ${this.blue})`);
+  }
+}
diff --git a/tests/dummy/app/controllers/components/speed-dial.js b/tests/dummy/app/controllers/components/speed-dial.js
new file mode 100644
index 000000000..acc6f5f3e
--- /dev/null
+++ b/tests/dummy/app/controllers/components/speed-dial.js
@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+
+export default class extends Controller {
+  animation = 'fling';
+  direction = 'down';
+
+  @action
+  toggle(propName) {
+    this.toggleProperty(propName);
+  }
+}
diff --git a/tests/dummy/app/controllers/components/tabs.js b/tests/dummy/app/controllers/components/tabs.js
new file mode 100644
index 000000000..ec22fd8b0
--- /dev/null
+++ b/tests/dummy/app/controllers/components/tabs.js
@@ -0,0 +1,69 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { A } from '@ember/array';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+const LOREM = `
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis
+  vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices.
+  Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.\n
+`;
+
+function getChapters() {
+  let tabs = A();
+
+  for (let i = 1; i < 5; i++) {
+    tabs.push({
+      index: i,
+      title: `Chapter ${i}`,
+      body: LOREM.repeat(i)
+    });
+  }
+
+  return tabs;
+}
+
+export default class extends Controller {
+  chapters = getChapters();
+  @tracked borderBottom = true;
+  @tracked selectedChapter = this.chapters.firstObject;
+  @tracked selectedBasicTab = 0;
+  @service router;
+
+  @action
+  toggle(propName) {
+    this.toggleProperty(propName);
+  }
+
+  @action
+  addChapter() {
+    let index = Math.max(...this.chapters.mapBy('index')) + 1;
+    let chapter = {
+      index,
+      title: this.newTitle,
+      body: this.newContent,
+    };
+    this.chapters.pushObject(chapter);
+    this.selectedChapter = chapter;
+    this.setProperties({
+      newTitle: '',
+      newContent: ''
+    });
+  }
+
+  @action
+  removeChapter(t) {
+    if (this.selectedChapter === t) {
+      let chapters = this.chapters;
+      let index = chapters.indexOf(t);
+      let newSelection = chapters.objectAt(index + 1) || chapters.objectAt(index - 1);
+      this.selectedChapter = newSelection;
+    }
+    this.chapters.removeObject(t);
+  }
+
+  @action
+  noop() {}
+}
diff --git a/tests/dummy/app/controllers/components/toast.js b/tests/dummy/app/controllers/components/toast.js
new file mode 100644
index 000000000..3a01fa008
--- /dev/null
+++ b/tests/dummy/app/controllers/components/toast.js
@@ -0,0 +1,73 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Controller {
+  @service paperToaster;
+
+  @tracked duration = 3000;
+  @tracked positionX = 'left';
+  @tracked positionY = 'bottom';
+  @tracked toastText = 'Hello world';
+  @tracked toastClass = '';
+
+  @tracked showToast = false;
+  @tracked showToastWithout = false;
+
+  @action
+  openToast() {
+    this.showToast = true;
+  }
+
+  @action
+  openToastWithout() {
+    this.showToastWithout = true;
+  }
+
+  // BEGIN-SNIPPET toast.programatic
+  @action
+  openServiceToast() {
+    this.paperToaster.show(this.toastText, {
+      duration: 4000,
+      toastClass: this.toastClass
+    });
+  }
+
+  @action
+  openServiceActionToast() {
+    this.paperToaster.show(this.toastText, {
+      duration: 4000,
+      toastClass: this.toastClass,
+      position: 'top right',
+      action: {
+        label: 'Undo',
+        accent: true,
+        onClick() {
+          alert('toast action pressed');
+        }
+      }
+    });
+  }
+  // END-SNIPPET
+
+  @action
+  cancelToast(toast) {
+    this.paperToaster.cancelToast(toast);
+  }
+
+  @action
+  closeToast() {
+    this.showToast = false;
+  }
+
+  @action
+  closeToastWithout() {
+    this.showToastWithout = false;
+  }
+
+  @action
+  buttonAction() {
+    alert('You have pressed the button!');
+  }
+}
diff --git a/tests/dummy/app/controllers/components/toggles.js b/tests/dummy/app/controllers/components/toggles.js
new file mode 100644
index 000000000..bb13be99d
--- /dev/null
+++ b/tests/dummy/app/controllers/components/toggles.js
@@ -0,0 +1,36 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Controller {
+  selectedFruit = 'Apple';
+  selectedGraphic = 'graphic-1';
+  booleanProp1 = true;
+  booleanProp2 = false;
+  booleanProp3 = false;
+  booleanProp4 = false;
+  booleanProp5 = false;
+  value1 = true;
+  value2 = false;
+  value3 = false;
+  value4 = false;
+  value5 = false;
+  value6 = false;
+
+  @tracked
+  value7;
+
+  get isIndeterminate() {
+    return this.value7 === undefined;
+  }
+
+  @action
+  toggleValue6() {
+    this.value6 = !this.value6;
+  }
+
+  @action
+  changeBooleanProp(which, newValue) {
+    this.set(`booleanProp${which}`, newValue);
+  }
+}
diff --git a/tests/dummy/app/controllers/components/tooltip.js b/tests/dummy/app/controllers/components/tooltip.js
new file mode 100644
index 000000000..2fa756a97
--- /dev/null
+++ b/tests/dummy/app/controllers/components/tooltip.js
@@ -0,0 +1,12 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class extends Controller {
+  @tracked position = 'bottom';
+
+  @action
+  toggle(propName) {
+    this.toggleProperty(propName);
+  }
+}
diff --git a/tests/dummy/app/controllers/demo/button.js b/tests/dummy/app/controllers/demo/button.js
deleted file mode 100644
index 33b1af65d..000000000
--- a/tests/dummy/app/controllers/demo/button.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import Controller from '@ember/controller';
-
-export default Controller.extend({
-  actions: {
-    raisedButton() {
-      alert('You pressed a raised button.');
-    },
-
-    flatButton() {
-      alert('You pressed a flat button.');
-    },
-
-    targetButton() {
-      alert('You pressed a target button.');
-    }
-  }
-});
diff --git a/tests/dummy/app/controllers/demo/checkbox.js b/tests/dummy/app/controllers/demo/checkbox.js
deleted file mode 100644
index 73179ba98..000000000
--- a/tests/dummy/app/controllers/demo/checkbox.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import Controller from '@ember/controller';
-import { computed } from '@ember/object';
-
-export default Controller.extend({
-  value1: true,
-  value2: false,
-  value3: false,
-  value4: false,
-  value5: false,
-  value6: false,
-
-  isIndeterminate: computed('value7', function() {
-    return this.get('value7') === undefined;
-  }),
-
-  actions: {
-    toggleValue6() {
-      this.toggleProperty('value6');
-    }
-  }
-});
diff --git a/tests/dummy/app/controllers/demo/chips.js b/tests/dummy/app/controllers/demo/chips.js
deleted file mode 100644
index 6060c81f2..000000000
--- a/tests/dummy/app/controllers/demo/chips.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import { filter } from '@ember/object/computed';
-import Controller from '@ember/controller';
-import { computed } from '@ember/object';
-import { A } from '@ember/array';
-import faker from 'faker';
-
-export default Controller.extend({
-  fruitNames: A(['Apple', 'Banana', 'Orange']),
-
-  customFruitNames: A(['Apple', 'Banana', 'Orange']),
-
-  numOfContacts: 10,
-
-  contacts: computed('numOfContacts', function() {
-    let contacts = [];
-    let numOfContacts = this.get('numOfContacts');
-
-    for (let i = 0; i < numOfContacts; i++) {
-      contacts.push({
-        name: faker.name.findName(),
-        email: faker.internet.email(),
-        image: faker.internet.avatar()
-      });
-    }
-
-    return contacts;
-  }),
-
-  selectedContacts: filter('contacts', function(c, index) {
-    return index % 2 === 0;
-  }),
-
-  remainingContacts: computed('contacts.[]', 'selectedContacts.[]', function() {
-    return this.get('contacts').filter((c) => {
-      return this.get('selectedContacts').indexOf(c) === -1;
-    });
-  }),
-
-  altContacts: computed('numOfContacts', function() {
-    let contacts = [];
-    let numOfContacts = this.get('numOfContacts');
-
-    for (let i = 0; i < numOfContacts; i++) {
-      let firstName = faker.name.firstName();
-      let lastName = faker.name.lastName();
-
-      contacts.push({
-        shortName: `${firstName} ${lastName[0]}`,
-        emailAddress: `${firstName.toLowerCase()}.${lastName[0].toLowerCase()}@example.com`,
-        profileImage: faker.internet.avatar()
-      });
-    }
-
-    return contacts;
-  }),
-
-  selectedAltContacts: filter('altContacts', function(c, index) {
-    return index % 2 === 0;
-  }),
-
-  remainingAltContacts: computed('altContacts.[]', 'selectedAltContacts.[]', function() {
-    return this.get('altContacts').filter((c) => {
-      return this.get('selectedAltContacts').indexOf(c) === -1;
-    });
-  }),
-
-  vegetables: A([{
-    name: 'Broccoli',
-    family: 'Brassica'
-  }]),
-
-  allVegetables: A([{
-    name: 'Broccoli',
-    family: 'Brassica'
-  }, {
-    name: 'Cabbage',
-    family: 'Brassica'
-  }, {
-    name: 'Carrot',
-    family: 'Umbelliferous'
-  }, {
-    name: 'Lettuce',
-    family: 'Composite'
-  }, {
-    name: 'Spinach',
-    family: 'Goosefoot'
-  }]),
-
-  remainingVegetables: computed('allVegetables.@each.name', 'vegetables.@each.name', function() {
-    return this.get('allVegetables').filter((source) => {
-      return !this.get('vegetables').any(function(myVegetable) {
-        return source.name === myVegetable.name;
-      });
-    });
-  }),
-
-  vegeNames: A(['Broccoli']),
-
-  allVegeNames: A(['Broccoli', 'Cabbage', 'Carrot', 'Lettuce', 'Spinach']),
-
-  remainingVegeNames: computed('vegeNames.length', function() {
-    return this.get('allVegeNames').filter((source) => {
-      return !this.get('vegeNames').any(function(myVegeName) {
-        return source === myVegeName;
-      });
-    });
-  }),
-
-  actions: {
-    removeItem(item) {
-      this.get('fruitNames').removeObject(item);
-    },
-
-    addItem(item) {
-      this.get('fruitNames').pushObject(item);
-    },
-
-    removeCustomItem(item) {
-      this.get('customFruitNames').removeObject(item);
-    },
-
-    addCustomItem(item) {
-      this.get('customFruitNames').pushObject(item);
-    },
-
-    removeVegetable(item) {
-      this.get('vegetables').removeObject(item);
-    },
-
-    addVegetable(item) {
-      this.get('vegetables').pushObject(item);
-    },
-
-    removeVegeName(item) {
-      this.get('vegeNames').removeObject(item);
-    },
-
-    addVegeName(item) {
-      this.get('vegeNames').pushObject(item);
-    },
-
-    addContact(item) {
-      this.get('selectedContacts').pushObject(item);
-    },
-
-    removeContact(item) {
-      this.get('selectedContacts').removeObject(item);
-    },
-
-    addAltContact(item) {
-      this.get('selectedAltContacts').pushObject(item);
-    },
-
-    removeAltContact(item) {
-      this.get('selectedAltContacts').removeObject(item);
-    }
-  }
-});
diff --git a/tests/dummy/app/controllers/demo/dialog.js b/tests/dummy/app/controllers/demo/dialog.js
deleted file mode 100644
index ca6f7e33f..000000000
--- a/tests/dummy/app/controllers/demo/dialog.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import Controller from '@ember/controller';
-
-export default Controller.extend({
-  actions: {
-
-    /* Dialog with parent */
-    openDialogWithParent(event) {
-      this.set('dialogOrigin', event.currentTarget);
-      this.set('showDialogWithParent', true);
-    },
-
-    closeDialogWithParent(result) {
-      this.set('result', result);
-      this.set('showDialogWithParent', false);
-    },
-
-    /* Dialog */
-    openDialog(event) {
-      this.set('dialogOrigin', event.currentTarget);
-      this.set('showDialog', true);
-    },
-
-    closeDialog(result) {
-      this.set('result', result);
-      this.set('showDialog', false);
-    },
-
-    /* Prompt dialog */
-    dogName: '',
-    openPromptDialog(/* param, event */) {
-      this.set('dialogOrigin', null);
-      this.set('showPromptDialog', true);
-    },
-
-    closePromptDialog(result, dogName) {
-      if (result === 'ok') {
-        result = `${result} and dog named ${dogName}`;
-      }
-      this.set('result', result);
-      this.set('showPromptDialog', false);
-    },
-
-    toggleSourceCode() {
-      this.toggleProperty('showSourceCode');
-    },
-
-    /* Animated dialog */
-    openAnimatedDialog() {
-      this.set('showAnimatedDialog', true);
-    },
-
-    closeAnimatedDialog() {
-      this.set('showAnimatedDialog', false);
-    }
-
-  }
-});
diff --git a/tests/dummy/app/controllers/demo/list.js b/tests/dummy/app/controllers/demo/list.js
deleted file mode 100644
index 089220a42..000000000
--- a/tests/dummy/app/controllers/demo/list.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import Controller from '@ember/controller';
-import { computed } from '@ember/object';
-import faker from 'faker';
-
-export default Controller.extend({
-  numOfRows: 3,
-
-  listData: computed('numOfRows', function() {
-    let contacts = [];
-    let numOfRows = this.get('numOfRows');
-
-    for (let i = 0; i < numOfRows; i++) {
-      contacts.push({
-        name: faker.name.findName(),
-        email: faker.internet.email(),
-        img: faker.internet.avatar()
-      });
-    }
-
-    return contacts;
-  }),
-
-  phoneNumbers: Object.freeze([
-    {
-      number: '(555) 251-1234',
-      type: 'Home'
-    },
-    {
-      number: '(555) 786-9841',
-      type: 'Mobile'
-    },
-    {
-      number: '(555) 314-1592',
-      type: 'Office'
-    }
-  ]),
-
-  toppings: Object.freeze([
-    {
-      name: 'Pepperoni',
-      enabled: false
-    }, {
-      name: 'Sausage',
-      enabled: false
-    }, {
-      name: 'Black Olives',
-      enabled: true
-    }, {
-      name: 'Green Peppers',
-      enabled: false
-    }
-  ]),
-
-  messageData: Object.freeze([{
-    message: 'Message A'
-  }, {
-    message: 'Message B'
-  }, {
-    message: 'Message C'
-  }]),
-
-  actions: {
-    transitionTo(value) {
-      alert(`Imagine you transition to "${value}" here.`);
-    },
-    transitionToWifiMenu() {
-      alert('Imagine you transition to wifi settings here.');
-    },
-    transitionToBluetoothMenu() {
-      alert('Imagine you transition to Bluetooth settings here.');
-    },
-    secondaryMessageClick() {
-      alert('Secondary actions can be used for one click actions.');
-    },
-    goToPerson(person) {
-      alert(`Imagine you transition to the person full view for '${person.name}' here.`);
-    },
-    secondaryPersonClick(person) {
-      alert(`'${person.name}'. Secondary actions can be used for one click actions.`);
-    },
-    transitionToDataUsage() {
-      alert('Imagine you would be taken to data-usage.');
-    }
-  }
-
-});
diff --git a/tests/dummy/app/controllers/demo/progress-circular.js b/tests/dummy/app/controllers/demo/progress-circular.js
deleted file mode 100644
index dec8930fe..000000000
--- a/tests/dummy/app/controllers/demo/progress-circular.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import Controller from '@ember/controller';
-import { run } from '@ember/runloop';
-
-export default Controller.extend({
-  mode: 'query',
-  determinateValue: 0,
-  timer: null,
-
-  start() {
-    this.set('determinateValue', 30);
-    this.setupTimer();
-  },
-
-  setupTimer() {
-    this.set('timer', run.later(this, function() {
-      let value = this.incrementProperty('determinateValue', 1);
-      if (value > 100) {
-        this.set('determinateValue', 30);
-      }
-      this.setupTimer();
-    }, 100));
-  },
-
-  stop() {
-    run.cancel(this.get('timer'));
-  },
-
-  sliderDiameter: 100,
-  sliderValue: null,
-  isIndeterminate: true,
-  strokeRatio: 0.1,
-
-  actions: {
-    setValue(v) {
-      this.set('isIndeterminate', false);
-      this.set('sliderValue', v);
-    },
-
-    setIndeterminate(value) {
-      if (value) {
-        this.set('isIndeterminate', true);
-        this.set('sliderValue', null);
-      } else {
-        this.set('isIndeterminate', false);
-        this.set('sliderValue', 50);
-      }
-    }
-  }
-
-});
diff --git a/tests/dummy/app/controllers/demo/progress-linear.js b/tests/dummy/app/controllers/demo/progress-linear.js
deleted file mode 100644
index 12aa60e99..000000000
--- a/tests/dummy/app/controllers/demo/progress-linear.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import Controller from '@ember/controller';
-import { run } from '@ember/runloop';
-
-export default Controller.extend({
-
-  mode: 'query',
-  determinateValue: 0,
-  determinateValue2: 0,
-  timer: null,
-  timer2: null,
-
-  start() {
-    this.set('determinateValue', 30);
-    this.set('determinateValue2', 30);
-    this.setupTimer();
-    this.setupTimer2();
-  },
-
-  setupTimer() {
-    this.set('timer', run.later(this, function() {
-      let value = this.incrementProperty('determinateValue', 1);
-      this.incrementProperty('determinateValue2', 1.5);
-      if (value > 100) {
-        this.set('determinateValue', 30);
-        this.set('determinateValue2', 30);
-      }
-
-      this.setupTimer();
-
-    }, 100));
-  },
-
-  setupTimer2() {
-    this.set('timer2', run.later(this, function() {
-      this.set('mode', this.get('mode') === 'query' ? 'determinate' : 'query');
-      this.set('determinateValue', 30);
-      this.set('determinateValue2', 30);
-      run.later(this, this.setupTimer2);
-    }, 7200));
-  },
-
-  stop() {
-    run.cancel(this.get('timer'));
-    run.cancel(this.get('timer2'));
-  }
-
-});
diff --git a/tests/dummy/app/controllers/demo/sidenav.js b/tests/dummy/app/controllers/demo/sidenav.js
deleted file mode 100644
index 569cf68fa..000000000
--- a/tests/dummy/app/controllers/demo/sidenav.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import Controller from '@ember/controller';
-
-export default Controller.extend({
-  actions: {
-    toggle(propName) {
-      this.toggleProperty(propName);
-    }
-  }
-});
\ No newline at end of file
diff --git a/tests/dummy/app/controllers/demo/slider.js b/tests/dummy/app/controllers/demo/slider.js
deleted file mode 100644
index f59d1d9a7..000000000
--- a/tests/dummy/app/controllers/demo/slider.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import Controller from '@ember/controller';
-import { computed } from '@ember/object';
-import { htmlSafe } from '@ember/string';
-
-let color = {
-  red: Math.floor(Math.random() * 255),
-  green: Math.floor(Math.random() * 255),
-  blue: Math.floor(Math.random() * 255)
-};
-
-export default Controller.extend({
-  color,
-
-  colorStyle: computed('color.{red,green,blue}', function() {
-    return htmlSafe(`border: 1px solid #333; background: rgb(${this.get('color.red')}, ${this.get('color.green')}, ${this.get('color.blue')})`);
-  }),
-
-  rating1: 3,
-  rating2: 2,
-  rating3: 4,
-
-  disabled1: 22,
-  disabled2: 70,
-
-  descreteDisabled1: 2,
-  discreteDisabled2: 6,
-
-  isSliderDisabled: true
-});
diff --git a/tests/dummy/app/controllers/demo/speed-dial.js b/tests/dummy/app/controllers/demo/speed-dial.js
deleted file mode 100644
index 58dd2ef50..000000000
--- a/tests/dummy/app/controllers/demo/speed-dial.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import Controller from '@ember/controller';
-
-export default Controller.extend({
-  animation: 'fling',
-  direction: 'down',
-
-  actions: {
-    toggle(propName) {
-      this.toggleProperty(propName);
-    }
-  }
-});
\ No newline at end of file
diff --git a/tests/dummy/app/controllers/demo/switch.js b/tests/dummy/app/controllers/demo/switch.js
deleted file mode 100644
index 22259760b..000000000
--- a/tests/dummy/app/controllers/demo/switch.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Controller from '@ember/controller';
-
-export default Controller.extend({
-  booleanProp1: true,
-  booleanProp2: false,
-  booleanProp3: false,
-  booleanProp4: false,
-  booleanProp5: false,
-
-  actions: {
-    changeBooleanProp(which, newValue) {
-      this.set(`booleanProp${which}`, newValue);
-    }
-  }
-
-});
diff --git a/tests/dummy/app/controllers/demo/tabs.js b/tests/dummy/app/controllers/demo/tabs.js
deleted file mode 100644
index 079111fd4..000000000
--- a/tests/dummy/app/controllers/demo/tabs.js
+++ /dev/null
@@ -1,70 +0,0 @@
-import { inject as service } from '@ember/service';
-import { readOnly, reads } from '@ember/object/computed';
-import Controller from '@ember/controller';
-import { computed } from '@ember/object';
-import { A } from '@ember/array';
-
-const LOREM = `
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis
-  vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices.
-  Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.\n
-`;
-
-export default Controller.extend({
-  borderBottom: true,
-
-  selectedBasicTab: 0,
-
-  router: service(),
-
-  currentRouteName: readOnly('router.currentRouteName'),
-
-  chapters: computed(function() {
-    let tabs = A();
-    for (let i = 1; i < 5; i++) {
-      tabs.push({
-        index: i,
-        title: `Chapter ${i}`,
-        body: LOREM.repeat(i)
-      });
-    }
-
-    return tabs;
-  }),
-
-  selectedChapter: reads('chapters.firstObject'),
-
-  actions: {
-    toggle(propName) {
-      this.toggleProperty(propName);
-    },
-
-    addChapter() {
-      let index = Math.max(...this.get('chapters').mapBy('index')) + 1;
-      let chapter = {
-        index,
-        title: this.get('newTitle'),
-        body: this.get('newContent')
-      };
-      this.get('chapters').pushObject(chapter);
-      this.set('selectedChapter', chapter);
-      this.setProperties({
-        newTitle: '',
-        newContent: ''
-      });
-    },
-
-    removeChapter(t) {
-      if (this.get('selectedChapter') === t) {
-        let chapters = this.get('chapters');
-        let index = chapters.indexOf(t);
-        let newSelection = chapters.objectAt(index + 1) || chapters.objectAt(index - 1);
-        this.set('selectedChapter', newSelection);
-      }
-      this.get('chapters').removeObject(t);
-    },
-
-    noop() {}
-  }
-});
diff --git a/tests/dummy/app/controllers/demo/toast.js b/tests/dummy/app/controllers/demo/toast.js
deleted file mode 100644
index 171608dd1..000000000
--- a/tests/dummy/app/controllers/demo/toast.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { inject as service } from '@ember/service';
-import Controller from '@ember/controller';
-
-export default Controller.extend({
-  duration: 3000,
-  positionX: 'left',
-  positionY: 'bottom',
-  toastText: 'Hello world',
-  toastClass: '',
-
-  paperToaster: service(),
-
-  actions: {
-    /* Toast */
-    openToast() {
-      this.set('showToast', true);
-    },
-    openToastWithout() {
-      this.set('showToastWithout', true);
-    },
-    // BEGIN-SNIPPET toaster
-    openServiceToast() {
-      this.get('paperToaster').show(this.get('toastText'), {
-        duration: 4000,
-        toastClass: this.get('toastClass')
-      });
-    },
-
-    openServiceActionToast() {
-      this.get('paperToaster').show(this.get('toastText'), {
-        duration: 4000,
-        toastClass: this.get('toastClass'),
-        action: {
-          label: 'Undo',
-          accent: true,
-          onClick() {
-            alert('toast action pressed');
-          }
-        }
-      });
-    },
-    // END-SNIPPET
-    cancelToast(toast) {
-      this.get('paperToaster').cancelToast(toast);
-    },
-    closeToast() {
-      this.set('showToast', false);
-    },
-    closeToastWithout() {
-      this.set('showToastWithout', false);
-    },
-    toggleSourceCode() {
-      this.toggleProperty('showSourceCode');
-    },
-    buttonAction() {
-      alert('You have pressed the button!');
-    }
-  }
-});
diff --git a/tests/dummy/app/controllers/demo/tooltip.js b/tests/dummy/app/controllers/demo/tooltip.js
deleted file mode 100644
index 42969126f..000000000
--- a/tests/dummy/app/controllers/demo/tooltip.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import Controller from '@ember/controller';
-
-export default Controller.extend({
-  position: 'bottom',
-
-  actions: {
-    toggle(propName) {
-      this.toggleProperty(propName);
-    }
-  }
-});
\ No newline at end of file
diff --git a/tests/dummy/app/controllers/demo/radio.js b/tests/dummy/app/controllers/introduction.js
similarity index 58%
rename from tests/dummy/app/controllers/demo/radio.js
rename to tests/dummy/app/controllers/introduction.js
index 40b755ea1..9a4107bb3 100644
--- a/tests/dummy/app/controllers/demo/radio.js
+++ b/tests/dummy/app/controllers/introduction.js
@@ -1,8 +1,7 @@
 import Controller from '@ember/controller';
 
 export default Controller.extend({
-
-  selectedFruit: 'Apple',
-  selectedGraphic: 'graphic-1'
-
+  box1Height: 20,
+  direction: 'row',
+  hideBox: true
 });
diff --git a/tests/dummy/app/controllers/layout/child-alignment.js b/tests/dummy/app/controllers/layout/child-alignment.js
index 8e155b662..eaa708855 100644
--- a/tests/dummy/app/controllers/layout/child-alignment.js
+++ b/tests/dummy/app/controllers/layout/child-alignment.js
@@ -1,13 +1,17 @@
 import Controller from '@ember/controller';
-import { computed } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
-export default Controller.extend({
-  layoutClass: computed('layoutDirection', function() {
-    return `layout-${this.get('layoutDirection')}`;
-  }),
+export default class extends Controller {
+  @tracked layoutDirection = 'row';
+  @tracked mainDirection = 'center';
+  @tracked perpDirection = 'center';
 
-  layoutAlignClass: computed('mainDirection', 'perpDirection', function() {
-    let { mainDirection, perpDirection } = this.getProperties('mainDirection', 'perpDirection');
+  get layoutClass() {
+    return `layout-${this.layoutDirection}`;
+  }
+
+  get layoutAlignClass() {
+    const { mainDirection, perpDirection } = this;
 
     if (!mainDirection && !perpDirection) {
       return 'layout-align';
@@ -20,9 +24,5 @@ export default Controller.extend({
     }
 
     return '';
-  }),
-
-  layoutDirection: 'row',
-  mainDirection: 'center',
-  perpDirection: 'center'
-});
+  }
+}
diff --git a/tests/dummy/app/controllers/layout/introduction.js b/tests/dummy/app/controllers/layout/introduction.js
index 9a4107bb3..a5ad822e1 100644
--- a/tests/dummy/app/controllers/layout/introduction.js
+++ b/tests/dummy/app/controllers/layout/introduction.js
@@ -1,7 +1,8 @@
 import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
 
-export default Controller.extend({
-  box1Height: 20,
-  direction: 'row',
-  hideBox: true
-});
+export default class extends Controller {
+  @tracked box1Height = 20;
+  @tracked direction = 'row';
+  @tracked hideBox = true;
+}
diff --git a/tests/dummy/app/controllers/theme.js b/tests/dummy/app/controllers/theme.js
index d161f3bc8..7d5dc44df 100644
--- a/tests/dummy/app/controllers/theme.js
+++ b/tests/dummy/app/controllers/theme.js
@@ -1,12 +1,12 @@
 import Controller from '@ember/controller';
-import { inject } from '@ember/service';
+import { inject as service } from '@ember/service';
 import { and, not } from '@ember/object/computed';
 
 import PALETTES from 'ember-paper/utils/palettes';
 import { computed } from '@ember/object';
 
 export default Controller.extend({
-  paperTheme: inject(),
+  paperTheme: service('paper-theme'),
 
   palettes: computed(function() {
     return Object.keys(PALETTES).map((key) => {
diff --git a/tests/dummy/app/helpers/eq.js b/tests/dummy/app/helpers/eq.js
new file mode 100644
index 000000000..9e56edab1
--- /dev/null
+++ b/tests/dummy/app/helpers/eq.js
@@ -0,0 +1,7 @@
+import Helper from '@ember/component/helper';
+
+export default class extends Helper {
+  compute([a, b]) {
+    return a === b;
+  }
+}
diff --git a/tests/dummy/app/helpers/is-active.js b/tests/dummy/app/helpers/is-active.js
index 3e7995d7e..dc7df47cb 100644
--- a/tests/dummy/app/helpers/is-active.js
+++ b/tests/dummy/app/helpers/is-active.js
@@ -1,7 +1,25 @@
 import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
 
-export default Helper.extend({
-  compute([routeName, activeRoute]) {
-    return activeRoute === routeName;
+export default class extends Helper {
+  @service router;
+
+  compute([routeName]) {
+    if (this.router.currentRouteName.indexOf('.') > -1) {
+      const routeParts = this.router.currentRouteName.split('.');
+      let isParentRoute = false;
+      let fullRoute = '';
+      routeParts.forEach((part, i) => {
+        fullRoute += i === 0 ? part : '.' + part;
+
+        if (fullRoute === routeName) {
+          isParentRoute = true;
+        }
+      });
+
+      if (isParentRoute) return true;
+    }
+
+    return this.router.currentRouteName === routeName;
   }
-});
+}
diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js
index 0d2e12927..63e28b20d 100644
--- a/tests/dummy/app/router.js
+++ b/tests/dummy/app/router.js
@@ -7,14 +7,7 @@ export default class Router extends EmberRouter {
 }
 
 Router.map(function() {
-  this.route('introduction');
-  this.route('forms');
-  this.route('typography');
-  this.route('theme');
-  this.route('cookbook');
-  this.route('addons');
-
-  this.route('demo', { path: 'components' }, function() {
+  this.route('components', function() {
     this.route('autocomplete');
     this.route('button');
     this.route('card');
@@ -22,31 +15,31 @@ Router.map(function() {
     this.route('chips');
     this.route('dialog');
     this.route('divider');
+    this.route('forms');
     this.route('grid-list');
-    this.route('icons', { path: 'icon' });
+    this.route('icon');
     this.route('input');
     this.route('list');
     this.route('menu');
     this.route('tabs', function() {
       this.route('nested-route');
     });
-    this.route('progress-circular');
-    this.route('progress-linear');
-    this.route('radio');
+    this.route('loading');
+    this.route('toggles');
     this.route('select');
     this.route('sidenav');
     this.route('slider');
     this.route('speed-dial');
-    this.route('switch');
     this.route('toast');
     this.route('toolbar');
     this.route('tooltip');
   });
-
   this.route('layout', function() {
     this.route('introduction');
-    this.route('layout-containers');
-    this.route('layout-children');
     this.route('child-alignment');
+    this.route('layout-children');
+    this.route('layout-containers');
   });
+  this.route('theme');
+  this.route('addons');
 });
diff --git a/tests/dummy/app/routes/application.js b/tests/dummy/app/routes/application.js
index 8ba24d327..7d62f8945 100644
--- a/tests/dummy/app/routes/application.js
+++ b/tests/dummy/app/routes/application.js
@@ -1,12 +1,3 @@
 import Route from '@ember/routing/route';
 
-export default Route.extend({
-  actions: {
-    willTransition() {
-      this.controller.set('drawerOpen', false);
-    },
-    alertValue(value) {
-      alert(`You clicked Radio button: ${value}`);
-    }
-  }
-});
+export default class extends Route {}
diff --git a/tests/dummy/app/routes/components/index.js b/tests/dummy/app/routes/components/index.js
new file mode 100644
index 000000000..ac5b24e92
--- /dev/null
+++ b/tests/dummy/app/routes/components/index.js
@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default class extends Route {
+  beforeModel() {
+    this.transitionTo('components.autocomplete')
+  }
+}
diff --git a/tests/dummy/app/routes/components/input.js b/tests/dummy/app/routes/components/input.js
new file mode 100644
index 000000000..ee852678d
--- /dev/null
+++ b/tests/dummy/app/routes/components/input.js
@@ -0,0 +1,18 @@
+import Route from '@ember/routing/route';
+import { action } from '@ember/object';
+
+export default class extends Route {
+  model() {
+    // Create a new record for demonstration purposes. Normally, data
+    // would be retrieved from the store via find or findAll.
+    return this.store.createRecord('user', {});
+  }
+
+  @action
+  willTransition() {
+    // Clean up the record created for demonstration purposes.
+    let record = this.modelFor('components.input');
+    record.rollbackAttributes();
+    this.store.unloadRecord(record);
+  }
+}
diff --git a/tests/dummy/app/routes/demo/progress-linear.js b/tests/dummy/app/routes/components/loading.js
similarity index 66%
rename from tests/dummy/app/routes/demo/progress-linear.js
rename to tests/dummy/app/routes/components/loading.js
index 791b2ffea..7afff6e7e 100644
--- a/tests/dummy/app/routes/demo/progress-linear.js
+++ b/tests/dummy/app/routes/components/loading.js
@@ -4,11 +4,11 @@ import { on } from '@ember/object/evented';
 export default Route.extend({
 
   onActivate: on('activate', function() {
-    this.controllerFor('demo.progress-linear').start();
+    this.controllerFor('components.loading').start();
   }),
 
   onDeactivate: on('deactivate', function() {
-    this.controllerFor('demo.progress-linear').stop();
+    this.controllerFor('components.loading').stop();
   })
 
 });
diff --git a/tests/dummy/app/routes/demo/input.js b/tests/dummy/app/routes/demo/input.js
deleted file mode 100644
index cd1587500..000000000
--- a/tests/dummy/app/routes/demo/input.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import Route from '@ember/routing/route';
-
-export default Route.extend({
-  model() {
-    // Create a new record for demonstration purposes. Normally, data
-    // would be retrieved from the store via find or findAll.
-    return this.store.createRecord('user', {});
-  },
-
-  actions: {
-
-    willTransition() {
-      // Clean up the record created for demonstration purposes.
-      let record = this.modelFor('demo.input');
-      record.rollbackAttributes();
-      this.store.unloadRecord(record);
-    }
-
-  }
-});
diff --git a/tests/dummy/app/routes/demo/progress-circular.js b/tests/dummy/app/routes/demo/progress-circular.js
deleted file mode 100644
index d71d9d026..000000000
--- a/tests/dummy/app/routes/demo/progress-circular.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import Route from '@ember/routing/route';
-import { on } from '@ember/object/evented';
-
-export default Route.extend({
-
-  onActivate: on('activate', function() {
-    this.controllerFor('demo.progress-circular').start();
-  }),
-
-  onDeactivate: on('deactivate', function() {
-    this.controllerFor('demo.progress-circular').stop();
-  })
-
-});
diff --git a/tests/dummy/app/routes/layout.js b/tests/dummy/app/routes/layout.js
new file mode 100644
index 000000000..728c67f88
--- /dev/null
+++ b/tests/dummy/app/routes/layout.js
@@ -0,0 +1,9 @@
+import Route from '@ember/routing/route';
+
+export default class extends Route {
+  beforeModel(transition) {
+    if(transition.to.name === 'layout.index') {
+      this.transitionTo('layout.introduction');
+    }
+  }
+}
diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
index 64b50ec70..d120d5fec 100644
--- a/tests/dummy/app/styles/app.scss
+++ b/tests/dummy/app/styles/app.scss
@@ -1,47 +1,113 @@
-$primary: 'deep-orange';
-$warn: 'amber';
-$accent: 'pink';
-
 @import 'ember-paper';
+
+$flexbox-shadow: inset 0px 0px 5px 0 rgba(0,0,0,0.16);
+$flexbox-color1: paper-color('deep-purple', '200');
+$flexbox-color2: paper-color('orange', '400');
+$flexbox-color3: paper-color('blue', '300');
+$flexbox-color4: paper-color('teal', '200');
+$flexbox-color5: paper-color('pink', '300');
+$flexbox-color6: paper-color('lime', '300');
+$flexbox-color7: paper-color('amber', '300');
+
 @import 'demo';
 
-/**
- * Needed styles to set correct widths.
- */
 
-body {
-  max-width: 100%;
-  max-height: 100%;
+pre.code-block {
+  background-color: rgba(0,0,0,.06) !important;
+  margin-left: -15px;
+  margin-right: -15px;
 }
 
-body.ember-application {
-  flex-direction: row;
-  flex: 1;
-  display: flex;
+.content-section {
+  padding: 64px;
 }
 
-body > div.ember-view {
-  flex-direction: row;
-  flex: 1;
+.hero {
+  height: 300px;
+  padding: 64px;
+  align-items: center;
+  align-content: center;
   display: flex;
-}
 
-.site-nav-container {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  &.hero--indigo {
+    background-color: paper-color('indigo', '200');
+    color: #ffffff;
+  }
+  &.hero--orange {
+    background-color: paper-color('orange', '200');
+    color: #ffffff;
+  }
 }
 
-md-toolbar.md-warn {
-  a, button {
-    &.md-button.md-default-theme:not(.md-primary):not(.md-accent) {
-      color: $dark-contrast-color;
+.toc {
+  position: fixed;
+
+  .toc-title {
+    margin-left: 8px;
+  }
+
+  .toc-list {
+    margin: 0;
+    margin-top: 10px;
+    margin-left: 10px;
+    padding: 0;
+    list-style: none;
+  }
+
+  .toc-list-item {
+    width: 100%;
+    height: auto;
+    min-height: 32px;
+    border-left: 2px solid rgba(0, 0, 0, 0.12);
+
+    a {
+      padding: 8px 0 8px 16px;
+      line-height: 1.5;
+      font-weight: 400;
+      text-decoration: none;
+      color: #616161;
+    }
+  }
+
+  .toc-list-item--selected {
+    border-left: 2px solid #212121;
+    opacity: 1;
+    font-weight: 700;
+    letter-spacing: 0;
+
+    a {
+      color: #212121;
     }
   }
 }
 
-.inner-sidenav {
-  position: relative;
+.introduction-example {
+  height: 350px;
+
+  .box-one {
+    background-color: $flexbox-color1;
+  }
+
+  .box-two-one {
+    background-color: $flexbox-color2;
+  }
+  .box-two-two {
+    background-color: $flexbox-color3;
+  }
+  .box-two-three {
+    background-color: $flexbox-color4;
+  }
+  .box-three {
+    background-color: $flexbox-color5;
+  }
+}
+
+.one {
+  background-color: $flexbox-color1;
+}
+.two {
+  background-color: $flexbox-color2;
+}
+.three {
+  background-color: $flexbox-color3;
 }
diff --git a/tests/dummy/app/styles/demo.scss b/tests/dummy/app/styles/demo.scss
index b69d51002..94d38d235 100644
--- a/tests/dummy/app/styles/demo.scss
+++ b/tests/dummy/app/styles/demo.scss
@@ -1,10 +1,6 @@
 /***************
  * Styles specific for the ember-paper demo site
  ***************/
-@import 'highlight-overrides';
-@import 'modules/all';
-@import 'layout-demo';
-
 html {
   font-size: 62.5%;
   line-height: 1.4;
@@ -15,142 +11,57 @@ body {
 }
 
 table {
-  margin-bottom: 8px;
-  max-width: 100%;
-  width: 100%;
-  border-spacing: 0;
-  border-radius: 2px;
-  overflow: hidden;
+    position: relative;
+    border: 1px solid rgba(0,0,0,.12);
+    border-collapse: collapse;
+    font-size: 13px;
+    background-color: #fff;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)
 }
 
-.table-wrapper {
-  flex: 1;
-  overflow: auto;
+thead {
+    padding-bottom: 3px;
 }
 
-#main {
+th {
   position: relative;
-}
-
- md-select-menu md-content md-option:not([disabled]):focus, md-select-menu.md-default-theme md-content md-option:not([disabled]):hover, md-select-menu md-content md-option:not([disabled]):hover {
-    background: rgb(238,238,238);
-}
-
-.header {
-  background-color: #106CC8;
-  color: white;
-  text-align: center;
-  font-weight: bold;
-}
-
-.flex-start {
-  align-self: flex-start;
-}
-
-/***************
- * TYPE DEFAULTS
- ***************/
-a {
-  color: #106CC8;
-  text-decoration: none;
-  font-weight: 400;
-  border-bottom: 1px solid rgba(64, 84, 178, 0.25);
-  -webkit-transition: border-bottom 0.35s;
-  -moz-transition: border-bottom 0.35s;
-  -ms-transition: border-bottom 0.35s;
-  -o-transition: border-bottom 0.35s;
-  transition: border-bottom 0.35s;
-}
-
-a:hover, a:focus {
-  border-bottom: 1px solid #4054B2;
-}
-
-a.md-button {
-  border-bottom: none;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin-bottom: 1rem;
-  margin-top: 1rem;
-}
-
-h1 {
-  font-size: 3.400rem;
-  font-weight: 400;
-  line-height: 4rem;
-}
-
-h2 {
-  font-size: 2.400rem;
-  font-weight: 400;
-  line-height: 3.2rem;
-}
-
-h3 {
-  font-size: 2.000rem;
-  font-weight: 500;
-  letter-spacing: 0.005em;
-}
-
-h4 {
-  font-size: 1.600rem;
-  font-weight: 400;
-  letter-spacing: 0.010em;
-  line-height: 2.4rem;
-}
-
-p {
-  font-size: 1.6rem;
-  font-weight: 400;
-  letter-spacing: 0.010em;
-  line-height: 1.6em;
-  margin: 0.8em 0 1.6em;
-}
-
-strong {
-  font-weight: 500;
-}
-
-td, th {
-  padding: 12px 16px;
-  text-align: left;
+  vertical-align: bottom;
+  text-overflow: ellipsis;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0;
+  height: 48px;
+  font-size: 12px;
+  color: rgba(0,0,0,.54);
+  padding-bottom: 8px;
+  box-sizing: border-box;
 }
 
 td {
-  vertical-align: top;
-}
-
-td.description *:first-child {
-  margin-top: 0;
-}
-
-td.description *:last-child {
-  margin-bottom: 0;
-}
-
-tr:nth-child(odd) td {
-  background-color: lighten(paper-color($primary, '50'), 2);
+  vertical-align: middle;
+  position: relative;
+  height: 48px;
+  border-top: 1px solid rgba(0,0,0,.12);
+  border-bottom: 1px solid rgba(0,0,0,.12);
+  padding: 12px 18px;
+  box-sizing: border-box;
 }
 
-tr:nth-child(even) td {
-  background-color: lighten(paper-color($primary, '50'), 4);
+.paper-api--title {
+  margin: 5px;
 }
 
-th {
-  background-color: paper-color($primary, '400');
-  color: white;
+#main {
+  position: relative;
+  height: 100vh;
 }
 
-tr.subheading td {
-  background-color: paper-color($primary, '100');
+ md-select-menu md-content md-option:not([disabled]):focus, md-select-menu.md-default-theme md-content md-option:not([disabled]):hover, md-select-menu md-content md-option:not([disabled]):hover {
+    background: rgb(238,238,238);
 }
 
-blockquote {
-  border-left: 3px solid rgba(0, 0, 0, 0.12);
-  font-style: italic;
-  margin-left: 0;
-  padding-left: 16px;
+.flex-start {
+  align-self: flex-start;
 }
 
 /*
@@ -175,16 +86,6 @@ ul li:first-child {
   padding: 20px;
 }
 
-md-toolbar.md-default-theme.page-main-toolbar {
-  background-color: paper-color('grey', '100');
-  color: $dark-contrast-color;
-
-  md-icon, .md-button md-icon {
-    color: $dark-contrast-color;
-    margin-top: -2px;
-  }
-}
-
 .nav-github {
   vertical-align: middle;
   display: inline-block;
@@ -239,101 +140,20 @@ md-toolbar.md-default-theme.page-main-toolbar {
   background: paper-color($color-grey, '500');
 }
 
-.site-sidenav,
-.site-sidenav.md-locked-open-add-active,
-.site-sidenav.md-locked-open {
-  width:     272px;
-  min-width: 272px;
-  max-width: 272px;
-}
-.site-sidenav > * {
-  min-width: 218px;
-}
-md-sidenav.site-sidenav {
-  background-color: paper-color($primary, '400');
-  background-color: paper-var(--primary-400);
-
-  md-toolbar.md-default-theme {
-    background: linear-gradient(to bottom, paper-color($primary, '600'), paper-color($primary, '400'));
-    background: linear-gradient(to bottom, paper-var(--primary-600), paper-var(--primary-400));
-    border-bottom: 1px solid rgba(#fff, .1);
-    color: #fff;
-
-    height: 180px;
-    min-height: 180px;
-    max-height: 180px;
-
-    .logo {
-      font-size: 54px;
-      font-weight: 500;
-      width: 100%;
-      height: 100%;
-
-      img {
-        width: 150px;
-      }
-
-      div {
-        font-weight: bold;
-        margin-top: -20px;
-      }
-    }
-  }
-
-  md-content {
-    background: transparent;
-    color: $light-contrast-color;
-    md-icon {
-      color: inherit;
-    }
-  }
-
-  .menu-item {
-    text-transform: uppercase;
-    font-size: 14px;
-    font-weight: 500;
-
-    .expand-icon {
-      position: relative;
-      right: -36px;
-      transition: transform 250ms linear;
-    }
-
-    &.expanded .expand-icon {
-      transform: rotate(-180deg);
-    }
-  }
-
-  .submenu-item {
-    .md-list-item-inner {
-      padding-left: 36px;
-    }
-  }
-
-  .menu-item, .submenu-item {
-    min-height: 40px;
-
-    &.active, &:hover {
-      background-color: rgba(#fff, .1);
-    }
-
-    .md-list-item-inner {
-      min-height: 40px;
-
-      md-icon {
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-    }
-  }
-}
-
 /* DEMO PAGE STYLES */
 .doc-content {
   max-width: 864px;
   margin: 16px;
 }
 
+.doc-content--text-page {
+  margin: 0 auto;
+}
+
+.doc-content-example {
+  position: relative;
+}
+
 .doc-code-example {
   /* Initially we don't want any height, and we want the contents to be hidden */
   max-height: 0;
@@ -354,10 +174,6 @@ md-sidenav.site-sidenav {
   }
 }
 
-.doc-content-example {
-  position: relative;
-}
-
 .list-demo .face {
   border-radius: 30px;
   border: 1px solid #ddd;
@@ -434,12 +250,11 @@ md-sidenav.site-sidenav {
   width: 50px;
 }
 
-.card-demo {
-  .card-media {
-    background-color: #999999;
-    height: 100%;
-    width: 100%;
-  }
+.card-media {
+  border-radius: 5px;
+  background-color: #999999;
+  height: 100%;
+  width: 100%;
 }
 
 /************
@@ -1486,53 +1301,77 @@ md-sidenav.site-sidenav {
   .bg-78909c {
     background: #78909c;
   }
-
 }
 
-/* Inputs demo */
-md-input-container .hint {
-  position: absolute;
-  left: 2px;
-  right: auto;
-  bottom: 7px;
-  font-size: 12px;
-  line-height: 14px;
-  transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
-  color: grey;
+md-toast {
+  &.md-accent > .md-toast-content {
+    background: paper-color($accent, '400');
+  }
+  &.md-warn > .md-toast-content {
+    background: paper-color($warn, '400');
+  }
 }
 
-/* CHIPS demo */
-.chipsdemoContactChips .ember-power-select-trigger {
-    min-width: 400px;
+
+.example div div {
+  box-shadow: $flexbox-shadow;
+  text-align: center;
+  color: $dark-contrast-color;
 }
 
-/* Slider demo */
-.slider-demo {
-  .slider-container > :first-child {
-    margin-right: 16px;
+.introduction-example {
+  height: 350px;
+
+  .box-one {
+    background-color: $flexbox-color1;
   }
 
-  .slider-container > md-input-container {
-    max-width: 56px;
-    margin-left: 16px;
+  .box-two-one {
+    background-color: $flexbox-color2;
+  }
+  .box-two-two {
+    background-color: $flexbox-color3;
+  }
+  .box-two-three {
+    background-color: $flexbox-color4;
+  }
+  .box-three {
+    background-color: $flexbox-color5;
   }
 }
 
-/* tabs demo */
-.tabs-demo .md-padding h1:first-child {
-  margin-top: 0;
-}
+.example {
+  > div {
+    height: 100%;
+  }
 
-md-tabs.md-primary {
-  border-radius: 0px;
-}
+  div > div {
+    padding: 12px;
 
-/* toast demo */
-md-toast {
-  &.md-accent > .md-toast-content {
-    background: paper-color($accent, '400');
-  }
-  &.md-warn > .md-toast-content {
-    background: paper-color($warn, '400');
+    &:nth-child(1) {
+      background-color: $flexbox-color1;
+    }
+    &:nth-child(2) {
+      background-color: $flexbox-color2;
+    }
+    &:nth-child(3) {
+      background-color: $flexbox-color3;
+    }
+    &:nth-child(4) {
+      background-color: $flexbox-color4;
+    }
+    &:nth-child(5) {
+      background-color: $flexbox-color5;
+    }
+    &:nth-child(6) {
+      background-color: $flexbox-color6;
+    }
+    &:nth-child(7) {
+      background-color: $flexbox-color7;
+    }
   }
 }
+
+.example-2 > div {
+  height: 100%;
+}
diff --git a/tests/dummy/app/styles/highlight-overrides.scss b/tests/dummy/app/styles/highlight-overrides.scss
deleted file mode 100644
index 556bd979d..000000000
--- a/tests/dummy/app/styles/highlight-overrides.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-code, pre.hljs {
-  font-size: 16px;
-  background-color: paper-color('grey', '50');
-  text-shadow: 0 1px rgba(#fff, .9);
-}
-
-code {
-  padding: 3px 6px;
-}
-
-pre.hljs {
-  padding: 12px;
-}
diff --git a/tests/dummy/app/styles/layout-demo.scss b/tests/dummy/app/styles/layout-demo.scss
deleted file mode 100644
index eb8efc5d3..000000000
--- a/tests/dummy/app/styles/layout-demo.scss
+++ /dev/null
@@ -1,162 +0,0 @@
-$flexbox-shadow: inset 0px 0px 5px 0 rgba(0,0,0,0.16);
-$flexbox-color1: paper-color('deep-purple', '200');
-$flexbox-color2: paper-color('orange', '400');
-$flexbox-color3: paper-color('blue', '300');
-$flexbox-color4: paper-color('teal', '200');
-$flexbox-color5: paper-color('pink', '300');
-$flexbox-color6: paper-color('lime', '300');
-$flexbox-color7: paper-color('amber', '300');
-
-.doc-content.layout-docs {
-  .demo-group h4 {
-    color: paper-color('grey');
-    font-size: 90%;
-  }
-
-  md-card {
-    margin-bottom: 24px;
-
-    md-toolbar {
-      border-radius: 3px 3px 0 0;
-    }
-  }
-
-  .example {
-    border-radius: 3px 3px 0 0;
-    overflow: hidden;
-  }
-
-  .example div div {
-    box-shadow: $flexbox-shadow;
-    text-align: center;
-    color: $dark-contrast-color;
-  }
-
-  .introduction-example {
-    height: 350px;
-
-    .box-one {
-      background-color: $flexbox-color1;
-    }
-
-    .box-two-one {
-      background-color: $flexbox-color2;
-    }
-    .box-two-two {
-      background-color: $flexbox-color3;
-    }
-    .box-two-three {
-      background-color: $flexbox-color4;
-    }
-    .box-three {
-      background-color: $flexbox-color5;
-    }
-  }
-
-  &.containers {
-    .example {
-      height: 150px;
-
-      div:nth-child(1) > div {
-        padding: 12px;
-
-        &:nth-child(1) {
-          background-color: $flexbox-color1;
-        }
-        &:nth-child(2) {
-          background-color: $flexbox-color2;
-        }
-      }
-      div:nth-child(2) > div {
-        padding: 12px;
-
-        &:nth-child(1) {
-          background-color: $flexbox-color3;
-        }
-        &:nth-child(2) {
-          background-color: $flexbox-color4;
-        }
-      }
-    }
-
-    .example-2 > div {
-      height: 100%;
-    }
-  }
-
-  &.children {
-    .example {
-      > div {
-        height: 100%;
-      }
-
-      div > div {
-        padding: 12px;
-
-        &:nth-child(1) {
-          background-color: $flexbox-color1;
-        }
-        &:nth-child(2) {
-          background-color: $flexbox-color2;
-        }
-        &:nth-child(3) {
-          background-color: $flexbox-color3;
-        }
-        &:nth-child(4) {
-          background-color: $flexbox-color4;
-        }
-        &:nth-child(5) {
-          background-color: $flexbox-color5;
-        }
-        &:nth-child(6) {
-          background-color: $flexbox-color6;
-        }
-        &:nth-child(7) {
-          background-color: $flexbox-color7;
-        }
-      }
-    }
-
-    .example-1, .example-3, .example-5 {
-      height: 128px;
-    }
-
-    .example-2, .example-4 {
-      height: 150px;
-    }
-  }
-
-  &.alignment {
-    .example {
-      border-radius: 0;
-      border-bottom: 1px dotted paper-color('grey', '300');
-    }
-
-    .layout-class {
-      margin-right: 24px;
-      display: inline-block;
-    }
-
-    .interactive-demo {
-      height: 180px;
-
-      > div {
-        height: 100%;
-      }
-
-      div > div {
-        padding: 12px;
-      }
-
-      .one {
-        background-color: $flexbox-color1;
-      }
-      .two {
-        background-color: $flexbox-color2;
-      }
-      .three {
-        background-color: $flexbox-color3;
-      }
-    }
-  }
-}
diff --git a/tests/dummy/app/styles/modules/_all.scss b/tests/dummy/app/styles/modules/_all.scss
deleted file mode 100644
index 044dd1a43..000000000
--- a/tests/dummy/app/styles/modules/_all.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "codeinline";
diff --git a/tests/dummy/app/styles/modules/codeinline.scss b/tests/dummy/app/styles/modules/codeinline.scss
deleted file mode 100644
index aa1f2108f..000000000
--- a/tests/dummy/app/styles/modules/codeinline.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.codeinline {
-  display: inline-block;
-}
diff --git a/tests/dummy/app/templates/addons.hbs b/tests/dummy/app/templates/addons.hbs
index fb7ef2976..936d28f20 100644
--- a/tests/dummy/app/templates/addons.hbs
+++ b/tests/dummy/app/templates/addons.hbs
@@ -1,7 +1,5 @@
-<PageToolbar @pageTitle="Addons" @isDemo={{false}} />
-
 <PaperContent @class="md-padding">
-  <div class="doc-content">
+  <div class="doc-content doc-content--text-page">
     <p>
       <code>ember-paper</code> does not include every component mentioned in the material design specifications.
     </p>
diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
index 70f96b484..60ccb0d9a 100644
--- a/tests/dummy/app/templates/application.hbs
+++ b/tests/dummy/app/templates/application.hbs
@@ -1,71 +1,39 @@
-<PaperSidenavContainer @class="site-nav-container">
-  <PaperSidenav @class="md-whiteframe-z2 site-sidenav" @lockedOpen="gt-sm" @open={{isSidenavOpen}} @onToggle={{action (mut isSidenavOpen)}}>
-    <PaperToolbar @class="site-content-toolbar" @tall={{true}}>
-      <div class="logo layout-column layout-align-center-center">
-        <img alt="ember" src="ember-logo-white.png">
-        <div>paper</div>
-      </div>
-    </PaperToolbar>
-
-    <PaperContent>
-
-      <PaperList>
-        <MenuItem @active={{is-active "index" currentRouteName}} @href={{href-to "index"}}>Introduction</MenuItem>
-
-        <MenuItem @onClick={{action "toggleExpandedItem" "demos"}} @expanded={{demosExpanded}} @canExpand={{true}}>Components</MenuItem>
-
-        <div class="submenu">
-          {{#liquid-if demosExpanded}}
-            <SubmenuItem @active={{is-active "demo.autocomplete" currentRouteName}} @href={{href-to "demo.autocomplete"}}>Autocomplete</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.button" currentRouteName}} @href={{href-to "demo.button"}}>Button</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.card" currentRouteName}} @href={{href-to "demo.card"}}>Card</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.checkbox" currentRouteName}} @href={{href-to "demo.checkbox"}}>Checkbox</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.chips" currentRouteName}} @href={{href-to "demo.chips"}}>Chips</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.dialog" currentRouteName}} @href={{href-to "demo.dialog"}}>Dialog</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.divider" currentRouteName}} @href={{href-to "demo.divider"}}>Divider</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.grid-list" currentRouteName}} @href={{href-to "demo.grid-list"}}>Grid List</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.icons" currentRouteName}} @href={{href-to "demo.icons"}}>Icons</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.input" currentRouteName}} @href={{href-to "demo.input"}}>Input</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.list" currentRouteName}} @href={{href-to "demo.list"}}>List</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.menu" currentRouteName}} @href={{href-to "demo.menu"}}>Menu</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.progress-circular" currentRouteName}} @href={{href-to "demo.progress-circular"}}>Progress Circular</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.progress-linear" currentRouteName}} @href={{href-to "demo.progress-linear"}}>Progress Linear</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.radio" currentRouteName}} @href={{href-to "demo.radio"}}>Radio</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.select" currentRouteName}} @href={{href-to "demo.select"}}>Select</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.sidenav" currentRouteName}} @href={{href-to "demo.sidenav"}}>Sidenav</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.slider" currentRouteName}} @href={{href-to "demo.slider"}}>Slider</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.speed-dial" currentRouteName}} @href={{href-to "demo.speed-dial"}}>Speed Dial</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.switch" currentRouteName}} @href={{href-to "demo.switch"}}>Switch</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.tabs.index" currentRouteName}} @href={{href-to "demo.tabs"}}>Tabs</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.toast" currentRouteName}} @href={{href-to "demo.toast"}}>Toast</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.toolbar" currentRouteName}} @href={{href-to "demo.toolbar"}}>Toolbar</SubmenuItem>
-            <SubmenuItem @active={{is-active "demo.tooltip" currentRouteName}} @href={{href-to "demo.tooltip"}}>Tooltip</SubmenuItem>
-          {{/liquid-if}}
-        </div>
-        <MenuItem @active={{is-active "forms" currentRouteName}} @href={{href-to "forms"}}>Forms</MenuItem>
-        <MenuItem @active={{is-active "typography" currentRouteName}} @href={{href-to "typography"}}>Typography</MenuItem>
-        <MenuItem @active={{is-active "theme" currentRouteName}} @href={{href-to "theme"}}>Color & Theme</MenuItem>
-
-        <MenuItem @onClick={{action "toggleExpandedItem" "layout"}} @expanded={{layoutExpanded}} @canExpand={{true}}>Layout</MenuItem>
-        <div class="submenu">
-          {{#liquid-if layoutExpanded}}
-            <SubmenuItem @active={{is-active "layout.introduction" currentRouteName}} @href={{href-to "layout.introduction"}}>Introduction</SubmenuItem>
-            <SubmenuItem @active={{is-active "layout.layout-containers" currentRouteName}} @href={{href-to "layout.layout-containers"}}>Layout Containers</SubmenuItem>
-            <SubmenuItem @active={{is-active "layout.layout-children" currentRouteName}} @href={{href-to "layout.layout-children"}}>Layout Children</SubmenuItem>
-            <SubmenuItem @active={{is-active "layout.child-alignment" currentRouteName}} @href={{href-to "layout.child-alignment"}}>Child Alignment</SubmenuItem>
-          {{/liquid-if}}
-        </div>
-
-        <MenuItem @active={{is-active "cookbook" currentRouteName}} @href={{href-to "cookbook"}}>Cookbook</MenuItem>
-        <MenuItem @active={{is-active "addons" currentRouteName}} @href={{href-to "addons"}}>Addons</MenuItem>
-      </PaperList>
-
-    </PaperContent>
-  </PaperSidenav>
-
-  <div id="main" class="flex layout-column" tabindex="-1" role="main">
+<div id="main" class="layout-column flex">
+  <PaperToolbar as |toolbar|>
+    <toolbar.tools>
+      Ember Paper
+    </toolbar.tools>
+
+    <div class="layout-row">
+      <PaperTabs class="flex" @primary={{true}} as |tabs|>
+        <tabs.tab @href={{href-to "index"}} @isSelected={{is-active "index"}}>
+          Introduction
+        </tabs.tab>
+        <tabs.tab @href={{href-to "components"}} @isSelected={{is-active "components"}}>
+          Components
+        </tabs.tab>
+        <tabs.tab @href={{href-to "layout"}} @isSelected={{is-active "layout"}}>
+          Layout
+        </tabs.tab>
+        <tabs.tab @href={{href-to "theme"}} @isSelected={{is-active "theme"}}>
+          Theme
+        </tabs.tab>
+        <tabs.tab @href={{href-to "addons"}} @isSelected={{is-active "addons"}}>
+          Addons
+        </tabs.tab>
+      </PaperTabs>
+
+      <PaperButton @iconButton={{true}} @href="https://github.com/miguelcobain/ember-paper" target="_blank" rel="noopener" aria-label="GitHub" class="nav-github">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 499.36" focusable="false" class="nav-github-icon">
+          <title>GitHub</title>
+          <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"></path>
+        </svg>
+      </PaperButton>
+    </div>
+
+  </PaperToolbar>
+
+  <PaperContent class="flex">
     {{outlet}}
-  </div>
-</PaperSidenavContainer>
-
-<PaperToaster @parent="#main" />
+  </PaperContent>
+</div>
diff --git a/tests/dummy/app/templates/components.hbs b/tests/dummy/app/templates/components.hbs
new file mode 100644
index 000000000..c2d96608d
--- /dev/null
+++ b/tests/dummy/app/templates/components.hbs
@@ -0,0 +1,20 @@
+<PaperSidenavContainer>
+  <PaperSidenav @class="md-whiteframe-z2" @lockedOpen={{true}}>
+    <PaperContent @scroll-y={{true}}>
+      <PaperList>
+        {{#each this.links as |link|}}
+          <PaperItem @class="md-2-line" @href={{href-to link.route}}>
+            {{paper-icon link.icon class="md-avatar-icon"}}
+            <div class="md-list-item-text">
+              {{link.text}}
+            </div>
+          </PaperItem>
+        {{/each}}
+      </PaperList>
+    </PaperContent>
+  </PaperSidenav>
+
+  <div class="flex layout-column">
+    {{outlet}}
+  </div>
+</PaperSidenavContainer>
diff --git a/tests/dummy/app/templates/components/autocomplete.hbs b/tests/dummy/app/templates/components/autocomplete.hbs
new file mode 100644
index 000000000..0920226f5
--- /dev/null
+++ b/tests/dummy/app/templates/components/autocomplete.hbs
@@ -0,0 +1,121 @@
+<Doc>
+  <h1 class="header">Autocomplete</h1>
+  <h2 class="header">Basic Usage</h2>
+  <blockquote>Use <code>\{{paper-autocomplete}}</code> to search for matches from local or remote data sources.</blockquote>
+  <div class="layout-column layout-align-center-center">
+    <div>
+      <PaperCheckbox @value={{firstDisabled}} @onChange={{action (mut firstDisabled)}}>
+        Disable input
+      </PaperCheckbox>
+      <PaperCheckbox @value={{simulateQuery}} @onChange={{action (mut simulateQuery)}}>
+        Simulate query
+      </PaperCheckbox>
+      <PaperCheckbox @value={{this.enableDefaultHighlighted}} @onChange={{action (mut this.enableDefaultHighlighted)}}>
+        Highlight first match
+      </PaperCheckbox>
+      <PaperButton @primary={{true}} @label="Reset search-Text" @onClick={{action (mut countrySearchText) ""}} />
+      <PaperButton @primary={{true}} @label="Reset selected" @onClick={{action (mut selectedCountry) null}} />
+    </div>
+    <form>
+      {{! BEGIN-SNIPPET autocomplete.basic-usage }}
+      <PaperAutocomplete @disabled={{firstDisabled}} @onCreate={{action "addCountry"}} @options={{items}} @allowClear={{true}} @defaultHighlighted={{if this.enableDefaultHighlighted this.highlightFirstMatch}} @searchText={{readonly countrySearchText}} @onSearchTextChange={{action (mut countrySearchText)}} @selected={{selectedCountry}} @search={{if simulateQuery (action "searchCountries")}} @searchField="name" @labelPath="name" @placeholder="Select a Country..." @noMatchesMessage="Oops this country doesn't exist. Create a new country?" @onSelectionChange={{action (mut selectedCountry)}} />
+      {{! END-SNIPPET }}
+    </form>
+    <div>
+      <p>
+        {{#if selectedCountry}}
+          Selected country is {{selectedCountry.name}} ({{selectedCountry.code}})
+        {{else}}
+          Nothing selected...
+        {{/if}}
+      </p>
+      <p>
+        {{#if countrySearchText}}
+          Search text is {{countrySearchText}}
+        {{else}}
+          No search text
+        {{/if}}
+      </p>
+    </div>
+  </div>
+
+  {{#let (get-code-snippet "autocomplete.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Block Custom template</h2>
+  <blockquote>Use <code>\{{paper-autocomplete}}</code> with custom templates to show styled autocomplete results.</blockquote>
+  <div class="layout-column layout-align-center-center">
+    <form>
+      {{! BEGIN-SNIPPET autocomplete.block-custom-template }}
+      {{#paper-autocomplete
+        placeholder="Type e.g. ember, paper, one, two etc."
+        options=arrayOfItems
+        selected=selectedItem
+        onSelectionChange=(action (mut selectedItem))
+        as |item term|}}
+        <span class="item-title">
+          {{paper-icon "star"}}
+          <span>
+            <PaperAutocompleteHighlight @searchText={{term.searchText}} @flags="i" @label={{item}} />
+          </span>
+        </span>
+      {{else}}
+        Whoops! could not find!
+      {{/paper-autocomplete}}
+      {{! END-SNIPPET }}
+    </form>
+    <div>
+      <p>
+        Selected: {{if selectedItem selectedItem "None"}}
+      </p>
+    </div>
+  </div>
+
+  {{#let (get-code-snippet "autocomplete.block-custom-template.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Floating Label</h2>
+  <blockquote>The following example demonstrates floating labels being used as a normal form element.</blockquote>
+  <div class="layout-column layout-align-center-center">
+    <div>
+      <div>
+        {{#if selectedCountry2}}
+          Selected country is {{selectedCountry2.name}} ({{selectedCountry2.code}})
+        {{else}}
+          Nothing is selected.
+        {{/if}}
+      </div>
+      <PaperCheckbox @value={{readonly disabled2}} @onChange={{action (mut disabled2)}}>
+        Disable input
+      </PaperCheckbox>
+      <PaperCheckbox @value={{readonly simulateQuery2}} @onChange={{action (mut simulateQuery2)}}>
+        Simulate query
+      </PaperCheckbox>
+      <PaperCheckbox @value={{isRequired}} @onChange={{action (mut isRequired)}}>
+        Is required
+      </PaperCheckbox>
+      <PaperCheckbox @value={{readonly allowClearWithLabel}} @onChange={{action (mut allowClearWithLabel)}}>
+        Allow Clear
+      </PaperCheckbox>
+    </div>
+    <form class="layout-row">
+      {{! BEGIN-SNIPPET autocomplete.floating-label }}
+      <PaperAutocomplete @disabled={{readonly disabled2}} @required={{readonly isRequired}} @triggerClass="flex" @options={{items}} @selected={{selectedCountry2}} @search={{if simulateQuery2 (action "searchCountries")}} @searchField="name" @labelPath="name" @label="Select a Country..." @allowClear={{readonly allowClearWithLabel}} @noMatchesMessage="Oops this country doesn't exist." @onSelectionChange={{action (mut selectedCountry2)}} as |country select|>
+        <PaperAutocompleteHighlight @label={{country.name}} @searchText={{select.searchText}} @flags="i" />
+      </PaperAutocomplete>
+      {{! END-SNIPPET }}
+    </form>
+  </div>
+
+  {{#let (get-code-snippet "autocomplete.floating-label.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+</Doc>
diff --git a/tests/dummy/app/templates/components/button.hbs b/tests/dummy/app/templates/components/button.hbs
new file mode 100644
index 000000000..852de9025
--- /dev/null
+++ b/tests/dummy/app/templates/components/button.hbs
@@ -0,0 +1,97 @@
+<Doc>
+  <h1 class="header"> Button </h1>
+
+  <h2 class="header"> Basic Usage </h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET button.basic }}
+    <PaperButton @onClick={{this.click}}>Button with action</PaperButton>
+    <PaperButton @noink={{true}} @primary={{true}}>Primary (noink)</PaperButton>
+    <PaperButton @disabled={{true}}>disabled</PaperButton>
+    <PaperButton @warn={{true}}>warn</PaperButton>
+    <PaperButton @accent={{true}}>accent</PaperButton>
+    <PaperButton @href="http://emberjs.com/images/tomsters/original.png" @target="_blank">href link</PaperButton>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "button.basic.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header"> Raised </h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET button.raised }}
+    <PaperButton @raised={{true}} @onClick={{this.click}}>Button with action</PaperButton>
+    <PaperButton @raised={{true}} @primary={{true}}>Primary</PaperButton>
+    <PaperButton @raised={{true}} @disabled={{true}}>disabled</PaperButton>
+    <PaperButton @raised={{true}} @warn={{true}}>warn</PaperButton>
+    <PaperButton @raised={{true}} @accent={{true}}>accent</PaperButton>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "button.raised.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header"> Target </h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET button.target }}
+    <PaperButton @raised={{true}} @onClick={{this.click}}>Button with target</PaperButton>
+    <PaperButton @raised={{true}} @primary={{true}} @onClick={{this.click}}>Button with bubble</PaperButton>
+    <PaperButton @raised={{true}} @primary={{true}} @onClick={{this.click}} @bubbles={{false}}>Button no bubble</PaperButton>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "button.target.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header"> Fab </h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET button.fab }}
+    <PaperButton @raised={{true}} @fab={{true}}>Fab</PaperButton>
+    <PaperButton @raised={{true}} @fab={{true}} @accent={{true}}>Fab</PaperButton>
+    <PaperButton @raised={{true}} @mini={{true}}>Mini</PaperButton>
+    <PaperButton @raised={{true}} @mini={{true}} @primary={{true}}>Mini</PaperButton>
+    <PaperButton @iconButton={{true}}>{{paper-icon "accessibility"}}</PaperButton>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "button.fab.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <div class="layout-column layout-align-center-center">
+    {{paper-api
+      (p-section
+        (p-row "onClick" "closure" "Action sent when the button is clicked.")
+        (p-row "type" "string" "Sets the html5 `type` attribute. Defaults to `\"button\"`, except for `<a>` link buttons.")
+        (p-row "bubbles" "boolean" "Determines whether the Ember click event handler bubbles. Default is `undefined`, which bubbles.")
+        (p-row "disabled" "boolean" "Whether the button is displayed as disabled and does not accept clicks.")
+      )
+      (p-section
+        "Link buttons"
+        (p-row "href" "string" "Displays the button as an `<a>` link to the specified destination URL.")
+        (p-row "target" "string" "Sets the `<a>` link target attribute, such as `\"_blank\"`.")
+      )
+      (p-section
+        "Appearance"
+        (p-row "fab" "boolean" "Display as a Floating Action Button.")
+        (p-row "iconButton" "boolean" "Set when the contents contains an icon and adjusts CSS appropriately.")
+        (p-row "label" "string" "Set the content of the button when used as a blockless component.")
+        (p-row "mini" "boolean" "Display as a mini-sized button. Implies `fab`, unless `fab` is explicity set falsy.")
+        (p-row "noInk" "boolean" "Suppresses the ripple effect when clicked.")
+        (p-row "primary" "boolean" "Display as the primary button, more prominent that other buttons.")
+        (p-row "raised" "boolean" "Display button with a 3-D effect.")
+      )
+      "color"
+    }}
+  </div>
+</Doc>
diff --git a/tests/dummy/app/templates/components/card.hbs b/tests/dummy/app/templates/components/card.hbs
new file mode 100644
index 000000000..e85c5d2a8
--- /dev/null
+++ b/tests/dummy/app/templates/components/card.hbs
@@ -0,0 +1,130 @@
+<Doc>
+  <h1 class="header">Card</h1>
+  <h2 class="header">Basic Usage</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET card.basic }}
+    <PaperCard as |card|>
+      <card.title as |title|>
+        <title.text as |text|>
+          <text.headline>Card with image</text.headline>
+          <text.subhead>Large</text.subhead>
+        </title.text>
+        <title.media @size="lg" @src="/assets/tomster.png" @alt="Tomster" @title="Tomster" />
+      </card.title>
+      <card.actions>
+        <PaperButton>Action 1</PaperButton>
+        <PaperButton>Action 2</PaperButton>
+      </card.actions>
+    </PaperCard>
+
+    <PaperCard as |card|>
+      <card.title as |title|>
+        <title.text as |text|>
+          <text.headline>Card with block</text.headline>
+          <text.subhead>Extra large</text.subhead>
+        </title.text>
+      </card.title>
+      <card.content @class="layout-row layout-align-space-between">
+        <card.media @size="xl">
+          <div class="card-media"></div>
+        </card.media>
+        <card.actions @class="layout-column">
+          <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
+          <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
+          <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
+        </card.actions>
+      </card.content>
+    </PaperCard>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "card.basic.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Card Action Buttons</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET card.action-buttons }}
+    <PaperCard as |card|>
+      <card.image @src="/assets/washedout.png" @alt="Washed Out" @title="Washed Out" />
+      <card.title as |title|>
+        <title.text as |text|>
+          <text.headline>Vertical action buttons</text.headline>
+        </title.text>
+      </card.title>
+      <card.content>
+        <p>
+          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
+          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
+        </p>
+      </card.content>
+      <card.actions @class="layout-column">
+        <PaperButton>Action 1</PaperButton>
+        <PaperButton>Action 2</PaperButton>
+      </card.actions>
+    </PaperCard>
+
+    <PaperCard as |card|>
+      <card.image @src="/assets/washedout.png" @alt="Washed Out" @title="Washed Out" />
+      <card.title as |title|>
+        <title.text as |text|>
+          <text.headline>Icon action buttons</text.headline>
+        </title.text>
+      </card.title>
+      <card.content>
+        <p>
+          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
+          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
+        </p>
+      </card.content>
+      <card.actions>
+        <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
+        <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
+        <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
+      </card.actions>
+    </PaperCard>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "card.action-buttons.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">In Card Actions</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET card.in-card-actions }}
+    <PaperCard style="width:500px;height:500px;" as |card|>
+      <card.image @src="/assets/washedout.png" @alt="Washed Out" @title="Washed Out" />
+      <card.title as |title|>
+        <title.text as |text|>
+          <text.headline>In-card mixed actions</text.headline>
+        </title.text>
+      </card.title>
+      <card.actions @class="layout-row layout-align-start-center" as |actions|>
+        <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
+        <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
+
+        <actions.icons>
+          <PaperButton @iconButton={{true}}>{{paper-icon "expand-less"}}</PaperButton>
+        </actions.icons>
+      </card.actions>
+      <card.content>
+        <p>
+          The titles of Washed Out's breakthrough song and the first single from Paracosm share the
+          two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
+        </p>
+      </card.content>
+    </PaperCard>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "card.in-card-actions.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+</Doc>
diff --git a/tests/dummy/app/templates/components/chips.hbs b/tests/dummy/app/templates/components/chips.hbs
new file mode 100644
index 000000000..ef8b255eb
--- /dev/null
+++ b/tests/dummy/app/templates/components/chips.hbs
@@ -0,0 +1,103 @@
+<Doc>
+  <h1 class="header">Chips</h1>
+  <PaperCheckbox @value={{readOnly}} @onChange={{action (mut readOnly)}}>
+    Read Only
+  </PaperCheckbox>
+
+  <h2>Default Template</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET chips.default }}
+    <PaperChips @content={{this.fruitNames}} @readOnly={{readOnly}} @removeItem={{this.removeItem}} @addItem={{this.addItem}} @placeholder="Add a tag" />
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "chips.default.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Custom Template</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET chips.custom }}
+    <PaperChips @readOnly={{readOnly}} @removeItem={{this.removeCustomItem}} @addItem={{this.addCustomItem}} @placeholder="Add a tag" @content={{this.customFruitNames}} as |item|>
+      <strong>{{item}}</strong>
+      <em>(fruit)</em>
+    </PaperChips>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "chips.custom.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Autocomplete</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET chips.autocomplete }}
+    <PaperChips @readOnly={{readOnly}} @removeItem={{this.removeVegetable}} @addItem={{this.addVegetable}} @placeholder="Add a vegetable" @content={{this.vegetables}} @options={{this.remainingVegetables}} @searchField="name" @noMatchesMessage="Not found. Click to add." as |item|>
+      <strong>{{item.name}}</strong>
+      {{#if item.family}}
+        <em>{{item.family}}</em>
+      {{/if}}
+    </PaperChips>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "chips.autocomplete.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Autocomplete (requires match)</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET chips.autocomplete-requires-match }}
+    <PaperChips @readOnly={{readOnly}} @removeItem={{this.removeVegeName}} @addItem={{this.addVegeName}} @placeholder="Add a vegetable" @content={{this.vegeNames}} @options={{this.remainingVegeNames}} @requireMatch={{true}} />
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "chips.autocomplete-requires-match.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+
+  <h2 class="header">Contact</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET chips.contact }}
+    <PaperContactChips @readOnly={{readOnly}} @removeItem={{this.removeContact}} @addItem={{this.addContact}} @placeholder="Add a contact" @content={{this.selectedContacts}} @options={{this.remainingContacts}} />
+    {{! END-SNIPPET }}
+
+    <blockquote>
+      <code>paper-contact-chips</code> expects the name, email address and image
+      to be supplied as <code>name</code>, <code>email</code> and <code>image</code>
+      respectively. If your field names differ from these, specify them using the
+      <code>nameField</code>, <code>emailField</code> and <code>imageField</code>
+      parameters, and specify <code>searchField</code> to configure which field the
+      autocomplete should search against:
+    </blockquote>
+  </div>
+
+  {{#let (get-code-snippet "chips.contact.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Contact Alt</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET chips.contact-alt }}
+    <PaperContactChips @readOnly={{readOnly}} @removeItem={{this.removeAltContact}} @addItem={{this.addAltContact}} @placeholder="Add a contact" @content={{this.selectedAltContacts}} @options={{this.remainingAltContacts}} @nameField="shortName" @emailField="emailAddress" @imageField="profileImage" @searchField="emailAddress" />
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "chips.contact-alt.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+</Doc>
diff --git a/tests/dummy/app/templates/components/dialog.hbs b/tests/dummy/app/templates/components/dialog.hbs
new file mode 100644
index 000000000..8c70a8122
--- /dev/null
+++ b/tests/dummy/app/templates/components/dialog.hbs
@@ -0,0 +1,142 @@
+<Doc>
+  <h1 class="header">Dialog</h1>
+
+  <h2 class="header">Custom</h2>
+  <div class="layout-column layout-align-center-center" id="dialog-custom" style="position: relative;height: 500px;">
+    <div id="dialog-custom"></div>
+    {{#if showDialog}}
+      {{! BEGIN-SNIPPET dialog.custom }}
+      <PaperDialog @class="flex-77" @parent="#dialog-custom" @onClose={{action "closeDialog" "cancel"}} @origin={{dialogOrigin}} @parent @clickOutsideToClose={{true}}>
+        <PaperToolbar>
+          <PaperToolbarTools>
+            <h2>Mango (Fruit)</h2>
+            <span class="flex"></span>
+            <PaperButton @iconButton={{true}} @onClick={{action "closeDialog" "cancel"}}><PaperIcon @icon="close" /></PaperButton>
+          </PaperToolbarTools>
+        </PaperToolbar>
+
+        <PaperDialogContent>
+          <p>
+            The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been distributed worldwide to become one of the most cultivated fruits in the tropics.
+          </p>
+          <img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="https://www.stockvault.net/data/2011/03/20/119586/preview16.jpg">
+        </PaperDialogContent>
+
+        <PaperDialogActions @class="layout-row">
+          <PaperButton @href="http://en.wikipedia.org/wiki/Mango" @target="_blank">More on Wikipedia</PaperButton>
+          <span class="flex"></span>
+          <PaperButton @onClick={{action "closeDialog" "cancel"}}>Cancel</PaperButton>
+          <PaperButton @onClick={{action "closeDialog" "ok"}}>OK</PaperButton>
+        </PaperDialogActions>
+      </PaperDialog>
+      {{! END-SNIPPET }}
+    {{/if}}
+
+    {{#if result}}
+      <p>You dismissed the dialog with a result of "{{result}}".</p>
+    {{/if}}
+
+    <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openDialog"}}>
+      Custom dialog
+    </PaperButton>
+  </div>
+
+  {{#let (get-code-snippet "dialog.custom.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Prompt</h2>
+  <div class="layout-column layout-align-center-center" style="position: relative;height: 500px;">
+    <div id="dialog-prompt"></div>
+    {{#if showPromptDialog}}
+      {{! BEGIN-SNIPPET dialog.prompt }}
+      <PaperDialog @fullscreen={{fullscreen}} @parent="#dialog-prompt" @onClose={{action "closePromptDialog" "cancel"}} @origin={{dialogOrigin}}>
+        <PaperDialogContent>
+          <h2 class="md-title">What would you name your dog?</h2>
+          <p>Bowser is a common name.</p>
+          <PaperInput @placeholder="dog name" @autofocus={{true}} @value={{dogName}} @onChange={{action (mut dogName)}} />
+          <div>
+            <PaperCheckbox @value={{fullscreen}} @onChange={{action (mut fullscreen)}}>Display fullscreen at small window size breakpoints</PaperCheckbox>
+          </div>
+        </PaperDialogContent>
+
+        <PaperDialogActions @class="layout-row">
+          <span class="flex"></span>
+          <PaperButton @primary={{true}} @onClick={{action "closePromptDialog" "cancel"}}>I'm a cat person</PaperButton>
+          <PaperButton @primary={{true}} @onClick={{action "closePromptDialog" "ok" dogName}}>Okay!</PaperButton>
+        </PaperDialogActions>
+      </PaperDialog>
+      {{! END-SNIPPET }}
+    {{/if}}
+
+    {{#if result}}
+      <p>You dismissed the dialog with a result of "{{result}}".</p>
+    {{/if}}
+
+    <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openPromptDialog"}}>
+      Prompt dialog
+    </PaperButton>
+  </div>
+
+  {{#let (get-code-snippet "dialog.prompt.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Animated</h2>
+  <div class="layout-row layout-align-center-center" style="position: relative;height: 500px;">
+    <div id="dialog-animated"></div>
+    {{#if showAnimatedDialog}}
+      {{! BEGIN-SNIPPET dialog.animated }}
+      <PaperDialog @fullscreen={{fullscreen}} @parent="#dialog-animated" @onClose={{action "closeAnimatedDialog"}} @openFrom="#paper-dialog-demo" @closeTo="#bottom-of-card">
+
+        <PaperDialogContent>
+          <h2 class="md-title">This dialog is animated!</h2>
+          <p>It opened from above, but it will close to below.</p>
+        </PaperDialogContent>
+
+        <PaperDialogActions @class="layout-row">
+          <span class="flex"></span>
+          <PaperButton @primary={{true}} @onClick={{action "closeAnimatedDialog"}}>Okay!</PaperButton>
+        </PaperDialogActions>
+
+      </PaperDialog>
+      {{! END-SNIPPET }}
+    {{/if}}
+
+    <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openAnimatedDialog"}}>
+      Animated dialog
+    </PaperButton>
+  </div>
+
+  {{#let (get-code-snippet "dialog.animated.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+    <div id="bottom-of-card"></div>
+
+    <div class="layout-column layout-align-center-center">
+      {{paper-api
+        (p-section
+          (p-row "parent" "element or selector" "Existing element where the modal and backdrop will be rendered")
+          (p-row "origin" "element or selector" "If present, the dialog will use it as openFrom and closeTo. Also, focus will be returned to this element once the dialog closes.")
+          (p-row "closeTo" "element or selector" "Target for closing the dialog with a transition.")
+          (p-row "openFrom" "element or selector" "Source for opening the dialog with a transition.")
+          (p-row "fullscreen" "boolean" "Causes the dialog to become fullscreen at smaller breakpoints.")
+          (p-row "opaque" "boolean" "Causes the backdrop to become opaque. Defaults to `true`.")
+          (p-row "clickOutsideToClose" "boolean" "Causes clicking on the backdrop to trigger the `onClose` handler. Defaults to `false`.")
+          (p-row "focusOnOpen" "boolean" "Causes the initial focus to be on an inner element with the autofocus attribute, rather than the last button inside `{{paper-dialog-actions}}`. Defaults to `true`.")
+          (p-row "escapeToClose" "boolean" "Causes pressing escape to close the dialog. Defaults to `true`.")
+        )
+        (p-section
+          "Actions"
+          (p-row "onClose" "action" "An action to be executed when the dialog is closed, e.g. by pressing escape.")
+        )
+      }}
+    </div>
+</Doc>
diff --git a/tests/dummy/app/templates/components/divider.hbs b/tests/dummy/app/templates/components/divider.hbs
new file mode 100644
index 000000000..41f1e2ee8
--- /dev/null
+++ b/tests/dummy/app/templates/components/divider.hbs
@@ -0,0 +1,54 @@
+<Doc>
+  <h1 class="header">Divider</h1>
+
+  <h2 class="header">Full</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET divider.full }}
+    <PaperList>
+      {{#each messages as |item|}}
+        <PaperItem @class="md-3-line">
+          <div class="md-list-item-text">
+            <h3>{{item.what}}</h3>
+            <h4>{{item.who}}</h4>
+            <p>{{item.notes}}</p>
+          </div>
+          <PaperDivider />
+          <PaperButton>Respond</PaperButton>
+        </PaperItem>
+      {{/each}}
+    </PaperList>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "divider.full.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Inset</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET divider.inset }}
+    <PaperList @classNames="list-demo">
+      {{#each messages as |item|}}
+        <PaperItem @class="md-3-line">
+          <img src="{{item.face}}?{{$index}}" class="face" alt={{item.who}}>
+          <div class="md-list-item-text">
+            <h3>{{item.what}}</h3>
+            <h4>{{item.who}}</h4>
+            <p>{{item.notes}}</p>
+          </div>
+          <PaperDivider @inset={{true}} />
+        </PaperItem>
+      {{/each}}
+    </PaperList>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "divider.inset.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+</Doc>
diff --git a/tests/dummy/app/templates/components/doc-content.hbs b/tests/dummy/app/templates/components/doc-content.hbs
deleted file mode 100644
index 2762b5054..000000000
--- a/tests/dummy/app/templates/components/doc-content.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<PaperContent @class="md-padding">
-  <div class="doc-content {{class}}">
-    {{yield}}
-  </div>
-</PaperContent>
\ No newline at end of file
diff --git a/tests/dummy/app/templates/components/forms.hbs b/tests/dummy/app/templates/components/forms.hbs
new file mode 100644
index 000000000..466fa72f8
--- /dev/null
+++ b/tests/dummy/app/templates/components/forms.hbs
@@ -0,0 +1,109 @@
+<Doc>
+  <h1 class="header">Forms</h1>
+  <h2 class="header">Basic usage</h2>
+  <div class="layout-column layout-align-center-center">
+    <p>
+      ember-paper provides a <code>paper-form</code> to help you build forms
+      and keep track of the form's global validity state. This component uses
+      the html form tag by default, so expected form behavior will occur.
+      (For example, pressing the enter key from within one of the form's
+      inputs will submit the form.)
+      <code>paper-form</code> yields <code><LinkTo @route="components.input">paper-input</LinkTo></code>,
+      <code><LinkTo @route="components.select">paper-select</LinkTo></code>
+      and <code><LinkTo @route="components.autocomplete">paper-autocomplete</LinkTo></code> controls.
+      In the following example you can see how we use the yielded form controls:
+    </p>
+
+    {{! BEGIN-SNIPPET form.basic-usage }}
+    <PaperForm @onSubmit={{this.basicSubmitAction}} as |form|>
+      <div class="layout-row">
+        <div class="layout-column flex-50">
+          <form.input @label="First Name" @value={{firstName}} @onChange={{action (mut firstName)}} @required={{true}} />
+          <form.input @label="Last Name" @value={{lastName}} @onChange={{action (mut lastName)}} />
+        </div>
+        <div class="layout-column flex-50">
+          <form.autocomplete @required={{true}} @options={{items}} @selected={{selectedCountry}} @searchField="name" @labelPath="name" @label="Country" @noMatchesMessage="Oops this country doesn't exist." @onSelectionChange={{action (mut selectedCountry)}} as |country select|>
+            <PaperAutocompleteHighlight @label={{country.name}} @searchText={{select.searchText}} @flags="i" />
+          </form.autocomplete>
+          <form.input @type="number" @label="Age" @value={{age}} @onChange={{action (mut age)}} @min={{13}} @max={{65}} @required={{true}} />
+        </div>
+      </div>
+      <div class="layout-row">
+        <form.submit-button @raised={{true}} @primary={{true}}>Submit</form.submit-button>
+      </div>
+    </PaperForm>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "form.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Using the form validity state</h2>
+  <div class="layout-column layout-align-center-center">
+    <p>
+      A typical use case for the global validity state is to toggle the submit button
+      between a disabled and enabled state. Here is how you would do that with
+      <code>paper-form</code>:
+    </p>
+
+    {{! BEGIN-SNIPPET form.disabled-submit }}
+    <PaperForm @onSubmit={{this.disabledSubmitAction}} as |form|>
+      <div class="layout-row">
+        <form.input @label="Favorite Letter" @value={{favoriteLetter}} @onChange={{action (mut favoriteLetter)}} @required={{true}} @maxlength={{1}} />
+      </div>
+      <div class="layout-row">
+        <form.submit-button @raised={{true}} @primary={{true}} @disabled={{form.isInvalid}}>
+          Submit
+        </form.submit-button>
+      </div>
+    </PaperForm>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "form.disabled-submit.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Advanced usage</h2>
+  <div class="layout-column layout-align-center-center">
+    <p>
+      If you prefer, you can trigger the submit action without using a submit button.
+      <code>paper-form</code> also yields an <code>onSubmit</code> action you
+      can use wherever you like, e.g: <br>
+      <pre>
+        &lt;button onclick=\{{action form.onSubmit}}&gt;
+          Submit
+        &lt;/button&gt;
+      </pre>
+    </p>
+
+    <p>
+      You can also extend paper-input to make your own custom components
+      (money inputs, phone inputs, etc.) and the form validation will still
+      work out of the box!
+      Just replace <strong>paper-input</strong> with your component's name.
+    </p>
+
+    {{! BEGIN-SNIPPET form.custom-components }}
+    <PaperForm @onSubmit={{this.customSubmitAction}} as |form|>
+      <div class="layout-row">
+        <PaperInput @label="Favorite Number" @value={{favoriteNumber}} @onChange={{action (mut favoriteNumber)}} @required={{true}} @min={{1}} @max={{10}} />
+      </div>
+      <div class="layout-row">
+        <form.submit-button @raised={{true}} @primary={{true}}>Submit</form.submit-button>
+      </div>
+    </PaperForm>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "form.custom-components.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+</Doc>
diff --git a/tests/dummy/app/templates/components/grid-list.hbs b/tests/dummy/app/templates/components/grid-list.hbs
new file mode 100644
index 000000000..f65ce1f2a
--- /dev/null
+++ b/tests/dummy/app/templates/components/grid-list.hbs
@@ -0,0 +1,100 @@
+<Doc>
+  <h1 class="header">Grid</h1>
+  <h2 class="header">Basic Usage</h2>
+  <div class="layout-column layout-align-center-center" style="height:300px;">
+    <PaperContent @class="md-whiteframe-z1" style="height:100%;width:100%;">
+
+      {{! BEGIN-SNIPPET grid-list.basic-usage }}
+      <PaperGridList @cols="1 md-2 gt-md-6" @rowHeight="gt-md-1:1 2:2" @gutter="12px gt-sm-8px" as |grid|>
+
+        <grid.tile @class="gray" @rowspan="2" @colspan="sm-1 gt-sm-2" as |tile|>
+          <tile.footer>
+            <h3>#1: (3r x 2c)</h3>
+          </tile.footer>
+        </grid.tile>
+
+        <grid.tile @class="green" as |tile|>
+          <tile.footer>
+            <h3>#2: (1r x 1c)</h3>
+          </tile.footer>
+        </grid.tile>
+
+        <grid.tile @class="yellow" as |tile|>
+          <tile.footer>
+            <h3>#3: (1r x 1c)</h3>
+          </tile.footer>
+        </grid.tile>
+
+        <grid.tile @class="blue" @rowspan="2" as |tile|>
+          <tile.footer>
+            <h3>#4: (2r x 1c)</h3>
+          </tile.footer>
+        </grid.tile>
+
+        <grid.tile @class="red" @rowspan="2" @colspan="sm-1 gt-sm-2" as |tile|>
+          <tile.footer>
+            <h3>#5: (2r x 2c)</h3>
+          </tile.footer>
+        </grid.tile>
+
+        <grid.tile @class="green" @rowspan="2" as |tile|>
+          <tile.footer>
+            <h3>#6: (2r x 1c)</h3>
+          </tile.footer>
+        </grid.tile>
+
+      </PaperGridList>
+      {{! END-SNIPPET }}
+    </PaperContent>
+  </div>
+
+  {{#let (get-code-snippet "grid-list.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Dynamic Tiles</h2>
+  <div class="layout-column layout-align-center-center" style="height:300px;">
+    <PaperContent @class="md-whiteframe-z1" style="height:100%;width:100%;">
+      {{! BEGIN-SNIPPET grid-list.dynamic-tiles }}
+      <PaperGridList @cols="sm-2 md-4 gt-md-6" @rowHeight="4:3 gt-md-1:1" @gutter="8px gt-sm-4px" as |grid|>
+        {{#each tiles as |dynamicTile|}}
+          <grid.tile @rowspan={{dynamicTile.span.row}} @colspan={{concat dynamicTile.span.col " xs-1"}} @class={{dynamicTile.background}} as |tile|>
+            <md-icon></md-icon>
+            <tile.footer>
+              <h3>{{dynamicTile.title}}</h3>
+            </tile.footer>
+          </grid.tile>
+        {{/each}}
+      </PaperGridList>
+      {{! END-SNIPPET }}
+    </PaperContent>
+  </div>
+
+  {{#let (get-code-snippet "grid-list.dynamic-tiles.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Responsive and Animated Usage</h2>
+  <div class="layout-column layout-align-center-center" style="height:300px;">
+    <PaperContent @class="md-whiteframe-z1" style="height:100%;width:100%;">
+      {{! BEGIN-SNIPPET grid-list.responsive }}
+      <PaperGridList @class="grid-list-demo-responsiveTiles" @cols="3 md-8 gt-md-12" @rowHeight="4:3 gt-md-1:1" @gutter="4px md-8px gt-md-16px" as |grid|>
+        {{#each colorTiles as |tile|}}
+          <grid.tile @colspan={{tile.colspan}} @rowspan={{tile.rowspan}} @class={{tile.style}}></grid.tile>
+        {{/each}}
+      </PaperGridList>
+      {{! END-SNIPPET }}
+    </PaperContent>
+  </div>
+
+  {{#let (get-code-snippet "grid-list.responsive.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+</Doc>
diff --git a/tests/dummy/app/templates/components/icon.hbs b/tests/dummy/app/templates/components/icon.hbs
new file mode 100644
index 000000000..53e0c8ce1
--- /dev/null
+++ b/tests/dummy/app/templates/components/icon.hbs
@@ -0,0 +1,51 @@
+<Doc>
+  <h1 class="header">Icon</h1>
+  <p>
+    See the <a href="https://design.google.com/icons/" rel="noopener" target="_blank">Material Icons page</a> for an overview of
+    available icons.
+  </p>
+
+  <h2 class="header">Basic Icons</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET icons.basic-usage }}
+    <PaperIcon @positionalIcon="check-circle"/>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "icons.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Changing Sizes</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET icons.sizes }}
+    <PaperIcon @positionalIcon="check-circle" @size=12/>
+    <PaperIcon @positionalIcon="check-circle" @size=18/>
+    <PaperIcon @positionalIcon="check-circle" @size=24/>
+    <PaperIcon @positionalIcon="check-circle" @size=36/>
+    <PaperIcon @positionalIcon="check-circle" @size=48/>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "icons.sizes.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Spinners</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET icons.spinners }}
+    <PaperIcon @positionalIcon="rotate-right" @spin=true/>
+    <PaperIcon @positionalIcon="rotate-left" @reverseSpin=true/>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "icons.spinners.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+</Doc>
diff --git a/tests/dummy/app/templates/demo/input.hbs b/tests/dummy/app/templates/components/input.hbs
similarity index 94%
rename from tests/dummy/app/templates/demo/input.hbs
rename to tests/dummy/app/templates/components/input.hbs
index a9218d847..a501c8ce3 100644
--- a/tests/dummy/app/templates/demo/input.hbs
+++ b/tests/dummy/app/templates/components/input.hbs
@@ -1,6 +1,4 @@
-<PageToolbar @pageTitle="Input" @isDemo={{true}} />
-
-<DocContent>
+<Doc>
   {{! BEGIN-SNIPPET input.basic-usage}}
   <div class="layout layout-sm-column">
     <PaperInput @class="flex-30" @label="Name" @placeholder="Enter name" @value={{name}} @onChange={{action (mut name)}} />
@@ -47,7 +45,6 @@
   {{! END-SNIPPET }}
 
   <h3>Template</h3>
-  <CodeSnippet @name="input.basic-usage.hbs" />
 
   <p>
     <strong>About Required.</strong>
@@ -70,7 +67,6 @@
     <PaperInput @value={{numberTest}} @onChange={{action (mut numberTest)}} @label="Number of bagels" @type="number" @passThru={{hash min="0" step="13" }} />
     {{! END-SNIPPET }}
 
-    <CodeSnippet @name="input.attributes.hbs" />
   </p>
 
   <h4>Available Attributes for Text Fields</h4>
@@ -130,7 +126,6 @@
     {{#if eventName}}
       <div>The leaf controller for this route received the sent <strong>{{eventName}}</strong> action.</div>
     {{/if}}
-    <CodeSnippet @name="input.actions.hbs" />
   </p>
 
   {{#paper-api
@@ -157,7 +152,6 @@
         {{/unless}}
       </PaperInput>
       {{! END-SNIPPET }}
-      <CodeSnippet @name="input.textHelper.hbs" />
     </div>
   {{/paper-api}}
 
@@ -183,10 +177,8 @@
   </p>
 
   <h3>Template</h3>
-  <CodeSnippet @name="input.custom-validations.hbs" />
   <p>
     Define your <code>emailValidation</code> object in your controller.
-    <CodeSnippet @name="input.controller.email-validation.js" />
   </p>
   <p>
     You may also define multiple custom constraints by using an array of validation objects.
@@ -196,8 +188,6 @@
     <PaperInput @class="md-block" @label="Value should be even and equal 4." @type="email" @value={{customMultiple}} @onChange={{action (mut customMultiple)}} @customValidations={{multipleConstraints}} />
     {{! END-SNIPPET }}
   </p>
-  <CodeSnippet @name="input.multiple-constraints.hbs" />
-  <CodeSnippet @name="input.controller.multiple-constraints.js" />
 
   <h2>Setting validation messages from external validations</h2>
   <p>
@@ -225,7 +215,6 @@
   {{! END-SNIPPET }}
 
   <h3>Template</h3>
-  <CodeSnippet @name="input.external-validations.hbs" />
 
   <p>
     The <code>errors</code> argument can either be an array of messages or an array of
@@ -234,4 +223,4 @@
     The latter format is compatible with errors from <code>ember-data</code>.
   </p>
 
-</DocContent>
+</Doc>
diff --git a/tests/dummy/app/templates/components/list.hbs b/tests/dummy/app/templates/components/list.hbs
new file mode 100644
index 000000000..29990dfbb
--- /dev/null
+++ b/tests/dummy/app/templates/components/list.hbs
@@ -0,0 +1,313 @@
+<Doc>
+  <h1 class="header">List</h1>
+
+  <h2 class="header">3 Line Item</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET list.3-line }}
+    <PaperList>
+      <PaperSubheader>3 line item</PaperSubheader>
+      {{#each listData as |item|}}
+        <PaperItem @class="md-3-line">
+          <img src={{item.img}} alt={{item.name}} class="md-avatar">
+          <div class="md-list-item-text">
+            <h3>{{item.name}}</h3>
+            <h4>{{item.email}}</h4>
+            <p>Some longer notes here could be here. But they aren't.</p>
+          </div>
+        </PaperItem>
+      {{/each}}
+    </PaperList>
+
+    <PaperList>
+      <PaperSubheader>3 line item, long paragraph</PaperSubheader>
+      {{#each listData as |item|}}
+        <PaperItem @class="md-3-line md-long-text">
+          <img src={{item.img}} alt={{item.name}} class="md-avatar">
+          <div class="md-list-item-text">
+            <h3>{{item.name}}</h3>
+            <p>
+              Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
+              Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
+              velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
+            </p>
+          </div>
+        </PaperItem>
+      {{/each}}
+    </PaperList>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "list.3-line.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">2 Line Item</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET list.2-line }}
+    <PaperList>
+      <PaperSubheader>2 line item</PaperSubheader>
+      {{#each listData as |item|}}
+        <PaperItem @class="md-2-line">
+          <img src={{item.img}} alt={{item.name}} class="md-avatar">
+          <div class="md-list-item-text">
+            <h3>{{item.name}}</h3>
+            <p>{{item.email}}</p>
+          </div>
+        </PaperItem>
+      {{/each}}
+    </PaperList>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "list.2-line.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Icons</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET list.icons }}
+    <PaperList>
+      <PaperSubheader>Icons</PaperSubheader>
+      {{#each phoneNumbers as |phone|}}
+        <PaperItem @class="md-2-line">
+          {{paper-icon "phone" class="md-avatar-icon"}}
+          <div class="md-list-item-text">
+            <h3>{{phone.number}}</h3>
+            <p>{{phone.type}}</p>
+          </div>
+        </PaperItem>
+      {{/each}}
+    </PaperList>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "list.icons.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Single Actions</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET list.singe-actions }}
+    <PaperList>
+      <PaperSubheader>Single Action Checkboxes</PaperSubheader>
+      {{#each toppings as |topping|}}
+        <PaperItem as |controls|>
+          <p>{{topping.name}}</p>
+          <div class="md-secondary-container">
+            <controls.checkbox @value={{topping.enabled}} @secondary={{true}} @onChange={{action (mut topping.enabled)}} />
+          </div>
+        </PaperItem>
+      {{/each}}
+    </PaperList>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "list.singe-actions.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+  {{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Secondary Buttons</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET list.secondary-buttons }}
+    <PaperList>
+      <PaperSubheader>Secondary Buttons</PaperSubheader>
+      <PaperItem as |controls|>
+        <p>Clicking the button to the right will fire the secondary action</p>
+        <div class="md-secondary-container">
+          <controls.button @secondary={{true}} @onClick={{action "transitionTo" "more info"}}>
+            More Info
+          </controls.button>
+        </div>
+      </PaperItem>
+      <PaperItem @onClick={{action "transitionTo" "primary action"}} as |controls|>
+        <p>Click anywhere to fire the primary action, or the button to fire the secondary</p>
+        <div class="md-secondary-container">
+          <controls.button @secondary={{true}} @onClick={{action "transitionTo" "secondary action"}}>
+            More Info
+          </controls.button>
+        </div>
+      </PaperItem>
+    </PaperList>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "list.secondary-buttons.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+  {{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Clickable Secondary Controls</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET list.clickable-secondary-controls }}
+    <PaperList>
+      <PaperSubheader>Clickable Items with Secondary Controls</PaperSubheader>
+      <PaperItem @onClick={{action "transitionToWifiMenu"}} as |controls|>
+        {{paper-icon "network-wifi"}}
+        <p>Wi-Fi</p>
+        <div class="md-secondary-container">
+          <controls.switch @secondary={{true}} @value={{wifiEnabled}} @onChange={{action (mut wifiEnabled)}} />
+        </div>
+      </PaperItem>
+      <PaperItem @onClick={{action "transitionToBluetoothMenu"}} as |controls|>
+        {{paper-icon "bluetooth"}}
+        <p>Bluetooth</p>
+        <div class="md-secondary-container">
+          <controls.switch @secondary={{true}} @value={{bluetoothEnabled}} @onChange={{action (mut bluetoothEnabled)}} />
+        </div>
+      </PaperItem>
+      <PaperItem @onClick={{action "transitionToDataUsage"}}>
+        {{paper-icon "data-usage"}}
+        <p>Data Usage</p>
+      </PaperItem>
+    </PaperList>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "list.clickable-secondary-controls.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+  {{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Checkbox Secondary Controls</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET list.checkbox-secondary-controls }}
+    <PaperList>
+      <PaperSubheader>Checkbox with Secondary Action</PaperSubheader>
+      {{#each messageData as |item|}}
+        <PaperItem as |controls|>
+          <controls.checkbox @value={{item.checked}} @onChange={{action (mut item.checked)}} />
+          <p>{{item.message}}</p>
+          <div class="md-secondary-container">
+            <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
+              {{paper-icon "message"}}
+            </controls.button>
+          </div>
+        </PaperItem>
+      {{/each}}
+    </PaperList>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "list.checkbox-secondary-controls.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+  {{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Avatar with Secondary Controls</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET list.avatar-secondary-controls }}
+    <PaperList>
+      <PaperSubheader>Avatar with Secondary Action Icon</PaperSubheader>
+      {{#each listData as |item|}}
+        <PaperItem @onClick={{action "goToPerson" item}} as |controls|>
+          <img src={{item.img}} alt={{item.name}} class="md-avatar">
+          <p>{{item.name}}</p>
+          <div class="md-secondary-container">
+            <controls.checkbox @value={{item.checked}} @onChange={{action (mut item.checked)}} />
+            <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
+              {{paper-icon "email"}}
+            </controls.button>
+            <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
+              {{paper-icon "message"}}
+            </controls.button>
+          </div>
+        </PaperItem>
+      {{/each}}
+    </PaperList>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "list.avatar-secondary-controls.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+  {{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Clickable Avatars</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET list.clickable-avatars }}
+    <PaperList>
+      <PaperSubheader>Clickable Avatars</PaperSubheader>
+      {{#each listData as |item|}}
+        <PaperItem @class="md-3-line" @onClick={{action "goToPerson" item}}>
+          <img src={{item.img}} alt={{item.name}} class="md-avatar">
+          <div class="md-list-item-text">
+            <h3>{{item.name}}</h3>
+            <h4>{{item.email}}</h4>
+            <p>Some notes here.</p>
+          </div>
+        </PaperItem>
+      {{/each}}
+    </PaperList>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "list.clickable-avatars.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+  {{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Avatars Secondary Control Icons</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET list.avatars-secondary-control-icons }}
+    <PaperList>
+      <PaperSubheader>Avatar with Secondary Action Icon</PaperSubheader>
+      {{#each listData as |item|}}
+        <PaperItem @class="md-3-line" @onClick={{action "goToPerson" item}} as |controls|>
+          <img src={{item.img}} alt={{item.name}} class="md-avatar">
+          <div class="md-list-item-text">
+            <h3>{{item.name}}</h3>
+            <h4>{{item.email}}</h4>
+            <p>Some notes here.</p>
+          </div>
+          <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryPersonClick" item}}>
+            {{paper-icon "phone"}}
+          </controls.button>
+        </PaperItem>
+      {{/each}}
+    </PaperList>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "list.avatars-secondary-control-icons.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+  {{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Radio Actions</h2>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET list.single-actions-radios }}
+    <PaperList>
+      <PaperSubheader>Single Action Radios</PaperSubheader>
+      {{#each toppings as |topping|}}
+        <PaperItem as |controls|>
+          <p>{{topping.name}}</p>
+          <div class="md-secondary-container">
+            <controls.radio @groupValue={{radioSelectedTopping}} @value={{topping}} @secondary={{true}} @onChange={{action (mut radioSelectedTopping)}} />
+          </div>
+        </PaperItem>
+      {{/each}}
+    </PaperList>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "list.single-actions-radios.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+  {{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+</Doc>
diff --git a/tests/dummy/app/templates/components/loading.hbs b/tests/dummy/app/templates/components/loading.hbs
new file mode 100644
index 000000000..da1afbd8d
--- /dev/null
+++ b/tests/dummy/app/templates/components/loading.hbs
@@ -0,0 +1,143 @@
+<Doc>
+  <h1 class="header"> Loading </h1>
+  <h2 class="header"> Circlular </h2>
+  <h3 class="header">Determinate</h3>
+  <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.</p>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET progress-circular.determinate }}
+    <PaperProgressCircular @value={{determinateValue}} />
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "progress-circular.determinate.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h3 class="header">Indeterminate</h3>
+  <p>For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET progress-circular.indeterminate }}
+    <PaperProgressCircular />
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "progress-circular.indeterminate.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h3 class="header">Theming</h3>
+  <div class="layout-row layout-align-space-around-center">
+    {{! BEGIN-SNIPPET progress-circular.theming }}
+    <PaperProgressCircular @class="md-hue-2" @diameter={{25}} />
+    <PaperProgressCircular @accent={{true}} @diameter={{40}} />
+    <PaperProgressCircular @accent={{true}} @class="md-hue-1" @diameter={{60}} />
+    <PaperProgressCircular @warn={{true}} @class="md-hue-3" @diameter={{70}} />
+    <PaperProgressCircular @warn={{true}} @diameter={{96}} />
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "progress-circular.theming.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h3 class="header">Playground</h3>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET progress-circular.playground }}
+    <PaperProgressCircular @value={{sliderValue}} @diameter={{sliderDiameter}} @strokeRatio={{strokeRatio}} @disabled={{isDisabled}} />
+    {{! END-SNIPPET }}
+
+    <div style="margin-left: 50px;">
+      <PaperCheckbox @value={{isIndeterminate}} @onChange={{action "setIndeterminate"}}>
+        Indeterminate
+      </PaperCheckbox>
+      <PaperCheckbox @value={{isDisabled}} @onChange={{action (mut isDisabled)}}>
+        Disabled
+      </PaperCheckbox>
+      <div class="layout layout-align-center-center slider-container">
+        <span class="flex">Value ({{if sliderValue sliderValue "null"}})</span>
+        <PaperSlider @class="flex" @value={{sliderValue}} @min={{0}} @max={{100}} @onChange={{action "setValue"}} />
+      </div>
+
+      <div class="layout layout-align-center-center slider-container">
+        <span class="flex">Diameter ({{sliderDiameter}})</span>
+        <PaperSlider @class="flex" @value={{sliderDiameter}} @min={{0}} @max={{300}} @onChange={{action (mut sliderDiameter)}} />
+      </div>
+
+      <div class="layout layout-align-center-center slider-container">
+        <span class="flex">Stroke ratio ({{strokeRatio}})</span>
+        <PaperSlider @class="flex" @value={{strokeRatio}} @min={{0}} @max={{0.5}} @step={{0.0025}} @onChange={{action (mut strokeRatio)}} />
+      </div>
+    </div>
+  </div>
+
+  {{#let (get-code-snippet "progress-circular.playground.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header"> Linear </h2>
+
+  <h3 class="header">Determinate mode</h3>
+  <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.</p>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET progress-linear.determinate }}
+    <PaperProgressLinear @value={{determinateValue}} />
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "progress-linear.determinate.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h3 class="header">Indeterminate mode</h3>
+  <p>For operations where the user is asked to wait a moment while something finishes up, and it's not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator:</p>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET progress-linear.indeterminate }}
+    <PaperProgressLinear />
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "progress-linear.indeterminate.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h3 class="header">Buffer mode</h3>
+  <p>For operations where the user wants to indicate some activity or loading from the server, use the buffer indicator:</p>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET progress-linear.buffer }}
+    <PaperProgressLinear @warn={{true}} @value={{determinateValue}} @bufferValue={{determinateValue2}} />
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "progress-linear.buffer.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h3 class="header">Query mode</h3>
+  <p>For situations where the user wants to indicate pre-loading (until the loading can actually be made), use the query indicator:</p>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET progress-linear.query }}
+    <PaperProgressLinear @accent={{true}} @mode={{mode}} @value={{determinateValue}} />
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "progress-linear.query.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+</Doc>
diff --git a/tests/dummy/app/templates/components/menu.hbs b/tests/dummy/app/templates/components/menu.hbs
new file mode 100644
index 000000000..496857662
--- /dev/null
+++ b/tests/dummy/app/templates/components/menu.hbs
@@ -0,0 +1,278 @@
+<Doc>
+
+  <h1 class="header">Menu</h1>
+  <h2 class="header">Simple dropdown menu</h2>
+  <p>
+    Note that applying the class <code class="paper">.md-menu-origin</code>
+    and <code class="paper">md-menu-align-target</code>attributes ensure that the menu elements align.
+  </p>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET menu.simple-dropdown }}
+    <PaperMenu as |menu|>
+
+      <menu.trigger>
+        <PaperButton @iconButton={{true}}>
+          {{paper-icon "local_phone"}}
+        </PaperButton>
+      </menu.trigger>
+
+      <menu.content @width={{4}} as |content|>
+        {{#each items as |item|}}
+          <content.menu-item @onClick={{this.openSomething}}>
+            {{paper-icon item.icon}}
+            <span>{{item.title}}</span>
+          </content.menu-item>
+        {{/each}}
+
+        <content.menu-item @onClick={{this.openSomething}} @disabled={{true}}>
+          {{paper-icon "adb"}}
+          <span>This is disabled.</span>
+        </content.menu-item>
+
+        <PaperDivider />
+
+        {{#each items as |item|}}
+          <content.menu-item @onClick={{this.openSomething}}>
+            {{paper-icon item.icon}} {{item.title}}
+          </content.menu-item>
+        {{/each}}
+      </menu.content>
+    </PaperMenu>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "menu.simple-dropdown.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+
+  <h2 class="header">Menu Position Modes</h2>
+  <p>
+    The <code class="paper">position</code> attribute can be used to specify the positioning along the
+    <code class="paper">x</code> and <code class="paper">y</code> axis.
+  </p>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET menu.position-modes }}
+
+    <div class="menus layout-fill layout-wrap layout-row layout-align-space-between-center">
+      <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
+        <p>Target Mode Positioning (default)</p>
+        <PaperMenu @isOpen={{menuTwoIsOpen}} as |menu|>
+          <menu.trigger>
+            <PaperButton @onClick={{null}} @iconButton={{true}}>
+              {{paper-icon "local_phone" class="md-menu-origin"}}
+            </PaperButton>
+          </menu.trigger>
+
+          <menu.content as |content|>
+            {{#each items as |item|}}
+              <content.menu-item @onClick={{action this.openSomething}}>
+                {{paper-icon item.icon class="md-menu-align-target"}}
+                <span>{{item.title}}</span>
+              </content.menu-item>
+            {{/each}}
+          </menu.content>
+
+        </PaperMenu>
+      </div>
+
+      <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
+        <p>Target mode with <code class="paper">offset</code></p>
+        <PaperMenu @isOpen={{menuThreeIsOpen}} @offset="0 50" as |menu|>
+          <menu.trigger>
+            <PaperButton @onClick={{null}} @iconButton={{true}}>
+              {{paper-icon "local_phone" class="md-menu-origin"}}
+            </PaperButton>
+          </menu.trigger>
+
+          <menu.content as |content|>
+            {{#each items as |item|}}
+              <content.menu-item @onClick={{action this.openSomething}}>
+                {{paper-icon item.icon class="md-menu-align-target"}}
+                <span>{{item.title}}</span>
+              </content.menu-item>
+            {{/each}}
+          </menu.content>
+        </PaperMenu>
+      </div>
+
+      <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
+        <p><code class="paper">position="target-right target"</code></p>
+        <PaperMenu @isOpen={{menuFourIsOpen}} @position="target-right target" as |menu|>
+          <menu.trigger>
+            <PaperButton @onClick={{null}} @iconButton={{true}}>
+              {{paper-icon "local_phone" class="md-menu-origin"}}
+            </PaperButton>
+          </menu.trigger>
+
+          <menu.content as |content|>
+            {{#each items as |item|}}
+              <content.menu-item @onClick={{action this.openSomething}}>
+                <p style="width: 190px;">{{item.title}}</p>
+                {{paper-icon item.icon class="md-menu-align-target"}}
+              </content.menu-item>
+            {{/each}}
+            {{#each items as |item|}}
+              <content.menu-item @onClick={{action this.openSomething}}>
+                <p style="width: 190px;">{{item.title}}</p>
+                {{paper-icon item.icon class="md-menu-align-target"}}
+              </content.menu-item>
+            {{/each}}
+            {{#each items as |item|}}
+              <content.menu-item @onClick={{action this.openSomething}}>
+                <p style="width: 190px;">{{item.title}}</p>
+                {{paper-icon item.icon class="md-menu-align-target"}}
+              </content.menu-item>
+            {{/each}}
+          </menu.content>
+        </PaperMenu>
+      </div>
+    </div>
+    {{! END-SNIPPET }}
+  </div>
+
+  <p>
+    Use the <code class="paper">position</code> attribute to set where the menu should appear. The position attribute
+    should be used together with <code class="paper">.md-menu-origin</code> and <code class="paper">.md-menu-align-target</code>
+    classes to specify where it should position itself in respect to origin and align-target.
+  </p>
+  {{#let (get-code-snippet "menu.position-modes.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+
+  <h2 class="header">Different Widths</h2>
+
+  <p>
+    <code class="paper">paper-menu-content</code> may specify a width attribute which will follow the
+    <a href="http://www.google.com/design/spec/components/menus.html#menus-specs">official spec</a>.
+  </p>
+
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET menu.different-widths }}
+    <div class="menus layout-fill layout-wrap layout-row layout-align-space-between-center">
+      <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
+        <p>Wide menu (<code class="paper">width=6</code>)</p>
+        <PaperMenu as |menu|>
+          <menu.trigger>
+            <PaperButton @onClick={{null}} @iconButton={{true}}>
+              {{paper-icon "local_phone" class="md-menu-origin"}}
+            </PaperButton>
+          </menu.trigger>
+
+          <menu.content @width={{6}} as |content|>
+            {{#each options as |item|}}
+              <content.menu-item @onClick={{action "openSomething"}}>
+                <span class="md-menu-align-target">Option</span> {{item}}
+              </content.menu-item>
+            {{/each}}
+          </menu.content>
+        </PaperMenu>
+      </div>
+
+      <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
+        <p>Medium menu (<code class="paper">width=4</code>)</p>
+        <PaperMenu as |menu|>
+          <menu.trigger>
+            <PaperButton @onClick={{null}} @iconButton={{true}}>
+              {{paper-icon "local_phone" class="md-menu-origin"}}
+            </PaperButton>
+          </menu.trigger>
+
+          <menu.content @width={{4}} as |content|>
+            {{#each options as |item|}}
+              <content.menu-item @onClick={{action "openSomething"}}>
+                <span class="md-menu-align-target">Option</span> {{item}}
+              </content.menu-item>
+            {{/each}}
+          </menu.content>
+        </PaperMenu>
+      </div>
+
+      <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
+        <p>Small menu (<code class="paper">width=2</code>)</p>
+        <PaperMenu as |menu|>
+          <menu.trigger>
+            <PaperButton @onClick={{null}} @iconButton={{true}}>
+              {{paper-icon "local_phone" class="md-menu-origin"}}
+            </PaperButton>
+          </menu.trigger>
+
+          <menu.content @width={{2}} as |content|>
+            {{#each options as |item|}}
+              <content.menu-item @onClick={{action "openSomething"}}>
+                <span class="md-menu-align-target">Option</span> {{item}}
+              </content.menu-item>
+            {{/each}}
+          </menu.content>
+        </PaperMenu>
+      </div>
+    </div>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "menu.different-widths.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+
+  <h2 class="header">Dense menu</h2>
+
+  <p>
+    <code class="paper">paper-menu-content</code> may specify a `dense` boolean attribute.
+  </p>
+  <div class="layout-row layout-align-center-center">
+    {{! BEGIN-SNIPPET menu.dense }}
+    <div class="menus layout-fill layout-wrap layout-row layout-align-space-between-center">
+      <div class="layout-column flex-50 flex-sm-100 layout-align-center-center">
+        <p>Dense menu (<code class="paper">dense=true</code>)</p>
+        <PaperMenu as |menu|>
+          <menu.trigger>
+            <PaperButton @onClick={{null}} @iconButton={{true}}>
+              {{paper-icon "local_phone" class="md-menu-origin"}}
+            </PaperButton>
+          </menu.trigger>
+
+          <menu.content @dense={{true}} as |content|>
+            {{#each options as |item|}}
+              <content.menu-item @onClick={{action "openSomething"}}>
+                <span class="md-menu-align-target">Option</span> {{item}}
+              </content.menu-item>
+            {{/each}}
+          </menu.content>
+        </PaperMenu>
+      </div>
+      <div class="layout-column flex-50 flex-sm-100 layout-align-center-center">
+        <p>Dense menu (<code class="paper">dense=false</code>)</p>
+        <PaperMenu as |menu|>
+          <menu.trigger>
+            <PaperButton @onClick={{null}} @iconButton={{true}}>
+              {{paper-icon "local_phone" class="md-menu-origin"}}
+            </PaperButton>
+          </menu.trigger>
+
+          <menu.content @dense={{false}} as |content|>
+            {{#each options as |item|}}
+              <content.menu-item @onClick={{action "openSomething"}}>
+                <span class="md-menu-align-target">Option</span> {{item}}
+              </content.menu-item>
+            {{/each}}
+          </menu.content>
+        </PaperMenu>
+      </div>
+    </div>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "menu.dense.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+</Doc>
diff --git a/tests/dummy/app/templates/components/paper-api.hbs b/tests/dummy/app/templates/components/paper-api.hbs
deleted file mode 100644
index 83356805d..000000000
--- a/tests/dummy/app/templates/components/paper-api.hbs
+++ /dev/null
@@ -1,40 +0,0 @@
-{{#if title}}
-  <h3>{{title}}</h3>
-{{/if}}
-
-{{yield}}
-<div class="table-wrapper">
-  {{! template-lint-disable table-groups }}
-  <table class="paper-api">
-    {{#if header}}
-      <thead>
-        <tr>
-          {{#each header as |heading|}}
-            <th>{{heading}}</th>
-          {{/each}}
-        </tr>
-      </thead>
-    {{/if}}
-    {{#each categories as |category|}}
-      <tbody>
-        {{#each category as |row|}}
-          {{#if (is-subheading row)}}
-            <tr class="subheading">
-              <td colspan="3">{{row}}</td>
-            </tr>
-          {{else}}
-            <tr>
-              {{#each row as |cell index|}}
-                {{#if index}}
-                  <td>{{cell}}</td>
-                {{else}}
-                  <td><code>{{cell}}</code></td>
-                {{/if}}
-              {{/each}}
-            </tr>
-          {{/if}}
-        {{/each}}
-      </tbody>
-    {{/each}}
-  </table>
-</div>
diff --git a/tests/dummy/app/templates/components/select.hbs b/tests/dummy/app/templates/components/select.hbs
new file mode 100644
index 000000000..169e5b85a
--- /dev/null
+++ b/tests/dummy/app/templates/components/select.hbs
@@ -0,0 +1,117 @@
+<Doc>
+
+  <h1 class="header">Select</h1>
+  <h2 class="header">Basic Usage</h2>
+  <div class="layout-column layout-align-center-center">
+    <p>Enter an address</p>
+    <p>
+      <PaperCheckbox @label="Disable select" @value={{disableSelect}} @onChange={{action (mut disableSelect)}} />
+    </p>
+    <div class="layout-row">
+      {{! BEGIN-SNIPPET select.basic-usage }}
+      <PaperInput @label="Street Name" @value={{street}} @onChange={{action (mut street)}} />
+      <PaperInput @label="City" @value={{city}} @onChange={{action (mut city)}} />
+      <PaperSelect @disabled={{disableSelect}} @label="State" @options={{states}} @selected={{userState}} @onChange={{action (mut userState)}} as |state|>
+        {{state.abbrev}}
+      </PaperSelect>
+      {{! END-SNIPPET }}
+    </div>
+  </div>
+
+  {{#let (get-code-snippet "select.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <div class="layout-column layout-align-center-center">
+    <p>Paper select is based on Ember power select, advanced documentation can be found <a href="https://ember-power-select.com/docs">here</a>.</p>
+    {{#paper-api
+        (p-section
+          (p-row "disabled" "boolean" "Should the select field be disabled? Default is `false`.")
+          (p-row "label" "string" "Field label. Same as paper-input.")
+          (p-row "options" "array" "List of selectable options.")
+          (p-row "selected" "object" "Value of selected option.")
+        )
+          title="Select Helpers"
+    }}
+    {{/paper-api}}
+  </div>
+
+  <h2 class="header">Option groups</h2>
+
+  <div class="layout-column layout-align-center-center">
+    <p>Pick your pizza below</p>
+    <div class="layout-row">
+      {{! BEGIN-SNIPPET select.option-groups }}
+      <PaperSelect @options={{sizes}} @label="Size" @required={{true}} @selected={{pizzaSize}} @onChange={{action (mut pizzaSize)}} as |size|>
+        {{size}}
+      </PaperSelect>
+      <PaperSelect @options={{groupedToppings}} @label="Topping" @selected={{topping}} @onChange={{action (mut topping)}} as |topping|>
+        {{topping}}
+      </PaperSelect>
+      {{! END-SNIPPET }}
+    </div>
+  </div>
+
+  {{#let (get-code-snippet "select.option-groups.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Options with async search</h2>
+
+  <div class="layout-column layout-align-center-center">
+    <p>
+      Select will correctly resolve any promise you pass to the <code>options</code> property.
+    </p>
+    <div class="layout-column layout-align-center-center" style="height: 130px;">
+      {{! BEGIN-SNIPPET select.async-search }}
+      <PaperSelect @placeholder="Assign to a user" @selected={{selectedUser}} @options={{users}} @onChange={{action (mut selectedUser)}} as |user|>
+        {{user.name}}
+      </PaperSelect>
+
+      {{#if selectedUser}}
+        <p>You have selected the user <code>{{selectedUser.name}}</code></p>
+      {{/if}}
+      {{! END-SNIPPET }}
+    </div>
+  </div>
+
+  {{#let (get-code-snippet "select.async-search.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Select with Search</h2>
+  <p>Paper select can include a paper-input field at the top of the dropdown which acts as a live filter for the paper-select options. For additional documentation on search, please refer to the power-select docs <a href="https://ember-power-select.com/docs/the-search">here</a>.</p>
+  <div class="layout-column layout-align-center-center">
+    <div class="layout-column layout-align-center-center" style="height: 130px;">
+      {{! BEGIN-SNIPPET select.select-header }}
+      <PaperSelect @placeholder="Vegetable" @selected={{selectedVegetable}} @options={{vegetables}} @searchField="name" @searchPlaceholder="Search for a vegetable.." @searchEnabled={{true}} @onChange={{action (mut selectedVegetable)}} as |vegetable|>
+        {{vegetable.name}}
+      </PaperSelect>
+      {{! END-SNIPPET }}
+    </div>
+  </div>
+
+  {{#let (get-code-snippet "select.select-header.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <div class="layout-column layout-align-center-center">
+    {{#paper-api
+        (p-section
+          (p-row "searchField" "string" "Field name of provided options which search filter should compare against.")
+          (p-row "searchPlaceholder" "string" "Placeholder for paper-input which is displayed at top of paper-select dropdown.")
+          (p-row "searchEnabled" "boolean" "Enable paper-select to be searchable. Default is false.")
+        )
+          title="Select Search Helpers"
+    }}
+    {{/paper-api}}
+  </div>
+</Doc>
diff --git a/tests/dummy/app/templates/demo/sidenav.hbs b/tests/dummy/app/templates/components/sidenav.hbs
similarity index 57%
rename from tests/dummy/app/templates/demo/sidenav.hbs
rename to tests/dummy/app/templates/components/sidenav.hbs
index 776ac90ca..5aa10e6d6 100644
--- a/tests/dummy/app/templates/demo/sidenav.hbs
+++ b/tests/dummy/app/templates/components/sidenav.hbs
@@ -1,23 +1,8 @@
-<PageToolbar @pageTitle="Sidenav" @isDemo={{true}} />
-
-<DocContent>
-
-  <PaperCard>
-    <PaperToolbar as |toolbar|>
-      <toolbar.tools>
-        <h2>Basic Usage</h2>
-        <span class="flex"></span>
-        <PaperButton @onClick={{action "toggle" "showSourceCode"}} @iconButton={{true}}>
-          <PaperIcon @icon="code" />
-        </PaperButton>
-      </toolbar.tools>
-    </PaperToolbar>
-
-    <div class="doc-code-example {{if showSourceCode "is-visible"}}">
-      <CodeSnippet @name="sidenav.basic-usage.hbs" />
-    </div>
-
-    <div class="doc-content-example">
+<Doc>
+  <h1 class="header">Sidenav</h1>
+  <h2 class="header"> Basic Usage </h2>
+  <div class="layout-column layout-align-center-center" style="position:relative">
+    <PaperCard>
       {{! BEGIN-SNIPPET sidenav.basic-usage }}
       <PaperSidenavContainer @class="inner-sidenav">
 
@@ -30,8 +15,8 @@
           </PaperContent>
         </PaperSidenav>
 
-        <PaperCardContent @class="flex">
-          <div class="layout-fill layout-align-start-center layout-column" style="height: 500px">
+        <div class="flex">
+          <div class="layout-padding layout-align-start-center layout-column" style="height: 500px">
             <p>
               The left sidenav will "lock open" on a medium (>=960px wide) device.
               The right sidenav never "locks open" because we set <code>lockedOpen=false</code>.
@@ -56,7 +41,7 @@
             </PaperSidenavToggle>
 
           </div>
-        </PaperCardContent>
+        </div>
 
         <PaperSidenav @class="md-whiteframe-z2" @name="right" @position="right" @open={{rightSideBarOpen}} @lockedOpen={{false}} @onToggle={{action (mut rightSideBarOpen)}}>
           <PaperToolbar as |toolbar|>
@@ -66,29 +51,20 @@
             Çup? I'm on the right side.
           </PaperContent>
         </PaperSidenav>
-
       </PaperSidenavContainer>
-      {{! END-SNIPPET sidenav.basic-usage }}
-    </div>
-
-  </PaperCard>
-
-  <PaperCard>
-    <PaperToolbar as |toolbar|>
-      <toolbar.tools>
-        <h2>Persistent Sidenav</h2>
-        <span class="flex"></span>
-        <PaperButton @onClick={{action "toggle" "persistentCode"}} @iconButton={{true}}>
-          {{paper-icon "code"}}
-        </PaperButton>
-      </toolbar.tools>
-    </PaperToolbar>
-
-    <div class="doc-code-example {{if persistentCode "is-visible"}}">
-      <CodeSnippet @name="sidenav.persistent.hbs" />
-    </div>
-
-    <div class="doc-content-example">
+      {{! END-SNIPPET }}
+    </PaperCard>
+  </div>
+
+  {{#let (get-code-snippet "sidenav.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header"> Persistent </h2>
+  <div class="layout-column layout-align-center-center" style="position:relative">
+    <PaperCard>
       {{! BEGIN-SNIPPET sidenav.persistent }}
       <PaperSidenavContainer @class="inner-sidenav">
 
@@ -102,7 +78,7 @@
         </PaperSidenav>
 
         <PaperCardContent @class="flex">
-          <div class="layout-fill layout-align-start-center layout-column" style="height: 500px">
+          <div class="layout-padding layout-align-start-center layout-column" style="height: 500px">
             <p>
               Another way of using the sidenav is to toggle the <code>lockedOpen</code> state.
               This corresponds to the "persistent sidenav" pattern in the material spec.
@@ -120,21 +96,28 @@
 
       </PaperSidenavContainer>
       {{! END-SNIPPET sidenav.persistent }}
-    </div>
-
-  </PaperCard>
-
-  {{paper-api
-    (p-section
-      (p-row "position" "`'left'` | `'right'`" "Pass in the string `'left'` or `'right'` to place the sidenav accordingly.")
-      (p-row "lockedOpen" "`matchMedia` expression" "when this expression evauluates to true, the sidenav \"locks open\".")
-      (p-row "open" "boolean" "Specifies if the sidenav is opened or closed. Defaults to `false`.")
-      (p-row "closeOnClick" "boolean" "If `true` the sidenav closes when a click event is triggered. Prevent bubbling in click events you don't want this to happen or use `false`. Defaults to `true`.")
-    )
-    (p-section
-      "Actions"
-      (p-row "onToggle" "action" "An action to be executed when the sidenav is toggled, e.g. by when `closeOnClick` is `true` and a click happened or by using the `close` method on the service. This action gets a parameter that specifies wether this sidenav is opened or closed.")
-    )
-  }}
-
-</DocContent>
+   </PaperCard>
+  </div>
+
+  {{#let (get-code-snippet "sidenav.persistent.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <div class="layout-column layout-align-center-center">
+    {{paper-api
+      (p-section
+        (p-row "position" "`'left'` | `'right'`" "Pass in the string `'left'` or `'right'` to place the sidenav accordingly.")
+        (p-row "lockedOpen" "`matchMedia` expression" "when this expression evauluates to true, the sidenav \"locks open\".")
+        (p-row "open" "boolean" "Specifies if the sidenav is opened or closed. Defaults to `false`.")
+        (p-row "closeOnClick" "boolean" "If `true` the sidenav closes when a click event is triggered. Prevent bubbling in click events you don't want this to happen or use `false`. Defaults to `true`.")
+      )
+      (p-section
+        "Actions"
+        (p-row "onToggle" "action" "An action to be executed when the sidenav is toggled, e.g. by when `closeOnClick` is `true` and a click happened or by using the `close` method on the service.<br/> This action gets a parameter that specifies wether this sidenav is opened or closed.")
+      )
+    }}
+  </div>
+
+</Doc>
diff --git a/tests/dummy/app/templates/components/slider.hbs b/tests/dummy/app/templates/components/slider.hbs
new file mode 100644
index 000000000..dcb612e7e
--- /dev/null
+++ b/tests/dummy/app/templates/components/slider.hbs
@@ -0,0 +1,91 @@
+<Doc>
+  <h1 class="header">Slider</h1>
+  <h2 class="header">Basic Usage</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET slider.basic-usage }}
+    <h2>
+      RGB <span style={{colorStyle}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+    </h2>
+
+    <div class="layout layout-align-center-center slider-container">
+      <span>R</span>
+      <PaperSlider @class="flex" @min={{0}} @max={{255}} @value={{this.red}} @onChange={{action (mut this.red)}} />
+      ({{this.red}})
+    </div>
+
+    <div class="layout layout-align-center-center slider-container">
+      <span>G</span>
+      <PaperSlider @class="flex md-accent" @min={{0}} @max={{255}} @value={{this.green}} @onChange={{action (mut this.green)}} />
+      ({{this.green}})
+    </div>
+
+    <div class="layout layout-align-center-center slider-container">
+      <span>B</span>
+      <PaperSlider @class="flex md-primary" @min={{0}} @max={{255}} @value={{this.blue}} @onChange={{action (mut this.blue)}} />
+      ({{this.blue}})
+    </div>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "slider.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Theming</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET slider.theming }}
+    <div class="layout layout-align-center-center slider-container">
+      <div class="layout flex layout-align-center-center">
+        <span>default</span>
+      </div>
+      <PaperSlider @class="flex" @discrete={{true}} @value={{rating1}} @step={{1}} @min={{1}} @max={{5}} @onChange={{action (mut rating1)}} />
+    </div>
+    <div class="layout layout-align-center-center slider-container">
+      <div class="layout flex layout-align-center-center">
+        <span>md-warn</span>
+      </div>
+      <PaperSlider @class="flex" @warn={{true}} @discrete={{true}} @value={{rating2}} @step={{1}} @min={{1}} @max={{5}} @onChange={{action (mut rating2)}} />
+    </div>
+    <div class="layout layout-align-center-center slider-container">
+      <div class="layout flex layout-align-center-center">
+        <span>md-primary</span>
+      </div>
+      <PaperSlider @class="flex" @primary={{true}} @discrete={{true}} @value={{rating3}} @step={{1}} @min={{1}} @max={{5}} @onChange={{action (mut rating3)}} />
+    </div>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "slider.theming.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Disabled</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET slider.disabled }}
+    <PaperSlider @class="flex" @value={{disabled1}} @disabled={{true}} @onChange={{action (mut disabled1)}} />
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "slider.disabled.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Disabled, Discrete</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET slider.disabled-discrete }}
+    <PaperSlider @value={{discreteDisabled1}} @disabled={{true}} @discrete={{true}} @step={{3}} @min={{0}} @max={{10}} />
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "slider.disabled-discrete.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+</Doc>
diff --git a/tests/dummy/app/templates/components/speed-dial.hbs b/tests/dummy/app/templates/components/speed-dial.hbs
new file mode 100644
index 000000000..d38f5e983
--- /dev/null
+++ b/tests/dummy/app/templates/components/speed-dial.hbs
@@ -0,0 +1,160 @@
+<Doc>
+  <h1 class="header">Sidenav</h1>
+  <h2 class="header">Basic Usage</h2>
+  <div class="layout-column layout-align-center-center">
+    <div class="layout-align-space-around-stretch layout-row">
+      <div class="layout-column layout-align-start-center">
+        <h4>Direction</h4>
+        <PaperRadioGroup @groupValue={{direction}} @onChange={{action (mut direction)}} as |group|>
+          <group.radio @value="up">Up</group.radio>
+          <group.radio @value="down">Down</group.radio>
+          <group.radio @value="left">Left</group.radio>
+          <group.radio @value="right">Right</group.radio>
+        </PaperRadioGroup>
+      </div>
+
+      <div class="layout-column layout-align-start-center">
+        <h4>Open/Closed</h4>
+        <PaperCheckbox @value={{open}} @onChange={{action (mut open)}}>
+          open
+        </PaperCheckbox>
+      </div>
+
+      <div class="layout-column layout-align-start-center">
+        <h4>Animation</h4>
+        <PaperRadioGroup @groupValue={{animation}} @onChange={{action (mut animation)}} as |group|>
+          <group.radio @value="fling">Fling</group.radio>
+          <group.radio @value="scale">Scale</group.radio>
+        </PaperRadioGroup>
+      </div>
+
+    </div>
+
+    <PaperContent>
+      <div class="layout-align-center-center layout-row" style="min-height: 300px; overflow: hidden">
+        {{! BEGIN-SNIPPET speed-dial.basic-usage}}
+        <PaperSpeedDial @animation={{animation}} @direction={{direction}} @open={{open}} @onToggle={{action (mut open)}} as |dial|>
+          <dial.trigger>
+            <PaperButton @fab={{true}}>
+              {{paper-icon "menu"}}
+            </PaperButton>
+          </dial.trigger>
+
+          <dial.actions as |actions|>
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
+                {{paper-icon "people"}}
+              </PaperButton>
+            </actions.action>
+
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
+                {{paper-icon "accessibility"}}
+              </PaperButton>
+            </actions.action>
+
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
+                {{paper-icon "check-circle"}}
+              </PaperButton>
+            </actions.action>
+          </dial.actions>
+        </PaperSpeedDial>
+        {{! END-SNIPPET }}
+      </div>
+    </PaperContent>
+  </div>
+
+  <div>
+    <p>
+      You may supply a direction of <code>left</code>, <code>up</code>, <code>down</code>, or
+      <code>right</code> through the <code>direction</code> attribute. Default value is <code>down</code>.
+    </p>
+    <p>
+      There are also two available animations. Specify <code>fling</code> or <code>scale</code> strings
+      through the <code>animation</code> attribute. Default value is <code>fling</code>.
+    </p>
+    <p>
+      The component can also take a <code>open</code> attribute and an <code>onToggle</code> pair, much like
+      <code>paper-sidenav</code>. Use the pair to control the open status of the speed dial.
+    </p>
+  </div>
+
+  {{#let (get-code-snippet "speed-dial.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Advanced Usage</h2>
+  <div class="layout-column layout-align-center-center">
+    <div>
+      <p>
+        By default, it only works when you hover the speed dial's trigger. However, if you want to
+        open it by hovering the whole speed dial space including its actions, you can pass in
+        <code>hoverFull=true</code>. Try it with the following checkbox:
+      </p>
+      <PaperCheckbox @value={{hoverFull}} @onChange={{action (mut hoverFull)}}>
+        hoverFull
+      </PaperCheckbox>
+    </div>
+    <div>
+      {{! BEGIN-SNIPPET speed-dial.advanced-usage}}
+      <PaperSpeedDial @onMouseEnter={{action (mut open2) true}} @onMouseLeave={{action (mut open2) false}} @open={{open2}} @onToggle={{action (mut open2)}} @hoverFull={{hoverFull}} as |dial|>
+        <dial.trigger>
+          <PaperButton @fab={{true}}>
+            {{paper-icon "menu"}}
+          </PaperButton>
+        </dial.trigger>
+
+        <dial.actions as |actions|>
+          <actions.action>
+            <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
+              {{paper-icon "people"}}
+            </PaperButton>
+          </actions.action>
+
+          <actions.action>
+            <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
+              {{paper-icon "accessibility"}}
+            </PaperButton>
+          </actions.action>
+
+          <actions.action>
+            <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
+              {{paper-icon "check-circle"}}
+            </PaperButton>
+          </actions.action>
+        </dial.actions>
+      </PaperSpeedDial>
+      {{! END-SNIPPET }}
+    </div>
+
+    <div>
+      You can use the <code>onMouseEnter</code> and <code>onMouseLeave</code> actions to control
+      the <code>open</code> attribute. This results in a speed dial that opens when you hover it.
+    </div>
+  </div>
+
+  {{#let (get-code-snippet "speed-dial.advanced-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+</Doc>
+
+{{#if showDialog}}
+  <PaperDialog @fullscreen={{fullscreen}} @onClose={{action (mut showDialog) false}}>
+
+    <PaperDialogContent>
+      <h2 class="md-title">An action was clicked!</h2>
+      <p>Close this dialog and try another button.</p>
+    </PaperDialogContent>
+
+    <PaperDialogActions @class="layout-row">
+      <span class="flex"></span>
+      <PaperButton @primary={{true}} @onClick={{action (mut showDialog) false}}>Okay!</PaperButton>
+    </PaperDialogActions>
+
+  </PaperDialog>
+{{/if}}
diff --git a/tests/dummy/app/templates/components/tabs.hbs b/tests/dummy/app/templates/components/tabs.hbs
new file mode 100644
index 000000000..5157d50cf
--- /dev/null
+++ b/tests/dummy/app/templates/components/tabs.hbs
@@ -0,0 +1,218 @@
+<Doc>
+  <h1 class="header">Tabs</h1>
+  <h2 class="header">Basic Usage</h2>
+  <div class="layout-column layout-align-center-center">
+    <PaperCard>
+      <PaperContent>
+        {{! BEGIN-SNIPPET tabs.basic-usage}}
+        <PaperTabs @center={{center}} @stretch={{stretch}} @borderBottom={{borderBottom}} @selected={{selectedBasicTab}} @onChange={{action (mut selectedBasicTab)}} as |tabs|>
+          <tabs.tab>
+            Page One
+          </tabs.tab>
+          <tabs.tab @disabled={{true}}>
+            Page Two (disabled)
+          </tabs.tab>
+          <tabs.tab>
+            Page Three
+          </tabs.tab>
+          <tabs.tab>
+            Page Four
+          </tabs.tab>
+          <tabs.tab>
+            Page Five
+          </tabs.tab>
+        </PaperTabs>
+
+        {{#liquid-bind (hash tab=selectedBasicTab) class="md-padding" as |current|}}
+          <h1 class="md-display-2">Tab {{current.tab}}</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis
+            vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices.
+            Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.
+          </p>
+        {{/liquid-bind}}
+        {{! END-SNIPPET }}
+      </PaperContent>
+      <PaperCardContent>
+
+        <PaperCheckbox @value={{center}} @onChange={{action (mut center)}}>
+          Center tabs
+        </PaperCheckbox>
+
+        <PaperCheckbox @value={{stretch}} @onChange={{action (mut stretch)}}>
+          Stretch tabs
+        </PaperCheckbox>
+
+        <PaperCheckbox @value={{borderBottom}} @onChange={{action (mut borderBottom)}}>
+          Border bottom
+        </PaperCheckbox>
+
+      </PaperCardContent>
+      <PaperDivider />
+      <PaperCardContent>
+        <p>
+          <em><b>Note:</b> transitions were implemented using liquid-fire.</em>
+        </p>
+
+        <p>
+          The way that we teach paper-tabs is that they are essentially a <code>radio-group</code>
+          with some additional features (like tab pagination). So, this component essentially is
+          just a tab header you can use to control a value of a property.
+        </p>
+        <p>
+          To reinforce this idea, each of the tabs optionally accepts a <code>value</code>
+          property which needs to match the <code>paper-tabs</code> <code>selected</code>
+          property (see API table below for more info). You don't need to use the value property,
+          though. Each tab is automatically given a value equal to its index. So, your <code>onChange</code>
+          action will start getting integer values if you don't specify any value on the tabs.
+        </p>
+        <p>
+          It is up to the user to manage the body of the tabs. They're free to use <code>liquid-fire</code>,
+          css transitions or even just plain handlebars <code>\{{#if}}</code>s.
+          This makes the component <strong>much</strong> more flexible and DDAU-compliant, in our experience,
+          but it also means you will need to do a little bit more work to manage what you want to do with
+          the value. Thankfully Ember makes this dead easy for us.
+        </p>
+        <p>
+          To test tab pagination resize the browser.
+        </p>
+      </PaperCardContent>
+    </PaperCard>
+  </div>
+
+  {{#let (get-code-snippet "tabs.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Dynamic Usage</h2>
+  <div class="layout-column layout-align-center-center">
+    <PaperCard>
+      <PaperContent>
+        {{! BEGIN-SNIPPET tabs.dynamic-usage}}
+        <PaperTabs @primary={{true}} @borderBottom={{true}} @selected={{selectedChapter}} @onChange={{action (mut selectedChapter)}} as |tabs|>
+          {{#each chapters as |chapter|}}
+            <tabs.tab @value={{chapter}}>
+              {{chapter.title}}
+            </tabs.tab>
+          {{/each}}
+        </PaperTabs>
+
+        {{#liquid-bind (hash tab=selectedChapter.index m=selectedChapter) class="md-padding dynamic-animation" as |current|}}
+          <h1 class="md-display-2">{{current.m.title}}</h1>
+          <p>{{current.m.body}}</p>
+          <PaperButton @primary={{true}} @raised={{true}} @disabled={{eq chapters.length 1}} @onClick={{action "removeChapter" current.m}}>
+            Remove chapter
+          </PaperButton>
+        {{/liquid-bind}}
+
+        {{! END-SNIPPET }}
+      </PaperContent>
+      <PaperDivider />
+
+      <PaperCardContent>
+        <div class="md-padding layout-row layout-align-space-around-start">
+          <PaperInput @class="flex-20" @label="Title" @value={{newTitle}} @required={{true}} @onChange={{action (mut newTitle)}} />
+          <PaperInput @class="flex-60" @label="Content" @textarea={{true}} @value={{newContent}} @required={{true}} @onChange={{action (mut newContent)}} />
+          <div class="flex-20 layout-row layout-align-center-start">
+            <PaperButton @primary={{true}} @raised={{true}} @disabled={{not (and newTitle newContent)}} @onClick={{action "addChapter"}}>
+              Add chapter
+            </PaperButton>
+          </div>
+        </div>
+
+        <p>
+          <em><b>Note:</b> transitions were implemented using liquid-fire.</em>
+        </p>
+        <p>
+          In this example we render tabs dynamically, one per model. Note that we
+          need some simple book-keeping to implement some specific features.
+        </p>
+        <p>
+          What happens when we delete an active chapter? We decide that by setting
+          <code>selected</code>. When adding a new chapter we want it to be the
+          new selected tab. No problem, just set the <code>selected</code> property
+          to the newly selected chapter.
+        </p>
+      </PaperCardContent>
+    </PaperCard>
+  </div>
+
+  {{#let (get-code-snippet "tabs.dynamic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Routable Usage</h2>
+  <div class="layout-column layout-align-center-center">
+    <PaperCard>
+      <PaperContent>
+        {{! BEGIN-SNIPPET tabs.routable-usage}}
+        <PaperTabs @selected={{this.router.currentRouteName}} @borderBottom={{true}} @onChange={{action "noop"}} as |tabs|>
+          <tabs.tab @value="components.tabs.index" @href={{href-to "components.tabs.index"}}>
+            Index
+          </tabs.tab>
+          <tabs.tab @value="components.tabs.nested-route" @href={{href-to "components.tabs.nested-route"}}>
+            Nested Route
+          </tabs.tab>
+        </PaperTabs>
+
+        {{liquid-outlet class="md-padding"}}
+        {{! END-SNIPPET }}
+      </PaperContent>
+      <PaperDivider />
+
+      <PaperCardContent>
+        <p>
+          <em><b>Note:</b> transitions were implemented using liquid-fire.</em>
+        </p>
+        <p>
+          Sometimes we need to use tabs with routes. If you pass an <code>href</code>
+          property to a tab, it will render itself as an <code>&lt;a&gt;</code> tag.
+        </p>
+        <p>
+          <em>
+            <b>Hint:</b> use <code>ember-href-to</code> addon to easily generate
+            urls for your routes. It plays really well with <code>paper-tabs</code>,
+            <code>paper-buttons</code> and even <code>paper-item</code>s.
+          </em>
+        </p>
+        <p>
+          <b>Hint:</b> for Ember versions less than 2.15, use the <code>ember-router-service-polyfill</code> addon to easily retrieve
+          the current route name and use it as the selected value to <code>paper-tabs</code>.
+        </p>
+      </PaperCardContent>
+    </PaperCard>
+  </div>
+
+  {{#let (get-code-snippet "tabs.routable-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <div class="layout-column layout-align-center-center">
+    {{paper-api
+      (p-section
+        (p-row "selected" "string or number" "Value of the active tab. Each tab automatically gets an index as its value.<br/> Default is `0` (the first tab active).")
+        (p-row "onChange" "action" "An action triggered when the active tab changes.")
+        (p-row "accent" "boolean" "Pass `true` to enable accent color scheme.")
+        (p-row "primary" "boolean" "Pass `true` to enable primary color scheme.")
+        (p-row "stretch" "boolean or matchMedia query" "Use true/false to permanently enable/disable tab stretching.<br/> You can also use a matchMedia query to enable tab stretching only at certain viewport sizes.<br/> Default value is `sm` (`(min-width: 600px) and (max-width: 959px)`).")
+        (p-row "borderBottom" "boolean" "Use true to enable border beneath tabs. Default is false.")
+      )
+      (p-section
+        "`tabs.tab` API"
+        (p-row "value" "string" "Value associated with the tab. To activate the tab, `selected` needs to have this value.<br/> Each tab gets a value automatically set to its index, so you don't need to use this property unless you need specific values for some special case.")
+        (p-row "isSelected" "boolean" "Optionally you can set a specific tab as selected directly without relying on the global tabs value.")
+        (p-row "disabled" "boolean" "Pass `true` to disable the tab button.")
+        (p-row "href" "string" "You can pass an href to the tab button to render a link. Hint: use `ember-href-to` to generate route urls.")
+        (p-row "onClick" "action" "An action triggered when the tab button is clicked.")
+      ) title="API Usage"
+    }}
+  </div>
+
+</Doc>
diff --git a/tests/dummy/app/templates/demo/tabs/index.hbs b/tests/dummy/app/templates/components/tabs/index.hbs
similarity index 100%
rename from tests/dummy/app/templates/demo/tabs/index.hbs
rename to tests/dummy/app/templates/components/tabs/index.hbs
diff --git a/tests/dummy/app/templates/demo/tabs/nested-route.hbs b/tests/dummy/app/templates/components/tabs/nested-route.hbs
similarity index 100%
rename from tests/dummy/app/templates/demo/tabs/nested-route.hbs
rename to tests/dummy/app/templates/components/tabs/nested-route.hbs
diff --git a/tests/dummy/app/templates/components/toast.hbs b/tests/dummy/app/templates/components/toast.hbs
new file mode 100644
index 000000000..c1728cf9b
--- /dev/null
+++ b/tests/dummy/app/templates/components/toast.hbs
@@ -0,0 +1,182 @@
+<Doc>
+  <h1 class="header">Toast</h1>
+
+  <h2 class="header">Component</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET toast.component }}
+    {{#if showToast}}
+      <PaperToast @duration={{duration}} @position={{concat positionY " " positionX}} @capsule={{capsule}} @swipeToClose={{swipeToClose}} @onClose={{action "closeToast"}} as |toast|>
+        <toast.text>Hello</toast.text>
+        <PaperButton @accent={{true}} @onClick={{action "buttonAction"}}>Undo</PaperButton>
+      </PaperToast>
+    {{/if}}
+
+    {{#if showToastWithout}}
+      <PaperToast @duration={{duration}} @position={{concat positionY " " positionX}} @capsule={{capsule}} @swipeToClose={{swipeToClose}} @onClose={{action "closeToastWithout"}} as |toast|>
+        <toast.text>Hello</toast.text>
+      </PaperToast>
+    {{/if}}
+    {{! END-SNIPPET }}
+
+    <p>Open a toast over the app's content. Press escape, swipe or timeout to close the toast.</p>
+
+    <div class="layout-row layout-wrap">
+      <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openToast"}}>
+        Open toast with accent button
+      </PaperButton>
+
+      <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openToastWithout"}}>
+        Open toast
+      </PaperButton>
+    </div>
+
+    <h3>Options</h3>
+    <div class="layout-row layout-wrap layout-xs-column layout-sm-column">
+
+      <div class="flex">
+        <PaperRadioGroup @groupValue={{positionX}} @onChange={{action (mut positionX)}} as |group|>
+          <group.radio @value="left">Left</group.radio>
+          <group.radio @value="right">Right</group.radio>
+        </PaperRadioGroup>
+      </div>
+      <div class="flex">
+        <PaperRadioGroup @groupValue={{positionY}} @onChange={{action (mut positionY)}} as |group|>
+          <group.radio @value="top">Top</group.radio>
+          <group.radio @value="bottom">Bottom</group.radio>
+        </PaperRadioGroup>
+      </div>
+      <div class="flex">
+        <PaperCheckbox @value={{capsule}} @onChange={{action (mut capsule)}}>
+          capsule
+        </PaperCheckbox>
+      </div>
+      <div class="flex">
+        <PaperCheckbox @value={{swipeToClose}} @flex={{true}} @onChange={{action (mut swipeToClose)}}>
+          swipeToClose
+        </PaperCheckbox>
+      </div>
+    </div>
+
+    <h3>duration ({{duration}}ms)</h3>
+    <div class="layout layout-align-center-center slider-container">
+      {{paper-icon "watch later"}}
+      <PaperSlider @class="flex" @value={{duration}} @max={{6000}} @onChange={{action (mut duration)}} />
+    </div>
+  </div>
+
+  {{#let (get-code-snippet "toast.component.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <div class="layout-column layout-align-center-center">
+    {{paper-api
+      (p-section
+        (p-row "parent" "element or selector" "Existing element where the modal and backdrop will be rendered")
+        (p-row "swipeToClose" "boolean" "Causes swiping to trigger the `onClose` handler. Defaults to `true`.")
+        (p-row "duration" "number or `false`" "Timeout in milliseconds, set to false to disable timeout. Defaults to `3000`")
+        (p-row "escapeToClose" "boolean" "Causes pressing escape to close the toast. Defaults to `false`.")
+        (p-row "position" "string" "Possible values are `bottom left` (default), `bottom right`, `top left` and `top right`")
+        (p-row "capsule" "boolean" "Controls whether the capsule class is added to the toast.Defaults to `false`")
+      )
+      (p-section
+        "Actions"
+        (p-row "onClose" "action" "An action to be executed when the toast is closed, e.g. by pressing escape, swiping or timeout.")
+      )
+    }}
+  </div>
+
+  <h2 class="header">Service</h2>
+  <div class="layout-column layout-align-center-center" id="toast-example" style="position:relative;">
+    <PaperToaster @parent="#toast-example" />
+    <p>Open a toast via <code>paperToaster</code> service and <code>\{{paper-toaster}}</code> component.</p>
+
+    <h3>Options</h3>
+
+    <div class="layout-column">
+      <PaperInput @label="Toast text" @value={{toastText}} @onChange={{action (mut toastText)}} />
+
+      <strong>Toast class</strong>
+      <div>
+        <PaperRadioGroup @class="layout-row" @groupValue={{toastClass}} @onChange={{action (mut toastClass)}} as |group|>
+          <group.radio @value="">[none]</group.radio>
+          <group.radio @value="md-accent">md-accent</group.radio>
+          <group.radio @value="md-warn">md-warn</group.radio>
+        </PaperRadioGroup>
+      </div>
+    </div>
+
+    <div class="layout-row">
+      <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openServiceToast"}}>
+        Open toast
+      </PaperButton>
+      <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openServiceActionToast"}}>
+        Open toast with action
+      </PaperButton>
+    </div>
+    <PaperList>
+      {{#each paperToaster.queue as |toast index|}}
+        <PaperItem as |controls|>
+          <p>
+            "{{toast.text}}" -
+            {{#if (eq index 0)}}
+              {{#if toast.show}}
+                showing for {{toast.duration}}ms
+              {{else}}
+                (Removing...)
+              {{/if}}
+            {{else}}
+              (Waiting)
+            {{/if}}
+          </p>
+          <div class="md-secondary-container">
+            <controls.button @secondary={{true}} @onClick={{action "cancelToast" toast}}>
+              Cancel
+            </controls.button>
+          </div>
+        </PaperItem>
+      {{/each}}
+    </PaperList>
+  </div>
+
+  {{#let (get-code-snippet "toast.component.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <div class="layout-column layout-align-center-center">
+    {{paper-api
+      (p-section
+        "Methods"
+        (p-row "show(text[, options])" "Toast" "Display a toast that renders given text.")
+        (p-row "showComponent(componentName[, options])" "Toast" "Display a toast that renders a component.")
+        (p-row "cancelToast(toast)" "" "Closes or cancel a given toast.")
+      )
+      (p-section
+        "Options"
+        (p-row "duration" "number or `false`" "Timeout in milliseconds. Defaults to `3000`. Use `false` to keep it open until a `cancelToast` is used.")
+        (p-row "onClose" "function" "You can pass in a function the will be called back after the toast closes.")
+        (p-row "position" "string" "Possible values are `bottom left` (default), `bottom right`, `top left` and `top right`")
+        (p-row "toastClass" "string" "CSS class to be applied to the md-toast element")
+        (p-row "action.label" "string" "The label of the action button.")
+        (p-row "action.primary" "boolean" "Wether or not you want the action button to be higlighted with the primary color.")
+        (p-row "action.accent" "boolean" "Wether or not you want the action button to be higlighted with the accent color.")
+        (p-row "action.warn" "boolean" "Wether or not you want the action button to be higlighted with the warn color.")
+        (p-row "action.onClick" "function" "This function gets called when the button is pressed.")
+      )
+    }}
+
+    <h3>Application defaults</h3>
+
+    <p>
+      You can define a default <code>duration</code>, <code>toastClass</code>
+      and <code>position</code> for your application by adding in your
+      <code>config/environment.js</code> file:
+    </p>
+  </div>
+
+  <span id="bottom-of-card"></span>
+
+</Doc>
diff --git a/tests/dummy/app/templates/components/toggles.hbs b/tests/dummy/app/templates/components/toggles.hbs
new file mode 100644
index 000000000..2c28e51c5
--- /dev/null
+++ b/tests/dummy/app/templates/components/toggles.hbs
@@ -0,0 +1,148 @@
+<Doc>
+  <h1 class="header">Switch</h1>
+
+  <h2 class="header">Basic Usage</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET switch.basic-usage }}
+    <PaperSwitch @value={{booleanProp1}} @onChange={{action (mut booleanProp1)}}>
+      {{booleanProp1}}
+    </PaperSwitch>
+
+    <PaperSwitch @value={{booleanProp2}} @onChange={{action (mut booleanProp2)}}>
+      {{booleanProp2}}
+    </PaperSwitch>
+
+    <PaperSwitch @value={{booleanProp3}} @onChange={{action "changeBooleanProp" "3"}} @disabled={{true}}>
+      Disabled switch
+    </PaperSwitch>
+
+    <PaperSwitch @value={{booleanProp4}} @onChange={{action "changeBooleanProp" "4"}} @noink={{true}}>
+      Noink switch
+    </PaperSwitch>
+
+    <PaperSwitch @label="Blockless version" @value={{booleanProp5}} @onChange={{action "changeBooleanProp" "5"}} />
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "switch.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h1 class="header">Checkbox</h1>
+
+  <h2 class="header">Basic Usage</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET checkbox.basic-usage }}
+    <PaperCheckbox @value={{value1}} @onChange={{action (mut value1)}}>
+      A checkbox: {{value1}}
+    </PaperCheckbox>
+
+    <PaperCheckbox @value={{value2}} @onChange={{action (mut value2)}}>
+      A checkbox: {{if value2 "yep" "nope"}}
+    </PaperCheckbox>
+
+    <PaperCheckbox @value={{value3}} @onChange={{action (mut value3)}} @disabled={{true}}>
+      Checkbox (disabled)
+    </PaperCheckbox>
+
+    <PaperCheckbox @value={{true}} @onChange={{action (mut value4)}} @disabled={{true}}>
+      Checkbox (disabled and value)
+    </PaperCheckbox>
+
+    <PaperCheckbox @value={{value5}} @onChange={{action (mut value5)}} @noink={{true}}>
+      Checkbox (no ink)
+    </PaperCheckbox>
+
+    <PaperCheckbox @label="Blockless version" @value={{value6}} @onChange={{action "toggleValue6"}} />
+
+    <PaperCheckbox @indeterminate={{isIndeterminate}} @value={{value7}} @onChange={{action (mut value7)}}>
+      Indeterminate checkbox
+    </PaperCheckbox>
+
+    <PaperCheckbox @disabled={{true}} @indeterminate={{isIndeterminate}} @value={{value7}} @onChange={{null}}>
+      Indeterminate checkbox (disabled)
+    </PaperCheckbox>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "checkbox.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h1 class="header"> Radio </h1>
+
+  <h2 class="header">Basic Usage</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET radio.basic-usage }}
+    <PaperRadio @toggle={{true}} @value="Toggable" @groupValue={{toggleValue}} @onChange={{action (mut toggleValue)}}>
+      Toggable
+    </PaperRadio>
+    <PaperRadio @label="Blockless" @toggle={{true}} @value="Blockless" @groupValue={{blocklessValue}} @onChange={{action (mut blocklessValue)}} />
+    <PaperRadio @value={{false}} @disabled={{true}} @onChange={{null}}>
+      Disabled
+    </PaperRadio>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "radio.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Group Usage</h2>
+  <div class="layout-column layout-align-center-center">
+    <p>
+      Selected Value: <span class="radio-value">{{selectedFruit}}</span>
+    </p>
+
+    {{! BEGIN-SNIPPET radio.group-usage}}
+    <PaperRadioGroup @groupValue={{readonly selectedFruit}} @onChange={{action (mut selectedFruit)}} as |group|>
+      <group.radio @value="Apple" @primary={{true}}> Apple </group.radio>
+      <group.radio @value="Banana" @warn={{true}}> Banana </group.radio>
+      <group.radio @value="Mango"> Mango </group.radio>
+    </PaperRadioGroup>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "radio.group-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Template</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET radio.template}}
+    <PaperRadioGroup @groupValue={{selectedComponent}} @onChange={{action (mut selectedComponent)}} as |group|>
+
+      <group.label>
+        <p>Selected Component: <span class="radio-value">{{selectedComponent}}</span></p>
+      </group.label>
+
+      <group.radio @value="Card" @primary={{true}}>
+        {{paper-icon "view_carousel"}}
+      </group.radio>
+
+      <group.radio @value="Chips" @warn={{true}}>
+        {{paper-icon "label" }}
+      </group.radio>
+
+      <group.radio @value="Dialog">
+        {{paper-icon "call"}}
+      </group.radio>
+
+    </PaperRadioGroup>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "radio.template.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+  {{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+</Doc>
diff --git a/tests/dummy/app/templates/components/toolbar.hbs b/tests/dummy/app/templates/components/toolbar.hbs
new file mode 100644
index 000000000..5f06d4322
--- /dev/null
+++ b/tests/dummy/app/templates/components/toolbar.hbs
@@ -0,0 +1,112 @@
+<Doc>
+  <h1 class="header">Toolbar</h1>
+  <h2 class="header">Basic Usage</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET toolbar.basic-usage }}
+    <PaperToolbar>
+      <PaperToolbarTools>
+        <PaperButton @iconButton={{true}}>
+          {{paper-icon "menu"}}
+        </PaperButton>
+        <h2>
+          Ember Paper
+        </h2>
+        <span class="flex"></span>
+        <PaperButton @iconButton={{true}}>
+          {{paper-icon "favorite"}}
+        </PaperButton>
+        <PaperButton @iconButton={{true}}>
+          {{paper-icon "more_vert"}}
+        </PaperButton>
+      </PaperToolbarTools>
+    </PaperToolbar>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "toolbar.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">With Tools</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET toolbar.with-tools }}
+    <PaperToolbar as |toolbar|>
+      <toolbar.tools>
+        <PaperButton>
+          Go Back
+        </PaperButton>
+        <h2>Ember Paper</h2>
+        <span class="flex"></span>
+        <PaperButton @raised={{true}}>
+          Learn More
+        </PaperButton>
+        <PaperButton @mini={{true}} @aria-label="Favorite">
+          {{paper-icon "favorite"}}
+        </PaperButton>
+      </toolbar.tools>
+    </PaperToolbar>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "toolbar.with-tools.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+
+  <h2 class="header">Tall</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET toolbar.tall }}
+    <PaperToolbar @tall={{true}}>
+      <PaperToolbarTools>
+        <h2>Ember Paper</h2>
+      </PaperToolbarTools>
+    </PaperToolbar>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "toolbar.tall.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Accent</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET toolbar.accent }}
+    <PaperToolbar @accent={{true}}>
+      <PaperToolbarTools>
+        <h2>Ember Paper</h2>
+      </PaperToolbarTools>
+    </PaperToolbar>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "toolbar.with-tools.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <h2 class="header">Warn</h2>
+  <div class="layout-column layout-align-center-center">
+    {{! BEGIN-SNIPPET toolbar.warn }}
+    <PaperToolbar @warn={{true}}>
+      <span class="flex"></span>
+      <PaperToolbarTools>
+        <h2>Ember Paper</h2>
+      </PaperToolbarTools>
+    </PaperToolbar>
+    {{! END-SNIPPET }}
+  </div>
+
+  {{#let (get-code-snippet "toolbar.warn.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+</Doc>
diff --git a/tests/dummy/app/templates/components/tooltip.hbs b/tests/dummy/app/templates/components/tooltip.hbs
new file mode 100644
index 000000000..6d1bb77ab
--- /dev/null
+++ b/tests/dummy/app/templates/components/tooltip.hbs
@@ -0,0 +1,81 @@
+<Doc>
+  <h1 class="header">Tooltip</h1>
+  <h2 class="header">Basic Usage</h2>
+  <div class="layout-column layout-align-center-center">
+    <p>
+      You can render tooltips using the paper-tooltip component. This component
+      will attach to the immediate parent element and use it for positioning.
+    </p>
+
+    <p>
+      You can control the position of you tooltip using the
+      <code>position</code> property which can be one of <code>bottom</code> (default),
+      <code>top</code>, <code>left</code> or <code>right</code>. Try it:
+    </p>
+
+    <div class="layout-row layout-align-space-around-center md-padding">
+      {{! BEGIN-SNIPPET tooltip.basic-usage }}
+      <PaperButton @raised={{true}}>
+        A button
+        <PaperTooltip @position={{position}}>
+          Hey! I'm a tooltip. Çup?
+        </PaperTooltip>
+      </PaperButton>
+
+      <PaperButton @iconButton={{true}} @raised={{true}}>
+        {{paper-icon "create"}}
+        <PaperTooltip @position={{position}}>
+          Create
+        </PaperTooltip>
+      </PaperButton>
+
+      <PaperButton @fab={{true}} @raised={{true}} @accent={{true}}>
+        {{paper-icon "delete"}}
+        <PaperTooltip @position={{position}}>
+          Delete
+        </PaperTooltip>
+      </PaperButton>
+
+      <div>
+        {{#paper-icon "info"}}
+          <PaperTooltip @position={{position}}>
+            Icon tooltip
+          </PaperTooltip>
+        {{/paper-icon}}
+      </div>
+      {{! END-SNIPPET }}
+    </div>
+
+    <PaperRadioGroup @groupValue={{position}} @onChange={{action (mut position)}} as |group|>
+      <group.radio @value="bottom">
+        Bottom
+      </group.radio>
+      <group.radio @value="top">
+        Top
+      </group.radio>
+      <group.radio @value="left">
+        Left
+      </group.radio>
+      <group.radio @value="right">
+        Right
+      </group.radio>
+    </PaperRadioGroup>
+  </div>
+
+  {{#let (get-code-snippet "tooltip.basic-usage.hbs") as |snippet|}}
+    <CodeBlock @language="markup">
+{{snippet.source}}
+    </CodeBlock>
+  {{/let}}
+
+  <div class="layout-column layout-align-center-center">
+    {{paper-api
+      (p-section
+        (p-row "zIndex" "number" "Controls the z-index of the tooltip. By default it is 100.")
+        (p-row "position" "string" "Controls the position of the tooltip. Use one of `bottom` (default), `top`, `left` or `right`")
+        (p-row "parent" "element or selector" "Existing element where the tooltip will be rendered. Defaults to the global paper-wormhole.")
+        (p-row "attachTo" "element or selector" "Existing element that the tooltip will use to position itself. Defaults to the immediate parent element of the tooltip.")
+      )
+    }}
+  </div>
+</Doc>
diff --git a/tests/dummy/app/templates/cookbook.hbs b/tests/dummy/app/templates/cookbook.hbs
deleted file mode 100644
index 6540f8860..000000000
--- a/tests/dummy/app/templates/cookbook.hbs
+++ /dev/null
@@ -1,15 +0,0 @@
-<PageToolbar @pageTitle="Cookbook" @isDemo={{false}} />
-
-<PaperContent @class="md-padding">
-  <div class="doc-content">
-    <h3>Hiding the <code>\{{paper-input}}</code> character counts</h3>
-    <p>
-      Material Design <a href="https://material.google.com/components/text-fields.html#text-fields-character-counter">requires that a character count is displayed</a> for input elements which have a length restriction. However, when forms have many input elements, some may prefer to display the count only when the element is focused or invalid. This CSS achieves this.
-    </p>
-    <CodeSnippet @name="cookbook.no-char-count.scss" />
-    <h3>Recipe contributions</h3>
-    <p>
-      Have a great tip or solution for <code>ember-paper</code>? <a href="https://github.com/miguelcobain/ember-paper/pulls">Submit a pull request</a> on GitHub or discuss it with the team on <a href="https://discord.gg/zT3asNS"> Discord #e-paper</a> for inclusion here.
-    </p>
-  </div>
-</PaperContent>
diff --git a/tests/dummy/app/templates/demo/autocomplete.hbs b/tests/dummy/app/templates/demo/autocomplete.hbs
deleted file mode 100644
index 64fb34f1e..000000000
--- a/tests/dummy/app/templates/demo/autocomplete.hbs
+++ /dev/null
@@ -1,121 +0,0 @@
-<PageToolbar @pageTitle="Autocomplete" @isDemo={{true}} />
-
-<DocContent>
-
-  <PaperCard>
-    <PaperCardContent>
-      <h2>Basic Usage</h2>
-      <blockquote>Use <code>\{{paper-autocomplete}}</code> to search for matches from local or remote data sources.</blockquote>
-      <form>
-        {{! BEGIN-SNIPPET autocomplete.basic-usage }}
-        <PaperAutocomplete @disabled={{firstDisabled}} @onCreate={{action "addCountry"}} @options={{items}} @allowClear={{true}} @defaultHighlighted={{if enableDefaultHighlighted highlightFirstMatch}} @searchText={{readonly countrySearchText}} @onSearchTextChange={{action (mut countrySearchText)}} @selected={{selectedCountry}} @search={{if simulateQuery (action "searchCountries")}} @searchField="name" @labelPath="name" @placeholder="Select a Country..." @noMatchesMessage="Oops this country doesn't exist. Create a new country?" @onSelectionChange={{action (mut selectedCountry)}} />
-        {{! END-SNIPPET }}
-      </form>
-      <p>
-        {{#if selectedCountry}}
-          Selected country is {{selectedCountry.name}} ({{selectedCountry.code}})
-        {{else}}
-          Nothing selected...
-        {{/if}}
-      </p>
-      <p>
-        {{#if countrySearchText}}
-          Search text is {{countrySearchText}}
-        {{else}}
-          No search text
-        {{/if}}
-      </p>
-      <PaperCheckbox @value={{firstDisabled}} @onChange={{action (mut firstDisabled)}}>
-        Disable input
-      </PaperCheckbox>
-      <PaperCheckbox @value={{simulateQuery}} @onChange={{action (mut simulateQuery)}}>
-        Simulate query
-      </PaperCheckbox>
-      <PaperCheckbox @value={{enableDefaultHighlighted}} @onChange={{action (mut enableDefaultHighlighted)}}>
-        Highlight first match
-      </PaperCheckbox>
-      <PaperButton @primary={{true}} @label="Reset search-Text" @onClick={{action (mut countrySearchText) ""}} />
-      <PaperButton @primary={{true}} @label="Reset selected" @onClick={{action (mut selectedCountry) null}} />
-
-      <h3>Template</h3>
-      <CodeSnippet @name="autocomplete.basic-usage.hbs" />
-
-    </PaperCardContent>
-  </PaperCard>
-
-  <PaperCard>
-    <PaperCardContent>
-      <h2>Block Custom template</h2>
-      <blockquote>Use <code>\{{paper-autocomplete}}</code> with custom templates to show styled autocomplete results.</blockquote>
-
-      {{!-- searchText=(readonly templateSeachText) --}}
-
-      <form>
-        {{! BEGIN-SNIPPET autocomplete.block-custom-template }}
-        {{#paper-autocomplete
-          placeholder="Type e.g. ember, paper, one, two etc."
-          options=arrayOfItems
-          selected=selectedItem
-          onSelectionChange=(action (mut selectedItem))
-          as |item term|}}
-          <span class="item-title">
-            {{paper-icon "star"}}
-            <span>
-              <PaperAutocompleteHighlight @searchText={{term.searchText}} @flags="i" @label={{item}} />
-            </span>
-          </span>
-        {{else}}
-          Whoops! could not find!
-        {{/paper-autocomplete}}
-        {{! END-SNIPPET }}
-      </form>
-
-      <p>
-        Selected: {{if selectedItem selectedItem "None"}}
-      </p>
-
-      <h3>Template</h3>
-      <CodeSnippet @name="autocomplete.block-custom-template.hbs" />
-    </PaperCardContent>
-  </PaperCard>
-
-  <PaperCard>
-    <PaperCardContent>
-      <h2>Floating Label</h2>
-      <blockquote>The following example demonstrates floating labels being used as a normal form element.</blockquote>
-      <form class="layout-row">
-        {{! BEGIN-SNIPPET autocomplete.floating-label }}
-        <PaperInput @label="Name" @value={{name}} @onChange={{action (mut name)}} @class="flex" />
-        <PaperAutocomplete @disabled={{readonly disabled2}} @required={{readonly isRequired}} @triggerClass="flex" @options={{items}} @selected={{selectedCountry2}} @search={{if simulateQuery2 (action "searchCountries")}} @searchField="name" @labelPath="name" @label="Select a Country..." @allowClear={{readonly allowClearWithLabel}} @noMatchesMessage="Oops this country doesn't exist." @onSelectionChange={{action (mut selectedCountry2)}} as |country select|>
-          <PaperAutocompleteHighlight @label={{country.name}} @searchText={{select.searchText}} @flags="i" />
-        </PaperAutocomplete>
-
-        {{! END-SNIPPET }}
-      </form>
-      <p>
-        {{#if selectedCountry2}}
-          Selected country is {{selectedCountry2.name}} ({{selectedCountry2.code}})
-        {{else}}
-          Nothing is selected.
-        {{/if}}
-      </p>
-      <PaperCheckbox @value={{readonly disabled2}} @onChange={{action (mut disabled2)}}>
-        Disable input
-      </PaperCheckbox>
-      <PaperCheckbox @value={{readonly simulateQuery2}} @onChange={{action (mut simulateQuery2)}}>
-        Simulate query
-      </PaperCheckbox>
-      <PaperCheckbox @value={{isRequired}} @onChange={{action (mut isRequired)}}>
-        Is required
-      </PaperCheckbox>
-      <PaperCheckbox @value={{readonly allowClearWithLabel}} @onChange={{action (mut allowClearWithLabel)}}>
-        Allow Clear
-      </PaperCheckbox>
-
-      <h3>Template</h3>
-      <CodeSnippet @name="autocomplete.floating-label.hbs" />
-
-    </PaperCardContent>
-  </PaperCard>
-
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/button.hbs b/tests/dummy/app/templates/demo/button.hbs
deleted file mode 100644
index 740d75ad3..000000000
--- a/tests/dummy/app/templates/demo/button.hbs
+++ /dev/null
@@ -1,71 +0,0 @@
-<PageToolbar @pageTitle="Button" @isDemo={{true}} />
-
-<DocContent>
-  {{! BEGIN-SNIPPET buttons.example }}
-  <div class="layout-row">
-    <PaperButton @onClick={{action "flatButton"}}>Button with action</PaperButton>
-    <PaperButton @noink={{true}} @primary={{true}}>Primary (noink)</PaperButton>
-    <PaperButton @disabled={{true}}>disabled</PaperButton>
-    <PaperButton @warn={{true}}>warn</PaperButton>
-    <PaperButton @accent={{true}}>accent</PaperButton>
-    <PaperButton @href="http://emberjs.com/images/tomsters/original.png" @target="_blank">href link</PaperButton>
-  </div>
-  <p>
-    <PaperButton @raised={{true}} @onClick={{action "raisedButton"}}>Button with action</PaperButton>
-    <PaperButton @raised={{true}} @primary={{true}}>Primary</PaperButton>
-    <PaperButton @raised={{true}} @disabled={{true}}>disabled</PaperButton>
-    <PaperButton @raised={{true}} @warn={{true}}>warn</PaperButton>
-    <PaperButton @raised={{true}} @accent={{true}}>accent</PaperButton>
-  </p>
-  <CustomButton>
-    <p>
-      <PaperButton @raised={{true}} @onClick={{action "targetButton"}}>Button with target</PaperButton>
-      <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "targetButton"}}>Button with bubble</PaperButton>
-      <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "targetButton"}} @bubbles={{false}}>Button no bubble</PaperButton>
-    </p>
-  </CustomButton>
-
-  <p>
-    <PaperButton @raised={{true}} @fab={{true}}>Fab</PaperButton>
-    <PaperButton @raised={{true}} @fab={{true}} @accent={{true}}>Fab</PaperButton>
-    <PaperButton @raised={{true}} @mini={{true}}>Mini</PaperButton>
-    <PaperButton @raised={{true}} @mini={{true}} @primary={{true}}>Mini</PaperButton>
-    <PaperButton @iconButton={{true}}>{{paper-icon "accessibility"}}</PaperButton>
-  </p>
-
-  <p>
-    <PaperButton @raised={{true}} @label="Blockless version" />
-  </p>
-  {{! END-SNIPPET }}
-  <h3>Template</h3>
-  <CodeSnippet @name="buttons.example.hbs" />
-
-  <h3>Controller</h3>
-  <CodeSnippet @name="buttons.component.js" />
-
-  {{paper-api
-    (p-section
-      (p-row "onClick" "closure" "Action sent when the button is clicked.")
-      (p-row "type" "string" "Sets the html5 `type` attribute. Defaults to `\"button\"`, except for `<a>` link buttons.")
-      (p-row "bubbles" "boolean" "Determines whether the Ember click event handler bubbles. Default is `undefined`, which bubbles.")
-      (p-row "disabled" "boolean" "Whether the button is displayed as disabled and does not accept clicks.")
-    )
-    (p-section
-      "Link buttons"
-      (p-row "href" "string" "Displays the button as an `<a>` link to the specified destination URL.")
-      (p-row "target" "string" "Sets the `<a>` link target attribute, such as `\"_blank\"`.")
-    )
-    (p-section
-      "Appearance"
-      (p-row "fab" "boolean" "Display as a Floating Action Button.")
-      (p-row "iconButton" "boolean" "Set when the contents contains an icon and adjusts CSS appropriately.")
-      (p-row "label" "string" "Set the content of the button when used as a blockless component.")
-      (p-row "mini" "boolean" "Display as a mini-sized button. Implies `fab`, unless `fab` is explicity set falsy.")
-      (p-row "noInk" "boolean" "Suppresses the ripple effect when clicked.")
-      (p-row "primary" "boolean" "Display as the primary button, more prominent that other buttons.")
-      (p-row "raised" "boolean" "Display button with a 3-D effect.")
-    )
-    "color"
-  }}
-
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/card.hbs b/tests/dummy/app/templates/demo/card.hbs
deleted file mode 100644
index 3afe61f46..000000000
--- a/tests/dummy/app/templates/demo/card.hbs
+++ /dev/null
@@ -1,285 +0,0 @@
-<PageToolbar @pageTitle="Card" @isDemo={{true}} />
-
-<DocContent @class="card-demo">
-  <h2>Basic Usage</h2>
-  {{! BEGIN-SNIPPET card.basic-usage }}
-  <div class="layout-row layout-xs-column">
-    <div class="layout-column flex-xs flex-gt-xs-50">
-      <PaperCard as |card|>
-        <card.title as |title|>
-          <title.text as |text|>
-            <text.headline>Card with image</text.headline>
-            <text.subhead>Large</text.subhead>
-          </title.text>
-          <title.media @size="lg" @src="tomster.png" @alt="Tomster" @title="Tomster" />
-        </card.title>
-        <card.actions>
-          <PaperButton>Action 1</PaperButton>
-          <PaperButton>Action 2</PaperButton>
-        </card.actions>
-      </PaperCard>
-
-      <PaperCard as |card|>
-        <card.title as |title|>
-          <title.text as |text|>
-            <text.headline>Card with block</text.headline>
-            <text.subhead>Extra large</text.subhead>
-          </title.text>
-        </card.title>
-        <card.content @class="layout-row layout-align-space-between">
-          <card.media @size="xl">
-            <div class="card-media"></div>
-          </card.media>
-          <card.actions @class="layout-column">
-            <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
-            <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
-            <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
-          </card.actions>
-        </card.content>
-      </PaperCard>
-    </div>
-    <div class="layout-column flex-xs flex-gt-xs-50">
-      <PaperCard as |card|>
-        <card.title as |title|>
-          <title.text as |text|>
-            <text.headline>Card with image</text.headline>
-            <text.subhead>Small</text.subhead>
-          </title.text>
-          <title.media @size="sm" @src="tomster.png" @alt="Tomster" @title="Tomster" />
-        </card.title>
-        <card.actions>
-          <PaperButton>Action 1</PaperButton>
-          <PaperButton>Action 2</PaperButton>
-        </card.actions>
-      </PaperCard>
-
-      <PaperCard as |card|>
-        <card.title as |title|>
-          <title.text as |text|>
-            <text.headline>Card with block</text.headline>
-            <text.subhead>Medium</text.subhead>
-          </title.text>
-          <title.media @size="md">
-            <div class="card-media"></div>
-          </title.media>
-        </card.title>
-        <card.actions>
-          <PaperButton>Action 1</PaperButton>
-          <PaperButton>Action 2</PaperButton>
-        </card.actions>
-      </PaperCard>
-    </div>
-  </div>
-  {{! END-SNIPPET }}
-
-  <h3>Template</h3>
-  <CodeSnippet @name="card.basic-usage.hbs" />
-
-  <h2>Card Action Buttons</h2>
-  {{! BEGIN-SNIPPET card.action-buttons }}
-  <div class="layout-row layout-xs-column">
-    <div class="layout-column flex-xs flex-gt-xs-50">
-      <PaperCard as |card|>
-        <card.image @src="washedout.png" @alt="Washed Out" @title="Washed Out" />
-        <card.title as |title|>
-          <title.text as |text|>
-            <text.headline>Action buttons</text.headline>
-          </title.text>
-        </card.title>
-        <card.content>
-          <p>
-            The titles of Washed Out's breakthrough song and the first single from Paracosm share the
-            two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
-          </p>
-          <p>
-            The titles of Washed Out's breakthrough song and the first single from Paracosm share the
-            two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
-          </p>
-          <p>
-            The titles of Washed Out's breakthrough song and the first single from Paracosm share the
-            two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
-          </p>
-        </card.content>
-        <card.actions>
-          <PaperButton>Action 1</PaperButton>
-          <PaperButton>Action 2</PaperButton>
-        </card.actions>
-      </PaperCard>
-
-      <PaperCard as |card|>
-        <card.image @src="washedout.png" @alt="Washed Out" @title="Washed Out" />
-        <card.title as |title|>
-          <title.text as |text|>
-            <text.headline>Vertical action buttons</text.headline>
-          </title.text>
-        </card.title>
-        <card.content>
-          <p>
-            The titles of Washed Out's breakthrough song and the first single from Paracosm share the
-            two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
-          </p>
-        </card.content>
-        <card.actions @class="layout-column">
-          <PaperButton>Action 1</PaperButton>
-          <PaperButton>Action 2</PaperButton>
-        </card.actions>
-      </PaperCard>
-    </div>
-
-    <div class="layout-column flex-xs flex-gt-xs-50">
-      <PaperCard as |card|>
-        <card.image @src="washedout.png" @alt="Washed Out" @title="Washed Out" />
-        <card.title as |title|>
-          <title.text as |text|>
-            <text.headline>Icon action buttons</text.headline>
-          </title.text>
-        </card.title>
-        <card.content>
-          <p>
-            The titles of Washed Out's breakthrough song and the first single from Paracosm share the
-            two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
-          </p>
-        </card.content>
-        <card.actions>
-          <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
-          <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
-          <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
-        </card.actions>
-      </PaperCard>
-
-      <PaperCard as |card|>
-        <card.image @src="washedout.png" @alt="Washed Out" @title="Washed Out" />
-        <card.actions>
-          <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
-          <PaperButton @iconButton={{true}}>{{paper-icon "settings"}}</PaperButton>
-          <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
-        </card.actions>
-      </PaperCard>
-
-      <PaperCard as |card|>
-        <card.header as |header|>
-          <header.avatar>
-            <img src="tomster.png" alt="tomster">
-          </header.avatar>
-          <header.text as |text|>
-            <text.title>Ember</text.title>
-            <text.subhead>Paper</text.subhead>
-          </header.text>
-        </card.header>
-        <card.image @src="washedout.png" @alt="Washed Out" @title="Washed Out" />
-        <card.title as |title|>
-          <title.text as |text|>
-            <text.headline>Card header</text.headline>
-          </title.text>
-        </card.title>
-        <card.content>
-          <p>
-            The titles of Washed Out's breakthrough song and the first single from Paracosm share the
-            two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
-          </p>
-        </card.content>
-      </PaperCard>
-    </div>
-  </div>
-  {{! END-SNIPPET }}
-
-  <h3>Template</h3>
-  <CodeSnippet @name="card.action-buttons.hbs" />
-
-  <h2>In Card Actions</h2>
-  {{! BEGIN-SNIPPET card.in-card-actions }}
-  <div class="layout-row layout-xs-column">
-    <div class="layout-column flex-xs flex-gt-xs-50">
-      <PaperCard as |card|>
-        <card.image @src="washedout.png" @alt="Washed Out" @title="Washed Out" />
-        <card.title as |title|>
-          <title.text as |text|>
-            <text.headline>In-card mixed actions</text.headline>
-          </title.text>
-        </card.title>
-        <card.actions @class="layout-row layout-align-start-center" as |actions|>
-          <actions.icons>
-            <PaperButton @iconButton={{true}}>{{paper-icon "favorite"}}</PaperButton>
-            <PaperButton @iconButton={{true}}>{{paper-icon "share"}}</PaperButton>
-          </actions.icons>
-          <PaperButton>Action 1</PaperButton>
-          <PaperButton>Action 2</PaperButton>
-        </card.actions>
-        <card.content>
-          <p>
-            The titles of Washed Out's breakthrough song and the first single from Paracosm share the
-            two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
-          </p>
-        </card.content>
-      </PaperCard>
-
-      <PaperCard as |card|>
-        <card.header as |header|>
-          <header.avatar>
-            <img src="tomster.png" alt="tomster">
-          </header.avatar>
-          <header.text as |text|>
-            <text.title>User</text.title>
-            <text.subhead>subhead</text.subhead>
-          </header.text>
-        </card.header>
-        <card.image @src="washedout.png" @alt="Washed Out" @title="Washed Out" />
-        <card.title as |title|>
-          <title.text as |text|>
-            <text.headline>In-card mixed actions</text.headline>
-            <text.subhead>Reversed</text.subhead>
-          </title.text>
-        </card.title>
-        <card.actions @class="layout-row layout-align-start-center" as |actions|>
-          <PaperButton>Action 1</PaperButton>
-          <PaperButton>Action 2</PaperButton>
-          <actions.icons>
-            <PaperButton @iconButton={{true}}>{{paper-icon "expand-less"}}</PaperButton>
-          </actions.icons>
-        </card.actions>
-        <card.content>
-          <p>
-            The titles of Washed Out's breakthrough song and the first single from Paracosm share the
-            two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
-          </p>
-        </card.content>
-      </PaperCard>
-    </div>
-
-    <div class="layout-column flex-xs flex-gt-xs-50">
-      <PaperCard as |card|>
-        <card.header as |header|>
-          <header.avatar>
-            <img src="tomster.png" alt="tomster">
-          </header.avatar>
-          <header.text as |text|>
-            <text.title>Title</text.title>
-            <text.subhead>subhead</text.subhead>
-          </header.text>
-        </card.header>
-        <card.image @src="washedout.png" @alt="Washed Out" @title="Washed Out" />
-        <card.title as |title|>
-          <title.text as |text|>
-            <text.headline>In-card mixed actions</text.headline>
-            <text.subhead>Description</text.subhead>
-          </title.text>
-        </card.title>
-        <card.actions @class="layout-row layout-align-start-center">
-          <PaperButton>Action 1</PaperButton>
-          <PaperButton>Action 2</PaperButton>
-        </card.actions>
-        <card.content>
-          <p>
-            The titles of Washed Out's breakthrough song and the first single from Paracosm share the
-            two most important words in Ernest Greene's musical language: feel it. It's a simple request, as well...
-          </p>
-        </card.content>
-      </PaperCard>
-    </div>
-  </div>
-  {{! END-SNIPPET }}
-
-  <h3>Template</h3>
-  <CodeSnippet @name="card.in-card-actions.hbs" />
-
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/checkbox.hbs b/tests/dummy/app/templates/demo/checkbox.hbs
deleted file mode 100644
index 96ad25bdf..000000000
--- a/tests/dummy/app/templates/demo/checkbox.hbs
+++ /dev/null
@@ -1,41 +0,0 @@
-<PageToolbar @pageTitle="Checkbox" @isDemo={{true}} />
-
-<DocContent>
-  {{! BEGIN-SNIPPET checkbox }}
-  <div class="layout-column">
-    <PaperCheckbox @value={{value1}} @onChange={{action (mut value1)}}>
-      A checkbox: {{value1}}
-    </PaperCheckbox>
-
-    <PaperCheckbox @value={{value2}} @onChange={{action (mut value2)}}>
-      A checkbox: {{if value2 "yep" "nope"}}
-    </PaperCheckbox>
-
-    <PaperCheckbox @value={{value3}} @onChange={{action (mut value3)}} @disabled={{true}}>
-      Checkbox (disabled)
-    </PaperCheckbox>
-
-    <PaperCheckbox @value={{true}} @onChange={{action (mut value4)}} @disabled={{true}}>
-      Checkbox (disabled and value)
-    </PaperCheckbox>
-
-    <PaperCheckbox @value={{value5}} @onChange={{action (mut value5)}} @noink={{true}}>
-      Checkbox (no ink)
-    </PaperCheckbox>
-
-    <PaperCheckbox @label="Blockless version" @value={{value6}} @onChange={{action "toggleValue6"}} />
-
-    <PaperCheckbox @indeterminate={{isIndeterminate}} @value={{value7}} @onChange={{action (mut value7)}}>
-      Indeterminate checkbox
-    </PaperCheckbox>
-
-    <PaperCheckbox @disabled={{true}} @indeterminate={{isIndeterminate}} @value={{value7}} @onChange={{null}}>
-      Indeterminate checkbox (disabled)
-    </PaperCheckbox>
-  </div>
-  {{! END-SNIPPET }}
-
-  <h3>Template</h3>
-  <CodeSnippet @name="checkbox.hbs" />
-
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/chips.hbs b/tests/dummy/app/templates/demo/chips.hbs
deleted file mode 100644
index c9a6e2705..000000000
--- a/tests/dummy/app/templates/demo/chips.hbs
+++ /dev/null
@@ -1,75 +0,0 @@
-<PageToolbar @pageTitle="Chips" @isDemo={{true}} />
-
-<DocContent>
-
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Basic Usage</h2>
-      </PaperToolbarTools>
-    </PaperToolbar>
-    <PaperCardContent>
-      {{! BEGIN-SNIPPET chips.example }}
-      <h2>Default Template</h2>
-      <PaperChips @content={{fruitNames}} @readOnly={{readOnly}} @removeItem={{action "removeItem"}} @addItem={{action "addItem"}} @placeholder="Add a tag" />
-
-      <h2>Custom Template</h2>
-      <PaperChips @readOnly={{readOnly}} @removeItem={{action "removeCustomItem"}} @addItem={{action "addCustomItem"}} @placeholder="Add a tag" @content={{customFruitNames}} as |item|>
-        <strong>{{item}}</strong>
-        <em>(fruit)</em>
-      </PaperChips>
-
-      <h2>Chips with Autocomplete</h2>
-      <PaperChips @readOnly={{readOnly}} @removeItem={{action "removeVegetable"}} @addItem={{action "addVegetable"}} @placeholder="Add a vegetable" @content={{vegetables}} @options={{remainingVegetables}} @searchField="name" @noMatchesMessage="Not found. Click to add." as |item|>
-        <strong>{{item.name}}</strong>
-        {{#if item.family}}
-          <em>{{item.family}}</em>
-        {{/if}}
-      </PaperChips>
-
-      <h2>Chips with Autocomplete (requires match)</h2>
-      <PaperChips @readOnly={{readOnly}} @removeItem={{action "removeVegeName"}} @addItem={{action "addVegeName"}} @placeholder="Add a vegetable" @content={{vegeNames}} @options={{remainingVegeNames}} @requireMatch={{true}} />
-      {{! END-SNIPPET }}
-
-      <h3>Template</h3>
-      <CodeSnippet @name="chips.example.hbs" />
-
-    </PaperCardContent>
-  </PaperCard>
-
-
-  <PaperCard @class="chipsdemoContactChips">
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Contact chips</h2>
-      </PaperToolbarTools>
-    </PaperToolbar>
-    <PaperCardContent>
-
-      {{! BEGIN-SNIPPET chips.contacts-example }}
-      <h2>Contact Chips</h2>
-      <PaperContactChips @readOnly={{readOnly}} @removeItem={{action "removeContact"}} @addItem={{action "addContact"}} @placeholder="Add a contact" @content={{selectedContacts}} @options={{remainingContacts}} />
-
-      <blockquote>
-        <code>paper-contact-chips</code> expects the name, email address and image
-        to be supplied as <code>name</code>, <code>email</code> and <code>image</code>
-        respectively. If your field names differ from these, specify them using the
-        <code>nameField</code>, <code>emailField</code> and <code>imageField</code>
-        parameters, and specify <code>searchField</code> to configure which field the
-        autocomplete should search against:
-      </blockquote>
-
-      <PaperContactChips @readOnly={{readOnly}} @removeItem={{action "removeAltContact"}} @addItem={{action "addAltContact"}} @placeholder="Add a contact" @content={{selectedAltContacts}} @options={{remainingAltContacts}} @nameField="shortName" @emailField="emailAddress" @imageField="profileImage" @searchField="emailAddress" />
-
-      <PaperCheckbox @value={{readOnly}} @onChange={{action (mut readOnly)}}>
-        Read Only
-      </PaperCheckbox>
-      {{! END-SNIPPET }}
-
-      <h3>Template</h3>
-      <CodeSnippet @name="chips.contacts-example.hbs" />
-
-    </PaperCardContent>
-  </PaperCard>
-
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/dialog.hbs b/tests/dummy/app/templates/demo/dialog.hbs
deleted file mode 100644
index 8838c1e09..000000000
--- a/tests/dummy/app/templates/demo/dialog.hbs
+++ /dev/null
@@ -1,166 +0,0 @@
-<PageToolbar @pageTitle="Dialog" @isDemo={{true}} />
-
-<DocContent>
-
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Basic Usage</h2>
-        <span class="flex"></span>
-        <PaperButton @onClick={{action "toggleSourceCode"}} @iconButton={{true}}>
-          <PaperIcon @icon="code" />
-        </PaperButton>
-      </PaperToolbarTools>
-    </PaperToolbar>
-
-    <div class="doc-code-example {{if showSourceCode "is-visible"}}">
-      <CodeSnippet @name="dialog.hbs" />
-    </div>
-
-    <div class="doc-content-example">
-      <div id="paper-dialog-demo"></div>
-      <PaperCardContent>
-        <p>Open a dialog over the app's content. Press escape or click outside to close the dialog and send focus back to the triggering button.</p>
-
-        <div class="layout-row layout-wrap">
-          <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openDialogWithParent"}}>
-            Dialog with parent
-          </PaperButton>
-          <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openDialog"}}>
-            Custom dialog
-          </PaperButton>
-          <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openPromptDialog"}}>
-            Prompt dialog
-          </PaperButton>
-          <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openAnimatedDialog"}}>
-            Animated dialog
-          </PaperButton>
-        </div>
-
-        {{#if result}}
-          <p>You dismissed the dialog with a result of "{{result}}".</p>
-        {{/if}}
-
-        {{paper-api
-          (p-section
-            (p-row "parent" "element or selector" "Existing element where the modal and backdrop will be rendered")
-            (p-row "origin" "element or selector" "If present, the dialog will use it as openFrom and closeTo. Also, focus will be returned to this element once the dialog closes.")
-            (p-row "closeTo" "element or selector" "Target for closing the dialog with a transition.")
-            (p-row "openFrom" "element or selector" "Source for opening the dialog with a transition.")
-            (p-row "fullscreen" "boolean" "Causes the dialog to become fullscreen at smaller breakpoints.")
-            (p-row "opaque" "boolean" "Causes the backdrop to become opaque. Defaults to `true`.")
-            (p-row "clickOutsideToClose" "boolean" "Causes clicking on the backdrop to trigger the `onClose` handler. Defaults to `false`.")
-            (p-row "focusOnOpen" "boolean" "Causes the initial focus to be on an inner element with the autofocus attribute, rather than the last button inside `{{paper-dialog-actions}}`. Defaults to `true`.")
-            (p-row "escapeToClose" "boolean" "Causes pressing escape to close the dialog. Defaults to `true`.")
-          )
-          (p-section
-            "Actions"
-            (p-row "onClose" "action" "An action to be executed when the dialog is closed, e.g. by pressing escape.")
-          )
-        }}
-
-      </PaperCardContent>
-    </div>
-
-  </PaperCard>
-
-  <span id="bottom-of-card"></span>
-
-</DocContent>
-
-{{! BEGIN-SNIPPET dialog }}
-{{#if showDialogWithParent}}
-  <PaperDialog @class="flex-50" @onClose={{action "closeDialogWithParent" "cancel"}} @parent="#paper-dialog-demo" @origin={{dialogOrigin}} @clickOutsideToClose={{true}}>
-    <form>
-      <PaperToolbar>
-        <PaperToolbarTools>
-          <h2>Mango (Fruit)</h2>
-          <span class="flex"></span>
-          <PaperButton @iconButton={{true}} @onClick={{action "closeDialogWithParent" "cancel"}}>
-            <PaperIcon @icon="close" />
-          </PaperButton>
-        </PaperToolbarTools>
-      </PaperToolbar>
-
-      <PaperDialogContent>
-        <p>
-          This is a dialog rendered into a specific element. Clicking outside the dialog will close it.
-        </p>
-      </PaperDialogContent>
-
-      <PaperDialogActions @class="layout-row">
-        <span class="flex"></span>
-        <PaperButton @onClick={{action "closeDialogWithParent" "cancel"}}>
-          Cancel
-        </PaperButton>
-        <PaperButton @onClick={{action "closeDialogWithParent" "ok"}}>
-          OK
-        </PaperButton>
-      </PaperDialogActions>
-    </form>
-  </PaperDialog>
-{{/if}}
-
-{{#if showDialog}}
-  <PaperDialog @class="flex-77" @onClose={{action "closeDialog" "cancel"}} @origin={{dialogOrigin}} @clickOutsideToClose={{true}}>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Mango (Fruit)</h2>
-        <span class="flex"></span>
-        <PaperButton @iconButton={{true}} @onClick={{action "closeDialog" "cancel"}}><PaperIcon @icon="close" /></PaperButton>
-      </PaperToolbarTools>
-    </PaperToolbar>
-
-    <PaperDialogContent>
-      <p>
-        The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been distributed worldwide to become one of the most cultivated fruits in the tropics.
-      </p>
-      <img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="https://www.stockvault.net/data/2011/03/20/119586/preview16.jpg">
-    </PaperDialogContent>
-
-    <PaperDialogActions @class="layout-row">
-      <PaperButton @href="http://en.wikipedia.org/wiki/Mango" @target="_blank">More on Wikipedia</PaperButton>
-      <span class="flex"></span>
-      <PaperButton @onClick={{action "closeDialog" "cancel"}}>Cancel</PaperButton>
-      <PaperButton @onClick={{action "closeDialog" "ok"}}>OK</PaperButton>
-    </PaperDialogActions>
-  </PaperDialog>
-{{/if}}
-
-{{#if showPromptDialog}}
-  <PaperDialog @fullscreen={{fullscreen}} @onClose={{action "closePromptDialog" "cancel"}} @origin={{dialogOrigin}}>
-
-    <PaperDialogContent>
-      <h2 class="md-title">What would you name your dog?</h2>
-      <p>Bowser is a common name.</p>
-      <PaperInput @placeholder="dog name" @autofocus={{true}} @value={{dogName}} @onChange={{action (mut dogName)}} />
-      <div>
-        <PaperCheckbox @value={{fullscreen}} @onChange={{action (mut fullscreen)}}>Display fullscreen at small window size breakpoints</PaperCheckbox>
-      </div>
-    </PaperDialogContent>
-
-    <PaperDialogActions @class="layout-row">
-      <span class="flex"></span>
-      <PaperButton @primary={{true}} @onClick={{action "closePromptDialog" "cancel"}}>I'm a cat person</PaperButton>
-      <PaperButton @primary={{true}} @onClick={{action "closePromptDialog" "ok" dogName}}>Okay!</PaperButton>
-    </PaperDialogActions>
-
-  </PaperDialog>
-{{/if}}
-
-{{#if showAnimatedDialog}}
-  <PaperDialog @fullscreen={{fullscreen}} @onClose={{action "closeAnimatedDialog"}} @openFrom="#paper-dialog-demo" @closeTo="#bottom-of-card">
-
-    <PaperDialogContent>
-      <h2 class="md-title">This dialog is animated!</h2>
-      <p>It opened from above, but it will close to below.</p>
-    </PaperDialogContent>
-
-    <PaperDialogActions @class="layout-row">
-      <span class="flex"></span>
-      <PaperButton @primary={{true}} @onClick={{action "closeAnimatedDialog"}}>Okay!</PaperButton>
-    </PaperDialogActions>
-
-  </PaperDialog>
-{{/if}}
-{{! END-SNIPPET }}
diff --git a/tests/dummy/app/templates/demo/divider.hbs b/tests/dummy/app/templates/demo/divider.hbs
deleted file mode 100644
index bcd4281ef..000000000
--- a/tests/dummy/app/templates/demo/divider.hbs
+++ /dev/null
@@ -1,69 +0,0 @@
-<PageToolbar @pageTitle="Divider" @isDemo={{true}} />
-
-<DocContent>
-
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Full Bleed</h2>
-        <span class="flex"></span>
-        <PaperButton @onClick={{action "toggleSourceCodeFull"}} @iconButton={{true}}>
-          <PaperIcon @icon="code" />
-        </PaperButton>
-      </PaperToolbarTools>
-    </PaperToolbar>
-    <PaperContent>
-      <div class="doc-code-example {{if showSourceCodeFull "is-visible"}}">
-        <CodeSnippet @name="divider.full.hbs" />
-      </div>
-      {{! BEGIN-SNIPPET divider.full }}
-      <PaperList>
-        {{#each messages as |item|}}
-          <PaperItem @class="md-3-line">
-            <div class="md-list-item-text">
-              <h3>{{item.what}}</h3>
-              <h4>{{item.who}}</h4>
-              <p>{{item.notes}}</p>
-            </div>
-            <PaperDivider />
-            <PaperButton>Respond</PaperButton>
-          </PaperItem>
-        {{/each}}
-      </PaperList>
-      {{! END-SNIPPET }}
-    </PaperContent>
-
-  </PaperCard>
-
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Inset</h2>
-        <span class="flex"></span>
-        <PaperButton @onClick={{action "toggleSourceCodeInset"}} @iconButton={{true}}>
-          <PaperIcon @icon="code" />
-        </PaperButton>
-      </PaperToolbarTools>
-    </PaperToolbar>
-    <PaperContent>
-      <div class="doc-code-example {{if showSourceCodeInset "is-visible"}}">
-        <CodeSnippet @name="divider.inset.hbs" />
-      </div>
-      {{! BEGIN-SNIPPET divider.inset }}
-      <PaperList @classNames="list-demo">
-        {{#each messages as |item|}}
-          <PaperItem @class="md-3-line">
-            <img src="{{item.face}}?{{$index}}" class="face" alt={{item.who}}>
-            <div class="md-list-item-text">
-              <h3>{{item.what}}</h3>
-              <h4>{{item.who}}</h4>
-              <p>{{item.notes}}</p>
-            </div>
-            <PaperDivider @inset={{true}} />
-          </PaperItem>
-        {{/each}}
-      </PaperList>
-      {{! END-SNIPPET }}
-    </PaperContent>
-  </PaperCard>
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/grid-list.hbs b/tests/dummy/app/templates/demo/grid-list.hbs
deleted file mode 100644
index 84df46194..000000000
--- a/tests/dummy/app/templates/demo/grid-list.hbs
+++ /dev/null
@@ -1,94 +0,0 @@
-<PageToolbar @pageTitle="Grid List" @isDemo={{true}} />
-
-<DocContent>
-  <h2>Basic Usage</h2>
-  {{! BEGIN-SNIPPET grid-list.basic-usage }}
-  <PaperContent @class="md-whiteframe-z1 grid-list-demo1">
-
-    <PaperGridList @cols="1 md-2 gt-md-6" @rowHeight="gt-md-1:1 2:2" @gutter="12px gt-sm-8px" as |grid|>
-
-      <grid.tile @class="gray" @rowspan="2" @colspan="sm-1 gt-sm-2" as |tile|>
-        <tile.footer>
-          <h3>#1: (3r x 2c)</h3>
-        </tile.footer>
-      </grid.tile>
-
-      <grid.tile @class="green" as |tile|>
-        <tile.footer>
-          <h3>#2: (1r x 1c)</h3>
-        </tile.footer>
-      </grid.tile>
-
-      <grid.tile @class="yellow" as |tile|>
-        <tile.footer>
-          <h3>#3: (1r x 1c)</h3>
-        </tile.footer>
-      </grid.tile>
-
-      <grid.tile @class="blue" @rowspan="2" as |tile|>
-        <tile.footer>
-          <h3>#4: (2r x 1c)</h3>
-        </tile.footer>
-      </grid.tile>
-
-      <grid.tile @class="red" @rowspan="2" @colspan="sm-1 gt-sm-2" as |tile|>
-        <tile.footer>
-          <h3>#5: (2r x 2c)</h3>
-        </tile.footer>
-      </grid.tile>
-
-      <grid.tile @class="green" @rowspan="2" as |tile|>
-        <tile.footer>
-          <h3>#6: (2r x 1c)</h3>
-        </tile.footer>
-      </grid.tile>
-
-    </PaperGridList>
-
-  </PaperContent>
-  {{ END-SNIPPET }}
-
-  <h3>Template</h3>
-  <CodeSnippet @name="grid-list.basic-usage.hbs" />
-
-  <h2>Dynamic Tiles</h2>
-  {{! BEGIN-SNIPPET grid-list.dynamic-tiles }}
-  <PaperContent @class="md-whiteframe-z1 grid-list-demo-dynamicTiles">
-    <PaperGridList @cols="sm-2 md-4 gt-md-6" @rowHeight="4:3 gt-md-1:1" @gutter="8px gt-sm-4px" as |grid|>
-
-      {{#each tiles as |dynamicTile|}}
-        <grid.tile @rowspan={{dynamicTile.span.row}} @colspan={{concat dynamicTile.span.col " xs-1"}} @class={{dynamicTile.background}} as |tile|>
-          <md-icon></md-icon>
-          <tile.footer>
-            <h3>{{dynamicTile.title}}</h3>
-          </tile.footer>
-        </grid.tile>
-      {{/each}}
-
-    </PaperGridList>
-  </PaperContent>
-  {{! END-SNIPPET }}
-
-  <h3>Template</h3>
-  <CodeSnippet @name="grid-list.dynamic-tiles.hbs" />
-
-  <h2>Responsive and Animated Usage</h2>
-  {{! BEGIN-SNIPPET grid-list.responsive }}
-  <PaperContent @class="md-whiteframe-z1 grid-list-demo-responsiveTiles">
-
-    <PaperGridList @cols="3 md-8 gt-md-12" @rowHeight="4:3 gt-md-1:1" @gutter="4px md-8px gt-md-16px" as |grid|>
-
-      {{#each colorTiles as |tile|}}
-
-        <grid.tile @colspan={{tile.colspan}} @rowspan={{tile.rowspan}} @class={{tile.style}}>
-        </grid.tile>
-
-      {{/each}}
-    </PaperGridList>
-  </PaperContent>
-  {{! END-SNIPPET }}
-
-  <h3>Template</h3>
-  <CodeSnippet @name="grid-list.responsive.hbs" />
-
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/icons.hbs b/tests/dummy/app/templates/demo/icons.hbs
deleted file mode 100644
index 4d38cfc18..000000000
--- a/tests/dummy/app/templates/demo/icons.hbs
+++ /dev/null
@@ -1,41 +0,0 @@
-<PageToolbar @pageTitle="Icons" @isDemo={{true}} />
-
-<DocContent>
-
-  <h2>Available Icons</h2>
-  <p>
-    See the <a href="https://design.google.com/icons/" rel="noopener" target="_blank">Material Icons page</a> for an overview of
-    available icons.
-  </p>
-
-  <h2>Usage</h2>
-
-  <h3>Basic Icons</h3>
-  <div>
-    {{! BEGIN-SNIPPET icons.basic-usage }}
-    {{paper-icon "check-circle"}}
-    {{! END-SNIPPET }}
-  </div>
-  <CodeSnippet @name="icons.basic-usage.hbs" />
-
-  <h3>Changing Sizes</h3>
-  <div class="layout-row">
-    {{! BEGIN-SNIPPET icons.sizes }}
-    {{paper-icon "check-circle" size=12}}
-    {{paper-icon "check-circle" size=18}}
-    {{paper-icon "check-circle" size=24}}
-    {{paper-icon "check-circle" size=36}}
-    {{paper-icon "check-circle" size=48}}
-    {{! END-SNIPPET }}
-  </div>
-  <CodeSnippet @name="icons.sizes.hbs" />
-
-  <h3>Spinners</h3>
-  <div>
-    {{! BEGIN-SNIPPET icons.spinners }}
-    {{paper-icon "rotate-right" spin=true}}
-    {{paper-icon "rotate-left" reverseSpin=true}}
-    {{! END-SNIPPET }}
-  </div>
-  <CodeSnippet @name="icons.spinners.hbs" />
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/list.hbs b/tests/dummy/app/templates/demo/list.hbs
deleted file mode 100644
index 9825d9a20..000000000
--- a/tests/dummy/app/templates/demo/list.hbs
+++ /dev/null
@@ -1,225 +0,0 @@
-<PageToolbar @pageTitle="List" @isDemo={{true}} />
-
-<DocContent>
-
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Basic Usage</h2>
-      </PaperToolbarTools>
-    </PaperToolbar>
-    <PaperContent>
-      {{! BEGIN-SNIPPET list }}
-      <PaperList>
-        <PaperSubheader>3 line item</PaperSubheader>
-        {{#each listData as |item|}}
-          <PaperItem @class="md-3-line">
-            <img src={{item.img}} alt={{item.name}} class="md-avatar">
-            <div class="md-list-item-text">
-              <h3>{{item.name}}</h3>
-              <h4>{{item.email}}</h4>
-              <p>Some longer notes here could be here. But they aren't.</p>
-            </div>
-          </PaperItem>
-        {{/each}}
-
-        <PaperDivider />
-
-        <PaperSubheader>2 line item</PaperSubheader>
-        {{#each listData as |item|}}
-          <PaperItem @class="md-2-line">
-            <img src={{item.img}} alt={{item.name}} class="md-avatar">
-            <div class="md-list-item-text">
-              <h3>{{item.name}}</h3>
-              <p>{{item.email}}</p>
-            </div>
-          </PaperItem>
-        {{/each}}
-
-        <PaperDivider />
-
-        <PaperSubheader>3 line item, long paragraph</PaperSubheader>
-        {{#each listData as |item|}}
-          <PaperItem @class="md-3-line md-long-text">
-            <img src={{item.img}} alt={{item.name}} class="md-avatar">
-            <div class="md-list-item-text">
-              <h3>{{item.name}}</h3>
-              <p>
-                Secondary line text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam massa quam.
-                Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum
-                velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
-              </p>
-            </div>
-          </PaperItem>
-        {{/each}}
-
-        <PaperDivider />
-
-        <PaperSubheader>Icons</PaperSubheader>
-        {{#each phoneNumbers as |phone|}}
-          <PaperItem @class="md-2-line">
-            {{paper-icon "phone" class="md-avatar-icon"}}
-            <div class="md-list-item-text">
-              <h3>{{phone.number}}</h3>
-              <p>{{phone.type}}</p>
-            </div>
-          </PaperItem>
-        {{/each}}
-
-      </PaperList>
-      {{! END-SNIPPET }}
-    </PaperContent>
-  </PaperCard>
-
-  <h3>Template</h3>
-  <CodeSnippet @name="list.hbs" />
-
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>List Controls</h2>
-      </PaperToolbarTools>
-    </PaperToolbar>
-    <PaperContent>
-      {{! BEGIN-SNIPPET list-controls }}
-      <PaperList>
-
-        <PaperSubheader>Single Action Checkboxes</PaperSubheader>
-        {{#each toppings as |topping|}}
-          <PaperItem as |controls|>
-            <p>{{topping.name}}</p>
-            <div class="md-secondary-container">
-              <controls.checkbox @value={{topping.enabled}} @secondary={{true}} @onChange={{action (mut topping.enabled)}} />
-            </div>
-          </PaperItem>
-        {{/each}}
-
-        <PaperDivider />
-
-        <PaperSubheader>Secondary Buttons</PaperSubheader>
-        <PaperItem as |controls|>
-          <p>Clicking the button to the right will fire the secondary action</p>
-          <div class="md-secondary-container">
-            <controls.button @secondary={{true}} @onClick={{action "transitionTo" "more info"}}>
-              More Info
-            </controls.button>
-          </div>
-        </PaperItem>
-        <PaperItem @onClick={{action "transitionTo" "primary action"}} as |controls|>
-          <p>Click anywhere to fire the primary action, or the button to fire the secondary</p>
-          <div class="md-secondary-container">
-            <controls.button @secondary={{true}} @onClick={{action "transitionTo" "secondary action"}}>
-              More Info
-            </controls.button>
-          </div>
-        </PaperItem>
-
-        <PaperDivider />
-
-        <PaperSubheader>Clickable Items with Secondary Controls</PaperSubheader>
-        <PaperItem @onClick={{action "transitionToWifiMenu"}} as |controls|>
-          {{paper-icon "network-wifi"}}
-          <p>Wi-Fi</p>
-          <div class="md-secondary-container">
-            <controls.switch @secondary={{true}} @value={{wifiEnabled}} @onChange={{action (mut wifiEnabled)}} />
-          </div>
-        </PaperItem>
-        <PaperItem @onClick={{action "transitionToBluetoothMenu"}} as |controls|>
-          {{paper-icon "bluetooth"}}
-          <p>Bluetooth</p>
-          <div class="md-secondary-container">
-            <controls.switch @secondary={{true}} @value={{bluetoothEnabled}} @onChange={{action (mut bluetoothEnabled)}} />
-          </div>
-        </PaperItem>
-        <PaperItem @onClick={{action "transitionToDataUsage"}}>
-          {{paper-icon "data-usage"}}
-          <p>Data Usage</p>
-        </PaperItem>
-
-        <PaperDivider />
-
-        <PaperSubheader>Checkbox with Secondary Action</PaperSubheader>
-        {{#each messageData as |item|}}
-          <PaperItem as |controls|>
-            <controls.checkbox @value={{item.checked}} @onChange={{action (mut item.checked)}} />
-            <p>{{item.message}}</p>
-            <div class="md-secondary-container">
-              <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
-                {{paper-icon "message"}}
-              </controls.button>
-            </div>
-          </PaperItem>
-        {{/each}}
-
-        <PaperDivider />
-
-        <PaperSubheader>Avatar with Secondary Action Icon</PaperSubheader>
-        {{#each listData as |item|}}
-          <PaperItem @onClick={{action "goToPerson" item}} as |controls|>
-            <img src={{item.img}} alt={{item.name}} class="md-avatar">
-            <p>{{item.name}}</p>
-            <div class="md-secondary-container">
-              <controls.checkbox @value={{item.checked}} @onChange={{action (mut item.checked)}} />
-              <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
-                {{paper-icon "email"}}
-              </controls.button>
-              <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryMessageClick" item}}>
-                {{paper-icon "message"}}
-              </controls.button>
-            </div>
-          </PaperItem>
-        {{/each}}
-
-        <PaperDivider />
-
-        <PaperSubheader>Clickable Avatars</PaperSubheader>
-        {{#each listData as |item|}}
-          <PaperItem @class="md-3-line" @onClick={{action "goToPerson" item}}>
-            <img src={{item.img}} alt={{item.name}} class="md-avatar">
-            <div class="md-list-item-text">
-              <h3>{{item.name}}</h3>
-              <h4>{{item.email}}</h4>
-              <p>Some notes here.</p>
-            </div>
-          </PaperItem>
-        {{/each}}
-
-        <PaperDivider />
-
-        <PaperSubheader>Avatar with Secondary Action Icon</PaperSubheader>
-        {{#each listData as |item|}}
-          <PaperItem @class="md-3-line" @onClick={{action "goToPerson" item}} as |controls|>
-            <img src={{item.img}} alt={{item.name}} class="md-avatar">
-            <div class="md-list-item-text">
-              <h3>{{item.name}}</h3>
-              <h4>{{item.email}}</h4>
-              <p>Some notes here.</p>
-            </div>
-            <controls.button @secondary={{true}} @iconButton={{true}} @onClick={{action "secondaryPersonClick" item}}>
-              {{paper-icon "phone"}}
-            </controls.button>
-          </PaperItem>
-        {{/each}}
-
-        <PaperSubheader>Single Action Radios</PaperSubheader>
-        {{#each toppings as |topping|}}
-          <PaperItem as |controls|>
-            <p>{{topping.name}}</p>
-            <div class="md-secondary-container">
-              <controls.radio @groupValue={{radioSelectedTopping}} @value={{topping}} @secondary={{true}} @onChange={{action (mut radioSelectedTopping)}} />
-            </div>
-          </PaperItem>
-        {{/each}}
-
-      </PaperList>
-      {{! END-SNIPPET }}
-    </PaperContent>
-  </PaperCard>
-
-  <h3>Template</h3>
-  <CodeSnippet @name="list-controls.hbs" />
-
-</DocContent>
-
-
-
diff --git a/tests/dummy/app/templates/demo/menu.hbs b/tests/dummy/app/templates/demo/menu.hbs
deleted file mode 100644
index 37c332241..000000000
--- a/tests/dummy/app/templates/demo/menu.hbs
+++ /dev/null
@@ -1,285 +0,0 @@
-<PageToolbar @pageTitle="Menu" @isDemo={{true}} />
-
-<DocContent>
-
-
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Basic Usage</h2>
-      </PaperToolbarTools>
-    </PaperToolbar>
-    <PaperCardContent>
-      <h2>Simple dropdown menu</h2>
-
-      <p>
-        Note that applying the class <code class="paper">.md-menu-origin</code>
-        and <code class="paper">md-menu-align-target</code>attributes ensure that the menu elements align.
-      </p>
-
-      <div class="layout-column layout-align-center-center">
-        {{! BEGIN-SNIPPET menu.simple-dropdown }}
-        <PaperMenu as |menu|>
-
-          <menu.trigger>
-            <PaperButton @iconButton={{true}}>
-              {{paper-icon "local_phone"}}
-            </PaperButton>
-          </menu.trigger>
-
-          <menu.content @width={{4}} as |content|>
-            {{#each items as |item|}}
-              <content.menu-item @onClick={{action this.openSomething}}>
-                {{paper-icon item.icon}}
-                <span>{{item.title}}</span>
-              </content.menu-item>
-            {{/each}}
-
-            <content.menu-item @onClick={{action this.openSomething}} @disabled={{true}}>
-              {{paper-icon "adb"}}
-              <span>This is disabled.</span>
-            </content.menu-item>
-
-            <PaperDivider />
-
-            {{#each items as |item|}}
-              <content.menu-item @onClick={{action this.openSomething}}>
-                {{paper-icon item.icon}} {{item.title}}
-              </content.menu-item>
-            {{/each}}
-          </menu.content>
-        </PaperMenu>
-        {{! END-SNIPPET }}
-      </div>
-
-      <h3>Template</h3>
-      <CodeSnippet @name="menu.simple-dropdown.hbs" />
-
-    </PaperCardContent>
-  </PaperCard>
-
-  <PaperCard>
-    <PaperCardContent>
-      <h2>Menu Position Modes</h2>
-
-      <p>
-        The <code class="paper">position</code> attribute can be used to specify the positioning along the
-        <code class="paper">x</code> and <code class="paper">y</code> axis.
-      </p>
-
-      <div class="layout-column layout-align-center-center">
-        {{! BEGIN-SNIPPET menu.position-modes }}
-
-        <div class="menus layout-fill layout-wrap layout-row layout-align-space-between-center">
-          <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
-            <p>Target Mode Positioning (default)</p>
-            <PaperMenu @isOpen={{menuTwoIsOpen}} as |menu|>
-              <menu.trigger>
-                <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
-                </PaperButton>
-              </menu.trigger>
-
-              <menu.content as |content|>
-                {{#each items as |item|}}
-                  <content.menu-item @onClick={{action this.openSomething}}>
-                    {{paper-icon item.icon class="md-menu-align-target"}}
-                    <span>{{item.title}}</span>
-                  </content.menu-item>
-                {{/each}}
-              </menu.content>
-
-            </PaperMenu>
-          </div>
-
-          <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
-            <p>Target mode with <code class="paper">offset</code></p>
-            <PaperMenu @isOpen={{menuThreeIsOpen}} @offset="0 50" as |menu|>
-              <menu.trigger>
-                <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
-                </PaperButton>
-              </menu.trigger>
-
-              <menu.content as |content|>
-                {{#each items as |item|}}
-                  <content.menu-item @onClick={{action this.openSomething}}>
-                    {{paper-icon item.icon class="md-menu-align-target"}}
-                    <span>{{item.title}}</span>
-                  </content.menu-item>
-                {{/each}}
-              </menu.content>
-            </PaperMenu>
-          </div>
-
-          <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
-            <p><code class="paper">position="target-right target"</code></p>
-            <PaperMenu @isOpen={{menuFourIsOpen}} @position="target-right target" as |menu|>
-              <menu.trigger>
-                <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
-                </PaperButton>
-              </menu.trigger>
-
-              <menu.content as |content|>
-                {{#each items as |item|}}
-                  <content.menu-item @onClick={{action this.openSomething}}>
-                    <p style="width: 190px;">{{item.title}}</p>
-                    {{paper-icon item.icon class="md-menu-align-target"}}
-                  </content.menu-item>
-                {{/each}}
-                {{#each items as |item|}}
-                  <content.menu-item @onClick={{action this.openSomething}}>
-                    <p style="width: 190px;">{{item.title}}</p>
-                    {{paper-icon item.icon class="md-menu-align-target"}}
-                  </content.menu-item>
-                {{/each}}
-                {{#each items as |item|}}
-                  <content.menu-item @onClick={{action this.openSomething}}>
-                    <p style="width: 190px;">{{item.title}}</p>
-                    {{paper-icon item.icon class="md-menu-align-target"}}
-                  </content.menu-item>
-                {{/each}}
-              </menu.content>
-            </PaperMenu>
-          </div>
-        </div>
-        {{! END-SNIPPET }}
-      </div>
-
-
-      <h3>Template</h3>
-      <p>
-        Use the <code class="paper">position</code> attribute to set where the menu should appear. The position attribute
-        should be used together with <code class="paper">.md-menu-origin</code> and <code class="paper">.md-menu-align-target</code>
-        classes to specify where it should position itself in respect to origin and align-target.
-      </p>
-
-      <CodeSnippet @name="menu.position-modes.hbs" />
-
-    </PaperCardContent>
-  </PaperCard>
-
-
-
-  <PaperCard>
-    <PaperCardContent>
-      <h2>Different Widths</h2>
-
-      <p>
-        <code class="paper">paper-menu-content</code> may specify a width attribute which will follow the
-        <a href="http://www.google.com/design/spec/components/menus.html#menus-specs">official spec</a>.
-      </p>
-
-      <div class="layout-column layout-align-center-center">
-        {{! BEGIN-SNIPPET menu.different-widths }}
-
-        <div class="menus layout-fill layout-wrap layout-row layout-align-space-between-center">
-          <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
-            <p>Wide menu (<code class="paper">width=6</code>)</p>
-            <PaperMenu as |menu|>
-              <menu.trigger>
-                <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
-                </PaperButton>
-              </menu.trigger>
-
-              <menu.content @width={{6}} as |content|>
-                {{#each options as |item|}}
-                  <content.menu-item @onClick={{action "openSomething"}}>
-                    <span class="md-menu-align-target">Option</span> {{item}}
-                  </content.menu-item>
-                {{/each}}
-              </menu.content>
-            </PaperMenu>
-          </div>
-
-          <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
-            <p>Medium menu (<code class="paper">width=4</code>)</p>
-            <PaperMenu as |menu|>
-              <menu.trigger>
-                <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
-                </PaperButton>
-              </menu.trigger>
-
-              <menu.content @width={{4}} as |content|>
-                {{#each options as |item|}}
-                  <content.menu-item @onClick={{action "openSomething"}}>
-                    <span class="md-menu-align-target">Option</span> {{item}}
-                  </content.menu-item>
-                {{/each}}
-              </menu.content>
-            </PaperMenu>
-          </div>
-
-          <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
-            <p>Small menu (<code class="paper">width=2</code>)</p>
-            <PaperMenu as |menu|>
-              <menu.trigger>
-                <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
-                </PaperButton>
-              </menu.trigger>
-
-              <menu.content @width={{2}} as |content|>
-                {{#each options as |item|}}
-                  <content.menu-item @onClick={{action "openSomething"}}>
-                    <span class="md-menu-align-target">Option</span> {{item}}
-                  </content.menu-item>
-                {{/each}}
-              </menu.content>
-            </PaperMenu>
-          </div>
-        </div>
-        {{! END-SNIPPET }}
-      </div>
-
-      <h3>Template</h3>
-      <CodeSnippet @name="menu.different-widths.hbs" />
-
-    </PaperCardContent>
-  </PaperCard>
-
-
-  <PaperCard>
-    <PaperCardContent>
-      <h2>Dense menu</h2>
-
-      <p>
-        <code class="paper">paper-menu-content</code> may specify a `dense` boolean attribute.
-      </p>
-
-      <div class="layout-column layout-align-center-center">
-        {{! BEGIN-SNIPPET menu.dense }}
-
-        <div class="menus layout-fill layout-wrap layout-row layout-align-space-between-center">
-          <div class="layout-column flex-33 flex-sm-100 layout-align-center-center">
-            <p>Dense menu (<code class="paper">dense=true</code>)</p>
-            <PaperMenu as |menu|>
-              <menu.trigger>
-                <PaperButton @onClick={{null}} @iconButton={{true}}>
-                  {{paper-icon "local_phone" class="md-menu-origin"}}
-                </PaperButton>
-              </menu.trigger>
-
-              <menu.content @dense={{true}} as |content|>
-                {{#each options as |item|}}
-                  <content.menu-item @onClick={{action "openSomething"}}>
-                    <span class="md-menu-align-target">Option</span> {{item}}
-                  </content.menu-item>
-                {{/each}}
-              </menu.content>
-            </PaperMenu>
-          </div>
-        </div>
-        {{! END-SNIPPET }}
-      </div>
-
-      <h3>Template</h3>
-      <CodeSnippet @name="menu.dense.hbs" />
-
-    </PaperCardContent>
-  </PaperCard>
-
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/progress-circular.hbs b/tests/dummy/app/templates/demo/progress-circular.hbs
deleted file mode 100644
index fac61e23c..000000000
--- a/tests/dummy/app/templates/demo/progress-circular.hbs
+++ /dev/null
@@ -1,68 +0,0 @@
-<PageToolbar @pageTitle="Progress Circular" @isDemo={{true}} />
-
-<DocContent>
-  <h2>Basic Usage</h2>
-  <h3>Determinate</h3>
-  <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.</p>
-  <div class="layout-column layout-gt-sm-row layout-align-space-around">
-    {{! BEGIN-SNIPPET progress-circular.determinate }}
-    <PaperProgressCircular @value={{determinateValue}} />
-    {{! END-SNIPPET }}
-  </div>
-  <CodeSnippet @name="progress-circular.determinate.hbs" />
-  <h3>Indeterminate</h3>
-  <p>For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
-  <div class="layout-column layout-gt-sm-row layout-align-space-around">
-    {{! BEGIN-SNIPPET progress-circular.indeterminate }}
-    <PaperProgressCircular />
-    {{! END-SNIPPET }}
-  </div>
-  <CodeSnippet @name="progress-circular.indeterminate.hbs" />
-
-  <h3>Theming</h3>
-
-  <div class="layout-column layout-gt-sm-row layout-align-space-around layout-align-center">
-    {{! BEGIN-SNIPPET progress-circular.theming }}
-    <PaperProgressCircular @class="md-hue-2" @diameter={{25}} />
-    <PaperProgressCircular @accent={{true}} @diameter={{40}} />
-    <PaperProgressCircular @accent={{true}} @class="md-hue-1" @diameter={{60}} />
-    <PaperProgressCircular @warn={{true}} @class="md-hue-3" @diameter={{70}} />
-    <PaperProgressCircular @warn={{true}} @diameter={{96}} />
-    {{! END-SNIPPET }}
-  </div>
-  <CodeSnippet @name="progress-circular.theming.hbs" />
-
-  <h3>Playground</h3>
-
-  <div class="layout-column layout-gt-sm-row">
-    {{! BEGIN-SNIPPET progress-circular.playground }}
-    <div class="flex layout-row layout-align-space-around layout-align-center">
-      <PaperProgressCircular @value={{sliderValue}} @diameter={{sliderDiameter}} @strokeRatio={{strokeRatio}} @disabled={{isDisabled}} />
-    </div>
-    <div class="flex flex-gt-sm-33">
-      <PaperCheckbox @value={{isIndeterminate}} @onChange={{action "setIndeterminate"}}>
-        Indeterminate
-      </PaperCheckbox>
-      <PaperCheckbox @value={{isDisabled}} @onChange={{action (mut isDisabled)}}>
-        Disabled
-      </PaperCheckbox>
-      <div class="layout layout-align-center-center slider-container">
-        <span class="flex">Value ({{if sliderValue sliderValue "null"}})</span>
-        <PaperSlider @class="flex" @value={{sliderValue}} @min={{0}} @max={{100}} @onChange={{action "setValue"}} />
-      </div>
-
-      <div class="layout layout-align-center-center slider-container">
-        <span class="flex">Diameter ({{sliderDiameter}})</span>
-        <PaperSlider @class="flex" @value={{sliderDiameter}} @min={{0}} @max={{300}} @onChange={{action (mut sliderDiameter)}} />
-      </div>
-
-      <div class="layout layout-align-center-center slider-container">
-        <span class="flex">Stroke ratio ({{strokeRatio}})</span>
-        <PaperSlider @class="flex" @value={{strokeRatio}} @min={{0}} @max={{0.5}} @step={{0.0025}} @onChange={{action (mut strokeRatio)}} />
-      </div>
-
-    </div>
-    {{! END-SNIPPET }}
-  </div>
-
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/progress-linear.hbs b/tests/dummy/app/templates/demo/progress-linear.hbs
deleted file mode 100644
index 7e9abfb0a..000000000
--- a/tests/dummy/app/templates/demo/progress-linear.hbs
+++ /dev/null
@@ -1,33 +0,0 @@
-<PageToolbar @pageTitle="Progress Linear" @isDemo={{true}} />
-
-<DocContent>
-  <h2>Basic Usage</h2>
-
-  <h3>Determinate mode</h3>
-  <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.</p>
-  {{! BEGIN-SNIPPET progress-linear.determinate }}
-  <PaperProgressLinear @value={{determinateValue}} />
-  {{! END-SNIPPET }}
-  <CodeSnippet @name="progress-linear.determinate.hbs" />
-
-  <h3>Indeterminate mode</h3>
-  <p>For operations where the user is asked to wait a moment while something finishes up, and it's not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator:</p>
-  {{! BEGIN-SNIPPET progress-linear.indeterminate }}
-  <PaperProgressLinear />
-  {{! END-SNIPPET }}
-  <CodeSnippet @name="progress-linear.indeterminate.hbs" />
-
-  <h3>Buffer mode</h3>
-  <p>For operations where the user wants to indicate some activity or loading from the server, use the buffer indicator:</p>
-  {{! BEGIN-SNIPPET progress-linear.buffer }}
-  <PaperProgressLinear @warn={{true}} @value={{determinateValue}} @bufferValue={{determinateValue2}} />
-  {{! END-SNIPPET }}
-  <CodeSnippet @name="progress-linear.buffer.hbs" />
-
-  <h3>Query mode</h3>
-  <p>For situations where the user wants to indicate pre-loading (until the loading can actually be made), use the query indicator:</p>
-  {{! BEGIN-SNIPPET progress-linear.query }}
-  <PaperProgressLinear @accent={{true}} @mode={{mode}} @value={{determinateValue}} />
-  {{! END-SNIPPET }}
-  <CodeSnippet @name="progress-linear.query.hbs" />
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/radio.hbs b/tests/dummy/app/templates/demo/radio.hbs
deleted file mode 100644
index 40c62fb78..000000000
--- a/tests/dummy/app/templates/demo/radio.hbs
+++ /dev/null
@@ -1,70 +0,0 @@
-<PageToolbar @pageTitle="Radio" @isDemo={{true}} />
-<DocContent>
-  <PaperCard @class="radio-button-demo">
-    <PaperCardContent>
-      <h2>Basic Usage</h2>
-      <p>
-        Stand alone
-      </p>
-      <div class="layout-row layout-align-space-around">
-        {{! BEGIN-SNIPPET radio.standalone-usage }}
-        <PaperRadio @toggle={{true}} @value="Toggable" @groupValue={{toggleValue}} @onChange={{action (mut toggleValue)}}>
-          Toggable
-        </PaperRadio>
-        <PaperRadio @label="Blockless" @toggle={{true}} @value="Blockless" @groupValue={{blocklessValue}} @onChange={{action (mut blocklessValue)}} />
-        <PaperRadio @value={{false}} @disabled={{true}} @onChange={{null}}>
-          Disabled
-        </PaperRadio>
-        {{! END-SNIPPET }}
-      </div>
-      <h3>Template</h3>
-      <CodeSnippet @name="radio.standalone-usage.hbs" />
-      <hr>
-
-      <p>
-        Selected Value: <span class="radio-value">{{selectedFruit}}</span>
-      </p>
-
-      {{! BEGIN-SNIPPET radio.basic-group-usage}}
-      <PaperRadioGroup @groupValue={{readonly selectedFruit}} @onChange={{action (mut selectedFruit)}} as |group|>
-        <group.radio @value="Apple" @primary={{true}}> Apple </group.radio>
-        <group.radio @value="Banana" @warn={{true}}> Banana </group.radio>
-        <group.radio @value="Mango"> Mango </group.radio>
-      </PaperRadioGroup>
-      {{! END-SNIPPET }}
-
-      <h3>Template</h3>
-      <CodeSnippet @name="radio.basic-group-usage.hbs" />
-      <hr>
-
-      <p>
-        Graphic radio buttons
-      </p>
-      {{! BEGIN-SNIPPET radio.images }}
-      <PaperRadioGroup @groupValue={{selectedGraphic}} @onChange={{action (mut selectedGraphic)}} as |group|>
-
-        <group.label>
-          <p>Selected Value: <span class="radio-value">{{selectedGraphic}}</span></p>
-        </group.label>
-
-        <group.radio @value="graphic-1" @primary={{true}}>
-          <img src="http://tinyurl.com/zwvmqz8" alt="example1">
-        </group.radio>
-
-        <group.radio @value="graphic-2" @warn={{true}}>
-          <img src="http://tinyurl.com/jdcepzm" alt="example2">
-        </group.radio>
-
-        <group.radio @value="graphic-3">
-          <img src="http://tinyurl.com/j55t8cd" alt="example3">
-        </group.radio>
-
-      </PaperRadioGroup>
-      {{! END-SNIPPET }}
-
-      <h3>Template</h3>
-      <CodeSnippet @name="radio.images.hbs" />
-
-    </PaperCardContent>
-  </PaperCard>
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/select.hbs b/tests/dummy/app/templates/demo/select.hbs
deleted file mode 100644
index bab349cc0..000000000
--- a/tests/dummy/app/templates/demo/select.hbs
+++ /dev/null
@@ -1,99 +0,0 @@
-<PageToolbar @pageTitle="Select" @isDemo={{true}} />
-
-<DocContent>
-  <h2>Basic Usage</h2>
-
-  <p>Enter an address</p>
-  <div class="layout-row">
-    {{! BEGIN-SNIPPET select.basic-usage }}
-    <PaperInput @label="Street Name" @value={{street}} @onChange={{action (mut street)}} />
-    <PaperInput @label="City" @value={{city}} @onChange={{action (mut city)}} />
-    <PaperSelect @disabled={{disableSelect}} @label="State" @options={{states}} @selected={{userState}} @onChange={{action (mut userState)}} as |state|>
-      {{state.abbrev}}
-    </PaperSelect>
-    {{! END-SNIPPET }}
-  </div>
-
-  <p>
-    <PaperCheckbox @label="Disable select" @value={{disableSelect}} @onChange={{action (mut disableSelect)}} />
-  </p>
-  <h3>Template</h3>
-  <CodeSnippet @name="select.basic-usage.hbs" />
-  <p>Paper select is based on Ember power select, advanced documentation can be found <a href="https://ember-power-select.com/docs">here</a>.</p>
-  {{#paper-api
-      (p-section
-        (p-row "disabled" "boolean" "Should the select field be disabled? Default is `false`.")
-        (p-row "label" "string" "Field label. Same as paper-input.")
-        (p-row "options" "array" "List of selectable options.")
-        (p-row "selected" "object" "Value of selected option.")
-      )
-        title="Select Helpers"
-  }}
-  {{/paper-api}}
-
-  <h2>Option groups</h2>
-
-  <p>Pick your pizza below</p>
-  <div class="layout-row">
-    {{! BEGIN-SNIPPET select.option-groups }}
-    <PaperSelect @options={{sizes}} @label="Size" @required={{true}} @selected={{pizzaSize}} @onChange={{action (mut pizzaSize)}} as |size|>
-      {{size}}
-    </PaperSelect>
-    <PaperSelect @options={{groupedToppings}} @label="Topping" @selected={{topping}} @onChange={{action (mut topping)}} as |topping|>
-      {{topping}}
-    </PaperSelect>
-    {{! END-SNIPPET }}
-  </div>
-
-  <h3>Template</h3>
-  <CodeSnippet @name="select.option-groups.hbs" />
-
-  <h2>Options with async search</h2>
-
-  <div class="layout-column layout-align-center-center">
-    <p>
-      Select will correctly resolve any promise you pass to the <code>options</code> property.
-    </p>
-    <div class="layout-column layout-align-center-center" style="height: 130px;">
-      {{! BEGIN-SNIPPET select.async-search }}
-      <PaperSelect @placeholder="Assign to a user" @selected={{selectedUser}} @options={{users}} @onChange={{action (mut selectedUser)}} as |user|>
-        {{user.name}}
-      </PaperSelect>
-
-      {{#if selectedUser}}
-        <p>You have selected the user <code>{{selectedUser.name}}</code></p>
-      {{/if}}
-      {{! END-SNIPPET }}
-    </div>
-  </div>
-  <h3>Template</h3>
-  <CodeSnippet @name="select.async-search.hbs" />
-
-
-  <h2>Select with Search</h2>
-  <p>Paper select can include a paper-input field at the top of the dropdown which acts as a live filter for the paper-select options. For additional documentation on search, please refer to the power-select docs <a href="https://ember-power-select.com/docs/the-search">here</a>.</p>
-  <div class="layout-column layout-align-center-center">
-    <div class="layout-column layout-align-center-center" style="height: 130px;">
-      {{! BEGIN-SNIPPET select.select-header }}
-      <PaperSelect @placeholder="Vegetable" @selected={{selectedVegetable}} @options={{vegetables}} @searchField="name" @searchPlaceholder="Search for a vegetable.." @searchEnabled={{true}} @onChange={{action (mut selectedVegetable)}} as |vegetable|>
-        {{vegetable.name}}
-      </PaperSelect>
-
-      {{! END-SNIPPET }}
-    </div>
-  </div>
-
-  <h3>Template</h3>
-
-  <CodeSnippet @name="select.select-header.hbs" />
-
-  {{#paper-api
-      (p-section
-        (p-row "searchField" "string" "Field name of provided options which search filter should compare against.")
-        (p-row "searchPlaceholder" "string" "Placeholder for paper-input which is displayed at top of paper-select dropdown.")
-        (p-row "searchEnabled" "boolean" "Enable paper-select to be searchable. Default is false.")
-      )
-        title="Select Search Helpers"
-  }}
-  {{/paper-api}}
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/slider.hbs b/tests/dummy/app/templates/demo/slider.hbs
deleted file mode 100644
index 0c966a624..000000000
--- a/tests/dummy/app/templates/demo/slider.hbs
+++ /dev/null
@@ -1,73 +0,0 @@
-<PageToolbar @pageTitle="Slider" @isDemo={{true}} />
-
-<DocContent @class="slider-demo">
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Basic Usage</h2>
-      </PaperToolbarTools>
-    </PaperToolbar>
-    <PaperCardContent @class="flex">
-      {{! BEGIN-SNIPPET slider }}
-      <h2>
-        RGB <span style={{colorStyle}}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-      </h2>
-
-      <div class="layout layout-align-center-center slider-container">
-        <span>R</span>
-        <PaperSlider @class="flex" @min={{0}} @max={{255}} @value={{color.red}} @onChange={{action (mut color.red)}} />
-        <PaperInput @type="number" @value={{color.red}} @onChange={{action (mut color.red)}} />
-      </div>
-
-      <div class="layout layout-align-center-center slider-container">
-        <span>G</span>
-        <PaperSlider @class="flex md-accent" @min={{0}} @max={{255}} @value={{color.green}} @onChange={{action (mut color.green)}} />
-        <PaperInput @type="number" @value={{color.green}} @onChange={{action (mut color.green)}} />
-      </div>
-
-      <div class="layout layout-align-center-center slider-container">
-        <span>B</span>
-        <PaperSlider @class="flex md-primary" @min={{0}} @max={{255}} @value={{color.blue}} @onChange={{action (mut color.blue)}} />
-        <PaperInput @type="number" @value={{color.blue}} @onChange={{action (mut color.blue)}} />
-      </div>
-
-      <h2>Rating: {{rating}}/5 - demo of theming classes</h2>
-      <div class="layout layout-align-center-center slider-container">
-        <div class="layout flex-10 layout-align-center-center">
-          <span>default</span>
-        </div>
-        <PaperSlider @class="flex" @discrete={{true}} @value={{rating1}} @step={{1}} @min={{1}} @max={{5}} @onChange={{action (mut rating1)}} />
-      </div>
-      <div class="layout layout-align-center-center slider-container">
-        <div class="layout flex-10 layout-align-center-center">
-          <span>md-warn</span>
-        </div>
-        <PaperSlider @class="flex" @warn={{true}} @discrete={{true}} @value={{rating2}} @step={{1}} @min={{1}} @max={{5}} @onChange={{action (mut rating2)}} />
-      </div>
-      <div class="layout layout-align-center-center slider-container">
-        <div class="layout flex-10 layout-align-center-center">
-          <span>md-primary</span>
-        </div>
-        <PaperSlider @class="flex" @primary={{true}} @discrete={{true}} @value={{rating3}} @step={{1}} @min={{1}} @max={{5}} @onChange={{action (mut rating3)}} />
-      </div>
-
-      <h2>Disabled</h2>
-      <div class="layout layout-align-center-center slider-container">
-        <PaperIcon @icon="brightness-low" />
-        <PaperSlider @class="flex" @value={{disabled1}} @disabled={{isSliderDisabled}} @onChange={{action (mut disabled1)}} />
-        <PaperInput @type="number" @value={{disabled1}} @onChange={{action (mut disabled1)}} />
-      </div>
-      <PaperCheckbox @value={{isSliderDisabled}} @onChange={{action (mut isSliderDisabled)}} />
-      <PaperSlider @value={{disabled2}} @disabled={{true}} />
-
-      <h2>Disabled, Discrete</h2>
-      <PaperSlider @value={{discreteDisabled1}} @disabled={{true}} @discrete={{true}} @step={{3}} @min={{0}} @max={{10}} />
-      <PaperSlider @value={{discreteDisabled2}} @disabled={{true}} @discrete={{true}} @step={{10}} />
-      {{! END-SNIPPET }}
-
-      <h3>Template</h3>
-      <CodeSnippet @name="slider.hbs" />
-    </PaperCardContent>
-  </PaperCard>
-
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/speed-dial.hbs b/tests/dummy/app/templates/demo/speed-dial.hbs
deleted file mode 100644
index 44a1d4745..000000000
--- a/tests/dummy/app/templates/demo/speed-dial.hbs
+++ /dev/null
@@ -1,191 +0,0 @@
-<PageToolbar @pageTitle="Speed Dial" @isDemo={{true}} />
-
-<DocContent>
-  <div class="md-padding">
-    <PaperCard>
-      <PaperToolbar>
-        <PaperToolbarTools>
-          <h2>Basic Usage</h2>
-          <span class="flex"></span>
-          <PaperButton @onClick={{action "toggle" "showBasicUsageSourceCode"}} @iconButton={{true}}>
-            {{paper-icon "code"}}
-          </PaperButton>
-        </PaperToolbarTools>
-      </PaperToolbar>
-
-      <div class="doc-code-example {{if showBasicUsageSourceCode "is-visible"}}">
-        <CodeSnippet @name="speed-dial-basic-usage.hbs" />
-      </div>
-
-      <div class="doc-content-example">
-        <PaperContent>
-          <div class="layout-align-center-center layout-row" style="min-height: 300px; overflow: hidden">
-            {{! BEGIN-SNIPPET speed-dial-basic-usage}}
-            <PaperSpeedDial @animation={{animation}} @direction={{direction}} @open={{open}} @onToggle={{action (mut open)}} as |dial|>
-              <dial.trigger>
-                <PaperButton @fab={{true}}>
-                  {{paper-icon "menu"}}
-                </PaperButton>
-              </dial.trigger>
-
-              <dial.actions as |actions|>
-                <actions.action>
-                  <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
-                    {{paper-icon "people"}}
-                  </PaperButton>
-                </actions.action>
-
-                <actions.action>
-                  <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
-                    {{paper-icon "accessibility"}}
-                  </PaperButton>
-                </actions.action>
-
-                <actions.action>
-                  <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
-                    {{paper-icon "check-circle"}}
-                  </PaperButton>
-                </actions.action>
-              </dial.actions>
-            </PaperSpeedDial>
-            {{! END-SNIPPET }}
-          </div>
-        </PaperContent>
-        <PaperCardContent>
-
-          <div class="layout-align-space-around-stretch layout-row">
-
-            <div class="layout-column layout-align-start-center">
-              <h4>Direction</h4>
-              <PaperRadioGroup @groupValue={{direction}} @onChange={{action (mut direction)}} as |group|>
-                <group.radio @value="up">Up</group.radio>
-                <group.radio @value="down">Down</group.radio>
-                <group.radio @value="left">Left</group.radio>
-                <group.radio @value="right">Right</group.radio>
-              </PaperRadioGroup>
-            </div>
-
-            <div class="layout-column layout-align-start-center">
-              <h4>Open/Closed</h4>
-              <PaperCheckbox @value={{open}} @onChange={{action (mut open)}}>
-                open
-              </PaperCheckbox>
-            </div>
-
-            <div class="layout-column layout-align-start-center">
-              <h4>Animation</h4>
-              <PaperRadioGroup @groupValue={{animation}} @onChange={{action (mut animation)}} as |group|>
-                <group.radio @value="fling">Fling</group.radio>
-                <group.radio @value="scale">Scale</group.radio>
-              </PaperRadioGroup>
-            </div>
-
-          </div>
-
-        </PaperCardContent>
-      </div>
-      <PaperDivider />
-      <PaperCardContent>
-        <p>
-          You may supply a direction of <code>left</code>, <code>up</code>, <code>down</code>, or
-          <code>right</code> through the <code>direction</code> attribute. Default value is <code>down</code>.
-        </p>
-        <p>
-          There are also two available animations. Specify <code>fling</code> or <code>scale</code> strings
-          through the <code>animation</code> attribute. Default value is <code>fling</code>.
-        </p>
-        <p>
-          The component can also take a <code>open</code> attribute and an <code>onToggle</code> pair, much like
-          <code>paper-sidenav</code>. Use the pair to control the open status of the speed dial.
-        </p>
-      </PaperCardContent>
-    </PaperCard>
-  </div>
-
-  <div class="md-padding">
-    <PaperCard>
-      <PaperToolbar>
-        <PaperToolbarTools>
-          <h2>Advanced Usage</h2>
-          <span class="flex"></span>
-          <PaperButton @onClick={{action "toggle" "showAdvancedUsageSourceCode"}} @iconButton={{true}}>
-            {{paper-icon "code"}}
-          </PaperButton>
-        </PaperToolbarTools>
-      </PaperToolbar>
-
-      <div class="doc-code-example {{if showAdvancedUsageSourceCode "is-visible"}}">
-        <CodeSnippet @name="speed-dial-advanced-usage.hbs" />
-      </div>
-
-      <div class="doc-content-example">
-        <PaperContent>
-          <div class="layout-align-center-center layout-row" style="min-height: 300px; overflow: hidden">
-            {{! BEGIN-SNIPPET speed-dial-advanced-usage}}
-            <PaperSpeedDial @onMouseEnter={{action (mut open2) true}} @onMouseLeave={{action (mut open2) false}} @open={{open2}} @onToggle={{action (mut open2)}} @hoverFull={{hoverFull}} as |dial|>
-              <dial.trigger>
-                <PaperButton @fab={{true}}>
-                  {{paper-icon "menu"}}
-                </PaperButton>
-              </dial.trigger>
-
-              <dial.actions as |actions|>
-                <actions.action>
-                  <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
-                    {{paper-icon "people"}}
-                  </PaperButton>
-                </actions.action>
-
-                <actions.action>
-                  <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
-                    {{paper-icon "accessibility"}}
-                  </PaperButton>
-                </actions.action>
-
-                <actions.action>
-                  <PaperButton @mini={{true}} @onClick={{action (mut showDialog) true}}>
-                    {{paper-icon "check-circle"}}
-                  </PaperButton>
-                </actions.action>
-              </dial.actions>
-            </PaperSpeedDial>
-            {{! END-SNIPPET }}
-          </div>
-        </PaperContent>
-      </div>
-      <PaperDivider />
-      <PaperCardContent>
-        <p>
-          You can use the <code>onMouseEnter</code> and <code>onMouseLeave</code> actions to control
-          the <code>open</code> attribute. This results in a speed dial that opens when you hover it.
-        </p>
-        <p>
-          By default, it only works when you hover the speed dial's trigger. However, if you want to
-          open it by hovering the whole speed dial space including its actions, you can pass in
-          <code>hoverFull=true</code>. Try it with the following checkbox:
-        </p>
-        <p>
-          <PaperCheckbox @value={{hoverFull}} @onChange={{action (mut hoverFull)}}>
-            hoverFull
-          </PaperCheckbox>
-        </p>
-      </PaperCardContent>
-    </PaperCard>
-  </div>
-</DocContent>
-
-{{#if showDialog}}
-  <PaperDialog @fullscreen={{fullscreen}} @onClose={{action (mut showDialog) false}}>
-
-    <PaperDialogContent>
-      <h2 class="md-title">An action was clicked!</h2>
-      <p>Close this dialog and try another button.</p>
-    </PaperDialogContent>
-
-    <PaperDialogActions @class="layout-row">
-      <span class="flex"></span>
-      <PaperButton @primary={{true}} @onClick={{action (mut showDialog) false}}>Okay!</PaperButton>
-    </PaperDialogActions>
-
-  </PaperDialog>
-{{/if}}
diff --git a/tests/dummy/app/templates/demo/switch.hbs b/tests/dummy/app/templates/demo/switch.hbs
deleted file mode 100644
index 57bfe0b51..000000000
--- a/tests/dummy/app/templates/demo/switch.hbs
+++ /dev/null
@@ -1,27 +0,0 @@
-<PageToolbar @pageTitle="Switch" @isDemo={{true}} />
-
-<DocContent>
-  <p>
-    {{! BEGIN-SNIPPET switch }}
-    <PaperSwitch @value={{booleanProp1}} @onChange={{action (mut booleanProp1)}}>
-      {{booleanProp1}}
-    </PaperSwitch>
-
-    <PaperSwitch @value={{booleanProp2}} @onChange={{action (mut booleanProp2)}}>
-      {{booleanProp2}}
-    </PaperSwitch>
-
-    <PaperSwitch @value={{booleanProp3}} @onChange={{action "changeBooleanProp" "3"}} @disabled={{true}}>
-      Disabled switch
-    </PaperSwitch>
-
-    <PaperSwitch @value={{booleanProp4}} @onChange={{action "changeBooleanProp" "4"}} @noink={{true}}>
-      Noink switch
-    </PaperSwitch>
-
-    <PaperSwitch @label="Blockless version" @value={{booleanProp5}} @onChange={{action "changeBooleanProp" "5"}} />
-    {{! END-SNIPPET }}
-  </p>
-  <h3>Template</h3>
-  <CodeSnippet @name="switch.hbs" />
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/tabs.hbs b/tests/dummy/app/templates/demo/tabs.hbs
deleted file mode 100644
index eaa722ff1..000000000
--- a/tests/dummy/app/templates/demo/tabs.hbs
+++ /dev/null
@@ -1,247 +0,0 @@
-<PageToolbar @pageTitle="Tabs" @isDemo={{true}} />
-
-<DocContent @class="tabs-demo">
-
-  <div class="md-padding">
-    <PaperCard>
-      <PaperToolbar>
-        <PaperToolbarTools>
-          <h2>Basic Usage</h2>
-          <span class="flex"></span>
-          <PaperButton @onClick={{action "toggle" "showBasicUsageSourceCode"}} @iconButton={{true}}>
-            <PaperIcon @icon="code" />
-          </PaperButton>
-        </PaperToolbarTools>
-      </PaperToolbar>
-
-      <div class="doc-code-example {{if showBasicUsageSourceCode "is-visible"}}">
-        <CodeSnippet @name="basic-usage.hbs" />
-      </div>
-
-      <div class="doc-content-example">
-        <PaperContent>
-          {{! BEGIN-SNIPPET basic-usage}}
-          <PaperTabs @center={{center}} @stretch={{stretch}} @borderBottom={{borderBottom}} @selected={{selectedBasicTab}} @onChange={{action (mut selectedBasicTab)}} as |tabs|>
-            <tabs.tab>
-              Page One
-            </tabs.tab>
-            <tabs.tab @disabled={{true}}>
-              Page Two (disabled)
-            </tabs.tab>
-            <tabs.tab>
-              Page Three
-            </tabs.tab>
-            <tabs.tab>
-              Page Four
-            </tabs.tab>
-            <tabs.tab>
-              Page Five
-            </tabs.tab>
-          </PaperTabs>
-
-          {{#liquid-bind (hash tab=selectedBasicTab) class="md-padding" as |current|}}
-            <h1 class="md-display-2">Tab {{current.tab}}</h1>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              Nulla venenatis ante augue. Phasellus volutpat neque ac dui mattis
-              vulputate. Etiam consequat aliquam cursus. In sodales pretium ultrices.
-              Maecenas lectus est, sollicitudin consectetur felis nec, feugiat ultricies mi.
-            </p>
-          {{/liquid-bind}}
-          {{! END-SNIPPET }}
-        </PaperContent>
-        <PaperCardContent>
-
-          <PaperCheckbox @value={{center}} @onChange={{action (mut center)}}>
-            Center tabs
-          </PaperCheckbox>
-
-          <PaperCheckbox @value={{stretch}} @onChange={{action (mut stretch)}}>
-            Stretch tabs
-          </PaperCheckbox>
-
-          <PaperCheckbox @value={{borderBottom}} @onChange={{action (mut borderBottom)}}>
-            Border bottom
-          </PaperCheckbox>
-
-        </PaperCardContent>
-      </div>
-      <PaperDivider />
-      <PaperCardContent>
-        <p>
-          <em><b>Note:</b> transitions were implemented using liquid-fire.</em>
-        </p>
-
-        <p>
-          The way that we teach paper-tabs is that they are essentially a <code>radio-group</code>
-          with some additional features (like tab pagination). So, this component essentially is
-          just a tab header you can use to control a value of a property.
-        </p>
-        <p>
-          To reinforce this idea, each of the tabs optionally accepts a <code>value</code>
-          property which needs to match the <code>paper-tabs</code> <code>selected</code>
-          property (see API table below for more info). You don't need to use the value property,
-          though. Each tab is automatically given a value equal to its index. So, your <code>onChange</code>
-          action will start getting integer values if you don't specify any value on the tabs.
-        </p>
-        <p>
-          It is up to the user to manage the body of the tabs. They're free to use <code>liquid-fire</code>,
-          css transitions or even just plain handlebars <code>\{{#if}}</code>s.
-          This makes the component <strong>much</strong> more flexible and DDAU-compliant, in our experience,
-          but it also means you will need to do a little bit more work to manage what you want to do with
-          the value. Thankfully Ember makes this dead easy for us.
-        </p>
-        <p>
-          To test tab pagination resize the browser.
-        </p>
-      </PaperCardContent>
-    </PaperCard>
-  </div>
-
-  <div class="md-padding">
-    <PaperCard>
-      <PaperToolbar>
-        <PaperToolbarTools>
-          <h2>Dynamic Usage</h2>
-          <span class="flex"></span>
-          <PaperButton @onClick={{action "toggle" "showDynamicUsageSourceCode"}} @iconButton={{true}}>
-            {{paper-icon "code"}}
-          </PaperButton>
-        </PaperToolbarTools>
-      </PaperToolbar>
-
-      <div class="doc-code-example {{if showDynamicUsageSourceCode "is-visible"}}">
-        <CodeSnippet @name="dynamic-usage.hbs" />
-      </div>
-
-      <div class="doc-content-example">
-        <PaperContent>
-          {{! BEGIN-SNIPPET dynamic-usage}}
-          <PaperTabs @primary={{true}} @borderBottom={{true}} @selected={{selectedChapter}} @onChange={{action (mut selectedChapter)}} as |tabs|>
-            {{#each chapters as |chapter|}}
-              <tabs.tab @value={{chapter}}>
-                {{chapter.title}}
-              </tabs.tab>
-            {{/each}}
-          </PaperTabs>
-
-          {{#liquid-bind (hash tab=selectedChapter.index m=selectedChapter) class="md-padding dynamic-animation" as |current|}}
-            <h1 class="md-display-2">{{current.m.title}}</h1>
-            <p>{{current.m.body}}</p>
-            <PaperButton @primary={{true}} @raised={{true}} @disabled={{eq chapters.length 1}} @onClick={{action "removeChapter" current.m}}>
-              Remove chapter
-            </PaperButton>
-          {{/liquid-bind}}
-
-          {{! END-SNIPPET }}
-        </PaperContent>
-      </div>
-      <PaperDivider />
-
-      <PaperCardContent>
-        <div class="md-padding layout-row layout-align-space-around-start">
-          <PaperInput @class="flex-20" @label="Title" @value={{newTitle}} @required={{true}} @onChange={{action (mut newTitle)}} />
-          <PaperInput @class="flex-60" @label="Content" @textarea={{true}} @value={{newContent}} @required={{true}} @onChange={{action (mut newContent)}} />
-          <div class="flex-20 layout-row layout-align-center-start">
-            <PaperButton @primary={{true}} @raised={{true}} @disabled={{not (and newTitle newContent)}} @onClick={{action "addChapter"}}>
-              Add chapter
-            </PaperButton>
-          </div>
-        </div>
-
-        <p>
-          <em><b>Note:</b> transitions were implemented using liquid-fire.</em>
-        </p>
-        <p>
-          In this example we render tabs dynamically, one per model. Note that we
-          need some simple book-keeping to implement some specific features.
-        </p>
-        <p>
-          What happens when we delete an active chapter? We decide that by setting
-          <code>selected</code>. When adding a new chapter we want it to be the
-          new selected tab. No problem, just set the <code>selected</code> property
-          to the newly selected chapter.
-        </p>
-      </PaperCardContent>
-    </PaperCard>
-  </div>
-
-  <div class="md-padding">
-    <PaperCard>
-      <PaperToolbar>
-        <PaperToolbarTools>
-          <h2>Routable Usage</h2>
-          <span class="flex"></span>
-          <PaperButton @onClick={{action "toggle" "showRoutableUsageSourceCode"}} @iconButton={{true}}>
-            <PaperIcon @icon="code" />
-          </PaperButton>
-        </PaperToolbarTools>
-      </PaperToolbar>
-
-      <div class="doc-code-example {{if showRoutableUsageSourceCode "is-visible"}}">
-        <CodeSnippet @name="routable-usage.hbs" />
-      </div>
-
-      <div class="doc-content-example">
-        <PaperContent>
-          {{! BEGIN-SNIPPET routable-usage}}
-          <PaperTabs @selected={{currentRouteName}} @borderBottom={{true}} @onChange={{action "noop"}} as |tabs|>
-            <tabs.tab @value="demo.tabs.index" @href={{href-to "demo.tabs.index"}}>
-              Index
-            </tabs.tab>
-            <tabs.tab @value="demo.tabs.nested-route" @href={{href-to "demo.tabs.nested-route"}}>
-              Nested Route
-            </tabs.tab>
-          </PaperTabs>
-
-          {{liquid-outlet class="md-padding"}}
-          {{! END-SNIPPET }}
-        </PaperContent>
-      </div>
-      <PaperDivider />
-
-      <PaperCardContent>
-        <p>
-          <em><b>Note:</b> transitions were implemented using liquid-fire.</em>
-        </p>
-        <p>
-          Sometimes we need to use tabs with routes. If you pass an <code>href</code>
-          property to a tab, it will render itself as an <code>&lt;a&gt;</code> tag.
-        </p>
-        <p>
-          <em>
-            <b>Hint:</b> use <code>ember-href-to</code> addon to easily generate
-            urls for your routes. It plays really well with <code>paper-tabs</code>,
-            <code>paper-buttons</code> and even <code>paper-item</code>s.
-          </em>
-        </p>
-        <p>
-          <b>Hint:</b> for Ember versions less than 2.15, use the <code>ember-router-service-polyfill</code> addon to easily retrieve
-          the current route name and use it as the selected value to <code>paper-tabs</code>.
-        </p>
-      </PaperCardContent>
-    </PaperCard>
-  </div>
-
-  <div class="md-padding">
-    {{paper-api
-      (p-section
-        (p-row "selected" "string or number" "Value of the active tab. Each tab automatically gets an index as its value. Default is `0` (the first tab active).")
-        (p-row "onChange" "action" "An action triggered when the active tab changes.")
-        (p-row "accent" "boolean" "Pass `true` to enable accent color scheme.")
-        (p-row "primary" "boolean" "Pass `true` to enable primary color scheme.")
-        (p-row "stretch" "boolean or matchMedia query" "Use true/false to permanently enable/disable tab stretching. You can also use a matchMedia query to enable tab stretching only at certain viewport sizes. Default value is `sm` (`(min-width: 600px) and (max-width: 959px)`).")
-        (p-row "borderBottom" "boolean" "Use true to enable border beneath tabs. Default is false.")
-      )
-      (p-section
-        "`tabs.tab` API"
-        (p-row "value" "string" "Value associated with the tab. To activate the tab, `selected` needs to have this value. Each tab gets a value automatically set to its index, so you don't need to use this property unless you need specific values for some special case.")
-        (p-row "isSelected" "boolean" "Optionally you can set a specific tab as selected directly without relying on the global tabs value.")
-        (p-row "disabled" "boolean" "Pass `true` to disable the tab button.")
-        (p-row "href" "string" "You can pass an href to the tab button to render a link. Hint: use `ember-href-to` to generate route urls.")
-        (p-row "onClick" "action" "An action triggered when the tab button is clicked.")
-      ) title="API Usage"
-    }}
-  </div>
-
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/toast.hbs b/tests/dummy/app/templates/demo/toast.hbs
deleted file mode 100644
index ca377475c..000000000
--- a/tests/dummy/app/templates/demo/toast.hbs
+++ /dev/null
@@ -1,205 +0,0 @@
-<PageToolbar @pageTitle="Toast" @isDemo={{true}} />
-
-<DocContent>
-
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Component Usage</h2>
-        <span class="flex"></span>
-        <PaperButton @onClick={{action "toggleSourceCode"}} @iconButton={{true}}>
-          <PaperIcon @icon="code" />
-        </PaperButton>
-      </PaperToolbarTools>
-    </PaperToolbar>
-
-    <div class="doc-code-example {{if showSourceCode "is-visible"}}">
-      <CodeSnippet @name="toast.hbs" />
-    </div>
-
-    <div class="doc-content-example">
-      <div id="paper-dialog-demo"></div>
-      <PaperCardContent>
-        <p>Open a toast over the app's content. Press escape, swipe or timeout to close the toast.</p>
-
-        <div class="layout-row layout-wrap">
-          <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openToast"}}>
-            Open toast with accent button
-          </PaperButton>
-
-          <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openToastWithout"}}>
-            Open toast
-          </PaperButton>
-        </div>
-
-        <h3>Options</h3>
-        <div class="layout-row layout-wrap layout-xs-column layout-sm-column">
-
-          <div class="flex">
-            <PaperRadioGroup @groupValue={{positionX}} @onChange={{action (mut positionX)}} as |group|>
-              <group.radio @value="left">Left</group.radio>
-              <group.radio @value="right">Right</group.radio>
-            </PaperRadioGroup>
-          </div>
-          <div class="flex">
-            <PaperRadioGroup @groupValue={{positionY}} @onChange={{action (mut positionY)}} as |group|>
-              <group.radio @value="top">Top</group.radio>
-              <group.radio @value="bottom">Bottom</group.radio>
-            </PaperRadioGroup>
-          </div>
-          <div class="flex">
-            <PaperCheckbox @value={{capsule}} @onChange={{action (mut capsule)}}>
-              capsule
-            </PaperCheckbox>
-          </div>
-          <div class="flex">
-            <PaperCheckbox @value={{swipeToClose}} @flex={{true}} @onChange={{action (mut swipeToClose)}}>
-              swipeToClose
-            </PaperCheckbox>
-          </div>
-        </div>
-
-        <h3>duration</h3>
-        <div class="layout layout-align-center-center slider-container">
-          {{paper-icon "watch later"}}
-          <PaperSlider @class="flex" @value={{duration}} @max={{6000}} @onChange={{action (mut duration)}} />
-          <PaperInput @type="number" @value={{duration}} @onChange={{action (mut duration)}} />
-        </div>
-
-        {{paper-api
-          (p-section
-            (p-row "parent" "element or selector" "Existing element where the modal and backdrop will be rendered")
-            (p-row "swipeToClose" "boolean" "Causes swiping to trigger the `onClose` handler. Defaults to `true`.")
-            (p-row "duration" "number or `false`" "Timeout in milliseconds, set to false to disable timeout. Defaults to `3000`")
-            (p-row "escapeToClose" "boolean" "Causes pressing escape to close the toast. Defaults to `false`.")
-            (p-row "position" "string" "Possible values are `bottom left` (default), `bottom right`, `top left` and `top right`")
-            (p-row "capsule" "boolean" "Controls whether the capsule class is added to the toast.Defaults to `false`")
-          )
-          (p-section
-            "Actions"
-            (p-row "onClose" "action" "An action to be executed when the toast is closed, e.g. by pressing escape, swiping or timeout.")
-          )
-        }}
-
-      </PaperCardContent>
-    </div>
-
-  </PaperCard>
-
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Paper Toaster Service</h2>
-        <span class="flex"></span>
-        <PaperButton @onClick={{action "toggleSourceCode"}} @iconButton={{true}}>
-          <PaperIcon @icon="code" />
-        </PaperButton>
-      </PaperToolbarTools>
-    </PaperToolbar>
-
-    <div class="doc-code-example {{if showSourceCode "is-visible"}}">
-      <CodeSnippet @name="toaster.js" />
-    </div>
-
-    <div class="doc-content-example">
-      <PaperCardContent>
-
-        <p>Open a toast via <code>paperToaster</code> service and <code>\{{paper-toaster}}</code> component.</p>
-
-        <h3>Options</h3>
-
-        <div class="layout-column">
-          <PaperInput @label="Toast text" @value={{toastText}} @onChange={{action (mut toastText)}} />
-
-          <strong>Toast class</strong>
-          <div>
-            <PaperRadioGroup @class="layout-row" @groupValue={{toastClass}} @onChange={{action (mut toastClass)}} as |group|>
-              <group.radio @value="">[none]</group.radio>
-              <group.radio @value="md-accent">md-accent</group.radio>
-              <group.radio @value="md-warn">md-warn</group.radio>
-            </PaperRadioGroup>
-          </div>
-        </div>
-
-        <div class="layout-row">
-          <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openServiceToast"}}>
-            Open toast
-          </PaperButton>
-          <PaperButton @raised={{true}} @primary={{true}} @onClick={{action "openServiceActionToast"}}>
-            Open toast with action
-          </PaperButton>
-        </div>
-        <ul>
-          {{#each paperToaster.queue as |toast index|}}
-            <li>
-              "{{toast.text}}" -
-              {{#if (eq index 0)}}
-                {{#if toast.show}}
-                  showing for {{toast.duration}}ms
-                {{else}}
-                  (Removing...)
-                {{/if}}
-              {{else}}
-                (Waiting)
-              {{/if}}
-              <PaperButton @onClick={{action "cancelToast" toast}}>
-                Cancel
-              </PaperButton>
-            </li>
-          {{/each}}
-        </ul>
-
-        {{paper-api
-          (p-section
-            "Methods"
-            (p-row "show(text[, options])" "Toast" "Display a toast that renders given text.")
-            (p-row "showComponent(componentName[, options])" "Toast" "Display a toast that renders a component.")
-            (p-row "cancelToast(toast)" "" "Closes or cancel a given toast.")
-          )
-          (p-section
-            "Options"
-            (p-row "duration" "number or `false`" "Timeout in milliseconds. Defaults to `3000`. Use `false` to keep it open until a `cancelToast` is used.")
-            (p-row "onClose" "function" "You can pass in a function the will be called back after the toast closes.")
-            (p-row "position" "string" "Possible values are `bottom left` (default), `bottom right`, `top left` and `top right`")
-            (p-row "toastClass" "string" "CSS class to be applied to the md-toast element")
-            (p-row "action.label" "string" "The label of the action button.")
-            (p-row "action.primary" "boolean" "Wether or not you want the action button to be higlighted with the primary color.")
-            (p-row "action.accent" "boolean" "Wether or not you want the action button to be higlighted with the accent color.")
-            (p-row "action.warn" "boolean" "Wether or not you want the action button to be higlighted with the warn color.")
-            (p-row "action.onClick" "function" "This function gets called when the button is pressed.")
-          )
-        }}
-
-        <h3>Application defaults</h3>
-
-        <p>
-          You can define a default <code>duration</code>, <code>toastClass</code>
-          and <code>position</code> for your application by adding in your
-          <code>config/environment.js</code> file:
-        </p>
-
-        <CodeSnippet @name="paper-toaster-defaults.js" />
-
-      </PaperCardContent>
-    </div>
-
-  </PaperCard>
-
-  <span id="bottom-of-card"></span>
-
-</DocContent>
-
-{{! BEGIN-SNIPPET toast }}
-{{#if showToast}}
-  <PaperToast @duration={{duration}} @position={{concat positionY " " positionX}} @capsule={{capsule}} @swipeToClose={{swipeToClose}} @onClose={{action "closeToast"}} as |toast|>
-    <toast.text>Hello</toast.text>
-    <PaperButton @accent={{true}} @onClick={{action "buttonAction"}}>Undo</PaperButton>
-  </PaperToast>
-{{/if}}
-
-{{#if showToastWithout}}
-  <PaperToast @duration={{duration}} @position={{concat positionY " " positionX}} @capsule={{capsule}} @swipeToClose={{swipeToClose}} @onClose={{action "closeToastWithout"}} as |toast|>
-    <toast.text>Hello</toast.text>
-  </PaperToast>
-{{/if}}
-{{! END-SNIPPET }}
diff --git a/tests/dummy/app/templates/demo/toolbar.hbs b/tests/dummy/app/templates/demo/toolbar.hbs
deleted file mode 100644
index ff186d0e8..000000000
--- a/tests/dummy/app/templates/demo/toolbar.hbs
+++ /dev/null
@@ -1,63 +0,0 @@
-<PageToolbar @pageTitle="Toolbar" @isDemo={{true}} />
-
-<DocContent>
-  {{! BEGIN-SNIPPET toolbar }}
-  {{! without contextual components }}
-  <PaperToolbar>
-    <PaperToolbarTools>
-      <PaperButton @iconButton={{true}}>
-        {{paper-icon "menu"}}
-      </PaperButton>
-      <h2>
-        Toolbar with Icon Buttons
-      </h2>
-      <span class="flex"></span>
-      <PaperButton @iconButton={{true}}>
-        {{paper-icon "favorite"}}
-      </PaperButton>
-      <PaperButton @iconButton={{true}}>
-        {{paper-icon "more_vert"}}
-      </PaperButton>
-    </PaperToolbarTools>
-  </PaperToolbar>
-
-  <br>
-  {{! with contextual components }}
-  <PaperToolbar as |toolbar|>
-    <toolbar.tools>
-      <PaperButton>
-        Go Back
-      </PaperButton>
-      <h2>Toolbar with Standard Buttons</h2>
-      <span class="flex"></span>
-      <PaperButton @raised={{true}}>
-        Learn More
-      </PaperButton>
-      <PaperButton @mini={{true}} @aria-label="Favorite">
-        {{paper-icon "favorite"}}
-      </PaperButton>
-    </toolbar.tools>
-  </PaperToolbar>
-
-  <br>
-
-  <PaperToolbar @tall={{true}} @accent={{true}}>
-    <PaperToolbarTools>
-      <h2>Toolbar: tall=true, accent=true</h2>
-    </PaperToolbarTools>
-  </PaperToolbar>
-
-  <br>
-
-  <PaperToolbar @tall={{true}} @warn={{true}}>
-    <span class="flex"></span>
-    <PaperToolbarTools>
-      <h2>Toolbar: tall with actions pin to the bottom (tall=true warn=true)</h2>
-    </PaperToolbarTools>
-  </PaperToolbar>
-  {{! END-SNIPPET }}
-
-  <h3>Template</h3>
-  <CodeSnippet @name="toolbar.hbs" />
-
-</DocContent>
diff --git a/tests/dummy/app/templates/demo/tooltip.hbs b/tests/dummy/app/templates/demo/tooltip.hbs
deleted file mode 100644
index c25dbcd60..000000000
--- a/tests/dummy/app/templates/demo/tooltip.hbs
+++ /dev/null
@@ -1,97 +0,0 @@
-<PageToolbar @pageTitle="Tooltip" @isDemo={{true}} />
-
-<DocContent>
-
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Basic Usage</h2>
-        <span class="flex"></span>
-        <PaperButton @onClick={{action "toggle" "showSourceCode"}} @iconButton={{true}}>
-          <PaperIcon @icon="code" />
-          <PaperTooltip>
-            {{if showSourceCode "Hide" "Show"}} code
-          </PaperTooltip>
-        </PaperButton>
-      </PaperToolbarTools>
-    </PaperToolbar>
-
-    <div class="doc-code-example {{if showSourceCode "is-visible"}}">
-      <CodeSnippet @name="tooltip.hbs" />
-    </div>
-
-    <div class="doc-content-example">
-
-      <PaperCardContent>
-        <p>
-          You can render tooltips using the paper-tooltip component. This component
-          will attach to the immediate parent element and use it for positioning.
-        </p>
-
-        <p>
-          You can control the position of you tooltip using the
-          <code>position</code> property which can be one of <code>bottom</code> (default),
-          <code>top</code>, <code>left</code> or <code>right</code>. Try it:
-        </p>
-
-        <div class="layout-row layout-align-space-around-center md-padding">
-          {{! BEGIN-SNIPPET tooltip }}
-          <PaperButton @raised={{true}}>
-            A button
-            <PaperTooltip @position={{position}}>
-              Hey! I'm a tooltip. Çup?
-            </PaperTooltip>
-          </PaperButton>
-
-          <PaperButton @iconButton={{true}} @raised={{true}}>
-            {{paper-icon "create"}}
-            <PaperTooltip @position={{position}}>
-              Create
-            </PaperTooltip>
-          </PaperButton>
-
-          <PaperButton @fab={{true}} @raised={{true}} @accent={{true}}>
-            {{paper-icon "delete"}}
-            <PaperTooltip @position={{position}}>
-              Delete
-            </PaperTooltip>
-          </PaperButton>
-
-          <div>
-            {{#paper-icon "info"}}
-              <PaperTooltip @position={{position}}>
-                Icon tooltip
-              </PaperTooltip>
-            {{/paper-icon}}
-          </div>
-          {{! END-SNIPPET tooltip }}
-        </div>
-
-        <PaperRadioGroup @groupValue={{position}} @onChange={{action (mut position)}} as |group|>
-          <group.radio @value="bottom">
-            Bottom
-          </group.radio>
-          <group.radio @value="top">
-            Top
-          </group.radio>
-          <group.radio @value="left">
-            Left
-          </group.radio>
-          <group.radio @value="right">
-            Right
-          </group.radio>
-        </PaperRadioGroup>
-
-        {{paper-api
-          (p-section
-            (p-row "zIndex" "number" "Controls the z-index of the tooltip. By default it is 100.")
-            (p-row "position" "string" "Controls the position of the tooltip. Use one of `bottom` (default), `top`, `left` or `right`")
-            (p-row "parent" "element or selector" "Existing element where the tooltip will be rendered. Defaults to the global paper-wormhole.")
-            (p-row "attachTo" "element or selector" "Existing element that the tooltip will use to position itself. Defaults to the immediate parent element of the tooltip.")
-          )
-        }}
-
-      </PaperCardContent>
-    </div>
-  </PaperCard>
-</DocContent>
diff --git a/tests/dummy/app/templates/forms.hbs b/tests/dummy/app/templates/forms.hbs
deleted file mode 100644
index 75e98cbe8..000000000
--- a/tests/dummy/app/templates/forms.hbs
+++ /dev/null
@@ -1,130 +0,0 @@
-<PageToolbar @pageTitle="Forms" @isDemo={{false}} />
-
-<DocContent @class="card-demo">
-
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Basic usage</h2>
-      </PaperToolbarTools>
-    </PaperToolbar>
-
-    <PaperCardContent>
-      <p>
-        ember-paper provides a <code>paper-form</code> to help you build forms
-        and keep track of the form's global validity state. This component uses
-        the html form tag by default, so expected form behavior will occur.
-        (For example, pressing the enter key from within one of the form's
-        inputs will submit the form.)
-        <code>paper-form</code> yields <code><LinkTo @route="demo.input">paper-input</LinkTo></code>,
-        <code><LinkTo @route="demo.select">paper-select</LinkTo></code>
-        and <code><LinkTo @route="demo.autocomplete">paper-autocomplete</LinkTo></code> controls.
-        In the following example you can see how we use the yielded form controls:
-      </p>
-
-      {{! BEGIN-SNIPPET form.basic-usage }}
-      <PaperForm @onSubmit={{action "basicSubmitAction"}} as |form|>
-        <div class="layout-row">
-          <div class="layout-column flex-50">
-            <form.input @label="First Name" @value={{firstName}} @onChange={{action (mut firstName)}} @required={{true}} />
-            <form.input @label="Last Name" @value={{lastName}} @onChange={{action (mut lastName)}} />
-          </div>
-          <div class="layout-column flex-50">
-            <form.autocomplete @required={{true}} @options={{items}} @selected={{selectedCountry}} @searchField="name" @labelPath="name" @label="Country" @noMatchesMessage="Oops this country doesn't exist." @onSelectionChange={{action (mut selectedCountry)}} as |country select|>
-              <PaperAutocompleteHighlight @label={{country.name}} @searchText={{select.searchText}} @flags="i" />
-            </form.autocomplete>
-            <form.input @type="number" @label="Age" @value={{age}} @onChange={{action (mut age)}} @min={{13}} @max={{65}} @required={{true}} />
-          </div>
-        </div>
-        <div class="layout-row">
-          <form.submit-button @raised={{true}} @primary={{true}}>Submit</form.submit-button>
-        </div>
-      </PaperForm>
-      {{! END-SNIPPET }}
-
-      <h3>Template</h3>
-      <CodeSnippet @name="form.basic-usage.hbs" />
-    </PaperCardContent>
-
-  </PaperCard>
-
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Using the form validity state</h2>
-      </PaperToolbarTools>
-    </PaperToolbar>
-
-    <PaperCardContent>
-
-      <p>
-        A typical use case for the global validity state is to toggle the submit button
-        between a disabled and enabled state. Here is how you would do that with
-        <code>paper-form</code>:
-      </p>
-
-      {{! BEGIN-SNIPPET form.disabled-submit }}
-      <PaperForm @onSubmit={{action "disabledSubmitAction"}} as |form|>
-        <div class="layout-row">
-          <form.input @label="Favorite Letter" @value={{favoriteLetter}} @onChange={{action (mut favoriteLetter)}} @required={{true}} @maxlength={{1}} />
-        </div>
-        <div class="layout-row">
-          <form.submit-button @raised={{true}} @primary={{true}} @disabled={{form.isInvalid}}>
-            Submit
-          </form.submit-button>
-        </div>
-      </PaperForm>
-      {{! END-SNIPPET }}
-
-      <h3>Template</h3>
-      <CodeSnippet @name="form.disabled-submit.hbs" />
-    </PaperCardContent>
-
-  </PaperCard>
-
-  <PaperCard>
-    <PaperToolbar>
-      <PaperToolbarTools>
-        <h2>Advanced usage</h2>
-      </PaperToolbarTools>
-    </PaperToolbar>
-
-    <PaperCardContent>
-
-      <p>
-        If you prefer, you can trigger the submit action without using a submit button.
-        <code>paper-form</code> also yields an <code>onSubmit</code> action you
-        can use wherever you like, e.g: <br>
-        <pre>
-          &lt;button onclick=\{{action form.onSubmit}}&gt;
-            Submit
-          &lt;/button&gt;
-        </pre>
-      </p>
-
-      <p>
-        You can also extend paper-input to make your own custom components
-        (money inputs, phone inputs, etc.) and the form validation will still
-        work out of the box!
-        Just replace <strong>paper-input</strong> with your component's name.
-      </p>
-
-      {{! BEGIN-SNIPPET form.custom-components }}
-      <PaperForm @onSubmit={{action "customSubmitAction"}} as |form|>
-        <div class="layout-row">
-          <PaperInput @label="Favorite Number" @value={{favoriteNumber}} @onChange={{action (mut favoriteNumber)}} @required={{true}} @min={{1}} @max={{10}} />
-        </div>
-        <div class="layout-row">
-          <form.submit-button @raised={{true}} @primary={{true}}>Submit</form.submit-button>
-        </div>
-      </PaperForm>
-      {{! END-SNIPPET }}
-
-      <h3>Template</h3>
-      <CodeSnippet @name="form.custom-components.hbs" />
-
-    </PaperCardContent>
-
-  </PaperCard>
-
-</DocContent>
diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
index e8b1bc7e4..f26b29c7a 100644
--- a/tests/dummy/app/templates/index.hbs
+++ b/tests/dummy/app/templates/index.hbs
@@ -1,86 +1,41 @@
-<PageToolbar @pageTitle="Introduction" @isDemo={{false}} />
-
-<PaperContent @scroll-y={{true}} @class="layout-padding flex">
-  <div class="doc-content">
-
+<div class="hero hero--indigo">
+  <div>
     <h2 class="md-headline" style="margin-top: 24px;">Welcome to Ember Paper.</h2>
-    <p>This project aims to bring Google's new <a href="https://www.google.com/design/spec/material-design/introduction.html">Material Design</a> to Ember. The goal is to encapsulate everything possible in Ember components. This project is packaged as an <a href="http://www.ember-cli.com/">Ember-cli</a> addon.</p>
+    <p>
+      This project aims to bring Google's new <a href="https://www.google.com/design/spec/material-design/introduction.html">Material Design</a> to Ember.
+      The goal is to encapsulate everything possible in Ember components.
+      This project is packaged as an <a href="http://www.ember-cli.com/">Ember-cli</a> addon.
+    </p>
+  </div>
+</div>
 
+<div class="hero">
+  <div>
     <h2 class="md-headline">Installation</h2>
 
     <p>
       To install run:
     </p>
-    <CodeSnippet @name="install.sh" />
+    <pre>
+      $ ember install ember-paper
+    </pre>
 
     <p>This should also automatically create an scss file under <code>app/styles/app.scss</code> with <code>@import 'ember-paper';</code> and install <code>ember-cli-sass</code>.</p>
     <p>Sass is an important part of Ember-paper. Using sass you can override default variables and easily change the default behavior of Ember-paper.</p>
 
-    <p>All the components and styles are ready to use in your application templates.</p>
-    <p>Navigate through the docs to understand how to use each component.</p>
-
-    <h2 class="md-headline">Content Security Policy</h2>
-
-    <p>
-      This is no longer used in newer ember-cli apps. However, here are the instructions if you need them.
-      Ember Paper uses fonts from Google Fonts, so the URL to them has to be white listed.
-      You can set this by adding to the Content Security Policy defined in <code>config/environment.js</code> like so:
-    </p>
-
-    <CodeSnippet @name="content-security-policy.js" />
-
-    <p>
-      You can find out more information on the CSP addon page <a href="https://github.com/rwjblue/ember-cli-content-security-policy#ember-cli-content-security-policy">here</a>.
-      We also need to allow <code>data:</code> in <code>img-src</code> because of a <a href="https://github.com/angular/material/blob/v1.1.4/src/components/button/button.scss#L123">current hack</a> in paper-button styles.
-    </p>
-
-    <h2 class="md-headline">Options</h2>
-
-    <p>Ember-paper supports the following options, specified in your <code>ember-cli-build.js</code> file:</p>
-
-    <dl>
-      <dt><code>ENV['autoprefixer']</code> (defaults to <code>{ browsers: ['last 2 versions'] }</code>)</dt>
-      <dd>
-        By default ember-paper will run <a href="https://github.com/postcss/autoprefixer">autoprefixer</a> on your styles.
-        This option allows you to override the default autoprefixer target.
-      </dd>
-      <dt><code>ENV['ember-paper'].insertFontLinks</code> (defaults to <code>true</code>)</dt>
-      <dd>
-        Consuming apps can specify this option to prevent the insertion of google fonts links
-        inside the head tag. This is especially useful if you want to include your own fonts.
-      </dd>
-      <dt><code>ENV['ember-paper'].whitelist</code> (defaults to <code>[]</code>)</dt>
-      <dd>
-        Consuming apps can optionally specify this array to only include these components into the build.
-        You should use either whitelist or blacklist, not both.
-        <CodeSnippet @name="whitelist.js" />
-        The dependencies of the specified components will be included as well.
-        This is the recommended approach, blacklist is harder to get right.
-      </dd>
-      <dt><code>ENV['ember-paper'].blacklist</code> (defaults to <code>[]</code>)</dt>
-      <dd>
-        Consuming apps can optionally specify this array to exclude these components from the build.
-        <CodeSnippet @name="blacklist.js" />
-        This only bans from the build the specified components, not its dependencies.
-        whitelist is easier to maintain.
-      </dd>
-    </dl>
-
-    <h2 class="md-headline">Documentation for Previous Versions</h2>
-    <p>Documentation for previous versions can be found here:</p>
-    <ul>
-      <li><a href="https://forge512.github.io/ember-paper/">Version 0.2</a></li>
-    </ul>
+    <PaperButton @raised={{true}} @primary={{true}} @href={{href-to "components"}}>
+      Explore the components
+    </PaperButton>
+  </div>
+</div>
 
+<div class="hero hero--orange">
+  <div>
     <h2 class="md-headline">Contribution</h2>
     <p>This is a very ambitious project. Google's design specs are extensive, and non-trivial to implement. If you can port or fix a component or two, please drop a pull request or issue on GitHub or join us on Discord. See README.md for more resources.</p>
     <p>With everyone's help, we can bring this amazing design spec to Ember in a modular and elegant way. The Ember way.</p>
     <p>
-      <strong>Help us on Github!</strong>
-    </p>
-    <p>
-      {{!-- Place this tag where you want the button to render. --}}
-      <a class="github-button" href="https://github.com/miguelcobain/ember-paper" data-style="mega" data-count-href="/miguelcobain/ember-paper/network" data-count-api="/repos/miguelcobain/ember-paper#forks_count">Fork</a>
+      <strong><a href="https://github.com/miguelcobain/ember-paper">Help us on Github!</a></strong>
     </p>
   </div>
-</PaperContent>
+</div>
diff --git a/tests/dummy/app/templates/layout.hbs b/tests/dummy/app/templates/layout.hbs
new file mode 100644
index 000000000..347405287
--- /dev/null
+++ b/tests/dummy/app/templates/layout.hbs
@@ -0,0 +1,42 @@
+<PaperSidenavContainer>
+  <PaperSidenav @class="md-whiteframe-z2" @lockedOpen={{true}} style="min-height: 100vh;">
+    <PaperContent @scroll-y={{true}}>
+      <PaperList>
+        <PaperItem @class="md-2-line" @href={{href-to "layout.introduction"}}>
+          {{paper-icon "view_compact"}}
+          <div class="md-list-item-text">
+            Introduction
+          </div>
+        </PaperItem>
+      </PaperList>
+      <PaperList>
+        <PaperItem @class="md-2-line" @href={{href-to "layout.child-alignment"}}>
+          {{paper-icon "view_day"}}
+          <div class="md-list-item-text">
+            Child Alignments
+          </div>
+        </PaperItem>
+      </PaperList>
+      <PaperList>
+        <PaperItem @class="md-2-line" @href={{href-to "layout.layout-children"}}>
+          {{paper-icon "view_comfy"}}
+          <div class="md-list-item-text">
+            Layout Children
+          </div>
+        </PaperItem>
+      </PaperList>
+      <PaperList>
+        <PaperItem @class="md-2-line" @href={{href-to "layout.layout-containers"}}>
+          {{paper-icon "view_quilt"}}
+          <div class="md-list-item-text">
+            Layout Containers
+          </div>
+        </PaperItem>
+      </PaperList>
+    </PaperContent>
+  </PaperSidenav>
+
+  <div class="flex layout-column">
+    {{outlet}}
+  </div>
+</PaperSidenavContainer>
diff --git a/tests/dummy/app/templates/layout/child-alignment.hbs b/tests/dummy/app/templates/layout/child-alignment.hbs
index f1f7fae2c..0a47fe936 100644
--- a/tests/dummy/app/templates/layout/child-alignment.hbs
+++ b/tests/dummy/app/templates/layout/child-alignment.hbs
@@ -1,6 +1,4 @@
-<PageToolbar @pageTitle="Child Alignment" @isLayout={{true}} />
-
-<DocContent @class="layout-docs alignment">
+<PaperContent @padding={{true}}>
 
   <p>
     The <code>layout-align</code> class takes two words. The first word says how the children
@@ -101,9 +99,6 @@
         </div>
       </div>
 
-      <CodeSnippet @name="child-alignment.hbs" />
     </card.content>
   </PaperCard>
-
-
-</DocContent>
+</PaperContent>
diff --git a/tests/dummy/app/templates/layout/introduction.hbs b/tests/dummy/app/templates/layout/introduction.hbs
index 06d084bec..17c0a712d 100644
--- a/tests/dummy/app/templates/layout/introduction.hbs
+++ b/tests/dummy/app/templates/layout/introduction.hbs
@@ -1,9 +1,5 @@
-<PageToolbar @pageTitle="Introduction" @isLayout={{true}} />
-
-<DocContent @class="layout-docs">
-
-  <h2>Overview</h2>
-
+<PaperContent @padding={{true}}>
+  <h1>Introduction</h1>
   <p>
     Ember Paper's layout features provide sugar to enable developers to more easily create modern,
     responsive layouts on top of CSS3 flexbox. The layout API consists of a set of classes
@@ -22,47 +18,51 @@
     dashes. See the table below for an overview of the most important classes.
   </p>
 
-  {{paper-api
-    (p-section
-      (p-row "layout" "`row | column`" "`layout-row`, `layout-column`")
-      (p-row "flex" "integer (increments of 5 for 0%->100%, 100%/3, 200%/3)" "`layout`, `flex-50`")
-      (p-row "flex-order" "integer values from -20 to 20" "`flex-order-15`, `flex-order--5`")
-      (p-row "flex-offset" "integer (increments of 5 for 0%->100%, 100%/3, 200%/3)" "`flex-offset-15`, `flex-offset-66`")
-      (p-row "layout-align" "`start | center | end | space-around | space-between`, `start | center | end | stretch`" "`layout-align-space-around-center`, `layout-align-start`")
-      (p-row "layout-fill" "**none**" "")
-      (p-row "layout-wrap" "**none**" "")
-      (p-row "layout-nowrap" "**none**" "")
-      (p-row "layout-margin" "**none**" "")
-      (p-row "layout-padding" "**none**" "")
-      (p-row "show" "**none**" "")
-      (p-row "hide" "**none**" "")
-    )
-    header=(p-row "Base attribute" "Parameter values" "Examples")
-    sort=false
-  }}
+  <div class="layout-column layout-align-center-center">
+    {{paper-api
+      (p-section
+        (p-row "layout" "`row | column`" "`layout-row`, `layout-column`")
+        (p-row "flex" "integer (increments of 5 for 0%->100%, 100%/3, 200%/3)" "`layout`, `flex-50`")
+        (p-row "flex-order" "integer values from -20 to 20" "`flex-order-15`, `flex-order--5`")
+        (p-row "flex-offset" "integer (increments of 5 for 0%->100%, 100%/3, 200%/3)" "`flex-offset-15`, `flex-offset-66`")
+        (p-row "layout-align" "`start | center | end | space-around | space-between`, `start | center | end | stretch`" "`layout-align-space-around-center`, `layout-align-start`")
+        (p-row "layout-fill" "**none**" "")
+        (p-row "layout-wrap" "**none**" "")
+        (p-row "layout-nowrap" "**none**" "")
+        (p-row "layout-margin" "**none**" "")
+        (p-row "layout-padding" "**none**" "")
+        (p-row "show" "**none**" "")
+        (p-row "hide" "**none**" "")
+      )
+      header=(p-row "Base attribute" "Parameter values" "Examples")
+      sort=false
+    }}
+  </div>
 
   <p>
     We can associate breakpoints with mediaQuery definitions using breakpoint <strong>alias(es)</strong>,
     based on the breakpoints specified in the Material Design spec:
   </p>
 
-  {{paper-api
-    (p-section
-      (p-row "xs" "'(max-width: *599*px)'")
-      (p-row "gt-xs" "'(min-width: *600*px)'")
-      (p-row "sm" "'(min-width: *600*px) and (max-width: *959*px)'")
-      (p-row "gt-sm" "'(min-width: *960*px)'")
-      (p-row "md" "'(min-width: *960*px) and (max-width: *1279*px)'")
-      (p-row "gt-md" "'(min-width: *1280*px)'")
-      (p-row "lg" "'(min-width: *1280*px) and (max-width: *1919*px)'")
-      (p-row "gt-lg" "'(min-width: *1920*px)'")
-      (p-row "xl" "'(min-width: *1920*px)'")
-    )
-    header=(p-row "Breakpoint" "Media query (pixel range)")
-    sort=false
-  }}
-
-  <h3>API with Responsive Breakpoints</h3>
+  <div class="layout-column layout-align-center-center">
+    {{paper-api
+      (p-section
+        (p-row "xs" "'(max-width: *599*px)'")
+        (p-row "gt-xs" "'(min-width: *600*px)'")
+        (p-row "sm" "'(min-width: *600*px) and (max-width: *959*px)'")
+        (p-row "gt-sm" "'(min-width: *960*px)'")
+        (p-row "md" "'(min-width: *960*px) and (max-width: *1279*px)'")
+        (p-row "gt-md" "'(min-width: *1280*px)'")
+        (p-row "lg" "'(min-width: *1280*px) and (max-width: *1919*px)'")
+        (p-row "gt-lg" "'(min-width: *1920*px)'")
+        (p-row "xl" "'(min-width: *1920*px)'")
+      )
+      header=(p-row "Breakpoint" "Media query (pixel range)")
+      sort=false
+    }}
+  </div>
+
+  <h2>API with Responsive Breakpoints</h2>
   <p>
     Now we can combine the breakpoint alias with the layout classes to easily support responsive breakpoints
     with our simple layout class convention. The alias is simply used as suffix extensions to the base attribute class.
@@ -71,32 +71,34 @@
     This notation results in, for example, the following table for the layout and flex classes:
   </p>
 
-  {{paper-api
-    (p-section
-      (p-row "layout" "`flex`" "Sets the default layout direction & flex unless overriden by another breakpoint.")
-      (p-row "layout-xs" "`flex-xs`"       "width < *600*px")
-      (p-row "layout-gt-xs" "`flex-gt-xs`" "width >= *600*px")
-      (p-row "layout-sm" "`flex-sm`"       "width *600*px <= width < *960*px")
-      (p-row "layout-gt-sm" "`flex-gt-sm`" "width >= *960*px")
-      (p-row "layout-md" "`flex-md`"       "*960*px <= width < *1280*px")
-      (p-row "layout-gt-md" "`flex-gt-md`" "width >= *1280*px")
-      (p-row "layout-lg" "`flex-lg`"       "*1280*px <= width < *1920*px")
-      (p-row "layout-gt-lg" "`flex-gt-lg`" "width >= *1920*px")
-      (p-row "layout-xl" "`flex-xl`"       "width >= *1920*px")
-    )
-    header=(p-row "layout class" "flex class" "Description")
-    sort=false
-  }}
+  <div class="layout-column layout-align-center-center">
+    {{paper-api
+      (p-section
+        (p-row "layout" "`flex`" "Sets the default layout direction & flex unless overriden by another breakpoint.")
+        (p-row "layout-xs" "`flex-xs`"       "width < *600*px")
+        (p-row "layout-gt-xs" "`flex-gt-xs`" "width >= *600*px")
+        (p-row "layout-sm" "`flex-sm`"       "width *600*px <= width < *960*px")
+        (p-row "layout-gt-sm" "`flex-gt-sm`" "width >= *960*px")
+        (p-row "layout-md" "`flex-md`"       "*960*px <= width < *1280*px")
+        (p-row "layout-gt-md" "`flex-gt-md`" "width >= *1280*px")
+        (p-row "layout-lg" "`flex-lg`"       "*1280*px <= width < *1920*px")
+        (p-row "layout-gt-lg" "`flex-gt-lg`" "width >= *1920*px")
+        (p-row "layout-xl" "`flex-xl`"       "width >= *1920*px")
+      )
+      header=(p-row "layout class" "flex class" "Description")
+      sort=false
+    }}
+  </div>
 
   <p>Below is an example of the usage of the responsive layout classes:</p>
 
   <PaperCard as |card|>
-    {{! BEGIN-SNIPPET layout-introduction }}
+    {{! BEGIN-SNIPPET layout.introduction }}
     <div class="layout-column example introduction-example">
-      <div class="flex-33 flex-md-{{box1Height}} box-one"></div>
-      <div class="flex-33 layout-{{direction}} layout-md-row box-two">
+      <div class="flex-33 flex-md-{{this.box1Height}} box-one"></div>
+      <div class="flex-33 layout-{{this.direction}} box-two">
         <div class="flex-20 flex-md-10 hide-lg box-two-one"></div>
-        <div class="flex-30 {{if hideBox "hide-md"}} flex-md-25 box-two-two"></div>
+        <div class="flex-30 {{if this.hideBox "hide-md"}} flex-md-25 box-two-two"></div>
         <div class="flex-20 flex-md-65 box-two-three"></div>
       </div>
       <div class="flex box-three"></div>
@@ -105,11 +107,11 @@
     <card.content>
 
       <div class="layout-row layout-align-space-between-start">
-        <PaperInput @value={{box1Height}} @label="box1Height" @type="number" @passThru={{hash min="0" max="100" step="5"}} @onChange={{action (mut box1Height)}} />
+        <PaperInput @value={{this.box1Height}} @label="box1Height" @type="number" @passThru={{hash min="0" max="100" step="5"}} @onChange={{fn (mut this.box1Height)}} />
 
         <div class="demo-group">
           <h4>direction</h4>
-          <PaperRadioGroup @groupValue={{direction}} @onChange={{action (mut direction)}} as |group|>
+          <PaperRadioGroup @groupValue={{this.direction}} @onChange={{fn (mut this.direction)}} as |group|>
             <group.radio @value="row">
               row
             </group.radio>
@@ -119,11 +121,15 @@
           </PaperRadioGroup>
         </div>
 
-        <PaperSwitch @value={{hideBox}} @onChange={{action (mut hideBox)}}>hideBox</PaperSwitch>
+        <PaperSwitch @value={{this.hideBox}} @onChange={{fn (mut this.hideBox)}}>hideBox</PaperSwitch>
       </div>
 
-      <CodeSnippet @name="layout-introduction.hbs" />
     </card.content>
   </PaperCard>
+</PaperContent>
 
-</DocContent>
+{{#let (get-code-snippet "layout.introduction.hbs") as |snippet|}}
+  <CodeBlock @language="markup">
+{{snippet.source}}
+  </CodeBlock>
+{{/let}}
diff --git a/tests/dummy/app/templates/layout/layout-children.hbs b/tests/dummy/app/templates/layout/layout-children.hbs
index cad90ee19..ad871ea07 100644
--- a/tests/dummy/app/templates/layout/layout-children.hbs
+++ b/tests/dummy/app/templates/layout/layout-children.hbs
@@ -1,6 +1,4 @@
-<PageToolbar @pageTitle="Layout Children" @isLayout={{true}} />
-
-<DocContent @class="layout-docs children">
+<PaperContent @padding={{true}}>
 
   <h2>Children within a Layout Container</h2>
 
@@ -10,7 +8,7 @@
     on the container's child elements:
   </p>
 
-  <PaperCard as |card|>
+<div class="layout-column layout-align-center-center">
     <div class="example example-1">
       {{! BEGIN-SNIPPET layout-children.example1 }}
       <div class="layout-row">
@@ -20,10 +18,12 @@
       </div>
       {{! END-SNIPPET }}
     </div>
-    <card.content>
-      <CodeSnippet @name="layout-children.example1.hbs" />
-    </card.content>
-  </PaperCard>
+</div>
+{{#let (get-code-snippet "layout-children.example1.hbs") as |snippet|}}
+  <CodeBlock @language="markup">
+{{snippet.source}}
+  </CodeBlock>
+{{/let}}
 
   <p>
     Add the <code>flex</code> class to a layout's child element and the element will flex (grow or shrink)
@@ -31,7 +31,7 @@
     with respect to its parent container and the other elements within the container.
   </p>
 
-  <PaperCard as |card|>
+<div class="layout-column layout-align-center-center">
     <div class="example example-2">
       {{! BEGIN-SNIPPET layout-children.example2 }}
       <div class="layout-row layout-wrap">
@@ -45,10 +45,12 @@
       </div>
       {{! END-SNIPPET }}
     </div>
-    <card.content>
-      <CodeSnippet @name="layout-children.example2.hbs" />
-    </card.content>
-  </PaperCard>
+</div>
+{{#let (get-code-snippet "layout-children.example2.hbs") as |snippet|}}
+  <CodeBlock @language="markup">
+{{snippet.source}}
+  </CodeBlock>
+{{/let}}
 
   <p>
     A layout child's <code>flex</code> class can be given an integer parameter from 0-100.
@@ -60,7 +62,7 @@
     <code>flex-50</code>, <code>flex-66</code>, <code>flex-75</code>, ... <code>flex-100</code>.
   </p>
 
-  <PaperCard as |card|>
+<div class="layout-column layout-align-center-center">
     <div class="example example-3">
       {{! BEGIN-SNIPPET layout-children.example3 }}
       <div class="layout-row">
@@ -73,10 +75,12 @@
       </div>
       {{! END-SNIPPET }}
     </div>
-    <card.content>
-      <CodeSnippet @name="layout-children.example3.hbs" />
-    </card.content>
-  </PaperCard>
+</div>
+{{#let (get-code-snippet "layout-children.example3.hbs") as |snippet|}}
+  <CodeBlock @language="markup">
+{{snippet.source}}
+  </CodeBlock>
+{{/let}}
 
   <h2>Additional Flex Parameters</h2>
 
@@ -85,37 +89,41 @@
     API easier to understand.
   </p>
 
-  <PaperCard as |card|>
-    <div class="example example-4">
-      {{! BEGIN-SNIPPET layout-children.example4 }}
-      <div class="layout-row layout-wrap">
-        <div class="flex-none">flex-none</div>
-        <div class="flex">flex</div>
-        <div class="flex-nogrow">flex-nogrow</div>
-        <div class="flex-grow">flex-grow</div>
-        <div class="flex-initial">flex-initial</div>
-        <div class="flex-auto">flex-auto</div>
-        <div class="flex-noshrink">flex-noshrink</div>
-      </div>
-      {{! END-SNIPPET }}
+<div class="layout-column layout-align-center-center">
+  <div class="example example-4">
+    {{! BEGIN-SNIPPET layout-children.example4 }}
+    <div class="layout-row layout-wrap">
+      <div class="flex-none">flex-none</div>
+      <div class="flex">flex</div>
+      <div class="flex-nogrow">flex-nogrow</div>
+      <div class="flex-grow">flex-grow</div>
+      <div class="flex-initial">flex-initial</div>
+      <div class="flex-auto">flex-auto</div>
+      <div class="flex-noshrink">flex-noshrink</div>
     </div>
-    <card.content>
-      <CodeSnippet @name="layout-children.example4.hbs" />
-
-      {{paper-api
-        (p-section
-          (p-row "flex" "Will grow and shrink as needed. Starts with a size of 0%. Same as `flex-0`.")
-          (p-row "flex-none" "Will not grow or shrink. Sized based on its `width` and `height` values.")
-          (p-row "flex-initial" "Will shrink as needed. Starts with a size based on its `width` and `height` values.")
-          (p-row "flex-auto" "Will shrink as needed. Starts with a size based on its `width` and `height` values.")
-          (p-row "flex-grow" "Will grow and shrink as needed. Starts with a size of 100%. Same as `flex-100`.")
-          (p-row "flex-nogrow" "Will shrink as needed, but won't grow. Starts with a size based on its `width` and `height` values.")
-          (p-row "flex-noshrink" "Will grow as needed, but won't shrink. Starts with a size based on its `width` and `height` values.")
-        )
-        header=(p-row "Class" "Effect")
-      }}
-    </card.content>
-  </PaperCard>
+    {{! END-SNIPPET }}
+  </div>
+</div>
+{{#let (get-code-snippet "layout-children.example4.hbs") as |snippet|}}
+  <CodeBlock @language="markup">
+{{snippet.source}}
+  </CodeBlock>
+{{/let}}
+
+<div class="layout-column layout-align-center-center">
+  {{paper-api
+    (p-section
+      (p-row "flex" "Will grow and shrink as needed. Starts with a size of 0%. Same as `flex-0`.")
+      (p-row "flex-none" "Will not grow or shrink. Sized based on its `width` and `height` values.")
+      (p-row "flex-initial" "Will shrink as needed. Starts with a size based on its `width` and `height` values.")
+      (p-row "flex-auto" "Will shrink as needed. Starts with a size based on its `width` and `height` values.")
+      (p-row "flex-grow" "Will grow and shrink as needed. Starts with a size of 100%. Same as `flex-100`.")
+      (p-row "flex-nogrow" "Will shrink as needed, but won't grow. Starts with a size based on its `width` and `height` values.")
+      (p-row "flex-noshrink" "Will grow as needed, but won't shrink. Starts with a size based on its `width` and `height` values.")
+    )
+    header=(p-row "Class" "Effect")
+  }}
+</div>
 
   <h2>Ordering HTML Elements</h2>
 
@@ -124,7 +132,7 @@
     Any integer parameter value from -20 to 20 is accepted.
   </p>
 
-  <PaperCard as |card|>
+<div class="layout-column layout-align-center-center">
     <div class="example example-5">
       {{! BEGIN-SNIPPET layout-children.example5 }}
       <div class="layout-row">
@@ -135,9 +143,12 @@
       </div>
       {{! END-SNIPPET }}
     </div>
-    <card.content>
-      <CodeSnippet @name="layout-children.example5.hbs" />
-    </card.content>
-  </PaperCard>
+</div>
+
+{{#let (get-code-snippet "layout-children.example5.hbs") as |snippet|}}
+  <CodeBlock @language="markup">
+{{snippet.source}}
+  </CodeBlock>
+{{/let}}
 
-</DocContent>
+</PaperContent>
diff --git a/tests/dummy/app/templates/layout/layout-containers.hbs b/tests/dummy/app/templates/layout/layout-containers.hbs
index 3ddd6d4f4..7639e1281 100644
--- a/tests/dummy/app/templates/layout/layout-containers.hbs
+++ b/tests/dummy/app/templates/layout/layout-containers.hbs
@@ -1,7 +1,7 @@
-<PageToolbar @pageTitle="Layout Containers" @isLayout={{true}} />
+<PaperContent @padding={{true}}>
+
+  <h1>Layout and Containers</h1>
 
-<DocContent @class="layout-docs containers">
-  <h2>Layout and Containers</h2>
   <p>
     Use the <code>layout</code> class on a container element to specify the layout direction for its
     children: horizontally in a row (<code>layout-row</code>) or vertically in a column (<code>layout-column</code>).
@@ -9,15 +9,7 @@
     without a parameter.
   </p>
 
-  {{paper-api
-    (p-section
-      (p-row "layout-row" "Items arranged horizontally. `max-height = 100%` and `max-width` is the width of the items in the container.")
-      (p-row "layout-column" "Items arranged vertically. `max-width = 100%` and `max-height` is the height of the items in the container.")
-    )
-    header=(p-row "Class" "Effect")
-  }}
-
-  <PaperCard as |card|>
+  <div class="layout-column layout-align-center-center">
     <div class="example example-1 layout-row">
       {{! BEGIN-SNIPPET layout-containers.example1 }}
       <div class="layout-row flex">
@@ -30,10 +22,23 @@
       </div>
       {{! END-SNIPPET }}
     </div>
-    <card.content>
-      <CodeSnippet @name="layout-containers.example1.hbs" />
-    </card.content>
-  </PaperCard>
+  </div>
+
+{{#let (get-code-snippet "layout-containers.example1.hbs") as |snippet|}}
+  <CodeBlock @language="markup">
+    {{snippet.source}}
+  </CodeBlock>
+{{/let}}
+
+  <div class="layout-column layout-align-center-center">
+    {{paper-api
+      (p-section
+        (p-row "layout-row" "Items arranged horizontally. `max-height = 100%` and `max-width` is the width of the items in the container.")
+        (p-row "layout-column" "Items arranged vertically. `max-width = 100%` and `max-height` is the height of the items in the container.")
+      )
+      header=(p-row "Class" "Effect")
+    }}
+  </div>
 
   <p>
     Note that <code>layout</code> only affects the flow direction for that container's immediate children.
@@ -50,30 +55,13 @@
     <code>layout</code> classes to set the layout direction for devices with view widths:
   </p>
 
-  {{paper-api
-    (p-section
-      (p-row "layout" "Sets the default layout direction unless overriden by another breakpoint.")
-      (p-row "layout-xs" "width < *600*px")
-      (p-row "layout-gt-xs" "width >= *600*px")
-      (p-row "layout-sm" "width *600*px <= width < *960*px")
-      (p-row "layout-gt-sm" "width >= *960*px")
-      (p-row "layout-md" "*960*px <= width < *1280*px")
-      (p-row "layout-gt-md" "width >= *1280*px")
-      (p-row "layout-lg" "*1280*px <= width < *1920*px")
-      (p-row "layout-gt-lg" "width >= *1920*px")
-      (p-row "layout-xl" "width >= *1920*px")
-    )
-    header=(p-row "Class" "Device width when breakpoint overrides default")
-    sort=false
-  }}
-
   <p>
     For the demo below, as you shrink your browser window width notice the flow direction
     changes to <code>column</code> for mobile devices (<code>xs</code>). And as you expand
     it will reset to <code>row</code> for <code>gt-sm</code> view sizes.
   </p>
 
-  <PaperCard as |card|>
+  <div class="layout-column layout-align-center-center">
     <div class="example example-2">
       {{! BEGIN-SNIPPET layout-containers.example2 }}
       <div class="layout-row layout-xs-column">
@@ -82,9 +70,31 @@
       </div>
       {{! END-SNIPPET }}
     </div>
-    <card.content>
-      <CodeSnippet @name="layout-containers.example2.hbs" />
-    </card.content>
-  </PaperCard>
+  </div>
+
+{{#let (get-code-snippet "layout-containers.example2.hbs") as |snippet|}}
+  <CodeBlock @language="markup">
+    {{snippet.source}}
+  </CodeBlock>
+{{/let}}
+
+  <div class="layout-column layout-align-center-center">
+    {{paper-api
+      (p-section
+        (p-row "layout" "Sets the default layout direction unless overriden by another breakpoint.")
+        (p-row "layout-xs" "width < *600*px")
+        (p-row "layout-gt-xs" "width >= *600*px")
+        (p-row "layout-sm" "width *600*px <= width < *960*px")
+        (p-row "layout-gt-sm" "width >= *960*px")
+        (p-row "layout-md" "*960*px <= width < *1280*px")
+        (p-row "layout-gt-md" "width >= *1280*px")
+        (p-row "layout-lg" "*1280*px <= width < *1920*px")
+        (p-row "layout-gt-lg" "width >= *1920*px")
+        (p-row "layout-xl" "width >= *1920*px")
+      )
+      header=(p-row "Class" "Device width when breakpoint overrides default")
+      sort=false
+    }}
+  </div>
 
-</DocContent>
+</PaperContent>
diff --git a/tests/dummy/app/templates/theme.hbs b/tests/dummy/app/templates/theme.hbs
index dcaf9fdef..c6c58a466 100644
--- a/tests/dummy/app/templates/theme.hbs
+++ b/tests/dummy/app/templates/theme.hbs
@@ -1,7 +1,5 @@
-<PageToolbar @pageTitle="Themes & Colors" @isDemo={{false}} />
-
 <PaperContent @class="md-padding">
-  <div class="doc-content">
+  <div class="doc-content doc-content--text-page">
 
     <p>
       Color is a big part of any application. Ember paper allows you to customize how your app
@@ -20,7 +18,7 @@
       To customize the default theme, you can override the sass variables for each intention:
     </p>
 
-    <CodeSnippet @name="theme.import.scss" />
+    <!-- <CodeSnippet @name="theme.import.scss" /> -->
 
     <p>
       As you can see, you can just specify a name string for the palette you want, if that palette
@@ -83,7 +81,7 @@
       Here is the definition of the "teal" palette, applied to the primary intention:
     </p>
 
-    <CodeSnippet @name="theme.custom-palette.scss" />
+    <!-- <CodeSnippet @name="theme.custom-palette.scss" /> -->
 
     <blockquote>
       You can find some material palette generators online. Example: <a href="http://mcg.mbitson.com/">http://mcg.mbitson.com/</a>.
@@ -111,7 +109,7 @@
       Here is an example of using these functions:
     </p>
 
-    <CodeSnippet @name="theme.color-function.scss" />
+    <!-- <CodeSnippet @name="theme.color-function.scss" /> -->
 
 
     <h3>Changing themes at runtime</h3>
@@ -156,7 +154,7 @@
 
     <p>Here is the code used for these actions:</p>
 
-    <CodeSnippet @name="theme.service.js" />
+    <!-- <CodeSnippet @name="theme.service.js" /> -->
 
     <h3>Browser support</h3>
 
@@ -173,7 +171,7 @@
       such fallback values:
     </p>
 
-    <CodeSnippet @name="theme.paper-var.scss" />
+    <!-- <CodeSnippet @name="theme.paper-var.scss" /> -->
 
     <h3>Generating palettes based on a color</h3>
 
diff --git a/tests/dummy/app/templates/typography.hbs b/tests/dummy/app/templates/typography.hbs
deleted file mode 100644
index 3068efa79..000000000
--- a/tests/dummy/app/templates/typography.hbs
+++ /dev/null
@@ -1,117 +0,0 @@
-<PageToolbar @pageTitle="Typography" @isDemo={{false}} />
-
-<PaperContent @class="md-padding">
-  <div class="doc-content">
-    <h3>Headings</h3>
-    <div class="preview-block">
-      <h1>&lt;h1&gt;</h1>
-      <h2>&lt;h2&gt;</h2>
-      <h3>&lt;h3&gt;</h3>
-      <h4>&lt;h4&gt;</h4>
-      <h5>&lt;h5&gt;</h5>
-      <h6>&lt;h6&gt;</h6>
-    </div>
-
-    <h3>Formatting</h3>
-    <div class="preview-block">
-      <p><u>&lt;u&gt;Underlined&lt;/u&gt;</u></p>
-
-      <p><b>&lt;b&gt;Bold&lt;/b&gt;</b></p>
-
-      <p><strong>&lt;strong&gt;Strong&lt;/strong&gt;</strong></p>
-
-      <p><i>&lt;italic&gt;Italic&lt;/italic&gt;</i></p>
-
-      <p><em>&lt;em&gt;Em&lt;/em&gt;</em></p>
-
-      <p><s>&lt;s&gt;Strikethrough&lt;/s&gt;</s></p>
-
-      <p><small>&lt;small&gt;Small&lt;/small&gt;</small></p>
-
-      <p><mark>&lt;mark&gt;Mark&lt;/mark&gt;</mark></p>
-    </div>
-
-    <h3>Subtitles</h3>
-    <div class="preview-block">
-      <h1>&lt;h1&gt; <small>Subtitle</small></h1>
-      <h2>&lt;h2&gt; <small>Subtitle</small></h2>
-      <h3>&lt;h3&gt; <small>Subtitle</small></h3>
-      <h4>&lt;h4&gt; <small>Subtitle</small></h4>
-      <h5>&lt;h5&gt; <small>Subtitle</small></h5>
-      <h6>&lt;h6&gt; <small>Subtitle</small></h6>
-    </div>
-
-    <h3>Description</h3>
-    <div class="preview-block">
-      <dl>
-        <dt>Description lists</dt>
-        <dd>A description list is perfect for defining terms.</dd>
-        <dt>Euismod</dt>
-        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
-        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
-        <dt>Malesuada porta</dt>
-        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
-      </dl>
-    </div>
-
-    <h3>Quotes</h3>
-    <div class="preview-block">
-      <blockquote>&lt;blockquote&gt;</blockquote>
-    </div>
-
-    <h2>Addresses</h2>
-
-    <address>
-      <strong>Googleplex</strong><br>
-      1600 Amphitheatre Pkwy<br>
-      Mountain View, CA 94043<br>
-      <abbr title="Phone">P:</abbr> (650) 253-0000
-    </address>
-
-    <h2>Code</h2>
-
-    <h3>Multi-line code blocks</h3>
-    <p>
-      Use &lt;pre&gt; for multi-line code blocks.
-      <CodeSnippet @name="typography.code-block.hbs" />
-    </p>
-
-    <h3>Inline code blocks</h3>
-    <p>Code blocks like <code>&lt;main&gt;</code> could be displayed inline.</p>
-
-    <h2>Tables</h2>
-
-    <h3>Basic table</h3>
-
-    <table>
-      <thead>
-        <tr>
-          <th>#</th>
-          <th>First Name</th>
-          <th>Last Name</th>
-          <th>Username</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>1</td>
-          <td>Larry</td>
-          <td>Page</td>
-          <td>+LarryPage</td>
-        </tr>
-        <tr>
-          <td>2</td>
-          <td>Sergey</td>
-          <td>Brin</td>
-          <td>+SergeyBrin</td>
-        </tr>
-        <tr>
-          <td>3</td>
-          <td>Eric</td>
-          <td>Schmidt</td>
-          <td>+EricSchmidt</td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-</PaperContent>
diff --git a/tests/dummy/config/environment.js b/tests/dummy/config/environment.js
index 1f4b7c3f3..bffd6545d 100644
--- a/tests/dummy/config/environment.js
+++ b/tests/dummy/config/environment.js
@@ -5,7 +5,7 @@ module.exports = function(environment) {
     modulePrefix: 'dummy',
     environment,
     rootURL: '/',
-    locationType: 'hash',
+    locationType: 'auto',
     EmberENV: {
       FEATURES: {
         // Here you can enable experimental features on an ember canary build
diff --git a/tests/dummy/config/optional-features.json b/tests/dummy/config/optional-features.json
index 21f1dc719..19805d621 100644
--- a/tests/dummy/config/optional-features.json
+++ b/tests/dummy/config/optional-features.json
@@ -1,3 +1,4 @@
 {
+  "application-template-wrapper": false,
   "jquery-integration": true
 }
diff --git a/tests/dummy/public/assets/ember-paper-logo-white.png b/tests/dummy/public/assets/ember-paper-logo-white.png
new file mode 100644
index 000000000..74aefd105
Binary files /dev/null and b/tests/dummy/public/assets/ember-paper-logo-white.png differ
diff --git a/tests/dummy/public/washedout.png b/tests/dummy/public/assets/washedout.png
similarity index 100%
rename from tests/dummy/public/washedout.png
rename to tests/dummy/public/assets/washedout.png
diff --git a/tests/dummy/public/ember-logo-original.png b/tests/dummy/public/ember-logo-original.png
deleted file mode 100644
index 70ca1e830..000000000
Binary files a/tests/dummy/public/ember-logo-original.png and /dev/null differ
diff --git a/tests/dummy/public/ember-logo-white.png b/tests/dummy/public/ember-logo-white.png
deleted file mode 100644
index a35c65db1..000000000
Binary files a/tests/dummy/public/ember-logo-white.png and /dev/null differ
diff --git a/tests/dummy/public/ember-logo.png b/tests/dummy/public/ember-logo.png
deleted file mode 100644
index 0ee86b49c..000000000
Binary files a/tests/dummy/public/ember-logo.png and /dev/null differ
diff --git a/tests/dummy/public/tomster.png b/tests/dummy/public/tomster.png
deleted file mode 100644
index 4fb0a81e3..000000000
Binary files a/tests/dummy/public/tomster.png and /dev/null differ
diff --git a/tests/dummy/snippets/install.sh b/tests/dummy/snippets/install.sh
deleted file mode 100644
index 41b81a5a9..000000000
--- a/tests/dummy/snippets/install.sh
+++ /dev/null
@@ -1 +0,0 @@
-$ ember install ember-paper
diff --git a/tests/dummy/snippets/typography.code-block.hbs b/tests/dummy/snippets/typography.code-block.hbs
deleted file mode 100644
index 183c69df2..000000000
--- a/tests/dummy/snippets/typography.code-block.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-<p>This is the first line of code</p>
-<p>This is the second line of code</p>
\ No newline at end of file