diff --git a/bower.json b/bower.json
index e0610050..52d7f07d 100644
--- a/bower.json
+++ b/bower.json
@@ -34,7 +34,6 @@
     "iron-icons": "polymerelements/iron-icons#^1.0.0",
     "iron-scroll-threshold": "polymerelements/iron-scroll-threshold#^1.0.0",
     "iron-image": "polymerelements/iron-image#^1.0.0",
-    "paper-menu": "polymerelements/paper-menu#^1.0.0",
     "paper-item": "polymerelements/paper-item#^1.0.0",
     "paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
     "paper-button": "polymerelements/paper-button#^1.0.0",
diff --git a/demo/cards.html b/demo/cards.html
new file mode 100644
index 00000000..cfd5e2a5
--- /dev/null
+++ b/demo/cards.html
@@ -0,0 +1,169 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!doctype html>
+<html id="html">
+<head>
+
+  <title>iron-list demo</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
+  <meta name="mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+  <link rel="import" href="../../app-layout/app-header/app-header.html">
+  <link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
+  <link rel="import" href="../../app-layout/app-scroll-effects/app-scroll-effects.html">
+  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
+  <link rel="import" href="../../iron-ajax/iron-ajax.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
+  <link rel="import" href="../../iron-image/iron-image.html">
+  <link rel="import" href="../iron-list.html">
+
+  <style is="custom-style">
+    body {
+      @apply(--layout-fullbleed);
+      font-family: 'Roboto', 'Noto', sans-serif;
+      background-color: #eee;
+    }
+
+    app-header {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      z-index: 1;
+      background-color: #0b8043;
+      color: white;
+      --app-header-background-front-layer: {
+        background-color: #4285f4;
+      };
+    }
+
+    app-header paper-icon-button {
+      --paper-icon-button-ink-color: white;
+    }
+
+    [title] {
+      font-weight: 400;
+      margin: 0 0 0 50px;
+    }
+
+    [condensed-title] {
+      font-weight: 400;
+      margin-left: 30px;
+    }
+
+    [condensed-title] i {
+      font-style: normal;
+      font-weight: 100;
+    }
+
+    app-toolbar.tall {
+      height: 148px;
+    }
+
+    iron-list {
+      padding-top: 148px;
+      margin-top: 64px;
+      padding-bottom: 16px;
+    }
+
+    .item {
+      @apply(--layout-horizontal);
+      padding: 20px;
+      border-radius: 8px;
+      background-color: white;
+      border: 1px solid #ddd;
+      max-width: 800px;
+      margin: 16px auto 0 auto;
+    }
+
+    .item:focus {
+      outline: 0;
+      border-color: #333;
+    }
+
+    .avatar {
+      height: 40px;
+      width: 40px;
+      border-radius: 20px;
+      box-sizing: border-box;
+      background-color: #DDD;
+    }
+
+    .pad {
+      padding: 0 16px;
+      @apply(--layout-flex);
+      @apply(--layout-vertical);
+    }
+
+    .primary {
+      font-size: 16px;
+      font-weight: bold;
+    }
+
+    .secondary {
+      font-size: 14px;
+    }
+
+    .dim {
+      color: gray;
+    }
+
+    .spacer {
+      @apply(--layout-flex);
+    }
+
+  </style>
+
+</head>
+<body unresolved>
+
+  <template is="dom-bind">
+    <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
+
+      <app-header condenses fixed effects="resize-title blend-background waterfall">
+        <app-toolbar>
+          <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
+          <h4 condensed-title>iron-list <i>&mdash; Demo</i></h4>
+          <paper-icon-button icon="search"></paper-icon-button>
+          <paper-icon-button icon="more-vert"></paper-icon-button>
+        </app-toolbar>
+        <app-toolbar class="tall">
+          <h1 title>iron-list</h1>
+        </app-toolbar>
+      </app-header>
+
+      <!-- iron-list using the document scroll -->
+      <iron-list items="[[data]]" as="item" scroll-target="html">
+        <template>
+          <div>
+            <div class="item" tabindex$="[[tabIndex]]">
+              <iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>
+              <div class="pad">
+                <div class="primary">[[item.name]] [[index]]</div>
+                <div class="secondary">[[item.shortText]]</div>
+                <div class="secondary dim">[[item.longText]]</div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </iron-list>
+
+  </template>
+
+</body>
+</html>
diff --git a/demo/collapse.html b/demo/collapse.html
index 3ac65cd1..bbf49632 100644
--- a/demo/collapse.html
+++ b/demo/collapse.html
@@ -12,7 +12,7 @@
 <html>
 <head>
 
-  <title>Collapsable items using iron-list</title>
+  <title>Collapsible items using iron-list</title>
 
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
@@ -145,7 +145,7 @@
     <iron-ajax url="data/contacts.json" last-response="{{items}}" auto></iron-ajax>
 
     <app-toolbar>
-      <div title>Collapsable items</div>
+      <div title>Collapsible items</div>
       <paper-icon-button icon="search" alt="Search"></paper-icon-button>
       <paper-icon-button icon="more-vert" alt="More options"></paper-icon-button>
     </app-toolbar>
diff --git a/demo/index.html b/demo/index.html
index cfd5e2a5..8699694b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,6 +1,6 @@
 <!--
 @license
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
@@ -9,161 +9,39 @@
 -->
 
 <!doctype html>
-<html id="html">
+<html>
 <head>
-
-  <title>iron-list demo</title>
-
+  <title>iron-list demos</title>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no">
-  <meta name="mobile-web-app-capable" content="yes">
-  <meta name="apple-mobile-web-app-capable" content="yes">
-
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-
-  <link rel="import" href="../../polymer/polymer.html">
-  <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
-  <link rel="import" href="../../app-layout/app-header/app-header.html">
-  <link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
-  <link rel="import" href="../../app-layout/app-scroll-effects/app-scroll-effects.html">
-  <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
-  <link rel="import" href="../../iron-ajax/iron-ajax.html">
-  <link rel="import" href="../../iron-icons/iron-icons.html">
-  <link rel="import" href="../../iron-image/iron-image.html">
-  <link rel="import" href="../iron-list.html">
-
-  <style is="custom-style">
-    body {
-      @apply(--layout-fullbleed);
-      font-family: 'Roboto', 'Noto', sans-serif;
-      background-color: #eee;
-    }
-
-    app-header {
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      z-index: 1;
-      background-color: #0b8043;
-      color: white;
-      --app-header-background-front-layer: {
-        background-color: #4285f4;
-      };
-    }
-
-    app-header paper-icon-button {
-      --paper-icon-button-ink-color: white;
-    }
-
-    [title] {
-      font-weight: 400;
-      margin: 0 0 0 50px;
-    }
-
-    [condensed-title] {
-      font-weight: 400;
-      margin-left: 30px;
-    }
-
-    [condensed-title] i {
-      font-style: normal;
-      font-weight: 100;
-    }
-
-    app-toolbar.tall {
-      height: 148px;
-    }
-
-    iron-list {
-      padding-top: 148px;
-      margin-top: 64px;
-      padding-bottom: 16px;
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+  <style>
+    a {
+      display: block;
+      margin-bottom: 10px;
     }
 
-    .item {
-      @apply(--layout-horizontal);
-      padding: 20px;
-      border-radius: 8px;
-      background-color: white;
-      border: 1px solid #ddd;
-      max-width: 800px;
-      margin: 16px auto 0 auto;
+    li {
+      list-style: none;
     }
-
-    .item:focus {
-      outline: 0;
-      border-color: #333;
-    }
-
-    .avatar {
-      height: 40px;
-      width: 40px;
-      border-radius: 20px;
-      box-sizing: border-box;
-      background-color: #DDD;
-    }
-
-    .pad {
-      padding: 0 16px;
-      @apply(--layout-flex);
-      @apply(--layout-vertical);
-    }
-
-    .primary {
-      font-size: 16px;
-      font-weight: bold;
-    }
-
-    .secondary {
-      font-size: 14px;
-    }
-
-    .dim {
-      color: gray;
-    }
-
-    .spacer {
-      @apply(--layout-flex);
-    }
-
   </style>
-
 </head>
 <body unresolved>
 
-  <template is="dom-bind">
-    <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
-
-      <app-header condenses fixed effects="resize-title blend-background waterfall">
-        <app-toolbar>
-          <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
-          <h4 condensed-title>iron-list <i>&mdash; Demo</i></h4>
-          <paper-icon-button icon="search"></paper-icon-button>
-          <paper-icon-button icon="more-vert"></paper-icon-button>
-        </app-toolbar>
-        <app-toolbar class="tall">
-          <h1 title>iron-list</h1>
-        </app-toolbar>
-      </app-header>
-
-      <!-- iron-list using the document scroll -->
-      <iron-list items="[[data]]" as="item" scroll-target="html">
-        <template>
-          <div>
-            <div class="item" tabindex$="[[tabIndex]]">
-              <iron-image class="avatar" sizing="contain" src="[[item.image]]"></iron-image>
-              <div class="pad">
-                <div class="primary">[[item.name]] [[index]]</div>
-                <div class="secondary">[[item.shortText]]</div>
-                <div class="secondary dim">[[item.longText]]</div>
-              </div>
-            </div>
-          </div>
-        </template>
-      </iron-list>
-
-  </template>
+  <div class="horizontal-section-container">
+    <div>
+      <h4>iron-list demos</h4>
+      <ul class="horizontal-section">
+        <li><a href="cards.html" target="_blank">List of cards</a></li>
+        <li><a href="collapse.html" target="_blank">Collapsible items</a></li>
+        <li><a href="scroll-threshold.html" target="_blank">Scroll thresholds</a></li>
+        <li><a href="grid.html" target="_blank">Grid layout</a></li>
+        <li><a href="selection.html" target="_blank">Contact selection</a></li>
+        <li><a href="basic.html" target="_blank">Basic list</a></li>
+      </ul>
+    </div>
+  </div>
 
 </body>
 </html>
diff --git a/demo/selection.html b/demo/selection.html
index 0ac1b419..6baf405c 100644
--- a/demo/selection.html
+++ b/demo/selection.html
@@ -22,259 +22,262 @@
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
   <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../../app-layout/app-drawer/app-drawer.html">
+  <link rel="import" href="../../app-layout/app-drawer-layout/app-drawer-layout.html">
+  <link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
   <link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
   <link rel="import" href="../../iron-ajax/iron-ajax.html">
+  <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../paper-icon-button/paper-icon-button.html">
   <link rel="import" href="../../iron-icon/iron-icon.html">
-  <link rel="import" href="../../iron-icons/iron-icons.html">
   <link rel="import" href="../../paper-styles/color.html">
   <link rel="import" href="../../paper-styles/typography.html">
-  <link rel="import" href="../../app-layout/app-toolbar/app-toolbar.html">
-  <link rel="import" href="../../paper-menu/paper-menu.html">
   <link rel="import" href="../../paper-item/paper-item.html">
   <link rel="import" href="../../paper-badge/paper-badge.html">
+
   <link rel="import" href="../iron-list.html">
 
+</head>
+
+<body unresolved>
+
   <dom-module id="x-app">
+    <template>
+      <style>
+
+        :host {
+          display: block;
+          @apply(--paper-font-common-base);
+          font-family: sans-serif;
+        }
+
+        .content {
+          @apply(--layout-vertical);
+          height: 100%;
+        }
+
+        .white-toolbar {
+          background: white;
+          color: #333;
+        }
+
+        .pink-toolbar {
+          background: var(--paper-pink-500);
+          color: white;
+        }
+
+        app-toolbar {
+          box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
+          --paper-toolbar-title: {
+            font-size: 16px;
+            line-height: 16px;
+            font-weight: bold;
+            margin-left: 0;
+          };
+        }
+
+        app-drawer {
+          text-align: left;
+          border-left: 1px solid #ccc;
+        }
+
+        app-toolbar paper-icon-button {
+          --paper-icon-button-ink-color: white;
+        }
 
-    <style>
-      :host {
-        @apply(--layout-fit);
-        @apply(--layout-vertical);
-        @apply(--paper-font-common-base);
-        font-family: sans-serif;
-      }
-
-      app-toolbar {
-        background: var(--paper-pink-500);
-        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
-        color: white;
-        z-index: 1;
-        color: white;
-        --paper-toolbar-title: {
+        paper-badge {
+          margin-top: 5px;
+        }
+
+        paper-badge[label="0"] {
+          opacity: 0;
+        }
+
+        @media (min-width: 640px) {
+
+          paper-badge {
+            display: none;
+          }
+
+        }
+
+        #itemsList,
+        #selectedItemsList {
+          @apply(--layout-flex);
+        }
+
+        .item {
+          @apply(--layout-horizontal);
+          cursor: pointer;
+          padding: 16px 22px;
+          border-bottom: 1px solid #DDD;
+        }
+
+        .item:focus,
+        .item.selected:focus {
+          outline: 0;
+          background-color: #ddd;
+        }
+
+        .item.selected .star {
+          color: var(--paper-blue-600);
+        }
+
+        .avatar {
+          height: 40px;
+          width: 40px;
+          border-radius: 20px;
+          box-sizing: border-box;
+          background-color: #ddd;
+        }
+
+        .pad {
+          @apply(--layout-flex);
+          @apply(--layout-vertical);
+          padding: 0 16px;
+        }
+
+        .primary {
           font-size: 16px;
+        }
+
+        .secondary {
+          font-size: 14px;
+        }
+
+        .dim {
+          color: gray;
+        }
+
+        .star {
+          width: 24px;
+          height: 24px;
+        }
+
+        paper-item {
+          white-space: nowrap;
+          cursor: pointer;
+          position: relative;
+        }
+
+        paper-item:hover::after {
+          content: "－";
+          width: 16px;
+          height: 16px;
+          display: block;
+          border-radius: 50% 50%;
+          background-color: var(--google-red-300);
+          margin-left: 10px;
           line-height: 16px;
+          text-align: center;
+          color: white;
           font-weight: bold;
-          margin-left: 0;
-        };
-      }
-
-      app-toolbar paper-icon-button {
-        --paper-icon-button-ink-color: white;
-      }
-
-      #itemsList,
-      #selectedItemsList {
-        @apply(--layout-flex);
-      }
-
-      .item {
-        @apply(--layout-horizontal);
-        cursor: pointer;
-        padding: 16px 22px;
-        border-bottom: 1px solid #DDD;
-      }
-
-      .item:focus,
-      .item.selected:focus {
-        outline: 0;
-        background-color: #ddd;
-      }
-
-      .item.selected .star {
-        color: var(--paper-blue-600);
-      }
-
-      .avatar {
-        height: 40px;
-        width: 40px;
-        border-radius: 20px;
-        box-sizing: border-box;
-        background-color: #ddd;
-      }
-
-      .pad {
-        @apply(--layout-flex);
-        @apply(--layout-vertical);
-        padding: 0 16px;
-      }
-
-      .primary {
-        font-size: 16px;
-      }
-
-      .secondary {
-        font-size: 14px;
-      }
-
-      .dim {
-        color: gray;
-      }
-
-      .star {
-        width: 24px;
-        height: 24px;
-      }
-
-      paper-badge {
-        -webkit-transition: all 0.1s;
-        transition: all 0.1s;
-        opacity: 1;
-        margin-top: 5px;
-      }
-
-      paper-badge[label="0"] {
-        opacity: 0;
-      }
-
-      #starredView {
-        width: 200px;
-        border-left: 1px solid #ddd;
-      }
-
-      paper-item {
-        white-space: nowrap;
-        cursor: pointer;
-        position: relative;
-      }
-
-      paper-item:hover::after {
-        content: "－";
-        width: 16px;
-        height: 16px;
-        display: block;
-        border-radius: 50% 50%;
-        background-color: var(--google-red-300);
-        margin-left: 10px;
-        line-height: 16px;
-        text-align: center;
-        color: white;
-        font-weight: bold;
-        text-decoration: none;
-        position: absolute;
-        right: 15px;
-        top: calc(50% - 8px);
-      }
-
-      .noSelection {
-        color: #999;
-        margin-left: 10px;
-        line-height: 50px;
-      }
-
-      .twoColumns {
-        @apply(--layout-flex);
-        @apply(--layout-horizontal);
-        overflow: hidden;
-      }
-
-      #starredView {
-        @apply(--layout-vertical);
-      }
-
-    </style>
+          text-decoration: none;
+          position: absolute;
+          right: 15px;
+          top: calc(50% - 8px);
+        }
 
-    <template>
-      <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
+        .no-selection {
+          color: #999;
+          margin-left: 10px;
+          line-height: 50px;
+        }
 
-      <app-toolbar>
-        <div title>Selection using iron-list</div>
-        <div>
-          <paper-icon-button icon="icons:star" alt="Starred" on-tap="_toggleStarredView"></paper-icon-button>
-          <paper-badge label$="[[selectedItems.length]]"></paper-badge>
-        </div>
-      </app-toolbar>
+        iron-list {
+          @apply(--layout-flex);
+        }
+
+      </style>
+      <iron-ajax url="data/contacts.json" last-response="{{data}}" auto></iron-ajax>
 
-      <div class="twoColumns">
-        <!-- Main List for the items -->
-        <iron-list id="itemsList" items="[[data]]" selected-items="{{selectedItems}}" selection-enabled multi-selection>
-          <template>
+      <app-drawer-layout fullbleed>
+        <div class="content">
+          <app-toolbar class="pink-toolbar">
+            <div title>Selection using iron-list</div>
             <div>
-              <div tabindex$="[[tabIndex]]" aria-label$="Select/Deselect [[item.name]]" class$="[[_computedClass(selected)]]">
-                <img class="avatar" src="[[item.image]]">
-                <div class="pad">
-                  <div class="primary">
-                    [[item.name]]
+              <paper-icon-button icon="star" alt="Starred" drawer-toggle></paper-icon-button>
+              <paper-badge label$="[[selectedItems.length]]"></paper-badge>
+            </div>
+          </app-toolbar>
+          <!-- Main List for the items -->
+          <iron-list id="itemsList" items="[[data]]" selected-items="{{selectedItems}}" selection-enabled multi-selection>
+            <template>
+              <div>
+                <div tabindex$="[[tabIndex]]" aria-label$="Select/Deselect [[item.name]]" class$="[[_computedClass(selected)]]">
+                  <img class="avatar" src="[[item.image]]">
+                  <div class="pad">
+                    <div class="primary">
+                      [[item.name]]
+                    </div>
+                    <div class="secondary dim">[[item.shortText]]</div>
                   </div>
-                  <div class="secondary dim">[[item.shortText]]</div>
+                  <iron-icon icon$="[[iconForItem(selected)]]" class="star"></iron-icon>
                 </div>
-                <iron-icon icon$="[[iconForItem(selected)]]" class="star"></iron-icon>
+                <div class="border"></div>
               </div>
-              <div class="border"></div>
-            </div>
-          </template>
-        </iron-list>
-        <div id="starredView" hidden$="[[!showSelection]]">
-          <template is="dom-if" if="[[!selectedItems.length]]">
-            <div class="noSelection">Select a contact</div>
-          </template>
-          <!-- List for the selected items -->
-          <iron-list id="selectedItemsList" items="[[selectedItems]]" hidden$="[[!selectedItems.length]]">
-            <template>
-              <paper-item tabindex$="[[tabIndex]]" on-tap="_unselect" aria-label$="Deselect [[item.name]]">[[item.name]]</paper-item>
             </template>
           </iron-list>
         </div>
-      </div>
+        <app-drawer align="right">
+          <div class="content">
+            <app-toolbar class="white-toolbar">
+              <div title>[[_getFormattedCount(selectedItems.length)]] Selected contacts</div>
+            </app-toolbar>
+            <template is="dom-if" if="[[!selectedItems.length]]">
+              <div class="no-selection">Select a contact</div>
+            </template>
+            <!-- List for the selected items -->
+            <iron-list id="selectedItemsList" items="[[selectedItems]]" hidden$="[[!selectedItems.length]]">
+              <template>
+                <paper-item tabindex$="[[tabIndex]]" on-tap="_unselect" aria-label$="Deselect [[item.name]]">[[item.name]]</paper-item>
+              </template>
+            </iron-list>
+          </div>
+        </app-drawer>
+      </app-drawer-layout>
+
     </template>
-  </dom-module>
 
-  <script>
+    <script>
 
-    HTMLImports.whenReady(function() {
+      HTMLImports.whenReady(function() {
 
-      Polymer({
+        Polymer({
 
-        is: 'x-app',
+          is: 'x-app',
 
-        properties: {
-          selectedItems: {
-            type: Object
+          properties: {
+            selectedItems: {
+              type: Object
+            }
           },
 
-          showSelection: {
-            type: Boolean,
-            value: true,
-            observer: '_showSelectionChanged'
-          }
-        },
-
-        iconForItem: function(isSelected) {
-          return isSelected ? 'star' : 'star-border';
-        },
-
-        _computedClass: function(isSelected) {
-          var classes = 'item';
-          if (isSelected) {
-            classes += ' selected';
-          }
-          return classes;
-        },
-
-        _unselect: function(e) {
-          this.$.itemsList.deselectItem(e.model.item);
-        },
+          iconForItem: function(isSelected) {
+            return isSelected ? 'star' : 'star-border';
+          },
 
-        _toggleStarredView: function() {
-          this.showSelection = !this.showSelection;
-        },
+          _computedClass: function(isSelected) {
+            var classes = 'item';
+            if (isSelected) {
+              classes += ' selected';
+            }
+            return classes;
+          },
 
-        _showSelectionChanged: function() {
-          this.$.selectedItemsList.fire('resize');
-        }
-      });
+          _unselect: function(e) {
+            this.$.itemsList.deselectItem(e.model.item);
+          },
 
-   });
+          _getFormattedCount: function(count) {
+            return count > 0 ? '(' + count + ')' : '';
+          }
+        });
 
-  </script>
+     });
 
-</head>
-<style is="custom-style">
-  body {
-    @apply(--layout-fullbleed);
-  }
-</style>
-<body unresolved>
+    </script>
+  </dom-module>
 
   <x-app></x-app>
 
diff --git a/iron-list.html b/iron-list.html
index 56f2dac5..3963f4b2 100644
--- a/iron-list.html
+++ b/iron-list.html
@@ -141,12 +141,7 @@
 
 @group Iron Element
 @element iron-list
-@demo demo/index.html List of cards
-@demo demo/selection.html Items selection
-@demo demo/collapse.html Collapsable items
-@demo demo/scroll-threshold.html Scroll thesholds
-@demo demo/grid.html Grid layout
-@demo demo/basic.html Basic list
+@demo demo/index.html
 
 -->
 
