diff --git a/tests/dummy/app/controllers/catalog.js b/tests/dummy/app/controllers/catalog.js
new file mode 100644
index 000000000..235bad15e
--- /dev/null
+++ b/tests/dummy/app/controllers/catalog.js
@@ -0,0 +1,602 @@
+import Controller from '@ember/controller';
+import { A } from '@ember/array';
+import { action } from '@ember/object';
+import { later, cancel } from '@ember/runloop';
+import { inject as service } from '@ember/service';
+import { faker } from '@faker-js/faker';
+import { tracked } from '@glimmer/tracking';
+import { buildGridModel } from '../utils/grid-list';
+
+export default class CatalogController extends Controller {
+  // Autocomplete
+  countries = 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' },
+    { name: 'Angola', code: 'AO' },
+    { name: 'Anguilla', code: 'AI' },
+    { name: 'Antarctica', code: 'AQ' },
+    { name: 'Antigua and Barbuda', code: 'AG' },
+    { name: 'Argentina', code: 'AR' },
+    { name: 'Armenia', code: 'AM' },
+    { name: 'Aruba', code: 'AW' },
+    { name: 'Australia', code: 'AU' },
+    { name: 'Austria', code: 'AT' },
+    { name: 'Azerbaijan', code: 'AZ' },
+    { name: 'Bahamas', code: 'BS' },
+    { name: 'Bahrain', code: 'BH' },
+    { name: 'Bangladesh', code: 'BD' },
+    { name: 'Barbados', code: 'BB' },
+    { name: 'Belarus', code: 'BY' },
+    { name: 'Belgium', code: 'BE' },
+    { name: 'Belize', code: 'BZ' },
+    { name: 'Benin', code: 'BJ' },
+    { name: 'Bermuda', code: 'BM' },
+    { name: 'Bhutan', code: 'BT' },
+    { name: 'Bolivia', code: 'BO' },
+    { name: 'Bosnia and Herzegovina', code: 'BA' },
+    { name: 'Botswana', code: 'BW' },
+    { name: 'Bouvet Island', code: 'BV' },
+    { name: 'Brazil', code: 'BR' },
+    { name: 'British Indian Ocean Territory', code: 'IO' },
+    { name: 'Brunei Darussalam', code: 'BN' },
+    { name: 'Bulgaria', code: 'BG' },
+    { name: 'Burkina Faso', code: 'BF' },
+    { name: 'Burundi', code: 'BI' },
+    { name: 'Cambodia', code: 'KH' },
+    { name: 'Cameroon', code: 'CM' },
+    { name: 'Canada', code: 'CA' },
+    { name: 'Cape Verde', code: 'CV' },
+    { name: 'Cayman Islands', code: 'KY' },
+    { name: 'Central African Republic', code: 'CF' },
+    { name: 'Chad', code: 'TD' },
+    { name: 'Chile', code: 'CL' },
+    { name: 'China', code: 'CN' },
+    { name: 'Christmas Island', code: 'CX' },
+    { name: 'Cocos (Keeling) Islands', code: 'CC' },
+    { name: 'Colombia', code: 'CO' },
+    { name: 'Comoros', code: 'KM' },
+    { name: 'Congo', code: 'CG' },
+    { name: 'Congo, The Democratic Republic of the', code: 'CD' },
+    { name: 'Cook Islands', code: 'CK' },
+    { name: 'Costa Rica', code: 'CR' },
+    { name: "Cote D'Ivoire", code: 'CI' },
+    { name: 'Croatia', code: 'HR' },
+    { name: 'Cuba', code: 'CU' },
+    { name: 'Cyprus', code: 'CY' },
+    { name: 'Czech Republic', code: 'CZ' },
+    { name: 'Denmark', code: 'DK' },
+    { name: 'Djibouti', code: 'DJ' },
+    { name: 'Dominica', code: 'DM' },
+    { name: 'Dominican Republic', code: 'DO' },
+    { name: 'Ecuador', code: 'EC' },
+    { name: 'Egypt', code: 'EG' },
+    { name: 'El Salvador', code: 'SV' },
+    { name: 'Equatorial Guinea', code: 'GQ' },
+    { name: 'Eritrea', code: 'ER' },
+    { name: 'Estonia', code: 'EE' },
+    { name: 'Ethiopia', code: 'ET' },
+    { name: 'Falkland Islands (Malvinas)', code: 'FK' },
+    { name: 'Faroe Islands', code: 'FO' },
+    { name: 'Fiji', code: 'FJ' },
+    { name: 'Finland', code: 'FI' },
+    { name: 'France', code: 'FR' },
+    { name: 'French Guiana', code: 'GF' },
+    { name: 'French Polynesia', code: 'PF' },
+    { name: 'French Southern Territories', code: 'TF' },
+    { name: 'Gabon', code: 'GA' },
+    { name: 'Gambia', code: 'GM' },
+    { name: 'Georgia', code: 'GE' },
+    { name: 'Germany', code: 'DE' },
+    { name: 'Ghana', code: 'GH' },
+    { name: 'Gibraltar', code: 'GI' },
+    { name: 'Greece', code: 'GR' },
+    { name: 'Greenland', code: 'GL' },
+    { name: 'Grenada', code: 'GD' },
+    { name: 'Guadeloupe', code: 'GP' },
+    { name: 'Guam', code: 'GU' },
+    { name: 'Guatemala', code: 'GT' },
+    { name: 'Guernsey', code: 'GG' },
+    { name: 'Guinea', code: 'GN' },
+    { name: 'Guinea-Bissau', code: 'GW' },
+    { name: 'Guyana', code: 'GY' },
+    { name: 'Haiti', code: 'HT' },
+    { name: 'Heard Island and Mcdonald Islands', code: 'HM' },
+    { name: 'Holy See (Vatican City State)', code: 'VA' },
+    { name: 'Honduras', code: 'HN' },
+    { name: 'Hong Kong', code: 'HK' },
+    { name: 'Hungary', code: 'HU' },
+    { name: 'Iceland', code: 'IS' },
+    { name: 'India', code: 'IN' },
+    { name: 'Indonesia', code: 'ID' },
+    { name: 'Iran, Islamic Republic Of', code: 'IR' },
+    { name: 'Iraq', code: 'IQ' },
+    { name: 'Ireland', code: 'IE' },
+    { name: 'Isle of Man', code: 'IM' },
+    { name: 'Israel', code: 'IL' },
+    { name: 'Italy', code: 'IT' },
+    { name: 'Jamaica', code: 'JM' },
+    { name: 'Japan', code: 'JP' },
+    { name: 'Jersey', code: 'JE' },
+    { name: 'Jordan', code: 'JO' },
+    { name: 'Kazakhstan', code: 'KZ' },
+    { name: 'Kenya', code: 'KE' },
+    { name: 'Kiribati', code: 'KI' },
+    { name: "Korea, Democratic People'S Republic of", code: 'KP' },
+    { name: 'Korea, Republic of', code: 'KR' },
+    { name: 'Kuwait', code: 'KW' },
+    { name: 'Kyrgyzstan', code: 'KG' },
+    { name: "Lao People'S Democratic Republic", code: 'LA' },
+    { name: 'Latvia', code: 'LV' },
+    { name: 'Lebanon', code: 'LB' },
+    { name: 'Lesotho', code: 'LS' },
+    { name: 'Liberia', code: 'LR' },
+    { name: 'Libyan Arab Jamahiriya', code: 'LY' },
+    { name: 'Liechtenstein', code: 'LI' },
+    { name: 'Lithuania', code: 'LT' },
+    { name: 'Luxembourg', code: 'LU' },
+    { name: 'Macao', code: 'MO' },
+    { name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK' },
+    { name: 'Madagascar', code: 'MG' },
+    { name: 'Malawi', code: 'MW' },
+    { name: 'Malaysia', code: 'MY' },
+    { name: 'Maldives', code: 'MV' },
+    { name: 'Mali', code: 'ML' },
+    { name: 'Malta', code: 'MT' },
+    { name: 'Marshall Islands', code: 'MH' },
+    { name: 'Martinique', code: 'MQ' },
+    { name: 'Mauritania', code: 'MR' },
+    { name: 'Mauritius', code: 'MU' },
+    { name: 'Mayotte', code: 'YT' },
+    { name: 'Mexico', code: 'MX' },
+    { name: 'Micronesia, Federated States of', code: 'FM' },
+    { name: 'Moldova, Republic of', code: 'MD' },
+    { name: 'Monaco', code: 'MC' },
+    { name: 'Mongolia', code: 'MN' },
+    { name: 'Montserrat', code: 'MS' },
+    { name: 'Morocco', code: 'MA' },
+    { name: 'Mozambique', code: 'MZ' },
+    { name: 'Myanmar', code: 'MM' },
+    { name: 'Namibia', code: 'NA' },
+    { name: 'Nauru', code: 'NR' },
+    { name: 'Nepal', code: 'NP' },
+    { name: 'Netherlands', code: 'NL' },
+    { name: 'Netherlands Antilles', code: 'AN' },
+    { name: 'New Caledonia', code: 'NC' },
+    { name: 'New Zealand', code: 'NZ' },
+    { name: 'Nicaragua', code: 'NI' },
+    { name: 'Niger', code: 'NE' },
+    { name: 'Nigeria', code: 'NG' },
+    { name: 'Niue', code: 'NU' },
+    { name: 'Norfolk Island', code: 'NF' },
+    { name: 'Northern Mariana Islands', code: 'MP' },
+    { name: 'Norway', code: 'NO' },
+    { name: 'Oman', code: 'OM' },
+    { name: 'Pakistan', code: 'PK' },
+    { name: 'Palau', code: 'PW' },
+    { name: 'Palestinian Territory, Occupied', code: 'PS' },
+    { name: 'Panama', code: 'PA' },
+    { name: 'Papua New Guinea', code: 'PG' },
+    { name: 'Paraguay', code: 'PY' },
+    { name: 'Peru', code: 'PE' },
+    { name: 'Philippines', code: 'PH' },
+    { name: 'Pitcairn', code: 'PN' },
+    { name: 'Poland', code: 'PL' },
+    { name: 'Portugal', code: 'PT' },
+    { name: 'Puerto Rico', code: 'PR' },
+    { name: 'Qatar', code: 'QA' },
+    { name: 'Reunion', code: 'RE' },
+    { name: 'Romania', code: 'RO' },
+    { name: 'Russian Federation', code: 'RU' },
+    { name: 'RWANDA', code: 'RW' },
+    { name: 'Saint Helena', code: 'SH' },
+    { name: 'Saint Kitts and Nevis', code: 'KN' },
+    { name: 'Saint Lucia', code: 'LC' },
+    { name: 'Saint Pierre and Miquelon', code: 'PM' },
+    { name: 'Saint Vincent and the Grenadines', code: 'VC' },
+    { name: 'Samoa', code: 'WS' },
+    { name: 'San Marino', code: 'SM' },
+    { name: 'Sao Tome and Principe', code: 'ST' },
+    { name: 'Saudi Arabia', code: 'SA' },
+    { name: 'Senegal', code: 'SN' },
+    { name: 'Serbia and Montenegro', code: 'CS' },
+    { name: 'Seychelles', code: 'SC' },
+    { name: 'Sierra Leone', code: 'SL' },
+    { name: 'Singapore', code: 'SG' },
+    { name: 'Slovakia', code: 'SK' },
+    { name: 'Slovenia', code: 'SI' },
+    { name: 'Solomon Islands', code: 'SB' },
+    { name: 'Somalia', code: 'SO' },
+    { name: 'South Africa', code: 'ZA' },
+    { name: 'South Georgia and the South Sandwich Islands', code: 'GS' },
+    { name: 'Spain', code: 'ES' },
+    { name: 'Sri Lanka', code: 'LK' },
+    { name: 'Sudan', code: 'SD' },
+    { name: 'Suriname', code: 'SR' },
+    { name: 'Svalbard and Jan Mayen', code: 'SJ' },
+    { name: 'Swaziland', code: 'SZ' },
+    { name: 'Sweden', code: 'SE' },
+    { name: 'Switzerland', code: 'CH' },
+    { name: 'Syrian Arab Republic', code: 'SY' },
+    { name: 'Taiwan, Province of China', code: 'TW' },
+    { name: 'Tajikistan', code: 'TJ' },
+    { name: 'Tanzania, United Republic of', code: 'TZ' },
+    { name: 'Thailand', code: 'TH' },
+    { name: 'Timor-Leste', code: 'TL' },
+    { name: 'Togo', code: 'TG' },
+    { name: 'Tokelau', code: 'TK' },
+    { name: 'Tonga', code: 'TO' },
+    { name: 'Trinidad and Tobago', code: 'TT' },
+    { name: 'Tunisia', code: 'TN' },
+    { name: 'Turkey', code: 'TR' },
+    { name: 'Turkmenistan', code: 'TM' },
+    { name: 'Turks and Caicos Islands', code: 'TC' },
+    { name: 'Tuvalu', code: 'TV' },
+    { name: 'Uganda', code: 'UG' },
+    { name: 'Ukraine', code: 'UA' },
+    { name: 'United Arab Emirates', code: 'AE' },
+    { name: 'United Kingdom', code: 'GB' },
+    { name: 'United States', code: 'US' },
+    { name: 'United States Minor Outlying Islands', code: 'UM' },
+    { name: 'Uruguay', code: 'UY' },
+    { name: 'Uzbekistan', code: 'UZ' },
+    { name: 'Vanuatu', code: 'VU' },
+    { name: 'Venezuela', code: 'VE' },
+    { name: 'Viet Nam', code: 'VN' },
+    { name: 'Virgin Islands, British', code: 'VG' },
+    { name: 'Virgin Islands, U.S.', code: 'VI' },
+    { name: 'Wallis and Futuna', code: 'WF' },
+    { name: 'Western Sahara', code: 'EH' },
+    { name: 'Yemen', code: 'YE' },
+    { name: 'Zambia', code: 'ZM' },
+    { name: 'Zimbabwe', code: 'ZW' },
+  ]);
+  selectedCountry = { name: 'Ireland', code: 'IE' };
+  selectedCountry2 = { name: 'New Zealand', code: 'NZ' };
+
+  @action
+  raisedButton() {
+    alert('You pressed a raised button.');
+  }
+
+  @action
+  flatButton() {
+    alert('You pressed a flat button.');
+  }
+
+  @action
+  targetButton() {
+    alert('You pressed a target button.');
+  }
+
+  // Checkbox
+  checkboxValue1 = true;
+  checkboxValue2 = false;
+  checkboxValue3 = false;
+  checkboxValue4 = false;
+  checkboxValue5 = false;
+  @tracked checkboxValue6 = false;
+  @tracked checkboxValue7 = undefined;
+  get checkboxIsIndeterminate() {
+    return this.checkboxValue7 === undefined;
+  }
+  @action checkboxToggleCheckValue6() {
+    this.checkboxValue6 = !this.checkboxValue6;
+  }
+
+  // Chips
+  @tracked chipsFruitNames = A(['Apple', 'Banana', 'Orange']);
+  @action chipsRemoveItem(item) {
+    this.chipsFruitNames.removeObject(item);
+  }
+  @action chipsAddItem(item) {
+    this.chipsFruitNames.pushObject(item);
+  }
+
+  @tracked chipsCustomFruitNames = A(['Apple', 'Banana', 'Orange']);
+  @action chipsRemoveCustomItem(item) {
+    this.chipsCustomFruitNames.removeObject(item);
+  }
+  @action chipsAddCustomItem(item) {
+    this.chipsCustomFruitNames.pushObject(item);
+  }
+
+  @tracked chipsVegeNames = A(['Broccoli']);
+  @tracked chipsAllVegeNames = A([
+    'Broccoli',
+    'Cabbage',
+    'Carrot',
+    'Lettuce',
+    'Spinach',
+  ]);
+  get chipsRemainingVegeNames() {
+    return this.chipsAllVegeNames.filter((source) => {
+      return !this.chipsVegeNames.any(function (myVegeName) {
+        return source === myVegeName;
+      });
+    });
+  }
+
+  @tracked chipsVegetables = A([
+    {
+      name: 'Broccoli',
+      family: 'Brassica',
+    },
+  ]);
+  @action chipsRemoveVegetable(item) {
+    this.chipsVegetables.removeObject(item);
+  }
+  @action chipsAddVegetable(item) {
+    this.chipsVegetables.pushObject(item);
+  }
+
+  @tracked chipsAllVegetables = A([
+    {
+      name: 'Broccoli',
+      family: 'Brassica',
+    },
+    {
+      name: 'Cabbage',
+      family: 'Brassica',
+    },
+    {
+      name: 'Carrot',
+      family: 'Umbelliferous',
+    },
+    {
+      name: 'Lettuce',
+      family: 'Composite',
+    },
+    {
+      name: 'Spinach',
+      family: 'Goosefoot',
+    },
+  ]);
+  get chipsRemainingVegetables() {
+    return this.chipsAllVegetables.filter((source) => {
+      return !this.chipsVegetables.any(function (myVegetable) {
+        return source.name === myVegetable.name;
+      });
+    });
+  }
+  @action chipsRemoveVegeName(item) {
+    this.chipsVegeNames.removeObject(item);
+  }
+  @action chipsAddVegeName(item) {
+    this.chipsVegeNames.pushObject(item);
+  }
+
+  // Contact Chips
+  contactChipsNumOfContacts = 10;
+  get contactChipsContacts() {
+    let contacts = [];
+    let numOfContacts = this.contactChipsNumOfContacts;
+
+    for (let i = 0; i < numOfContacts; i++) {
+      contacts.push({
+        name: faker.person.fullName(),
+        email: faker.internet.email(),
+        image: faker.image.avatar(),
+      });
+    }
+
+    return contacts;
+  }
+  get contactChipsSelectedContacts() {
+    return this.contactChipsContacts.filter((c, index) => {
+      return index % 2 === 0;
+    });
+  }
+  get contactChipsRemainingContacts() {
+    return this.contactChipsContacts.filter((c) => {
+      return this.contactChipsSelectedContacts.indexOf(c) === -1;
+    });
+  }
+  @action contactChipsAddContact(item) {
+    this.contactChipsSelectedContacts.pushObject(item);
+  }
+  @action contactChipsRemoveContact(item) {
+    this.contactChipsSelectedContacts.removeObject(item);
+  }
+
+  // Dialog
+  @tracked dialogShowDialog = true;
+  @action dialogToggleOpen() {
+    this.dialogShowDialog = !this.dialogShowDialog;
+  }
+
+  // Grid List
+  get gridListTiles() {
+    let tiles = buildGridModel({
+      title: 'Svg-',
+      background: '',
+    });
+
+    return A(tiles);
+  }
+
+  // List
+  listNumOfRows = 3;
+  get listData() {
+    let contacts = [];
+    let numOfRows = this.listNumOfRows;
+
+    for (let i = 0; i < numOfRows; i++) {
+      contacts.push({
+        name: faker.person.fullName(),
+        email: faker.internet.email(),
+        img: faker.image.dataUri(),
+      });
+    }
+
+    return contacts;
+  }
+  listPhoneNumbers = Object.freeze([
+    {
+      number: '(555) 251-1234',
+      type: 'Home',
+    },
+    {
+      number: '(555) 786-9841',
+      type: 'Mobile',
+    },
+    {
+      number: '(555) 314-1592',
+      type: 'Office',
+    },
+  ]);
+  listToppings = Object.freeze([
+    {
+      name: 'Pepperoni',
+      enabled: false,
+    },
+    {
+      name: 'Sausage',
+      enabled: false,
+    },
+    {
+      name: 'Black Olives',
+      enabled: true,
+    },
+    {
+      name: 'Green Peppers',
+      enabled: false,
+    },
+  ]);
+  listMessageData = Object.freeze([
+    {
+      message: 'Message A',
+    },
+    {
+      message: 'Message B',
+    },
+    {
+      message: 'Message C',
+    },
+  ]);
+  @action listTransitionTo(value) {
+    alert(`Imagine you transition to "${value}" here.`);
+  }
+  @action listTransitionToMenu() {
+    alert(`Imagine you transition to a menu here.`);
+  }
+  @action listSecondaryMessageClick() {
+    alert('Secondary actions can be used for one click actions.');
+  }
+
+  // Menu
+  menuOptions = A([1, 2, 3, 4, 5]);
+  menuItems = A([
+    {
+      icon: 'access_alarms',
+      title: 'Alarm',
+      isFirst: true,
+    },
+    {
+      icon: 'airplay',
+      title: 'Airplay',
+    },
+
+    {
+      icon: 'airplanemode_active',
+      title: 'Airplane mode',
+    },
+  ]);
+  @action menuOpenSomething() {
+    alert('Some action handler.');
+  }
+
+  // Progress
+  @tracked progressDeterminateValue = 0;
+  @tracked progressDeterminateValue2 = 0;
+  @tracked progressTimer = null;
+  @tracked progressTimer2 = null;
+  @action progressStart() {
+    this.progressDeterminateValue = 30;
+    this.progressDeterminateValue2 = 30;
+    this.progressSetupTimer();
+    this.progressSetupTimer2();
+  }
+  progressSetupTimer() {
+    this.progressTimer = later(
+      this,
+      function () {
+        this.progressDeterminateValue += 1;
+        this.progressDeterminateValue2 += 1.5;
+        if (this.progressDeterminateValue > 100) {
+          this.progressDeterminateValue = 30;
+          this.progressDeterminateValue2 = 30;
+        }
+
+        this.progressSetupTimer();
+      },
+      100
+    );
+  }
+  progressSetupTimer2() {
+    this.progressTimer2 = later(
+      this,
+      function () {
+        this.mode = this.mode === 'query' ? 'determinate' : 'query';
+        this.determinateValue = 30;
+        this.determinateValue2 = 30;
+        later(this, this.progressSetupTimer2);
+      },
+      7200
+    );
+  }
+  @action progressStop() {
+    cancel(this.progressTimer);
+    cancel(this.progressTimer2);
+  }
+
+  // Select
+  @tracked selectSelectedState = this.selectStates.objectAt(4);
+  get selectStates() {
+    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 }))
+    );
+  }
+
+  // Sidenav
+  @tracked sidenavRightSideBarOpen = true;
+
+  // Slider
+  @tracked sliderColor = {
+    red: 55,
+    green: 111,
+    blue: 222,
+  };
+  @tracked sliderDisabled1 = 22;
+  @tracked sliderRating1 = 3;
+  @tracked sliderRating2 = 2;
+  @tracked sliderRating3 = 4;
+
+  // Speed Dial
+  @tracked speedDialOpen = true;
+
+  // Switch
+  @tracked switchProp1 = true;
+  @tracked switchProp2 = false;
+  @tracked switchProp3 = false;
+  @tracked switchProp4 = false;
+  @tracked switchProp5 = false;
+  @action switchToggle(which, newValue) {
+    this[`switchProp${which}`] = newValue;
+  }
+
+  // Tabs
+  tabsSelectedTab = 0;
+  @service router;
+  get tabsCurrentRouteName() {
+    return this.router.currentRouteName;
+  }
+
+  // Toast
+  toastDuration = 60000;
+}
diff --git a/tests/dummy/app/controllers/demo/chips.js b/tests/dummy/app/controllers/demo/chips.js
index 579772be0..1b47be8ef 100644
--- a/tests/dummy/app/controllers/demo/chips.js
+++ b/tests/dummy/app/controllers/demo/chips.js
@@ -20,7 +20,7 @@ export default Controller.extend({
       contacts.push({
         name: faker.person.fullName(),
         email: faker.internet.email(),
-        image: faker.internet.avatar()
+        image: faker.image.avatar(),
       });
     }
 
@@ -48,7 +48,7 @@ export default Controller.extend({
       contacts.push({
         shortName: `${firstName} ${lastName[0]}`,
         emailAddress: `${firstName.toLowerCase()}.${lastName[0].toLowerCase()}@example.com`,
-        profileImage: faker.internet.avatar()
+        profileImage: faker.image.avatar(),
       });
     }
 
diff --git a/tests/dummy/app/controllers/demo/grid-list.js b/tests/dummy/app/controllers/demo/grid-list.js
index cea66a2c6..048bf8c7c 100644
--- a/tests/dummy/app/controllers/demo/grid-list.js
+++ b/tests/dummy/app/controllers/demo/grid-list.js
@@ -3,79 +3,7 @@ import Controller from '@ember/controller';
 import { later } from '@ember/runloop';
 import { A } from '@ember/array';
 import EObject, { computed } from '@ember/object';
-import { assign } from '@ember/polyfills';
-
-const COLORS = Object.freeze(['#ffebee', '#ffcdd2', '#ef9a9a', '#e57373', '#ef5350', '#f44336', '#e53935', '#d32f2f', '#c62828', '#b71c1c', '#ff8a80', '#ff5252', '#ff1744', '#d50000', '#f8bbd0', '#f48fb1', '#f06292', '#ec407a', '#e91e63', '#d81b60', '#c2185b', '#ad1457', '#880e4f', '#ff80ab', '#ff4081', '#f50057', '#c51162', '#e1bee7', '#ce93d8', '#ba68c8', '#ab47bc', '#9c27b0', '#8e24aa', '#7b1fa2', '#4a148c', '#ea80fc', '#e040fb', '#d500f9', '#aa00ff', '#ede7f6', '#d1c4e9', '#b39ddb', '#9575cd', '#7e57c2', '#673ab7', '#5e35b1', '#4527a0', '#311b92', '#b388ff', '#7c4dff', '#651fff', '#6200ea', '#c5cae9', '#9fa8da', '#7986cb', '#5c6bc0', '#3f51b5', '#3949ab', '#303f9f', '#283593', '#1a237e', '#8c9eff', '#536dfe', '#3d5afe', '#304ffe', '#e3f2fd', '#bbdefb', '#90caf9', '#64b5f6', '#42a5f5', '#2196f3', '#1e88e5', '#1976d2', '#1565c0', '#0d47a1', '#82b1ff', '#448aff', '#2979ff', '#2962ff', '#b3e5fc', '#81d4fa', '#4fc3f7', '#29b6f6', '#03a9f4', '#039be5', '#0288d1', '#0277bd', '#01579b', '#80d8ff', '#40c4ff', '#00b0ff', '#0091ea', '#e0f7fa', '#b2ebf2', '#80deea', '#4dd0e1', '#26c6da', '#00bcd4', '#00acc1', '#0097a7', '#00838f', '#006064', '#84ffff', '#18ffff', '#00e5ff', '#00b8d4', '#e0f2f1', '#b2dfdb', '#80cbc4', '#4db6ac', '#26a69a', '#009688', '#00897b', '#00796b', '#00695c', '#a7ffeb', '#64ffda', '#1de9b6', '#00bfa5', '#e8f5e9', '#c8e6c9', '#a5d6a7', '#81c784', '#66bb6a', '#4caf50', '#43a047', '#388e3c', '#2e7d32', '#1b5e20', '#b9f6ca', '#69f0ae', '#00e676', '#00c853', '#f1f8e9', '#dcedc8', '#c5e1a5', '#aed581', '#9ccc65', '#8bc34a', '#7cb342', '#689f38', '#558b2f', '#33691e', '#ccff90', '#b2ff59', '#76ff03', '#64dd17', '#f9fbe7', '#f0f4c3', '#e6ee9c', '#dce775', '#d4e157', '#cddc39', '#c0ca33', '#afb42b', '#9e9d24', '#827717', '#f4ff81', '#eeff41', '#c6ff00', '#aeea00', '#fffde7', '#fff9c4', '#fff59d', '#fff176', '#ffee58', '#ffeb3b', '#fdd835', '#fbc02d', '#f9a825', '#f57f17', '#ffff8d', '#ffff00', '#ffea00', '#ffd600', '#fff8e1', '#ffecb3', '#ffe082', '#ffd54f', '#ffca28', '#ffc107', '#ffb300', '#ffa000', '#ff8f00', '#ff6f00', '#ffe57f', '#ffd740', '#ffc400', '#ffab00', '#fff3e0', '#ffe0b2', '#ffcc80', '#ffb74d', '#ffa726', '#ff9800', '#fb8c00', '#f57c00', '#ef6c00', '#e65100', '#ffd180', '#ffab40', '#ff9100', '#ff6d00', '#fbe9e7', '#ffccbc', '#ffab91', '#ff8a65', '#ff7043', '#ff5722', '#f4511e', '#e64a19', '#d84315', '#bf360c', '#ff9e80', '#ff6e40', '#ff3d00', '#dd2c00', '#d7ccc8', '#bcaaa4', '#795548', '#d7ccc8', '#bcaaa4', '#8d6e63', '#eceff1', '#cfd8dc', '#b0bec5', '#90a4ae', '#78909c', '#607d8b', '#546e7a', '#cfd8dc', '#b0bec5', '#78909c']);
-
-function buildGridModel(tileTmpl) {
-  let results = [];
-
-  for (let j = 0; j < 11; j++) {
-
-    let it = assign({}, tileTmpl);
-    it.icon = it.icon + (j + 1);
-    it.title = it.title + (j + 1);
-    it.span = { row: 1, col: 1 };
-
-    switch (j + 1) {
-      case 1:
-        it.background = 'red';
-        it.span.row = it.span.col = 2;
-        break;
-      case 2:
-        it.background = 'green';
-        break;
-      case 3:
-        it.background = 'darkBlue';
-        break;
-      case 4:
-        it.background = 'blue';
-        it.span.col = 2;
-        break;
-      case 5:
-        it.background = 'yellow';
-        it.span.row = it.span.col = 2;
-        break;
-      case 6:
-        it.background = 'pink';
-        break;
-      case 7:
-        it.background = 'darkBlue';
-        break;
-      case 8:
-        it.background = 'purple';
-        break;
-      case 9:
-        it.background = 'deepBlue';
-        break;
-      case 10:
-        it.background = 'lightPurple';
-        break;
-      case 11:
-        it.background = 'yellow';
-        break;
-    }
-
-    results.push(it);
-  }
-  return results;
-}
-
-function randomColor() {
-  let color = COLORS[Math.floor(Math.random() * COLORS.length)];
-  return color.replace('#', 'bg-');
-}
-
-function randomSpan() {
-  let r = Math.random();
-  if (r < 0.8) {
-    return 'gt-sm-1';
-  } else if (r < 0.9) {
-    return 'gt-sm-2';
-  } else {
-    return 'gt-sm-3';
-  }
-}
+import { buildGridModel, randomColor, randomSpan } from '../../utils/grid-list';
 
 export default Controller.extend({
 
diff --git a/tests/dummy/app/router.js b/tests/dummy/app/router.js
index 529c99272..219f9def9 100644
--- a/tests/dummy/app/router.js
+++ b/tests/dummy/app/router.js
@@ -1,4 +1,3 @@
-/* eslint-disable prettier/prettier */
 import EmberRouter from '@ember/routing/router';
 import config from 'dummy/config/environment';
 
@@ -7,15 +6,18 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function() {
+Router.map(function () {
   this.route('introduction');
+  this.route('catalog', function () {
+    this.route('nested-route');
+  });
   this.route('forms');
   this.route('typography');
   this.route('theme');
   this.route('cookbook');
   this.route('addons');
 
-  this.route('demo', { path: 'components' }, function() {
+  this.route('demo', { path: 'components' }, function () {
     this.route('autocomplete');
     this.route('button');
     this.route('card');
@@ -28,7 +30,7 @@ Router.map(function() {
     this.route('input');
     this.route('list');
     this.route('menu');
-    this.route('tabs', function() {
+    this.route('tabs', function () {
       this.route('nested-route');
     });
     this.route('progress-circular');
@@ -44,7 +46,7 @@ Router.map(function() {
     this.route('tooltip');
   });
 
-  this.route('layout', function() {
+  this.route('layout', function () {
     this.route('introduction');
     this.route('layout-containers');
     this.route('layout-children');
diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss
index 64b50ec70..660e1a751 100644
--- a/tests/dummy/app/styles/app.scss
+++ b/tests/dummy/app/styles/app.scss
@@ -3,6 +3,7 @@ $warn: 'amber';
 $accent: 'pink';
 
 @import 'ember-paper';
+@import 'catalog';
 @import 'demo';
 
 /**
diff --git a/tests/dummy/app/styles/catalog.scss b/tests/dummy/app/styles/catalog.scss
new file mode 100644
index 000000000..1b7f48a9f
--- /dev/null
+++ b/tests/dummy/app/styles/catalog.scss
@@ -0,0 +1,11 @@
+.dialog-catalog {
+  min-height: 350px;
+}
+
+.toast-catalog {
+  min-height: 150px;
+
+  &--override-position {
+    position: relative !important;
+  }
+}
diff --git a/tests/dummy/app/templates/catalog.hbs b/tests/dummy/app/templates/catalog.hbs
new file mode 100644
index 000000000..2b603fe04
--- /dev/null
+++ b/tests/dummy/app/templates/catalog.hbs
@@ -0,0 +1,1987 @@
+<DocContent>
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Autocomplete</h2>
+    </card.title>
+    <card.content>
+      <p>
+        <PaperAutocomplete
+          @disabled={{true}}
+          @labelPath='name'
+          @noMatchesMessage="Oops this country doesn't exist. Create a new country?"
+          @onSelectionChange={{fn (mut this.selectedCountry)}}
+          @options={{this.countries}}
+          @placeholder='Select a Country...'
+          @searchField='name'
+          @searchText='Teehee'
+        />
+      </p>
+
+      <p>
+        <PaperAutocomplete
+          @disabled={{false}}
+          @labelPath='name'
+          @noMatchesMessage="Oops this country doesn't exist. Create a new country?"
+          @onSelectionChange={{fn (mut this.selectedCountry)}}
+          @options={{this.countries}}
+          @placeholder='Select a Country...'
+          @searchField='name'
+          @selected={{this.selectedCountry}}
+        />
+      </p>
+
+      <PaperAutocomplete
+        @allowClear={{false}}
+        @disabled={{false}}
+        @label='Select a Country...'
+        @labelPath='name'
+        @noMatchesMessage="Oops this country doesn't exist."
+        @onSelectionChange={{fn (mut this.selectedCountry2)}}
+        @options={{this.countries}}
+        @required={{false}}
+        @searchField='name'
+        @triggerClass='flex'
+        @selected={{this.selectedCountry}}
+        as |country select|
+      >
+        <PaperAutocompleteHighlight
+          @label={{country.name}}
+          @searchText={{select.searchText}}
+          @flags='i'
+        />
+      </PaperAutocomplete>
+
+      <PaperAutocomplete
+        @allowClear={{false}}
+        @disabled={{false}}
+        @label='Select a Country...'
+        @labelPath='name'
+        @noMatchesMessage="Oops this country doesn't exist."
+        @onSelectionChange={{fn (mut this.selectedCountry2)}}
+        @options={{this.countries}}
+        @required={{true}}
+        @searchField='name'
+        @triggerClass='flex'
+        @selected={{this.selectedCountry}}
+        as |country select|
+      >
+        <PaperAutocompleteHighlight
+          @label={{country.name}}
+          @searchText={{select.searchText}}
+          @flags='i'
+        />
+      </PaperAutocomplete>
+
+      <PaperAutocomplete
+        @allowClear={{false}}
+        @disabled={{true}}
+        @label='Select a Country...'
+        @labelPath='name'
+        @noMatchesMessage="Oops this country doesn't exist."
+        @onSelectionChange={{fn (mut this.selectedCountry2)}}
+        @options={{this.countries}}
+        @required={{false}}
+        @searchField='name'
+        @selected={{this.selectedCountry2}}
+        @triggerClass='flex'
+        as |country select|
+      >
+        <PaperAutocompleteHighlight
+          @label={{country.name}}
+          @searchText={{select.searchText}}
+          @flags='i'
+        />
+      </PaperAutocomplete>
+
+      <PaperAutocomplete
+        @allowClear={{false}}
+        @disabled={{true}}
+        @label='Select a Country...'
+        @labelPath='name'
+        @noMatchesMessage="Oops this country doesn't exist."
+        @onSelectionChange={{fn (mut this.selectedCountry2)}}
+        @options={{this.countries}}
+        @required={{true}}
+        @searchField='name'
+        @selected={{this.selectedCountry2}}
+        @triggerClass='flex'
+        as |country select|
+      >
+        <PaperAutocompleteHighlight
+          @label={{country.name}}
+          @searchText={{select.searchText}}
+          @flags='i'
+        />
+      </PaperAutocomplete>
+
+      <PaperAutocomplete
+        @allowClear={{true}}
+        @disabled={{false}}
+        @label='Select a Country...'
+        @labelPath='name'
+        @noMatchesMessage="Oops this country doesn't exist."
+        @onSelectionChange={{fn (mut this.selectedCountry2)}}
+        @options={{this.countries}}
+        @required={{false}}
+        @searchField='name'
+        @selected={{this.selectedCountry2}}
+        @triggerClass='flex'
+        as |country select|
+      >
+        <PaperAutocompleteHighlight
+          @label={{country.name}}
+          @searchText={{select.searchText}}
+          @flags='i'
+        />
+      </PaperAutocomplete>
+
+      <PaperAutocomplete
+        @allowClear={{true}}
+        @disabled={{false}}
+        @label='Select a Country...'
+        @labelPath='name'
+        @noMatchesMessage="Oops this country doesn't exist."
+        @onSelectionChange={{fn (mut this.selectedCountry2)}}
+        @options={{this.countries}}
+        @required={{true}}
+        @searchField='name'
+        @selected='not'
+        @triggerClass='flex'
+        as |country select|
+      >
+        <PaperAutocompleteHighlight
+          @label={{country.name}}
+          @searchText={{select.searchText}}
+          @flags='i'
+        />
+      </PaperAutocomplete>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Button</h2>
+    </card.title>
+    <card.content>
+      <div class='layout-row'>
+        <PaperButton @onClick={{this.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={{this.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={{this.targetButton}}>
+            Button with target
+          </PaperButton>
+          <PaperButton
+            @raised={{true}}
+            @primary={{true}}
+            @onClick={{this.targetButton}}
+          >
+            Button with bubble
+          </PaperButton>
+          <PaperButton
+            @raised={{true}}
+            @primary={{true}}
+            @onClick={{this.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}}>
+          <PaperIcon @icon='accessibility' />
+        </PaperButton>
+      </p>
+
+      <p>
+        <PaperButton @raised={{true}} @label='Blockless version' />
+      </p>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Card</h2>
+    </card.title>
+    <card.content>
+      <div class='layout-row layout-xs-column'>
+        <div class='layout-column flex-xs flex-gt-xs-50 card-demo'>
+          <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}}>
+                  <PaperIcon @icon='favorite' />
+                </PaperButton>
+                <PaperButton @iconButton={{true}}>
+                  <PaperIcon @icon='settings' />
+                </PaperButton>
+                <PaperButton @iconButton={{true}}>
+                  <PaperIcon @icon='share' />
+                </PaperButton>
+              </card.actions>
+            </card.content>
+          </PaperCard>
+        </div>
+
+        <div class='layout-column flex-xs flex-gt-xs-50 card-demo'>
+          <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>
+
+      <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}}>
+                <PaperIcon @icon='favorite' />
+              </PaperButton>
+              <PaperButton @iconButton={{true}}>
+                <PaperIcon @icon='settings' />
+              </PaperButton>
+              <PaperButton @iconButton={{true}}>
+                <PaperIcon @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}}>
+                <PaperIcon @icon='favorite' />
+              </PaperButton>
+              <PaperButton @iconButton={{true}}>
+                <PaperIcon @icon='settings' />
+              </PaperButton>
+              <PaperButton @iconButton={{true}}>
+                <PaperIcon @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>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Checkbox</h2>
+    </card.title>
+    <card.content>
+      <div class='layout-column'>
+        <PaperCheckbox
+          @value={{this.checkboxValue1}}
+          @onChange={{fn (mut this.checkboxValue1)}}
+        >
+          A checkbox:
+          {{this.checkboxValue1}}
+        </PaperCheckbox>
+
+        <PaperCheckbox
+          @value={{this.checkboxValue2}}
+          @onChange={{fn (mut this.checkboxValue2)}}
+        >
+          A checkbox:
+          {{if this.checkboxValue2 'yep' 'nope'}}
+        </PaperCheckbox>
+
+        <PaperCheckbox
+          @value={{this.checkboxValue3}}
+          @onChange={{fn (mut this.checkboxValue3)}}
+          @disabled={{true}}
+        >
+          Checkbox (disabled)
+        </PaperCheckbox>
+
+        <PaperCheckbox
+          @value={{true}}
+          @onChange={{fn (mut this.checkboxValue4)}}
+          @disabled={{true}}
+        >
+          Checkbox (disabled and value)
+        </PaperCheckbox>
+
+        <PaperCheckbox
+          @value={{this.checkboxValue5}}
+          @onChange={{fn (mut this.checkboxValue5)}}
+          @noink={{true}}
+        >
+          Checkbox (no ink)
+        </PaperCheckbox>
+
+        <PaperCheckbox
+          @label='Blockless version'
+          @value={{this.checkboxValue6}}
+          @onChange={{this.checkboxToggleCheckValue6}}
+        />
+
+        <PaperCheckbox
+          @indeterminate={{this.checkboxIsIndeterminate}}
+          @value={{this.checkboxValue7}}
+          @onChange={{fn (mut this.checkboxValue7)}}
+        >
+          Indeterminate checkbox
+        </PaperCheckbox>
+
+        <PaperCheckbox
+          @disabled={{true}}
+          @indeterminate={{this.checkboxIsIndeterminate}}
+          @value={{this.checkboxValue7}}
+          @onChange={{null}}
+        >
+          Indeterminate checkbox (disabled)
+        </PaperCheckbox>
+      </div>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Chips</h2>
+    </card.title>
+    <card.content>
+      <PaperChips
+        @content={{this.chipsFruitNames}}
+        @readOnly={{this.chipsReadOnly}}
+        @removeItem={{this.chipsRemoveItem}}
+        @addItem={{this.chipsAddItem}}
+        @placeholder='Add a tag'
+      />
+      <p><code>default template</code></p>
+
+      <PaperChips
+        @readOnly={{this.chipsReadOnly}}
+        @removeItem={{this.chipsRemoveCustomItem}}
+        @addItem={{this.chipsAddCustomItem}}
+        @placeholder='Add a tag'
+        @content={{this.chipsCustomFruitNames}}
+        as |item|
+      >
+        <strong>{{item}}</strong>
+        <em>(fruit)</em>
+      </PaperChips>
+      <p><code>custom template</code></p>
+
+      <h3>Chips with Autocomplete</h3>
+      <PaperChips
+        @readOnly={{this.chipsReadOnly}}
+        @removeItem={{this.chipsRemoveVegetable}}
+        @addItem={{this.chipsAddVegetable}}
+        @placeholder='Add a vegetable'
+        @content={{this.chipsVegetables}}
+        @options={{this.chipsRemainingVegetables}}
+        @searchField='name'
+        @noMatchesMessage='Not found. Click to add.'
+        as |item|
+      >
+        <strong>{{item.name}}</strong>
+        {{#if item.family}}
+          <em>{{item.family}}</em>
+        {{/if}}
+      </PaperChips>
+      <p><code>Chips with Autocomplete</code></p>
+
+      <PaperChips
+        @readOnly={{this.chipsReadOnly}}
+        @removeItem={{this.chipsRemoveVegeName}}
+        @addItem={{this.chipsAddVegeName}}
+        @placeholder='Add a vegetable'
+        @content={{this.chipsVegeNames}}
+        @options={{this.chipsRemainingVegeNames}}
+        @requireMatch={{true}}
+      />
+      <p><code>Chips with Autocomplete (requires match)</code></p>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Contact Chips</h2>
+    </card.title>
+    <card.content>
+      <PaperContactChips
+        @removeItem={{this.contactChipsRemoveContact}}
+        @addItem={{this.contactChipsAddContact}}
+        @placeholder='Add a contact'
+        @content={{this.contactChipsSelectedContacts}}
+        @options={{this.contactChipsRemainingContacts}}
+      />
+      <p><code>default</code></p>
+
+      <PaperContactChips
+        @readOnly={{true}}
+        @removeItem={{this.contactChipsRemoveContact}}
+        @addItem={{this.contactChipsAddContact}}
+        @placeholder='Add a contact'
+        @content={{this.contactChipsSelectedContacts}}
+        @options={{this.contactChipsRemainingContacts}}
+      />
+      <p><code>read only contact chips</code></p>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard>
+    <PaperCardTitle>
+      <h2>Dialog</h2>
+    </PaperCardTitle>
+
+    <div class='doc-content-example'>
+      <div id='dialog-catalog' class='dialog-catalog'></div>
+      <PaperCardContent>
+        <div class='layout-row layout-wrap'>
+          <PaperButton
+            @raised={{true}}
+            @primary={{true}}
+            @onClick={{this.dialogToggleOpen}}
+          >
+            Open Dialog
+          </PaperButton>
+        </div>
+      </PaperCardContent>
+    </div>
+  </PaperCard>
+  <span id='bottom-of-card'></span>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Divider</h2>
+    </card.title>
+    <card.content>
+      <PaperDivider />
+      <p><code>divider: default</code></p>
+
+      <PaperDivider @inset={{true}} />
+      <p><code>divider: inset</code></p>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Grid List: default</h2>
+    </card.title>
+    <card.content @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>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Grid List: dynamic tiles</h2>
+    </card.title>
+    <card.content @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 this.gridListTiles 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>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Icons</h2>
+    </card.title>
+    <card.content>
+      <PaperIcon @icon='check-circle' @size={{12}} />
+      <PaperIcon @icon='check-circle' @size={{18}} />
+      <PaperIcon @icon='check-circle' @size={{24}} />
+      <PaperIcon @icon='check-circle' @size={{36}} />
+      <PaperIcon @icon='check-circle' @size={{48}} />
+      <p><code>default</code></p>
+
+      <PaperIcon @icon='rotate-right' @spin={{true}} />
+      <PaperIcon @icon='rotate-left' @reverseSpin={{true}} />
+      <p><code>spinners</code></p>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Input</h2>
+    </card.title>
+    <card.content>
+      <div class='layout layout-sm-column'>
+        <PaperInput
+          @class='flex-30'
+          @label='Name'
+          @placeholder='Enter name'
+          @value={{this.inputName}}
+          @onChange={{fn (mut this.inputName)}}
+        />
+        <PaperInput
+          @class='flex-30'
+          @label='E-mail'
+          @type='email'
+          @value={{this.inputEmail}}
+          @onChange={{fn (mut this.inputEmail)}}
+        />
+        <PaperInput
+          @class='flex-40'
+          @label='Password'
+          @type='password'
+          @value={{this.inputPassword}}
+          @onChange={{fn (mut this.inputPassword)}}
+        />
+      </div>
+      <div class='layout layout-sm-column'>
+        <PaperInput
+          @class='flex'
+          @label='Submission date'
+          @type='date'
+          @value={{this.inputDate}}
+          @onChange={{fn (mut this.inputDate)}}
+        />
+        <PaperInput
+          @class='flex'
+          @label='Company (disabled)'
+          @type='text'
+          @value='Google'
+          @disabled={{true}}
+          @onChange={{fn (mut this.inputFoo)}}
+        />
+      </div>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>List</h2>
+    </card.title>
+    <card.content>
+      <PaperList>
+        <PaperSubheader>3 line item</PaperSubheader>
+        {{#each this.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 this.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 this.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 this.listPhoneNumbers as |phone|}}
+          <PaperItem @class='md-2-line'>
+            <PaperIcon @icon='phone' @class='md-avatar-icon' />
+            <div class='md-list-item-text'>
+              <h3>{{phone.number}}</h3>
+              <p>{{phone.type}}</p>
+            </div>
+          </PaperItem>
+        {{/each}}
+
+      </PaperList>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>List: controls</h2>
+    </card.title>
+    <card.content>
+      <PaperList>
+
+        <PaperSubheader>Single Action Checkboxes</PaperSubheader>
+        {{#each this.listToppings as |topping|}}
+          <PaperItem as |controls|>
+            <p>{{topping.name}}</p>
+            <div class='md-secondary-container'>
+              <controls.checkbox
+                @value={{topping.enabled}}
+                @secondary={{true}}
+                @onChange={{fn (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={{fn this.listTransitionTo 'more info'}}
+            >
+              More Info
+            </controls.button>
+          </div>
+        </PaperItem>
+        <PaperItem
+          @onClick={{fn this.listTransitionTo '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={{fn this.listTransitionTo 'secondary action'}}
+            >
+              More Info
+            </controls.button>
+          </div>
+        </PaperItem>
+
+        <PaperDivider />
+
+        <PaperSubheader>Clickable Items with Secondary Controls</PaperSubheader>
+        <PaperItem @onClick={{this.listTransitionToMenu}} as |controls|>
+          <PaperIcon @icon='network-wifi' />
+          <p>Wi-Fi</p>
+          <div class='md-secondary-container'>
+            <controls.switch
+              @secondary={{true}}
+              @value={{this.listWifiEnabled}}
+              @onChange={{fn (mut this.listWifiEnabled)}}
+            />
+          </div>
+        </PaperItem>
+        <PaperItem @onClick={{this.listTransitionToMenu}} as |controls|>
+          <PaperIcon @icon='bluetooth' />
+          <p>Bluetooth</p>
+          <div class='md-secondary-container'>
+            <controls.switch
+              @secondary={{true}}
+              @value={{this.listBluetoothEnabled}}
+              @onChange={{fn (mut this.listBluetoothEnabled)}}
+            />
+          </div>
+        </PaperItem>
+        <PaperItem @onClick={{this.listTransitionToMenu}}>
+          <PaperIcon @icon='data-usage' />
+          <p>Data Usage</p>
+        </PaperItem>
+
+        <PaperDivider />
+
+        <PaperSubheader>Checkbox with Secondary Action</PaperSubheader>
+        {{#each this.listMessageData as |item|}}
+          <PaperItem as |controls|>
+            <controls.checkbox
+              @value={{item.checked}}
+              @onChange={{fn (mut item.checked)}}
+            />
+            <p>{{item.message}}</p>
+            <div class='md-secondary-container'>
+              <controls.button
+                @secondary={{true}}
+                @iconButton={{true}}
+                @onClick={{fn this.listTransitionTo item}}
+              >
+                <PaperIcon @icon='message' />
+              </controls.button>
+            </div>
+          </PaperItem>
+        {{/each}}
+
+        <PaperDivider />
+
+        <PaperSubheader>Avatar with Secondary Action Icon</PaperSubheader>
+        {{#each this.listData as |item|}}
+          <PaperItem @onClick={{this.listTransitionToMenu}} 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={{fn (mut item.checked)}}
+              />
+              <controls.button
+                @secondary={{true}}
+                @iconButton={{true}}
+                @onClick={{this.listSecondaryMessageClick}}
+              >
+                <PaperIcon @icon='email' />
+              </controls.button>
+              <controls.button
+                @secondary={{true}}
+                @iconButton={{true}}
+                @onClick={{this.listSecondaryMessageClick}}
+              >
+                <PaperIcon @icon='message' />
+              </controls.button>
+            </div>
+          </PaperItem>
+        {{/each}}
+
+        <PaperDivider />
+
+        <PaperSubheader>Clickable Avatars</PaperSubheader>
+        {{#each this.listData as |item|}}
+          <PaperItem @class='md-3-line' @onClick={{this.listTransitionToMenu}}>
+            <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 this.listData as |item|}}
+          <PaperItem
+            @class='md-3-line'
+            @onClick={{this.listTransitionToMenu}}
+            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={{this.listTransitionToMenu}}
+            >
+              <PaperIcon @icon='phone' />
+            </controls.button>
+          </PaperItem>
+        {{/each}}
+
+        <PaperSubheader>Single Action Radios</PaperSubheader>
+        {{#each this.listToppings as |topping|}}
+          <PaperItem as |controls|>
+            <p>{{topping.name}}</p>
+            <div class='md-secondary-container'>
+              <controls.radio
+                @groupValue={{this.listRadioSelectedTopping}}
+                @value={{topping}}
+                @secondary={{true}}
+                @onChange={{fn (mut this.listRadioSelectedTopping)}}
+              />
+            </div>
+          </PaperItem>
+        {{/each}}
+      </PaperList>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Menu</h2>
+    </card.title>
+    <card.content>
+      <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'
+        >
+          <PaperMenu @isOpen={{true}} as |menu|>
+            <menu.trigger @isOpen={{true}}>
+              <PaperButton @isOpen={{true}} @iconButton={{true}}>
+                <PaperIcon @icon='local_phone' />
+              </PaperButton>
+            </menu.trigger>
+
+            <menu.content @isOpen={{true}} @width={{4}} as |content|>
+              {{#each this.menuItems as |item|}}
+                <content.menu-item @onClick={{this.menuOpenSomething}}>
+                  <PaperIcon @icon={{item.icon}} />
+                  <span>{{item.title}}</span>
+                </content.menu-item>
+              {{/each}}
+
+              <content.menu-item
+                @onClick={{this.menuOpenSomething}}
+                @disabled={{true}}
+              >
+                <PaperIcon @icon='adb' />
+                <span>This is disabled.</span>
+              </content.menu-item>
+
+              <PaperDivider />
+
+              {{#each this.menuItems as |item|}}
+                <content.menu-item @onClick={{this.menuOpenSomething}}>
+                  <PaperIcon @icon={{item.icon}} />
+                  {{item.title}}
+                </content.menu-item>
+              {{/each}}
+            </menu.content>
+          </PaperMenu>
+        </div>
+      </div>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Progress Circular</h2>
+    </card.title>
+    <card.content>
+      <PaperProgressCircular @value={{this.progressDeterminateValue}} />
+      <p><code>determinate mode</code></p>
+
+      <div class='layout-row layout-align-space-between'>
+        <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}} />
+      </div>
+      <p><code>non-determinate mode</code></p>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Progress Linear</h2>
+    </card.title>
+    <card.content
+      {{did-insert this.progressStart}}
+      {{will-destroy this.progressStop}}
+    >
+      <PaperProgressLinear @value={{this.progressDeterminateValue}} />
+      <p><code>determinate mode</code></p>
+
+      <PaperProgressLinear />
+      <p><code>non-determinate mode</code></p>
+
+      <PaperProgressLinear
+        @warn={{true}}
+        @value={{this.progressDeterminateValue}}
+        @bufferValue={{this.progressDeterminateValue2}}
+      />
+      <p><code>buffer mode</code></p>
+
+      <PaperProgressLinear
+        @accent={{true}}
+        @mode='query'
+        @value={{this.progressDeterminateValue}}
+      />
+      <p><code>query mode</code></p>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Radio</h2>
+    </card.title>
+    <card.content>
+      <PaperRadio
+        @toggle={{true}}
+        @value='Toggable'
+        @groupValue={{this.radioToggleValue}}
+        @onChange={{fn (mut this.radioToggleValue)}}
+      >
+        Toggable
+      </PaperRadio>
+      <PaperRadio
+        @label='Blockless'
+        @toggle={{false}}
+        @value='Blockless'
+        @onChange={{null}}
+        @checked={{true}}
+      />
+      <PaperRadio @value={{false}} @disabled={{true}} @onChange={{null}}>
+        Disabled
+      </PaperRadio>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Select</h2>
+    </card.title>
+    <card.content>
+      <div class='layout-row layout-align-space-between'>
+        <div>
+          <PaperSelect
+            @label='State'
+            @onChange={{fn (mut this.selectSelectedState)}}
+            @options={{this.selectStates}}
+            @selected={{this.selectSelectedState}}
+            as |state|
+          >
+            {{state.abbrev}}
+          </PaperSelect>
+          <p><code>default</code></p>
+        </div>
+
+        <div>
+          <PaperSelect
+            @disabled={{true}}
+            @label='State'
+            @onChange={{fn (mut this.selectSelectedState)}}
+            @options={{this.selectStates}}
+            @selected={{this.selectSelectedState}}
+            as |state|
+          >
+            {{state.abbrev}}
+          </PaperSelect>
+          <p><code>disabled</code></p>
+        </div>
+
+        <div>
+          <PaperSelect
+            @disabled={{false}}
+            @label='State'
+            @onChange={{fn (mut this.selectSelectedState)}}
+            @options={{this.selectStates}}
+            @required={{true}}
+            @selected={{this.selectSelectedState}}
+            as |state|
+          >
+            {{state.abbrev}}
+          </PaperSelect>
+          <p><code>required</code></p>
+        </div>
+      </div>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Sidenav</h2>
+    </card.title>
+    <card.content>
+      <PaperSidenavContainer @class='inner-sidenav'>
+
+        <PaperSidenav
+          @class='md-whiteframe-z2'
+          @name='left'
+          @open={{this.sidenavLeftSideBarOpen}}
+          @onToggle={{fn (mut this.sidenavLeftSideBarOpen)}}
+        >
+          <PaperToolbar as |toolbar|>
+            <toolbar.tools>Left Sidenav</toolbar.tools>
+          </PaperToolbar>
+          <PaperContent @padding={{true}}>
+            Çup?
+          </PaperContent>
+        </PaperSidenav>
+
+        <PaperCardContent @class='flex'>
+          <div
+            class='layout-fill 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>.
+            </p>
+            <p>
+              Left sidenav is
+              <strong>{{if
+                  this.sidenavLeftSideBarOpen
+                  'opened'
+                  'closed'
+                }}</strong>.
+            </p>
+            <p>
+              Right sidenav is
+              <strong>{{if
+                  this.sidenavRightSideBarOpen
+                  'opened'
+                  'closed'
+                }}</strong>.
+            </p>
+
+            <PaperSidenavToggle @name='left' as |toggleAction|>
+              <PaperButton
+                @raised={{true}}
+                @classNames='hide-gt-sm'
+                @onClick={{toggleAction}}
+              >
+                Toggle left sidenav
+              </PaperButton>
+            </PaperSidenavToggle>
+
+            <PaperSidenavToggle @name='right' as |toggleAction|>
+              <PaperButton @raised={{true}} @onClick={{toggleAction}}>
+                Toggle right sidenav
+              </PaperButton>
+            </PaperSidenavToggle>
+
+          </div>
+        </PaperCardContent>
+
+        <PaperSidenav
+          @class='md-whiteframe-z2'
+          @name='right'
+          @position='right'
+          @open={{this.sidenavRightSideBarOpen}}
+          @lockedOpen={{false}}
+          @onToggle={{fn (mut this.sidenavRightSideBarOpen)}}
+        >
+          <PaperToolbar as |toolbar|>
+            <toolbar.tools>Right Sidenav</toolbar.tools>
+          </PaperToolbar>
+          <PaperContent @padding={{true}}>
+            Çup? I'm on the right side.
+          </PaperContent>
+        </PaperSidenav>
+
+      </PaperSidenavContainer>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Slider</h2>
+    </card.title>
+    <card.content>
+      <PaperSlider
+        @class='flex'
+        @discrete={{true}}
+        @value={{this.sliderRating1}}
+        @step={{1}}
+        @min={{1}}
+        @max={{5}}
+        @onChange={{fn (mut this.sliderRating1)}}
+      />
+      <p><code>default</code></p>
+
+      <PaperSlider
+        @class='flex'
+        @warn={{true}}
+        @discrete={{true}}
+        @value={{this.sliderRating2}}
+        @step={{1}}
+        @min={{1}}
+        @max={{5}}
+        @onChange={{fn (mut this.sliderRating2)}}
+      />
+      <p><code>md-warn</code></p>
+
+      <PaperSlider
+        @class='flex'
+        @primary={{true}}
+        @discrete={{true}}
+        @value={{this.sliderRating3}}
+        @step={{1}}
+        @min={{1}}
+        @max={{5}}
+        @onChange={{fn (mut this.sliderRating3)}}
+      />
+      <p><code>md-primary</code></p>
+
+      <PaperSlider
+        @class='flex'
+        @value={{this.sliderDisabled1}}
+        @disabled={{true}}
+        @onChange={{fn (mut this.sliderDisabled1)}}
+      />
+      <p><code>disabled</code></p>
+
+      <div class='layout layout-column slider-container'>
+        <div class='layout layout-align-center-center slider-container'>
+          <span>R</span>
+          <PaperSlider
+            @class='flex'
+            @min={{0}}
+            @max={{255}}
+            @value={{this.sliderColor.red}}
+            @onChange={{fn (mut this.sliderColor.red)}}
+          />
+          <PaperInput
+            @type='number'
+            @value={{this.sliderColor.red}}
+            @onChange={{fn (mut this.sliderColor.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.sliderColor.green}}
+            @onChange={{fn (mut this.sliderColor.green)}}
+          />
+          <PaperInput
+            @type='number'
+            @value={{this.sliderColor.green}}
+            @onChange={{fn (mut this.sliderColor.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.sliderColor.blue}}
+            @onChange={{fn (mut this.sliderColor.blue)}}
+          />
+          <PaperInput
+            @type='number'
+            @value={{this.sliderColor.blue}}
+            @onChange={{fn (mut this.sliderColor.blue)}}
+          />
+        </div>
+        <p><code>non-discrete</code></p>
+      </div>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Speed Dial</h2>
+    </card.title>
+    <card.content @class='layout layout-align-center-center'>
+      <div>
+        <PaperSpeedDial
+          @animation='fling'
+          @direction='up'
+          @open={{this.speedDialOpen}}
+          @onToggle={{fn (mut this.speedDialOpen)}}
+          as |dial|
+        >
+          <dial.trigger>
+            <PaperButton @fab={{true}}>
+              <PaperIcon @icon='menu' />
+            </PaperButton>
+          </dial.trigger>
+
+          <dial.actions as |actions|>
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{null}}>
+                <PaperIcon @icon='people' />
+              </PaperButton>
+            </actions.action>
+
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{null}}>
+                <PaperIcon @icon='accessibility' />
+              </PaperButton>
+            </actions.action>
+
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{null}}>
+                <PaperIcon @icon='check-circle' />
+              </PaperButton>
+            </actions.action>
+          </dial.actions>
+        </PaperSpeedDial>
+        <p><code>up, fling</code></p>
+      </div>
+
+      <div>
+        <PaperSpeedDial
+          @animation='scale'
+          @direction='left'
+          @open={{this.speedDialOpen}}
+          @onToggle={{fn (mut this.speedDialOpen)}}
+          as |dial|
+        >
+          <dial.trigger>
+            <PaperButton @fab={{true}}>
+              <PaperIcon @icon='menu' />
+            </PaperButton>
+          </dial.trigger>
+
+          <dial.actions as |actions|>
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{null}}>
+                <PaperIcon @icon='people' />
+              </PaperButton>
+            </actions.action>
+
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{null}}>
+                <PaperIcon @icon='accessibility' />
+              </PaperButton>
+            </actions.action>
+
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{null}}>
+                <PaperIcon @icon='check-circle' />
+              </PaperButton>
+            </actions.action>
+          </dial.actions>
+        </PaperSpeedDial>
+        <p><code>left, scale</code></p>
+      </div>
+
+      <div>
+        <PaperSpeedDial
+          @animation='fling'
+          @direction='right'
+          @open={{this.speedDialOpen}}
+          @onToggle={{fn (mut this.speedDialOpen)}}
+          as |dial|
+        >
+          <dial.trigger>
+            <PaperButton @fab={{true}}>
+              <PaperIcon @icon='menu' />
+            </PaperButton>
+          </dial.trigger>
+
+          <dial.actions as |actions|>
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{null}}>
+                <PaperIcon @icon='people' />
+              </PaperButton>
+            </actions.action>
+
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{null}}>
+                <PaperIcon @icon='accessibility' />
+              </PaperButton>
+            </actions.action>
+
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{null}}>
+                <PaperIcon @icon='check-circle' />
+              </PaperButton>
+            </actions.action>
+          </dial.actions>
+        </PaperSpeedDial>
+        <p><code>right, fling</code></p>
+      </div>
+
+      <div>
+        <PaperSpeedDial
+          @animation='scale'
+          @direction='down'
+          @open={{this.speedDialOpen}}
+          @onToggle={{fn (mut this.speedDialOpen)}}
+          as |dial|
+        >
+          <dial.trigger>
+            <PaperButton @fab={{true}}>
+              <PaperIcon @icon='menu' />
+            </PaperButton>
+          </dial.trigger>
+
+          <dial.actions as |actions|>
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{null}}>
+                <PaperIcon @icon='people' />
+              </PaperButton>
+            </actions.action>
+
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{null}}>
+                <PaperIcon @icon='accessibility' />
+              </PaperButton>
+            </actions.action>
+
+            <actions.action>
+              <PaperButton @mini={{true}} @onClick={{null}}>
+                <PaperIcon @icon='check-circle' />
+              </PaperButton>
+            </actions.action>
+          </dial.actions>
+        </PaperSpeedDial>
+        <p><code>down, scale</code></p>
+      </div>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Switch</h2>
+    </card.title>
+    <card.content>
+      <PaperSwitch
+        @value={{this.switchProp1}}
+        @onChange={{fn (mut this.switchProp1)}}
+      >
+        {{this.switchProp1}}
+      </PaperSwitch>
+
+      <PaperSwitch
+        @value={{this.switchProp2}}
+        @onChange={{fn (mut this.switchProp2)}}
+      >
+        {{this.switchProp2}}
+      </PaperSwitch>
+
+      <PaperSwitch
+        @value={{this.switchProp3}}
+        @onChange={{fn this.switchToggle '3'}}
+        @disabled={{true}}
+      >
+        Disabled switch
+      </PaperSwitch>
+
+      <PaperSwitch
+        @value={{this.switchProp4}}
+        @onChange={{fn this.switchToggle '4'}}
+        @noink={{true}}
+      >
+        Noink switch
+      </PaperSwitch>
+
+      <PaperSwitch
+        @label='Blockless version'
+        @value={{this.switchProp5}}
+        @onChange={{fn this.switchToggle '5'}}
+      />
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Tabs</h2>
+    </card.title>
+
+    <card.content>
+      <div>
+        <PaperTabs
+          @onChange={{fn (mut this.tabsSelectedTab)}}
+          @selected={{this.tabsSelectedTab}}
+          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>
+
+        <p><code>default (dynamic stretching based on media queries)</code></p>
+      </div>
+
+      <div>
+        <PaperTabs
+          @center={{true}}
+          @stretch={{false}}
+          @onChange={{fn (mut this.tabsSelectedTab)}}
+          @selected={{this.tabsSelectedTab}}
+          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>
+
+        <p><code>centered</code></p>
+      </div>
+
+      <div>
+        <PaperTabs
+          @stretch={{true}}
+          @onChange={{fn (mut this.tabsSelectedTab)}}
+          @selected={{this.tabsSelectedTab}}
+          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>
+
+        <p><code>stretched</code></p>
+      </div>
+
+      <div>
+        <PaperTabs
+          @borderBottom={{true}}
+          @center={{false}}
+          @onChange={{fn (mut this.tabsSelectedTab)}}
+          @selected={{this.tabsSelectedTab}}
+          @stretch={{false}}
+          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>
+
+        <p><code>bottom border</code></p>
+      </div>
+
+      <div>
+        <PaperTabs
+          @selected={{this.tabsCurrentRouteName}}
+          @borderBottom={{true}}
+          @onChange={{null}}
+          as |tabs|
+        >
+          <tabs.tab @value='catalog.index' @href={{href-to 'catalog.index'}}>
+            Index
+          </tabs.tab>
+          <tabs.tab
+            @value='catalog.nested-route'
+            @href={{href-to 'catalog.nested-route'}}
+          >
+            Nested Route
+          </tabs.tab>
+        </PaperTabs>
+
+        <LiquidOutlet class='md-padding' />
+        <p><code>nested routing</code></p>
+      </div>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Toast</h2>
+    </card.title>
+    <card.content>
+      <div id='toast-catalog' class='toast-catalog'></div>
+
+      <PaperToast
+        @capsule={{false}}
+        @class='toast-catalog--override-position'
+        @duration={{this.toastDuration}}
+        @onClose={{null}}
+        @parent='.toast-catalog'
+        @swipeToClose={{false}}
+        as |toast|
+      >
+        <toast.text>default</toast.text>
+        <PaperButton @accent={{true}} @onClick={{null}}>
+          OK
+        </PaperButton>
+      </PaperToast>
+
+      <PaperToast
+        @capsule={{true}}
+        @class='toast-catalog--override-position'
+        @duration={{this.toastDuration}}
+        @onClose={{null}}
+        @parent='.toast-catalog'
+        @swipeToClose={{false}}
+        as |toast|
+      >
+        <toast.text>capsule</toast.text>
+        <PaperButton @warn={{true}} @onClick={{null}}>
+          CANCEL
+        </PaperButton>
+      </PaperToast>
+
+      <PaperToast
+        @duration={{this.toastDuration}}
+        @onClose={{null}}
+        @parent='.toast-catalog'
+        @swipeToClose={{false}}
+        @class='md-accent toast-catalog--override-position'
+        as |toast|
+      >
+        <toast.text>@class="md-accent"</toast.text>
+        <PaperButton @warn={{true}} @onClick={{null}}>
+          Wow, much accent
+        </PaperButton>
+      </PaperToast>
+
+      <PaperToast
+        @duration={{this.toastDuration}}
+        @onClose={{null}}
+        @parent='.toast-catalog'
+        @swipeToClose={{false}}
+        @class='md-warn toast-catalog--override-position'
+        as |toast|
+      >
+        <toast.text>@class="md-warn"</toast.text>
+        <PaperButton @accent={{true}} @onClick={{null}}>
+          UNDO
+        </PaperButton>
+      </PaperToast>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Toolbar</h2>
+    </card.title>
+    <card.content>
+      <PaperToolbar>
+        <PaperToolbarTools>
+          <PaperButton @iconButton={{true}}>
+            <PaperIcon @icon='menu' />
+          </PaperButton>
+          <h2>
+            Toolbar with Icon Buttons
+          </h2>
+          <span class='flex'></span>
+          <PaperButton @iconButton={{true}}>
+            <PaperIcon @icon='favorite' />
+          </PaperButton>
+          <PaperButton @iconButton={{true}}>
+            <PaperIcon @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'>
+            <PaperIcon @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>
+    </card.content>
+  </PaperCard>
+
+  <PaperCard as |card|>
+    <card.title>
+      <h2>Tooltip</h2>
+    </card.title>
+    <card.content @class='layout layout-align-space-around'>
+      <div class='layout-column layout-align-center-center'>
+        <PaperButton @raised={{true}}>
+          A button
+          <PaperTooltip @position='bottom'>
+            Hey! I'm a tooltip. Çup?
+          </PaperTooltip>
+        </PaperButton>
+        <p><code>position: bottom</code></p>
+      </div>
+
+      <div class='layout-column layout-align-center-center'>
+        <PaperButton @iconButton={{true}} @raised={{true}}>
+          <PaperIcon @icon='create' />
+          <PaperTooltip @position='top'>
+            Create
+          </PaperTooltip>
+        </PaperButton>
+        <p><code>position: top</code></p>
+      </div>
+
+      <div class='layout-column layout-align-center-center'>
+        <PaperButton @fab={{true}} @raised={{true}} @accent={{true}}>
+          <PaperIcon @icon='delete' />
+          <PaperTooltip @position='left'>
+            Delete
+          </PaperTooltip>
+        </PaperButton>
+        <p><code>position: left</code></p>
+      </div>
+
+      <div class='layout-column layout-align-center-center'>
+        <PaperIcon @icon='info'>
+          <PaperTooltip @position='right'>
+            Icon tooltip
+          </PaperTooltip>
+        </PaperIcon>
+        <p><code>position: right</code></p>
+      </div>
+    </card.content>
+  </PaperCard>
+
+</DocContent>
+
+{{#if this.dialogShowDialog}}
+  <PaperDialog
+    @class='flex-50'
+    @clickOutsideToClose={{true}}
+    @focusOnOpen={{false}}
+    @onClose={{this.dialogToggleOpen}}
+    @parent='#dialog-catalog'
+  >
+    <form>
+      <PaperToolbar>
+        <PaperToolbarTools>
+          <h2>Mango (Fruit)</h2>
+          <span class='flex'></span>
+          <PaperButton @iconButton={{true}} @onClick={{this.dialogToggleOpen}}>
+            <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={{this.dialogToggleOpen}}>
+          Cancel
+        </PaperButton>
+        <PaperButton @onClick={{this.dialogToggleOpen}}>
+          OK
+        </PaperButton>
+      </PaperDialogActions>
+    </form>
+  </PaperDialog>
+{{/if}}
\ No newline at end of file
diff --git a/tests/dummy/app/templates/catalog/index.hbs b/tests/dummy/app/templates/catalog/index.hbs
new file mode 100644
index 000000000..7d58f48e8
--- /dev/null
+++ b/tests/dummy/app/templates/catalog/index.hbs
@@ -0,0 +1,2 @@
+<h1 class="md-display-2">Index Route</h1>
+<p>This content lives in a nested "index" route.</p>
diff --git a/tests/dummy/app/templates/catalog/nested-route.hbs b/tests/dummy/app/templates/catalog/nested-route.hbs
new file mode 100644
index 000000000..7c68340ef
--- /dev/null
+++ b/tests/dummy/app/templates/catalog/nested-route.hbs
@@ -0,0 +1,2 @@
+<h1 class="md-display-2">Nested Route</h1>
+<p>This content lives in a nested "nested-route" route.</p>
diff --git a/tests/dummy/app/utils/grid-list.js b/tests/dummy/app/utils/grid-list.js
new file mode 100644
index 000000000..14360fd49
--- /dev/null
+++ b/tests/dummy/app/utils/grid-list.js
@@ -0,0 +1,306 @@
+import { assign } from '@ember/polyfills';
+
+const COLORS = Object.freeze([
+  '#ffebee',
+  '#ffcdd2',
+  '#ef9a9a',
+  '#e57373',
+  '#ef5350',
+  '#f44336',
+  '#e53935',
+  '#d32f2f',
+  '#c62828',
+  '#b71c1c',
+  '#ff8a80',
+  '#ff5252',
+  '#ff1744',
+  '#d50000',
+  '#f8bbd0',
+  '#f48fb1',
+  '#f06292',
+  '#ec407a',
+  '#e91e63',
+  '#d81b60',
+  '#c2185b',
+  '#ad1457',
+  '#880e4f',
+  '#ff80ab',
+  '#ff4081',
+  '#f50057',
+  '#c51162',
+  '#e1bee7',
+  '#ce93d8',
+  '#ba68c8',
+  '#ab47bc',
+  '#9c27b0',
+  '#8e24aa',
+  '#7b1fa2',
+  '#4a148c',
+  '#ea80fc',
+  '#e040fb',
+  '#d500f9',
+  '#aa00ff',
+  '#ede7f6',
+  '#d1c4e9',
+  '#b39ddb',
+  '#9575cd',
+  '#7e57c2',
+  '#673ab7',
+  '#5e35b1',
+  '#4527a0',
+  '#311b92',
+  '#b388ff',
+  '#7c4dff',
+  '#651fff',
+  '#6200ea',
+  '#c5cae9',
+  '#9fa8da',
+  '#7986cb',
+  '#5c6bc0',
+  '#3f51b5',
+  '#3949ab',
+  '#303f9f',
+  '#283593',
+  '#1a237e',
+  '#8c9eff',
+  '#536dfe',
+  '#3d5afe',
+  '#304ffe',
+  '#e3f2fd',
+  '#bbdefb',
+  '#90caf9',
+  '#64b5f6',
+  '#42a5f5',
+  '#2196f3',
+  '#1e88e5',
+  '#1976d2',
+  '#1565c0',
+  '#0d47a1',
+  '#82b1ff',
+  '#448aff',
+  '#2979ff',
+  '#2962ff',
+  '#b3e5fc',
+  '#81d4fa',
+  '#4fc3f7',
+  '#29b6f6',
+  '#03a9f4',
+  '#039be5',
+  '#0288d1',
+  '#0277bd',
+  '#01579b',
+  '#80d8ff',
+  '#40c4ff',
+  '#00b0ff',
+  '#0091ea',
+  '#e0f7fa',
+  '#b2ebf2',
+  '#80deea',
+  '#4dd0e1',
+  '#26c6da',
+  '#00bcd4',
+  '#00acc1',
+  '#0097a7',
+  '#00838f',
+  '#006064',
+  '#84ffff',
+  '#18ffff',
+  '#00e5ff',
+  '#00b8d4',
+  '#e0f2f1',
+  '#b2dfdb',
+  '#80cbc4',
+  '#4db6ac',
+  '#26a69a',
+  '#009688',
+  '#00897b',
+  '#00796b',
+  '#00695c',
+  '#a7ffeb',
+  '#64ffda',
+  '#1de9b6',
+  '#00bfa5',
+  '#e8f5e9',
+  '#c8e6c9',
+  '#a5d6a7',
+  '#81c784',
+  '#66bb6a',
+  '#4caf50',
+  '#43a047',
+  '#388e3c',
+  '#2e7d32',
+  '#1b5e20',
+  '#b9f6ca',
+  '#69f0ae',
+  '#00e676',
+  '#00c853',
+  '#f1f8e9',
+  '#dcedc8',
+  '#c5e1a5',
+  '#aed581',
+  '#9ccc65',
+  '#8bc34a',
+  '#7cb342',
+  '#689f38',
+  '#558b2f',
+  '#33691e',
+  '#ccff90',
+  '#b2ff59',
+  '#76ff03',
+  '#64dd17',
+  '#f9fbe7',
+  '#f0f4c3',
+  '#e6ee9c',
+  '#dce775',
+  '#d4e157',
+  '#cddc39',
+  '#c0ca33',
+  '#afb42b',
+  '#9e9d24',
+  '#827717',
+  '#f4ff81',
+  '#eeff41',
+  '#c6ff00',
+  '#aeea00',
+  '#fffde7',
+  '#fff9c4',
+  '#fff59d',
+  '#fff176',
+  '#ffee58',
+  '#ffeb3b',
+  '#fdd835',
+  '#fbc02d',
+  '#f9a825',
+  '#f57f17',
+  '#ffff8d',
+  '#ffff00',
+  '#ffea00',
+  '#ffd600',
+  '#fff8e1',
+  '#ffecb3',
+  '#ffe082',
+  '#ffd54f',
+  '#ffca28',
+  '#ffc107',
+  '#ffb300',
+  '#ffa000',
+  '#ff8f00',
+  '#ff6f00',
+  '#ffe57f',
+  '#ffd740',
+  '#ffc400',
+  '#ffab00',
+  '#fff3e0',
+  '#ffe0b2',
+  '#ffcc80',
+  '#ffb74d',
+  '#ffa726',
+  '#ff9800',
+  '#fb8c00',
+  '#f57c00',
+  '#ef6c00',
+  '#e65100',
+  '#ffd180',
+  '#ffab40',
+  '#ff9100',
+  '#ff6d00',
+  '#fbe9e7',
+  '#ffccbc',
+  '#ffab91',
+  '#ff8a65',
+  '#ff7043',
+  '#ff5722',
+  '#f4511e',
+  '#e64a19',
+  '#d84315',
+  '#bf360c',
+  '#ff9e80',
+  '#ff6e40',
+  '#ff3d00',
+  '#dd2c00',
+  '#d7ccc8',
+  '#bcaaa4',
+  '#795548',
+  '#d7ccc8',
+  '#bcaaa4',
+  '#8d6e63',
+  '#eceff1',
+  '#cfd8dc',
+  '#b0bec5',
+  '#90a4ae',
+  '#78909c',
+  '#607d8b',
+  '#546e7a',
+  '#cfd8dc',
+  '#b0bec5',
+  '#78909c',
+]);
+
+export function buildGridModel(tileTmpl) {
+  let results = [];
+
+  for (let j = 0; j < 11; j++) {
+    let it = assign({}, tileTmpl);
+    it.icon = it.icon + (j + 1);
+    it.title = it.title + (j + 1);
+    it.span = { row: 1, col: 1 };
+
+    switch (j + 1) {
+      case 1:
+        it.background = 'red';
+        it.span.row = it.span.col = 2;
+        break;
+      case 2:
+        it.background = 'green';
+        break;
+      case 3:
+        it.background = 'darkBlue';
+        break;
+      case 4:
+        it.background = 'blue';
+        it.span.col = 2;
+        break;
+      case 5:
+        it.background = 'yellow';
+        it.span.row = it.span.col = 2;
+        break;
+      case 6:
+        it.background = 'pink';
+        break;
+      case 7:
+        it.background = 'darkBlue';
+        break;
+      case 8:
+        it.background = 'purple';
+        break;
+      case 9:
+        it.background = 'deepBlue';
+        break;
+      case 10:
+        it.background = 'lightPurple';
+        break;
+      case 11:
+        it.background = 'yellow';
+        break;
+    }
+
+    results.push(it);
+  }
+  return results;
+}
+
+export function randomColor() {
+  let color = COLORS[Math.floor(Math.random() * COLORS.length)];
+  return color.replace('#', 'bg-');
+}
+
+export function randomSpan() {
+  let r = Math.random();
+  if (r < 0.8) {
+    return 'gt-sm-1';
+  } else if (r < 0.9) {
+    return 'gt-sm-2';
+  } else {
+    return 'gt-sm-3';
+  }
+}